Html kod eğitimine hem eğlenerek hem de istekli bir şekilde başlayalım. Biz diğer sıkıcı dersler gibi değil, daha kolay ve anlaşılır bir şekilde ders anlatacağız. İlk olarak çalışmalarımızı toplayacağımız bir dosya edinelim. Adını "Kod Eğitimi" koyabilirsiniz. Dosyanın içine bir adet daha adı "Html Kodu" olan bir dosya açalım. Daha sonra çalışmalar yaptıkça kendiniz bu dosyaya farklı dosyalar ekleyebilirsiniz. Kolay gelsin...
Html Kodu Nedir?
Html kodu bir uzantı çeşidi olup dosya uzantısıdır. Bu kodlar site üzerinde gözükmez. Çünkü tarayıcı kodu sitede yorumlayarak gösterir. Hiç korkmayın. Html kodu çok basit bir koddur. Biraz çalışırsanız kolaylıkla öğrenirsiniz.
<html>Nasıl Yazılır?
Html kodları etiketler yardımıyla yazılır. Etiketler "<" ile başlayıp ">" ile biter. Bazı etiketler dışında bütün etiketlerin kapanma etiketi vardır. Bir etiketi kapatmak için etiketten önce "/" konulması gerekir. Örneğin "<a> etiketinin kapanışı "</a>"dır. Her etiketlerin özellikleri bulunur. "özellik="değer" şeklindedir. Örneğin "<a href="https://www.google.com.tr">Google</a>" link verme özelliğidir. Merak etmeyin, bunları yakında öğreneceğiz.
Başlayalım
Bir "Not Defteri" açalım. İçine aşağıdaki kodları yapıştıralım:<head>
h2>Benim Sayfam</h2> <h4>İsminiz</h4>
</head>
<body>
<a><b>Merhaba</b></br>Siteme Hoşgeldiniz,</a></br><p>Sitem çok yakında güzelleşecek.</p></br><li>Adınız</li>
</body>
</html>
Adını "Sitem.htm" olarak kaydedelim. Şimdi kodu incelemeye başlayalım.
1.<html> Her kodun başlangıcıdır.
2.<head> Sitenin üst kısmını oluşturur.
3.<body> İçeriğin bulunduğu kısımdır.
4.<a> Yazı kümesidir. Önemli bir etikettir.
5. <b> Yazıyı kalın yapar.
7. <li> Yazıyı italik haline dönüştürür.
6.<h1> ... <h6> Başlık büyüklükleridir. Büyükten küçüğe <h1>.....<h6> şekildedir.
7. </br> Enter görevi görür.
8.<p> Paragraf açmanızı sağlar.
Siz bu açıklamaları kullanarak siteniz üzeride değişiklikler yapın. Bu şekilde bunlar aklınızda kalıcı hale gelecektir. Eğer farkettiyseniz kısa bir anlatım yaptık. Sıkılmanızı istemeyiz.
<a> Etiketi
<a> etiketi önemli etiketlerden biridir. Bunu unutmamanız gerekir. Çok özelliği vardır. Bir yazı kümesi oluşturur. Örneğin:
<a<SkyCoa<a> => SkyCoa
Herhangi bir fark olmaz fakat bir küme oluşturup düzeni sağlar. Aşağıdan kod önizle editörü ile deneyeceğiniz bazı kodlar. Sitenizde bu kodlar ile değişiklik yapın (<a> etiketi içindir):
1.button Buton oluşturmanızı sağlar.
2.fieldset Yazıyı şekil içine alır.
3.textarea Yazıyı büyük bir kutu içine alır.
4.marquee Yazıyı hareketlendirir.
Bu derslik bu kadar. Bir sonraki derste etiketlerin özelliklerini göreceğiz. Zevkli olacak. Sitenize renk katın.
Herhangi bir fark olmaz fakat bir küme oluşturup düzeni sağlar. Aşağıdan kod önizle editörü ile deneyeceğiniz bazı kodlar. Sitenizde bu kodlar ile değişiklik yapın (<a> etiketi içindir):
1.button Buton oluşturmanızı sağlar.
2.fieldset Yazıyı şekil içine alır.
3.textarea Yazıyı büyük bir kutu içine alır.
4.marquee Yazıyı hareketlendirir.
Bu derslik bu kadar. Bir sonraki derste etiketlerin özelliklerini göreceğiz. Zevkli olacak. Sitenize renk katın.
0 Yorum:
Yorum Gönder