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> ; 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> ; 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></title> kodları haricinde hiç bir kod kullanıcı tarafından görünmez.

<title> </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 ;

html title
HTML title etiketi örneği

<body> </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 !

Beğendiysen makaleyi paylaşarak destek olabilirsiniz!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir