HTML Kullanarak Web Tasarimi

HTML
DERS
NOTLARI
EDiTÖR: Nurcan Baş
İLETiŞiM: [email protected]
[email protected]
1
HTML
"Hyper Text Markup Language"
HTML (Hyper Text Markup Language) WEB sayfalarının hazırlanmasında kullanılan bir
işaretleme dilidir. Web sayfaları bir görüntüden ibaret değildir. Arka plânda birtakım kodlar
bulunmaktadır. HTML kodları da bir web sayfasını oluşturan kodların temelidir. HTML
kodlarını kullanarak bir web sayfasını oluşturacak metinleri veya verileri biçimlendirip
düzenleyebilirsiniz. Gelişen browser teknolojileri sayesinde, HTML içine metinler dışında;
ses, video, scriptler veya çeşitli nesneler ekleyebilirsiniz. Böylelikle HTML dosyası
düzenlenmiş bir metin dosyası olmaktan çıkıp bir multimedya ortamı haline gelebilir.
Html komutları etiketlerden (tag) oluşur. Html komutları yazılırken aşağıdaki kurallara
dikkat edilmesi gerekir;
 < 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.
 Her HTML dokümanı < HTML > ile başlar ve < /HTML > ile biter.
 < > şeklinde görülen komutlara etiket (tag) adı verilir.
 Etiketler büyük(<),küçük(>)işaretleri arasına yazılır.
 Her açılan etiketin görevi bitiği zaman kapanması gerekir. “/” işareti etiketi kapatır.
 Bir HTML dokümanı iki ana kısımdan oluşmaktadır baş ve gövde bölümü.
 < head > . . . < /head > etiketi arasında yer alan Baş bölümü; Giriş bölümünü başlatır
belge başlığı, tarih,içerik vs..tanıtıcı bilgiler yazılır. Meta ve title gibi etiketler burada
yer alıyor.
 < TITLE >……< /TITLE >: Browser' ın başlık çubuğunda görülecek olan sayfanın
başlığı yazılır.
 < body > . . . < /body > etiketleri arasında yer alan Gövde Bölümü. Sayfamızda
görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
 Çift taraflı etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta en son açılan
etiketin en önce kapatılmasıdır.
< HEAD >
Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri,
siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri
bölümdür.
2
Meta etiketinde kullanılan parametreler ;
NAME: Sayfanın yazarı, sayfanın yayın tarihi gibi bilgileri içerir.
 < meta name="author" content="özgü">
 < meta name="description" content="sayfanın tanımını yazınız">
 < meta name ="description" content ="Bu sayfa web tasarımı dersi modülleri için
hazırlanmıştır. ">
 < meta name="keywords" content="siteniz arama motorlarında hangi anahtar
kelimelerle tanımlansın istiyorsanız buraya yazınız."> Şekillerinde yazılır.
HTTP-EQUIV: İçinde yer aldığı sayfanın, web server tarafından ziyaretçiye
gönderilmesinde oluşturulacak karşılık başlığı bölümünde yer alacak bilgiler
içerir. Sıklıkla kullanılan meta etiketleri ve açıklamaları:
 < meta http-equiv=Content-Type content="text/htm; charset=windows-1254">
 < meta http-equiv=Content-Type content="text/htm; charset=iso-8859-9">
 < meta http-equiv=Content-Type content="text/htm; charset=utf-8"> Bu etiketler
Türkçe karakter sorununu ortadan kaldırmak ve Türkçe karakter desteği
sağlamak için kullanılır.
 < meta http-equiv="expires" content ="Tarih">
Güncelleme için kullanılır. İnternette açılan bir sayfa bilgisayara kaydedilir. Bu
sayfa tekrar açılamak istendiğinde, bilgisayardaki kayıtlı sayfa açılır. Bu etiket
ile belirtilen tarihten sonra bu sayfa açılmak istenirse sayfanın tekrardan
serverdan yüklenmesi sağlanır.
 <meta http-equiv="expires" content ="Wed, 29 Dec 2011 15:21:59 GMT">
 <meta http-equiv="refresh" content="5; url=anasayfa.htm">
