Html Temel komutlar

HTML dökümanı hazırlamak için her hangi bir text dosya yazabilecek bir editör olması yeterlidir. Bütün yapılması gereken dökümanı HTML kurallarına uygun bir şekilde yazmak ve de dosyayı “.htm” ya da “.php3” olarak kaydetmektir. Ne derleme ne de “.exe” gibi dosyalara çevirme işlemi yoktur. HTML dosyası hazırdır. Artık tek yapılması gereken hazırlanan bu dosyanın bir internet tarayıcı programı tarafından çağrılmasıdır.

Herhangi bir internet erişim programından bir HTML dökümanının kodlarını görmek istiyorsanız o sayfa üzerinde farenin (mouse) sağ butonuna basınız. Özellikler menüsünden kodu göster (view source) seçeneğini seçiniz. (ya da internet erişim programının göster (view) menüsünden source (kod) seçeneğini seçiniz.)

HTML de program yazılırken her satır bir HTML komutu ile başlar ve de komutun geçerliliği biteceği zaman aynı komut isminin başına “/” konularak tekrar yazılır.

…

Bir HTML sayfası komutuyla başlar ve de sayfa sonunda komutuyla biter. Sayfayla ilgili bilgiler (Başlığı, hangi program kullanılarak yapıldığı…) komutu yazıldıktan sonra verilir ve de bilgiler bitince komutuyla kapatılır. Sayfada gösterilecek bilgiler … komutları arasında yazılır.

Örnek :

Html öğreniyorum, ilk deneme sayfası

Yukarıda verilen örnek her hangi bir editörde yazılıp, “.php3” ya da “.htm” uzantılı olarak kaydedilir ve herhangi bir internet programından çağrılırsa ekranda “Html öğreniyorum, ilk deneme sayfası” yazısı çıkacaktır. Çalıştırdığınız internet programının başlık kısmında da “Deneme Sayfası” başlığı gözükecektir.

HTML de açıklama satırı şeklinde kullanılır. Yazılan açıklama sadece program satırlarıyla gözükür. Sayfa çağrıldığında gözükmez. Yazdığınız program kodlarının ne anlama geldiğini anlamanız veya başka biri tarafından bakılan kodlarınızın anlaşılabilmesi bakımından bol bol açıklama satırı koyunuz. komutu yardımıyla sayfanın arka rengini, arkaya konulacak resmi, bağlantıların (Hyperlinks) rengini, sayfanın yukarı ve sol tarafa göre konumları belirtilebilir.

Bir komutun yanına eğer varsa parametreler komut kapatılmadan “>” önce verilir. Komut kapatılıncaya kadar bu parametreler geçerliliğini korur.

Background = url sayfanın arka planında bulunacak resmi tanımlamaya yarar. URL (Uniform Resource Locator) resmin adresini gösterir. Bgcolor = color sayfanın arka planının rengini gösterir. Color rengin hexadecimal karsılığı, RGB(RedGreenBlue) değeri ya da rengin ismi olabilir. Bgproperties = fixed sayfanın arka planındaki resmin internet tarayıcısının boyutlarından etkilenmemesini sağlar. Leftmargin = n sayfanın sol kenardan ne kadar uzakta olacağını belirler. Link = color sayfada bulunan bağlantıların (Hyperlinks) rengini belirler. Text = color sayfadaki yazıların rengini belirler. Topmargin = n sayfanın üst kenardan ne kadar uzakta olacağını belirler. Alink = color Aktif olan yani o an seçili olan bağlantının (Hyperlink) rengini belirler Vlink = color Ziyaret edilen bağlantıların (Hyperlinks) renklerini belirtir.

HTML”de komutların büyük ya da küçük harfle yazılma zorunluluğu
yoktur.

HTML”e Giriş
HTML (Hyper Text Markup Language) internet ortamında döküman yaratmak için geliştirilmiş bir programlama dilidir. HTML dökümanı bir text dosyadır ve tek başına bir yazı olmaktan öteye gidemez. Ancak her hangi bir internet tarayıcısı (internet explorer, netscape navigator gibi ) yardımıyla çalıştırıldığında içerdiği komutlara göre ve de tarayıcı programın desteklediği özelliklere göre, hazırlanan dökümanlar bir anlam kazanır.

HTML dili programlama mantığından biraz uzak, görsel yönü oldukça önemli olan bir dildir. HTML nin öğrenilmesi, diğer programlama dillerine göre daha kolay olup bazı temel kural ve komutların bilinmesi yeterlidir.

