HTML(Hyper Text Markup Language)

Web sayfalarının oluşturulması için kullanılan temel dildir.HTML temel olarak nesnelerin tarayıcı penceresinde nerede yer alacağı ve nesnelerin ne olduğuna yönelik esasları içerir.

HTML dili metin tabanlı olmanın yanında herkesin anlayabileceği kadar da basittir.HTML komutları etiketleri  <> arasında yer alır.Bir komut bloğu <komut> ile başlar ve mutlaka </komut> şeklinde sonlandırılır.Tarayıcı program ile sayfa açıldığında tarayıcı komutları saptar ve sayfayı gösterir.

Basit bir HTML Kod Yapısı

<html><head></head>

<body>

</body>

</html>

Yukarıdaki görüldüğü gibi basit bir HTML yapısı 3 temel etiket’ten oluşur.

<html>…</html>:Bütün HTML web sayfaları bu etiket ile başlayıp bu etiket ile sonlanır.Tarayıcı web sayfasının HTML olduğunu bu etiketler yardımıyla saptar.

<head>…</head>:Bu etiket blogunda sayfa için önemli tanımlayıcı bilgiler içerir.Bu tanımlayıcı bilgiler her ne kadar tarayıcı penceresinde gösterilmese de sayfa içerisinde oldukça önemli bilgileri içerir.Örneğin Başlık Bilgisi,Sayfa Dil Bilgisi,Arama Motorları için Kaynak Teşkil eden anahtar kelime (Meta) bilgilerini içerir.

<title>…</title>:Bu etiket ile tarayıcı penceresinin sol üst köşesinde gösterilmek üzere bir başlık oluşturulmasını sağlar.

<meta>…</meta>:Bu etiket web sayfası hakkında bilgi vermeyi ve HTTP-Header bilgilerinin tanımlanmasını sağlar.

<meta name =”name”

http equiv=”FieldName”

content=”value”

>

NAME:Meta Document bilgisinin adını içerir.(Keywords,Author,Description)

HTTP EQUIV:HTTP-Header bilgilerini tanımlar.(Refresh,Expires,Set-Cookies)

CONTENT:Oluşturulan alan  ve isimlere değerler yerleştirmeyi sağlar.

<style>…</style>:WEB Sayfası için stil tanımlama işlemini gerçekleştirir.

<style>

TYPE=”stylesheettype”>

</style>

<link>…</link>:WEB Sayfası içerisine başka dosyaların getirilmesini sağlar.Bu dosyalar css ve javascript dosyalarıdır.

<link

REL=”fileType”

TYPE=”Type”>

SRC=”location”

</link>

Rel:Bilgisayara indirilecek dosyanın türünü belirler.

Type:text/css yada text/javascript ifadelerinden biridir.

Src:Dosyanın yerini belirler.

<body>  </body>:Sayfa içerisinde unsurları içeren bölümdür.Bu unsurlar tarayıcı tarafından yorumlanarak etiketleri özelliklerine göre gösterir.Bu blok içerisinde çeşitli HTML etiket blokları yer alır.Bunlar yazı,resim,tablo vb.

Yazdığınız kodları içeren bir web sayfası oluşturmak için basit bir editör programı yeterli olacaktır.Windows işletim sistemi ile gelen Notepad’i kullanabilirsiniz.Notepad’te oluşturduğunuz kodları Faklı kaydet butonunu kullanarak dosya_adı.html olarak kaydedebilirsiniz.Dosya_adı.html sayfası üzerinde mouse ile çift tıklayarak sayfayı Internet Explorer yada başka bir web browser ile açabilirsiniz.

Yazı Biçimlendirme Etiketleri

Sayfa içerisinde yazdığınız metinleri biçimlendirebilirsiniz.Çeşitli yazı editörleri programlarından hatırlayacağınız gibi kalın,italik,altı çizgili ve daha bir çok yazı biçimlerini web sayfası içerisine yada yazdığınız metinlere uygulayabilirsiniz.Bunlardan bazılarını size örneklerle analatmaya çalışacağım.

<b>…</b>Bu tagların arasında  yazılan ifadeler  kalın şekilde gözükür.

<i>…</i>Bu tagların arasında yazılan yazılar eğik yani italic şekilde gözükecektir.

<u>…</u>Bu tagların arasında yazılan yazılar altı çizili şekilde gözükür.

<big>…</big>Bu tagların arasında yazılan ifadeler diğerlerinden ölçü olarak daha büyük gözükmesini sağlar.

<cite>…</cite>Bu tagların arasına yazılan ifadeler WEB Sayfasında normal yazı içerisinde farklılaştırılarak gösterilir.

<s>…</s>Bu tagların arasına yazılan yazıların üstü çizili olarak gözükmesini sağlar.

<small>…</small>Bu tagların arasına yazılan ifadelerin diğerlerinden ölçü olarak daha küçük gözükmesini sağlar.

<blink>…</blink>Bu tagların arasına yazılan ifadeler Internet Explorer’da yanıp sönerek gözükmesini sağlar.

<hr>Web Sayfası içerisine yatay bir çizgi koyulmasını sağlar.

<code>…</code>Bu tagların arasına yazılan WEB belgesi içerisinde sabit genişlikli metin gibi gösterilir.

<kbd>…</kbd>Bu tagların arasına yazılan yazılar sabit genişlikli bir yazı formatı ile gösterilirler.

