- HTML KOMUTLARI1

Word wide web (dünya çapında kütüphane) projesi , internet ile hızla büyümektedir. Her an, her yerde elinizin altındaki bir diz üstü bilgisayarı ve taşınabilir telefon ile istediğiniz bilgi kaynaklarına ulaşmanız mümkündür. Web aracılığı ile bilgileri dağıtmak ve herkese hizmet verebilmek, internet ve servisleri aracılığı ile mümkündür.

İnternet üzerindeki sayfalarda istediğiniz bilgilere ulaşabilmeniz için, bu sayfaları düzenlemek için araçlara ihtiyacınız vardır. Bu araçlar internet sayfaları; çok yönlü metin dokümanları tasarımı ile internet çok yönlü metin sunucuları ile mümkün olmaktadır. (Karahoca A., s.2 )

Web Tasarımının Temelleri

Web sayfalarının gerçekte programlama dili gibi bir kaynak kodu bulunur. Web sayfaları bu doğrultuda iki türlü hazırlanmaktadır. Bunlardan ilki WYSIWYG (what you see is what you get - Ne görürsen onu alırsın) denilen yöntemdir. Visual Page, Front Page, Dream Viewer ve Flash gibi programlar web sayfalarının ekranda yazıların ve resimlerin istenilen yere görsel olarak yerleştirilmesini sağlayan programlardır. Web sayfası oluşturmak için bu programlar kullanılarak HTML dili bilmeye gerek duymadan bir web sayfası yapılabilir.

Web sayfası hazırlamanın diğer yoluysa Notepad gibi bir metin editörü ya da HTML editör programı kullanmaktır. Kaynak kodundan web sayfası hazırlamak her zaman için daha avantajlıdır. WYSIWYG programları web sayfasına gereksiz kodlar ekler ve çoğu zaman sayfayı hazırlayan kişinin kafasını karıştırır. Bazen de sayfaya istenildiği gibi müdahale etme kapasitesine sahip olunamaz.

BÖLÜM 1. HTML PROGRAMLAMAYA GİRİŞ

1.1 HTML NEDİR?

HTML, yani Hyper Text Markup Language kısaca bir yazı işaretleme dilidir. Yazının göze hoş gelmesi için şekillendirilmesi, HTML'nin amacıdır. Ancak yazıyı şekillendirirken arada resim, ses gibi öğeler de hoş olacağından HTML bunları da kapsar.

HTML, belgelerin metinler, tablolar, listeler, fotolar içerecek şekilde internette yayımına izin verir. (Karahoca, A.s.7) Basit bir web sayfası hazırlamak için temel olarak HTML komutlarını bilmeniz yeterlidir. Bu bölümde sadece temel HTML komutlarına değinilmiştir.

Çeşitli web dizayn programlarında görsel olarak objelerle hazırlanan sayfaların HTML kodlarını da görüntüleyebilirsiniz. Ayrıca Browser’ ların View Source özelliği ile internette gördüğünüz ilginç sayfaların HTML’ sine ulaşabilirsiniz.

1.2 HTML’ E GİRİŞ?

HTML ile dokümanlar oluşturulurken diğer programlama dillerinde olduğu gibi mantıksal ünitelerden oluşur. Başlıklar, paragraflar veya listelerden oluşabilir. Normal bir editörde yazdığınız HTML kodları için compiler(derleyici) bulunmadığından dolayı hata yapmamaya dikkat etmeniz gerekmektedir.

Tarayıcı program (browser: yani Netscape, Internet Explorer vs.) küçüktür (<) ve büyüktür (>) işaretlerinin arasına yazılan her şeyi HTML komutu olarak yorumlar.

Şimdi temel HTML komutlarından örnekler verelim. Bunun için örneğin note pad’ i kullanabilirsiniz.

<HTML>

<H1>BU BIZIM SAYFAMIZ</H1>

ILK DENEME SAYFASIDIR. 

BU ITALIK BIR YAZI 

BU DA KALIN BIR YAZI

</HTML>

