Buradasın

HTML5 Eğitim Videosu

youtube.com/watch?v=y745R3Lv9WI

Yapay zekadan makale özeti

Kısa
Ayrıntılı

Bu video, Mustafa Murat Coşkun tarafından sunulan ve Yazılım Bilimi kanalında yayınlanan bir HTML5 eğitim serisidir. Eğitmen, Visual Studio Code kullanarak HTML kodlamasını adım adım göstermektedir.
Video, HTML5'in temel yapılarından başlayarak ileri seviye konulara kadar kapsamlı bir şekilde ele almaktadır. İçerikte HTML'in ne olduğu, temel yapısı, meta etiketleri, başlık etiketleri, paragraf etiketleri, formatlama etiketleri, link verme, resim ekleme, tablolar, listeler, video ve ses ekleme, block ve inline elemanlar, div ve span etiketleri, id ve class kullanımı, sayfa içi linkleme ve form elemanları gibi konular detaylı olarak anlatılmaktadır.
Eğitim, web sayfası oluşturma sürecinde kullanılabilecek tüm temel HTML5 öğelerini içermekte ve her konu için kod örnekleriyle gösterilmektedir. Ayrıca, CSS3'e geçiş yapmadan önce HTML5'in temel özelliklerini kapsamlı şekilde ele almaktadır.

