Ocak 10 2008
HTML Tags – 1 (Temel Kodlar)
HTML’e yeni giriş yapan arkadaşlar için basitçe tag (etiket)leri tanıtalım ne işe yaradıklarını belirtelim…
Taglerin sıralamasını w3schools.com‘daki sıraya göre götüreceğim. Önce HTML’in tanımını yaparak başlayalım:
Açılımı İngilizce Hyper Text Markup Language olan ve bu kelimelerin baş harflerinden oluşmuş olan HTML, bünyesinde küçük işaretleme etiketleri bulunduran, bu etiketler sayesinde browser (tarayıcı)a sayfayı nasıl göstermesi gerektiğini bildiren, uzantısı mutlaka .htm veya .html olan, basit bir text editöründe hazırlanabilen dosyalardır.
Bu tanımın ardından en basit şekilde oluşturulmuş bir html sayfasının görüntüsünü sizlerle paylaşalım;
<html> <head> <title>Sayfa başlığı tarayıcınızın sol üstünde görünecektir.</title> </head> <body> Bu benim ilk HTML sayfam. </body> </html>
Kodları açıklayacak olursak, temel olarak bir sayfa 3 bölümden oluşmaktadır en dışta tüm kodları kapsayan <html> onun içinde <head> ve <body> bölümleri vardır.
<head> in içinde sayfanın başlığı <title> ve ileride göreceğimiz <script>, <style>, <meta>, <link> gibi etiketler bulunmaktadır; bu bölüme sayfanın kimliği diyebiliriz.
<body> bölümü sayfanın içeriğinin yani yazı, fotoğraf, resim, form ve menülerin bulunduğu bölümdür. Buraya koyduğunuz tüm elemanlar browserda görüntülenecektir.
Şimdiye kadar verilen bilgilerin pekişmesi için hemen bir notepad açın buradaki kodları kopyalayıp notepade yapıştırın ve Kaydet (Save) seçeneğinden dosyayı index.html ismini vererek kaydedin. Notepadi kapatın ve dosyanın browserınızın ikonunu aldığını göreceksiniz (IE, Firefox vs.). Bu dosyayı çalıştırdığınızda internet sayfanız açılacak ve sayfa üzerinde Bu benim ilk HTML sayfam yazısı çıkacaktır. Artık ilk HTML deneyimizi gerçekleştirmiş oldunuz.
Şimdi sırayla TAG (Etiket)leri öğrenelim:
<html>
Bu tag bizim ana tagimizdir, bize HTML kodlarının başladığını belirtir. <html> tagi kodların en sonunda </html> şeklinde kapatılır, bu HTML kodlarının sona erdiğini belirtir ve mutlaka kapatılmalıdır.
<head>
Head tagi sayfanın döküman tipini, başlığını ve içerik ile ilgili açıklamaları, harici yükleme bilgilerini (script, css vs.) içerir. Bu tag </head> şeklinde kapatılır.
<title>
Title sayfanın başlığıdır ve yazılan başlık browserın sol üstünde görüntülenir. Bu tag </title> şeklinde kapatılır.
<body>
Body tagi içine yazılan her şey browserda görüntülenecektir. Bu tag </body> şeklinde </html> taginden hemen önce kapatılır. Tag lerin kapatılması temiz ve anlaşılır bir kodlama açısından gereklidir, bu duruma mutlaka dikkat etmelisiniz özellikle Dreamweaver gibi gelişmiş bir editör yerine notepad gibi basit bir editör kullanıyorsanız.
Başlık tagleri
<h1> <h2> <h3> <h4> <h5> <h6>
Başlık tagleri 6 adettir. Bu tag leri metinlerimiz içinde bulunan başlıklar için kullanmaktayız. Büyükten küçüğe <h1> büyük puntolu <h6> küçük puntolu başlıklarda kullanılabilir, bunları gazetelerdeki başlık boyutlarıyla ilişkilendirebiliriz. Sayfa içindeki kullanım yeri ve sayısı arayüz geliştiricinin inisiyatifindedir. Başlık etiketleri </h1> </h2> </h3> </h4> </h5> </h6> şeklinde kapatılmalıdır.
Paragraf
<p>
P tagi paragrafı belirtir. Herhangi bir metni bu tag sayesinde çeşitli paragraflara bölebiliriz. Sayfa içinde bu tag in kullanım sayısı ile ilgili bir sınırlama yoktur.
Örnek:
<p>Burası birinci paragrafımız. Burada hikayemizin giriş bölümü mevcuttur.</p> <p>Burası ikinci paragrafımız. Burada hikayemizin gelişme bölümü mevcuttur.</p> <p>Burası üçüncü paragrafımız. Burada hikayemizin sonuç bölümü mevcuttur.</p>
Sayfamızı önizleme yaptığımızda görüntü şu şekilde olacaktır:
Burası birinci paragrafımız. Burada hikayemizin giriş bölümü mevcuttur. Burası ikinci paragrafımız. Burada hikayemizin gelişme bölümü mevcuttur. Burası üçüncü paragrafımız. Burada hikayemizin sonuç bölümü mevcuttur.
Yukarıda görüldüğü üzere metnimiz üç ayrı paragraf şeklinde sayfamızda gözükecektir. Açtığımız <p> tag ini </p> şeklinde kapatmalıyız. Eğer açtığımız tagi kapatmazsak browser hatalı göstermeyecek fakat biz hatalı bir işlem yapmış olacağız; bu yüzden açtığımız her tagi kapatmalıyız.
Satır kesme (break row)
<br>
Satır kesme tagimiz <br> dir. Bu tagi metnimizi belirli bir yerden sonra yeni bir paragraf açmadan alt satıra geçmek için kullanırız.
Örnek:
<p>Bu satırı html <br> kelimesinden sonra bölerek alt satıra geçeceğiz.</p>
Sayfamızı önizleme yaptığımızda görüntü şu şekilde olacaktır:
Bu satırı html kelimesinden sonra bölerek alt satıra geçeceğiz.
Yatay şerit (horizontal rule)
<hr>
Paragraflarımızı yatay bir şerit ile ayırma işlemini <hr> tagi ile yapmaktayız.
Örnek:
Ben html öğreniyorum. <hr> Ben de html öğreniyorum.
Sayfamızı önizleme yaptığımızda görüntü şu şekilde olacaktır:
Ben html öğreniyorum.
Ben de html öğreniyorum.
HTML kodları arasına yorum yazma
<!-- -->
Bir diğer temel html tagimiz, html kodları arasına çeşitli hatırlatmalar, belirlemeler, karışıklıkları önlemek veya daha sonradan düzenlemek istediğimiz kodlara kolay ulaşmamızı sağlamak için yazdığımız <!-- --> tagidir.
Örnek:
<!-- Ürün bilgileri --> <p>Harika bir ürünümüz var. Mutlaka deneyin.</p> <!-- Ürün bilgileri bitti --> <!-- Ürün fiyatı --> <p>Fiyat: 10 TL</p> <!-- Ürün fiyatı bitti -->
Sayfamızı önizleme yaptığımızda görüntü şu şekilde olacaktır:
Harika bir ürünümüz var. Mutlaka deneyin. Fiyat: 10 TL
Yukarıda görüldüğü gibi yorumlar sadece sizi bilgilendirmek için editörde görülür browserda gözükmez.
Temel kodlar genel itibariyle bu şekildedir.
Anlaşılmayan yerleri yorum veya mail yoluyla sorabilirsiniz.
Yorumlar
Bu yazıya henüz yorum yapılmamış.
Bu yazıya yorum yapın:
Yorumunuz onaylandıktan sonra sitede görüntülenecektir.