HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ
HTML Komut Yapısı
HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Bu ders kapsamında örnek uygulamalar için Notepad kullanılmıştır. Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya “dosya_adi.html” olarak kaydedilmelidir.
Yazım kuralları
Komutlar büyük ya da küçük harfle yazılabilir.
Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez.
Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır.
Kullanım biçimi:
<etiket (tag)_adi>
Örnek : <HTML>,<BODY>,<TITLE>
v Bir etiket <etiket_adi> şeklinde başlar ve bazı etiketler dışında </etiket_adi> şeklinde biter.
v Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kodların okunabilirliğini artırmak için bir etiket bitmeden tekrar etiket açılırsa içeride açılan etiket biraz daha içeriden yazılmalıdır.
Kullanım biçimi:
<tag_1>
<tag_2>
......
</tag_2>
</tag_1>
v Bir etiket parametreler kullanarak biçimlendirilir ve bu parametrelere tırnak ("") işaretleri arasında değer atanır. Değerle parametre adı arasında eşittir (=) işareti kullanılır.
Kullanım biçimi:
<tag_adi parametre_adi ="deger">
Örnek:
<body bgcolor="blue">
WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler.
<html>
<head>
<title> Sayfanın Başlığı </title>
</head>
<body>
Sayfanızın tüm içeriği: resim, yazı, video, vb.
</body>
</html>
<HTML>
<html>, bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.
<HEAD>
HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan parametreler aşağıdaki tabloda verilmiştir.
Kullanılacak parametreler
|
Görevi
|
name
|
Author, description ve keywords özellikleri tanımlanır.
|
http-equiv
|
Refresh, expires, content ve content-style-type özellikleri tanımlanır.
|
Size
|
Yazının boyu belirlenir.
|
<META NAME="author" CONTENT="LEYLA AYGÜN"> Kodu sayfanın tasarımcı kimliğini gösterir.
<META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.
<META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri içerdiğini gösterir. Burası arama motorları için çok önemlidir.
<META http-equiv=”refresh” CONTENT=”5; URL=http://www.megep.meg.gov.tr”> Refresh ile sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır.
<META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını gösterir.
<META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir.
<META NAME="copyright" CONTENT="© 2012 LEYLA AYGÜN ">Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir.
! Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.
<BODY>
HTML belgesinin bütün içeriği burada yer alır. Buraya metinler, resimler, listeler vb. her türlü HTML nesnesi yerleştirilebilir.
Kullanılacak parametreler
|
Görevi
|
Bgcolor
|
Arka plan rengini belirler.
|
Background
|
Arka planda kullanılmak istenen resmi belirler.
|
Link
|
Sayfadaki linklerin rengini belirler.
|
Alink
|
Linke tıklandığındaki rengi belirler.
|
Vlink
|
Daha önce ziyaret edilmiş linklerin rengini belirler.
|
<TITLE>
Title etiketleri <Head>….</Head> etiketleri arasında yer alır.Tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.
Kullanımı;
<title> görüntülenmesini istediğiniz başlık</title>
Örnek:
>>Bir sonraki dersimizde görüşmek üzere ;)
