HTML DERSLERi - Van.GEN.TR Forum

**ZyreC** · 23/07/07, 17:24

Web sayfasında genel kod yapısı şu şekildedir:

<html>
<head>
<title>Burada Explorer başlığında görünecek yazı yer alır</title>
</head>
<body>
Sitenizde olması gereken herşey burada yeralır
</body>
</html>

<HTML> </HTML>

Web sayfasında kodlar <html> kodu ile başlar </html> kodu ile biter. Diğer tüm kodlar bu iki kod arasında yer alır.

<HEAD> </HEAD>

<head> kodu ile başlar, </head> kodu ile biter. Sitenin adının yer aldığı Title'lın, Meta Tag denilen arama motorlarında bulunmanızı kolaylaştıran yazıların yazıldığı yerdir.

<TITLE> </TITLE>

<title> kodu ile başlar, </title> kodu ile biter. Her sitenin bir adı olması gerekir. Örneğin;
<title> PcTeknikZone </title>
Bu isim insanların sitenizi bulmasında yardımcı olur. Çünkü sitenizi ararken ismiyle ararlar...
(Ayrıca şunu belirtmekte fayda görüyorum ki; title kodu içine yazdıklarınız web sayfası tarayıcınızın başlığı olarak gözükür. Örneğin internet explorer da en üstte başlık kısmında yer alan yazı yani "::PC TekniK ZonE Forum ::" gibi..

<BODY> </BODY>

<body> kodu ile başlar, </body> kodu ile biter. Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölümdür.

Bu kodları deneyebileceğimiz en kolay yer NOT DEFTERİdir. Şimdi;

Programlar>Donatılar>Not defteri ni açın ve aşağıdaki örneği yazın.

<html>
<head>
<title> ilk sayfam </title>
</head>
<body> HTML kodlarını öğreniyorum. </body>
</html>

ipucu: bu kodlar arasında tek boşluktan fazlasını space yada enter tusları ile yapamazsınız. Bunun için kodlar kullanılır. Bu kodları şimdilik kafanızın karışmaması için kullanmayacağız.

Bu dökümanı; ulaşımda kolaylık sağlaması için, masaüstüne yeni bir klasör açarak index ismiyle kaydedin ve kapatın. Tekrar bu dökümanı açın. Hiçbir değişiklik olmadığını göreceksiniz. Çünkü henüz bu dökümanı htm ye çevirmedik. Bu işlemi gerçekleştirmek için Dosya menüsünden farklı kaydet seçeneğini tıklayın ve index.htm yada index.html ismiyle aynı klasöre kaydedin. Şimdi de yeni kaydettiğiniz sayfayı açarak gözlem yapın. Artık bir web sayfası görünümünde olduğunu fark edeceksiniz.
<FONT> </FONT>

Sayfada yazıların yazıldığı kodlar <font> kodu ile başlar, </font> kodu ile biter. Bu kodların içinde kullanılan komutlar şunlardır:
SIZE : Yazının büyüklük ayarlaması için kullanılan komuttur.
FACE : Yazı tipinin ayarlanması için kullanılan komuttur.
COLOR : Yazının renk ayarlaması için kullanılan komuttur.

Bir denem ile bunları kavrayalım:

<html>
<head>
<title> ilk sayfam </title>
</head>
<body>
<font size=”4” face=”verdana” color=”blue”> HTML kodlarını öğreniyorum. </font>
</body>
</html>

Görüldüğü gibi komutlar; “<font “ dan hemen sonra, yani “<font” kodunu “ >” ile tamamlamadan önce yazılıyor. Yapmak istediğimiz ayarlar çift tırnak yani “ “ arasında yazılıyor ve komuta = işareti ile atanıyor. Ayarlamalar bittikten sonra > işaretimizi yazabiliriz. Bu işlemden sonra yazmak istediğimiz yazıyı yazıp, </font> komutu ile kapatmalıyız. Renk ayarlarında rengin ismini yazabileceğiniz gibi hexadecimal kodunu yazarak ta daha ince ayarlamaları yapabilirsiniz.

**ZyreC** · 23/07/07, 17:24

Satırbaşı yapmak

<br>

Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Bu komutu "/" işareti ile kapatmak zorunlu değildir.

paragraf yapmak

<p>

Paragraf yapmak için kullanılır. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. Bu komutu "/" işareti ile kapatmak zorunlu değildir.

Yazının sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>

Yazının ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>

Yazının sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>

Kalın (Bold) yazı

<b>Yazınızı buraya yazacaksınız</b>

Eğik (İtalik) yazı

<i>Yazınızı buraya yazacaksınız</i>

Altı çizgili (underline) yazı

<u>Yazınızı buraya yazacaksınız</u>

Ama dikkat etmeniz gereken bir şey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız... Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...

Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peş peşe kullanacağız.
<b><i> Yazınızı buraya yazacaksınız</i></b>
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peş peşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.

Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:

<html>
<head>
<title>Sayfada Resim </title>
</head>
<body>
<img src="cicek.jpg">
</body>
</html>

Resmin ortaya hizalanması

<img src="cicek.jpg align="center">

Resmin sağa hizalanması

<img src="cicek.jpg" align="right">

Resmimizin boyutlarını da belirleyebiliriz.
Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.

<img src="cicek.jpg" width=230 height=252>

Resmin üzerine gelince görünen yazı

Mouse'umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.
<img src="cicek.jpg" width=230 height=252 alt="web siteme hoş geldiniz ">

hatırlatma: Resimlerimiz ile .htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz...

**ZyreC** · 23/07/07, 17:24

Bu bölümde html taglarından bazılarının ne işe yaradığını anlatacağım..

A Hiper bağ oluşturmak için kullanılır
ADDRESS Mail Adresi tanımlar
AREA Resimlerin haritası çıkalırlır
B Yazıyı koyu yapar
BASE özel döküman adresi
BASEFONT Font değeri ayarlama
BGSOUND Sayfaya ses ekleme için kullanılır
BIG Font büyüklüğünü artırma
BLOCKQUOTE Yazıyı belli miktarda sağda yazdırır
BODY Çeşitli etiketlerle kullanılır desen etiket v.s için
BR Satır sonu belirtmek için kullanılır
CENTER Yazıyı ortalamak için kullanılır
CITE İtalik yazı tanımlama
CODE Yazıyı genişleterek ilginç bir şekil verir
COMMENT Sayfa içinde açıklama yapma
DD Değişik listelendirme yapar
DFN İtalik yazıya dönüştürür
DL Listelendirme
DT Listelendirme
FONT Font tipini düzenleme
FORM Bilgi alışverişi için form oluşturur
FRAME Sayfada frame oluşturmak için kullanılır.
FRAMESET Frame oluşturmada kullanılan komut
Hn Başlıkları oluşturmada kullanılır.
HEAD Dökümanın tanımlama bölümü burada tanımlanır.
HR Yatay çizgi çizmek için kullanılır
HTML Döküman başlangıcını ve sonunu belirtmek için kullanılır.
I İtalik yazı yapar
IMG Sayfaya resim eklemek için kullanılır
INPUT Formlarda bilgi girişini gösterir.
ISINDEX Arama için bölüm oluşturur
KBD Yazı boyutunu genişletir.
LISTING Yazıyı çok küçük hale getirir
MAP Resimlerin haritasını çıkarmada kullanılır.
MARQUEE Kayan yazı
MENU Listeyi belli oranda sağda görüntüler
NOFRAMES Frameleri desteklemeyen browserler için
OPTION Diyalog kutusu içinde seçim yapmayı sağlar
P Paragraf sonu belirtmek için kullanılır
PLAINTEXT Bu tagdan sonra yazılan herşey web sayfasında görünür.
PRE Yazıyı boşluklu ve aralıklı yazdırır
S Yazıyı ortadan çizer
SAMP Özel yazı kodu ile yazar
SELECT Menu seçimi sağlar
SMALL Çok Küçük yazı yazar
STRIKE Koyu yazı yazdırır
TABLE Tablo oluşturmak için kullanılır
TEXTAREA Küçük alanlara daha çok yazı yazmayı sağlayan text alanı
TITLE Dökümanın başlığını ifade eder
TT Değişik yazı
U Altı çizgili yazı

**ZyreC** · 23/07/07, 17:25

sayfanıza link koymak için şu kod dizimini kullanırsınız;

<a href="http://web_adresini_buraya_yazın">Bu yazı sayfada görünür</a>
yukarıda görmüş olduğunuz gibi başka bir web sayfasına yapacagınız bağlantılarda bu kod dizimi kullanılır. Başka bir sayfaya bağlantı yapmak istediğinizi web tarayıcınız "http://" kodundan anlar. Örneğin;

<a href="http://www.**********.com">deneme bağlantısı PCTeknikZone</a>
bu kod diziminin sayfanızdaki görüntüsü

deneme bağlantısı PCTeknikZone

şeklindedir.Eğer kendi PCnizden bir sayfaya link vermek isteseniz;

<a href="Pcnizdeki_sayfanın_tam_adresi\sayfa_ismi.htm l">Sayfanızda_görünecek_Link_Adı</a>

şimdiye kadar anlattığım bağlantılar hep sizin yapmış olduğunuz sayfa üzerine çağırdığınız sayfayı açar. eğer linki tıkladığınızda yeni bir sayfa olarak gelmesini isiyorsanız target kodunu kullanırsınız.. örneğin;

<a href="http://www.**********.com" target="_blank"> PCTeknikZone sayfasını açar </a>

Mail linki verme:

<a href="mailto:e-mail_adresini_buraya_yazın">e-mail gönder</a>

Linkin alt çizgisini yoketme:

style="text-decoration: none"
hemen örnek verelim;

<a href="http://www.**********.com" style="text-decoration: none"> Van.Gen.TR</a>

**ZyreC** · 23/07/07, 17:26

bgcolor: Arka plan rengi
text: Sayfa içindeki yazıların font color ile değişmediği sürece rengi
link: bir süre hiç ziyaret etmediğimiz bağlantıların rengi
vlink: ziyaret bağlantıların rengi
alink: bir bağlantıya tıkladığımızda bağlantının rengi veya mouse un düğmesini uzunca basılı tutunca bağlantının rengi

Bu belirttiğim özellikler body kısmında tanımlanır.örneğin;

<body bgcolor="#0000a0" text="#ffffff" link="#ffff00" vlink="#808000" alink="#ff0000">

Üzerine gidince ve ayrılınca renk değiştirmesini bir örnekle açıklayalım:

<a href="http://www.**********.com" onmouseover="this.style.color='blue'" onmouseout="this.style.color='red'"> pcteknikzone </a>

**ZyreC** · 23/07/07, 17:26

TABLOLAR

<table> kodu tablo başlangıcı, </table> kodu da bu kodun sonlandırıcısıdır. bu kodları kullanınca hemen çizgiler oluşmaz yada tabloyu tam olarak oluşturduğumuz söylenemez. Tablonun satırlarını ve sütunlarını belirtmek gerekir.

Satır için <tr> kod başlangıcı </tr> kod sonlandırıcısıdır. bu iki kod arasına yazılanlar tek bir satırda bulunacakları gösterir.her satırın ayrı ayrı belirtilmesi gerekir.

Sütun için <td> kod başlangıcı </td> kod sonlandırıcısıdır. bu iki kod arasına yazılanlar tek bir sütunda bulunacakları gösterir.her sütunun ayrı ayrı belirtilmesi gerekir ve bu kodlar istenilen <tr> ile </tr> kodları arasında yeralır. bunun sebebi o sütunun hangi satırda yeralacağını internet tarayıcınıza göstermenizdir.

**ZyreC** · 23/07/07, 17:26

şimdi bir örnek yapalım, daha iyi anlayacaksınız.

<table>
<tr>
<td>ilk satırın ilk hücresi</td>
<td>ilk satırın ikinci hücresi</td>
<td>ilk satırınüçüncü hücresi</td>
</tr>
<tr>
<td>ikinci satırın ilk hücresi</td>
<td>ikinci satırın ikinci hücresi</td>
<td>iikinci satırınüçüncü hücresi</td>
</tr>
<tr>
<td>üçüncü satırın ilk hücresi</td>
<td>üçüncü satırın ikinci hücresi</td>
<td>üçüncü satırınüçüncü hücresi</td>
</tr>
</table>

u örnek 3 satırdan ve 3 sütundan oluşan bir tablo yapar. deneyin göreceksiniz. satır ve sütun sayısını istediğiniz kadar çoğaltabilirsiniz.

**ZyreC** · 23/07/07, 17:27

Hücre ayarları

align: içeriği sola,sağa,ortaya yerleştirme.
valign: içeriği alta, üste, ortaya yerleştirme.

<td valign=top> içeriği üstte gösterir
<td valign=bottom> içeriği altta gösterir
<td valign=middle> içeriği ortada gösterir

<td align=left> içeriği solda gösterir
<td align=rigt> içeriği sağda gösterir
<td align=center> içeriği ortada gösterir

**ZyreC** · 23/07/07, 17:27

Table tanımında kullanılan parametreler
align: tabloyu sola (left), sağa (right), ortaya (center) yerleştirme.
width: tablonun genişliğini belirler.
height: tablonun yüksekliğini belirler.
bordercolor: çizgilerin rengini belirler.
bgcolor: tablonun zemin rengini belirler.
cellspacing: hücrelerin kendi aralarındaki ve dış çizgi arasındaki boşluk.
cellpadding: hücrenin içindeki yazı ile hücre çizgisi arasındaki boşluk.
border:tablonun çizgi kalınlığını belirler. kalınlığı 0 olarak belirlerseniz tablo çizgisi yokolur.

örnek:

<table border=4 align=center width=450 height=150 cellspacing=20 cellpadding=0 bordercolor=blue bgcolor=red>
.
.
.
.
</table>

**ZyreC** · 23/07/07, 17:28

Table başlıkları
<thead> </thead> : table'ın 1. başlığı
<caption> </caption> : table'ın 2. başlığı