Bu dosyayı ilk.html adıyla boş bir dizine kayıt (save) edin ve tarayıcı programınızla bu dosyayı çağırın. (Kaydettiğiniz dosyaya çift tıklayarak ya da "file" mönüsünden "open" ile bu dosyayı seçerek)

Önünüzde şöyle bir ekran olması lazım:

Yazdıklarımıza dikkat ederseniz komutlar "<KOMUT>Komuttan etkilenecek yazı</KOMUT>" şeklindedir. "kalın" kalın(bold), "italik" italik yazı yazmamızı sağladı. Hemen hemen tüm HTML komutlarında aynı mantık hakimdir. Ancak bazı komutlarda "</KOMUT>" ile komutu kapatmak gerekli değildir. Bunlardan ilk akla gelenler   ve <IMG> komutlarıdır. Bu komutlar bir yazı grubunu etkilemediğinden  ile kapatılmasına gerek yoktur. Aynı şey<IMG>, yani resim ekleme komutunda da geçerlidir.

1.3 Başlıca HTML Komutları

HTML ile ilgili en temel komutlara bakalım, ayrıntılı açıklama ve örnek sayfa, tablodan sonra:

KOMUT

AÇIKLAMA

<HTML>

Metnin HTML olduğunu belirtir.

<HEAD>

Dokümanın içreği hakkında bilgi verir.

<TITLE>

Sayfaya başlık verir.

<BODY>

Dokümanın içindeki tüm paragrafları listeler.

<H1>

Metne ana başlığını verir.



Kalın Yazı



İtalik yazı

<CENTER></CENTER>

Ortalamak

 

Satır başı



Paragraf başı

<HR>

Yatay çizgi

<BACKGROUND>

Arkaya plana yayılacak resmi seçer.

<BGCOLOR>

Renk ayarlar.

<A HREF="hakkımda.html"></A>

Diğer sayfalara bağlantı

<IMG SRC="images/sahil.gif" ALT="sahil resmi">

Resim yerleştirmek

 

Yazının özellikleri.

<LI>

Listeleme yapar.

<BLINK>

Yazının yanıp sönmesini sağlar.

1.3.1 <HTML> Komutu

HTML, en dıştaki elemandır. Bu eleman metnin bir HTML dokümanı olduğunu işaret eder. Ayrıca bu eleman web sayfasını gösteren programa HTML dilinin versiyonunu belirtir. (Karahoca .A,s.15)

1.3.2 <HEAD> Komutu

HEAD komutu dokümanın içeriği hakkında bilgi verir. Bu bilgi dokümanın bir parçası gibi Web tarayıcısından (Nescape ve Internet Explorer) görünemez. (Karahoca.A,s.15)

1.3.3 <TITLE> Komutu

"TITLE" sayfaya başlık vermek için kullanılır. Bu başlık tarayıcınızın en üstündeki kutucukta ve taskbar'da yazar.

1.3.4 <BODY> Komutu

HTML dokümanının içerisindeki tüm paragrafları listeler ve diğer elemanları içerir. (Karahoca.A,s.15)

1.3.5 <H1> Komutu

<BODY>

Kullanımı:

<BODY>

<H1>

 Komutu

Yazının koyu renkte yazılmasını sağlar.

Kullanımı: 

 Komutu

Yazının italik yazılmasını sağlar.

Kullanımı: 

<CENTER></CENTER> Komutu

Yazı, resim, çizgi, tablo ve listelerin ortalanmasını sağlar.

Kullanımı: <center>

 Komutu

Satır başı yapar.

Kullanımı: 

1.3.10 Komutu

""

""

<HR> Komutu

Yatay bir çizgi çizer. Bu çizgi ayırıcı olarak kullanılabilir. Yazıların sonuna eklenemez. HR komutu otomatik olarak yeni satırdan başlayacaktır. Seçenekleri ise şu şekildedir:

<HR WIDTH=80% SIZE=5>