HTML Kursuna Giriş: Bu video, HTML, CSS ve CSS Flexbox öğrenmeye yönelik bir ders serisinden biridir.
Videolar, Engin Demiro ile beraber Udemy üzerinde ortak hazırlanan komple web geliştirme eğitiminden alınmıştır.
Kursa Udemy üzerinden ulaşılabilir ve videonun açıklama satırında indirimli satın alma linki bulunmaktadır.
00:33HTML'in Tanımı: HTML, programlama dili değil, bir işaretleme dilidir ve web sayfalarının iskeletini oluşturmak için kullanılır.
HTML'in açılımı Hypertext Markup Language'dır.
Web sayfaları, sunucuların HTML, CSS, JavaScript ve diğer yapıları göndererek, tarayıcılarımızın arayüzlerini oluşturmasıyla oluşur.
01:17İlk Web Sitesi ve HTML Dökümanı: Dünyanın ilk web sitesi, HTML'in geliştiricisi Tim Berners-Lee tarafından oluşturulmuştur.
Web tarayıcılarında web geliştirici araçları bulunur ve bu araçlar sayesinde HTML dökümanlarına erişilebilir.
HTML dökümanına erişmek için "View Page Source" seçeneği kullanılabilir veya "Inspect" seçeneği ile web geliştirici konsolu açılarak sayfanın yapısı incelenebilir.
03:14Web Geliştirici Konsolu Kullanımı: Web geliştirici konsolu, F12 tuşu ile veya sayfanın boş bir kısmında "Inspect" seçeneği ile açılabilmektedir.
Konsol sayesinde HTML etiketlerinin hangi kısımları oluşturduğunu görebilir ve etiketleri değiştirebilirsiniz.
Değişiklikler, sayfanın yenilendiğinde kaybolur ve orijinal doküman yeniden yüklenir.
05:12HTML Öğrenme Kaynakları: HTML etiketlerini ezberlemek yerine, W3Schools gibi web sitelerinden öğrenmek daha etkili olacaktır.
W3Schools, HTML öğrenmek için kapsamlı dökümanlar ve örnekler sunmaktadır.
Bu kaynaklar, etiketleri unuttuğunuzda hızlıca başvurabileceğiniz bir referanstır.
06:02HTML Dökümanı Yapısı: HTML dökümanları, "DOCTYPE html" ile başlar ve temel yapısı "html", "head" ve "body" etiketlerinden oluşur.
"head" kısmına web sayfasının başlığı ve meta etiketleri yazılır, bu içerikler sayfada görünmez.
"body" kısmına ise web sayfasının içeriği eklenir ve bu içerikler sayfada görüntülenir.
09:20HTML Sayfası Oluşturma ve Live Server Kullanımı: HTML sayfasında başlık eklemek için title etiketi kullanılır ve sayfa başlığı "This is my website" şeklinde belirlenebilir.
HTML sayfasını görüntülemek için Live Server kullanılır, sağ tıklayıp "Open with Live Server" seçeneği ile sayfa açılabilir.
Sayfada body etiketinin altına herhangi bir içerik yazılmadığı için sayfa boş görünür, ancak title etiketi sayfanın başlığını belirler.
11:22Meta Etiketleri: Meta etiketleri, arama motorlarına bilgi vermek ve sayfaları nitelemek için kullanılır ve head etiketinin içine yazılır.
Charset meta etiketi, web sayfasının karakter setini belirler ve Türkçe karakterlerin düzgün görüntülenmesi için UTF-8 kullanılabilir.
Meta etiketleri name ve content özelliklerine sahiptir ve sayfada anahtar kelimeler (keywords), açıklama (description) ve sahibi gibi bilgileri içerir.
15:25HTML Yorumları ve Temel Etiketler: HTML'de yorum eklemek için "!--" ile başlayıp "--" ile bitiren bir yapı kullanılır ve bu yorumlar web sayfasında görünmez.
Heading etiketleri (h1, h2, h3, h4, h5, h6) başlık oluşturmak için kullanılır ve sayı büyüdükçe başlık boyutu küçülür.
HTML sayfası oluşturmak için Visual Studio Code'da "!" yazıp Tab tuşuna basarak otomatik layout oluşturulabilir.
18:29HTML'de Başlık ve Paragraf Etiketleri: Başlık etiketleri (h1, h2, h3, h4, h5, h6) kullanılarak web sayfasında başlıklar oluşturulabilir ve h3 etiketi genellikle başlık olarak kullanılır.
Paragraf etiketi (p) kullanılarak web sayfasına paragraflar eklenebilir ve Visual Studio Code'da "lorem" komutu ile otomatik paragraf metni oluşturulabilir.
BR etiketi bir sonraki satıra geçmeyi, HR etiketi ise paragraflar arasında düz bir çizgi bırakmayı sağlar.
21:18Inline CSS Kullanımı: HTML5 sadece basit sayfalar oluşturmak için kullanılır, profesyonel sayfalar için CSS kullanılır.
Inline CSS, elementlere doğrudan stil eklemek için kullanılır ve "style" attribute ile başlar.
"background-color" özelliği ile sayfa arka plan rengi değiştirilebilir, "color" özelliği ile yazı rengi, "font-size" özelliği ile yazı boyutu ayarlanabilir.
24:27HTML Formatlama Etiketleri: HTML'de formatlama etiketleri kullanılarak metinlerin görünümü değiştirilebilir.
Strong etiketi metni kalın yapar, em etiketi metni italik yapar, small etiketi metni küçültür ve mark etiketi metni vurgular.
Pre etiketi kullanılarak metinlerin orijinal formatı korunabilir, bu sayede şiirler gibi metinler doğru şekilde görüntülenebilir.
28:27HTML Formatlama Etiketleri: Etiketler, şiir ve benzeri formatlama işlemlerinde kullanılabilir.
W3 Schools'tan "HTML formating" araması yaparak farklı formatlama etiketlerine ulaşılabilir.
Sub etiketi, metni alt yazı şeklinde göstermek için kullanılır.
29:29HTML'de Link Verme: HTML sayfalarında link vermek için "a" etiketi kullanılır.
Linkin nereye yönleneceği "href" attribute ile belirtilir.
Linkin yeni bir sekmede açılması için "target" attribute'ına "blank" değeri verilir.
Linkin üzerine geldiğinde görünen metin için "title" attribute kullanılır.
31:46Yerel Dosyalara Link Verme: Kendi web sitemizdeki dosyalara link vermek için "http" kullanılmaz.
Yerel dosyalara link verirken dosya yolu belirtilir, örneğin "3-starlink.html".
Yeni bir sekmede açılması için "target" attribute'ına "blank" değeri verilir.
Linklerin görünümü, tıklanıp tıklanmadığına göre farklı renkte olabilir.
33:51Resim Ekleme: Web sayfalarına resim eklemek için "img" etiketi kullanılır.
Resmin kaynak adresi "src" attribute ile belirtilir.
Resmin boyutu "width" ve "height" attribute'larla ayarlanabilir.
Resim yüklenemediğinde "alt" attribute ile alternatif bir metin gösterilebilir.
37:16Yerel Resim Dosyalarını Ekleme: Kendi web sayfamızdaki resimlere link vermek için dosya yolu belirtilir.
Aynı klasördeki bir dosyaya link verirken "./" simgesi kullanılır.
Alt klasördeki bir dosyaya link verirken "./alt_klasör/dosya_adi" formatı kullanılır.
38:53HTML5'de Link Oluşturma: HTML5'de bir link oluşturmak için "a" etiketi kullanılır ve "href" özelliği ile link adresi belirtilir.
"img" etiketi ile görüntü eklenebilir ve "target" özelliği ile link farklı bir sekmede açılabilir.
Link oluşturulduktan sonra tıklandığında belirtilen URL'e yönlendirilir.
39:40HTML5'de Tablo Oluşturma: HTML5'de tablo oluşturmak için "table" etiketi kullanılır.
Tablonun başlık satırı için "thead" etiketi ve "th" etiketi ile başlık hücreleri oluşturulur.
Tablonun içeriği için "tbody" etiketi ve "tr" ile satır, "td" ile hücreler eklenir.
42:24Tablo Biçimlendirme: HTML5 tablolarında varsayılan olarak köşeler görünmez, ancak CSS ile köşeler eklenebilir.
"border-collapse" özelliği ile köşeler birleştirilebilir.
Tablo yapısı semantik olarak "thead" ve "tbody" etiketleri kullanılarak daha anlaşılır hale getirilebilir.
43:41HTML5'de Liste Oluşturma: HTML5'de iki tür liste bulunur: sırasız liste (ul) ve sıralı liste (ol).
Sırasız liste için "ul" etiketi ve liste elemanları için "li" etiketi kullanılır.
Liste elemanlarının önündeki simgeler "type" özelliği ile "circle" (daire), "square" (kare) veya "none" (hiçbiri) olarak değiştirilebilir.
46:01Liste Yapısı: Liste elemanlarının altında alt liste oluşturulabilir.
Alt liste için yeni bir "ul" etiketi açılarak alt liste elemanları eklenebilir.
Visual Studio Code'da kopyalama işlemi için Mac'te "Alt+Shift+Alt" tuşları kullanılabilir.
47:23Sıralı ve Sırasız Listeler: C şeklinde dillerde alt bir liste şeklinde sırasız listeler oluşturulabilir.
Sıralı liste, bir, iki, üç veya abc şeklinde ilerleyen listelerdir ve "ol" (ordered list) etiketi ile oluşturulur.
Sıralı listelerde başlangıç numarası "start" attribute ile belirlenebilir ve "type" attribute ile sayı, harf veya Roma rakamları kullanılabilir.
49:09HTML5 Video Etiketi: HTML5'te video etiketi kullanılarak sayfalara video eklenebilir ve "src" attribute ile video dosyası belirtilir.
HTML5'i desteklemeyen eski tarayıcılarda video çalışmayabilir, bu durumda "bilgilendirme yazısı" eklenebilir.
Video kontrolü için "controls" attribute eklenmelidir ve "autoplay" attribute ile otomatik oynatma yapılabilir.
Video genişliği "width" attribute ile ayarlanabilir.
52:43HTML5 Audio Etiketi: Audio etiketi kullanılarak müzik dosyaları web sayfalarına eklenebilir.
Audio etiketi de "src" attribute ile müzik dosyası belirtilir ve HTML5'i desteklemeyen tarayıcılarda bilgilendirme yazısı eklenebilir.
Müzik kontrolü için "controls" attribute eklenmelidir ve "autoplay" attribute ile otomatik oynatma yapılabilir.
55:11Block Level ve Inline Level Elemanlar: HTML5'te etiketlerin kendi içinde default bir display özelliği vardır: blok veya inline.
Block level elemanlar, bulunduğu bloğun genişliğini tamamen kaplayan elemanlardır.
Inline level elemanlar, sadece içeriği kadar yer kaplayan elemanlardır.
56:52Block ve Inline Seviye Elemanlar: Block seviye elemanlar (örneğin h1), içinde bulunduğu bloğun tüm genişliğini kaplayan elemanlardır.
Inline seviye elemanlar (örneğin a etiketi), sadece içeriğinin kadarı kadar yer kaplayan elemanlardır.
Block seviye elemanlar genişlik ve yükseklik özelliklerine sahip olabilirken, inline elemanlar bu özelliklere sahip değildir.
59:07CSS ile Block ve Inline Elemanları Değiştirme: Block seviye elemanlar CSS ile inline seviye elemana dönüştürülebilir ve bunun için "display: inline" özelliği kullanılır.
Inline seviye elemanlar blok seviye elemana dönüştürülebilir ve bunun için "display: block" özelliği kullanılır.
Block ve inline arasındaki temel fark, blok seviye elemanların tüm genişliği kaplaması ve inline elemanların sadece içeriği kadar yer kaplamasıdır.
1:02:04Div ve Span Etiketleri: Div ve span etiketleri, HTML'de diğer HTML elementlerini gruplamak için kullanılan iki farklı elementtir.
Div elementi bir blok seviye element, span elementi ise inline seviye bir elementtir.
Div etiketi, navigation bar, footer gibi blokları oluşturmak için kullanılırken, span etiketi metin içinde belli bir alanı stillemek için kullanılır.
1:05:47ID ve Class Öznitelikleri: ID ve class öznitelikleri CSS'de kullanılmak üzere sayfamızdaki belirli blokları temsil etmek için kullanılır.
ID özniteliği, sayfada sadece bir kez kullanılması gereken benzersiz blokları temsil etmek için kullanılır.
Class özniteliği, aynı stil uygulanacak birden fazla elemana verilebilir ve CSS'de bu elemanların hepsine aynı stil uygulanabilir.
1:08:00ID ve Class Kullanımı: Sayfada genellikle bir kez görülecek olan elementler (örneğin navbar, main, footer) için ID özniteliği kullanılabilir.
Aynı stil uygulanacak birden fazla element için class özniteliği kullanılabilir.
Bir element hem ID hem de birden fazla class'a sahip olabilir, ancak sadece bir ID olmalıdır.
1:10:25Sayfa İçindeki Bağlantılar: Sayfa içindeki bağlantılar, sayfada belirli bir konuma gitmek için kullanılır.
Sayfa içindeki bağlantılar, URL'de # işareti ve ardından ilgili elementin ID'si ile oluşturulur.
Sayfa içindeki bağlantılar, sayfada belirli bir konuma doğrudan gitmek için kullanılır.
1:14:26HTML5 Formları ve Giriş Alanları: HTML5'te form oluşturmak için form etiketi kullanılır ve bu formun altında giriş alanları oluşturulur.
Form etiketinin action özniteliği, form verilerinin gönderileceği hedef dosyayı belirtir.
Form etiketinin method özniteliği, verilerin gönderim yöntemi (GET veya POST) belirtir.
1:16:17HTML5 Input Alanları: HTML5'teki input alanları, kullanıcıların yazı yazabileceği veya parola girebildiği alanlardır.
Input oluşturmak için "input" etiketi kullanılır ve "type" özelliği ile inputun hangi türde olduğu belirtilir.
Normal bir text input için "type='text'" kullanılır ve PHP tarafında bu inputu yakalamak için "name" özelliği kullanılır.
1:17:51Label Etiketi ve Form Butonları: Label etiketi kullanılarak, label üzerine tıklandığında ilgili inputa odaklanılabilir.
Label ile input arasında bağlantı kurmak için label'da "for" attribute'ı ve inputta "id" attribute'ı kullanılır.
Formlarda "input type='submit'" ile submit butonu, "input type='reset'" ile reset butonu oluşturulabilir.
1:22:17Farklı Input Türleri: "type='email'" ile email inputu oluşturulabilir ve HTML5'in kendi validasyonu ile geçerli bir email girilmesi sağlanabilir.
"type='password'" ile parola inputu oluşturulabilir ve girilen karakterler görünmez kalır.
"type='date'" ile tarih seçimi için özel bir input oluşturulabilir.
1:25:34Radyo Butonları: Radyo butonları için name alanlarının hepsinin ortak olması gerekiyor çünkü sadece tek bir tanesini seçmek zorunludur.
Radyo butonlarında value attribute ile seçilen butonun değeri belirlenir, örneğin erkek, kadın veya belirtmek istemiyorum gibi seçenekler.
Sayfayı yenilediğinizde otomatik olarak seçili olmasını istiyorsanız, butona checked attribute ekleyebilirsiniz.
1:27:35Checkbox Özellikleri: Checkbox'lar ile birden fazla seçim yapabilirsiniz, radyo butonlarından farklı olarak.
Checkbox'lar için name attribute'ı farklı olabilir, böylece birden fazla seçeneği işaretleyebilirsiniz.
Checkbox'ların yanına açıklama yazısı eklemek için input etiketinin yanına metin yazabilirsiniz.
1:30:18Select List Oluşturma: Select list oluşturmak için select etiketi kullanılır ve her bir seçeneği option etiketi ile belirtirsiniz.
Option etiketlerine value attribute ekleyerek seçilen değerin ne olduğunu belirtebilirsiniz.
Default olarak seçili olmasını istiyorsanız, option etiketine selected attribute ekleyebilirsiniz.
1:32:33Textarea Özellikleri: Textarea oluşturmak için textarea etiketi kullanılır ve id attribute ile tanımlanabilir.
Textarea'nın boyutunu rows ve cols attribute'ları ile ayarlayabilirsiniz.
Textarea'ya placeholder attribute ekleyerek geçici bir yazı gösterebilirsiniz.
1:35:02Semantik Elemanlar: HTML'de semantik elemanlar anlamsal elemanlar anlamına gelir.
Elemanlar sadece görünümü değil, aynı zamanda bir anlam ifade eder.
Örneğin h1 etiketi bir başlık olduğunu, p etiketi ise bir paragraf olduğunu belirtir.
1:35:36HTML Kültürü ve Semantik Elemanlar: HTML geliştiricileri sürekli birbirlerinden esinlenerek bir kültür oluşturmuş durumda, örneğin sayfanın en tepesine "header", sağ kısımda "sidebar" gibi terimler kullanılır.
Semantik elemanlar (h1, h2, h3 vb.) hem görüntü olarak hem de anlamsal olarak anlam yükler, örneğin h1 etiketi sayfadaki en güçlü başlığı gösterir.
Anlamsal olmayan etiketler (div ve span) sadece kendilerinden bakıldığında içeriğin ne olduğunu anlatamaz, arama motorları da bu etiketlerden içerikleri anlamakta zorlanır.
1:38:17HTML5'in Getirdiği Semantik Elemanlar: HTML5 ile gelen semantik elemanlar (header, nav, section, footer vb.) sadece anlamsal olarak önemlidir, çıktıda değişiklik yaratmazlar.
Bu etiketler kullanıldığında arama motorları daha iyi indexleme yapabilir ve sayfalar daha iyi optimizasyona sahip olur.
Header, nav, section, footer gibi etiketler kullanılarak sayfa yapısı daha anlaşılır hale gelir.
1:40:00Semantik ve Non-Semantik HTML Kullanımı: HTML5'te semantik elemanlar kullanılmadan da sayfalar oluşturulabilir, ancak HTML5 öneriyor ki bu elemanlar kullanılsın.
Örnek olarak, div id="header" yerine header etiketi, div id="navigation" yerine nav etiketi kullanılabilir.
Header, footer, nav gibi semantik elemanlar kullanıldığında ilk bakışta sayfanın yapısı anlaşılabilir ve arama motorları daha iyi indexleme yapabilir.
1:43:29HTML5 Elemanlarının Kullanımı: Header'dan sonra bir ana section oluşturulabilir, bu section altında article etiketi kullanılarak içerikler yerleştirilebilir.
Farklı section'lar (section little, section big) kullanılarak sayfa yapısı daha karmaşık hale getirilebilir.
Nav etiketi kullanılarak navigation bar oluşturulabilir ve farklı nav'lar (top nav, side nav) farklı id'lerle ayrıştırılabilir.
1:45:46CSS'in Önemi ve Kullanımı: CSS, HTML sayfalarındaki elementleri stilleme imkanı sağlayan bir stil dilidir ve profesyonel web tasarımı için zorunludur.
CSS olmadan oluşturulan web siteleri yalın ve ilgi çekmeyen olurken, CSS ile sayfalar daha profesyonel ve çekici hale getirilebilir.
CSS öğrenmesi zaman alabilir, ancak front-end geliştirme alanında uzmanlaşmak için gerekli bir beceridir.
1:48:31CSS Kaynakları ve Kullanım Alanları: CSS referans için en iyi kaynak W3Schools'taki CSS referans kaynağıdır.
CSS-Tricks, CSS geliştiricileri tarafından sık kullanılan bir web sitesi olup, CSS özelliklerini, ipuçlarını ve güncel makaleleri içerir.
Codepen, kullanıcıların HTML, CSS ve JavaScript ile tasarımlarını online olarak oluşturup test edebileceği bir platformdur.
1:52:11CSS Kullanım Çeşitleri: CSS üç farklı kullanım şekli vardır: inline CSS, internal CSS ve external CSS.
Inline CSS, elementin kendisine style attribute ekleyerek kullanılır ve sadece o elemanı etkiler.
Internal CSS, head etiketi içindeki style etiketi arasında yazılır ve sayfadaki tüm belirtilen elementleri etkiler.
1:55:11CSS Yapısı ve Selector Kullanımı: CSS yapısında önce selector oluşturulur, ardından köşeli parantezler arasına özellikler ve değerleri yazılır.
Selector, sayfadaki belirli elementleri seçmek için kullanılır (örneğin tüm h1'leri seçmek için "h1" selector kullanılır).
CSS özellikleri ve değerleri noktalı virgül ile ayrılır, özelliklerden sonra iki nokta üst üste kullanılmaz.
1:56:59CSS Kullanım Yöntemleri: HTML sayfasında "h" etiketleri seçildiğinde, CSS ile bu etiketlerin rengi mavi olarak ayarlanmıştır.
CSS'de sadece belirli bir etiket seçildiğinde, örneğin "h1" seçildiğinde sadece o etikete stil uygulanır, "h2" veya "h3" için farklı stil uygulanmaz.
CSS'de aynı etikete birden fazla özellik eklenebilir, örneğin "h1" etiketine hem renk hem de arka plan rengi (background) eklenmiştir.
1:58:01CSS Kullanım Yöntemleri: CSS'in ikinci kullanım yöntemi, sayfanın içinde "style" etiketleri arasında CSS yazmaktır.
CSS'in üçüncü ve en yaygın kullanım yöntemi, CSS kodlarını ayrı bir dosyada oluşturup HTML sayfasına dahil etmektir.
Ayrı bir CSS dosyası oluşturmak için "new file" seçeneği kullanılarak "style.css" adında bir dosya oluşturulabilir.
1:58:48CSS Dosyasını HTML'e Dahil Etme: HTML sayfasına CSS dosyasını dahil etmek için "link" etiketi kullanılır ve "href" özelliğine CSS dosyasının yolu verilir.
CSS dosyası aynı klasördeyse, "style.css" şeklinde yeterlidir, farklı bir klasördeyse yolu da belirtmek gerekir.
Genellikle CSS dosyaları "css" adlı ayrı bir klasör altına alınır ve bu klasördeki dosyalar HTML sayfasına dahil edilir.

HTML5 Eğitim Videosu

Yapay zekadan makale özeti

Yanıtı değerlendir