Bölüm 8 (HTML Dersleri)
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 denetim masasından 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’de <font> etiketi kullanılmamalı
<font> etiketi HTML 4’te kalmış bir etikettir ve HTML5’te kaldırılmıştır.
Düny Geniş web konsorsiyumu yani W3C <font> etiketini önerilerinden kaldırmıştır.
HTML 4’te stil dosyaları(CSS) şablonu tanımlamak ve HTML elementlerinin özelliklerini göstermek/sunmak için kullanılır.
<p>
<font size=”5″ face=”arial” color=”red”>
Bu paragrafın fontu Arial, boyu 5, ve rengi kırmızıdır.
</font>
</p><p>
<font size=”3″ face=”verdana” color=”blue”>
Bu paragrafın fontu Verdana, boyu 3, ve yazının rengi mavidir.
</font>
</p>
Style ile kullanım- Bu işin doğrusu ve HTML5’te olması gereken
Bu alta yazacağım örnekleri en üstte anlattığım şekilde denemelisiniz.
<html>
<body>
<h1 style=”color:blue”>Bu bir başlık</h1>
<p style=”color:red”>Bu da paragraf.</p>
<p style=”font-family:verdana;font-size:110%;color:green”>Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.Bu içinde biraz yazı olan paragraf.</p>
<h1 style=”font-size:200%”>Bu bir başlık</h1>
<p style=”font-size:110%”>Bu bir paragraf.</p>
<h1 style=”font-family:verdana”>Bu da bir başlık</h1>
<p style=”font-family:courier”>Bu da bir paragraf.</p>
</body>
</html>
Bunların hepsini tek tek yazıp denemeniz gerekli ki hem eliniz alışsın hem de aradaki farkları görebilesiniz. Style etiketi ile kullanım doğru. Fakat HTML 5’te stiller tamamen CSS içinde istenilmekte ki sayfanızdaki etiketler dolayısıyla sayfanız şişmesin yani ağır açılmasın.
HTML dersleri bittikten sonra CSS , Javascript ve jQuery anlatımları yapacağım. Böylece siz de web arayüz tasarımcısı olabilirsiniz. Ama dreamweaver ve photosop da bilmeniz gerekli bu durumda. Onlar için de eğitimler paylaşmayı düşünüyorum aralarda.
Bu ders de bu kadar! Yararlı olması dileğiyle…
Bu da w3’ün web editörü, bilgisayarınızda beceremediyseniz buradan halledebilirsiniz. Tıklayın buraya