HTML nin temel mantığını kısaca “Ne görürseniz onu alırsınız” (What you see what you get) şeklinde açıklayabiliriz.

Günümüzde HTML sayfaları hazırlamak için bir çok görsel program vardır. (Microsoft FrontPage, HotDog gibi ) Bu tür programlarla HTML sayfaları hazırlamak çok kolay ve hızlı olmakla beraber HTML kodlarını da yine bu programlar üretmektedir. “Madem ki hazır programlar var neden HTML öğrenelim?” şeklinde bir soru aklınıza gelebilir. Hazır programların olması, kodların el değmeden programlar tarafından yazılması elbette daha güzel, daha kolay ve daha hızlıdır. Ancak hazırlanan sayfaların nasıl oluştuğunu, nasıl çalıştığını, arka planda nelerin olduğunu bilmeden, ezberci bir zihniyet kullanmak bir programcı mantığına terstir. Bu tür programları hemen her yerde bulamayabilirsiniz. Dökümanların değiştirilmesi gereken yerlerde eğer hazırladığınız program yoksa ve de HTML dilini biliyorsanız her hangi bir editörden dökümanınıza müdahale edebilirsiniz.

HTML dili çalışan örneklerle, ilginç ipuçlarıyla, sizlerden gelen soru, öneri ve dökümanlarla en iyi şekilde anlatılmaya çalışılacaktır.

Düzen ve Yerleşim
HTML dili için görsellik, dolayısıyla da ekran dizaynı çok önemlidir. Dökümanlarınızı en iyi ve en güzel şekilde sunmanız gerekir. Html de bu dizaynları yapabilmeniz için bazı temel komutlar bulunmaktadır. Yazı veya resimlerinizi kısaca dökümanlarınızda kullanacağınız nesneleri ekranın sağına, soluna ve ortasına koyabilmeniz için komutu kullanılır. Bu komutun kullanımını biraz detaylı olarak inceleyelim.

p align = left Nesneleri ekranın soluna yerleştirir.

p align = right Nesneleri ekranın sağına yerleştirir.

p align = center Nesneleri ekranın ortasına yerleştirir.

p .. /p komutu arasında kalan tüm nesneler (yazı, resim, …) paragraf gibi ayrılır. Paragrafın başında ve sonunda paragraf olduğunu belirtmek için boşluk bırakır.

HTML de tüm nesneler aksi belirtilmedikçe ekranın solundan itibaren gösterilir. Yani soldan başlayarak yazı yazmak için komutunu kullanmanıza gerek yoktur.

Bazı internet tarayıcıları

komutunu da kullanabilmektedir ama emin olmak için komutunu kullanmanızda yarar vardır.

Örnek :

html body h2 ALIGN=LEFT Komutu /h2 Aksi belirtilmedikçe yazılar ekranın sol tarafına yerleştirilir.

Yazınızı soldan başlayarak yazmak için

ALIGN=LEFT komutunu kullanmanıza gerek yoktur.

h2 align = right ALIGN=RIGHT Komutu/h2 p align = right Yazınızı ekranın sağına yerleştirir./p h2 align = center ALIGN=CENTER Komutu/h2 p align = center Yazınızı ekranın ortasına yerleştirir. body html HTML”de komutların büyük ya da küçük harfle yazılma zorunluluğu yoktur.

HTML”de Müzik ilavesi
Html”den müzik çaldırmanın iki yolu vardır. Birincisi fare ile bir yere tıklandığında, diğeri ise sayfa yüklendiğinde müzik çalmasıdır

Foreground Music (Link Altına Müzik Dosyası Koymak):

Fare ile bir yere tıklandığında müzik çaldırmanın en kolay yolu; bir link ”in altına müzik dosyasını koymaktır. Aşağıdaki kodu inceleyin lütfen.

a href = “music.mid” Müziği Dinlemek İçin Tıklayın /a

Dinlenecek müzik dosyası “mid” uzantılı olmak zorunda değildir,”au” veya”wav” uzantılı da olabilir. Fakat “wav” uzantılı bir müzik dosyasını indirmek sayfanıza giren kişinin çok zamanını alabilir. Ayrıca yukarıdaki örnekteki “music.mid” yerine müzik dosyasının ismi ile birlikte yerinin de yazılması gerektiğini unutmayın.(Örneğin; “../sounds/music.mid” gibi.)

Html kodunda müzik dosyasını belirtirken, dosya ismindeki büyük-küçük harfe dikkat edilmelidir . Örneğin; “music.mid” ile “Music.mid” aynı şeyler değildir.

Background Music (Fon Müziği) İkinci yol ise sayfa yüklendiğinde fon müziği olarak müzik çalmasıdır.

I.E ve Netscape” in geri planda müzik çalmayı sağlayan html tag”leri birbirinden farklıdır. Sayfanızın daha fazla kişi tarafından kullanılabilirliği açısından bunu göz önünde bulundurmanızda fayda var.

Netscape için embed I.E için bgsound tag”i kullanılır.

Örnek : Sayfa yüklendiğinde, ebatlarını belirttiğimiz, üzerinde “play” ve “stop butonları” olan bir konsol çıkar. Sayfa yüklenir yüklenmez müzik başlamaz “play” butonuna basılarak müziğin başlatılması gerekir.

embed src = “music.mid” width =”150″ height = “100” noembed bgsound src =”music.mid” /noembed Yukarıdaki noembed tag” ini kullanılması browser” ın I.E olması durumunda da müzik çalınabilmesini sağlar. Browser embed tag” ini anlamazsa noembed içindeki kodu yürütür ve browser I.E ise müzik çalınır.

Örnek : Sayfa yüklenir yüklenmez müzik başlar ve bir kez çalınır.

embed src = “music.mid” width =”150″ height = “100” autostart = “true” noembed bgsound src =”music.mid” /noembed

Örnek : Sayfa yüklenir yüklenmez müzik başlar ve sayfa açık olduğu sürece çalmaya devam eder. Ayrıca sayfada, boyutları standart, küçük bir konsol çıkar.

embed src = “music.mid” autostart = “true” controls = “smallconsole” loop = true noembed bgsound src =”music.mid” /noembed

Örnek : Ekranda herhangi bir konsol görünmesini istemiyorsanız, aşağıdaki kodu kullanmalısınız.

embed src = “music.mid” autostart = true hidden = true noembed bgsound src =”music.mid” /noembed

Fakat şunu da unutmayın ! Konsolu saklarsanız ve “loop = true” seçerseniz, sayfanızı ziyaret kişi, sayfada kaldığı süre boyunca aynı müziği tekrar tekrar dinlemek zorunda kalacaktır. Bu da sinir bozucu olabilir.
1. <HEAD> ………. </HEAD> Arasında Kullanılan Komutlar

<TITLE> ………. </TITLE> belirteç çifti: Bu belirteç çifti arasına browser’ ın (listeleyici) başlık çubuğunda görülecek olan sayfanın başlığı yazılır.

<META> belirteci: Bu belirteç ile kullanılabilen birçok seçenek vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan arama motorları sayfaların meta belirteçlerine bakarak gruplandırma yaparlar. Bununla ilgili aşağıdaki örnekleri inceleyiniz.

<META NAME=”Description” CONTENT=”HTML öğrenmek için yararlı bilgiler”>

<META NAME=”Keywords” CONTENT=”html, htm, web sayfası”>

<META NAME=”Author” CONTENT=”Ozge Donmezer”>

Başka bir kullanım, sayfadaki yazıların hangi dil ailesine ait karakterlerle yazıldığını belirtmek içindir. Yine aşağıda bunula ilgili bir örnek verilmiştir.

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=iso-8858-9″> (Türkçe’ nin dahil olduğu dil ailesine ait standard tanımlaması iso-8859-9′ dur.)

1. <BODY> ………. </BODY> Arasında Kullanılan Komutlar

Her türlü yazı, formatlama bilgileri bu bölüme girdiğinden, bir HTML dökümanının esas kısmını da bu bölüm oluşturduğundan, bu bölümde oldukça fazla sayıda komuttan söz edilecektir. Bu komutlar belirli bir mantık sırasına göre verilecektir.

<BODY BGCOLOR=& TEXT=& LINK=& ALINK=& VLINK=&>

RRGGBB ile temsil edilen hexadecimal bir sayıdır. (R= Red, G= Green, B= Blue) Bu yöntem kullanılarak değişik renkler elde edilebilir. Pek tercih edilmemekle birlikte sayı yerine doğrudan renk isimleri de verilebilir (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow ). Bgcolor seçeneği, sayfanın zemininin, text, sayfa içindeki yazıların, link, bağlantı yazılarının, alink, aktif durumdaki bağlantı yazılarının, vlink, ziyaret edilmiş bağlantıların renklerini vermemiz için kullanılır.

Sayfanın zemin rengini tek renk vermek yerine, fona bir background resmi de koyabiliriz. <BODY BACKGROUND=”image_URL”

Sayfa kenarları ayarlamaları da aşağıdaki şekilde yapılır:

