HTML Ders Notları
izlere bu notlarla web sayfası yapımı hakkında kısa bir fikir vermeye çeıl!aca#ım. Öncelikli olarak bir web sayfasının yani uzantısını HTML (Hyper Text Markup Language)olan bir sayfanın çalı!ma mantı#ına göz atalım.HTML dilinde yazılmı! kodları servis sa#layıcısının sunucusuna(Server) yüklersiniz (Upload).
Bu sunucuda yayınlanan web sayfamız sitemize gelen ziyaretçilerin browserları tarafından kodlar yorumlanır ve böylece ziyaretçi bizim sayfamızı görmü! olur.
HTML diliyle bazı i!lemleri yapabilece#imiz gibi bazılarını ise yapamayız.mesela metin biçimlendirme, liste, ba#lantılar, resim kullanma, tablolar, çerçeveler ve forumlar yapabilirken etkile!imli ve olaylara duyarlı sayfalar, formları i!leyip de#erlendiren sayfalar yapamayız.
Bir web sayfası yapmak için tek gereken onu nasıl tasarlayaca#ımızı bilmektir.E#er bu i!i kod kullanmadan yapacaksanız Frontpage, Dreamweaver vs programları kullanabilirsiniz.Ama ben bu i!i kodlarla yapaca#ım diyorsanız size tek gereken herhangi bir metin editörü(Metin editörü olarak Windows ta NOTEPAD’i kullanbilirsiniz) .7imdi gelelim temel kodları tanımaya:
| <html>…</html> | Bu kod browsera HTML belgesinin ba!ladı#ı ve biti#i yeri bildirir.Bütün di#er kodlar bu iki kod arasına yazılır |
| <head>…</head> | HTML belgesinin ilk bölümüdür.Bu bölüme yazılanlar metin olarak ekranda gözükmez. |
| <title>…</title> | Head bölümü içine yazılan Title kodu sayfanın ba!lı#ının yazıldı#ı bölümdür. |
| <body>…</body> | HTML belgesinin bütün içeri#i bu kodlar arasına yazılır. |
Bu temel kodları gördükten sonra isterseniz bir HTML sayfasının genel yapısına göz atalım.
<html>
<head>
<title>……<title>
</head>
<body>
……
</body>
</html>
Bu temel yapıyı kavradıktan sonra basit bir sayfa yapabiliriz.
<html>
<head>
<title>Deneme Sayfası</title>
</head>
<body>
Bu bir deneme sayfasıdır
</body>
</html>
Yukarıda gördü#ünü kodları metin editörüne yazıp deneme.html adıyla kaydedersek ve bu deneme.html dosyasını çalı!tırırsak ekrana a!a#ıdaki gibi Bu bir deneme sayfasıdır yazılı bir sayfa gelecektir.
– 1 –
METİN BİÇİMLENDİRME ETİKETLERİ:
HTML sayfasının temel unsurlarını ö#rendikten sonra,artık i!in inceliklerine inebiliriz.?lk olarak yazdı#ımız metinleri !ekillendirmeye bakalım.A!a#ıdaki tabloda yer alan etiketleri bilmemiz bu konuda bize çok kolaylık sa#layacaktır.
| <h1>…</h1> | Başlık |
| <h2>…</h2> | Başlık |
| <h3>…</h3> | Başlık |
| <h4>…</h4> | Başlık |
| <h5>…</h5> | Ba!lık |
| <h6>…</h6> | Başlık |
| <b>…</b> | Yazıları koyu yapar |
| <i>…</i> | Yazılarınızı italik karakter yapar |
| <u>…</u> | Yazılarınıza alt çizgi koyar |
| <p>…</p> | Paragraf etiketi yapar. Paragrafınızın altına ve üstüne bo!luk koyar. |
| <br> | Satırba!ı yapar. |
7imdi yukarıda ö#rendiklerimizi bir örnek ile uygulayalım.
<html>
<head>
<title>Metin Biçimlendirme</title>
</head>
<body>
HTML size metin biçimlendirme konusunda geni! olanaklar sa#lar.Metinleri ister <h1>kocaman</h1> ister
<h6>küçücük</h6> isterseniz <b>koyu</b>, <i>italik </i> veya <u>altyazılı</u> yazabilirsiniz.Yada satırba!ı yapabilir
<br> veya <p> paragraf olu!turabilirsiniz </p>
<\body>
<\html>
FONT TAGI:
Metin biçimlendirmek için yukarıda gördü#ümüz etiketler dı!ında biraz sonra görece#imiz <font>…</font> etiketi de kullanılır.
Font etiketi sahip oldu#u parametreler sayesinde metinlerin renk,yazı tipi,boyut gibi özelliklerini de#i!tirmenize yardımcı olur.?sterseniz bu etikette geçmeden önce renklerden kısaca bahsetmek yerinde olur. HTML’de renkler hexdecimal formunda ifade edilir Bir renk 16’lık sayı düzeninde 6 rakamdan olu!ur ve Bu düzende 9’dan sonraki say1ıarı göstermek için ‘A’dan ‘F’ye kadar olan harfler kullanılır. Bununla birlikte HTML bazı renklerin ?ngilizce isimlerini anlar; a!a#ıdaki örnekte bu renkleri görmektesiniz.
– 2 –
| Green=Ye!il | Red=Kırmızı |
| Black=Siyah | Yellow=Sarı |
| Blue=Mavi | Orange=Turuncu |
Burada görülen renkler hexdecimal cinsinden de ifade edilebilir: Örne#in #FFFFFF beyaz ,#000000 siyah.
Renkleri kısaca tanıdıktan sonra artık asıl konumuza geçebiliriz.HTML belgesinin body bölümüne yazdı#ımız metni <font></font> etiketleri arasına alarak bu metne etiketin a!a#ıda da listelenen parametreleri do#rultusunda bazı özellikler kazandırabiliriz
| Color | hexdecimal veya rengin ?ngilizce ismi de#erini alır |
| Face | Yazı türünün ismi de#erini alır |
| Size | 1 ile 7 arasında istenilen de#eri alır |
7imdi bu parametreleri bir örnekte kullanalım:
<html>
<head>
<title>Font kullanımı</title>
</head>
<body>
Font etiketinin color parametresini kullanarak <font color=”#FF0000″>renkli</font>
<font color=”Blue”>yaz1ılar</font>
<font color=”#00FF00″>yazabilir</font>;<p> de#i!ik yazı karakterleri kullanabilirsiniz:
<font face=”Verdana”>Mesela öyle!</font><p> Hatta yazılarınızı
<font size=”+6″> büyütüp</font>
<font size=”-1″> Küçültebilirsiniz</font>
</body>
</html>
A!a#ıdaki ekran görüntüsünde de yukarıdaki örne#in nasıl çalı!tı#ını görebilirsiniz.
ARKA PLAN ve BODY ETİKETİ:
Web sayfasının içeri#e yazı yazmayı ö#rendikten sonra isterseniz web sayfalarımızın arka planlarını renklendirmeye geçelim. HTML belgesinin ekranda görüntülenen bölümü olan body bölümünün ba!ladı#ını browser’a
<body> etiketiyle bildirdi#imizi biliyoruz. Bir etiketin herhangi bir parametresine atadı#ımız de#er, o etiketin olu!turdu#u alan içerisinde geçerlidir.Yani gibi <body> etiketinin parametrelerine verilen de#erler, bütün sayfa için geçerlidir.A!a#ıda bu parametreleri ve kullanılı!larını görüyorsunuz.
bgcolor Sayfanızın arka planının rengini belirler
background Arka plana .gif,.jpg gibi HTML’in yorumlayabildi#i bir resim dosyası koymanızı sa#lar
text Sayfanızdaki metinlerin rengini belirler
<body bgcolor=”blue”> Sayfamızın arka planını mavi yapar.
<body background=”c:\belgelerim\resim.jpg”> Sayfamızın arka planına resim.jpg isimli dosyanın içeri#i ta!ır.
RESİMLER ve IMG ETİKETİ:
Bir web sayfasında do#ru ve yerinde kullanıldıklarında sayfaya estetik açısından çok !eyler katarlar. fakat büyük boyutları nedeniyle yava! yüklenirler.Bu da ziyaretçinin sıkılmasına,hatta sayfayı terk etmesine neden olabilir.Bu
– 3 –
nedenle, en azından Internet ba#lantıları daha hızlı oluncaya kadar, resimleri ‘az ve öz’ kullanmanız do#ru olacaktır.Resimler <img> etiketi aracılı#ıyla kullanılırlar.A!a#ıda bu etiketin parametrelerini görüyorsunuz.
| src | Resmin bulundu#u dizini bu parametre ile bildiririz |
| width | Resmin geni!li#ini piksel cinsinden bildirir |
| height | Aynı !ekilde resmin yüksekli#ini bildirir |
| border | Resmin etrafındaki çizginin kalınlı#ını belirtir. |
| align | Yatay konum belirler;left,right,center de#erlerini alır. |
| alt | Mouse resmin üzerindeyken yazaca#ınız meni gösterir |
<img src=”deneme.gif” border=”6″ align=”left “ alt=”left”>
