Sonraki Sayfaya İlerle Önceki Sayfaya İlerle

HTML 5

HTML 5 Nedir

Hyper Text Markup Laungue yani Hiper Metin İşaretleme Dili olarak karşımıza çıkmakta ve kısaca web sayfalarını oluşturmak ve yapılandırmak için kullanılan bir işaretleme dili olarak tanımlayabiliriz.

HTML karşımıza 1993 yılında Text Markup Laungue olarak karşımıza geldi ve çok sınırlı özelliklere sahipti. Sonraki HTML verisyonlarıyla birlikte yeni özellikler eklendi ve 2014'de son halini aldı.
Daha detaylı bilgi almak için HTML Nedir? yazıma gidebilirsiniz.

HTML Kodu Yazmak

HTML kodu yazmak aslında gayet basittir ve temel bir ingilizce seviyesi ile ne yaptığınızı daha iyi anlayabilirsiniz. Örneğin bir yazı yazmak için, <p> paragraf etiketini kulanılır. Gördüğünüz gibi p harfinden gelen paragraf özelliğini bu sayede kullandık. Başka örnekler verecek olursak: <B> Bold bir yazı yazmak ya da <İ> İtalik bir yazı yazmak için kullandığımız etiketlere örnek verebiliriz.

<i> Merhaba Dünya </i>
<b> Merhaba Dünya </b>

Viusal Studio Code üzerinde veya başka IDE'lerde kod yazdığınızda sizin için yardımcı uzantılar vardır. Bazı IDE'lerde bu temel olarak varken bazılarında eklentiyi indirmeniz gerekmektedir. Örnek verecek olursam: Viusal Studio Code'a giriş yaptığınızda, sol tarafta ikonlar göreceksiniz. Üzerine geldiğinizde uzantılar yazan ikona tıklayın ve ardından arama yerine HTML yazdığınızda işinizi kolaylaştıran çeşitli uzantılar çıkacatır. Burada uzantıları araşıtrabilir, kod yazarken tasarruf edebilirsiniz ancak programlama temeliniz yoksa ve etiketlere alışmanız için, bu eklentileri şimdilik kurmanızı önermiyorum. Uzantıların, ne yaptığını anlamdıysanız en basitinden şu örneği verebilirim: <Örnek A Kodu> bunu yazdıktan sonra otomatik olarak etiketi kapatacaktır.

HTML Yapısı

Bir HTML dosyası oluşturup çalışmaya başladığınızda her zaman yapmanız gereken bazı kurallar vardır. HTML5 ile hayatımıza giren <!DOCTYPE> ifadesi, HTML belgesinin sürümünü ve belgenin hangi HTML sürümüne uygun olduğunu belirtiriz.

Bundan sonraki adımı bir benzetme ile anlatmak istiyorum: Bir insanı hayalinizde 3'e bölün. Yukarıdan aşşağıya göreceğiniz şey, kafa, vücut, ayaklar olacaktır. HTTML'de de sayfa yapısı aynı şekilde ayrılmıştır. Her ayrılan bölümün işlevi vardır. Tam olarak ayrıntıya girmeden standart bir web sitesinden örnek vereyim: Sayfada genelde üst kısımda menüler vardır bu menülere navigasyon anlamından çıkarabileceğiniz navbar da denmektedir. Burada sayfada aradığınız şeye giden sekmeye ulaşabilirsiniz. Daha sonra vücut kısmına geldiniz, burada sayfayı tanıtır ilgili içeriklere ulaşabilirsiniz, son olarak ayak kısmında da sosyal medya bağlantısı, web sayfanızın diğer sayfaları gibi çeşitli bilgilere erişebilirsiniz.

Şimdi bunu kod üzerinde uygulayalım:

<!doctype html>
  <html>
<head>

<title> İlk HTML Kodum! </title>
<!-- Title etiketi tarayıcınızın üst görünümdeki başlığı değiştirebilirsiniz.
<!-- --> etiketi ile de şu anki gibi yorum satırı yapabilirsiniz-->
</head> <body> <!-- Sayfa İçeriği --> </body> <footer> <!-- Footer içeriği --> </footer> </html> <!-- En son HTML etiketini kapatmayı unutmuyoruz. -->

İlk dersimizin sonuna geldik, sonraki dersimizde yeni özellikler görecek ve bunları test edeceğiz.