Html & Css Dersleri 2 - İlk Web Sitesi

     Html ile bir web sayfası oluştururken bütün yapıyı tagler aracılığıyla kurarız. Tagler için kısaca Html'in yapı taşı diyebiliriz. Örneğin sayfamıza bir resim eklemek istersek resim tagini(img), bir link eklemek istersek link tagini(a), button eklemek istersek button tagini(bu liste çok uzar) kullanırız. Yani kodlamamızın sonunda bir sürü Html tagini belirli kurallar çerçevesinde bir araya getirmiş ve bir web sayfası oluşturmuş oluruz.

     Html'de tagleri küçüktür(<) ve büyüktür(>) işaretleri arasına yazarız (örn : <p> paragraf tagi, <img> resim tagidir). Bir tagin sonlandığını belirtmek istediğimizde, başlangıç tagini birebir yazarız. Tek fark, küçüktür işaretinden sonra "/" ekleriz. Örneğin <p> taginin bitişini </p> tagi belirtir.

     <html> tagi bir web sayfasındaki bütün tagleri kapsar. Yani bir sayfada bulunmasını istediğimiz her şeyi <html> ve </html> tagleri arasına yazarız.

     Her bir web sayfa 2 parçadan oluşur : head ve body. Head kısmı çoğunlukla, bir web sayfasında görüntülenmeyen ancak web sayfasıyla ilgili teknik bilgilerin barındırıldığı yerdir. Arama motorları için keywordler, websitenin başlığı, site açıklamaları vs head kısmında bulunur. Sayfada görebildiğiniz resimler, yazılar, linkler ve diğer elemanlar ise body kısmında bulunur.

     Şimdi notepad'de veya notepad++ 'da yeni bir sayfa açıp biraz Html kodlamaya başlayalım.      

<html>
    <head>
        <title>Burası sayfanın başlığı</title>
    </head>

</html>

     Yukarıda da anlattığım gibi sayfanın içindeki herşey <html> tagleri arasında. İlk ve son satırda <html> tagini açıp kapatıyoruz. Bir web sayfasının <head> ve <body> taglerinden oluştuğunu söylemiştik. Burada henüz <body> tagi kullanmadık. Bu da sayfamızın boş olacağı anlamına geliyor. <head> tagleri arasında kullandığımız <title> tagi, sayfanın başlığını belirtir.

     Bu kodun bulunduğu sayfayı farklı kaydet dedikten sonra kayıt türünü "Hyper Text Markup Language File(*.html, *.htm)" olarak belirleyip bu dosyaya "index" ismini verelim. Bir diğer seçenek de bu dosyayı txt dosyası olarak kaydedip, uzantısını html olarak değiştirmek.

Html Sayfası Kayıt Türü

     Bu işlemin sonucunda index.html adında bir Html dosyamız olacak. Burada "index" adını vermiş olmamız bir tesadüf değil, Html'de başlangıç sayfasının adı başka varyantları olmasıyla da birlikte "index"tir. Sunucular ana sayfayı çalıştırmak istediğinde ilk olarak "index.html" dosyasını arar. Daha fazla bu konuda kafa karıştırmaya gerek yok sanırım şimdilik.

     Bu index.html dosyasını bulup çift tıkladığınızda bilgisayarınızdaki varsayılan tarayıcıda(örneğin bende Google Chrome) bu sayfayı açacaktır. Eğer açmaz da bir program seçmenizi isterse siz de tarayıcınızı seçin.

Html İle İlk Web Sitesi

     Yukarıda da bahsettiğimiz gibi, başlığı "Burası sayfanın başlığı" olan boş bir sayfa oluşturmuş olduk.

     Tabi ki normal şartlarda boş bir web sayfası istemeyiz, dolayısıyla her sayfada <body> tagi de olur. Şimdi kodlarımıza <body> tagi ekleyelim.     

<html>
    <head>
        <title>Burası sayfanın başlığı</title>
    </head>
    <body>
        Burası body
    </body>
</html>

     Şimdi bu sayfayı web tarayıcınız aracılığıyla görüntülerseniz sayfanın içinde de bir şeyler yazdığını göreceksiniz.

İlk Web Sayfası

     H Tagleri

     Bir web sayfasında tüm yazıların aynı boyutta olmasını istemeyiz. Örneğin yazının başlığı diğer yazılardan daha büyük olmalı; alt başlık, ana başlıktan küçük ama yine normal yazıdan büyük olmalı. Html'de bunu kolaylıkla yapmamızı sağlayan tagler var. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tagleri, Html'de yazı boyutlarının farklılaşmasında kullanabileceğimiz taglerdir. <h1>, tagler arasındaki en büyük boyutlu olandır ve genellikle ana başlıklarda kullanılır. <h6> ise en küçüktür.         

<html>
    <head>
        <title>Burası sayfanın başlığı</title>
    </head>
    <body>
        <h1>Burası h1</h1>
        <h2>Burası h2</h2>
        <h3>Burası h3</h3>
        <h4>Burası h4</h4>
        <h5>Burası h5</h5>
        <h6>Burası h6</h6>
    </body>
</html>

     Bu kodun çıktısı şu şekilde olacaktır : 

Html H Tagleri

     H etiketleri ile kullanıcılara okuma kolaylığı sunduğumuz gibi, bu etiketler arama motorları için de anlamlıdır. Örneğin sayfadaki yazının bir bölümünü <h1> etiketi ile yazdıysak Google bunu ana başlık kabul eder. 

YORUMLAR
Email Adresi *
Görüntülenecek İsim *
Yorum *
Paylaş
  • f