e-mail: discover41@windowslive.com

HTML & CSS

HTML dosyası nedir?

    HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
    Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
    Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
    Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
    Bir HTML dosyası basit bir text editör ile oluşturulabilir.

Denemek İster misiniz?

Eğer Windows kullanıyorsanız not defterini açın.

Eğer MAC kullanıyorsanız SimpleText programını açın.

Eğer OSX kullanıyorsanız, TextEdit'i açın ve aşağıdakileri yapın: "Format" menüsünü açın ve "Rich Text" yerine "Plain Text" seçeneğini seçin. Sonra "Text Edit" menüsünün altında bulunan "Preferences" penceresini açın ve "Ignore rich text commands in HTML files" seçeneğini seçin. Eğer bu değişiklikleri yapmazsanız HTML dosyasınız büyük ihtimalle çalışmayacaktır!

Aşağıdaki metini açtığınız editör içerisine yazın:

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>

Dosyayı "sayfam.htm" olarak kaydedin.

Oluşturduğunuz dosyaya çift tıklayın. Dosya tarayıcınızda açılacaktır.
Örneğin Açıklaması

HTML dökümanınızdaki ilk tag (etiket) <html>'dir. Bu etiket tarayıcınıza bir HTML dosyasının koşturulacağını söyler. HTML dökümanınızdaki son tag (etiket) </html>'dir. Bu da tarayıcınıza HTML dosyasının sonunun geldiğini söyler.

<head> ve </head> etiketleri arasında kalan kısım başlık bilgilerini içerir. Başlık bilgileri tarayıcı penceresinde görüntülenmez.

<title> ve </title> etiketleri arasında kalan kısım dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.

<body> ve </body> etiketleri arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısımı içerir.

<b> ve </b> etiketleri arasında kalan kısım ise koyu (bold) biçimde gösterilir.
HTML Editörleri Hakkında Not:

HTML dosyalarınızı kolay bir şekilde WYSIWYG (what you see is what you get), FrontPage veya Dreamweaver ile de hazırlayabilirsiniz.

Bununla beraber, eğer profesyonel anlamda HTML çalışmak istşyorsanız mutlaka not defteri (notepad) kullanmanızı tavsiye ederiz.


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

CSS HAKKINDA :
Neye İhtiyacın Var?
Bu siteye devam etmeden önce temel düzeyde HTML/XHTML bilmen gerekiyor.

Şanslısın! Onun için de daha önceden bir şeyler yazdık: HTML Dersleri.

CSS Nedir?
CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası.

Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar.

Stiller HTML 4.0'da bir problemi çözmemizi sağlar. Siteyi görselleştirme!

HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.

Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.

CSS Büyük Bir Problemi Çözüyor!
HTML ilk ortaya çıktığında siyah beyaz bir televizyondan farksız değildi. Her zaman aynı kodlar kullanılır ve aynı biçimde yazılar görünürdü. Örneğin bir H1 elementiyle başlık yazıp farklı bir yerdeki H1 elementini değişik bir renk ve tarzda gösteremiyorduk.

HTML 3.2 ile elementler bazı yeni özellikler kazandı. Örneğin FONT elementine color özelliği eklendi. Tabi bu da tam bir çözüm değildi.

Ne zaman ki HTML 3.2 çıktı, dünya değişti! Artık CSS vardı, üstelik günümüzde tüm tarayıcılar CSS desteklemektedir!

CSS Hayat Kurtarır
Biraz abartı mı oldu? Ancak şurası kesin. İşimizi kolaylaştırıyor. CSS, HTML de kullanılan elementlerin (tag) nasıl görüneceğini bildirir. Bu doğru. Peki ya başka?

Stiller css uzantılı dosyalara kaydedilerek kullanılır, görüntüyü hızlı ve etkili bir şekilde değiştirmenize yarar, düzenlemesi kolaydır, web sitenize kod fazlalığı yaratmaz. İşte bu kadar marifetli.

0 yorum: