Bölüm 2 (HTML dersleri) Temel Etiketler, Başlıklar, Paragraf, Linkler, İmajlar
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
Temel etiketler
Bir web sayfası için temel etiketler şunlardır;
<html>
<head>
<title>Burası başlık,yukarıdaki Ne Fark eder ki yazan yer gibi(tarayıcıda)</title>
</head>
<body>
</body>
</html>
Bu etiketleri uygulamayı unutmayın. Bunları yeni metin.txt’ye gördüğünüz gibi yazıyorsunuz. CTRL+S ile metin belgesine kayıt edin ilk önce ki yazdıklarınız kaybolmasın. Ardından farklı kaydet ile index.html’yi değiştirin. Ve index.html’yi çift tık ile tarayıcıda gösterin. Yazdığınız kodlar ile sayfa bembeyaz olacak yalnız tarayıcıda title etiketinde yazan yazı gözükecektir.
HTML’de başlıklar
Html’de başlıklar(headings) <h1>’den <h6>’ya kadar gider. En büyük olan 1 numaralı, en küçük olan 6 numaralıdır.
Örnek olarak bunları da uygulayabilirsiniz. Uygulayacağınız başlık etiketlerini <body> ile </body> arasına yazmalısınız. Body etiketi web sayfasının tamamen beyaz görünen kısmını temsil eder. Örneklerimiz;
<h1>Bu başlık h1 etiketine sahip.</h1>
<h2>Bu başlık h2 etiketine sahip.</h2>
<h3>Bu başlık h3 etiketine sahip.</h3>
<h4>Bu başlık h4 etiketine sahip.</h4>
<h5>Bu başlık h5 etiketine sahip.</h5>
<h6>Bu başlık h6 etiketine sahip.</h6>
HTML’de paragraf
Html’de paragraf <p> ile tanımlanır ve </p> ile kapanır.
Örnek; <p> Bu bir paragraf yazısı</p> .
Bunu da her başlık altına tanımlayın lütfen.
Html’de bağlantılar (links)
Html’de bağlantılar anchor(çapa) ile tanımlanır. Yani a ile… Bu da
<a href=”http://www.w3schools.com”>Bu bir bağlantı,çeviriyi yaptığım yere gider hem de…</a>
Bu örneği de en alta </body> taginin öncesine yazın lütfen. Tag’ları yani etiketleri kapatmayı unutmayalım.
HTML’de görüntüler/imajlar
Html’de imajlar <img> tag’ı ile yani etiketi ile tanımlanır.
<img src=”w3schools.jpg” width=”104″ height=”142″ />
Bu etiketi kapatmak için bir boşluk bırakıp / işareti koyuyoruz. Image ekleme de böyle…
Yaptığımız çalışmaların son hali şu fotoğraftaki gibi olabilir;
Bu dersimizde de HTML’in temel etiketlerini görmüş olduk. Bir sonraki dersimizde html elemanlarını göreceğiz. Sorularınız/yapamadığınız yerleri sorabilirsiniz aşağıya yazarak.