HTML Image
Yeni bir derste daha sizinle buluşmak güzel.Şu ana kadar hangi HTML etiketlerini gördük bir gözden geçirelim;
<h1> </h1> <h2> </h2> <h3> </h3> ...
Başlık yazmak için kullanılır.
Koyu ve büyük yazı elde edilir.
Başlık yazısının öncesinde ve sonrasında otomatik boşluk olur (paragraf olur).
Bazı arama motorları başlık özelliği olan cümledeki kelimeler aratıldığında sayfanızı öne çıkartır.
<br>
Yazının içinde bu etiket olduğunda etiketten sonraki yazı satır başından başlar.
Aynı anda iki tane kullandığınızda satır başı yapılmadan önce boş bir paragraf oluşur.
<font size="" color=""> </font>
Yazılar üzerinde çeşitli işlemler yapabilirsiniz.
size özelliği ile yazının büyüklüğünü ayarlayabilirsiniz.
color özelliği ile yazıya renk verebilirsiniz.
Rengin ingilizce adını yazmanın yanında RGB koduyla da renk belirtebilirsiniz
<body bgcolor=""> </body>
HTML sayfanızın tamamı bu etiket arasında olmalıdır.
bgColor özelliği ile HTML sayfanıza tümden renk verebilirsiniz.
body etiketinin özellikleri tüm sayfayı etkileyecektir.
<html> </html>
Bütün web sayfamız bu etiketin arasında olmalıdır.
<b> </b>
Yazı içerisinde koyu (bold) yazmak istediğimiz kısımları bu etiket ile belirtiyoruz.
<title> </title>
web sayfanızı adını bu html etiketiyle verebilirsiniz.
internet tarayıcısı (Web Browser) sayfanızı açtığında title daki isim ilgili pencerenin ismi olur.
Arama motorlarında sayfanızın ne ile ilgili olduğuna karar verirlirken title etiketi önemli bir kriterdir.
<head> </head>
HTML sayfanızın genelini ilgilendiren özellikler bu etiketin arasında olmalıdır.
title etiketi bunlardan birisidir.
ileride META etiketileri diye öğreneceğimiz bazı etiketler vardır. Bu etiketler de head (baş/kafa) dediğimiz etiketin kapsamında olmalıdır.
Bu dersimizde kullanacağımız HTML etiketleri ve özellikleri şunlardır:
<U> </U> Altı çizili yazı yazmamızı sağlar
<I> </I> italik yazı yazmamızı sağlar.
align özelliği, bir etiket değil etiketlerin birçoğunda kullanılan bir özelliktir.
align özelliğini aşağıda center değeriyle kullanacağız bundan başka align özelliği left ve right değerlerini de alabilir.
align 'ni <H2 align="center"></H2> şeklinde kullanacağız.
<IMG SRC="...."> Resim dosyalarını HTML web sayfamızda göstermemizi sağlar. SRC ile gösterilecek resmin adını belirtiriz.
Haydi derse başlayalım; aşağıdaki görünümde yukarıda bahsettiğimiz etiketler ve özellikler kullanılmıştır.
Arılar Çiçeklere Yardım Eder  Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim. Yazmıştı küçük arı hislerini yaşam öyküsünde: Her günkü gibi sabahın erken vaktinde çıkmıştım yollara. Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk. Güneşin doğuşu biz arılara yeni bir fırsattı. O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim. Güzel olan renkleri görecek güzel kokular duyacaktım. Çiçeklere yardım edecektim bugün yine; İnsanlara anlatacaktım çiçeklerin hem göz hem burun hem kalp hem de dil için olduklarını Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım. İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım. Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım. Ama o gün .... |
Yukarıdaki görüntüyü oluşturan HTML kodu aşağıdaki gibidir.
<html>
<head>
<title> Arıların Çiçeklere Yardımı </title>
</head>
<body bgcolor="#A0C0E0">
<h2 align=center> Arılar Çiçeklere Yardım Eder </h2>
<img src="balarisi.jpg"><img src="sariikicicek.jpg"> <br>
Bir arının günlüğü geçti elime, Okurken bazen hüzünlendim, bazen sevindim.
<br>
<b> Yazmıştı <u>küçük arı</u> hislerini yaşam öyküsünde: </b>
<br>
<font color="#A000E0" size="4">
<i>
Her günkü gibi sabahın erken vaktinde çıkmıştım yollara. <br> Amaçlarımız vardı arı olarak, her gün o amacı yaşamak için kanat çırpıyorduk. <br> Güneşin doğuşu biz arılara yeni bir fırsattı. <br> O gün de renga renk olan çiçekler bulup onlarla sohbet edecektim. <br> <br> Güzel olan renkleri görecek güzel kokular duyacaktım. <br> Çiçeklere yardım edecektim bugün yine; <br> İnsanlara anlatacaktım <b> çiçeklerin hem göz hem burun hem kalp hem de <u>dil için</u></b> olduklarını <br> Çiçeklerin saklı olan güzelliklerini açığa çıkartacaktım. <br> İnsanların Rableri Allah'a şükretmelerini sağlamak için uğraşacaktım. <br> Allah dünyayı çiçeklerle doldurmuştu. Çiçekleri veren Rablerine insanların şükretmelerini sağlamak için uğraşacaktım. <br> Ama o gün ....
</i>
</font>
</body>
</html>
Yukarıdaki kodlar hakkında birşeyler söylemek istiyorum. (Çalışmayı tarayıcıda görmek için buraya tıklayınız)
Daha önceki dersimizde şunu söylediğimizi hatırlayın;
<HTML> <Head> </Head> <Body> Bütün html kodları buraya yazılır. </Body></HTML>
Bu bir kalıptır ve bu kalıba uymak zorundayız.
center kelimesinin anlamı merkezdir; Burada başlığımızı web sayfasının ortasına getirmiştir.
<h2 align=center> </h2> Bazı html etiketleri align özelliğini almaktadır burada header etiketi bu özelliği aldı.
balarisi.jpg dosyası ve sariikicicek.jpg dosyaları html dosyanızla aynı yerde olmalıdır.
Bu resimleri bilgisayarınıza alabilmek için resimlerin üzerine fare (mouse) ile sağ tıklayın.
Gelecek olan menüden Resmi farklı kaydetmeyi seçin.
Unutmayın farklı bir yere değil html dosyanızın olduğu yere kaydedin.
HTML sayfanızı internet tarayıcısında açtığınızda yukarıdaki gibi bir görüntü elde ederseniz bu şu anlama geliyor;
Resimler ilgili html sayfanızla aynı yerde değil.
eğer yukarıdaki bir görüntüyle karşılaştıysanız;
img etiketinin src özelliğinde belirtilen isimlerdeki resimlerin olup olmadığını kontrol ediniz.
HTML etiketleri bir birlerini kesemezler:
Açtığımız herhangi bir etiketin içindeyken (o kapanmadan) başka etiket açabiliriz.
Birden fazla etiketi açtığımızda kapatırken dikkat etmeniz gereken şey
en son açılan etiket ilkin kapanmalıdır.
Bu dediğimi şu şekilde örneklemek istiyorum:
<font> etiketini açtık henüz font etiketi kapanmadan (</font>) bir başka etiket açtık <i> (italik yazma).
Bu iki etikette henüz kapanmadı ve biz 3. etiket olan <U> (altı çizilmiş yazı) açtık.
Lütfen Etiketlerin kapatılma sırasına dikkat edin.
en son açılan <u> kapatılıyor </u>
daha sonra <i> kapatılıyor </i>
en son da <font> kapatılıyor </font>
Bu yukarıdaki resimle sizlere HTML etiketlerini kapatırken son açılan etiketi önce kapatmanız gerektiğini anlatmaya çalıştım.
