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 ;
< 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.
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 !