SüperTeklif'e üye ol, sen de kazan!
   
  Sitemize Hoşgeldiniz
  HTML
 
HTML Nedir?

HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak
 için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP
 (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları 
sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı
 ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından
 başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya 
da Pascal programında olduğu gibi bir derleyici ile 
derlememize gerek yoktur. Bir siteye girdiğimiz 
zaman bize görüntülenen ilk sayfa index.html,
index.htm, index.asp, index.php ya da 
 dosyalarından birisidir. index.* 
dosyaları UNIX ve türevi sunucu sistemler,
default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. 
Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da 
sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.
HTML’nin Yapısı
 
Daha öncede söylediğim gibi html dosyaları sadece düz yazı dosyalarıdır. 
HTML öğrenmesi oldukça basit ve yaratıcılığa fazla açık olmayan bir dildir. 
Basittir çünkü, internette gezinirken görüntülediğiniz sayfaların hazırlanırken 
kullanılan teknikleri öğrenmemiz mümkündür (Sayfanın üzerinde farenizin
 sağ tuşuna bastıktan sonra Kaynağı Görüntüle seçeneği ile). Beğendiğiniz 
tasarımları kendi sayfanızda kullanabilir, bu tasarımların hangi html 
kodları kullanılarak yapıldığını öğrenebilirsiniz. Yaratıcılığa fazla açık değil 
dedim çünkü html ile yazdığınız sayfalar PHP, ASP, ColdFusion, CGI...
 gibi web programlama dilleri kullanılmadan statik html dışına çıkamaz. 

HTML kodlarını yazmak için özel bir düzenleyiciye ihtiyacınız yoktur.
 Bu iş için Windows altında NotePad ya da DOS-Edit, Linux altında pico,
 joe ya da vi gibi metin düzenleyicileri yeterlidir. HTML sayfalarınızı kod
 yazmaksızın FrontPage, Netscape Composer gibi programlarla da 
hazırlayabilirsiniz. Yalnız bu programlar kullanılarak hazırlanan 
sayfalar genellikle belli bir çerçeve içinde olduğu için zaten dar olan
 HTML’nin üreticilik alanını daha da daraltmaktadır. Bunun yanı 
sıra HTML’yi kod düzeyinde bilmenin kullanıcıya her zaman fayda
 getireceği de unutulmamalıdır (İleriki bölümlerde değineceğim 
Dinamik Web Tasarımı için HTML’nin kod düzeyinde bilinmesi gereklidir!). 
HTML Etiketleri
İçindekiler
1. <html> </html>
2. <head> </head>
3. <body> </body>
4. <title> </title>
5. <center> </center>
6. <hx> </hx> Başlık Etiketleri
7. <b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>
8. <sub> </sub>, <sup> </sup>
9. <hr>
10. <p> </p> ve <br>
11. <pre> </pre>
12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
13. Diğer Listeler <ul> </ul>, <ol> </ol>, <li> </li>
14. <img>
15. <a> </a>
16. <font> </font>
17. <acronym> </acronym>
18. <meta> </meta>
19. <!-- -->


örnekler
------------
 
<html> </html>
Daha öncede belirttiğim gibi html kodlarının yorum aralığını başlatmak için 
bu etiketi kullanırız. Sayfamızın head ve body bölümleri bu etiketin yorum
 aralığında tanımlıdır. 

1 <html>
2 <head>... head etiketinin içeriği ....</head>
3 <body>
4   ....
5   body etiketinin içeriği
6   ....
7 </body>
8 </html>

Birinci satırda <html> etiketi ile HTML sayfamıza başlıyoruz.
 Daha sonra <head> ve <body>
 etiketleri <html> etiketi içerisinde tanımlanıp içerikleri yazılıyor. 
En son olarak da </html> 
etiketi ile HTML sayfamızı bitiriyoruz. 
Yazdığımız html dosyasının başında bu etiketin tanımlanmaması şu an 
kullanılan web istemciler açısından bir sorun oluşturmayacaktır.
 Fakat sitenizi ziyaret eden ziyaretçi eski bir istemci kullanıyorsa bu etiketi
 kullanmamanız bir takım sorunlar oluşturabilir (sonsuz uzunlukta sayfa gibi). 
En iyisi siz her html dosyasına başlarken ve bitirirken bu etiketi kullanın. 
Yorum alanında kullanılabilecek etiketler: HEAD, BODY
<head> </head>
Yorum alanında sayfamız hakkında bilgilerin bulunduğu bir etikettir.
 Örneğin sayfamızın başlık bilgisinin bulunduğu TITLE etiketi ya da 
arama motorlarına bilgi sağlamak için oluşturulan META etiketi 
bu etiketin yorum alanında tanımlanır. 

<html>
  <head>
    <title>.....</title>
  </head>
  <body>
    ....
    body etiketinin içeriği
    ....
  </body>
</html>

Yorum alanında kullanılabilecek etiketler: 
SCRIPT, STYLE, META, LINK, OBJECT, TITLE, BASE 
 
<body> </body>
HTML dosyamız içindeki en geniş içerikli etiket budur.
 Ziyaretçiye görünen herşey bu etiketin yorum alanında tanımlanır. 
Ayrıca bu etiket içinde kullanılan bileşenlerle de sayfamızın bazı temel
 özelliklerini belirtebiliriz.

 

Tablo 1.1. Body etiketinin bileşenleri
Girilecek Kod Görevi
text = “renk” Sayfanızdaki yazıların rengine renk ile belirtilen değeri verir.
link = “renk” Sayfanızdaki bağların rengine renk ile belirtilen değeri verir.
vlink = “renk” Sayfanızdaki ziyaret edilmiş bağların rengine renk ile belirtilen değeri verir.
alink = “renk” Sayfanızdaki aktif bağların rengine renk ile belirtilen değeri verir.
bgcolor = “renk” Sayfanızın arka plan rengine renk ile tanımlı değeri verir.
background = “resim_dosyası” Eğer arka planda sade bir renk değil de bir resim kullanmak istiyorsanız, resim_dosyası kullanacağınız resmin adını temsil eder.
topmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin üst kenarına olan uzaklığını belirler.
leftmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sol kenarına olan uzaklığını belirler.
rightmargin = “değer” Sayfamızda kullanacağımız bileşenlerin istemci penceresinin sağ kenarına olan uzaklığını belirler.
onload = “betik” Sayfa yüklenirken çalıştırılacak javascript betiğini belirler.
onunload = “betik” Başka bir sayfaya geçerken çalıştırılacak javascript betiğini belirler.
Yukarıdaki tabloda kullandığım renk değeri HTML içinde kullanılan renk
 kodlarını temsil etmektedir. Altı basamaktan oluşan bu renk kodları ana 
renkler olan mavi, sarı ve kırmızının kullanılan renkteki tonuna göre onaltılık 
tabanda sayılarla istediğimiz rengi elde edebiliriz.
Renk kodları hakkında kısa bir bilgi vermek gerekirse kodlar ikişer basamaklı 
üç bölümden oluşur. Aşağıdaki tablo bu konu hakkında kafanızda oluşan 
soru işaretlerinin silinmesinde size yardımcı olacaktır.
Tablo 1.2. Renk Kodlarının Yapısı
Kırmızı Yeşil Mavi
00...FF 00...FF 00...FF
2. Satırda ifade ettiğim aralıklara değişik değerler (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) 
vererek rengi oluşturmamız mümkündür. Kod kullanmanın yanı sıra renkleri 
doğrudan İngilizce adlarını yazarak da kullanabiliriz. Örneğin beyazın kodu 
olan #FFFFFF yerine white yazmamızda sonucu değiştirmeyecektir.
Tablo 1.3. Bazı Renkler ve Kodları
Renk Adı Kodu
black (siyah) #000000
maroon (k.kırmızı) #800000
green (k.yeşil) #008000
navy (lâcivert) #000080
purple (k.mor) #800080
teal (k.türkuaz) #008080
oliver (hâki) #808000
gray (gri) #808080
Renk Adı Kodu
silver (gümüş) #C0C0C0
red (kırmızı) #FF0000
lime (yeşil) #00FF00
blue (mavi) #0000FF
magenta (mor) #FF00FF
aqua (türkuaz) #00FFFF
yellow (sarı) #FFFF00
white (beyaz) #FFFFFF
Dikkat ederseniz her renk kodu bir diyez (#) işareti ile başlıyor 
ve daha sonra altı basamaktan oluşan bir bölüm geliyor. Bu 
altı basamak içinde F yada f bulunduğu basamaktaki rengin 
tam olarak kullanılmasını ve sıfır (0) ise o basamaktaki rengin 
hiç kullanılmamasını sağlamak için kullanılır. Yine html kodlarında 
olduğu gibi renk kodlarında da büyük-küçük harf ayrımı yoktur. 
Yani #FFFFFF ve #ffffff aynı rengi yani beyazı temsil eder.
<body text="#000000" bgcolor="#FFFFFF" link="#808080"
vlink="#eaeaea" alink="#000000">

<body text="#000000" background="../resimler/arkafon.gif">

<body bgcolor="#334455" text=”#ffffff" topmargin="0">
Yukarıdaki birinci kod satırı sayfamızın arka plan rengini beyaz, yazıları siyah, 
bağları ve ziyaret edilmiş bağları gri ve etkin bağları da siyah yapmak için kullanılır.
İkinci satır ise yazı rengini siyah yapmak, bulunduğumuz dizinin bir üst dizinindeki 
“resimler” dizininde bulunan “arkafon.gif” resmini artalan yapmak için kullanılır.
Yazdığım son satır ile de sayfamın arka fon ve yazı rengini belirliyor, sayfamın
 bileşenlerinin istemci penceresinin üst kenarlığına olan uzaklığı sıfırlıyorum. 
<title> </title>
Sayfamızın başlık bilgisi bu etiket altında yer alır.
 Bu etiket head etiketi içinde kullanılmak zorundadır. 
<head>
<title>İlk HTML denemem</title>
</head>

Gibi bir kod parçası istemcimizin başlık çubuğunda aşağıdaki 
gibi bir görünüm oluşturacaktır. Bu etiket ile body etiketinde
 olduğu gibi renk seçenekleri kullanılamaz.
<center> </center>
Kendi yorum aralığında bulunan tüm etiketlerin ekran çıktılarını 
browser penceresine ekranı ortalayacak şekilde basar. 
<center>
....
Burası etiketin yorum aralığı
.....
</center>
...
Burası center etiketinin yorum aralığının dışında

Normal şartlarda HTML sola dayalı olarak çıktı verecektir. 
Ama yukarıdaki gibi bir kod örneğinin çıktısı aşağıdaki gibi olacaktır.

Burası etiketin yorum aralığı
Burası center etiketinin yorum aralığının dışında

 

<hx> </hx> Başlık Etiketleri

Bu etiketler basit olarak bir başlık kullanmak istediğimiz zaman, başlığı 
yazmak için kullanılan etikettir. Etiketin kullanımında “Hx” ifadesindeki “x” 1 ile 6 arasında 
değerler alabilen bir tamsayıdır. Bu etiket ile ekrana basılabilecek en büyük boyutlu yazı 
<H1> etiketi ile, en küçük boyutlu yazı <H6> etiketi ile basılır.

Bu etiket ile birlikte bir önceki etiket olan <p> etiketindeki gibi dört yer belirleme 
kodu kullanılabilir. Etiketin kullanımı <h1 align="center">Bu benim en 
büyük başlığım!</h1>
şeklindedir. Etiketin yorum aralığındaki metin başlık 
olarak ekrana basılır.

 

<h1 align="center"style="color:black;">
Bu başlıklar gittikçe küçülecek!!!</h1> <h2 align="center"style="color:blue;">
Bu başlıklar gittikçe küçülecek!!!</h2> <h3 align="center"style="color:navy;">
Bu başlıklar gittikçe küçülecek!!!</h3> <h4 align="center"style="color:green;">
Bu başlıklar gittikçe küçülecek!!!</h4> <h5 align="center"style="color:maroon;">
Bu başlıklar gittikçe küçülecek!!!</h5> <h6 align="center"style="color:purple;">
Bu başlıklar gittikçe küçülecek!!!</h6>

 

Yukarıdaki örneğin istemci çıktısı aşağıdakine benzer olacaktır.

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!

Bu başlıklar gittikçe küçülecek!!!
Bu başlıklar gittikçe küçülecek!!!

<b> </b>, <i> </i>, <s> </s>, <u> </u>, <big> </big>, <small> </small>, <tt> </tt>

Bunlar yazı tiplerinin nasıl yorumlanacağını belirten etiketlerdir. 
<b>kalın</b>, <i>eğik</i>, <s>üzeri çizili</s>, <u>altı çizili</u>,
<small>küçük</small>, <big>büyük</big>, <tt>daktilo yazısı</tt>

kalın, eğik, üstü çizili, altı çizili, küçük, büyük, daktilo yazısı

<sub> </sub>, <sup> </sup>

Formül ve benzeri metinleri yazarken kullanılır. 
H<sub>2</sub>SO<sub>4</sub> <br>
E = mc<sup>2</sup>

H2SO4
E = mc2

<hr>

 

Ekrana yatay çizgi çizmek için kullanılır. Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez. Bu etiket ile tanımlanabilecek üç değişik özellik vardır.
Tablo 1.4. hr etiketi içinde kullanılan kodlar
Girilecek Kod Görevi
width = "genişlik" Çizilecek çizginin yatay uzunluğunu belirlemek için kullanılır.
size = "kalınlık" Çizilecek çizginin kalınlığını belirtir.
color = "renk" Çizilecek çizginin rengini belirtir.
Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi
<hr width="100%" color="#0000F8" size="4">
çizer.

 

Bu kod, sayfa genişliğinde kalın ve mavi bir çizgi

çizer.
 
<p> </p> ve <br>
BR etiketinin sonlandırıcısı (</br>) yoktur, yani bir yorum aralığından söz edilemez. BR etiketi bulunduğumuz satırdan bir satır aşağı geçmek için kullanılır. 
Burada bir metin var
Bir alt satıra geçtiğimi sanıyorum!
Yukarıdaki metin ekran yan yana basılacaktır. Her ne kadar kodu yazarken satır atlayarak yazmış olsak bile browser bu kodu yorumlarken arada <br> etiketi olmadığı için bu iki cümleyi yan yana basacaktır. Kodun doğru kullanımı 
Burada bir metin var <br>
Bir alt satıra geçtim!

 

şeklinde olmalıdır.
<p> ve </p> etiketleri ise paragraf oluşturmak için kullanılır. P etiketi içinde yine body etiketinde olduğu gibi birtakım tanımlamalar yapılabilir.
Tablo 1.5. <p> etiketinin bileşenleri
Girilecek Kod Görevi
align = "left" Paragrafı sola dayalı olarak yazar.
align = "right" Paragrafı sağa dayalı olarak yazar.
align = "center" Paragrafı ortalar.
align = "justify" Paragrafı sola ve sağa dayalı olarak yazabilmek için sözcüklerin ara boşluklarını değiştirir.
class = "css_etiketi" Önceden tanımlı bir CSS dosyasındaki font-size, color... gibi özellikleri paragrafa uygular.
style = "css:tanımı1;css:tanımı2;..." font-size, color... gibi css tanımlarını paragrafa uygular.
<p align="justify">
Burada bir metin var.<br>
Bir alt satıra geçtiğimi sanıyorum!   Daha önceki örneğe ek olarak
yazımı bir paragraf içinde yazıyorum.
</p>

 

Burada bir metin var.
Bir alt satıra geçtiğimi sanıyorum! Daha önceki örneğe ek olarak yazımı bir paragraf içinde yazıyorum.
 
<pre> </pre>
Bir kod parçası, bir konsol ekranı alıntısı ya da bir ascii-art gibi içindeki boşlukların korunmasını gerektiren metinleri görüntülemek için kullanılır. Web istemciniz, tüm diğer etiketler için yorum aralığındaki fazladan boşluklarını gözardı ederek metni sarmaladığı halde <PRE> etiketinin yorum aralığındaki metnin boşluklarını olduğu gibi görüntüler. 
<pre>
switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}
</pre>

 

Yukarıdaki kodun istemcinizdeki görüntüsü aşağıdakine benzer olacaktır.
switch($i){
  case "2":
     echo "Değeri 2";
     break;
  case "3":
     echo "Değeri 3";
     break;
  default:
     echo "Değeri bilinmiyor";
     break;
}

 

 
 
  Ziyeretci sayısı:  
 
Google Pagerank Checker Pagerank
Zirve100 PageRank PageRank Türkçe Arama Add to Google Zirve100 Site istatistikleri
Zirve100 Site Ekle resim Site Ekle Türkiye Web Site Arama Portalı-Ücretsiz Site Ekle
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol