HTML & CSS Dersleri - HTML & CSS Derslerine başlarken...
03.10.2018 00:31:18

HTML ve CSS ilişkisi

Önceki derste bahsedildiği gibi HTML genel yapıyı, CSS ise görselliği tanımlar fakat bundan ileri gitmezler. Daha ilerisi için Javascript & PHP bilmeniz şarttır. Bunları diğer ders kategorilerinden öğrenebileceksiniz fakat HTML ve CSS bilmeden o dersleri takip etmenizin hiç bir anlamı olmayacağı için tavsiye etmiyorum, bu sadece sizi anlamsız bir dünyaya sürükleyerek soğutacaktır. Sonuçta Javascript ve PHP'yi sonuna kadar bilseniz de bunlardan oluşturulan veriyi HTML ve CSS olarak kullanıcıya göndereceksiniz. Bu yüzden web programcılığının en önemli ve temel noktası HTML ve CSS'dir.


Ne Kadar Zor? Başlarken Tavsiyeler

Aslında her kodlama bilgisi gibi bu bilgiler de bir noktada analitik düşünce yapısına dayanıyor. Kodlarınızı basit bir düzende yazmaya gayret gösterin. Başarılı web sitelerinin kaynak kodlarını incelediğinizde çok karmaşık bir düzende yazılmadıklarını fakat akıllı bir düzende ilerlediklerini göreceksiniz.

Eski usül çalışmak çokça etkili olabilir. Sitenizi önce kağıt üstünde çizerek planlayın. Bu çok önemli çünkü daha sonra kodlarınızı yazarken kafanız karışacak bundan emin olun! Yapmak istediğiniz siteyi kağıda çizin ve nereden başlayıp nereye gideceğinizi küçük küçük not edin. Kağıtları karalamak kolaydır fakat onca emekle yazdığınız kodlarınızı silerken içiniz acıyacaktır.


HTML Etiketleri/Tagları

HTML kodları bir takım etiketler içerisine yazılır. Bu etiketler, içerisine yazılan içeriğin özelliklerini belirler ve kullanıcının gözüne görünmez, yalnızca etiketin içeriği, etiketin özellikleri ile görünür. Ayrıca bu etiketlerin iç kısmına başka etiketler de yazılabilir ki HTML etiketleri arasında anne-çocuk ilişkisi bulunmaktadır.


HTML Etiketlerinin Anne-Çocuk İlişkisi

Anne etiket için tanımladığınız bir özellik çocuk için de geçerlidir. Anne etiket silinirse çocuk etiket de silinir. Unutulmamalı ki, çocuk için herhangi bir özellik yazılmadıkça annenin özelliklerini aynen alacaktır. Yani anne etiketin rengini kırmızı yaptığınızda çocuk etiketin içeriği de kırmızı olacaktır. Anne etiketin içeriği ortalandığında çocuk etiketin içeriğinde de ortalama uygulanacaktır.


Etiketler Nasıl Yazılıyor

HTML etiketleri "<" ile başlar, arasına etiketin adı gelir ">" ile açılış sonlandırılır. Kapanışta ise bu sefer "</" ile başlar, arasına aynı etiket adı gelir, ">" ile kapanış sonlandırılır. Bir basit örnek vermek gerekirse;


<etiket>Etiket içeriği</etiket>


Burada dikkat edilmesi gereken konu her etiketin bu şekilde kapatılmamasıdır. Bu, sadece çocuk sahibi olabilecek etiketler için geçerlidir. İlerleyen derslerde bu mantığı daha rahat kavrayacaksınız, bunu şu anda aklınızın köşesinde tutun fakat oraya gelene kadar unutun. Dersin o noktasına gelindiğinde bu konuyu ayrıca anlatacağım. Şimdilik siz tamamının bu şekilde kapatıldığını düşünün.


Etiketlerin Özellikleri Nasıl Belirleniyor?

Etiket özellikleri, açılışın içerisine özellik="değer" biçiminde tanımlanır. Bir etikete birden fazla özellik eklenebilir. Örnek vermek gerekirse;


<etiket width="100" height="200">Etiket içeriği</etiket>


Bu örnekteki width özelliği ve karşısındaki değer, etiketimizin genişliğinin 100 piksel olması gerektiğini bildiriyor. Aynı şekilde height değeri de yüksekliğin 200 piksel olması gerektiğini söylemektedir. Bu özelliklere daha sonra değineceğiz.


En Önce Yazmamız Gereken Etiket(ler)

