Html sayfalarının temel yapısı

İlk Html Sayfamızı Yapalım

Html sayfalarımızı yapmaya başlayalım. Size önerim eğer bu işte yeniyseniz Notepad tarzı yazı editörlerinde kodlama yaparak çalışmanız olacaktır. C: sürücünüzde bir klasör oluşturun.Örneğin deneme isminde bir klasör oluşturduk:

clip_image002

Karşımıza yeni bir metin dosyası geldi. Şimdi bu metin dosyasına html kodlarımızı yazabiliriz. Aşağıdaki kodları metin belgemize yazalım.

<html>
<head>
<title>İlk Sayfamız</title>
</head>
<body>Sayfama hoş geldiniz </body>
</html>
 

Kodlarımızı yazdık. Kaydetmek için dosya>farklı kaydet seçeneğine tıklıyoruz. ilksayfam.html olarak kaydedelim. Şimdi klasörümüz de iki adet dosya oluşacaktır. Bir metin belgesi ve bir html dosyası (ilksayfam.html ). Metin belgesini silebilirsiniz. ilksayfam.html dosyasına iki defa tıklayalım ve aşağıdaki görüntünün oluştuğunu sizde test edin.

clip_image002

İlk html sayfamızı yapmış olduk. Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim: Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük “<” ve büyük “>” sembolleri arasına yazdık. Bu ifadelere tag (etiket) deniyor.

Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor. Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz. Bu son yaptığımız etiketi sonlandırıyor. Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda. Burada kullandığımız etiketler ve anlamları şöyle:

<html>……</html>: Html dokümanının başladığını ve bittiğini simgeler. Diğer bütün kodları bu iki etiketin arasına yazıyoruz.

Bir HTML belgesi iki bölüme ayrılır: head(baş) ve body(gövde).

<head>….</head>: Etiketleri arasına sayfa hakkında bilgiler yazıyoruz. Meta ve title gibi etiketler burada yer alıyor.

<title>…</title>: Title sayfanın başlığını belirtiyor. Burada yazılanlar tarayıcının üst tarafında browser adıyla beraber gösteriliyor

<body>….</body>: Etiketleri arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar(İçerik) bu etiketler arasında yeralıyor.

Başka bir örnek daha yapalım : Yeni bir metin belgesi oluşturun ve aşağıdaki kodları yazıp sayfa1.html olarak kaydedin.

<html>
<body>
<h1>Bir başlık örneği</h1>
<p>Bir paragraf örneği</p>
</body>
</html>

clip_image001Şimdide açıklayalım:
•<html> ve </html> etiketleri arasındaki yazılar web sayfamızı tanımladı.
•<body> ve </body> elementleri arasındaki yazı sayfamızın görünür içeriğini tanımladı.
•<h1> ve </h1> arasındaki yazı başlık olarak görüntülendi.
•<p> ve </p> arasındaki yazı paragraf olarak görüntülendi.

Diğer makalemizde html etiketlerine daha yakından bakıcaz.İyi çalışmalar…

Yazar: kacarozgur

Özgür Kaçar sitemizde 38 yazı eklemiş...

Share