HTML DersLeri...

Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
Tekstil Grafik Kursu
HTML'YE GİRİŞ

HTML, HyperText Markup Language, tarayıcı (browser)'lardan görebileceğimiz (Internet Explorer, Netscape gibi) internet dokümanlarını yaratmaya yarayan bir işaretleme dilidir. İnternet üzerindeki tüm sayfaların kaynağı HTML'dir. Tarayıcı olmadan HTML kodları birşey ifade etmez.
HTML dokümanları herhangi bir yazı editörü ile düzenlenip *.htm, *.HTML, *.sHTML gibi uzantılarla kaydedilir. Bunun için notepad, pico, wordpad gibi editörler yeterlidir. Bunların yanında Frontpage, Dreamweaver, Homesite gibi bu iş için hazırlanmış ve kodlamayı kolaylaştıran programlar da vardır.
Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. <> şeklinde görülen komutlara etiket (tag) adı verilir. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body> . . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konulur. title, tarayıcımızın en üstünde gözükür ve oluşturulan sayfanın başlığıdır.
Örnek:

Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir.
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde' ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
Herhangi bir web sayfasının HTML kodunu görmek istediğimiz zaman, farenin sağ tuşuna tıklayıp view source/kaynağı görüntüle seçeneğini seçeriz.
Bir etiketin nasıl davranması gerektiği hakkında bilgi içeren etiketin içindeki metne Değişken denir. Aşağıdaki örnekte body etiketinin içindeki bgcolor ifadesi değişkendir ve arkaplan rengini belirler. Çoğu etiket isteğe bağlı olarak ya da gerektiği için bağımsız değişkenleri kabul eder.
<body bgcolor="yellow">
Çift taraflı etiketler içiçe geçebilirler ama dikkat edilmesi gereken nokta en son açılan etiketin en önce kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir.
<b><i>Bu bir yanlış örnektir. </b></i>
<b><i>Doğrusu budur. </i></b>
<br> ve <hr> gibi tek taraflı etiketler , <br /> ve <hr /> şeklinde yazılmalıdır.

 
Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
LİNKLER:

Linkler <a>. . . </a> etiketi içinde, href="" komutuyla belirtilir.
Örnek:
<a href="http://www.metu.edu.tr" target="_blank">ODTÜ Ana Sayfası</a>
ODTÜ Ana Sayfası
Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir. Aynı pencerede açılmasını isterseniz ilgili değişkeni target="_top" şeklinde yazabilirsiniz. Hiç bir şey yazılmazsa da sayfa aynı pencerede açılır.
title değişkenini kullanarak da fare linkin üzerine geldiğinde gözükecek link açıklamasını ekleyebilirsiniz. Aşağıdaki örnekte fareyle linkin üzerine gelip beklerseniz Orta Doğu Teknik Üniversitesi yazısını göreceksiniz.
<a href="http://www.md-12.com" target="_blank" title="Kişisel Sayfam için tıklayın" >Mustafa Dalcı</a>
Mustafa Dalcı
Eğer hazırladığınız dokümanlar arasında bir bağlantı kurmak istiyorsanıiz, <a> etiketini aşağıdaki gibi kullanmalısınız.
<a href="dosyaadi.HTML">Önceki sayfa</a>
Bir e-posta adresine link vermek istiyorsanız:
<a href="mailto:mail@mail.com.tr">E-posta atmak için tıklayın. </a>
E-posta atmak için tıklayın.
Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.
Aynı doküman içinde bağlantı kurmak istersek tutturucu noktaları (anchor points) kullanırız. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verebilirsiniz. Bu sayfadaki her konu başlığına bir tutturucu belirlenmiştir. Sayfa başındaki listede herhangi bir başlığa tıkladığınızda sayfa içindeki ilgili konu başlığına gider. Örnek olarak Resim Ekleme bölümüne gitmek için buraya tıklayabilirsiniz. Tutturucuların kullanımı aşağıdaki gibidir.
Linkler başlığına aşağıdaki gibi bir tutturucu belirleriz.
<a name="link">Linkler</a>
Sayfanın herhangi bir bölümünde yukarıda belirlediğimiz tutturucuya aşağıdaki gibi link veririz
<a href="#link">Linklere git</a>
 
Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
TAG (Element)'larla ilgili Genel Bilgi

