Bölüm 3 (HTML Dersleri), Elementler, iç içe elementler, boş elemanlar
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.
HTML Elemanları(Elements)
HTML belgeleri HTML elemanları ile tanımlanır. Bir HTML Elemanı başlangıç(açılış) ve kapanış(son) tag’ı(etiket) olan her şeydir. Yani
<p>Artık bildiğiniz gibi bu paragraf etiketi ve bu yazı da eleman içeriği</p>
<a href=”default.htm”>Bu da bir link(bağlantı) ve bunu da öğrendiniz bir önceki derste ve bu yazı da eleman içeriği. Yani bağlantı olarak bu yazı gözükür.</a>
<br />
Çeviride gördüğünüz üzere bir açılış etiketi, eleman içeriği ve kapanış etiketi HTML elemanını oluşturmakta. İki etiket arası da html elemanının içeriği yer alır. br etiketinin öznitelikleri yoktur. Öznitelikler bir sonraki derste anlatılacaktır.
HTML Elemanı Söz dizimi
Bir HTML elemanı başlama(açılış) tag’ı(etiketi) ile başlar ve son(kapanış) etiketi ile biter. Eleman içeriği başlama ve kapanış etiketlerinin arasındaki herşeydir. Bazı HTML elemanlarının içeriği yoktur. Boş elementler, başlama etiketinde kapanır. HTML elemanlarının çoğunun öznitelikleri vardır.
Dediğim gibi br etiketi(satır atlamak için kullanılır) başlar ve başlama etiketinde bir boşluk ve / ile kapanır. Bu aslında HTML5 ile gelen bir özellik. Eskiden kapatmaya gerek duymazdık. XHTML’de zaten tüm açılan etiketler kapanmak zorunda. Öznitelikler bir sonraki dersin konusu, ama değinmem gerekirse, link vermek için kullandığımız <a href= ‘teki href bir özniteliktir. Ana dizin içindeki dosya yolunu gösterir.
İç içe(nested) HTML Elemanları(öğeleri, elements de denir)
HTML elemanlarının çoğu başka HTML elemanlarını içerebilir. HTML belgeleri iç içe HTML elemanlarına dayalıdır.
Bir HTML belgesi ve iç içe html elemanlarının örneği;
<html>
<body>
<p>Bu bir paragraf</p>
</body>
</html>
bu örnek 3 HTML elemanı içermektedir. <p> elemanı; HTML belgelerinde paragraf tanımlar. Açılış ve kapanış etiketi vardır. Elemanın içeriği bu bir paragraf yazısıdır. <body> elemanı; HTML belgesinin gövdesini tanımlar. Açılış ve kapanış etiketi vardır. Bir p elemanını içerir yukarıda gördüğünüz gibi.<html> elemanı; tüm HTML belgesini tanımlar. Başlama ve son etiketine sahiptir. body ve p elemanları html’nin eleman içeriğidir.
Çeviride her şey açık. Yine de açıklamaya ihtiyaç duyarsanız aşağıya yazabilirsiniz.
Kapanış Etiketini Unutmayın!
Bazı html elemanları kapanış etiketini unutsanız bile tarayıcıda düzgün görünecektir.
<p>Bu bir paragraf
gibi… Bunu tarayıcı düzgünce gösterecektir, çünkü kapanış tag’ı burada isteğe bağlı düşünülmüştür. Yine de buna güvenmemelisiniz. HTML elemanlarının çoğu beklenmeyen sonuçlar doğurabilir eğer / ‘sız kapanış etiketini kullanmayı unutursanız.
Boş HTML Elemanları
Boş html elemanları, eleman içeriği olmayan html elemanlarıdır. <br> etiketi boş bir elemandır kapanış etiketi olmaksızın ama bir ipucu; XHTML’de ve XML’de tüm elemanlar kapanmalıdır. Boş etiketler de başlama etiketleri içerisine / koyarak kapanırlar.
HTML ipucu: Etiketleri küçük yazın
HTML etiketleri yazım boyutuna hassas değildir. <P> ‘etiketini anlamı <p> ‘dir HTML’de. Çoğu web sitesi de büyük boy kullanır html etiketlerini.
W3Schools (ve Ne Fark Eder ki! :p) küçük boy yazım boyutu kullanıyoruz. Çünkü W3C(dünya geniş web konsorsiyumu) HTML 4’te küçük boy yazımı öneriyor. Talepleri de XHTML’de küçükboy yazılmış etiketlerdir.
Diyerek bu dersimiz de burada bitiyor. Bir sonraki dersimiz HTML (attributtes) Öznitelikleri olacaktır. Ama biz bundan sonra özellik olarak adlandıralım bunu.
Ve bugünkü dersin ekran görüntüsü ve kodların yazımının ekran görüntüsü…
Resime bir defa tıkladığınızda dosyaya dosyadaki görüntüye tıkladığınızda tam boyuta ulaşabilirsiniz.