<BODY LEFTMARGIN=& TOPMARGIN=&>

& marjin miktarını temsil etmektedir. Leftmarjin seçeneği sol kenarı, Topmarjin üst kenarı ayarlamamızı sağlar.Bir döküman içerisindeki yazılardan istediğimiz kısmının font özelliklerini belirlemek için font belirteci değişik seçeneklerle kullanılır:

<FONT SIZE=&> Font büyüklüğü belirlenecek yazı </FONT>

1’ den 7’ ye kadar değişebilir. Sayıyı artırdıkça, belirteç çifti arasına yazdığımız yazının büyüklüğü de artar.

<FONT COLOR=&> Font rengi belirlenecek yazı </FONT>

& yerine yine altı basamaklı hexadecimal sayılar kullanarak ya da doğrudan renk ismini vererek, ayarlamamızı yaparız.

<FONT FACE=”&”> Karakter şekli belirlenecek yazi </FONT>

& yerine istedigimiz karakter tiplerinden birini yazabiliriz. (Örnegin; Times New Roman, Arial gibi…

Döküman içindeki yazılardan istediğimiz bir kısmına kalın, italik, altı çizgili vb özellikleri verebiliriz:

<B> Kalın yapılacak yazı </B>

<I> İtalik yapılacak yazı </I>

<U> Altı çizili yapılacak yazı </U>

<SUP> Satırın biraz üst tarafında görünmesini istediğimiz yazı </SUP>

<SUB> Satırın biraz alt tarafında görünmesini istediğimiz yazı </SUB>

<STRIKE> Üstü çizili yapılacak yazı </STRIKE>

HTML dökümanımızda paragraf başı yapmak, sadece alt satıra geçmek ya da bir kısım yazıyı tek bir satırda yazmak istediğimiz zaman aşağıdaki balirteçleri kullanmalıyız. <P> ……Yeni bir paragraf yapmak istediğimiz zaman

kullandığımız bu belirteç, çiftiyle birlikte kullanılmaz. Okunabilirliği artırmak için, genelde satırın sonunda kullanılır. Bir satır boşluk bırakır.

<BR> …..Bir alt satıra geçmek için kullanılan bu belirtecin de çifti yoktur. Bu belirteç bir satır boşluk bırakmadan, bir alt satıra geçer.

<NOBR> Hep aynı satırda yer almasını istediğimiz yazı </NOBR> ….. Bu belirteç, çiftiyle birlikte kullanılır ve belirteç çifti arasına yazdığımız yazı, bir satırda görüntülenir.

Döküman içinde kullanacağımız başlık formatlarını ayarlamak için kullanacağımız belirteç ise aşağıda gösterilmiştir:

<H&> Başlık <H&> …..Bu belirteç çifti arasına da kullanacağımız başlığı yazarız. &, 1’ den 6’ ya kadar değişebilen bir sayıyı temsil eder. Sayı büyüdükçe, başlığın ebatları da küçülür.

Başlığı sağa, sola yaslamak ya da sayfanın tam ortasında bulunmasını sağlamak için <H&> belirteci ALIGN seçeneğiyle kullanılır.

<H& ALIGN=#> Sağa, sola ya da ortaya yaslayacağımız başlık </H>

& yerine 1’ den 6’ ya kadar bir sayı, # yerine de left, right ya da center gelmelidir.

Bir paragrafı olduğu gibi sağa, sola ya da ortaya yaslamak istedimiz zaman da <P> belirtecini çiftiyle beraber benzer şekilde ALIGN seçeneği ile kullanmalıyız.

<P ALIGN=#> Sağa, sola ya da ortaya yaslayacağımız paragraf </P>

= left, right ya da center

Hazırladığımız dökümanda kullanmak istediğimiz özel karakter stilleri olabilir.Örneğin bir yerden alıntı yapmak istediğimizde, alıntı yaptığımız yazıların biraz eğik (italik gibi) görünmesini isteyebiliriz. Ya da bazı vurguladığımız kısımların daha çok göze çarpmasını isteyebiliriz. HTML’ de bu gibi özellikleri sağlayan belirteçler de vardır. Aşağıda bunlar verilecektir:

<EM> Önemli bir yazı </EM> …..Bu belirteç vurguyu belirtmek için kullanılır. (Dışarıya biraz eğik çıkar.)

<STRONG> Çok önemli bir yazı </STRONG> .…Bu belirteç çifti güçlü vurguyu belirtir. (Dışarıya biraz koyu çıkar.)

<CODE> Yazılar yazılar </CODE> …..Bu belirteç çifti yasa, kural belirten yazılar için kullanılır.

<SAMP> Örnek </SAMP> …..Örnek çıktı

<VAR> Değişken, emin değil </VAR> …..Değişken, karasız

<DFN> Tanımlama </DFN> …..Bu belirteç çifti tanımlama belirten yazılar için kullanılır. (Dışarıya hafif eğik çıkar.)

<CITE> Alıntı </CITE> …..Bu belirteç çifti alıntı yazılar için kullanılır.

<SMALL> Küçük yazı </SMALL> …..Bu belirteç çifti arasında yazılan yazılar dışarıya çok küçük çıkar.

<BIG> Büyük yazı </BIG> …..Bu belirteç çifti arasında yazılan yazılar dışarıya çok büyük çıkar.

<ADDRESS> Yazarın Adresi </ADDRESS> …..Bu format yazarın adresini yazmak içindir.

<BLOCKQUOTE> İçeriden başla </BLOCKQUOTE> …..Bu belirteç çifti arasına yazılan yazı sayfanın hem sağından hem solundan içeriye kayar.

<DIV ALIGN=LEFT|CENTER|RIGHT> Herhangi bir yazı ya da yazı grubu </DIV> …..Bu belirteç çifti herhangi bir yazı ya da yazı grubunun sağa, sola ya da ortaya yaslanmasını sağlar.

<CENTER> Ortalanacak yazı </CENTER> …..Bu belirteç çifti yazı ve resimleri sayfada ortalar .

<PRE> Formatlı metin </PRE> …..Bu belirteçler arasına yazılan her şey, yazıldığı gibi ekrana çıkar. Boşluklar, tab’ lar, satır bölmeleri vb korunur.

<BLINK> Yanıp sönen yazı </BLINK> …..Bu belirteç çifti arasına yazılan yazılar dışarı çıktıklarında bir yanıp bir sönen şekilde görünürler.

Sayfamızda herhangi bir yere değişik boyutlarda çizgi çizmek isteyebiliriz.

Bunu <HR> belirteciyle yaparız. Boyutlarını ayarladığımız seçenekleriyle birlikte kullanımı aşağıdaki gibidir.

<HR SIZE=# WIDTH=# ALIGN=#> …..Çizginin uzunluğunu ayarlamak için kullandığımız WIDTH seçeneğini WIDTH=50% şeklinde de kullanabiliriz. Örneğin; bizim kullanımımız sayfanın %50’ si, yani yarısı uzunluğunda bir çizgi çizmek istediğimizi belirtir.

Sayfamızdan yapacağımız bağlantılara gelince; öncelikle Internet üzerindeki herhangi bir makinadaki bir dökümana bağlantı yapmaya bakalım:

<A HREF=”URL_adresi”> Buraya tıklayınız </A> …..Web sayfanızda “Buraya tıklayınız” yazısı çıkacaktır ve bu yazı bir link görünümünü almıştır. Üzerine tıkladığınızda yazdığınız URL adresine ulaşırsınız. URL adresi aşağıdaki gibidir.

<servis>://<adres>[ort_numarası]/<dizin>/dosya_adı

<servis> yerine webin dışında diğer internet servislerini sağlayan prottokolleri de yazabilirsiniz. Eğer, bulunduğunuz dizinde bir dökümana bağlantı yapmak istiyorsanız, sadece dökümanın adını yazmanız yeterlidir. Kendi makinanızda fakat başka bir dizin altındaki bir dökümana bağlantı yapmak için, dizin ismini ve döküman ismini yazmalısınız.

<A HREF=”fotograflarimuzgun.gif”> buraya tıklayınız </A>

Aynı dökümanın içinde bir yere bağlantı yapmak istiyorsak o zaman şöyle demeliyiz:

<A HREF=”#name”> buraya tıklayınız </A>

Gitmek istediğiniz yerin HTML kodunu ise şöyle yazmalısınız:

<A NAME=”name”></A> Buraya hoşgeldiniz.

“name” burada sizin tespit edeceğiniz herhangi bir isim olabilir. (Örneğin 1. Bölüme gitmek istiyorsanız, name yerine 1, aynı şekilde 1. Bölümün bulunduğu yere de name olarak 1 yazmalısınız.)

Başka bir dökümanın bir parçasına gitmek istiyorsanız, <A HREF=”URL#name”> hedef </A> yazmalısınız. Tabii gideceğiniz döküman parçasının başında da <A NAME=”name”></A> yazmalıdır.

Kaynak senyokmusun.com