Sayfanın belirtilen süre sonra yenilenmesini sağlar. Yukarıdaki örnekte sayfa 5
saniye sonra yenilenir ve URL de belirtilen anasayfa.htm sayfası açılır. Eğer URL
boş bırakılırsa aynı sayfa tekrarlanır.
<meta name="robots" content="all veya none">
Hazırladığımız sayfanın arama motorlarının robotları tarafından taranmasına izin vermek
3
veya engellemek için kullanılır. İzin için all, engelleme için none kullanılır.
Meta etiketi ile tanımlanan bilgiler kullanıcı tarafından görüntülenmez.
< BODY>
Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü
tarayıcıda görüntülenir. Body etiketi ile birlikte kullanılabilecek parametreler ve görevleri
aşağıda gösterilmiştir.
Bgcolor: Hazırlamış olduğunuz web sayfasının arka plân rengini belirlemek için
kullanılır.
Kullanımı; < body bgcolor=”blue”>… < /body>
Background: Hazırlamış olduğunuz web sayfasının zemininin bir resimden oluşmasını
isteyebilirsiniz. Bu parametre arka plânda kullanılmak istenilen resmi belirlemek için
kullanılır.
Kullanımı; < body background=”resim.jpg”>….< /body>
Link: Web sayfanızda kullanacağınız linklerin rengini belirlemek için kullanılır.
Alink: Web sayfanızdaki herhangi bir Linke tıklandığı zaman oluşacak rengin ne
olacağını belirlemek için kullanılır.
Vlink: Web sayfanızdaki önceden ziyaret edilmiş linklerin renginin hangi renk olacağını
belirlemek için kullanılır.
<TITLE>
Sayfanın tarayıcıdaki başlığının ne olacağını belirlemek için kullanılır. Title etiketleri
<Head>….</Head> etiketleri arasında yer alır.
Kullanımı; < title> görüntülenmesini istediğiniz başlık </title>
METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ
Başlık etiketleri :
6 çeşit başlık vardır: <h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise
<h6>'dır.
4
Örnek:
<html>
<head>
<title> Web Tasarımı </title>
</head>
<body>
<h1> Web Tasarımı </h1>
<h2> Web Tasarımı </h2>
<h3> Web Tasarımı </h3>
<h4> Web Tasarımı </h4>
<h5> Web Tasarımı </h5>
<h6> Web Tasarımı </h6>
</body>
</html>
Metin Vurgulama Etiketleri:
<B></B> : Yazıyı koyu yapar
Örnek: < B>Bu Yazı Koyudur.< /B> Bu Yazı Koyudur.
<I></I> : İtalik Yazı
Örnek: < I>Bu Yazı Yatık Yazıdır. </I> Bu Yazı Yatık Yazıdır.
<U></U> : Altı Çizili Yazı
Örnek: <U>Bu Yazı Altı çizili Yazıdır. </U> Yazı Altı çizili Yazıdır.
<S></S> : Üzeri Çizili Yazı
Örnek: <S>Bu Yazı Üzeri çizili Yazıdır. </S> Bu Yazı Üzeri çizili Yazıdır.
Paragraflar, Satır boşlukları ve Yatay Çizgiler: Paragraflar <p> etiketiyle oluşturulur.
Paragraf metni <p> ile </p> arasında yer alır.
Örneğin:<p>Bu bir paragraftır. </p>
Paragraf başlatmadan bir satır boşluğu yaratmak için <br/> etiketi kullanılır. Satır atlama,
satır başından yazma.
Bu etiket sonlandırılmaz <hr> etiketini kullanırız.
<center>....</center>: Aradaki metinleri sayfaya göre ortalar.
Örnek
5
<html>
<head>
<title> Nurcan< /title>
</head>
<body>
<h1> <center> Nietszche’den İnciler </center> </h1>
<p> Gidene kal demeyeceksin. .. </p>
Gidene kal demek zavallılara,
<b> Kalana git demek terbiyesizlere, </b>
<i> Dönmeyene dön demek acizlere, </i>
<u> Hak edene git demek asillere yakışır </u>
<br> Kimseye hak ettiğinden fazla değer verme, yoksa değersiz olan hep sen olursun...
</body>
</html>
< FONT>
< FONT> etiketi, kullanıldığı yerdeki metinlerin renk, boyut, yazı tipi gibi özelliklerini
değiştirmek için kullanılır.Size, color ve face parametreleri ile kullanılabilir.
Size: Yazının büyüklüğünü belirlemek için kullanılır(1-7 arası değerler alır.).
Color: Yazı tipi etiketi içerisinde metnin rengini değiştirmek için kullanılır. Kullanmak
istediğiniz rengi, ismi veya kodu ile belirterek metin üzerinde renk değişikliği yapabilirsiniz.
Face: Yazı tipi karakter biçiminde değişiklik yapmak için kullanılır. Örneğin Face=" Times
New Roman" parametresi kullanıldığında yazı tipi Times New Roman olacaktır.
Örnek
<html>
<head>
<title>Renkler ve Mevsimler</title>
</head>
< body>
<font face="tahoma" size="5" color="#008000">İlkbahar</font>
<br>
<font face="verdana" size="5" color="#ff0000">Yaz< /font>
<br>
<font face="arial" size="5"color="#ffff00">Sonbahar</font>
6
<br>
<font face="comic sans ms" size="5"color="#0000ff">Kış</font>
<br>
</body>
</html>
RENKLER
Renk kodları Artalanı renklendirmek Renk Kodları Fontlar konusunda, metnin rengini
belirlerken < font color=...> etiketini kullanılır ve color parametresinin karşısına rengin
ingilizce karşılığını veya renk kodunu yazabiliriz.
Etikette kullandığımız color=#xxxxxx ifadesi RGB (red-green-blue,kırmızı-yeşilmavi)
renklerinin karışım oranlarını belirtir.
Bu renklerden her birinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00
minimum karışımı verir).
Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF
beyaz'dır.
Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz.
#000000= black(siyah) #000080= navy(lacivert) #0000FF= blue(mavi) #008000=
green(yeşil) #008080= teal(koyu yeşil) #00FF00= lime(parlak yeşil) #00FFFF=
aqua(turkuaz)
#800000= maroon(vişne çürüğü) #800080= purple(mor) #808000= olive(zeytuni yeşil)
#808080= gray(gri) #C0C0C0= silver(gümüşi gri) #FF0000= red(kırmızı) #FF00FF=
fuchsia(parlak pembe) #FFFF00= yellow(sarı) #FFFFFF=white(beyaz)
Arkaplanı renklendirmek
Bu renklerle yalnızca metinleri değil sayfamızın artalananını da(arka plan) renklendirebiliriz.
Bunun için < body bgcolor=#xxxxxx> etiketini kullanıyoruz. Sayfamızın gövdesini
belirtmek için yazdığımız < body> etiketini,< body bgcolor=#xxxxxx> şeklinde
değiştiriyoruz.
Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !
Örnek:
<body bgcolor="#ffcc00">
7
<font type="verdana" size="4" color="#ffffff">
<h2>< u>Günler</u></h2>
<font color="#0000ff">
<br>Pazartesi
<br>Salı
<br>Çarşamba
<br>Perşembe
<br>Cuma
</font>
<font color="ff0000">
<br>Cumartesi
</font>
</font>
</body>
Listeleme Etiketleri
HTML bize üç tip liste hazırlama imkanı veriyor.
Bunlar;
 Sıralı listeler (ordered list)
 Sırasız listeler (unordered list)
 Tanımlama listeleri (definition list)
