HTML’ ye Giriş Uzm. Murat YAZICI
HTML Nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. 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 ziyaretçileriyle web sayfaları arasında etkileşimi mümkün kılacak komutlar içermez. Fakat, PHP, ASP, Javascript, Flash veya CSS gibi farklı eklentiler sayesinde dinamik web sayfaları biçimlendirilebilir.
HTML Kodları HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir. Bu bölümdeki uygulamalar Not Defterinde yapılacaktır. HTML kodlarından oluşan dosyanın uzantısı .htm veya .html olabilir. Günümüzde HTML kodlarını otomatik oluşturan bir çok program mevcuttur.
HTML Etiketleri HTML komutlarının her biri Tag (Etiket) olarak adlandırılır. Tag, daima sivri parantezler içinde yazılır. Harflerin küçük veya büyük yazılması HTML'de hiçbir önem taşımaz. <html>......</html> <HTML>......</HTML> <Html>......</HTML> HTML tagları iki şekilde sınıflandırılabilir. 1) Bir açma bir de kapama tag’ından oluşanlar( <b> kalın yazı </b> ) 2) Tek başına bulunan tag’lar ( <hr> , <br> )
HTML Sayfalarının Yapısı
HTML Etiketleri <html>...</html> Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır. Bir HTML belgesi iki bölüme ayrılır: head(baş) ve body(gövde). <head>...</head> etiketleri arasına sayfa hakkında bilgiler yazılır. <meta> ve <title> gibi etiketler burada yer almaktadır. <body>...</body> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu etiketler arasında yer almaktadır. <title>...</title>Title sayfanın başlığını belirtir.
İlk sayfamız (HTML Kodu)
İlk sayfamız (Ekran Görüntüsü)
Özel Karakterler Boşluk karakteri © © karakteri HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için aşağıdaki kodlar kullanılır. Boşluk karakteri © © karakteri < < karakteri > > karakteri & & karakteri " " karakteri
Özel Karakterler NOT : HTML etiketleri arasına yazılan metin içerisindeki boşluklardan birden fazlası tarayıcılar tarafından yorumlanmaz. İki kelime arasına konulan birden fazla boşluklar tek boşluk olarak yorumlanır. İki kelime arasına veya iki nesne arasına birden fazla boşluk karakteri koymak için kodu kullanılmalıdır. Ayrıca Enter tuşu ile kodları ve içeriği alt satıra indirmekte HTML açısından bir etkisi olmaz. Alt satıra geçmek için <BR> etiketini kullanmadıkça alt satıra geçilmez.
<HEAD> Etiketinin Alt Etiketleri <META> Etiketi : Web sayfalarına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri, tazeleme süresi… gibi bilgiler yer alır. <META HTTP-EQUIV= "refresh" CONTENT= "5; URL=http://muratyazici.com "> Yukarıdaki etiket HTML sayfasının 5 saniye sonra muratyazici.com sayfasına yönlenmesini sağlar.
<HEAD> Etiketinin Alt Etiketleri <META HTTP-EQUIV= “content-language“ CONTENT= “TR “> Sayfanın içeriğinin Türkçe olduğunu göstermektedir. <META NAME= “keywords“ CONTENT= “ASP, PHP, Programlama“> Arama motorları tüm webde sayfaları tararken sayfaları kolay ve istenilen biçimde indekslemek için yardımcı olmak amacıyla yukarıdaki gibi keywords değişkeni kullanır. <META CONTENT= “Web tasarımı ile ilgili her şey“ NAME=“description”> Sayfa hakkında açıklama cümlesi yazmak için description değişkeni kullanır.
<HEAD> Etiketinin Alt Etiketleri <META NAME= “author“ CONTENT= “Murat YAZICI“> Sayfayı hazırlayan kişiyi belirtmek için Author değişkeni kullanılır. <html> <head> <meta http-equiv=“refresh” content=“3; URL=http://rize.edu.tr/”> <meta http-equiv=“content-language” content=“TR”> <meta name=“keywords” content=“Asp, Php, Programlama”> </head> <body> 3 sn. sonra ayrılıyoruz. </body> </html>
<HEAD> Etiketinin Alt Etiketleri <TITLE> Etiketi : Sayfaların başlığını belirler Tarayıcı penceresinde başlık çubuğunda yazılan başlık görüntülenir. <html> <head> <meta name=“keywords” content=“Asp, Php, Programlama”> <title>Uzm. Murat YAZICI</title> </head> <body> Sayfanın başlığına bakınız.</body> </html>
<HEAD> Etiketinin Alt Etiketleri <STYLE> Etiketi : Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır. Bu etiket sayfa içi stil belirlemede kullanılır. <html> <head> <style> p { color: red; } h1 { color: blue; text-align: center; } </style> </head> <body> <h1> Merhaba </h1> <p> Web Tasarımı Dersine hoşgeldiniz. </p> </body></html>
<HEAD> Etiketinin Alt Etiketleri <LINK> Etiketi : Sayfaya ait stil sayfalarını bağlamak için kullanılır. Bu stil sayfaları harici sayfalardır. Bu sayfaların yapısı CSS bölümünde ayrıntılı olarak incelenecektir. Aşağıda link etiketinin kullanımı gösterilmiştir. <head> <LINK REL= stylesheet TYPE=“text/css” REF=“stil.css”> </head>
<HEAD> Etiketinin Alt Etiketleri <SCRIPT> Etiketi : VBScript, Javascript kodlarının yazılacağı bir alandır. Gerektiğinde <BODY> etiketi sınırları içerisinde de kullanılabilir. Aşağıda <script> etiketinin kullanımı gösterilmiştir. <html><head> <script language="Javascript"> alert("Siteme hoşgeldiniz."); </script> </head> <body> Javascript etiketi çalıştı. </body></html>
<BODY> Etiketi ve Alt Etiketleri HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir. BODY etiketinin alacağı parametreler : Bgcolor : Sayfanın arka plan rengini belirler (renk) Background : Sayfanın arka plan resmini belirler (URL) Topmargin : Üst kenar boşluğu (sayı) Leftmargin : Sol kenar boşluğu (sayı) Link : Sayfadaki linklerin rengini belirler (renk) Vlink : Ziyaret edilen bağlantıların rengini belirler (renk) Text : Sayfadaki metnin rengini belirler (renk)
<BODY> Etiketine Bir Örnek… <html> <head> <title>Body etiketine bir örnek</title> </head> <body bgcolor=#FFFF99 topmargin=100 leftmargin=50 text=grey> Bayrakları bayrak yapan üzerindeki kandır ; <br> Toprak eğer uğruna ölen varsa vatandır. </body> </html>
Metin Biçimlendirme Etiketleri <FONT> Etiketi : Yazıda etkin olacak fontla ilgili çeşitli biçimlendirmeleri yapmak için kullanılır. Fontun tipi, rengi ve büyüklüğü ayarlanabilir. FONT Etiketi Parametreleri Color : Yazının rengini belirler (Renk) Face : Metnin yazı tipini belirler (Arial, Verdana, …) Size : Yazının büyüklüğünü belirler (Sayı) [ 1 – 7 ]
Örnek… <html> <head> <title>Font etiketine bir örnek</title> </head> <body> <font color=“#0000FF” size=“3” face=“Courier New”>Merhaba</font><br> <font size=“5”>Uzm. Murat YAZICI</font><br> <font color=“#008000” size=“4”>www.muratyazici.com</font><br> </body> </html>
Metin Biçimlendirme Etiketleri <B> (Bold) Etiketi : Metni kalın ve koyu yapar. <I> (Italic) Etiketi : Metni italik biçimde yazar. <U> (Underline) Etiketi : Metni altı çizili olarak biçimlendirir. <SUB> Etiketi : Metni alt simge olarak gösterir. <SUP> Etiketi : Metni üst simge olarak gösterir.
Uygulama 1 <body> <html> <head> <title>Metin biçimlendirme etiketleri</title> </head> <body> <b>Korkma, sönmez bu şafaklarda yüzen al sancak;</b><br> <i>Sönmeden yurdumun üstünde tüten en son ocak.</i><br> <u>O benim milletimin yıldızıdır, parlayacak;</u><br> <b><u>O benimdir, o benim milletimindir ancak.</u></b> </body> </html>
Uygulama 2 <body> <html> <head> <title>Örnek</title> </head> <body> 2<sup>2</sup> * 3<sup>2</sup> = (2*3) <sup>2</sup> </body> </html>
Metin Blokları Etiketleri <P> (Paragraf) Etiketi : Metin içerisinde paragraf oluşturmak için kullanılır. align : Paragrafı hizalamak için kullanılır. Aşağıdaki değerleri alır. left : Sola yaslı right : Sağa hizalı center : Ortalı justify : Her iki yana yaslı
Uygulama <body> <html> <head> <title>P etiketine örnek</title> </head> <body> <p align= "center">RİZE ÜNİVERSİTESİ</p> <p align= "justify"> Rize Üniversitesi, Türkiye Cumhuriyeti Bakanlar Kurulu'nun 2006 yılı içerisinde aldığı bir kararla bağlı olduğu Karadeniz Teknik Üniversitesi'nden ayrılarak Rize ilinde açılan üniversitedir. </p> <p align= "right">www.rize.edu.tr</p> </body> </html>
Metin Blokları Etiketleri <BR> Etiketi : Satır başı için kullanılır. Sonlandırması yoktur. Satırbaşı ile paragraf arasında görüntü olarak iki satır arası yükseklik ve yerleşim farkı vardır. <H1>…<H6> Etiketleri: Başlık etiketleridir. H harfinin yanındaki rakamsal değer başlığın büyüklüğünü belirler. Bu değer 1 için en büyük, 6 için en küçüktür. align (left, right, center) parametresiyle de kullanılabilir.
Uygulama <html> <head> <title>Örnek</title> </head> <body> <H1 align= "center">RİZE ÜNİVERSİTESİ</H1> <H2 align= "center">Meslek Yüksekokulu</H2> <h3 align= "center">Elektronik Teknolojisi Bölümü</h3> <h6 align= "center">Web Tasarımı Dersi</h6> </body> </html>
Metin Blokları Etiketleri <PRE> Etiketi : HTML kod sayfasındaki biçimin (boşluk, satır,paragraf…) aynen kullanılmasını sağlar. Bu etiket birçok etiketi ve özel karakter kodlarını kullanmadan metin biçimlendirmede çok büyük kolaylıklar sağlar. Sonlandırması vardır. ( <pre> …….. </pre> )
Uygulama <html> <head> <title>Örnek</title> </head> <body> <pre> int a = 10; if (a%2 == 0) Console.WriteLine(“Çift”); else Console.WriteLine(“Tek”); </pre> </body> </html>
Metin Blokları Etiketleri <HR> (Horizontal Ruler) Etiketi : Sayfaya yatay bar şeklinde çizgi eklemek için kullanılır. Sonlandırması olmayan bir etikettir. Aşağıda etiketin özellikleri ve aldıkları değerler verilmiştir : align : Yataydaki konumunu verir. (Varsayılan : center) (left, right, center) size : Piksel cinsinden kalınlığını belirler. width : Genişliğini belirler. (Varsayılan : %100) color : Çizginin rengini belirler. (Varsayılan : Siyah)
Sayfalara Resim Eklemek <img> Etiketi : Sayfaya resim eklemek için kullanılır. jpg, bmp, gif, png… gibi resim formatlarını belirler. Sonlandırması olmayan bir etikettir. src : Resmin konumunu belirler. alt : Resme ait açıklama metni (fare resmin üzerine geldiğinde ortaya çıkar) height : Resmin yüksekliği width : Resmin genişliği align : Yataydaki konumu (left, right) border : Resmin kalınlığı
Uygulama <html> <head> <title>Örnek</title> </head> <body> <img src="resim/ru.jpg" alt="Rize Üniversitesi logo" width="150" height="200" > </body> </html>
Bağlantı Eklemek (Link Vermek) <A> Etiketi : Bağlantı eklemek için kullanılır. <a>…</a> etiketleri arasına yazılan metinlerin veya resim gibi nesnelerin üzerlerine fare ile tıklandığında tarayıcı belirtilen adrese ziyaretçiyi yönlendirir. <A> etiketinin özellikleri : href : Bağlantı adresini belirlemek için kullanılır. href="index.htm" , href="dosyalar/cv.doc" , href="http://rize.edu.tr" target : Bağlantı ile gidilecek sayfanın hangi pencerede açılacağını belirler. target="_blank" (Yeni sayfada açmak için)
Uygulama <html> <head> <title>Örnek</title> </head> <body> <a href="http://rize.edu.tr" target="_blank"> Rize Üniversitesi </a> web sayfası </body> </html>