Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan kapsamlı bir HTML eğitim kurusudur. Eğitmen, web geliştirme temellerini adım adım anlatmaktadır.
- Video, HTML'in temellerinden başlayarak ileri seviye konulara kadar uzanan bir yapıya sahiptir. İlk bölümde HTML'in ne olduğu, gerekli programların kurulumu ve temel HTML etiketleri (html, head, body, title, h1-h6, p, br, hr) anlatılırken, sonraki bölümlerde bağlantılar, resimler, sesler, video oynatma, metin biçimlendirme, listeler, tablolar, CSS kullanımı, div ve span etiketleri, meta etiketleri, iframe, buton ekleme ve form oluşturma konuları ele alınmaktadır.
- Eğitim, Visual Studio Code ve Google Chrome kullanarak pratik örneklerle ilerlemekte ve her konu için gerekli etiketler, parametreler ve kullanım şekilleri detaylı olarak gösterilmektedir. Video, web geliştirme öğrenmek isteyenler için temel HTML bilgilerini içermekte ve son bölümde CSS ve JavaScript öğrenme önerisiyle sonlanmaktadır.
- 00:00HTML Nedir ve Web Sitesi Yapımı
- HTML, Hypertext Markup Language'in kısaltmasıdır ve Türkçe'de metin biçimlendirme dilidir.
- HTML bir kodlama dili değil, web sitesindeki elemanları görüntülemeye yarayan bir biçimlendirme dilidir.
- Web sitesi yapımı için önce HTML ile elemanlar gösterilir, sonra CSS ile görünümü düzenlenir ve JavaScript ile kullanıcı etkileşimi eklenir.
- 00:46Web Sitesi Yapımının Bina Örneği
- Web sitesi yapımı bina yapımına benzer: önce iskelet yapılır, sonra parkeler dizilir ve duvarlar boyanır, son olarak işlevsel parçalar eklenir.
- HTML ile yazı, resim, buton gibi elemanlar görüntülenir, CSS ile düzenlenir ve JavaScript ile işlevsellik eklenir.
- Bu kursta web gelişiminin temel taşı olan HTML öğrenilecektir.
- 01:37Gerekli Programlar
- HTML kodlarını yazabilmek için iki program gereklidir: metin düzenleyici uygulaması ve tarayıcı uygulaması.
- Bu kursta Visual Studio Code metin düzenleyici ve Google Chrome tarayıcı kullanılacaktır.
- Programlar Google Chrome ve Visual Studio Code web sitelerinden indirilebilir.
- 02:22Visual Studio Code Kurulumu
- Visual Studio Code kurulumu için anlaşmayı kabul edip "sonraki" diyerek ilerlenir.
- Masaüstü simgesi oluşturulması istenebilir.
- Chrome kurulumu için çift tıklayarak açılır ve kendi kendine kurulur.
- 02:51Visual Studio Code Eklentileri
- Visual Studio Code'da iki eklenti kurulmalıdır: Prettier ve Live Server.
- Prettier eklentisi sayesinde kod daha kolay okunabilir hale gelir.
- Live Server eklentisi, yazılan kodun gerçek zamanlı olarak tarayıcıda görüntülenmesini sağlar.
- 03:28İlk HTML Dosyası Oluşturma
- Visual Studio Code'da yeni bir klasör oluşturulup, bu klasörde devam edilecektir.
- Klasör içinde "index.html" adında bir dosya oluşturulur, çünkü web tarayıcısı ilk olarak bu dosyayı açar.
- Tüm HTML dokümanları en başında <!DOCTYPE html> koduyla başlar ve bu kod HTML5'e uyumlu olduğunu gösterir.
- 04:51HTML Etiketleri ve Bölümleri
- HTML kodları açılış ve kapanış etiketleri arasına yazılır ve bu etiketler bir element oluşturur.
- Web siteleri iki temel bölümden oluşur: head bölümü ve body bölümü.
- Head bölümüne web sitesi hakkında bilgiler (başlık, ikon, dil desteği) yazılır, body kısmına ise gösterilecek elemanlar yazılır.
- 06:35Web Sitesini Tarayıcıda Görüntüleme
- Live Server eklentisi kullanılarak web sitesi tarayıcıda görüntülenebilir.
- Chrome'da açılması için Visual Studio Code'da settings'ten extensions'ın altından Live Server config'i bulunup Chrome seçilmelidir.
- Body tag'in içinde yazılan metinler web sitesinde görünür hale gelir.
- 07:43HTML Biçimlendirme Etiketleri
- HTML'de başlık yapmak için h1 etiketi kullanılır ve en büyüğü h1, en küçüğü h6 olur.
- Düz metin yazdırmak için p etiketi kullanılır.
- İki satırın arasına boşluk koymak için br etiketi, çizgili boşluk için hr etiketi kullanılır.
- 09:16HTML'de Yorum Satırları
- Yorum satırları kodlama dillerinde geliştiricilerin kod hakkında bilgi sahibi olması için kullanılır ve HTML'de <!-- --> şeklinde yazılır.
- VSCode'da yorum satırı yazmak için ünlem yazıp enter'a basıldığında, HTML dokümanında bulunması gereken tüm öğeler otomatik olarak yazılır.
- 10:23Hyperlinkler (Bağlantılar)
- Hyperlinkler (bağlantılar), web sitelerindeki yazıları, resimleri veya videoları linke dönüştürmeyi sağlar.
- HTML'de hyperlink tanımlamak için <a> etiketi kullanılır ve ilk etiketin içinde "href" parametresi bulunur.
- "target" parametresi ile linkin yeni sekmede açılması sağlanabilir, "title" parametresi ile mouse'un üzerine geldiğinde görünecek yazı belirlenebilir.
- Hyperlinkler sadece web sitelerine değil, kendi HTML dosyalarına da yönlendirilebilir.
- 13:16Resim Gösterme
- Web sitesinde resim göstermek için <img> etiketi kullanılır ve bu etiket kendi kendine kapanır.
- "source" parametresi ile resmin ismi, "width" ve "height" parametreleri ile resmin boyutu ayarlanabilir.
- "alt" parametresi ile resim yüklenmediğinde görünecek yazı, "title" parametresi ile mouse'un üzerine geldiğinde görünecek yazı belirlenebilir.
- Resimler genellikle ayrı bir klasöre atılır ve "img" etiketinde bu klasörün ismi de belirtilir.
- Resimler a etiketi ile linklenebilir, böylece tıklanıldığında belirli bir sayfaya yönlendirilebilir.
- 17:02Ses Oynatma
- Web sitesinde ses oynatmak için <audio> etiketi kullanılır ve "source" parametresi ile ses dosyasının ismi belirtilir.
- "controls" parametresi ile ses oynatıcısı görüntülenebilir, "autoplay" parametresi ile web sitesi açıldığında ses otomatik olarak çalabilir.
- "mute" parametresi ile müzik çalmaya başlayabilir ancak sesi kapatabilir, "loop" parametresi ile müzik döngü halinde çalabilir.
- 18:49HTML'de Video Oynatma
- Web sitesinde video oynatmak için önce bir video dosyası indirilmeli ve HTML dosyasının aynı klasörüne atılmalıdır.
- Video etiketini kullanarak videoyu göstermek için source parametresine video dosyasının adı girilmelidir.
- Videoyu küçültmek için width parametresi kullanılabilir, ancak oynatmak için controls parametresine gerekli kontroller eklenmelidir.
- 20:02Video Ayarları
- Video otomatik oynatılmasını istiyorsanız auto play parametresi kullanılabilir.
- Video sesi kapalı olarak oynatılmasını istiyorsanız muted parametresi kullanılabilir.
- Video bittiğinde yeniden başlamasını istiyorsanız loop parametresi kullanılabilir.
- 20:47Metin Biçimlendirme
- Metin biçimlendirme, sitede yazılan yazıları Word programında olduğu gibi düzenlemeye yarar.
- Metni kalın yapmak için b etiketi, italik yapmak için i etiketi kullanılır.
- Metni büyük yapmak için big etiketi, küçük yapmak için small etiketi kullanılır.
- 21:56Diğer Metin Biçimlendirme Etiketleri
- Alt sembol olarak yazmak için sub etiketi, üst sembol olarak yazmak için sup etiketi kullanılır.
- Altını çizmek için ins etiketi, üstünü çizmek için del etiketi kullanılır.
- Önemli olduğunu göstermek için mark etiketi kullanılır.
- 22:42HTML'de Listeler
- HTML'de üç tür liste vardır: sırasız liste, sıralı liste ve açıklama listesi.
- Sırasız liste için ul etiketi kullanılır ve listeleme için li etiketi kullanılır.
- Sıralı liste için ol etiketi kullanılır ve listeleme için li etiketi kullanılır, type parametresi ile harf veya romen rakamları kullanılabilir.
- 24:33Açıklama Listesi ve İç Liste
- Açıklama listesi için ol etiketi kullanılır ve dt (açıklama terimi) ile dd (açıklama) etiketleri kullanılır.
- Bir listenin içinde birden fazla liste oluşturmak için li etiketi kullanılır.
- İç liste oluşturmak için ul etiketi kullanılır ve alt liste için li etiketi kullanılır.
- 26:18HTML'de Tablo Yapma
- Tablo yapmak için table etiketi kullanılır.
- Tablo satırı için tr etiketi kullanılır.
- Tabloda başlık satırı için h1 etiketi kullanılır ve bu yazılar kalın yazılır.
- 27:36HTML Tablo Oluşturma
- Tabloda haftanın günleri için açılış ve kapanış saatleri yazılacak, pazartesi günleri 09:00-17:00, cumartesi ve pazar günleri kapalı olacak.
- Tablo için tr etiketi kullanılarak satırlar, th etiketi kullanılarak sütunlar oluşturulur.
- Tablonun görünümü için align parametresi center ile ortalanır, ilk satır gri, ikinci satır açık gri renge boyanır ve table etiketi siyah arka plan rengine sahip olur.
- 29:48Tablo Düzenleme
- Tablonun tüm hücrelerinin eşit büyüklükte olması için th etiketlerinin genişliği 80 olarak ayarlanır.
- Tablonun genel genişliği, tüm th etiketlerinin genişliklerinin toplamı olan 560 olarak belirlenir.
- HTML tablo oluşturma adımları: table etiketi açılır, satır sayısı kadar tr etiketi, sütun sayısı kadar th etiketi açılır, th etiketinin içinde başlık elemanları, td etiketinin içinde açıklamalar yazılır.
- 31:45CSS ile Renk Kullanımı
- Web sitesine renk katmak için CSS kullanılır, CSS ile yazı, buton gibi elemanların rengi kolaylıkla değiştirilebilir.
- CSS kullanarak bir elementin rengini değiştirmek için o elementin açılış etiketinin içine style parametresi girilir.
- Web sitesinin arka planını siyah yapmak için body etiketinin style parametresine background-color: black yazılır.
- 33:00Yazı Rengi Değiştirme
- Yazı rengini değiştirmek için style parametresine color parametresi girilir.
- Renk değiştirme için renk adı, RGB değeri veya hexadesimal değeri kullanılabilir.
- RGB değeri için Google'da color picker kullanılarak istenen renk seçilip değeri kopyalanıp yapıştırılır.
- 35:10Paragraf ve Etiket Renkleri
- Paragrafın arka plan rengi ve kendi rengi aynı anda değiştirilebilir.
- "Lorem" yazarak rastgele kelimelerden oluşan paragraf oluşturulabilir, web sitesi yapanlar bu yazıyı test etmek için kullanır.
- Paragrafın arka plan rengi ve kendi rengi aynı anda değiştirilirken noktalı virgül kullanılır.
- 36:40Span ve Div Etiketleri
- Web sitelerinde sıkça kullanılan span ve div etiketlerinden bahsedilecek.
- Span inline, div ise blok seviyesinde bir elemandır.
- Inline elemanlar sadece kendilerinin gözüktüğü kadar yer kaplarken, blok seviyesindeki elemanlar kendilerinin gözüktüğü bütün satırları kaplar.
- 37:03Div ve Span Etiketleri
- Div etiketi, içine yazılan metni bütün satırı kaplayacak şekilde yerleştirir.
- Span etiketi, içine yazılan metni sadece kendi alanını kaplayacak şekilde yerleştirir.
- Navigation bar gibi her zaman aynı satırı kaplayan öğeler için div etiketi, buton gibi sadece kendi alanını kaplayan öğeler için span etiketi kullanılır.
- 38:35Meta Etiketleri
- Meta etiketleri, web sayfasındaki içeriği tanımlayan basit kelimelerdir ve tarayıcıya veya arama motoruna web sitemizin hakkında bilgiler verir.
- Meta etiketleri head etiketinin içine yazılır ve genellikle name ve content parametreleri içerir.
- Description meta etiketi, web sitemizin içeriği hakkında bilgi verir ve arama motorları tarafından kullanılır.
- Keywords meta etiketi, web sitemizi tanımlayan küçük anahtar kelimeleri içerir.
- Author meta etiketi, web sitemizi yazan kişi hakkında bilgiler verir.
- Viewport meta etiketi, web sitemizin görüntülendiği cihazın ekrana göre ölçeklendirmesini sağlar.
- Charset meta etiketi, web sitemizin özel karakterleri destekleyen bir charset kullandığını gösterir.
- Refresh meta etiketi, web sitemizin açık olduğu zaman kaç saniyede bir sayfanın yenileneceğini belirler.
- 42:29Iframe Etiketi
- Iframe etiketi, web sayfamızda başka bir web sayfasını göstermeye yarar ve genellikle reklam göstermek için kullanılır.
- Iframe etiketi, source ve frame border parametreleri içerir.
- Source parametresi, iframe'e gösterilecek web sitesinin URL'sini belirtir.
- Frame border parametresi, iframe'in etrafında kenarlık olup olmayacağına karar verir.
- 45:04HTML'de Buton Ekleme
- Web sitemize buton eklemek için "button" etiketini kullanırız ve içine yazı yazarak çalışır hale getiririz.
- Butonu hyperlink'e dönüştürmek için "a" etiketini buton etiketinin etrafına yapıştırırız ve "href" parametresine URL'sini yazıyoruz.
- Butonu kullanıma kapatmak için "button" etiketinin içine "disabled" parametresini girebiliriz.
- 46:06Butonu CSS ile Düzenleme
- Butonun görünümünü CSS ile değiştirebiliriz; "style" parametresine girerek arka plan rengini (background-color), yazı rengini (color) ve kenar yuvarlatmasını (border-radius) ayarlayabiliriz.
- Butonun kenarlarını daha yumuşak yapmak için "border-radius" parametresine piksel değeri verebiliriz.
- 47:05Butona JavaScript Ekleme
- Butonun başka işlevlere sahip olmasını istiyorsak JavaScript kullanmamız gerekiyor.
- JavaScript kodu yazmak için "script" elementini kullanırız ve içinde fonksiyon tanımlarız.
- Butona tıklama olayı için "onclick" parametresine fonksiyonun ismini ve parantezini yazıyoruz.
- 48:31JavaScript ile Buton İşlevselliği
- Butona tıklama olayında p etiketinin içindeki yazıyı değiştirmek için önce p etiketine "id" veriyoruz.
- "document.getElementById" fonksiyonunu kullanarak p etiketini bulup, "innerHTML" özelliğini değiştirerek içeriğini değiştirebiliriz.
- Bu kod sayesinde butona tıkladığımızda p etiketinin içindeki yazı "butona bas" yerine "butona bastınız" olarak değişir.
- 50:16HTML'de Form Oluşturma
- Formlar kullanıcılardan belli verileri toplamak için kullanılır, örneğin Facebook'a kaydolma formu gibi.
- Form oluşturmak için "form" etiketini kullanırız.
- Kullanıcıdan veri çekmek için "input" etiketini kullanırız ve "type" parametresine kullanıcıdan çekmek istediğimiz değerin cinsini yazıyoruz.
- 51:24Input Etiketi Parametreleri
- Kullanıcının kutuya ne yazması gerektiğini belirtmek için "label" etiketini kullanırız.
- "id" parametresine kutuya bir isim veririz ve "for" etiketinin içine input'un id'sini yazarak label ile kutuyu bağlarız.
- "name" parametresine input'a yazdığımız değerin hangi isimle kaydedileceğini yazıyoruz.
- "placeholder" parametresi, kutuya bir şey yazılmadığında örnek bir metin gösterir.
- 53:00HTML Form Butonları
- Reset butonu oluşturmak için "input type='reset'" kullanılır ve bu buton formdaki tüm değerleri sıfırlar.
- Submit butonu, formdaki değerleri web sitesinin arka planına (backend) gönderir.
- Backend, genellikle Python veya PHP gibi dillerle yazılmış kodlarla çalışır ve action parametresi ile belirtilen dosyaya veriler gönderilir.
- 53:53Form Alanları ve Özellikleri
- Bir kutunun doldurulmasını zorunlu yapmak için "required" etiketi kullanılır.
- Şifre almak için "password" tipi kullanılır ve "maxlength" parametresi ile maksimum karakter sayısı sınırlanabilir.
- E-posta adresi almak için "email" tipi kullanılır ve geçerli bir e-posta adresi girilmediğinde uyarı verir.
- 54:52Farklı Form Alanları
- Telefon numarası almak için "tel" tipi kullanılır.
- Tarih almak için "date" tipi kullanılır ve kullanıcı kolaylıkla tarih seçebilir.
- Sayı almak için "number" tipi kullanılır ve "min" ile "max" parametreleri ile değer aralığı sınırlanabilir.
- 55:49Radyo Butonları ve Aşağı Açılır Menü
- Cinsiyet öğrenmek için radyo butonları kullanılır ve aynı "name" değerine sahip olanlar sadece biri seçilebilir.
- Radyo butonları ile label'lar "for" özelliği ile bağlanır ve "value" parametresi ile backend'e gönderilecek değer belirlenir.
- Aşağı açılır menü oluşturmak için "select" etiketi kullanılır ve seçenekler "option" etiketi ile eklenir.
- 57:48Diğer Form Alanları
- Checkbox oluşturmak için "type='checkbox'" kullanılır ve kullanıcı tıklayıp işaretleyebilir.
- Uzun metin almak için "textarea" etiketi kullanılır ve "cols" ile "rows" parametreleri ile boyutu ayarlanabilir.
- Dosya almak için "type='file'" kullanılır ve "accept" parametresi ile sadece belirli dosya türleri seçilebilir.
- 59:23Dersin Sonu
- Bu derste HTML tamamıyla öğrenilmiş olur.
- Sıradaki dersler CSS ve JavaScript olacak ve bunları öğrendikten sonra kendi web sitesi yapılabilir.
- İzleyicilerden kanala destek olmak için abone olmaları ve like atmaları isteniyor.