HTML (Hyper Text Mark-up Language)

Yayın tarihi: 23.08.2006
HTML (Hyper Text Mark-up Language)

HTML (Hyper Text Mark-up Language)

 

Bir web sayfası hazırlamanın yolu HTML dilini bilmekten geçer.  HTML dokümanı yazı dosyasından ibaret gibi görünse de  bir web tarayıcısı (internet explorer, netscape navigator) içerisinde açıldığında anlamlı bir hale dönüşür.

 

HTML bir programlama dili değildir ve programlama dillerine göre öğrenilmesi çok daha kolaydır. Belli başlı komut ve kurallardan oluşur. 

 

HTML, sayfa hazırlanması için üretilmiş hazır programlarda (Microsot FrontPage, Macromedia Dreamweaver, Hot Dog vb. gibi) bulunmaktadır. Fakat bu programlarda sayfa üretirken bile HTML bilgisine ihtiyaç duyulması kaçınılmazdır. Çünkü arka planda nasıl bir sistem çalıştığını, sayfaların nasıl oluştuğunu, değiştirmeniz gereken yerlerde nasıl bir işlem yapılması gerektiğini bilmeden sayfa hazırlayamazsınız.

 

İPUCU

 

Açtığınız bir web sayfasında mouse’la sağ tuşa basıp “kaynağı görüntüle” yi seçtiğinizde kullanılan html kodlarını görebilirsiniz.

 

.HTML YA DA .HTM

 

HTML dosyaları sunucu bilgisayarın sabit diskinde .html yada .htm uzantısı ile saklanır.

 

Temel HTML komutları

Kodlarınızı yazabilmemiz için önce “Başlat” menüsünden “Tüm Proglamlar”a gidip oradan “Donatılar” bölümündeki “Not Defteri”ni seçin. Şimdi açılan Not defteri sayfasına komutları yazmaya başlayabilirsiniz.

 

<HTML> ….</HTML>

 

<HTML> koduyla sayfanın yapımına başladığımızı web sunucusuna anlatırız, </HTML> kullanarak ise

sayfanın bittiğini.Bu komutun yeri genelde web sayfasının başı ve sonu olarak bilinir.

 

< HEAD > ….</ HEAD >

 

<HEAD> kodu sitenin bazı özelliklerini belirtmek için kullanılır ve sitenizi arama motorların bulmasını sağlayan öğeler bu bölüme yerleştirildikten sonra </HEAD> biçiminde kapatırız.

 

< TITLE > ….</ TITLE >

 

Web sayfanızın üst kısmında sitenin başlığını veya adını görüntüler.

 

<TITLE> Benim İlk Web Siteme Hoş Geldiniz </TITLE>

 

şeklinde kullanılır.

 

< BODY > ….</ BODY >

 

BODY kodları arasında kalan yerler sizin sayfanızın içeriğidir. Web sitenizi açtığınızda sayfada gördüğünüz her şey bu kodların arasına yazılır. Tüm tasarım işi bu kodların arasında yer alır.

 

İPUCU

 

Bir web sayfası <html>komutu ile başlar ve </html> komutu ile biter.

Komutlar büyük yada küçük harfle yazılabilir.

Komutlar yazarken Türkçe

karakterler (ş,ç,ı,ü,ğ,ö) kullanılmaz.

Komutlar “<” ve “>” işaretleri arasında yazılır ve bunlara “tag” denilir.

 

İlk sayfanızı hazırlayın

Şimdi açtığımız boş “not defteri” sayfasına aşağıdaki komutları yazarak ilk web sayfamızı hazırlayalım.

 

<html>

<head>

<title>Benim İlk Web Siteme Hoş Geldiniz</title>

</head>

<body>

 

</body>

</html>

Açtığınız “not defteri” sayfasını web sayfası olarak görebilmek için uzantısını “dosya” bölümünden “farklı kaydet” i seçerek index.html veya  index.htm olarak kaydedin, aksi halde hazırladığınız sayfanın uzantısı .txt olacağından basit bir metin sayfası olacaktır.

 

<FONT>....</FONT>

 

Sayfada yer alacak yazılar bu komutlar arasında yer alır. Yazının büyüklüğü için “size”, yazının tipi için “face”, yazının rengi için “color” komutlarını kullanmamız lazım.

 

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<body>

