bstim - html nedir?

html nedir?

HTML nedir?

Açılımı HyperText Markup Language'dir. Bütün brovser (web tarayıcı)'lar ile gösterilen sayfalarınızın kaynak kodları HTML ile görünür hale getirilir. HTML ile oluşturulan sayfaların uzantıları ".html", "htm" ya da ".shtml" gibi uzantılardır. HTML kodlarını yazmak için notped, dreamvewer ve frontpage gibi editörlerden yararlanabilirsiniz. İnternet dünyasının anonim sözü haline gelen "En iyiler notped kullanır." sözünden yola çıkarak biz de sizlere notped kullanımını tavsiye etmekteyiz.

HTML belgelerindek tag'lar (HTML kodları) "<" ve ">" işaretleri arasına yazılırlar. Yeni bir tag başlatacağımızda kodunuzu <...> işaretleri arasına yazarız ve kodun kullanımını bitirmek istediğimiz zaman da </...> şeklinde kodumuzu sonlandırırız. Bu işaretler arasına yazacağınız kodlarda büyük küçük harf kullanımında özgürsünüz.

Temel olarak bir HTML dosyası şu aşamalardan oluşur.

1- <html> ....</html> Bu kodlar tarayıcınıza oluşturduğunuz dosyanın HTML kullanarak oluşturulduğunu gösterir. Açılış kodu sayfanın başında, kapanış kodu ise sayfanın en sonunda bulunur. Bundan sonra yazacaklarımızın hepsi bu iki kod arasına yazıllır.

2- <head>...</head> Kodlardan da anlaşılabileceği gibi bu iki kod normal olarak sayfada görüntülenmea ancak bütün sayfayı etkileyen içeriği barındırır. Bir anlamda kod sayfanızın beynidir diyebiliriz. İçeriğinde stil sayfası bağlantısı, yazı karakteri, meta taglar ve bir sonraki maddede anlatacağımız title (başlık) ögeleri bulunur.

3- <title>...</title> Sayfa başlığımızı (sayfamızın durum çubuğunda görünecek adını) atamamızı sağlayan koddur. Örneğin şu anda ziyaret ettiğiniz sayfanın durum çubuğundaki pencere butonunda bstim.tr.gg yazmakta. Bu yazıyı değiştirmek için bu kodların arasına istediğiniz metni yazmanı yeterlidir.

4- <body>...</body> Bu kodlar bizler için hayati önem taşır çünkü; bundan sonra yazacağımız her şey birebir ziyaretçilerimizin tarayıcısında görünecektir. (Dikkat edin, yoksa kendi kendinizi rezil edebilirsiniz

) Bu kodları bir yazının gelişme bölümü gibi düşünebilirsiniz. Sayfanızın içeriği bu kodlar arasında ziyaretçilerinize sunulacaktır.

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>

Buraya yazacaklarınız doğrudan ziyaretçileriniz tarafında görüntülenecektir.

</body>
</html>

Bir sonraki dersimiz font özellikleri üzerine olacaktır.

MWP NİN EDİTÖRÜNÜN DESTEKLEMEDİĞİ ZAMAN HTML KODUNU NOT DEFTERİNE YAZIN DOSYA FARKLI KAYDET DEYİP DOSYA ADININ YANINA .HTM VEYA .HTML YAZIN ÖRN:sitem.htm

Yazı (Tip, Renk, Büyüklük)

Yazılar aşağıdaki komutlar içine yazılır.

<font> ............... </font>
Yazının büyüklüğü için "size"
yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.

Aşağıdaki örneği yazın:

<font size="3" face="Arial" color="red">BsTim seni çok seviyoruz</font>
Yazıların yerinin <body> komutundan sonra gelmesi gerektiğini unutmayın.
<html>
<head>
<title> BsTim </title>
</head>
<body>

<font size="4" face="Arial" color="red">BsTim seni çok seviyoruz</font>

</body>
</html>

İsterseniz yaptığımızın neye benzediğine bakalım.

üstte explorar sayfasında BsTim sayfada ise ;

BsTim seni çok seviyoruz

YAZI BÜYÜKLÜĞÜ

font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz.

Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.

<h1> BsTim </h1>
<h2> BsTim </h2>
<h3> BsTim </h3>
<h4> BsTim </h4>
<h5> BsTim </h5>
<h6> BsTim </h6>

YAZI RENGİ

Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine, farklı renk isimleri yazın.

red - kırmızıblue - mavi
yellow - sarı
white - beyaz
black - siyah

Diğer renklerin İngilizce yazılışları ve kodları için bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de buraya bir ara göz atın.

