HTML site KodLaMa DiLi

Konu: HTML site KodLaMa DiLi Cuma Ekim 10, 2008 2:40 pm

Html konusunu 2 bölümde sizlere aktarıcam arkadaşlar.

1. Bölüm

HTML

Html Nedir?

HTML nin açılımı Hyper Text Markup Language dir. Html internet üzerinde web sayfası oluşturmak için kullanılan bir dildir.
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. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm veya default.htm olabilir. Fakat sayfa genellikle sayfa dinamik bir sayfa değilse (php,asp) görüntülenecek sayfa *.html veya *.htm olacaktır.

Web istemcimizin adres satırına http://www.sitenizinadi.com gibi gibi bir ifade yazarsak sunucu sistem bize, o adresin www kök dizinindeki index.html(ya da hangi giriş sayfası tanımlı ise) dosyasını görüntüler.

HTML'de TAG'lar (Elementler ve Takılar)

Tüm web sayfaları <html> ile başlayıp sonunda </html> ile biter. Bütün uygulamalar bu iki tag arasında yapılır.
En basit haliyle bir web sitesinin kodları aşağıdaki gibidir.

<html>

<head>
Bu head taginde içerik dışı kalan karakter set tanımlamaları, başlık,JavaScript tanımlamaları vb. elemanlar bulunur.
</head>

<title>Sayfanın başlağıdır.(Bir web sayfası açıldığında en üstte mavi olan yerde yazan yazılardır.)
</title>

<body>
Burada sayfanın asıl içeriği vardır. Metin, ses, video vb. şeyler.
</body>

</html>

Gördüğünüz gibi sayfamız <html> ile başlayıp </html> ile bitmiştir.

Başlıca Html Tagler:

<b>Kalın yazı</b>

<i>İtalik Yazı<i>

<u>Altı çizili</u>

<p>Paragraf</p>

<br>Alt satıra geçme</br>

<hr>Kullanıldığı satırda yatay çizgi çizer.

 Yorum bölümü

<h1>...<h6> ise Yazı büyüklüğü belirler.

<center>Yazıyı Ortalama</center>

Bu gördüğümüz taglar belli başlılarıdır. Diğer taglari aşağıda konu içinde göreceksiniz Gülümseme

HTML sayfalarını hazırlarken NOTEPAD kullanabiliriz.

Html'de bir kelimeye biçimsel veya farklı bir özellik vermemiz gerektiğinde bunu taglar yani elementler yardımıyla yaparız.

Örnek olarak; bir kelimeyi italik şekilde yazmak istiyorsak, bu kelimeyi <i>yazımız</i> taglari arasında yazmamız gerekir.
Böylece yazımız italik olmuştur. </i> tag ini kapattıktan sonraki yazılar itelik olmaz. Taglar sadece içinde olan yazıyı etkiler.

Önemli bir not:

Klasör ve Dosya isimlerinde malesef Türkçe karakter ve büyük harf kullanamıyoruz arkadaşlar. İlk sayfamızın adı index.html olmalıdır.

<h1>...<h6> Başlıklar

Yazıların başlık şeklinde yazılması için kullanılır. 6 tane başlık çeşidi vardır.

Örnek yapalım.

Bir not defteri sayfası açalım ve içine aşşağıdakileri yazıp sonra dosyanın uzantısını .html olarak belirleyip kaydedin.

<html>
<title>Başlıklar</title>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
</body>
</html>

şimdi .html olarak kaydettiğimiz dosyayı çalıştırın ve yaptığınızı görün.

HR Tagi (Çizgi Çeker)

Başlıklarda olduğu gibi bundada bir not defteri açın ve yazın.

<html>
<title>HR Etiketi</title>
<body>
<hr>
<hr color=red> (color --> renk verir.)
<hr color=blue size=5> (size --> kalınlık verir.)
</body>
</html>

şimdi kaydettiğimiz dosyayı açalım ve yaptığımızı görelim.

HTML de Renkler

Renk kodları hexedecimal kodlar olarak yer alırlar.

bgcolor --> Arka plan rengini belirler.
Arka planı kırmızı yapmak istediğimizde bgcolor="FFFFFF" yaparız. FFFFFF bir hexedecimal bir koddur. Bu kodlar için
google dan araştırma yapabiliriz yada photoshoptan renk seçiçiden de bu kodları görebiliriz.

bgcolor <body> tagi ile beraber kullanılır. Bunun için bir örnek verelim;

<html>
<title>renkler</title>
<body bgcolor="#FF0000">
</body>
</html>

bu şekilde kaydettiğimiz sayfamızı çalıştırdığımızda arka plan rengimiz kırmızı olacaktır.

FONT Tagi

<font> Yazı tipini ve boyutunu ayarlamamızı sağlar.

<font> takısının parametleri ise;

<font face=arial> Yazı tipini değiştirir. Şuan arial olarak ayarlanır.
<font size=5> Yazının Boyutunu belirler. Şuan 5 punto olarak ayarlanır.
<font color=red> Yazının rengini belirler.

bgcolor gibi <body> tagi ile beraber kullanılır. Örnek vermiycem tembellik yapmayın yukarıdaki örneğe göre uyarlayın Kahkaha

Link Verme

* Bir web sitesine link vermek;
<html>
<body>
<a href=http://www.sabote.com>Sabote</a>
</body>
</html>

* Site içi link vermek;
<html>
<body>
<a href="digersayfa.html">Sabote2</a>
</body>
</html>

* Mail adresine link vermek;
<html>
<body>
<a href=mailto:info@sabote.com>Sabote Mail</a>
</body>
</html>

