Hayırlı günler, bugünkü dersimizde HTML web tasarım diline giriÅŸ yapacağız. Html web tasarımın temelini oluÅŸturan programlama dilidir. Web tasarımına yeni baÅŸlıyorsanız ya da web tasarım yapıyorum diyorsanız HTML’yi çok iyi bilmeniz gerekiyor.
Html statik sayfalar hazırlamamızı saÄŸlar, dinamik sayfalar yapmak istiyorsanız PHP veya ASP gibi programlama dillerini de iÅŸin içine katmamız gerekir. Ä°lerleyen derslerde Php üzerinde de durulacaktır.
Html kodlamayı not defterinde, dreamweaver, vs… editörlerde yazabilirsiniz. Ben windows’un Not Defterini kullanacağım. Html sayfasının dosya uzantısı .html veya .htm dir ama genelde kullanılan uzantı .html uzantısıdır.
Html’de kodlama etiketler <etiket> aracılığıyla yapılır. Bu etiketlere komutlar da diyebiliriz. Html’de bazı etiketler dışında mutlaka her etiketin birde kapanış etiketi vardır. Etiketler küçük büyük karakterleri arasında yazılır. Kapanış etiketleri ise küçük iÅŸaretinden sonra bölme iÅŸareti “/” konularak yazılır. Açılış ve kapanış etiketleri arasına ise komutun yapacağı iÅŸlemler yazılır.
Örnek: <etiket> ……. </etiket>
HTML YAPISI
Html temel üç etiketten meydana gelir. Bu üç etiket Html dilinin iskeletini oluÅŸturur. Bu etiketler <HTML>, <HEAD>, <BODY> etiketleridir. Bu etiketleri aÅŸağıdaki ÅŸekille daha iyi anlayabiliriz.
Not:Html’de küçük büyük harf ayrımı yoktur. Etiketler küçük de yazılabilir, büyük de yazılabilir.
-
<HTML> …. </HTML> etiketi: Html dilinin baÅŸlangıç ve bitiÅŸ etiketidir. Tarayıcılara HTML dilinde kodlama yapıldığını belirtir. Web sayfasının ilk ve son etiketidir.
Örnek:
<HTML>
……… web sayfası içeriÄŸi ……
</HTML>
-
<HEAD> …. </HEAD> etiketi: Web sayfamızın baÅŸ kısmını oluÅŸturur. Head etiketleri arası sayfa baÅŸlığının ve sayfa özelliklerinin tanımlandığı alandır.
Örnek:
<HTML>
<HEAD>
……Sayfa baÅŸlığı ve sayfa özellikleri….
</HEAD>
</HTML>
-
<BODY> …. </BODY> etiketi: Web sayfamızın görünen kısmını oluÅŸturur. Yani sayfanın vücut kısmı da diyebiliriz. Tarayıcıda görüntülenecek her ÅŸey (kiÅŸilerin görebileceÄŸi her ÅŸey) burada yazılmalıdır. Yazılar, resimler, ÅŸekiller, vs… bütün görüntülenecek sayfa içeriÄŸi body etiketleri arasına yazılmalıdır.
Örnek:
<HTML>
<HEAD>
……Sayfa baÅŸlığı ve sayfa özellikleri….
</HEAD>
<BODY>
…. Sayfa içeriÄŸi, kullanıcıya görünecek sayfa içeriÄŸi…..
</BODY>
</HTML>
Evet ilk web sayfamız hazır. Yukarıdaki örnek bizim her web sayfası için kullanacağımız temel ÅŸablondur. Yani web sayfamızın iskeletidir.
Åžimdi buraya kadar kodlarımızı not defterinde yazdık gelelim kaydetmeye. Not Defteri menü çubuÄŸundan Dosya menüsündeki Kaydet menü aracına tıklıyoruz. Gelen kaydet penceresinden Kayıt yerini seçtikten sonra, Kayıt Türünü Tüm Dosyalar seçiyoruz ve Dosya adına da sayfamızın adını yazıp dosya uzantısını da ekleyerek Kaydet butonuna basıyoruz.
Not:Web sayfamızın anasayfası index.html, index.htm, default.htm ya da default.html olarak kaydedilmelidir. Tarayıcılar bir sitenin anasayfasını bu isimlerle arar ve açar bu nedenle açılış sayfamız bu isimlerde olmalıdır.
BelirttiÄŸimiz yere ilk web sayfamız kaydedilmiÅŸ oluyor. Dosyayı çift tıklayarak tarayıcıda açabilirsiniz.
Ä°lerleyen derslerde görüÅŸmek üzere. SaÄŸlıcakla kalınız.
Mustafa KARSLI
Android