Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde HTML Etiketleri Nedir? Temel HTML Etiketleri Nelerdir ? HTML Kodlama Nasıl Yapılır ? HTML Yapısı Nasıldır ? gibi kavramları öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 2 - Temel Etiketler ve Kurallar linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de Görsel - Link - Başlık - Paragraf etiketlerinin kullanımını öğreneceğiz.
Bir önceki dersimizde , html,head,body gibi etiketleri görmüştük. Hiyerarşik yapı ile HTML etiketinin içerisinde sırasıyla head ve body etiketlerini yazıyorduk. Etiketlerin içerisinde ki parametreler her zaman küçük harfle yazılmalıdır. Büyük yazıldığı taktirde tarayıcının yorumuna bağlı olarak sorun olmayabilir , lakin bizler Türkçe karakterlere ve küçük yazmaya özen gösterelim
Paragraflar
Paragraflar HTML'de p etiketi ile ifade edilmektedir. Sitenize paragraf eklemek istediğinizde bu etiket kullanılır. Paragraf etiketi ile ilk örneğimizi yapalım. Notepad++ programınında yeni bir sayfa oluşturalım. HTML dosyamızın içine < p > etiketini açıp kapatalım. Sonrasında paragraf olarak gözükmesini istediğimiz yazımızı iki etiket arasına yazalım.
Paragraf Etiketi Örneği ;
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec tortor a odio volutpat tristique in bibendum sapien. Sed sollicitudin rutrum erat id pellentesque. Proin ac rutrum diam. Curabitur nisi mauris, consectetur non lobortis ut, consectetur et leo. Donec eu leo quis lorem posuere aliquam.</p> <p>Maecenas porttitor rhoncus ante vitae dapibus. Aliquam erat volutpat. Sed quis sem justo. Fusce lacinia dui nulla. Ut quis urna quis nisi viverra hendrerit. Vivamus elementum sem a ipsum tortor sem et neque. Vivamus auctor sem sed nibh egestas cursus. Donec diam libero, ullamcorper eget cursus nec, sollicitudin eu turpis. Mauris condimentum elementum tortor,eu hendrerit nunc cursus in.</p>
Bu dosyamızı uzantısı .html olacak şekilde kayıt edelim ve sonrasında Google Chrome ile açalım.
Kod Çıktısı ;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec tortor a odio volutpat tristique in bibendum sapien. Sed sollicitudin rutrum erat id pellentesque. Proin ac rutrum diam. Curabitur nisi mauris, consectetur non lobortis ut, consectetur et leo. Donec eu leo quis lorem posuere aliquam. Maecenas porttitor rhoncus ante vitae dapibus. Aliquam erat volutpat. Sed quis sem justo. Fusce lacinia dui nulla. Ut quis urna quis nisi viverra hendrerit. Vivamus elementum sem a ipsum tortor sem et neque. Vivamus auctor sem sed nibh egestas cursus. Donec diam libero, ullamcorper eget cursus nec, sollicitudin eu turpis. Mauris condimentum elementum tortor,eu hendrerit nunc cursus.
Dikkat edilmesi gereken bir husus , her yeni paragraf eklediğimizde yeni bir < p > etiketi oluşturmamız gerektiğidir. Şimdi < p > etiketlerini kaldırarak sadece metinlerin olduğu şekilde kayıt edersek eğer kodların çıktısı dümdüz olacaktır. İstediğimiz kadar kodlarda kendimiz satır boşluğu bıraksakda , HTML kodunu yorumlayan tarayıcılar satır boşluklarını görmezden gelecek olup o boşlukları kelime boşluğu olarak göreceklerdir. Paragraf etiketinin de kullanım amacı budur , satır boşluğu ile paragraflar oluşturmamıza yararlar.
Başlıklar
İngilizce'de başlık kelimesinin karşılığı heading kelimesidir. Bu yüzden heading kelimesinin baş harflerini temsil eden < h1 >, < h2 >, < h3 >, < h4 >, < h5 >, < h6 > etiketleri ile başlıklar oluşturabiliriz. Bu sıralama boyutları temsil ediyor olup , < h1 > etiketi en büyük başlığı , < h6 > ise en küçük başlığı temsil ederler.
Başlık Etiketi Örneği ;
<h1>HTML Öğreniyorum - Başlık 1</h1> <h2>HTML Öğreniyorum - Başlık 2</h2> <h3>HTML Öğreniyorum - Başlık 3</h3> <h4>HTML Öğreniyorum - Başlık 4</h4> <h5>HTML Öğreniyorum - Başlık 5</h5> <h6>HTML Öğreniyorum - Başlık 6</h6>
Başlık etiketlerinin çıktısı ;
Kodların çıktısında görüldüğü üzere en büyük başlık < h1 > etiketi ile gösterilmiş olup sırasıyla boyutları düşmektedir. Bu etiketlerin yazı karakterlerini , boyutlarını , renklerini vb. stilleri özelleştirilebilir. Bunun için CSS gereklidir, CSS kodlarını HTML dersleri bittikten sonra geçeceğiz.
LİNKLER
HTML'de linkler (bağlantılar) < a > etiketi ile gösterilmektedir. İngilizce'deki attribute kelimesinin ilk harfini almaktadır. Türkçe'de karşılığı "atıf" anlamına gelmektedir. Link oluşturmak için < a >< /a > etiketlerine ihtiyaç vardır , fakat açma etiketi içerisine a'dan sonra href parametresi yazılır. Href içerisine oluşturmak istediğimiz linkin adresini yazarız.
Link etiketi örneği ;
<a href="http://www.google.com">Bu linke tıklandığında Google'a gider.</a>
Yazdığımız kodda farkettiğiniz üzere , a açma etiketi içerisine href parametresini yazdıktan sonra = (eşittir) diyerek , tırnak işaretleri (" ") içerisine link vermek istediğimiz adresi yazdık.
Sonuç olarak bütün etiketlerin içerisine parametre yazabiliriz , lakin her etiketin kendisine ait parametresi olabileceği gibi , ortak parametreleride olabilir ve bu parametrelerin yazımı < etiket parametre = "değer" > şeklindedir.
Link etiketi çıktısı ; Bu linke tıklandığında Google'a gider.
A etiketi içerisine yazdığımız her şey link olacaktır ve üzerine tıklandığında ilgili adrese gidecektir. Örneğimizde "Bu linke tıklandığında Google'a gider." yazısı link olmuştur.
GÖRSELLER
HTML'de sitemize resim eklemek için img etiketini kullanırız. İngilizce'de görsel kelimesinin karşılığı image olup < img > kısaltması ile gösterilir. Bu zamana kadar öğrendiğimiz tüm etiketlerde hep etiketi açıp kapatıyorduk , ama < img > etiketinde bir farklılık mevcut , < img > etiketi özel bir etiket olup , "boş etiket" olarak adlandırılır. Örnekte inceleyeceğimiz üzere bu etiketin kapanış şekli farklıdır.
Görsel etiket örneği ;
<img src="http://kodlamavakti.com/img/logo.png" />
Görüldüğü üzere < img > etiketinin kapanışı < img/ > şeklinde oldu. Bu olay onun boş element olduğu anlamına gelir ve HTML'de bunun gibi birkaç etiket daha vardır,< img > etiketi içerisinde src parametresini kullandık.Bu parametre göstermek istediğimiz görselin yolunu belirtmektedir. O adresteki resim çıktı olarak verilecektir.
< img > etiketinin bir diğer parametresi ise alt parametresidir. İngilizce'deki alternate kelimesinin kısaltmasıdır , arama motoru optimizasyonu (seo) konusunda oldukça önemlidir. Alt etiketi resmin ne ile alakalı olduğunu belirten bir açıklama gibi düşünebilirsiniz. Sitenizde kullanacağınız her görsel için alt etiketi kullanmanızı şiddetle tavsiye ediyoruz.
Örneğimizi alt parametresi ile geliştirelim ;
<img src="http://kodlamavakti.com/img/logo.png" alt="Kodlama Vakti" />
Alt parametresini de ekledik , burada dikkat etmeniz gereken olay parametre eklerken her zaman aralarında boşluk bırakmanızdır.
Tebrikler! Bu derste HTML'de Temel etiketlerinin kullanımını öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin üçüncü kısmı olan dersimizde , HTML'de Görsel - Link - Başlık - Paragraf etiketlerinin kullanımı 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 4 – İçerik Etiketleri” geçmek için tıklayınız !
