HTML
KURSU
( HYPER
TEXT MARKUP LANGUAGE )
HTML, Web sayfaları için temel anlamlandırma dilidir. Kullanımı kolay ve esnek bir dildir. Öğrenilmesi de kolay ve zevklidir.
Bir web sayfasını HTML ile kod yazarak yapmak için illaki çok gelişmiş editör programlarına ihtiyacınız yoktur. Herhangi bir kelime işlemci programı ( MS Word ) ile veya Windows'ta Başlat - Programlar - Donatılar'da yer alan Notepad ile bile yapabilirsiniz.
HTML için standartları " World Wide Web Consortium " adındaki internet standartları konsorsiyumu belirlemektedir.
HTML ile ilgili son gelişmeleri öğrenebilmeniz için " World Wide Web Consortium " un web sitesini ziyaret edebilirsiniz.
Sayfa Hazırlama
HTML ile ilk sayfamızı
oluşturmaya başlayalım. Yapacağınız sayfaları içinde barındıracak bir
klasör oluşturalım önce. Adı da " deneme " veya sizin seçeceğiniz
herhangi bir şey olabilir.
Windows' da
bulunan Notepad' i kullanarak sayfalar yapacağız. Notepad' de Başlat
menüsünden ulaşabilirsiniz (Başlat/Programlar/Donatılar/Notepad).
Şimdi Notepad' i açtıktan sonra aşağıdaki resimde görülen tagları ve
yazıyı yazalım.
HTML
Tag' ı sayfanın bir html dokümanı olduğunu belirtir. Sayfanın bitimi tag sonlandırılır. Bazı
tag' lar açılıp sonlandırılırken, bazı tag' lar tek başına da
kullanılabilir.
HEAD tag' ları arasına
yazılan şeyler sayfada görüntülenmez. Sayfa hakkında browser'
lara ve
arama motorlarına bilgiler veren nesneler yer alır. Örneğin sayfanın
başlığı TITLE tag' ları arasına yazılır. Bu browser ' ınızın üst
kısmındaki mavi çubukta görüntülenir. Aynı zamanda sayfanız bookmark
yapılığında, yani sık kullanılanlar listesine eklendiğinde,
sayfanızın başlığı ile görüntülenir. Bu yüzden çok uzun başlıklar
vermemek daha mantıklıdır. Başlıklarda türkçe karakterde rahatlıkla
kullanabilirsiniz. Sayfanıza herhangi bir başlık vermezseniz
sayfanız " Untitled Page " , " New Page " gibi isimlerle otomatik
olarak adlandırılır.
BODY tagları arasına
yazacağımız her şey browser tarafından görüntülenir.
Tüm bu yazdıklarımızdan sonra sıra
sayfamızı kaydetmeye geldi. Notepad menüsünde yer alan " Dosya "
yazan yere girip, farklı kaydet seçeneğini seçiyoruz. Sayfamıza bir isim vermemiz gerekiyor. Biz örneğimizde
sayfamızı " ilksayfam.html " olarak adlandırdık. Bu noktaya dikkat edin.
Sayfamızın adını yazdıktan sonra uzantısını " html " olarak
yazıyoruz. Bu " htm " de olabilir. Bu uzantı sayfanızın bir web
sayfası olmasını sağlayacaktır. Artık
sayfamızı kaydettik. Şimdi dosyamıza çift tıklayalım ve
bilgisayarımızdaki geçerli browser' da yaptığımız ilk deneme
sayfasını görüntüleyelim. Eğer her şeyi doğru yaptıysanız sayfanız
browser' ınızda görüntülenecektir.
FONT TAG' I VE PARAMETRELERİ ( ALT UNSURLARI ) :
METİN BİÇİMLENDİRME 1
<font face="..........." size="...." color="#......" >
FACE = Fontun tipi bu parametre
ile belirlenir. Herhangi bir font tipi brlilemezseniz borwserınız
kendi default font tipi ile sayfanızı görüntüler. En çok bilinen
font tipleri Tahoma, Verdana, Arial, Times New Roman, MS Sans Serif,
Comic Sans MS 'dir. Sayfanızdaki yazılarınız için dikkat etmeniz
gereken en önemli etken fontun yaygınlığıdır. Yukarıda saydığım
fontlar Windows'da bulunan standart fontlardır. Siz herkesde
bulunmayacak bir font seçerseniz o font diğer bir bilgisayarda yok
sayılacak ve kendi default fontu ile yazılar görüntülenecektir.
Bir başka önemli noktada ihtiyacınıza göre
font seçimidir. Çünkü her fontun kendine özgü özellikleri
bulunmaktadır. Arial genelde hatları sade bir fonttur. Tahoma ve
Verdana özellikle küçük boyuttaki yazılarda daha iyi sonuç verir.
Verdana yazı tipi tahomaya çok benzemesine rağmen harfler arasındaki
açıklık bir miktar daha fazladır. Bu okumayı kolaylaştırır. Ama aynı
zamanda kelimeleri de uzatır. MS Sans Serif ise daha mikro yazılar
için iyi bir seçimdir. Comic Sans MS, daha çok ciddeyeti az olan
eğlenceli yazılar için kullanılabilecek bir font tipidir.
YAZI TİPLERİ İLE İLGİLİ ÖRNEKLER
Arial
Arial Arial Arial
Tahoma Tahoma Tahoma Tahoma
Verdana Verdana Verdana Verdana
MS Sans
Serif MS Sans
Serif MS Sans
Serif MS Sans
Serif
Times New
Roman Times
New Roman Times New Roman Times New Roman
Comic Sans MS Comic Sans MS Comic Sans MS Comic Sans MS
SIZE = Bu parametre ile fontun büyüklüğü belirlenir. Fontlar için büyüklükler 1 ve 7 arasındadır. Daha küçük yazılar için - 1 - 2 - 3 ... - 6 kullanılırken, daha büyük yazılar için +1, +2, +3 ... +6 kullanılabilir. Fontun nerede ne büyüklükte olacağı ihtiyacınıza göre değişir.
Bir numaralı büyüklük (
size="1" )
İki numaralı büyüklük
( size="2" )
Üç numaralı büyüklük
( size="3" )
+ 1 numaralı
büyüklük ( size="+1" )
COLOR = Fontunuzun yazı
rengini bu parametre ile belirlersiniz. color="#FFFF00" gibi altı
haneli 16 lık bir renk sistemdir. Buradaki renk kodlarına RGB renk
kodları denir.
SARI
KIRMIZI
YEŞİL
MAVİ
MOR
BEYAZ
Sayfımıza ekleyeceğimiz başlıklar için aşağıdaki başlık imleri kullanabilir. Başlıklar 1 den 6 ya kadar farklı boyutlardadır. Başlıklardan önce ve sonra birer satır otamatik olarak boş kalır. Ayrıca başlıklar otamatik olarakda kalın yazı tipinde olurlar.
METİN BİÇİMLENDİRME 2
Sayfa içerisine yazdığımız yazıların aşağıdaki taglar ile nasıl şekillendirildikleine bakalım
<b> ... </b>Kalın Yazı : Bu taglar arasına yazılan yazılar kalın olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar kalın olarak gösterilir.
<b>Bu yazı kalın gösterilecek</b>
Bu yazı kalın
gösterilecek
<strong> ...
</strong>
Kalın Yazı : Bu taglar arasına yazılan yazılar kalın olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar kalın olarak gösterilir.
<strong>Bu yazı kalın gösterilecek</strong>
Bu yazı kalın gösterilecek
<i> ... </i>İtalik ( Sağa yatık ) Yazı : Bu taglar arasına yazılan yazılar sağa yatık ( italik ) olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar sağa yatık olarak gösterilir.
<i>Bu yazı sağa yatık gösterilecek</i>
Bu yazı sağa yatık
gösterilecek
Altı çizili yazı : Bu taglar arasına yazılan yazılar altı çizili olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar altı çizili olarak gösterilir.
<u>Bu yazı altı çizili gösterilecek</u>
Bu yazı altı çizili
gösterilecek
Ortadan çizgili yazı : Bu taglar arasına yazılan yazılar ortadan çizgili olarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar ortadan çizgili olarak gösterilir.
<s>Bu yazı ortadan çizili gösterilecek</s>
Bu yazı ortadan
çizili gösterilecek
SAYFA
DÜZENİ
<p>
Paragraf :Yazılarımızda paragraf vermek istediğimizde bu tagı kullanırız. Bir satır boşluk bırakarak yeni bir satırdan yazıya devam etmemizi sağlar.
<br>Bir alt satıra geçmek
:Yazımıza bir alt satırdan devam etmek istediğimizde bu tagı
kullanırız. Bir satır boşluk bırakmadan hemen alt satırdan yazıya
devam etmemizi sağlar.
<hr>
Yatay çizgi ( Horizontal Line ) :sayfa içerisinde yatay
çizgiler kullanmamızı sağlayan tag' dır. Genellikle uzun yazılar
içeren sayfalarda karmaşayı önlemek için kullanılır.
<center> ... </center>
Yazıyı ve nesneleri ortalamak : Bu taglar arasına yazılan yazılar ve nesneler sayfada veya hücre içerisinde ortalanarak gösterilir. Tag açıldıktan sonra belli bir yerde kapatılmazsa sayfanın kalanında yazılar ortalanarak gösterilir.
<center>Bu yazı ortalanır</center>
Bu yazı ortalanır
Yazı ve nesnelere konum vermek : Bu tag ile herhangi bir yazının veya sayfa öğesinin konumu belirlenir. Sağda, solda veya ortada olması bu tag ile belirlenebilir.
<div align="right">Bu yazı sağda yer alır</div>
Bu yazı sağda yer alır
<div align="left">Bu yazı solda yer alır</div>
Bu yazı sağda yer alır
<div align="center">Bu yazı ortada yer alır</div>
Bu yazı ortada yer alır
BAĞLANTILAR
Web sayfalarımızın etkileşimli olması
için vazgeçilmez unsurlardan biri, " bağlantılar ". Şimdi
bağlantılar ile nasıl bir saydan diğer sayfaya atlandığını veya
nasıl bir sayfa öğresine tıklayarak diğer bir öğeye atladığımızı
görelim.
Basit bir link : <a
href="sayfa.html">SAYFA</a>
Bu linke yani bağlantıya
tıkladığımız zaman " sayfa.html " adlı dökümana
atlayacağız.
Şimdi bir örnek yapalım. <a href="baglantilar.html>BAĞLANTILAR</a>
Şimdi bu linke tıkladığınız zaman şu an okumakta olduğunuz sayfa yeniden görüntülenecektir.
Sizde kendi kaydettiğiniz sayfaya vereceğiniz bir linkle bu işi halledebilirsiniz.
Resimlere link : <a
href="resim.jpg">RESİM</a>
Gördüğünüz gibi sadece resmin
adını yazmamız yeterli.
Dosyalara link : <a href="dosya.zip">DOSYA</a>
Bu bağlantı türü de
diğerlerinden farklı değil. Buradaki linke tıkladığınızda dosya
bilgisayarınıza inecektir.
Başka klasörlere link :
<a href="klasor/sayfa.html">SAYFA</a>
Dosyanın içinde
bulunduğu klasör ve dosya adı yazılarak yapılır.
Bir web
sayfasına link : <a href="http://www.websayfasi.com">WEB
SAYFASI</a>
Resim kullanarak link : <a href="wallpaper.html"><img
src="wallpaper.jpg"></a>
Resimli Linklerde çerçevi kaldırmak : Resim
kullanarak oluşturulan bağlantılardaki çerçeveler göze hoş
gelmeyebilir. Bu çerçeveleri kaldırmak için img takısı içindeki
border="..." değerini " 0 " olarak vermemiz yeterli.
Bağlantıları
farklı sayfada açmak : Sitemizdeki bazı linklerin içinde
bulunduğu sayfa yerine başka bir sayfada açılmasını
isteyebilirsiniz. Bu durumda bağlantı tag' ımızın içinde
target="_....." özniteliğini kullanacağız. Linkimizin yeni bir
pencerede açılması için bu özniteliğin içerisine yazmamız gereken
değer "_blank" tır.
<a href="tasarim.html"
target="_blank">WEB
TASARIMI</a>