<nobr>…</nobr>Bu taglar arasına yazılan satır sonunda bir alt satıra geçmesini  engeller.

<h1,…h6>…</h1,…h6>1.dereceden 6.dereceye kadar başlık yazılmasını  sağlar.Otomatik olarak büyük puntolar ile başlık yazılmasını sağlarlar.En büyük başlık h1 ile belirtilir.

<h1>This is an example</h1>

<h2>This is an example</h2>

<h3>This is an example</h3>

<h4>This is an example</h4>

<h5>This is an example</h5>

<h6>This is an example</h6>

<pre>…</pre>Önceden bir yazının yazıldığı ve formatlandığı şekilde Internet Explorer’da görünmesini sağlar.Buradaki metin sabit genişlikli font ile gösterilir.

 <pre>OMER

                UCLER

                               KISISEL WEB

                                                               BLOG

</pre>

<abbr>…</abbr>etiketi, içerdiği kelimenin, bir kelime veya kelime grubunun kısaltılmış hali olduğunu belirtir. <abbr title=”Doktor”>Dr.</abbr>

<samp>…</samp>Örnek çıktı için kullanılır.

<strike>…</strike>Üstü çizili yazı için kullanılır. Vurgu vermek ya da bir şeyin iptal edildiğini göstermek için kullanılır.

<br>Bir satırın sonlandırılıp diğer bir satıra geçmesini sağlayan tagdır.

<acronym></acronym>:Kısaltmalar için kullanılır. Parametre olarak TITLE=Kısaltmanın_Açık_Hali alır. Örneğin, <acronym title=”World Wide Web”>WWW</acronym>.

<blackqoute>…</blacquote>Alıntı yapmak için kullanılır.

Yazı Fontunu,Yazı Rengini ve Yazı Rengini Değiştirme

<font>…</font>etiketini kullanarak sayfaya yazdığınız yazının rengini,büyüklüğünü ve fontunu değiştirebilirsiniz.

<font face=”Arial” size=4 color=”#FF0000”>Omer Ucler Kısısel Web Blogu</font>

Color:Bu yazı tipinin rengini belirler.

Size:Yazının büyüklüğünü belirler.

Face:Yazı tipini belirler.Örneğin  “Verdana,Arial gibi”.

Yazıyı Sayfa İçerisinde Hizalamak

<p>…</p>Yazının paragraf haline gelmesini sağlar.

<p align=”left”>…</p>Yazının sola doğru yaslanmasını sağlar.

<p align=”right”>…</p>Yazının sağa doğru yaslanmasını sağlar.

<p align=”center”>…</p>Yazının ortalanmasını sağlar.

<p align=”justify”>…</p>Yazılan yazının her iki tarafa yaslanmasını sağlar.

HTML dilinin kullanım özelliği olarak bu boşluk karakterlerinin tümü sadece bir boşluk karakteri olarak algılanır.Yazılan karakterler arasında birden fazla boşluk karakteri bırakmak için &nbsp karakteri kullanılır.

&nbsp:Bir karakterlik boşluk anlamına gelir.Birden fazla karakter boşluk bırakmak için araya noktalı virgül işareti konarak komut ard arda yazılır.&nbsp;&nbsp;&nbsp; gibi

Listeli Metinler Oluşturmak

HTML dilini kullanarak Web Sayfası içerisinde listeler oluşturabilirsiniz.

<ol>…</ol>Web belgesi üzerinde sıra numaraları verilmiş listeler oluşturulmasını sağlar.

<ol>

<li>Memory</li>

<li>Power Supply</li>

<li>CPU</li>

</ol>

Ordered List için isterseniz “Type” şeklinde değişiklik yapabilirsiniz.Start parametresini kullanarak sıralı listenin hangi sıra ile başlayacağını belirleyebilirsiniz.Type parametresini kullanarak sıralı listenin türünü belirleyebilirsiniz.

<ul>…</ul>WEB belgesi üzerinde numarasız madde imleri şeklinde listeler oluşturmayı sağlar.

<ul>

<li>Power Supply</li>

<li>CPU</li>

<li>Memory Card</li>

</ul>

Unordered list için isterseniz “Type” parametresini kullanarak bu madde imlerinin ne şekilde gösterilec eğini belirleyebilirsiniz.

<ul Type=”circle”>

şeklinde gösterebilirsiniz.

<dır>…</dır>Herhangi bir listenin oluşturulmasını sağlar.Kısaca “ul” tagının yaptığı bütün işi yapması nı sağlar.

<dl>…</dl>Bu tag Web sayfası içerisinde tanımlar listesi yapmak için kullanılır.dt ve dd taglarını bu tag ile beraber kullanabilirsiniz.

<dt>…</dt>Bu tag Web sayfası içerisinde tanımlar listesinde her bir anahtar kelimeyi belirler.

<dd>…</dd>Bu tag Web sayfası içerisinde her bir tanımlanan ifade ya da anahtar kelime için bir tanım ifadesi yazmanızı sağlar.

<dl>

<dt>Bilgisayar

                <dd>HP

                <dd>Dell

<dt>Memory

                <dd>Kingston

                <dd>SanDisk

</dl>

Buna ek olarak Menu Tagı’da UL tagı gibi liste oluşturmayı sağlar.Menü içerisinde her bir öğe <li> tagı ile belirtilir.

<menu>

<li>One</li>

<li>Two</li>

<li>Three</li>

</menu>

şeklinde kullanabilirsiniz.

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s