Hyper Text Markup Language, kısaltması HTML5 anlamına gelen bir biçimlendirme dilidir. Web sayfalarının görünümünün değiştirilmesinin yanı sıra görünümlerinde ayarlamalar yapılmasını sağlayan bir sistemdir. Ayrıca web için içerik yapılandırmak ve sunmak için kullanılır.
HTML5 ile Brave, Firefox, Chrome, Explorer, Safari ve daha fazlası gibi tarayıcılar belirli bir web sayfasının nasıl görüntüleneceğini, öğelerin nerede olduğunu, görüntülerin nereye yerleştirileceğini ve metnin nereye yerleştirileceğini bilebilir.
HTML5 dışında, bir siteye biçim ve etkileşim vermek için gerekli olan başka diller de vardır, ancak herhangi bir sayfanın temel yapısı önce HTML5 dilinde tanımlanır.
Sayfa içeriği
HTML ne demek?
HTML'yi anlamak için önce kelimenin anlamını öğrenelim.
HTML, Hypertext Markup Language anlamına gelen Köprü Metni İşaretleme Dili'nin kısaltmasıdır.
- Hypertext: İlgili öğeleri iletmek için düzenlenen metin (genellikle görüntülerin yanı sıra yerleştirmeler de içerir).
- Markup: Basılı veya elektronik kopya biçiminde yazdırılacak herhangi bir şeyi dizmek için bir stil kılavuzu.
- Language: Bir bilgisayar sisteminin anladığı ve komutları yorumlamak için kullandığı bir dil.
HTML, web sayfalarının yapısını belirler. Bu yapı tek başına bir web sayfasının iyi ve etkileşimli görünmesi için yeterli değildir. Böylece HTML'ni güzelleştirmek ve etkileşim eklemek için css ve javascript gibi diller kullanacaksın.
Bu durumda, bu üç dilli (HTML, css ve javascript) şu şekilde parçalamayı seviyorum: bunlar bir insan vücudu gibidir.
- HTML iskelettir,
- css cilt ve dış görünüştür,
- javascript ise yapıya ve cilde hayat veren dolaşım, sindirim ve solunum sistemleridir.
HTML, css ve javascript'e şu şekilde de bakabilirsin: HTML bir evin yapısıdır, css iç ve dış dekordur ve javascript, evi yaşanabilir kılan elektrik, su sistemi ve diğer birçok işlevsel özelliktir.
HTML5 hakkında bu kadar harika olan ne?
HTML5, tarayıcı eklentileri gibi ek yazılımlar gerektirmeden çevrimiçi yapmak isteyeceğin hemen her şeyi sunmak için tasarlanmıştır. Animasyondan uygulamalara, müzikten filmlere kadar her şeyi yapar ve tarayıcınızda çalışan inanılmaz derecede karmaşık uygulamalar oluşturmak için de kullanılabilir.
Daha Fazlada var. HTML5 tescilli değildir, bu nedenle onu kullanmak için telif ücreti ödemeni gerekmez. Aynı zamanda çapraz platformdur, yani tablet veya akıllı telefon, netbook, dizüstü bilgisayar veya ultrabook veya Smart TV kullanmanı farketmez: tarayıcın HTML5'i destekliyorsa, kusursuz çalışması gerekir. Ve tüm tarayıcıların HTML5'i desteklediğini bilmeni istiyorum.
HTML5 ne yapabilir
HTML ile birçok şey yapabilir, mesela sayfaya resimler, formlar, videolar veya şarkılar gibi ses klipleri ekleyebilir veya sayfa düzenleri, paragraflar veya aklınıza gelebilecek her şeyi ekleyebilirsin.
HTML, bir oyun veya web sitesi oluşturabilir veya komut dosyaları oluşturabilir ve dili öğrenirken öğreneceğin birçok şeyi yapabilir.
HTML etiketleri
HTML, belirli bir web sayfasının işaretlemesini tanımladığından, metnin, resimlerin veya diğer yerleştirmelerin belirli şekillerde görünmesini isteyeceksin.
Örneğin, bazı metinlerin büyük, diğer metnin küçük ve bazılarının kalın, italik veya madde işareti biçiminde olmasını isteyebilirsin.
HTML'de bunu yapmanı izin veren "etiketler" vardır. Bu nedenle, başlıklar, paragraflar, kalın harflerle yazılmış kelimeler, italik kelimeler ve daha fazlasını oluşturmak için etiketler vardır.
Aşağıdaki resim bir HTML etiketinin anatomisini açıklamaktadır:
HTML öğeleri
Öğe, açılış etiketi, içerik ve kapanış etiketinden oluşur.
Bazı öğeler boştur, yani bir kapanış etiketi yoktur, bunun yerine web sayfasına eklemek istediğin içeriğe bir kaynak veya bağlantı içerir.
Boş bir öğeye örnek, görüntüleri bir web sayfasına gömmek için kullandığın <img>'dir.
HTML öğeleri genellikle etiketlerle birbirinin yerine kullanılır, ancak ikisi arasında çok az fark vardır. Öğe, açılış ve kapanış etiketinin ve ardından aradaki içeriğin birleşimidir.
Bir HTML öğesinin anatomisini görselleştirmeni yardımcı olması için başka bir resim yaptım:
HTML özellikleri
HTML etiketleri ayrıca özellik adında şeyi alır. Bu özellikler açılış etiketine yerleştirilir ve stil ve kimliklerden sınıflara kadar değişir. Öğe hakkında daha fazla bilgi ileten ve javascript ile stil ve düzenleme gibi şeyler yapmanı yardımcı olan değerleri alırlar.
Aşağıdaki infografikte açılış etiketi, "ens" değerine sahip bir class özellik içeriyor. Bu, öğeye stil vermek veya etkileşim için javascript ile seçmek için kullanılabilir.
Buraya temel bir HTML sayfasının anatomisi ekledim:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>HTML'in tanımı</title>
- </head>
- <body>
- <!--Metin ve resim gibi sayfa içeriği buraya girer-->
- </body>
- </html>
Buradaki önemli kod parçalarına bakalım:
- <!DOCTYPE html>: Bu kodda HTML5 kullandığımızı belirtir. HTML5'in tanıtımından önce, <!Doctype> etiketiyle hangi HTML sürümünü kodladığını açıkça belirtmeni gerekiyordu. Örneğin, HTML4.0, 3.2 vb. Ama artık buna ihtiyacımız yok. Kodda “html” yazıldığında, tarayıcı otomatik olarak HTML5'te kod yazdığını varsayar.
- <html></html>: Her HTML belgesinin kökü veya en üst düzey öğesi. Diğer her öğe içine sarılmalıdır.
- <head></head>: HTML belgesinin en önemli bölümlerinden biridir. web tarayıcıları, sayfa hakkında önemli bilgiler almak için head etiketlerinin içine bakar. Sayfa başlığı, stil sayfaları, SEO için meta bilgiler ve çok daha fazlası gibi bilgileri içerir.
- <meta />: Bu, sayfayla ilgili meta bilgileri taşıyan boş bir öğedir. Bu tür bilgiler, yazarı, ne tür kodlama kullandığını (neredeyse her zaman UTF-8), yanıt verebilirlik, uyumluluk ve çok daha fazlasını içerebilir. Web tarayıcıları, SEO'da çok önemli bir rol oynayacak olan web sayfası hakkında bilgi almak için her zaman meta etikete bakar.
- <title></title>: Bu, web sayfasının başlığını tanımlar. Her zaman tarayıcı sekmesinde gösterilir. Mesela bu dersin başlığı 'HTML5 Nedir? ~ HTML öğren'
- <body></body>: HTML belgesinin tüm içeriği body etiketinin içinde bulunur. Tüm sayfada yalnızca bir <body> etiketi olabilir.
Semantik HTML nedir?
Semantik HTML, HTML etiketlerini ne için kullanıldıklarının gerçek anlamını ilettiği anlamına gelir.
Semantik, 90'ların başında başlangıcından bu yana HTML'nin ayrılmaz bir parçası olmuştur. Ancak, CSS'nin çoğu tarayıcıda çalışmaya başladığı 90'ların sonlarına kadar hiçbir zaman özel bir alaka kazanmadı.
Semantik HTML ile, <div> ve <span> ingilizce dili bağımsız etiketler istenmeyen ve sevilmediği gibi sonraki kodlara kıyasla önerilmez, <header>, <nav>, <main>, <section>, <footer> ve <article> gibi yaptıklarının aynısını yapabildiği anlamsal olarak daha açıklayıcı etiketler olduğundan daha çok kolay olur ve daha çok kişi seviyor.
Semantik etiketleri kullanmanın göze çarpan bir avantajı, web tarayıcılarının web sayfasını veya web sitesini kolayca dizine ekleyebilmeleri ve karşılığında SEO'yu geliştirmesidir.
Ayrıca, semantik kullanan bir web sitesi, web sitelerine erişmek için ekran okuyucu kullananlar için daha bilgilendirici, uyarlanabilir ve erişilebilir hale gelir.
Önemli Semantik Etiketler ve Yaptıkları
En sık kullanılan Semantik HTML etiketlerinden bazılarına bakalım:
- <header>: <header> öğesi, bir web sayfasının giriş bölümünü tanımlar. Logo, gezinme, tema değiştirici ve arama çubuğu gibi öğeler içerir.
- <nav>: <nav> öğesi, ana sayfa, iletişim, hakkında, SSS vb. gibi sayfanın gezinme öğelerini belirtir.
- <main>: <main> öğesi geleneksel olarak etiketin doğrudan alt öğesi olarak kabul edilir. HTML belgesinin <header> ve <footer> dışındaki ana bölümlerini içerir. İdeal olarak, HTML belgesinin tamamında bunlardan yalnızca biri olmalıdır.
- <section>: <section> öğesi, web sayfasının belirli bir bölümünü tanımlar. Bu, vitrin bölümü, hakkında bölümü, iletişim bölümü veya diğerleri olabilir. Tek bir HTML belgesinde çok sayıda bölüm kullanabilirsin.
- <article>: <article> öğesi, belirli bilgileri taşıyan bir web sayfasının belirli bir bölümünü temsil eder. Bu tür bilgiler metin, resim, video ve yerleştirmelerin bir kombinasyonu olabilir. Bu öğeye, diğer blog gönderilerinden alıntılar içeren bir sayfada bağımsız bir blog gönderisi olarak bak.
- <aside>: Adından da anlaşılacağı gibi, bu bir web sayfasındaki bir kenar çubuğunu temsil eder. Genellikle ana içerikle doğrudan ilgili olmayan web sayfasının bir parçasıdır.
- <footer>: <footer> öğesi, hızlı bağlantılar, telif hakkı bilgileri veya tüm web sitesi veya web sayfasıyla ilgili diğer veriler gibi öğeleri barındırır.
Semantik öğeler gerçek anlamı ve belirli bir içeriğin gerçekte ne yaptığını ilettiğinden, bu öğelerin otomatik olarak olması gereken yere konumlanmadığına dikkat et. Bunu hala CSS ile yapmak zorundasın.
Basit bir Semantik HTML belgesi şöyle görünür:
- <!DOCTYPE html>
- <html lang="tr">
- <head>
- <meta charset="UTF-8" />
- <title>HTML"in tanımı</title>
- </head>
- <body>
- <header>
- <h1 class="logo">LOGO</h1>
- <nav>
- <ul>
- <li>Ana Sayfa</li>
- <li>Kod Editor</li>
- <li>Kod Dönüştürücü</li>
- <li>Color Picker</li>
- <li>Yardım</li>
- <li>Araştırma</li>
- </ul>
- </nav>
- </header>
- <main>
- <section class="makale">
- <article>
- HTML, Web programlama öğrenmeye başlayacak herkes için çok önemli bir dildir ve hiçbir web programcısı için asla vazgeçilemez.
- HTML, programlama yolculuğunu başlayacağın dildir, en kolay dillerden biridir ve herhangi bir web programcısı için başlangıç noktasıdır.
- </article>
- </section>
- <section class="contact-me">
- Soical media
- <a href="https://Instagram.com/kaneki4kudo">Instagram</a>
- </section>
- <aside class="address">Benim adresim</aside>
- </main>
- <footer>© 2022 Tüm hakları Saklıdır</footer>
- </body>
- </html>
Tarayıcıda şöyle görünüyor:
<aside> etiketinin içindeki içeriğin kenar çubuğunda olmadığını ve <nav> etiketinin içindeki içeriğin gezinme çubuğu olarak otomatik olarak kullanılamadığını görebilirsin. Bu yüzden yine de CSS ile görünmeleri gerektiği gibi görünmelerini sağlamalısın.
HTML5'i nereden öğreneceğim?
Umarım bu makale HTML'nin temellerini ve ne işe yaradığını öğrenmeni yardımcı olmuştur. Artık CSS ve JavaScript gibi daha gelişmiş teknikleri öğrenmeye başlayabilir ve ardından web geliştirme alanında sağlam bir kariyer oluşturmaya başlayabilirsin.
HTML dilini öğrenmeye başlamak istiyorsan, bu kursu ondan öğrenmek için bir referans olarak kullanabilirsin, hatta şimdi k-html.com'daki dersleri okuyarak başlayabilirsin.
HTML çok kolay bir dildir ve çok çalışırsan bir haftayı geçmeyen kısa bir sürede bile öğrenebilirsin.
Bu kurs büyük bir özenle hazırlanmıştır ve öğrenmek için tamamen ücretsizdir, bu kursu oluşturmak ve en iyi hale getirmek için bir yılı aşkın süredir çalıştım.
HTML öğrenmek istiyorsan, HTML öğren HTML öğrenmeye başlamak için en iyi kurs ve kaynaktır.
Umarım bu makale anlaşılması kolay olmuştur ve senin için yararlı olmuştur, okuduğun için teşekkür ederim.