Header Ads

HTML Kodlamaya Giriş #2 Taglar/Etiketler

HTML Kodlamaya Giriş #2 Taglar/Etiketler


Tag demek etiket demek.HTML kodlarına tag denir.örneğin <title>  = title tagı, başlık etiketi.
Şimdi bir çok tagı deneyeceğiz.
Web sitelerinini vazgeçilmezi olan görselleri eklemeden başlayalım.

İMG etiketi

Kullanacağımız etiket img etiketi
<img src="1.png"/>
img etiketinde küçüktür işaretimizi koyduk img yazdık bir boşluk bırakıp src yazıyoruz eşittir deyip çift tırnak arasına hangi resmi istiyorsak onun adını ve uzantısını belirttik ters slash koyduk ve büyüktür işaretiyle etiketi kapattık.
Burada bilinmesi gereken en önemli kurallardan birincisi resmin bulunduğu yer index.html dizinizin yani index.htmlin bulunduğu klasör olup olmamasıdır.Daha açık konuşmak gerekirse index.html dosyanız nerdeyse resmide ya oraya ya da klasör içine koymalısınız.
Örneğin :
HTML Kodlamaya Giriş #2 Taglar/Etiketler img etiketi
eğer ilk örneğimiz gibi bir kodlama yapacaksak 1.png index.html ile aynı klasörde olmalı
Yok biz klasörleri düzgün tutacaz derseniz resimler klasörünün içerisine 1.png yi atıp
<img src="resimler/1.png"/>
diyebiliriz.
Hemen index. html nizi Google Chrome ile çalıştırın.
Bilinmesi gerekenlerden ikincisi ise  img nin src ile resim çektiğidir.
1.png nin yerine bir resim linki verebiliriz.
Örneğin:
<img src="https://dl.dropboxusercontent.com/s/aurs6icdt5ozok3/csharp-php-html-projeleri-proje-kodlari-proje-ve-kod-projevekod.png"/>
Bir internet sitesinden aldığımız resim linki de aynı durumdadır.Resmi sitemizde gösterir.
img nin bir de alt ve title özelliği de vardır.Nasıl yani dediğinizi duyar gibiyim.
yani şöyle
<img src="1.png" title="Bu resmin başlığıdır." alt="Buda resmin açıklaması yani : Proje ve Kod Banner" />
HTML Kodlamaya Giriş #2 Taglar/Etiketler img title ve tag
Resmimizi Chrome de göstertebildiğiniz de üstüne gelince resmin başlığını title etiketinin yazısının çıktığını göreceksiniz.
Alt etiketi ne işe yaradı peki burda ?
alt etiketi Arama motorlarının resmi indexlemesini kolaylaştırdı.Yani bir resmin içerisinde at varsa alt etiketine at resmi diye yazdığımızda google görsellerde at resmi arayan kişiler bizim resmi görebilir.

Başlık etiketleri

Başlık etiketlerimiz h etiketleridir.

H1 Deneme

<h1>H1 Deneme</h1>

H2 Deneme

<h2>H2 Deneme</h2>

H3 Deneme

<h3>H3 Deneme</h3>

H4 Deneme

<h4>H4 Deneme</h4>

Metin etiketleri


Sayfamızda ki metinleri biçimlendirmemiz gerekebilir bu gibi durumlarda metin etiketlerini kullanırız.

Kalın yazmak.
<b>Kalın yazmak.</b>
Sağa yatık (italik) yazmak.
<i>Sağa yatık (italik) yazmak.</i>
Altı çizili yazmak.
<u>Altı çizili yazmak.</u>
Üstü çizili yazmak.
<del>Üstü çizili yazmak.</del>
Üs yazmak.
<sup>Üs yazmak. </sup>

Alt hizada yazı yazmak.
<sub>Alt hizada yazı yazmak.</sub>
Büyük yazı.
<big>Büyük yazı.</big>
Küçük yazı.
<small>Küçük yazı.</small>


Bir kaç ders sonra bir web site yapımına başlayacağız takipte kalın!
Diğer yazımızda görüşmek üzere

Hiç yorum yok

Konu hakkında yorumlarınızı bekliyorum teşekkürler.

Post Top Ad

Post Bottom Ad