Burada "WIDTH" yatay çizginin tüm sayfaya olan oranıdır. Eğer % işaretini koymazsanız piksel cinsinden sabit bir uzunlukta çizgi çizersiniz. "SIZE" piksel cinsinden çizginin kalınlığıdır. (Pixel'i açıklamayacağım. 1-30 arası değerler vererek kendiniz görebilirsiniz). Bunun yanında "HR" komutunda kullanılan bir seçenek de "NOSHADE"dir.

<HR NOSHADE>

1.3.12 BACKGROUND Komutu

Arka plan resmi sayfanıza oldukça güzel bir görüntü veren bir özelliktir. Sayfanızın arka plan resmi olarak gif, jpg, jpeg uzantılı resim dosyaları kullanabilirsiniz.

Kullanımı:

<

1.3.13 BGCOLOR Komutu

BGCOLOR sayfanın arka plan rengi (#000000 = siyah);

Kullanımı:

<

ya da

<BODY BGCOLOR=’Yellow’>

1.3.14 <A HREF> Komutu

Bağlantılar, HTML’ DE çok kullanılan komutlardandır. Bu yüzden mantığını iyi anlamanız gerekir. Yapmanız gereken tek şey <A HREF="URL">Açıklama</A> komutunu sayfanızda herhangi bir yere yerleştirmek. Burada URL olayı çok önemlidir.

URL

html, jpg, gif, js, wrl vb. uzantılı herhangi bir dosya adı olabilir;

http

news

ftp

gopher

telnet

mailto

Görüldüğü gibi birçok seçenek bulunuyor. Eğer web sayfanızın bulunduğu sunucudaki dosyalara ulaşmak istiyorsanız doğrudan dosya adını yazacaksınız, yoksa protokol://adres şeklinde bir yapı kullanacaksınız; ya da bağlantıya tıklandığında e-posta atılmasını istiyorsanız mailto: yazısını kullanacaksınız.

Örnekler:

<A HREF="yeni.html">Bir başka sayfanız</A>

<A HREF="../index.html">Bir üst dizindeki başka bir sayfanız</A>

<A HREF="http://www.angelfire.com/ne/esin/anasayfa.html">Esin’ Sayfası</A>

<A HREF="http://www.gazi.edu.tr">Gazi Üniversitesi</A>

<A HREF="ftp://ftp.metu.edu.tr/pub">ODTU ftp sitesinde istediğiniz programları

bulabilirsiniz</A>

<A HREF="gopher://gopher.gazi.edu.tr">Gazi Üniversitesi gopher servisi</A>

<A HREF="telnet://bbs.bilkent.edu.tr:3000">Buces BBS</A>

<A HREF="mailto:hayse@sirius.gazi.edu.tr">Mail me</A>

<A HREF="dene.jpg">Deneme resmi</A>

1.2.15 <IMG SRC> Komutu

Sayfanıza herhangi bir resmi eklemek için <IMG SRC="dene.gif"> gibi bir satır yazmanız gerekiyor. Ancak dene.gif adlı bir dosyanın bulunması ve bu dosyanın yazmakta olduğunuz html uzantılı dosya ile aynı dizinde bulunması lazım. (örneğin deneme.html dosyası C:WebProjects dizinindeyse dene.gif de o dizin altında bulunmalı). Aksi taktirde resim yerine, resmin bulunamadığını ifade eden garip bir işaret çıkar.

Sayfanıza resim eklemeye başladığınız zaman çok fazla resim dosyası olduğunda bunları bir alt dizinde toplamak isteyebilirsiniz. Örneğin deneme.html dosyası C:WebProjects altındayken dene.gif dosyasını (ve diğer resimleri) C:WebProjectsresimler altına koyduysanız:

<IMG SRC="resimler/dene.gif">

şeklinde bir komut yazmanız gerekecektir. Aynı DOS'ta cd komutunu kullanmak gibi ama burada yerine / kullanacaksınız. Aynı şekilde C:Windows altındaki bir resmi çağırmak için:

<IMG SRC="../windows/dene.gif">

komutunu yazmanız gerekir. (.. bir üst dizin demek. Aynı mantıkla ../.. iki üst dizin oluyor)

Diyelim ki DENE.GIF adlı bir resminiz var ve bu resmi sayfanıza yerleştirmek istiyorsunuz. Eklemek istediğiniz html dosyasının adı da "resim.html" olsun. Şimdi öncelikle DENE.GIF dosyasını resim.html dosyasının bulunduğu dizine (directory ya da folder) kopyalayın. Sonra da resim.html dosyasının herhangi bir yerine <IMG SRC="DENE.GIF"> yazın. Burada dikkat edilmesi gereken nokta resim dosyasının tam adıdır. Örneği resim dosyanızın adı dene.GIF olsaydı <IMG SRC="dene.GIF"> şeklinde yazmanız gerekir. Böylece web sayfanıza resim eklediniz. Şimdi tarayıcı programınızla açıp sayfanıza bakın. Komutu yazdığınız yerde resmin çıktığını göreceksiniz.

Resimlerle ilgili birçok seçenek vardır. Tüm seçeneklerin kullanıldığı bir IMG komutu örneği şu şekildedir:

<IMG SRC="images/dene.jpg" BORDER=2 WIDTH=20 HEIGHT=35 ALT="Bu deneme adlı resim" ALIGN="LEFT" LOWSRC="images/dene-dusuk-cozunurluk.gif">

"SRC"

Eğer PhotoShop® ya da PaintShop gibi resim editörlerinden birini kullanmayı biliyorsanız resmin boyutlarını WIDTH - HEIGHT ile değil editörle küçültünüz. Çünkü editörle küçültüldüğünde resmin byte olarak büyüklüğü düşecektir, bu da sayfanızın daha çabuk yüklenmesini sağlayacaktır.

"ALT"

"ALIGN"

1.3.16 LI Komutu

Liste oluşturulmasını sağlar.

1.3.17 Komutu

Sayfanızda kullandığınız yazıların büyüklüğünü, rengini ve yazı tipini seçebilirsiniz. Yazıların her türlü özellikleri "FONT" komutu ve bu komutun içine yazılan seçeneklerle belirlenir. Seçenekler şu şekildedir:

Seçenek Açıklama Örnek

SIZE Yazı büyüklüğü ...

COLOR Yazı rengi ...

FACE Yazı türü ...

SIZE

COLOR

Face

1.3.18 <BLINK> Komutu

Yazının yanıp sönmesini sağlar.

Kullanımı:

<BLINK>

1.4. HTML ile WEB SAYFASI HAZIRLAMA

Aşağıdaki kodu not padde “Anasayfa.html” olarak kaydedin.

<HTML><head>

<title> html öğreniyorum </title>

<center>BU BİZİM SAYFAMIZ 

<BODY BACKGROUND="C:webtasresimstar.jpg"

TEXT="white" LINK="yellow" VLINK="cyan"

ALINK="red">

<center> 

<div align><img src="c:webtasresimsahil.gif" width=500

height=300 alt="Hayat Bir Sahildir.">

 





 

<a href="http://www.gazi.edu.tr" >Universitemiz </a> 

<a href="http://www.altavista.com" > Web'de Kolay Arama </a> 

<a href="http://www.komik.net" > Komik Bir Site </a> 

<a href="mailto:apachi79@hotmail.com">



<img src="c:webtasresimletter.gif" border=0 alt="mail me:apachi79@hotmail.com" align=bleedleft>

<a href="mailto:apachi79@hotmail.com"> </a>





<center>

Son Güncelleme Tarihi

3.Kasım.2000 Ankara

Bu sayfadan bir link seçilip ayrıldığında bu sayfaya geri dön mek için aşağıdaki kodu yazmak gerekir.

<a href="http://www.anasayfa.html" > Ana sayfaya dön </a> 

Burada önemli olan dönmek istediğiniz html uzantılı dosyanın isminin doğru verilmesidir.
YANIP SONEN YAZI</BLINK> seçeneği için; standart olarak kullanabileceğiniz yazı türleri arasında Arial, Helvetica, Times New Roman, Comic Sans, Courier, Tahoma ve Verdana yer alır. seçeneği için BODY komutunu referans alın. Oradakine benzer bir şekilde seçili olan (yani  ve arasında kalan) yazının rengini değiştirebilirsiniz. Renklerin tanımı için renk referansı kısmına bir bakın. seçeneğini iki türlü kullanabilirsiniz. (+,-) ile o anki yazı büyüklüğüne göre değer verebilirsiniz, ya da doğrudan 1 ile 7 arası bir rakam ile büyüklüğünü belirtebilirsiniz. Yazıya müdahale etmediğiniz sürece yazı büyüklüğü "3"tür. Örneğin "FONT SIZE=+1" komutunu kullanırsanız yazı büyüklüğü 4 olacaktır. Aynı sonucu "FONT SIZE=4" yazarak da elde edebilirsiniz. seçeneği resmin yazıya göre konumunu belirtir. Eğer "LEFT" yazarsanız resim sola yanaşacak ve "IMG" komutundan sonra yazılan tüm yazılar resim bitene kadar resmin sağına yazılacaktır. Ancak resim bitmeden yazının resmin solundan kurtulmasını istiyorsanız   yazmalısınız. Burada "LEFT" ya da "RIGHT" kullanabilirsiniz.ile resminize alternatif bir yazı koyabilirsiniz. Bu yazı herhangi bir nedenden dolayı resim görünmediğinde ve yeni tarayıcı programlarda fare imleci resmin üzerine geldiğinde görünecektir. Bütün resimlerinize bir alternatif yazı yazmayı alışkanlık haline getirmelisiniz. seçeneğinde resim dosyasının ismi yazılır. "BORDER" seçeneği ile resminize çerçeve verebilir ya da "BORDER=0" yazarak var olan çerçeveyi kaldırabilirsiniz. "WIDTH" ve "HEIGHT" ile resimlerinizin boyutlarını değiştirebilirsiniz. Ancak bu durumda resim kalitesi düşebilir.:esin@sirius.gazi.edu.tr şeklinde bir e-posta adresi olabilir. ://narwhal.cc.metu.edu.tr şeklinde telnet adresi olabilir ya da://gopher.metu.edu.tr şeklinde gopher adresi olabilir;://ftp.gazi.edu.tr şeklinde bir ftp adresi olabilir;://news.metu.edu.tr şeklinde bir news sunucusu adresi olabilir;://www.angelfire.com/ne/esin şeklinde bir web sayfası adresi olabilir;;BODY BGCOLOR= “#FFFFF”>BODY BACKGROUND= “c:ucak.jpg”>yazarsanız yatay çizgi üç boyutlu görünmeyecektir. komutunun bir tane seçeneği vardır: "ALIGN". Eğer  şeklinde kullanırsanız  işaretine kadar olan yazılar hem paragraf başı yapılmış olacaktır, hem de yazı sağa yanaşık görünecektir. <PALIGN="JUSTIFY"> şeklinde kullanırsanız satır sonları hizalanacaktır. komutu paragraf başı yapar ancak bu paragraf başı Türk yazı standartlarına uymaz. Türk standartlarına göre yeni paragrafın ilk satırı biraz içeriden başlar. Ancak HTML’ deki paragrafta yeni paragraf içeriden başlamaz. İçeriden başlamaması çok önemli bir sorun değildir. bu aradakiler tüm sayfayı ortalamış olarak ekrana görüntülenir. </center>buraya yazılan metin italik basılır buraya yazılan metin koyu renk basılır ANA BASLIKTIR</H1> <HTML> elemanından sonra gelen <H1> komutu en büyük fontlu başlıktır. H1-H6 arasındaki başlıkların büyüklükleri azalan sıradadır. (Karahoca.A,s.15)

arkadas arayanlara müjde Arkadasım sitesine giriş için tıkla

arkadas arayanlara müjde
Arkadasım sitesine giriş için tıkla