<!DOCTYPE html> etiketidir. Bu etiket, kapatmanıza gerek olmayan etiketlerden biridir. Çünkü tarayıcıya, okuduğu metnin bir HTML dosyası olduğu mesajını vermekten başka bir işi yoktur, Kullanıcıya görünmez ve bu etiketin çocuğu olamaz.


   

    a) <html> Etiketi


    Daha sonra yazılması gereken etiket <html> ile açılacak ve </html> ile kapatılacaktır. Bu da, HTML dosyamızın başını ve sonunu belirleyecek olan etikettir. Bunun arasına yazılan her şey HTML kodu olarak okunacak ve bu şekilde işlem görecektir. Bazı tarayıcılar için bu etikete gerek yoktur zira eklemeseniz de tarayıcı bunu otomatik olarak ekler. Fakat Apple firmasının tüm diğer ürünleri gibi Safari benzeri bazı huysuz tarayıcılar bu konuda sorun çıkaracağından eklemeniz şiddetle tavsiye edilir.


<!DOCTYPE html>
<html>
    Bundan sonra yazılacak HTML kodlarının tamamı buraya gelecek
</html>

    b) <head> Etiketi

    Türkçe kelime anlamı BAŞ şeklinde tanımlanır. Az sonra göreceğiniz GÖVDEnin üzerinde tanımlanır. Bu etiketin arasına yazacağınız kodlar, genel anlamda tarayıcıya site hakkında bazı tanımlamalar yapacak ve kullanıcıya görünmeyecektir. Sekme resminden tutun da sekme başlığında ne yazacağına, sitenin görünümünü belirleyecek CSS dosyalarının hangilerinin olduğuna kadar tüm görünmeyen tanımlamalar bu etiket altına çocuk olarak yazılır. <head> ile başlar ve </head> ile kapatılır.

        b-1) <title> Etiketi

        Bu etiket head etiketinin altına yazılır ve sayfanın başlığını tanımlar. <title> şeklinde açılır ve </title> şeklinde kapanır. Arasına yazacağınız yazı, sekme ve tarayıcının başlığında görünecektir. SEO (Arama motoru optimizasyonu) için önemli bir etiket olduğunu da belirtmeden geçmeyelim. Kapatılması mecburi olan etiketlerdendir.

       
<title>Site Başlığı Buraya Gelecek</title>
        

        b-2) <link> etiketi
        Bu etiket yardımı ile sitemizin görünümünü oluşturacak görsel CSS dosyalarının yerini tarayıcıya bildiriyoruz. Bu etikete kapatma uygulanması gerekmez. 

        
<link rel="stylesheet" type="text/css" href="stil_dosyasi.css">

        Şeklinde tanımlanır. Tekrar hatırlatmakta yarar var, bu etiketin kapatılmasına gerek yoktur. Buradaki ek tanımları tabir etmek gerekirse;

        rel - Relation/İlgi anlamına gelir. Karşısına yazılan stylesheet değeri ise bu değerin bir stil tanımı olduğunu göstermektedir.

        type - rel içerisinde tanımlanan stilin bir CSS stili olduğunu tanımlamaktadır.

        href - dosyanın bulunduğu yolu ve dosya adını tanımlamaktadır.


    Şu ana kadar gördükleriniz, standart bir HTML sayfasının head etiketi içerisine yazmanız gerekenler konusunda yeterli bilgiyi içermektedir. Aşağıda standart bir head etiketinin daha önce öğrendiklerinizle birleştirilmiş halini görebilirsiniz.

     
<!DOCTYPE html>
<html>
    <head>
        <title>WebSanat.net</title>
        <link rel="stylesheet" type="text/css" href="stil_dosyasi.css">
    </head>
</html>


    c) <body> Etiketi

    Body, GÖVDE anlamına gelmektedir. Bu etiket yardımıyla sitemizin göze görünecek kısımları yazılmaya başlanır. <body> şeklinde açılır ve </body> şeklinde kapanır. Bu etiket aslında web sitemiz için en önemli etiket olmasına rağmen rahat anlaşılabilmesi için bu derste sadece nasıl tanımlandığı çok kısa bir şekilde anlatılacak. Bundan sonraki tüm dersler, %90 oranında bu etiketin içine yazılacak (çocuk etiket olarak) olan elementlerden oluştuğu için buraya yazılacak kadar kısa değildir. Şimdilik genel anlamda bir toparlama yapacak olursak;


<!DOCTYPE html>
<html>
    <head>
        <title>WebSanat.net</title>
        <link rel="stylesheet" type="text/css" href="stil_dosyasi.css">
    </head>
    <body>
        GÖVDEYE YAZILACAK VE KULLANICILARIN GÖZÜNE GÖRÜNECEK TÜM KODLAR BURAYA YAZILACAK VE BURADA ŞEKİLLENDİRİLECEK.
    </body>
</html>

    Sonraki derste body etiketinin içine gireceğiz.



İçerikle İlgili Görüş & Sorularınız

Bu içerikte hiç yorum yok, neden ilk yorumu siz yapmıyorsunuz?
Yorum yapabilmek için giriş yapmalısınız, üyemiz değilseniz kayıt olmak için tıklayın
+90 555 141 00 25
info@websanat.net
Cemalpaşa Mah. Toros Cad. 63007 sok. Doktorlar Sitesi No:202 Seyhan/ADANA