1 Web Tasarımı HTML Kodları ve Kullanımları:
1.1 Temel bileşenler: html, head, title, meta ve body
Web tasarımı yaparken bir WEB sayfasının ilk karşılaşacağımız standart bileşenleri şunlardır:
<html> ve </html> : sayfanın başlangıç ve bitişini belirtir.
<head> ve </head> : sayfanın başlık bilgileri 'title', 'meta' vs. buraya yerleştirilir.
<title> ve </title> : sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfada görünmez ama Firefox ya da Internet Explorer bunu sayfayı tanımlamakta kullanır.
<meta> : sayfanın içeriği hakkında www tarayıcılarına bilgi sağlamak, arama motoru ve arama motoruna kayıt için gereklidir.
<body> ve </body> : sayfanın içeriğinin başlangıç ve bitişini belirtmekte ve sayfa hakkındaki genel tanımlamaları yapmakta kullanılır.
Yukarıdaki bu komutların, bir web sitesi içindeki sıraları aşağidaki gibidir. Bir yazı editörü (joe, pico, xedit, edit, notepad vs.) ile ilk örneğimizi yazarsak:
<html>
<head>
<title>Bir HTML Denemesi</title>
<meta name="description" content="html sayfası için bir kullanım örneği"> </head>
<body bgcolor=white>
'Bu sayfa inşa halindedir', ya da 'this page is under construction' web sitelerinde ille de olması gerektiği düşünülen saçma yazılardır. </body>
</html>
Aslında en basit web sayfası şöyle olabilir:
<html>
Benim neyim eksik?
</html>
sondaki '</html>' yi koymasak dahi www sitesi gosterici programı (Firefox, Opera, IE, ...) bunu bir HTML sayfası olarak yorumlayacaklardır.
1.2 Renkler, body, font, ve h1..h6
Önceki örnekte '<body color=white>' diye, aşağıdakinin basitlestirilmiş biçimini kullanmıştık:
<body font=purple bgcolor=#FFFFFF text=black link=blue vlink=#808090>
Burada font ile kullanilan genel yazıların rengi,
bgcolor ile arkaplan rengi,
text ile tanımsız yazıların rengi,
link ile üzerine gelince el hareketi çekilen yazıların rengi,
vlink ile de seçilmis bağların rengi belirlenir.
renk belirtmek için o rengin İngilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGB deki sıraya göre 00-FF arası üç değer kullanılır. Hepsi sıfır ise hiçbir renkten karıştırılmaz. hepsi FF ise her renk maksimum oranda kullanılır ve beyaz elde edilir.
Örneğin salt bir kırmızı #FF0000 ile elde edilir.
<font color=...> ve </font> arasındakı yazılar belirtilen renkte yazılır.
<h1> ve </h1> den <h6> ve </h6> ya kadar standard yazı tiplerinden biri seçilerek yazı yazılır. h1 ile belirtilenler h6 ile tanımlananlardan daha büyüktür.
örneğin:
<html>
<h1>Sayfa başlığı için uygun büyüklükte harfler</h1>
<h4>Bu harfler sanırım yazı için yeterliler</h4>
<h6> Gözleriniz bozuk değilse, ve her gün A vitamini alıyorsaniz bu yazı sizin için okunabilir olmalı.</h6>
</html>
1.3 Yazıları biçimlendirmek: kalın, yatık, ortalanmış, vs. ...
Önceki web tasarımı örneğinde <h1>, <h2>, ... ile yazıların büyüklüklerini ayarlamanın basit bir yolunu görmüştük. HTML web sayfamızın yazılarına biraz daha kişilik kazandırmak için aşağıdaki komutları da kullanabiliriz.
<b> ve </b> arasındaki yazılar koyu görünür.
<i> ve </i> arasındaki yazılar ise italik basılır.
<blink> ve </blink> arasındaki yazılar ise yanıp söner.
<center> ve </center> arasındaki yazılar ortalanır.
<pre> ve </pre> ile sınirlanan yazıların göruntüsünde ayarlama yapılmaz. Yani birden fazla boşluk varsa bunlar bir tane olacak şekilde azaltılmaz.
<p> paragraf başı yapmak için kullanılır.
<br> bir satır atlamak için kullanılır.
<hr> bir çizgi çeker.