HTML Dersleri 2 - Temel Etiketler ve Kurallar


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde HTML Nedir ? ve HTML Temel Kavramlarını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 1 - HTML Nedir ? Temel Kavramlar linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Etiketleri Nelerdir ? , Temel HTML Etiketleri ve Kuralları gibi temel ögeleri öğreneceğiz.

Bazı kavramları tekrar hatırlayalım , HTML genel kodlama kuralı şu şekildedir ;

< etiket > içerik < /etiket >

Etiket (Tagname) ; HTML Etiketleri < işareti ile başlayıp > işareti ile biten ifadelerdir. Bu iki işaretin aralarına kullanacağımız etiketleri yazarız. Örnek vermek gerekirse ; p etiketi paragraf anlamına gelir ve < p > şeklinde kullanılır. Açılan her etiket sonrasında "/"  işareti ile kapatılmalıdır.

Örnek ; < p >içerik yazısı < / p > . P etiketleri arasında olan "içerik yazısı" artık p etiketinin özelliklerini almaktadır. HTML kodları hiyerarşik bir yapıdadır. Etiketleri iç içe yazabileceğimiz gibi , ayrı ayrıda yazabiliriz.

İç içe etiket örneği :

<p> ilk etiket <b> içerik yazısı </b> </p>

Görüldüğü üzere , p etiketinin içinde b etiketini kullanmış olduk. Etiketlerin (p,h,b vb.) ne işe yaradıklarını ilerleyen derslerde anlatacağız. Burada ki en önemli kural , ilk yazdığımız etiketi en son kapatmamız lazım!

Ayrı ayrı etiket örneği :

<b> Kodlama vakti</b> <p> HTML Dersleri </p>

Şimdi basit bir HTML kod yapısını inceleyelim ;

<html>
     <head>
         <title>Başlık</title>
     </head>
     <body>
          HTML'i Kodlama Vakti'nde öğreniyorum !
     </body>
</html>

Yukarıda ki yapıya HTML'in iskeleti diyebiliriz. Kullandığımız etiketler html , head , body , title. Kodları inceleyerek HTML'deki hiyerarşik yapıyı anlarsınız. Bu iskeletteki temel yapıların ne işe yaradıklarına bakalım ;

Temel HTML Etiketleri

< html > ; HTML kodlarını < html > etiketi ile başlatırız , bu etiket kod yapımızın html olduğunun referansını verir.

< head > ; Head etiketi , her zaman html etiketleri arasında yer alır , burada kodlarımıza dahil edeceğimiz stil dosyaları , etkileşim dosyaları gibi bir çok eklentileri dahil ettiğimiz kısımdır. Ayrıca Head içerisinde sitemizin arama motorlarında görüntülenmesi için gerekli meta açıklamalarını yazdığımız kısımdır. Head etiketleri içinde ki < title > kodları haricinde hiç bir kod kullanıcı tarafından görünmez.

< title >; Title etiketi sayfa başlığı anlamına gelmektedir. Bu etiketlerin içerisinde yazdığımız kodlar tarayıcıda sekmenin üstüne yazan kısımdır . Title örneği ;

< body > ; Body etiketi isminden de anlaşılacağı gibi , sitemizin gövdesini oluşturmaktadır. Sitemizde görüntülenmesini istediğimiz herşeyi bu etiket arasına yazmalıyız.

Kısacası ; < html > etiketi içerisine ilk önce < head > etiketini açıp kapatıyoruz , sonrasında ise < body > etiketimizi açıp kapatıyoruz.

Kendi Web Sayfanızı Oluşturun

HTML'in hiyerarşik yapısını ve temel etiketleri öğrendikten sonra sıra geldi ilk WEBSİTEMİZİ oluşturmaya.

Notepad++ programını açıyoruz ve boş bir sayfa oluşturuyoruz. Aşağıda ki temel HTML etiketlerini yazıyoruz , ama kopyalamayın kendiniz elinizle yazın.

<html>
     <head>
         <title>Başlık</title>
     </head>
     <body>
          <p>HTML'i Kodlama Vakti'nde öğreniyorum !</p>
     </body>
</html>

Kodlarken hiyerarşik yapıya dikkat edelim , bir etiket yazdıktan sonra enter ile alt satıra inip sonrasında tab tuşuna basalım ki , düzen bu şekilde olsun. Bu HTML kodlarını yazarken , "Site Başlığı" kısmına sitenizin başığını , "İçerik Kısmı" yerinede sitenizde görünmesini istediğiniz yazıları yazınız.

Anlatılanların hepsini uyguladıktan sonra Notepad++ menüsünden Dosya -> Farklı Kaydet'e tıklayın.File name kısmını index yazın ve Save as Type kısmında ki menüden Hyper Text Markup Language File seçeneğini seçin ve kayıt işlemlerini tamamlayın.

Kaydettiğiniz dosyayı bulup sağ tıklayarak , Birlikte aç komutundan Google Chrome'u seçiniz. Daha sonra dosyanızı açınız.

Tebrikler! İlk web sitenizi oluşturdunuz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin ikinci kısmı olan dersimizde , HTML Etiketleri Nedir? Temel HTML Etiketleri Nelerdir ? HTML Kodlama Nasıl Yapılır ? HTML Yapısı Nasıldır ? gibi konuları öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 3 – Paragraf / Link / Görsel / Başlık Etiketleri” geçmek için tıklayınız !