Sıralı listeler (ordered list)
Sıralı listeler rakam veya harf yada her ikisini iç içe kullanarak liste oluşturmamızı sağlar.
Sıralı listeler 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(madeleme). Bu etikette
tıpkı < br> etiketi gibi sonlandırılmıyor.
< ol> etiketine parametreler ekleyebiliyoruz.
Bunlarla listemizin rakamla mı harfle mi başlayacağını (type) yada hangi rakam/harfle
başlayacağını (start) belirtebiliyoruz.
Örnek
<ol type="1">
<li>Kimya
<ol type="a">
8
<li>İnorganik
<li>Analitik
</ol>
<li>Fizik
<ol type="a">
<li>Dinamik
<li>Statik
</ol>
<li>Matematik
<ol type="a">
<li>Sayılar
<li>Diğer
<ol type="i">
<li>Türev
<li>İntegral
</ol></ol></ol>
Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak ta mümkün.
Dikkat edeceğimiz nokta, ise <ol> etiketi ile başlayıp liste maddelerinin her birisinin baş
ına <li> etiketini getirmek ve listelemeyi bitirmek istediğimiz yerde </ol> etiketini yazmak.
Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar <ol>
etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz.
Örnekte görüldüğü gibi type değişkeni sıralı listenin türünü belirler. Type değişkeni için
aşağıdaki değerlerden biri kullanılabilir:
type: {1, a, A, I, i} Listeyi start değişkeni ile istediğimiz sayıdan başlatabiliriz.
Sırasız listeler (unordered list)
Bu tip listede de mantık aynı. Fark, listeleme yaparken maddelerin başına harf, rakam gibi
unsurlar yerine küçük yuvarlaklar,kareler kullanabilmemiz. < ol> etiketi yerine < ul>
etiketini kullanıyoruz, maddeler için kullandığımız < li> etiketi burada da geçerli.
Benzer şekilde burada da type değişkeni sırasız listenin işaretini belirler. Type değişkeni için
aşağıdaki değerlerden biri kullanılabilir:
type:{square, disc, circle} disc (içi dolu daire), circle (içi boş daire), square (içi dolu kare).
9
Örnek:
<ul type="disc">
<li>Kimya
<ul type="square">
<li>İnorganik
<li>Analitik
</ul>
<li>Fizik
<ul type="square">
<li>Dinamik
<li>Statik
</ul>
<li>Matematik
<ul type="square">
<li>Sayılar
<li>Diğer
<ul type="circle">
<li>Türev
<li>İntegral
</ul></ul></ul>
TABLOLAR
< TABLE>
Hazırlamış olduğunuz web sayfanıza tablo eklemek için kullanılan etikettir. Bir tablo
<Table> etiketi ile başlayıp </Table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur.
Satırların ve sütunların kesiştikleri kutuya “hücre” adı verilir.
Aşağıdaki örnekte 1x1’lik (1 satır ve 1 sütundan oluşan) bir tablo gösterilmiştir.
TR
Tabloda satır oluşturmak için kullanılır.
10
TD
Tabloda sütun oluşturmak için kullanılır.
Border
Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için
kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama
sürecinde bu seçenek sıklıkla kullanılmaktadır.
Bordercolor
Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.
11
Bgcolor
Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için
kullanılır.
Background
Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.
Width
Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. < table
width=”200”> Tablo genişliğini belirlemek için kullanılır. < td width=”200”> Hücre
genişliğini belirlemek için kullanılır.
12
Height
Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır. < table height=”200”>
Tablo genişliğini belirlemek için kullanılır. < td height=”200”> Hücre genişliğini belirlemek
için kullanılır.
Colspan
Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.
Örnek:
13
Rowspan
Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.
Örnek:
Cellspacing
Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel
türünden ayarlamak için kullanılır.
14
Cellpadding
Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek
için kullanılır.
http://www.ilhanalbayrak.name.tr/
15