Kodlarla yazmak istiyorsanız,
color="#FF0000" renk adı yerine kod yazmanız gerekir.

red - #ff0000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000

Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.

YAZI TİPİ

face="Arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.

Kalın, eğik ve altı çizgili yazmak
Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak.

Kalın (Bold) yazı
[b]Yazınızı buraya yazacaksınız[/b]

Yazıyı eğik yazmak için kullanacağınız kod ise böyle...

Eğik (İtalik) yazı
[i]Yazınızı buraya yazacaksınız[/i]
Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız.

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 ...

Altı çizgili (underline) yazı
[u]Yazınızı buraya yazacaksınız[/u]
Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peşpeşe kullanacağız.
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.

[i]Yazınızı buraya yazacaksınız[/i]

Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim:) Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim...

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:

Resim ekliyoruz
<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<body>
<p><img src="cicek.jpg">
</body>
</html>

Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor.

Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti.

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="DayDay web sitene hoşgeldin ">

Mısra'nın resminin üzerine gelin bakalım
Şimdi bir 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...

Tablo yapmayı öğreniyoruz
Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir.

Tablo için kullanacağımız temel etiketler aşağıdakilerdir.

Tablo oluşturmak için
<table> </table>
Yatay hücre oluşturmak için
<tr>
Dikey hücre oluşturmak için
<td>
6 bömüme (hücreye) ayrılmış bir tablo yapalım
<table border="1">

<tr>

<td>Birinci sırada Hücre1</td>
<td>Birinci sırada Hücre2</td>
<td>Birinci sırada Hücre3</td>

</tr>

<tr>
<td>İkinci sırada Hücre1</td>
<td>İkinci sırada Hücre2</td>
<td>İkinci sırada Hücre3</td>
</tr>

</table>

Hücremin içi renkli olsun (bgcolor)
<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>
Kırmızı hücrem oldu (arkaplanı kırmızı,yazı siyah)

Hücremin içinde resim istiyorum (background)
<table>
<tr>
<td background="deneme.gif">
Heeyy burada resimlerim vaarr</td>
</tr>
</table>
Heeyy burada resimlerim vaarr (arkaplanda resim yazı siyah)

Hücremin kenar kalınlığını değiştirmek istiyorum (border)
<table border="10">
<tr>
<td>kenarı kalın oldu</td>
</tr>
</table> <table border="1">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>

kenarı kalın oldu (kenar kalın)
kenarı ince oldu (kenar ince)

Hücremin kenarını renkli yapmak istiyorum (bordercolor)
<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>
kenarını yeşil yaptım (hücrenin kenarı renkli)

Hücremin içini de renkli yapmak istiyorum (bgcolor)

<table border="10" bordercolor="red">
<tr bgcolor="yellow">
<td>kenarını yeşil yaptım</td>
</tr>
</table>

içi sarı kenarı kırmızı

Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")
<table border="10" width="300" height="80" >
<tr>
<td>genişliği 250 yüksekliği 80 piksel</td>
</tr>
</table>
genişliği 300 yüksekliği 80 piksel

Hücremin içindeki yazı sağda olsun (align=" ")
<table border="1" width="150" height= "100">
<tr>
<td align="right">
BsTim</td>
</tr>
</table>
DayDay

Hücremin içindeki yazı altta olsun (valign=" ")
<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>
bstim

Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)
<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>
1 2 3
4 5
6 7 8

Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)
<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>
1 2 3
4 5 6
7 8

Yazılarım hücrenin kenarına değmesin (cellpadding)
<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>
Değmiyor (yazı tam ortada)

Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)
<table border="1" cellspacing="15">
<tr>
<td>Etrafında boşluk var</td>
</tr>
</table>
kalın veya ince

Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.

Yazıya link vermek
Yazılara nasıl link verilir?

Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir.
Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar.

Bir yazıya nasıl link veriririz?
Bir yazıya link vermek istediğimizde şu kodları yazarız:
(Kalın olarak yazılan yere kendi linkinizi yazacaksınız):

www.bstim.tr.gg

Linkimizin yazısını nasıl renklendiririz?
Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için body taginin yanına renk kodlarımızı yazarız:
(kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..)

<body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">
Linkimizin altında açıklama çıkmasını istiyorsak (title)
Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır:

www.bstim.tr.gg

not defterinde inceleyiniz

Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım.
Siz sayfanızda kendi e-postanızı yazacaksınız..)
Genelde en çok kullanılan mail programı Microsoft'un Outlook Express isimli programıdır. Eğer bilgisayarınızda Windows işletim sistemi yüklü ise bu program da otomatik olarak kurulu olacaktır.