Programlama-Dilleri

Farklı bir kalemden htlm dersi


S.a arkadaşlar bu ders’i vermemin öncelikli sebebi sizlerin HTML öğrenmesini sağlamak:) ama bana bunu yaptıranda

Forumda verilen HTML hack kodları gibi başlıklar altında kalıpsal olarak  bazı HTML etiketlerinin(kodlarının) verilmesidir.

HyperText Markup Language(HTML)

evet şimdi dersimize başlayalım:

 

Öncelikle HTML de kodlara etiket(tag) denir.Ve HTML Coding normal bildiğimiz bir txt dosyası (Metin belgesi)nde yapılır.Etiketler Açılır ve açıldıktan sonra Kapanır.(Kapanmak zorundadır.)

example: <html>etiketi açtık.</html>burda ise kapattık.

Öncelikle herşey <html></html>arasına yazılır.

HTML haricinde 2 ana etiket vardır.

 

Head:<head></head> title etiketi head etiketi içerisine gömülür.

Diğer ana etiketimizde

bOdy:<bOdy></bOdy>yapacağımız herşey bu etiket arasına yazılır.

yan etiketler:

Title:Title etiketi Head etiketi içine gömülür. ve web browserimizin

en üstündeki açıklamayı yazdırmamızı sağlar.

 

example:

<html><head>

<title>EmyN’in Sayfasına hoş geldiniz</title>

</head>

bu örnek te yaptığımız tek şey alttaki resimdeki gibi üst bilgiyi yazdırmak oldu.İsterseniz sizde yukardaki örneği metin editörlerinden birisine(notepad vb.)yazıp.Uzantısını .html, .htm olarak kaydedip görebilirsiniz.

evet devam edelim.

işin bittiği yer <bOdy> Etiketi dir.Web tasarım için gerekli herşeyi buraya yazacağız.

alt kodları vermeden önce arkaplan ve yazı rengi ayarlamalarını söyliyeyim.Bunlar bOdy etiketinin içine yazılır.Fakat etiketin içine:)

example:

<bOdy text="blue" bgcolor="red"> gibi.bOdy etiketi açık kalıyor.

bgcolor:Arkaplan rengini ayarlar.

text:Yazı rengini ayarlar.

<tbOdy><tbOdy></tbOdy></tbOdy>

Renk

Renk adı:

Renk

Renk adı:
 

aqua

  

black
 

blue

  

fuchsia
 

gray

  

green
 

lime

  

maroon
 

navy

  

olive
 

purple

  

red
 

silver

  

teal

 burda da renkler ve isimleri var.

evet alt kodlara geçelim.

<center></center>

<b></b>: koyu renk yazı(bold)
<i></i> : italik
<p></p> : paragraf
<u></u> : alt çizgi (underline)

<br> : satır atlama
<hr> : yatay çizgi (horizontal rule)

 

<img src= "www.xxx.com/resim.jpg>Resim koymaya yarar.jpg">

ayrıca ben link ile gösterdim ama ftp ye atılıyo olabilir resim.

onuda index bir klasörde bulunur.ve o klasörden okumaya başlar örneğin biz resmimizi images klasörüne attık.

<img src= "images/resim.jpg">

şeklinde olur.

resmimizi ortalayarak koylalım bide.

<center><img src= "www.xxx.com/resim.jpg">

evet resmimizi ortalamış olduk:)

evet şimdi yazdığımız kodları ayrıntılı açıklayalım.Not:bu etiketler bOdy etiketi altında kullanılır.

<center></center>Girilen metin, resim vb şeyleri ortlar.

<b></b>: koyu renk yazı(bold) example example

<i></i> : Yazılan yazıyı italik yazdırır.
<p></p> : paragraf başı yapar.
<u></u> : yazılan metinin altı çizgili olmasını sağlar.
<br></br> : satır atlama HTML de örnek olarak bir sayfaya şiir yazacağız.

example:

Şiirler çok güzeldir,

Şiir okumak rahatlatır insanı

 

gibi yazarsak HMTL sayfada

 

Şiirler çok güzeldir,Şiir okumak rahatlatır insanı

böyle çıkar.
doğrusu:

Siir okumak güzeldir,

<br></br>

rahatlatır insanı.

gibidir.

<hr></hr> : yatay çizgi (horizontal rule)

example:

                                                                                                                 

 

Metin büyük ve Küçüklük ayarları:

<h1></h1>

<h2></h2>

<h3></h3>

.

.

.

<h7></h7>

ye kadar gelir.En büyük yazı <h1>ile yazar.h2, h3 çoğaldıkça yazı küçülür.

Link verme:

Linkler <a></a> etiketi içinde, href= "" komutuyla belirtilir.

example:

<a href=http://www.Cyber-Warrior.org target="_blank">Cyber-Warrior</a>

    burda da değinmem gereken bişey var.

target="_blank" bu özellik link tıklanıldığında linki yeni pencerede açmasını sağlar.
Eğer aynı pencerede açmasını istiyorsak

target="_top"

olmalıdır.

example:

<a href=http://www.Cyber-Warrior.org target="_top">Cyber-Warrior</a>

gibi olmalıdır.

Evet Temel bilgiler bunlar.Devamını yine bu topic altında göreceksiniz.Şimdi sizlere örnek bir index hazırlayacağım. anlamanız amacıyla.

<html><head>

<title>Bu sayfa benim Sayfam</title>

</head>

<bOdy text="red" bgcolor="black">

<center><h1>Bu sayfa EmyN ye aittir.</h1><center>

<center><img src= "http://img269.imageshack.us/img269/2438/emynavataro21sv.jpg">

</center>

<center>

<a href=http://www.Cyber-Warrior.org target="_top">Cyber-Warrior</a></center></bOdy>

</html>

 

Devamı bu topic altında gelicek.Sorularınızıda bu topic altında alıp cevaplayacağım.

Şimdi kollarım ağırdı biraz mola veriyim:)

Dipnot:En son yazdığım indexi txt ye atıp uzantısını .html yapın ve görün..

 

Bugün 3 ziyaretçi (5 klik) kişi burdaydı!