Bir web sayfasının arkasında birçok dil, araç ve teknoloji vardır. Ancak hepsinde ortak olan tek şey Hyper Text Markup Language’dır. HTML, web sitesi tasarımı da dahil tüm web sitelerinin temel yapısını sağlar. HTML5 ise bu günlerde kullanılan en son sürümdür.
HTML Nedir?
Hyper Text Markup Language, World Wide Web’in (WWW) birincil dilidir. Geliştiriciler bunu metin, köprüler ve multimedya dosyaları gibi web sayfası öğelerini tasarlamak için kullanır. Bu dil, metin yapılarını tanımlamak için başlıklar, tablolar ve paragraflar dahil olmak üzere çeşitli etiketler kullanarak çalışır. Her etiket, <A> ve </A> formülü kullanılarak tanımlanır. Bunlara sırasıyla ‘açma’ ve ‘kapatma’ etiketi denir. Örneğin metin stilini italik olarak değiştirmek için <i>metninizi buraya yazın</i> kullanabiliriz. Tarayıcı, içeriği bu etiketler aracılığıyla işleyecek ve ardından ekranda görüntüler.
Ancak bu dilin yalnızca statik olarak çalıştığını, dolayısıyla bunu kullanarak dinamik veya etkileşimli bir web sayfası özelliği oluşturulamayacağını unutmamalısınız. Yalnızca içerik üstbilgisi, altbilgi ve görüntü konumu gibi bir web sayfasının statik öğelerini değiştirir.
HTML Ne İçin Kullanılır?
Hyper Text Markup Language, web sitelerinin ve web tabanlı belgelerin varsayılan dilidir. Bu dil, bir tarayıcının internet üzerinden görüntülemek için belgelerin yapısını ve stilini anlamasını sağlar. Aynı zamanda bu dil, web sayfalarınızın ses, video ve tablo gibi uygulamaları barındırmasına olanak tanır. Ayrıca hiper metin aracılığıyla web sayfaları içinde veya web siteleri arasında gezinmeyi kolaylaştırır.
Bunun yanı sıra web sitesi oluşturucuları, ürün sipariş etmek, rezervasyon yapmak veya bilgi aramak için formlar tasarlamak için bu dili kullanabilir. Bu nedenle bu dil, markanızı oluşturmak ve bir e-ticaret sitesi veya çevrimiçi abonelik tabanlı bir işletme yürütmek için temel yapı taşıdır.
HTML5 Nedir?
HTML5, HTML’nin en yeni sürümüdür. Terim iki şeyi ifade eder. İlki, yeni öğeler ve nitelikler içeren güncellenmiş HTML dilinin kendisidir. İkincisi, yeni bir video formatı gibi HTML’nin bu yeni sürümüyle çalışan ve daha karmaşık ve güçlü web siteleri ve uygulamalar oluşturmanıza olanak tanıyan daha geniş teknolojiler grubudur.
Bu yeni sürüm, tüm web siteleri tarafından okunabilen bir dil olarak bilinir. Web sitesinin işlevsel ilkesi bu biçimlendirme diline dayanmaktadır. Bu nedenle bu biçimlendirme dili yeni nesil web sitelerinde yaygın olarak kullanılmaktadır. Günümüzde kullanılan birçok arama motoru, bu biçimlendirme dilini filtreleyerek sayfa hakkında ayrıntılı bilgi sağlar. Bu sürüm sayesinde makaleler, sayfalar ve hatta görseller SEO uyumlu olabilir. Kullanıcılar, web sayfasını oluştururken koda girdikleri anahtar kelimeler sayesinde web sayfalarının okunabilirliğini ve indekslenme hızını artırır. Bu nedenle HTML5 biçimlendirme dili o kadar önemlidir ki dinamik web sayfaları oluşturmak için yaygın olarak kullanılır.
HTML ile HTML5 Arasındaki Farklar
Bu iki dil arasında birçok açıdan fark vardır. Kısaca bu farklar şu şekildedir:
HTML | HTML5 |
Yerel ses ve video desteği sağlamaz. | Yerel ses ve video desteği sağlar. |
Yalnızca Flash, VML veya Silverlight gibi farklı teknolojilerle birlikte kullanıldığında vektör grafiklerini destekler. | SVG (Ölçeklenebilir Vektör Grafikleri) ve diğer sanal vektör grafiklerini destekler. |
Kısıtlı kullanımla metin içinde satır içi mathml ve SVG’ye izin verir. | Metin içinde satır içi mathml ve SVG’ye izin verir. |
Kullanıcıların daire, üçgen ve dikdörtgen gibi şekiller çizmesine izin vermez. | Kullanıcıların daire, üçgen ve dikdörtgen gibi şekiller çizmesine olanak tanır. |
Verileri geçici olarak depolamak için yalnızca tarayıcı önbelleğini ve çerezleri kullanır. | Verileri geçici olarak depolamak için web sql veritabanlarını, yerel depolamayı ve uygulama önbelleğini kullanır. |
Javascript ve tarayıcı arayüzü aynı iş parçacığında çalışır. | Javascript ve tarayıcı arayüzü ayrı başlıklarda çalışır. |
Daha uzun karakter kodlama bildirimi. | Daha kısa karakter kodlama bildirimi. |
ASCII karakter setini kullanır. | UTF-8 karakter setini kullanır. |
Hemen hemen tüm tarayıcılarla uyumludur. | Bazı tarayıcıların desteklediği birçok yeni etiket ve öğe olduğu düşünüldüğünde, yalnızca daha yeni tarayıcılarla uyumludur. |
Standart Genelleştirilmiş İşaretleme Dili (SGML) temel alınarak oluşturulmuştur. | Gelişmiş uyumluluk sağlayan gelişmiş ayrıştırma kurallarına sahiptir. |
HTML Etiketleri Nelerdir?
HTML etiketleri, web tarayıcısının içeriği nasıl görüntüleyeceğini tanımlar. Bunların yardımıyla bir web tarayıcısı bir HTML içeriği ile basit bir içerik arasındaki farkı anlar. HTML kodları üç ana bölümden oluşur: açılış etiketi, içerik ve kapanış etiketi. Ancak bazı HTML kodları kapatılmamış etiketlerdir.
Bir web tarayıcısı, bir belge okuduğunda, tarayıcı onu yukarıdan aşağıya ve soldan sağa okur. Bu etiketler, belgeleri oluşturmak ve özelliklerini oluşturmak için kullanılır. Her etiketin farklı özellikleri bulunur. Bir Hyper Text Markup Language dosyası, web tarayıcısının basit bir metin ile Hyper Text Markup Language metni arasında ayrım yapabilmesi için bazı temel etiketlere sahip olmalıdır.
Bu etiketler genellikle küçük harflerle görünür, bir başlangıç etiketi, bitiş etiketi ve ortada bir miktar içerik bulunur. Ancak içeriği veya bitiş etiketi olmayan <br> gibi öğeler vardır. Bunlara boş elemanlar denir. Kısaca bu etiketler aşağıdaki gibidir:
- Paragraph (<p>): Paragraph etiketi bir paragrafı temsil eder. Metnin etrafına <p></p> etiketleri yerleştirerek, o metnin yeni bir satırda başlamasını sağlayabilirsiniz.
- Image (<img>): Image etiketi, belgeye bir görüntü gömer. Düzgün bir şekilde işlemek için bir src (kaynak) özniteliği gerektirir. Görselin düzgün yüklenmemesi veya okuyucunun görme bozukluğu olması durumunda alt özelliği de eklenmelidir.
- Headings (<h1>-<h6>): Headings etiketi, bölüm başlıklarının farklı düzeylerini temsil eder. <h1> en yüksek bölüm düzeyidir ve en belirgindir. Buna karşılık <h6> en düşük ve dolayısıyla en az belirgin olan başlık türüdür.
- Division (<div>): Division etiketi, ‘akış içeriği’ için genel bir blok düzeyinde kapsayıcıdır. Akış içeriği, metin veya gömülü içerik içeren öğeler kategorisidir. Bağlantı, blok alıntı ve başlık öğeleri akış içeriği olarak kabul edilir. Arka uçta, div öğeleri, kodu açıkça işaretlenmiş bölümler halinde düzenlemeye yardımcı olur. Ön uçta, içeriklerinden önce ve sonra satır sonları eklerler. Aksi takdirde CSS ile stillendirilmedikçe sayfanın içeriğini veya düzenini etkilemezler.
- Span (<span>): Span etiketi ‘ifade içeriği’ için genel bir satır içi kapsayıcıdır. Ancak iki nedenden dolayı ifade içeriğini gruplamak için kullanılırlar. Birincisi, belirli bir metin parçasına stil bilgisi uygulamaktır. Örneğin büyük ilk harf oluşturuyorsanız her birinin açılış paragraflarının ilk harfini kaydırabilirsiniz. Span etiketlerini kullanmanın ikinci nedeni, öznitelik değerlerini zaten paylaşan öğeleri gruplamaktır. Örneğin Fransızca öğrenen İngilizce konuşanlar için bir web siteniz olabilir. Varsayılan dil İngilizce’ye ayarlanmıştır, ancak birkaç sayfada, ilk sütunda Fransızca terimler ve ikinci sütunda İngilizce çevirileri olan bir tablonuz olabilir. Bu durumda Fransızca terimleri, dil özniteliği ‘fr’ olarak ayarlanmış olarak span etiketleri içine yerleştirebilirsiniz.
- Anchor (<a>): Anchor etiketi bir köprü oluşturur. Bu etiket, bağlantının hedefini belirleyen bir href niteliği gerektirir. Hedef, aynı web sayfasındaki başka bir bölüm veya aynı sitedeki başka bir web sayfası veya harici web siteleri, dosyalar ve e-posta adresleri olabilir.
- Unordered List (<ul>): Sıra önemli olmadığında öğeleri gruplamak için unordered list etiketi kullanılır. Örneğin alışveriş listelerinin belirli bir sırayı takip etmesi gerekmez. Bu etiket, <li> etiketiyle tanımlanmalı ve ardından <ul> öğesi ile bitirilmelidir.
- Ordered List (<ol>): Sıra önemli olduğunda öğeleri gruplamak için ordered list etiketi kullanılır. Örneğin tarifler belirli bir sıra izlemelidir. Adımlar, <li> etiketiyle tanımlanmalı ve ardından <ol> öğesi ile bitirilmelidir. Sıralı bir liste varsayılan olarak 1 numaradan başlar. Başka bir numaradan başlamak istiyorsanız sadece bir başlangıç özelliği eklemeli ve değeri istediğiniz sayıya ayarlamalısınız.
- Emphasis (<em>): Emphasis etiketi, içerdiği metni vurgular. Tarayıcılar genellikle metni italik olarak işler.
- Strong (<strong>): Strong etiketi, içerdiği metnin çok önemli olduğunu belirtir. Tarayıcılar genellikle metni kalın olarak işler.
- Unarticulated Annotation (<u>): Unarticulated annotation etiketi, metni bir tür metinsel olmayan açıklama biçimine sahip olarak işaretler. Örneğin yazım hatalarına açıklama eklemek için bu öğeyi kullanabilirsiniz. Metnin altını, metinsel olmayan bir ek açıklamayı temsil etmekten başka bir amaçla vurgulamak istiyorsanız başka bir Hyper Text Markup Language öğesi veya CSS özelliği kullanabilirsiniz. Örneğin dekorasyon için metnin altını çizmek isterseniz CSS metin süsleme özelliğini kullanır ve bunun yerine ‘altı çizili’ olarak ayarlarsınız.
- Table (<table>): Table etiketi, içeriğin bir bakışta okunması kolay bir şekilde düzenlenmesi için bir tablo oluşturur.
- Horizontal Rule (<hr>): Horizontal rule etiketi, bir web sayfası boyunca yatay bir çizgi tanımlar. Bir oyundaki bir sonraki sahne, bir makalenin yeni bir bölümü veya bir makalenin sonucu gibi herhangi bir tematik değişikliği işaretlemek için kullanılabilir.
- Line Break (<br>): Line break etiketi, yerleştirildiği yerde bir satır sonu oluşturur. Bu, metnin geçerli satırda bitmesini ve bir sonraki satırda devam etmesini istediğiniz yere ekleyebileceğiniz anlamına gelir. Bu öğe, şiirleri, şarkı sözlerini veya satır bölünmesinin önemli olduğu diğer içerik biçimlerini görüntülemek için kullanılabilir.
HTML Öznitelikleri Nelerdir?
Öznitelikler, etiketleri farklı şekillerde değiştirir. Öğenin görünümünü değiştirebilir, öğelerin CSS tarafından hedeflenebilmesi için benzersiz tanımlayıcılar uygulayabilir veya okuyuculara veya ekran okuyuculara gerekli bilgileri sağlayabilirler. Öznitelikler genellikle küçük harflerle ve değerleri tırnak içinde olacak şekilde ad/değer çiftleri olarak görünür.
- Style Özniteliği: Style özniteliği satır içi CSS içerir. Bu CSS, belgenin baş bölümünde veya harici bir stil sayfasında ayarlanan tüm stilleri geçersiz kılar. Yalnızca açılış etiketinde style özniteliğine sahip öğeye uygulanacaktır.
- ID Özniteliği: ID özniteliği, bir dosyadaki tek bir öğeyi tanımlamak için kullanılır. Bu, bir ID özniteliğinin değerinin aynı dosya içinde tekrarlanmaması gerektiği anlamına gelir. Bu benzersiz değeri kullanarak, iç veya dış CSS ile tek bir öğeyi hedefleyebilirsiniz.
- Class Özniteliği: Class özniteliği, aynı ad altında bir grup öğeyi tanımlamak ve bu grubu özelleştirmek, etkin bir şekilde yeni bir öğe grubu oluşturmak için kullanılır.
- Language Özniteliği: Language özniteliği, ekran okuyucularına web sayfasının ana dilinin ne olduğunu ve ne zaman başka bir dile geçmeleri gerektiğini bildirir. Bu, hangi bölgeden veya hangi dilden olursa olsun içeriğinizi tüm okuyucular için daha erişilebilir hale getirebilecek küçük bir ayrıntıdır. Bu öznitelik en yaygın olarak öğeye gömülü olsa da paragraf, div ve diğer etiketlerle de kullanılabilir.
- Href Özniteliği: Bir href özniteliği, bir bağlantının hedefini içerir. Bu öznitelik her zaman bir bağlantı elemanına dahil edilmelidir.
- Source Özniteliği: Bir bağlantı öğesinin bir href özniteliğine ihtiyacı olduğu gibi bir görüntünün de bir source özniteliğine ihtiyacı vardır. Bu, resim dosyasının veya URL’sinin yolunu içerir.
- Alt Özniteliği: Alt özniteliği, etiket hakkında açıklayıcı bilgiler sağlar. Bu, görme bozukluğu olan okuyucular ve öğenin yüklenmemesi durumunda tüm okuyucular için önemlidir. Bu durumda okuyucular, öğenin iletmek istediği şeyi yine de anlayabileceklerdir. Source özniteliği gibi genellikle alt özniteliği de görüntü öğesiyle birlikte bulunur.
- Data-* Özniteliği: Data-* özniteliği, sayfaya veya uygulamaya özel özel verileri depolamak için kullanılır. Kullanıcı için daha dinamik bir deneyim oluşturmak için belgenin JavaScript’inde saklanan bu verileri kullanabilirsiniz. Data-* özelliğindeki yıldız işareti herhangi bir değer olabilir.
En Yaygın Kullanılan HTML Kodları
En çok kullanılan HTML kodları, tüm etiketlerin neredeyse %25’ini temsil eder. Bu kodlar aşağıdaki gibidir:
- <a> bağlantı için
- <b> kalın metin yapmak için
- <strong> vurgulu kalın metin için
- <body> ana bölüm
- <br> ara için
- <div> bir belgenin bir bölümü veya parçası için
- <h1> başlıklar için
- <i> italik bir metin yapmak için
- <img> belgedeki görseller için
- <ol> sıralı bir liste için
- <ul> sırasız bir liste için
- <li> madde işaretli bir liste için
- <p> paragraf için
- <span> metnin bir kısmını biçimlendirmek için
Her ne kadar yukarıdaki etiketler sıklıkla kullanılsa da HTML5 ile yeni etiketler de gelmiştir. Bu yeni sürüm ile gelen yeni etiketler, arama motoru botlarının web sitelerinde daha verimli gezinmesine yardımcı olmak ve arama motorları daha popüler hale geldikçe tarayıcıların web sitelerine erişmesini daha kolay hale getirmek için tasarlanmıştır. Bu etiketler aşağıdaki gibidir:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
HTML’in Artıları ve Eksileri
Bu dilin artıları şu şekildedir:
- Web sayfaları geliştirme için kullanımı kolaydır.
- Zahmetsizce bir web belgesi oluşturulabilir.
- Web sayfaları içinde ve farklı sunucularda bulunan web siteleri arasında gezinmenize yardımcı olur.
- Responsive olan görüntüleri kullanmak için sorgular ayarlayabilirsiniz.
- Kullanıcı, oturumlar arasında kalıcı olan tarayıcı verilerini kaydedemez.
- Veriler tarayıcıda depolandıktan sonra geliştirici, uygulamanın çalışması için daha fazla düşünebilir.
Bu dilin eksileri ise şunlardır:
- Dinamik sayfalar oluşturmaya yardımcı olmaz. Yalnızca düz sayfalar oluşturabilir.
- Basit bir web sayfası yapmak için uzun bir kod yazmanız gerekebilir.
- Güvenlik özellikleri iyi değildir.
- Bir web sayfasına benzeyen herhangi bir şeyi geliştirmek bile zaman alır.
- Dreamweaver gibi diğer web sayfası geliştirme yazılımları gibi esnek değildir.
- Merkezi bir yaklaşım izlemez. Bu yüzden web sayfalarını ayrı ayrı düzenlemeniz gerekir.
HTML5’in Artıları ve Eksileri
Bu sürümün artıları şu şekildedir:
- Dosya sistemi, istemci tarafı depolama, olay işleme ve daha fazlasıyla ilgili çok sayıda yeni API gibi yeteneklere sahiptir.
- Yeni bir etkileşimli web sitesi oluşturmak kolaydır.
- Pragmatik bir yaklaşım benimsediği için sorunları zahmetsizce çözebilirsiniz.
- Basitleştirilmiş Doctype ve karakter setine sahiptir.
- <details>, <dialog>, <mark> gibi öğeler sunar.
- <input> etiketi için yeni bir öznitelikle web formlarını geliştirmiştir.
- Herhangi bir üçüncü taraf eklentiye başvurmadan elde etmek için kalıcı yerel depolama sağlar.
- Yeni nesil bir iletişim teknolojisi olan WebSocket’e sahiptir.
- Sunucu Tarafından Gönderilen Olaylar (SSE) olarak adlandırılan olayları tanıtır.
- Basitleştirilmiş işaretlemeye sahiptir.
- JavaScript ile programlayabileceğiniz iki boyutlu çizim yüzeyi desteği sunar.
- Kendi kelime dağarcığınızı oluşturmanıza olanak tanır.
- Kendi özel semantiğinizi oluşturabilirsiniz.
- Öğeleri aynı web sayfasında bir yerden başka bir yere sürükleyip bırakabilirsiniz.
- Çok sayıda videoyu destekler.
- Görünürlük, medya yakalama, tam ekran vb. gibi API’lerle gelişmiş web uygulaması deneyimine sahiptir.
Bu sürümün eksileri ise şunlardır:
- Erişmek için modern tarayıcılar gerektirir.
- Medya lisansıyla ilgili sorunları vardır.
- Bu dil hala devam eden bir çalışmadır.
- Bu dilde kullanılabilen iyi IDE’ler yoktur.
HTML5 Nasıl Öğrenilir?
HTML5 yaygın olarak kullanılan bir dildir. Bu açıdan dünya çapında önemli bir konuma sahiptir ve öğrenmesi kolay biçimlendirme dillerinden biridir. Günümüzde birçok kurs, öğrenmek isteyen herkesi desteklemek için HTML5 eğitimi sunmaktadır. İnternet üzerinden video kurslar sunarak HTML öğreten belirli kanallar vardır. Kısa sürede öğrenmek zordur. Bu yüzden düzenli olarak çalışmanız gerekir.
HTML5 ile PHP İlişkisi
PHP, JavaScript ve Python gibi betik dillerinin bir alt kümesidir. Ancak bunların arasındaki fark, PHP’nin öncelikle sunucu tarafı iletişimi için kullanılmasıdır. Öte yandan JavaScript hem ön uçta hem de arka uçta kullanılabilir ve Python yalnızca sunucu tarafında kullanılabilir.
HTML5, tarayıcınızda çalışan ön uçtur. Bu bir programlama dili değil, tarayıcınıza gönderilen verilerin nasıl görüntüleneceğini söyleyen bir biçimlendirme dilidir. PHP ise sunucu ile etkileşim için kullanılan bir sunucu tarafı programlama dilidir. Bu ikisinin tamamen farklı kullanımları vardır. Tek yapmak istediğiniz kullanıcının verdiğine göre bir hesaplama veya işlem yapmaksa HTML sizin için yeterlidir. Ancak bir dosyaya, bir veritabanına veya ana makineyle ilgili herhangi bir şeye erişmek istiyorsanız PHP’yi de kullanmanız gerekir. Ancak PHP kullanıyorsanız xampp veya apache gibi bir web sunucusuna ihtiyacınız olacaktır.
HTML5 Dosyası Nasıl Oluşturulur?
HTML5 ile bir web sitesi oluşturmak için önce bir dosya oluşturmanız gerekir. Bu dosya, web sayfanız için tüm HTML5’i içerecek ve web sunucunuza yüklenecektir. Bu şekilde bir ziyaretçi web sitenizi aradığında, sunucu dosyasını ziyaretçinin tarayıcısına gönderir ve tarayıcı sayfayı buna göre oluşturur. Aşağıda bir dosya oluşturabilmeniz için uygulamanız gereken adımlar bulunur:
Adım #1 <!DOCTYPE> elementini ekleyin
İlk olarak belgenin türünü HTML5 olarak tanımlayın. Bunu yapmak için ilk satıra <!DOCTYPE html> özel kodunu eklemelisiniz. Bu sürüm, önceki HTML standartlarının yalnızca bir evrimi olduğundan bu bildirime ‘5’ eklemeye gerek yoktur.
Adım #2 <html> elementini ekleyin
Ardından kök öğeyi tanımlayın. Bu öğe hangi dilde yazacağınızı işaret ettiğinden bir belgede her zaman <html> olacaktır.
Adım #3 Dil özelliği ekleyin
Bir dil özelliği ekleyin ve bunu HTML öğesinin açılış etiketinde tanımlayın. Bir dil özniteliği olmadan ekran okuyucular varsayılan olarak işletim sisteminin dilini kullanır ve bu da sayfadaki başlığın ve diğer içeriğin yanlış telaffuz edilmesine neden olabilir. Özelliğin belirtilmesi, ekran okuyucuların belgenin hangi dilde olduğunu belirlemesini ve web sitenizi daha erişilebilir hale getirmesini sağlar. Bu gönderi Türkçe yazıldığı için dosyanın lang niteliği ‘tr’ olarak ayarlanır.
Adım #4 Bölümleri (section) ekleyin
Bir belge iki bölümden oluşur: baş bölümü ve gövde bölümü. Baş bölümü, sayfanın yanı sıra herhangi bir dahili CSS ile ilgili meta bilgileri içerir. Tarayıcı bu bilgiyi okuyuculara göstermez. Gövde bölümü, paragraflarınız, resimleriniz ve bağlantılarınız gibi ön uçta görünecek tüm bilgileri içerir. Bu bölümleri oluşturmak için belgenize bir <head></head> etiketi ve ardından <html> ile </html> arasına bir <body></body> etiketi ekleyin.
Adım #5 Head bölümüne <title> elementini ekleyin
Bir <head> açılış ve kapanış </head> etiketi yazarak dokümanın head bölümünü oluşturun. Bu bölümde ön uçta görünmeyecek olan sayfa hakkında meta bilgiler koymalısınız. Head bölümünde belgenizi adlandırın. Adı <title></title> etiketleri arasına yazın.
Adım #6 CSS dosyalarını ekleyin
Bir sonraki adımda CSS dosyaları ekleyin. Örneğin projenize Bootstrap CSS yüklüyorsanız şöyle görünecektir: <link rel=”stylesheet” rel=”noopener” target=”_blank” href=”bootstrap/css/bootstrap.min.css “>.
Adım #7 Body alanına HTML öğelerini ekleyin
Son olarak body alanına öğeleri ekleyin. Örneğin bir başlık ve paragraf ekleyebilirsiniz. Başlık adını <h1></h1> etiketleri arasına ve paragrafı <p></p> etiketleri arasında yazmalısınız.