HTML 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.İlerleyen derslerimizde Dreamweaver'dan da kısaca bahsedeceğiz. Ders içerisindeki ö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.
Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır.
<html>...</html> kodları arasına yazılır.
<tag_2>
......
</tag_2>
</tag_1>
Örnek:
<HTML>
<BODY>
......
<FORM>
......
</FORM>
</BODY>
</HTML>
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 TAG'I
<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 TAG'I
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.
<META NAME="author" CONTENT="BURCU EREN"> 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=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00 GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
<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 http-equiv=”content-style-type” CONTENT=”text/css”> Content-typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
<META NAME="copyright" CONTENT="© 2006 EMEL KAÇAR"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu sayfanın hangi editörle yapıldığını 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 NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur.
Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.
BODY TAG'I
- Yazım Kuralları
Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır.
<html>...</html> kodları arasına yazılır.
- Kullanım biçimine örnek verecek olursak;
<tag_2>
......
</tag_2>
</tag_1>
Örnek:
<HTML>
<BODY>
......
<FORM>
......
</FORM>
</BODY>
</HTML>
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 TAG'I
<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 TAG'I
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.
<META NAME="author" CONTENT="BURCU EREN"> 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=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00 GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.
<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 http-equiv=”content-style-type” CONTENT=”text/css”> Content-typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.
<META NAME="copyright" CONTENT="© 2006 EMEL KAÇAR"> Kodu sayfanın telif hakkının kime ait olduğunu gösterir.
<META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu sayfanın hangi editörle yapıldığını 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 NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur.
Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.
BODY TAG'I
Parametreler | Görevleri |
---|---|
Bgcolor | Arka plan rengini belirler. |
Background | Arka plana koyulacak resmi belirler. |
Link | Syfadaki linklerin rengini belirler. |
Alink | Linke tıklandığındaki rengi belirler. |
Vlink | Daha önce ziyaret edilmiş linklerin rengini belirler. |
TITLE TAG'I
Title etiketleri arasına sayfanın başlığı yazılır.
<HTML>
<HEAD>
<TITLE> Bilişim Teknolojileri </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
Title etiketleri arasına sayfanın başlığı yazılır.
<HTML>
<HEAD>
<TITLE> Bilişim Teknolojileri </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
Listeleme Etiketleri
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır. Dokümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidini destekler.
<OL> TAG'I
Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir. Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır.
<UL> TAG'I
Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanıyoruz.
<LI> TAG'I
<li> etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin kısaltılmışıdır. Yukarıda anlatmış olduğumuz <ol> ve <ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de <li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.
Örnek verecek olursak;
<html>
<head><title> … </title> Ekran Çıktısı;
</head> 1. Kahve Çeşitleri
<body> 1. Sütlü
<ol type="1"> 2. Sade
<li>Kahve Çeşitleri
<ol type="a">
<li>Sütlü
<li>Sade</ol>
</body>
</html>
HTML ile ilgili tanımlara erişmek için tıklayınız.
Dersle ilgili video izlemek için buraya ve buraya tıklayınız.
HTML ile ilgili kodlara erişmek için tıklayınız.
<OL> TAG'I
Sıralı liste oluşturmak için kullanılır. Sıralı listelerden kastımız kelime ya da cümlelerinizi ya da herhangi bir şeyi numaralı, alfabetik, roma rakamlı olarak sıralı göstermektir. Liste içine alınacak metinler <ol>...</ol> etiketleri arasına alınarak yazılır.
<UL> TAG'I
Listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler yerleştirmek için <ul> etiketini kullanıyoruz.
<LI> TAG'I
<li> etiketi ingilizce “liste elemanı” anlamına gelen 'list item' kelimesinin kısaltılmışıdır. Yukarıda anlatmış olduğumuz <ol> ve <ul> etiketleri tek başına kullanılmaz sırayı belirtmek için de <li> imi ile birlikte kullanılır. Yani sıralanacak olan ifadenin başına <li> getirmeliyiz.
Örnek verecek olursak;
<html>
<head><title> … </title> Ekran Çıktısı;
</head> 1. Kahve Çeşitleri
<body> 1. Sütlü
<ol type="1"> 2. Sade
<li>Kahve Çeşitleri
<ol type="a">
<li>Sütlü
<li>Sade</ol>
</body>
</html>
HTML ile ilgili tanımlara erişmek için tıklayınız.
Dersle ilgili video izlemek için buraya ve buraya tıklayınız.
HTML ile ilgili kodlara erişmek için tıklayınız.