<font size=”4” face=”Arial” color=”red”> Merhaba </font>

</body>

</html>

 

“color” komutuyla sadece yazıyı değil sayfanızın arka planını da renklendirmeniz mümkündür. Bunun için <body bgcolor=”renk adı”> komutunu kullanacağız. Sayfanın başında yer alan <body> komutunu, <body bgcolor=”renk adı”> şeklinde değiştirmeniz yetecektir.  (Bazı renk kodları #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz’dır. Farklı renkler elde etmek için sayıları değiştirin.)

 

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<body bgcolor=”#ffcc00”>

<font size=”4” face=”Arial” color=”red”> Merhaba </font>

</body></html>

Yazı büyüklüğünü belirlemek için “size” yerine farklı komutların arasına yazmanızda mümkündür.

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<body>

            <h1>Merhaba 1</h1>

            <h2>Merhaba 2</h2>

            <h3>Merhaba 3</h3>

            <h4>Merhaba 4</h4>

            <h5>Merhaba 5</h5>

            <h6>Merhaba 6</h6>

</body>

</html>>

 

İPUCU

 

Yazının rengini mutlaka ingilizce olarak yazmalısınız.

 

Kırmızı - red

Mavi - blue

Siyah - black

Sarı - yellow

Lacivert - navy

Yeşil – green

 

Yazıyı biçimlendirin

Yazınızın sayfada görünümünü değişik komutlarla belirleyebilirsiniz.

<center>....</center> yazıyı sayfaya göre ortalar (center). Yazınızın sağa dayalı olması için “right” sola sayalı olması için de “letf” yazabilirsiniz.

<b>....</b>

yazıyı koyu (bold) yazar.

<i>....</i>

yazıyı eğik (italic) yazar.

<u>....</u> yazıyı altı çizili (underline) olarak yazar.

<h1>....<h6> başlık (heading) komutu. h1 en büyük, h6 en küçük.

<p>....</p>  yazıda paragraf yapmaya yarar.

Komut kapatıldığında, sonrasındaki metinden önce bir satır boşluk bırakır ve satır başından yazılır.

 

İPUCU

 

HTML de program yazılırken her satır bir HTML komutlar ile başlar ve komutun bittiği yere aynı komut isminin başına “/” konularak tekrar yazılır. <komut>………</komut>

 

<br>  metinleri bölmek yani ikinci satıra atmak için veya satırbaşı yapmak için <br> komutu kullanılır. Bu komutu “/” ile kapatmanız gerekmiyor. Örnekte görüldüğü gibi günleri yazarken boşluk “enter” tuşuna basmış olmanız yazınızın komut kısmında satırbaşı yapmanızı sağlasa bile sayfayı web üzerinde farklı görüntüler.

 

<html>

<head>

<title>Benim İlk Web Sitem</title>

</head>

<body>

Pazartesi

Salı

Çarşamba

Perşembe

<br>Ocak<br> Şubat<br> Mart<br> Nisan<br> Mayıs

</body>

</html>

 

Liste nasıl oluşturulur

 

Sıralı Liste

Web sayfanızda yer alacak yazıları düzenli bir şekle sokmanıza yarayan sıralı listeler <ol>...</ol> komutlarını arasına <li> komutunu ekleyerek yapılır.Bu komutlarla sıralı listenin rakamla mı harfle mi başlayacağını “type” ya da hangi rakam/harfle başlayacağını “start” belirtebiliyoruz.“Compact” parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor.

 

Sırasız liste

Sırasız liste <ul> komutu ile başlar </ul> komutu ile biter. Burada da maddelerimizi sıralı listelerde olduğu gibi <li> komutu arasına yazılır. Sırasız listenin farkı maddelerimizin başına harf veya rakam yerine küçük kare/daire gibi semboller kullanılabilmesidir. Bu sembolleri <ul> komutunun yandaki “type” değerinin karşısına “disc” yazarak içi dolu daire, “circle” yazarak içi boş daire, “square” yazarak köşeli bir nokta şeklinde elde edebiliriz.

 

Tanımlama listesi

 

<dl> komutu ile başlar </dl> komutu ile biter. Listenin maddeleri <dd> , <dt> komutları arasına yazılır.

 

<dl compact>

<dt><font size=”4” color=”red”>İnternet Nedir?</font>

<dd><font size=”3” color=”black”> İnternet, birçok bilgisayar sisteminin birbirine TCP/IP protokolü ile bağlanmasıyla oluşan ve sürekli büyümekte olan iletişim ağına verilen isimdir.

 

</font>

<dt><font size=”4” color=”red”> İnternet Nasıl Çalışır ?</font>

<dd><font size=”3” color=”black”>İnternet Alan Adı Sistemi (DNS), sistemi ile çalışır. Örneğin,  www.isminiz.com ancak bu alanın bilgisayarın anlayacağı  İnternet protokolü (IP) numarasına   (123.23.43.121) çevirir.

 

</font>

<dt><font size=”4” color=”red”>Web Sitesi Ne İşe Yarar</font>

<dd><font size=”3” color=”black”> Web sitesi internet üzerinde yer alan size ait bir iletişim aracıdır. /font>

 

Sayfanıza görsel imajlar ekleyin

Web sayfanızı daha çekici hale getirmek sizin elinizde. Hazırlamış olduğunuz web sayfasına imaj eklemeye yarayan komut <img src=”resim adı”> şeklinde yazılır.

 

Resmi sayfaya yerleştirdikten sonra konumunu belirlemeniz gerekiyor. <img src=”cicek.jpg” align=”right”> şeklinde yazabilirsiniz. Yani resim sayfanızda sağda align=”right”, solda align=”left” ya da ortada mı align=”center”  yer alsın?

 

Sayfaya koyduğunuz resmin boyutunu width=”en” height=”boy” belirleyerek ortaya istenmeyen bir görüntü çıkmasını engelleyebilirsiniz. <img src=”cicek.jpg” align=”right” width=”190” height=”279”> şeklinde yazabilirsiniz.

 

<html>

<head>

<title>Benim İlk Web Sitem</title>

</head>

<body>

<img src=”cicek.jpg” align=”right” width=”190” height=”279”>

</body>

</html>

 

İPUCU

 

Sayfada birden fazla resim kullanacaksınız olası bir karışıklığı önlemek için resimlerinizi ayrı bir alt klasör içinde toplamanız gerekecektir. O zaman komut <img src=”resmin bulunduğu yer ve resim adı”> şeklinde yazılır. Resminizin görünmesini sağlamak için örneğin: <img src=”resimler/cicek.gif” width=”190” height=”279”> komutunu yazmalısınız.

 

Arka plana resim ekleyin

Web sayfanızın arka planına resim ekleyebilirsiniz.

Web sayfanızın başında yer alan <body> komutunu, <body background=”resim adı”> komutuyla değiştirmeniz yetecektir.

 

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<body background=”resim.gif”>

</body>

</html>

 

Resimlere alternatif yazı ekleyin

Hazırladığınız sayfadaki resimlerin üzerine açıklama metni koyabilirsiniz. Resmin üzerine fareyle geldiğinizde resim hakkında girilen bilgi okunacaktır. Resminize alt=”...” komutuyla açıklama ekleyebilirsiniz.

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<img src=”cicek.gif” alt=”Yaşasın bahar geldi”>

</body>

</html>

 

Sayfalara bağlantı “link” ekleyin

HTML’nin en önemli öğelerinden biri de bağlantı “link” eklemektir. Bağlantılar sayesinde web siteniz içerisinde yer alan birçok sayfayı birbirleriyle ilişkilendirebilirsiniz veya başka web sitelerine geçişi sağlayabilirsiniz. Bağlantı eklemenin birçok yolu vardır.

 

<a href=”....”>...</a> komutları arasında yazıya yada resme bağlantı eklebilirsiniz.

 

Yazıya bağlantı eklemek

Yazıya bağlantı eklemek için <a href=”buraya vermek istediğiniz bağlantıyı girin (resmin adı)”> Buraya bağlantı yazısını yazın</a> komutunu kullanabilirsiniz.

 

<html>

<head>

<title> Benim İlk Web Siteme Hoş Geldiniz </title>

</head>

<a href=”cicek.jpg”> Bu bağlantı sizi çiçek resmine götürecek</a>

</body>

</html>

 

Resme bağlantı ekleyin

Resme bağlantı eklemek için <a href=”buraya vermek istediğiniz bağlantıyı girin (sayfanın adı)”> resmin adını yazın</a> komutunu kullanabilirsiniz.

 

<html>

<head>

<title> Benim ilk Web Siteme Hoş Geldiniz </title>

</head>

<ahref=”index.html”><src=”cicek.jpg” width=”190” height=”269”></a></html>

 

Sayfanıza tablo ekleyin

Tablolar sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin hazırladığınız sayfada istediğiniz yerde durmasını sağlayabilmek için kullanılan en önemli unsurdur. Sayfada bir çeşit iskelet görevi üstlenir.  Web sayfanızda yer alacak yazı ve resimleri kontrol edebilmeniz için tablolardan yararlanabilirsiniz. Her tablo yatay ve dikey hücrelerden oluşur ve bu hücrelerde sayı sınırlaması yoktur. İstediğiniz kadar hücre ekleyebilirsiniz.

 

İPUCU

 

“target” komutu bağlantılarınızın açılma tarzını belirler.

<a href=”...” target=”...”>...</a> şeklinde yazılır.

target=”_blank” bağlantıyı yeni bir pencerede açar.

target=”_self” bağlantıyı aynı pencere içerisinde açar.

target=”_top” bağlantıyı aynı pencere içerisinde sayfanın en üstünden itibaren açar.

target=”_parent” açılan bağlantı, açık sayfanın yerinde bağlantıyı açar.

 

<table>...</table> komutu tablo oluşturmak için kullanılır. 

<tr>…<\tr> Yatay hücre oluşturur

<td>…<\td> Dikey hücre oluşturur

<table border=”1”>

<tr>

<td>Hücre1</td>

<td>Hücre2</td>

<td>Hücre3</td>

</tr>

<tr>

<td>Hücre4</td>

<td>Hücre5</td>

<td>Hücre6</td>

</tr>

</table>

 

(bgcolor=”..”)

 

Renkli hücreler hazırlayın

 

<table>

<tr>

<td bgcolor=”yellow”>sarı renkli hücre</td>

</tr>

</table>

 

Sarı Renkli Hücre

 

(background=”..”) Hücrenize resim yerleştirin

<table>

<tr>

<td background=”deneme.gif”>

Buraya resim gelecek</td>

</tr>

</table>

 

Buraya Resim Gelecek

 

(border=”..”) Hücrenizin kenarını kalınlaştırın

<table border=”10”>

<tr>

<td>kalın kenarlı hücre</td>

</tr>

 

Kalın Kenarlı Hücre

 

Hücrenizin kenarını inceleştirin

 

</table>

<table border=”1”>

<tr>

<td>ince kenarlı hücre</td>

</tr>

</table>

 

İnce Kenarlı Hücre

 

(bordercolor=”..”) Hücrenizin kenarını renklendirin

<table border=”10”

bordercolor=”red”>

<tr>

<td>kenarı kırmızı hücre</td>

</tr>

</table>

 

Kenarı Kırmızı Hücre

 

(bgcolor=”..”)Hücrenizin içini renklendirin

<table border=”10”

bordercolor=”blue”>

<tr bgcolor=”yellow”>

<td>içerisi sarı kenarı mavi hücre</td>

</tr>

</table>

 

İçerisi Sarı Kenarı Mavi Hücre

 

(width=” “ height=” “)  Hücrenizin boyutlarını ayarlayın

<table border=”10” width=”250” height=”70” >

<tr><td>genişliği 250 yüksekliği

70 piksel</td> </tr> </table>

 

(align=” “) Hücrenizdeki yazıyı hizalayın

<table border=”1”>

<tr><td width=”150” align=”left”>Yazıyı sola yasla</td></tr>

<tr><td width=”150” align=”center”>Yazıyı ortala</td></tr>

<tr><td width=”150” align=”right”> Yazıyı sağa yasla </td></tr>

</table>          

 

Sağa Dayalı Yazı

 

(valign=” “)  Hücrenizdeki yazı aşağı dayalı olsun 

<table border=”1”>

<tr>

 <td height=”150” valign=”top”>Yazıyı yukarı yasla</td>

</tr>

<tr>

 <td height=”150” valign=”middle”>Yazıyı ortala/td>

</tr>

<tr>

 <td height=”150” valign=”bottom”>Yazıyı aşağı yasla</td>

</tr>

</table>

 

Yazıyı Yukarı Yada

 

(colspan=”..”) Yan yana iki hücreyi birleştirin

<table border=”1”>

<tr>

<td>1</td><td colspan=”2”>2</td>

</tr>

<tr><td>3</td><td>4</td><td>5</td>

</tr>

<tr><td>6</td><td>7</td><td>8</td>

</tr>

</table>

 

(rowspan=”..”) Alt alta iki hücreyi birleştirin

<table border= “1”>

<tr>

<td>1</td><td rowspan=”2”>2</td><td>3</td>

</tr>

<tr><td>4</td><td>5</td>

</tr>

<tr><td>6</td><td>7</td><td>8</td>

</tr>

</table>

 

Yazılarınızı hücreden ayırın

(cellpadding)

<table border=”1” cellpadding=”15”>

<tr>

<td>Değmeyen hücre</td>

</tr>

</table>

 

Değmeyen Hücre

 

Hücrenin çerçeve kalınlığını belirleyin (cellspacing) 

<table border=”1” cellspacing=”15”>

<tr>

<td>Çerçevesi kalın hücre</td>

</tr>

</table>

 

Sayfanıza form ekleyin

Formlar web sayfanıza gelenler hakkında bilgi alabileceğimiz anket, misafir defteri gibi bölümler oluşturmanızı sağlayan  alanlardır. Ayrıca web sayfanız üzerinden siz e-mail yollamak için yine bu formlar kullanılır. Form hazırlama işlemi <form>...</form> komutları arasında yapılır.

 

Formda kullanılan bazı komutlar ve kullanıldıkları yerler

 

action: Formun gönderileceği adresi belirtir.

method=”get”: Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.

method=”post”: Formdaki bilgiler bir adrese postalanacaksa kullanılır.

type=”text”: Tek satırlık bir metin alanı açar.

size=”…” : Bu metin alanının boyutunu belirler.

type=”checkbox”: Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.

type=”radio”: Tek seçenekli bir sorunun tek yanıtı alınır.

type=”submit”: formu action’la belirtilen dosyaya yönlendiren bir buton yaratır.

 

type=”reset” : Bu butona basınca form boş hale gelir.

type=”password” : Bir şifre alanı oluşturur. Buraya girilen her karakter * şeklinde görünür.

<textarea rows=”..”cols=”..”> : type=“text” gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullanırız. cols metin alanının uzunluğunu,rows ise yüksekliğini pixel cinsinden verir.

 

Şimdi yukarıda belirtilen tüm komutların birarada kullanıldığı bir form hazırlayın.

 

<form name=”kimlik” action=”mailto:info@boyut.com.tr” method=”get”>

Adı Soyadı : <input type=”text” size=”20”><br>

Doğum yeri/Tarihi : <input type=”text” size=”20”><br>

E-mail adresi: <input type=”text” size=”10”><br>

Cinsiyet : <input type=”radio” name=”cins”> Bay <input type=”radio” name=”cins”> Bayan<br>

Bizi nereden duydunuz:<br>

<input type=”checkbox”>Gazete<br>

<input type=”checkbox”>Dergi<br>

<input type=”checkbox”> İnternet<br>

<input type=”checkbox”>Arkadaş<br>

<input type=”checkbox”>Televizyon<br>

<input type=”checkbox”>Diğer :<br>

<textarea rows=”4” cols=”30” name=”diger”></textarea><br>

Şifrenizi giriniz:<br>

<input type=”Password” size=”15”><br>

<input type=”submit” value=”GÖNDER”> <input type=”reset” value=”SİL”>

</form>

 

Bir diğer form türü de açılan menü listeleridir.Burada input komutu yerine select komutu seçenekleri gösterebilmeniz içinse “option” komutu kullanılır.

 

<select name=”Ürünlerimiz”>

<option>Kitap</option>

<option>CD-Rom</option>

<option>DVD</option>

<option>Dergi</option>

</select>

 

 

© 2017 Tüm hakları saklıdır.
Matbaacılar Sitesi No:115 Bağcılar, İstanbul
iletişim
Boyut Pedia Kategoriler