HTML Nedir?HTML basitçe internet dokümanları şekillendirme dilidir. HTML (HyperText Markup Language) karmaşık ve zor bir dil değildir. Bu bir programlama dili değildir, arzu eden her kes kendi web sayfasını yapabilmek için derslerimizi takip ederek temel HTML bilgilerini alabilir.
HTML öğrenmeye başlarken sisteminizde yüklü olan basit bir metin düzenleyici sizin için yeterli olacaktır. Windows kullanıcıları NotePad, Mac kullanıcıları TeachText, Unix kullanıcıları Vi ile başlayabilirler. Geliştirme aşamasında bu programlar size yeterli gelecektir. Daha ileri safhalarda ise, karışık sayfalar yapmaya karar verirseniz gelişmiş programlara ihtiyaç duyacaksınız.
HTML metinleri biçimlendirmek, şekil vermek, düzenlemek için kullandığımız komutlar dizisidir. Bu komutlara 'tag' diyoruz. Taglar < karakteri ile başlayıp, > karakteri ile biterler. Örneğin; yazıyı kalın (bold) yazmak için
... tagları kullanılır. Bu tagın arasına yerleştirilen metin kalın olarak görüntülenir.
Derslerimizde tagları ayrıntılı olarak açıklayacağız. İlk olarak basit bir HTML sayfası hazırlayalım.
HTML Sayfası OluşturmaYeni bir klasör oluşturun. Klasörü adlandırın. (örneğin: ders)
Şimdi bu klasörün içinde bir metin belgesi oluşturun. (Dosya-Yeni-Metin Belgesi) veya (Sağ tıklayın-Yeni-Metin Belgesi)
Şimdi oluşturduğunuz metin belgesini açın. Evet sayfamızı hazırlayabiliriz. Aşağıdaki kodları yazın. <html>
<head>
<title>Merhaba</title>
</head>
<body>Sayfama Hoşgeldiniz.</body>
</html>
Dosyayı farklı kaydedin. (Dosya-Farklı Kaydet..) Dosya ismini ornek.htm yazabilirsiniz.
Ders klasöründen oluşturduğunuz sayfayı açabilirsiniz. Bunun için ornek dosyasının üzerine tıklayın. Dosya browser'inizde (tarayıcınızda) açılacaktır.
İşte gerekli tagları kullanarak ilk HTML sayfanızı hazırladınız. Bundan Sonraki Derslerde daha fazla tag kullanarak sayfanızı zenginleştirebileceksiniz.
<html> .. </html> Tagı HTML kodunun başladığını belirtiyor.
<head>...</head> Sayfanın baş kısmıdır. İleride bu kısma yazılacak özellikleri göreceksiniz.
<title>....</title> Sayfanın başlığını belirtiyor.
<body>....</body> Sayfanın gövde kısmıdır. Ekranda görünen kısmı burasıdır
HTML Tagları… Kalın yazı
… İtalik yazı
… Altçizgi
<p>…</p> Paragraf etiketi
<h1>....<h6> Başlık etiketi
<center>....</center> Ortalama etiketi
Bir önceki derste örnek sayfasını oluşturmuştuk.
<html>
<head>
<title>Merhaba</title>
</head>
<body>Sayfama Hoşgeldiniz.</body>
</html>
Şimdi bu sayfayı geliştirelim. <html>
<head>
<title>Merhaba</title>
</head>
<body>
Sayfama Hoşgeldiniz.</body>
</html>
Farklı kaydedip, tarayıcıdan görüntülerseniz, yazının bold (kalın) şekil aldığını görebilirsiniz. Aynı şekilde
… İtalik yazı,
… Altçizgi etiketlerini de kullanarak sonuçları gözlemleyebilirsiniz.
Başlık taglarına göz atalım. Bunlar <h1>....<h6> komutlarıdır. Bu komutlardan istediğinizi seçerek başlığınızı biçimlendirebilirisiniz. <html>
<head>
<title>Denemeler</title>
</head>
<body>
<h1>Deneme 1</h1>
<h2> Deneme 2</h2>
<h3> Deneme 3</h3>
<h4> Deneme 4</h4>
<h5> Deneme 5</h5>
<h6> Deneme 6</h6>
</body>
</html>
Metni ortalamak için <center>....</center> tagları kullanılır.
<html>
<head>
<title>Merhaba</title>
</head>
<body><center>Sayfama Hoşgeldiniz.</center>
<body>
</html>
