HTML HEAD BODY Tagları Nedir Kullanımı
İlk dersimizde ilk kodumuzu yazmış ve başarının ayak seslerini hissetmiştik.
Şimdi o kodumuzun içeriğini hatırlıyor ve açıklamalar kısmına geçiyoruz.
<!-- www.kodyap.com --> <!-- HTML Dersleri--> <!-- Ders 1--> <!-- BASLANGIC --> <!DOCTYPE html> <html> <head> <title>Merhaba Dunya - Kodyap.com</title> </head> <body> <h1>Merhaba Dunya</h1> Yasasin bu benim ilk sayfam ! </body> </html> <!-- BITIS --> <!-- www.kodyap.com -->
Öncelikle Bilinmesi Gerekenler
- Yukarıda gördüğünüz <html> <body> gibi “<..>” arasına yazılmış yazılar TAG dediğimiz HTML etiketleridir.
- Bu etiketler belli bir düzen içerisinde yazılmalıdır. Çünkü bunlar sayesinde yazılım neler yapacağını anlar.
- Bir işlem yapacağımız zaman önce ona ait etiketi açmalıyız. Örn: <html>
- Açılan her etiket mutlaka kapatılmalıdır. Örn: </html>
Şimdi satır satır size yukarıdaki kodları anlatıyorum, sizden tek isteğim bu dersi iyi anlamanız.
Arkadaşlar bakın her şey bu temel üzerine kurulu.
Yukarıdaki kodlara bakıyoruz
1 – 4 arası ve 24. 25. satır açıklama (yorum) kısmıdır ve sadece kaynak kodlarda görüntülenir. Amacı yazdığınız kodla ilgili not almaktır. Sürekli geliştireceğiniz bir sistemde, ne yaptığınızı hatırlamınız açısından çok iyi bir seçenektir. Ama olmazsa olmaz değildir.
6. satır <!DOCTYPE html> önemlidir. Sayfanızın html5 kullandığını söyler. Sayfanın en başında yer almalıdır.
7. satır ve 22. satıra bakalım: <html> </html> görürsünüz. Bizim artık kodlamamıza başlayacağımızı anlatır. Yazacağımız tüm kodlar bu taglerin arasına yazılır. html kodu ilk satırlarda açılır ve en son satırda kapatılır.
9. satırda <head> etiketi (tagı) açılmış ve 13. satırda </head> ile kapatılmıştır. Bu kısımın içeriğine sayfanızın Bilgilerini girersiniz. Genelde bunlara meta tag olarak bilir. Sayfa adı, açıklaması, yazarı, oluşturma dahili.. vs. Meta taglar önemlidir. Bununla ilgili ders ayrıca verilecektir.
Dikkat ederseniz 11. satırda Bizim başlık etiketi dediğimiz <title> </title> etiketi vardır ve bu <head> </head> arasına yazılmıştır. <title> </title> arasına yazacağınız her şey sayfanın başlığı olacaktır. Bu başlık arama motorlarlarınca ve sitenize gelen ziyaretçilerin browserlarındaki sekmelerde gördüğü yazıdır.
Özet 1: Bu kısma kadar, sayfamızın html5 özelliğinde olduğunu belirttik, Html kodlarımızı yazmaya başlıyoruz dedik ve <html> tagını açtık ve daha sonra unuturuz diye hemen </html> tagını kapattık ve sayfamızın başlığını ve varsa diğer bilgileri ayarlamak için <head> etiketini açtık ( ve </head> ile kapattık) ve sayfamıza bir başlık verdik <title>Merhaba Dunya – Kodyap.com</title> görüdüğünüz üzere başlığı da <title> </title> arasına yazdık.
Şimdi sıra sayfamızın gövdesini oluşturmada. İşte tüm kodları yazacağımız alan burası. Bu alana yazdıklarımız çıktı (output) olarak ziyaretçileriniz tarafından görülecektir.
Bu alan <body> ile başlayan ve </body> ile biten alandır. ( daha önce anlatmıştım, her bir etiketin açılışını yapıyorsak, kapanışını da yapmalıyız.)
Yukarıdaki kodlara bakarsak 15. satırda <body> etiketini açmışız ve 20. satırda </body> yazarak etiketi kapatmışız. Bizim kodlarımızı yazıp, çalıştıracağımız alan burası olacak.
Hadi bakalım bu etiketlerinin arasında neler var.
17. satırda <h1>Merhaba Dunya</h1> burada gördüğünüz üzere <h1> etiketi var. Bu bir başlık etiketidir ve normal şartlarda kalın bir şekilde yazılarınızı yazar.
18 satırda da “Yasasin bu benim ilk sayfam !” şeklinde bir yazı var ki istersek etiket kullanmadan yazı da yazılabileceğini görmeniz açısından önemlidir.
Şimdi size altta en sade kodları veriyorum, bunu kalıp olarak düşünebilrisiniz. HTML ile kod yazarken bunu hep kullanacağız.
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
İşte kalıp budur, dikkat ederseniz açıklama yazılarını kaldırdım.
işte bu 8 satır bizim için çok önemlidir.
Her projemizde bunların içini dolduracağız.
Not: Vaktimizi en çok <body> </body> arasına yazacağımız şeyleri öğrenmekle geçireceğiz.
Çünkü bu taglerin arasına yazılan kodlarla istediğimizi elde edeceğiz. Kodlar bu alanda çalışacak.
KODYAP Web Editörü ‘ne dikkat ettiyseniz ilk kutuda HTML (body) yazar. Burada <body> arasına yazılan kodların denenmesi için özel oluşturulmuştur.
Diğer derslerimizde görüşmek üzere.
Related Posts
About The Author