Bu HTML belgemizin ana dilidir. Açılan ve Kapanan Anahtarlar yardımıyla belgemiz tamamlanır. Örneğin: <ELEMENT>içerik</ELEMENT> Şeklinde açarız bilgiyi gireriz ve mutlaka kapatırız. Eğer Elementin kendi özelliğinde kapatılması yoksa tek olarak elemente yer veririz. Bunun gibi durumlarda element sonuna / işareti ekleriz. Örneğin: <BR /> gibi...

* * *​


Element Özelliklerini Belirtmek

Elementlere ait özellikleri ilk açtığımız element içinde ozellik="deger" şeklinde tarayıcıya bildiririz. Örneğin: <ELEMENT ozellik="deger">icerik</ELEMENT>

* * *​


<HTML> Elementi

Bu HTML belgemizin ilk ekleyeceğimiz ve son kapatacağımız TAG'ıdır.

* * *​


<HEAD> Elementi

HTML TAG'ından sonra gelir ve içerikten önce kapatılır. Bu element sitemiz ile ilgili dil, tanıtım, stil vb. konularda bilgilerin tutulacağı bölüm olacaktır.

* * *​


<TITLE> Elementi

HEAD TAG'ından sonra getirilmelidir. Sayfamızın başlığını yazarız. Bu başlık tarayıcının en üst sağ köşesinde görünecektir.

* * *​


<BODY> Elementi

HEAD TAG'ının bitişi ile açılır ve HTML TAG'ının kapanmasından önce kapatılır. BODY TAG'ı belge içeriğini sunduğumuz kısımdır. Sayfamızın arkaplanı, yazıtipi rengi, link renkleri, kenarlıkları vb. konularda bilgi vermemiz içindir.
 
Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
<FONT>

Yazı Şekillendirirken yazı tipi, yazı boyutu gibi özellikleri <FONT> elementi kullanarak şekillendiririz. Örnek verecek olursak...

NOT: <BR /> satır atlama isteğini belirtir. Orjinal kullanımı <BR /> olup kapatılmaz.

Özellikleri:
size="deger" Yazının boyutudur. 0 ile başlar ve yükselir.
color="deger" Yazının rengidir. Hex Renk Kodu ya da ingilizce rengin adı olabilir.
face="deger" Yazıtipidir. Arial, Tahoma, Verdana vs. bunlar birer yazıtipidir.


Kod:
<FONT face="Times New Roman">Times New Roman tarzında bir yazı...</FONT><BR /><BR />

<FONT size="4">4 boyutunda yazı...</FONT><BR />
<FONT size="3">3 boyutunda yazı...</FONT><BR />
<FONT size="2">2 boyutunda yazı...</FONT><BR />
<FONT size="1">1 boyutunda yazı...</FONT><BR /><BR />

<FONT color="#FF0000">Bu yazı #FF0000 rengindedir.</FONT><BR />
<FONT color="red">Bu yazı 'kırmızı' (red) rengindedir.</FONT><BR /><BR />

<FONT size="2" color="#0000FF">Bu yazı 2 boyutunda ve mavi renklidir</FONT><BR /><BR />

Kod:
Times New Roman tarzında bir yazı...

 4 boyutunda yazı...
3 boyutunda yazı...
2 boyutunda yazı...
1 boyutunda yazı...

