Herhangi bir web sitesine sağ klikleyip kaynağı görüntüle dediğinizde karşınıza çıkan yazılar HTML kodlarıdır. Ancak korkmayın öyle göründüğü gibi değil zaten normalde kodları biz yazmayacağız dreamwear'a yazdıracağız unutmamamız gerekiyor ki HTML dreamweaver yada herhangi bir programa ait bir uzantı değildir. Herhangi bir metin editörü ile web sayfaları hazırlayabilirsiniz. O zaman notpad'ı açalım.
ve şu kodları yazalım.
<html>
<head>
</head>
<body>
Merhaba Nasıl olmuşum?
</body>
</html>
bu yazdığınız azıcık kodla bir web sayfası oluşturdunuz bile ancak bu sayfanın uzantısının html olması gerekmekte html uzantılı olarak yapmak için dökümanı kayıt ederken farklı kaydet bölümünden tüm dökümanları seçip adını index.html koyun ve bilgisayarınızda istediğiniz bir yere kayıt edin daha sonra dökünamı herhangi bir tarayıcıda açarsanız Merhaba nasıl olmuşum? yazan bir web sayfasıyla karşılacaksınız.
peki ne yazdık bir bakalım dikkat ederseniz küçüktür büyüktür ilerin arasına yazıklarınız tarayıcılar tarafından gözükmemekte çünkü bu kelimeler html etikeleri ve her açılan etiket kapatılımış.
İlk etiketimiz ve en son etiketimizde bu iki etiketin arasına yazılan tüm kodların html olarak algılanmasını sağlayan etiketlerdir.
Onun hemen altında <head> etiketi açılmış ve hemen </head> denilerek kapatılmış. Peki içine birşey yazmayacaksak neden var bu etiket esasında bu etiketin içine çok önemli bilgiler yazılır. Mesela sayfamızın başlığı yani title'ı peki bu ne işe yarar. Her sayfayı açtığımızda tarayıcınn tepesinde sayfamızın ismi yazar işte bu yazıyı title etiketnin içine yazarız.
Hadi bir deneyelim demin oluşturduğumuz sayfayı üzerine sağ tıklayıp not pad'le tekrar açıp şu şekilde değiştirelim.
<html>
<head>
<title>
Sayfamızın başlığı
</title>
</head>
<body>
Merhaba Nasıl olmuşum?
</body>
</html>
tekrar kaydedelim ve herhangi bir tarayıcıda kontrol edelim. Evet oldu.
Peki head ve head'ın içine başka neler yazılır? Mesela google da hangi kelimeler arandığında google'da listelenmek istiyoruz gibi...
HTML ismi esasında bize nasıl kod yazacağımızı anlatıyor.
H: Hyper yani hiper sayfalar arasıda bağlantılar
T: Text yani esasında sadece yazılardan oluştuğu
M: Markup yani bence bu en önemlisi işaretleme
L: yani dil
Bana göre en önemlisi Markup dedim ama neden şöyle düşünebiliriz. Eğer yazımızın bir paragraf gibi gözükmesini istiyorsak yazının başına ve sonuna p etiketi koyarız ki paragrafın başladığı yeri ve paragrafın bittiği yeri tam olarak söyleyebilelim. Eğer paragraf etiketini açar ama kapatmazsak nerede biteceğini belirtmemiş oluruz. Peki sayfamızın içine iki paragraf eklemeye çalışalım. Dosyamızı tekrar not padle açıp şu hale dönüştürelim.
<html>
<head>
<title>
Sayfamızın başlığı
</title>
</head>
<body>
<p>Ben bir paragrafım</p>
<p>Bende bir paragrafım</p>
</body>
</html>
Evet bunuda başardık. Ancak web sayfaları sadece pragraflardan oluşmuyor her ne kadar şuanda okuduğunuz web sayfasının çoğu paragraflardan oluşsada başka neler olabilir? Mesela başlıklar başlık etiketimiz ise h1, h2, h3, h4, h5, h6 h bir başlık olduğunu yanındaki sayıda öncelik yani büyüklük değerini gösteriyor. h1 birinci başlık yani en büyük h6 ise en küçük başlık sayfamıza başlıklar ve alt başlıklarda ekleyelim öyleyse
Sayfamızın başlığı
<html><head>
<title>
Sayfamızın başlığı
</title>
</head>
<body>
<h1>Ben kocaman bir başlığım</h1>
<h2>Bende fena sayılmam ama yine de
alt başlığım :( .</h2>
<h3>Ben sadece üçüncü seviye bir başlığım benden büyük 2 başlık daha var</h3>
<p>Ben bir paragrafım</p>
<p>Bende bir paragrafım</p>
</body>
</html>
Dikkat ettiyseniz sayfamda gözükmesini istediğim herşeyi body etiketinin içine yazıyorum. Çünkü body etiketi sayfamızda görünen her şeyin kodlarını yazıldığı bölümdür.
Peki sayfamıza bir bağlantı yani bir link eklemek istersek nasıl bir kod yazmamız gerekiyor. Çok karışık olmalı ben en iyisi daha fazla okumayım filan diye düşünmeyin en az diğerleri kadar basit
İlk olarak etiketin ne olduğuna bir bakalım etiketimiz a ne akala dimi hani link olsa l olsa daha iyi olmazmıydı. a anchordan yani çapadan geliyor. Bir sayfaya çapa atmamız gerekiyor. Peki tıklayınız diye bir yazınız olsao tıklandığında hangi sayfanın açılacağını kodlar nederen bilecek bunuda belirmemiz gerekiyor. Yol göstememiz referans olmamız lazım hemde hyper referans hadi bir deniyelim.
<html><head>
<title>
Sayfamızın başlığı
</title>
</head>
<body>
<h1>Ben kocaman bir başlığım</h1>
<h2>Bende fena sayılmam ama yine de
alt başlığım :( .</h2>
<h3>Ben sadece üçüncü seviye bir başlığım benden büyük 2 başlık daha var</h3>
<p>Ben bir paragrafım</p>
<p>Bende bir paragrafım</p>
<a href = "http://kunduz.blogspot.com" >tıklaa beni lütfen tıkla</a>
</body>
</html>
işte bu kadar basit
Tüm etiketleri bilmenize gerek yok ama ben tüm etiketleri ve nasıl kullanılacaklarını başka bir yazıda anatacağım.
Hiç yorum yok:
Yorum Gönder