* Sayfa içine link vermek
1-) Sayfanın içine (body tagleri arasına) <a name="1"> diye link verilmek istenen alan isimlendirilir.
2-) Link verirken de <a href="1">1 e Git</a> kullanılır.

Şimdilik bu kadar yarın 2. bölümde diğer html bilgilerini sizlere yazacağım:)

Konu: Geri: HTML site KodLaMa DiLi Cuma Ekim 10, 2008 2:40 pm

HTML Bölüm 2

Sayfanın Türkçeleştirilmesi

Sayfamızı Türkçe yapmak için <head> taginin içine bir kod girmemiz gerekir.

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-9">

Description:
Sayfanın tanımını yapacağımız alanı kapsar.

Keywords:
Sayfanın internetteki arama motorlarında belirlediğimiz kelimelerle bulunmasını sağlar.

Bu gördüklerimizi bir örnek te toparlayalım. Gülümseme)

Örnek:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-9">
<meta name="description" content="Sayfamızın Tanımı">
<meta name="keywords" content="İnternette görülmesini istediğimiz kelimeleri virgülle ayırarak yazabiliriz.">
<title>Başlık</title>
</head>
<body>
Sayfanın İçeriği
</body>
</html>

NOT: Html de bir tag açıldıktan sonra işlevinin bittiği yerde mutlaka kapatılması gerekir.
Aksi taktirde sayfa bozuk olur. Ya çalışmaz yada yarım çalışır. Dinamik sayfalarda ise hata
yapma şansınız yoktur Kahkaha

HTML Sayfaya Resim Eklemek

*.jpg, *.png, *.gif --> İnternette bu resim formatları kullanılır.
*.bmp, *.tiff, *.eps, *.psd, *.cdr --> Bu resim formatları ise internette kullanılmaz.

Html sayfamıza resim eklerken kullanmamız greken kod ise;

Resmi çağırmak için image(resim) in kısaltması img ve search ın kısaltması src kullanılır.

<img src=x.jpg> olarak html sayfasına çağırılır.(x dosyası sizin dosyanız.)

Resmimize boy ve en vermek içinse;

<img src=x.jpg width=250 height=250> şeklinde resmimizi boyutlandırabiliriz.

Buradaki width in anlamı uzunluktur. Height ise yüksekliktir.

Resmimizi koyduktan sonra internet sayfasında görüntülerken resmin üzerine gelindiğinde ona bir açıklama vermek için ise;

<img src=x.jpg alt="Güzel bir resim"> olarak resmimize bir açıklama koyabiliriz.

TABLOLAR

Tablolar <body> taginin içinde <table> komutu ile başlar. Yine </table> komutu ile kapatılır.

<table> komutunun içinde ise <tr> ve <td> komutları kullanılır.

<tr> komutu sutun anlamına gelir.
<td >komutu ise satır anlamına gelir.

Örnek bir tablo oluşturalım.

<html>
<head>Başlık
</head>
<body>
<table border=1 width=500 height=300 bgcolor=green> (border 1px çerçeve yapar.) Gülümseme
<tr>
<td>Hücre1</td>
<td>Hücre2</td>
</tr>
<tr>
<td>Hücre3</td>
<td>Hücre4</td>
</tr>
</table>
</body>
</html>

Arkadaşlar bu örneği uyguladıktan sonra daha iyi anlayacaksınız.

<table> Takısının Parametreleri

<table border=1> --> Bu hücerenin ve tablonun etrafına 1 px çerçeve çizdirir.
<table width=100> --> Tablonun pixel cinsinden uzunluğunu ayarlar.
<table height=50> --> Tablonun pixel cinsinden yüksekliğini ayarlar.
<table bgcolor=#fffff> -->Tablonun arka plan rengini belirler.

<td> Takısının Parametleri

<td align=left> right veya center da olabilir. --> Bunun anlamı hücrenin içinde yer alan
metin,resim,grafik vs. gibi öğeleri sağa, sola veya ortaya hizalar.

<td bgcolor=#00ffff> --> Bu parametre ise kullanıldığı hücrenin background unu değiştirir.

<td width=250> --> Hücrenin uzunluğunu belirler.

<td colspan=2> --> Hücrenin 2 sutun uzunluğunda olacağını gösterir.

<td rowspan=2> --> Hücrenin 2 satır yüksekliğinde olacağını gösterir.

Örnek:

<html>
<body>
<table border=1 width=500>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>

Bu örneği kaydederek sayfanızı görüntüleyin ve görün tablonuzu Kahkaha

Yukarıdaki parametrelerde verdiğim colspan ve rowspan komutlarını inceleyelim.

<html>
<body>
<table border=1 bordercolor=black width=500>
<tr>
<td>A</td>
<td>B</td>
<td rowspan=2>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td colspan=3>F</td>
</tr>
</table>
</body>
</html>

Birde kendiniz deneyin.

Müzik Eklemek

İnternette kullanılacak müzik dosyalarının türü MIDI veya WAV olmalıdır. Wav dosyaların
boyutları büyüktür ve zor yüklenir.Onun için arka plan sesi kullanırken genelde midi
uzantılı dosyalar tercih edilirse daha iyi olur. Diğer müzik dosyalarını eklemek için (mp3,mp4) JavaScript
bilmemiz gerekir.

Örnek:

<html>
<head>
<bgsound src=x.mid loop=-1> ( buradaki loop=-1 devamlı çalması için koyulur)
</head>
<body>
</body>
</html>

Html in belli başlı komutları bu kadardır.. Umarım yardımcı olabilmişimdir.