[COLOR=#ff0000]Bu yazı #FF0000 rengindedir.
Bu yazı 'kırmızı' (red) rengindedir.

Bu yazı 2 boyutunda ve mavi renklidir[/COLOR]
 
Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
Tagların ne anlama geldiklerini artık biliyoruz. Komutlar "<" ve ">" işaretleri arasında yazılır ve "tag" adını alırlar. Bir tag parametreler kullanarak biçimlendirilir ve bu parametrelere (" ") tırnak işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır. Buraya kadar genel tagları anlattık. Şimdi parametreleri inceleyelim.

color: <font color="#000000">… </font> etiketindeki #000000 ifadesi ise yazının renk değerini belirtir. Genel olarak renk değerleri iki şekilde verilebilir. İlk olarak kullanılmak istenen rengin İngilizce adı ve ikinci olarak o renge karşılık gelen Hex Kodları (Hexadecimal değer). Örneğin: black, blue, fuchsia, gray yazabileceğimiz gibi #000000= siyah, #0000FF=mavi, #FF0000=kırmızı, #FFFF00=sarı, #FFFFFF=beyaz kodlarını da kullanabiliriz. Bu rakamlar RGB (Kırmızı-Yeşil-Mavi) karışımının ifadesidir.
<tag color="x"> şeklinde bu parametreyi kullanabiliriz.

bgcolor: Arka plan rengini belirleyen parametredir. <body> etiketinin sayfanın gövde kısmı anlamına geldiğini söylemiştik. <body bgcolor="#FF0000"> yazarsak sayfa arka plan rengi kırmızı olur.

background: Arka plana yerleştirilecek resmin kaynağını belirtir.
<body background="ornek.jpg"> şeklinde kullanılır.

align: Kullanıldığı sayfadaki yatay yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: left, right ve center dir. Left sola, right sağa dayalı olarak gösterilmesini, center ise ortalanmasını sağlar.
<table align="center">
</table>

valign:
Satırdaki hücrelerin içeriğinin dikey olarak nereye hizalanacağını belirtiyoruz. Kullanıldığı sayfadaki dikey yerini belirler. Bu parametrenin 3 değeri vardır. Bunlar: bottom, middle ve top dır. Bottom aşağıya doğru , top yukarı, middle ortaya konumlandırılacağını belirtir.
<table valign="bottom">
</table>

border: Çerçeve kalınlığını belirtir.
<img src="1.jpg" width="340" height="250" border="1"> Border ile resmin çerçeve kalınlığını belirttik.

height: Yükseklik parametresidir.
<tr height="30">
.......
.......
</tr>

link: Sayfadaki yazı linklerin rengini belirler.
<body link="#FF0000">

<body link="#FF0000" text="#000000" vlink="#0000FF" alink="#009966">
alink: Link'e tıklandığındaki rengi belirler.
vlink: Daha önce ziyaret edilmiş linklerin rengini belirler.
text: sayfadaki biçimlendirilmemiş yazıların rengini belirler.

target: Bağlantının açılacağı pencereyi belirtmek için kullanılır.
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 üstten itibaren açılır.
target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.
 
Kayıt
7 Haziran 2008
Mesaj
533
Tepki
6
<table>...</table>

Bu HTML kodları içinde en çok önem verilen etikettir. Sayfada gözükse de, gözükmese de düzenleme amacıyla hemen hemen her sayfada tablo kullanılır.

<html>
<head>
<title>Tablolar</title>
</head>
<body>
<table width="600" border="0">
<tr>
<td>....</td>
</tr>
</table>
</body>
</html>

Sayfaya bir tablo eklemiş olduk. <table width="600"… tablomuzun genişliğinin 600 piksel olduğunu belirtir. … border="0"> ise tablonun henüz çerçevesiz olduğuna işarettir. <table> etiketinden sonra ilk olarak <tr> etiketiyle ilk satırı oluşturuyoruz. Oluşturmak istediğimiz sütun kadar <td> etiketi yazıyoruz. <td>...</td> etiketleri arasına metin yada grafik koyabiliriz.<td> etiketleri ile sütunları oluşturduktan sonra </tr> etiketi ile oluşturduğumuz satırı bitiriyoruz. İkinci, üçüncü... satırları oluşturmak için aynı yöntemi uyguluyoruz.

<table width="600" border="1" align="center"> Tabloya çerçeve ekledik ve sayfadaki yatay yerini belirledik.

<table border=".." cellpading=".." cellspacing=".." align=".." width=".." height="..">
border parametresi çerçevenin kalınlığını belirtir. cellpadding parametresi hücre içi marj değerini belirtir. cellspacing parametresi hücreler arası marjı belirler. align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar.

<table width="600" border="0" align="center">
<tr>
<td bgcolor="#FF0000">....</td>
</tr>
</table>

Yukarıdaki kodlarla hücreyi kırmızıya boyamış olduk.
<td bgcolor="#FF0000">....</td>
 

Buse Türüdü

Altın Üye
Altın Üye
Kayıt
5 Şubat 2008
Mesaj
3.395
Tepki
103
bilgiler için teşekkürler hyper darkness, uğraşan kişiler adına bilinmesi gereken bilgiler...
 
Yukarı Alt