1
2
HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML metinleri ya da verileri biçimlendirmek, düzenlemek için kullanılan komutlar dizisidir. 3
Metin, resim ve diğer nesnelerin bir web sayfası üzerinde nasıl görüntülendiğini ve web sayfasının, bağlantıların birleşimiyle nasıl oluştuğunu belirten dili ifade eder. HTML, dilinde binary veya hexadecimal kodlar yok. Her şey metin tabanlıdır ve bir HTML dokümanı oluşturmak için ihtiyaç duyulabilecek tek şey bir metin editördür. 4
Bir Web sayfası sadece onu okumak isteyen hedef kitleye ulaşır. Web sayfası etkileşimli bir aygıttır. Kullanıcının o Web sayfasına bağlanmasının tek nedeni, o konu hakkında daha çok bilgi sahibi olmaktır. Web sayfaları hazırlamak için kağıt ve mürekkebe ihtiyaç yoktur. Tek masraf, telefon hat ücreti ve sizin kontrol dışında gerçekleşebilecek problemler olacaktır. Web sayfaları yaratırken geleneksel bir sayfa düzeni takip edilmesi gerekmez. Hayal gücünüzü olabildiğine kullanabilirsiniz. 5
Web sayfaları kolayca düzeltilip tekrar yayımlanabilir. Devamlı bir uğraş içinde olunmasına gerek yoktur. Web sayfaları, 24 saat boyunca tüm dünyaya açık olacak ve herkese "etkileşimli" bir hizmet verecektir. Web sayfaları, önceden seçilmiş bir birey grubunun fikirlerini ve beklentilerini öğrenmek için kullanabilir. Bir web sayfasının kaderi diğer medyalar gibi bir çöp kutusunda sonlanmaz. Çünkü onlar "sonsuza kadar kullanılabilecek" şekilde yaratılmıştır. 6
Sitenin yayınlanacağı bir Host Sitede yayınlanacak sayfalar Hazırlanılan sayfanın tipine uygun yazı, resim yada diğer animasyonlar. 7
Klasör ve dosyalara verecek isimlerde; Türkçe karakter kullanılmaz. (ç,ğ,ö,ü,i,ı,ş yerine c,g,o,u,i,s kullanılabilir). Genelde büyük harfler kullanılmaz. İlk giriş sayfasının adı index.html olmalıdır. 8
HTML komutlarının her biri Tag (Etiket) olarak adlandırılır. HTML tagları, html sayfalarını oluşturmak ve düzenlemek için kullanılırlar. <tag>...</tag> şeklinde kullanılırlar. Tagların arasında kalan metne tag içeriği denir. Tag ler büyük harfle veya küçük harfle yazılabilirler. Fakat genelde küçük harf tercih edilir. 9
Her HTML belgesi belirli sayıda standart html tagları içermelidir. Bir HTML belgesinde olması gereken kısımlar şunlardır. temel <html> metni baş <head> metni gövde <body> metni 10
<html> <head> başlık kısmı <title> başlık </title> </head> <body> gövde kısmı </body> </html> 11
<html>...</html> tarayıcıya HTML dosyasının başladığını ve bittiğini belirtir. Diğer tüm kodlar bu iki etiket arasında yer alır. Bir HTML belgesi iki bölüme ayrılır. (gövde). head (baş) ve body <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır. Meta ve title gibi etiketler burada yer alır. <body>...</body> arası ise sayfanın gövde bölümüdür. Ekranda gösterilecek kısımlar bu taglar arasında yer alır. <title>...</title> sayfanın başlığının yazıldığı yerdir. 12
<html> <head> <title>ilk Sayfam</title> </head> <body> Sayfama Hoş Geldiniz. </body> </html> 13
14
<html> <head> <title>devkan Kaleci</title> <meta name="description" content= " İnönü Üniversitesi, Eğitim Fakültesi, BÖTE Bölümü, Fizik, Bilgisayar, Öğretim Üyesi, Ultrasonik"> </head> 15
Arama motorlarında iyi bir sıralama kapmak için meta etiketleri içerisine yazdığımız notlar çok önemlidir. Örneğin "İnönü Üniversitesi" sitesinin Meta etiketleri şöyle olabilir. <META name="keywords" content="inönü Üniversitesi, Fakülteler, Yüksekokullar, Enstitüler, Akademik Takvim, Üniversite, InonuUniversity, Turkey, University, education, campus, Türkiye, academics, students, faculty, masters, graduate schools, sports, class, study, Library, Computer Center, bilgi işlem merkezi, bölümler, bilim, araştırma"> 16
<html> <head> <title>başlık Etiketleri</title> </head> <body> <h1>başlık 1</h1> <h2>başlık 2</h2> <h3>başlık 3</h3> <h4>başlık 4</h4> <h5>başlık 5</h5> <h6>başlık 6</h6> </body> </html> 17
<center>...</center> Sayfanın ortasında görünür. <p> Paragraf yada satır başı yapmak için kullanılır. Sola dayalı olması için: <p align=left> </p> Ortada olması için: <p align=center> </p> Sağa dayalı olması için: <p align=right> </p> Satırbaşı veya paragraf yapmak için: <br> 18
<html> <head> <title>ilk Sayfam</title> </head> <body> <p align=left>yazıyı sola dayalı yaz</p> <p align=center>yazıyı ortalayarak yaz</p> <p align=right>yazıyı sağa dayalı yaz</p> <br> </body> </html> 19
Metinlerin kalın, italik ve alt çizgili olması için; Kalın için <b>kalın Yazı</b> İtalik için <i>italik Yazı </i> Alt çizgi için <u>altı Çizgili Yazı</u> 20
<font face="." size="." color=".">yazı</font> face: Yazı tipinin adı (arial, tahoma, verdana,...). size: Yazının büyüklüğü (1-7 arası). color: Yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri). Bunlara font etiketinin parametreleri denir. 21
<html> <head> <title>mevsimler</title> </head> <body> <font face="verdana" size="7" color="#008000">ilkbahar</font><br> <font face="monotype Corsiva" size="6" color="#ff0000">yaz</font><br> <font face="arial" size="5" color="fuchsia">sonbahar</font><br> <font face="comic sans ms" size="4" color="#0000ff">kış</font><br> </body> </html> 22
23
Yapılması gereken şey, browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibarettir. Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtilmesi uygundur. Kullanılan etiket şu şekilde olmalıdır; <img src="resmin bulunduğu yer ve adı" width="x" height="y"> Burada x resmin enini y ise boyunu belirtmektedir. Bu bilgilere, resmi herhangi bir grafik editörüyle açarak ulaşılabilir. 24
Dikkat edilmesi gereken en önemli özellik resmi açacak olan browser'ın o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul etmesidir. Dosyanın yeri ona göre belirlenmelidir. Üst dizine çıkmak için../ ifadesi kullanılır. <img src="../resim/devkan.gif" width="65" height="91"> 25
Resimleri hizalamak için align komutu kullanılır. Resmi sağa (right), ortaya (center) ya da sola (left) alabilmek için parametreleri yazılır. <img src="devkan.gif" width="65" height="91" align="right"> <img src="devkan.gif" width="65" height="91" align="left"> <img src="devkan.gif" width="65" height="91" align="center"> 26
Fontlar konusunda, metnin rengini belirlerken <font color="..."> etiketini kullanılır ve color komutunun karşısına rengin ingilizce karşılığını yazılır. Etikette kullanılan color="#xxxxxx" ifadesi ise, RGB (red-greenblue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir. Bu renklerden her birinin alacağı değer 00 ile FF aralığında olabilir. <font color="red"> <font color="#ff0000"> 27
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz. #000000=black(siyah) #000080=navy(lacivert) #0000FF=blue(mavi) #008000=green(yeşil) #00FFFF=aqua(turkuaz) #800000=maroon(vişne çürüğü) #808080=gray(gri) #FF0000=red(kırmızı) #FF00FF=fuchsia(parlak pembe) #FFFF00=yellow(sarı) #FFFFFF=white(beyaz) 28
Yalnızca metinler değil aynı zamanda sayfanın arka planı da renklendirilebilir. Bunun için <body bgcolor="#xxxxxx"> etiketi kullanılır. Daha doğrusu sayfanın gövdesini belirtmek için yazılan <body> etiketini, <body bgcolor= #ffffff"> şeklinde değiştirtmesi gerekir. Aynı zamanda <body background="zemin.gif"> ifadesi eklenmesi ile istenilen herhangi bir resim arka plan olarak kullanılabilir. 29
HTML'de en önemli unsurlardan birisi bağlantılardır. Bağlantılar sayesinde hazırlanılan sayfalar birbirleriyle ilişkili hale getirilir. HTML'de metin, resim, ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri yada bunların hepsine bağlantı kazandırmak mümkündür. <a href="hakkimda.html">hakkımda</a> Yazının bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir. <a href="hakkimda.html" style="text-decoration: none;" > Hakkımda </a> 30
<a href="meyve.gif"> Meyve resmi açın </a> <a href= muzik.zip"> Müzik dosyalarını indirin</a> <a href="sayfa2.htm"> 2. sayfaya git </a> <a href="http://www.inonu.edu.tr"> İnönü Üniversitesi</a> <a href="ftp://ftp.inonu.edu.tr/"> Dosyaları indirin </a> <a href="mailto: devkan@inonu.edu.tr"> Mail için </a> 31
Resimlere bağlantı vermek için resmi yerleştirmekte kullanılan <img src="..." width="x" height="y"> etiketini <a href>...</a> etiketinin arasına yazmak gerekir. <a href="sayfa1.htm"><img src="resim.gif" border="0"></a> 32
Bağlantının açılacağı pencereyi belirtmek için etiket (target) parametresi kullanılır. <a href= "http://www.inonu.edu.tr" target= "blank"> İnönü Üniversitesi</a> target="blank " Bağlantı yeni bir pencerede açılır. target="self " Bağlantı aynı pencere içerisinde açılır. target="top" Bağlantı aynı pencere içerisinde en üstte açılır. target="parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur. 33
Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve bittiğini belirtir. Listenin maddelerinin başına ise <li> (list item) etiketini getiriyoruz. <ol> etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle başlayacağını (start) belirtebiliyoruz. 34
<ol type="1" start="3"> <li>kimya <ol type="a" > <li>inorganik <li>analitik </ol> <li>matematik <ol type="a"> <li>sayılar <li>diğer <ol type="i"> <li>türev <li>integral </ol> </ol> </ol> 35
<body bgcolor="#ffcc00"> <font type="verdana" size="4" color="#ffffff"> <ol><h2><u>günler</u></h2> <font color="#0000ff"> <li>pazartesi <li>salı <li>çarşamba <li>perşembe <li>cuma </font> <font color="ff0000"> <li>cumartesi <li>pazar </font> </ol> </font> </body> 36
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istenilen yerde durmasını sağlamak amaçlarıyla kullanabilen HTML'nin en önemli yapıtaşlarındandır. 37
Basit bir tablo yapmak için öncelikle <table>...</table> etiketlerini arası doldurulur. <tr> etiketi ile satırlar, <td> etiketi ile sütunları oluşturulur. <table border="1"> <tr> <td>hücre</td> </tr> </table> <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> </table> 38
<table border="1"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table> <table border="1"> <tr> <td>hücre1</td> <td>hücre2</td> </tr> <tr> <td>hücre3</td> <td>hücre4</td> </tr> </table> 39
width ve height parametreleri tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz. <table border="1" width="150" height="200"> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table> 40
<table border="1"> <tr> <td>ilk satır, sütun 1</td> <td>ilk satır, sütun 2</td> </tr> <tr> <td colspan="2"> İkinci satır <i>birleştirilmiş</i> sütunlar </td> </tr> </table> 41
<table border="1" cellpadding="12"> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td colspan="2">a</td> <td>c</td> <td>d</td> <td colspan="3">e</td> <td>h</td> <td>i</td> <td>j</td> <td>k</td> <td>l</td> 42
<td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> şeklinde kullanılır. bgcolor parametresi hücreyi renklendirmede kullanılır. <table bgcolor="green" <td>hücre İçi Renkli Tablo</td> </table> <table bgcolor="blue" <td>hücre İçi Renkli Tablo</td> </table> 43
<table style="width: 11%; height: 90px" > <tr> <td bg bgcolor="blue">hücre1</td> </tr> <tr> <td bg bgcolor="green">hücre2</td> </tr> <tr> <td bg bgcolor="red">hücre3</td> </tr> <tr> <td bg bgcolor="yellow">hücre4</td> </tr> </table> 44