EVET, nihayet bir Web sunucusunda kendinize ait bir alan elde ettiniz ve Web aracılığı ile başkalarına söyleyecek çok şeyiniz var. Peki bir Web sayfasını tasarlamaya nereden başlamalı? Öğrenmeniz gereken temel dilin HTML (Hypertext Mark-up Language) olduğunu belirtmiştik. Bu dil aslında, normal metni, hypertext adı verilen ve web browser'larla görüntülenmeye uygun metin haline dönüştüren bir kodlar silsilesi. Diğer bir deyişle HTML, basit bir belgeyi alıp içine bu belgenin sayfa düzeni ve metin biçimleri ile ilgili bilgiler yerleştirmenin ve bu belgeyi diğer metin (ve/veya grafik) içerikli belgelerle ilişkilendirmenin yoludur.Web'de yayınlanmak üzere belgeler hazırlarken, HTML kodları ile metinlerinize vereceğiniz
biçimler belirteç (İngilizce adı ile mark-up veya tag) adını taşır. Bunlar metnin çeşitli yerlerinde, ' <' ve ' >' şeklindeki parantezlerin arasına yerleştirilen kodlardır. Bunlar arasında diğer Internet sayfalarına (veya URL'lere) geçişi sağlayan ‘link'ler de bulunabilir.HTML bir dil olarak adlandırılsa da, HTML belgelerinin (kısaca Web sayfalarının) hazırlanması klasik bilgisayar dilleri ile
programlama yapmaya pek benzemez. Daha çok kelime işlemcilerle çalışmaya benzer. Ancak burada
yazıtipi büyüklüğünü ayarlamak, bir metni kalın veya italik yapmak için menü komutlarını
kullanmaz, bunları metnin başına ve sonuna koyduğunuz kodlarla belirlersiniz. (WordPerfect ile
çalışanlar bunu kolayca anlayacaktır, çünkü bu kelime işlemcide yazdığınız metinlerin biçim
kodlarını da Reveal Codes komutu ile görüntüleyebilirsiniz.) Metni ve bu kodları nerede yazacağız
diyorsanız, başlangıçta Windows'un Not Defteri fazlasıyla yeterli olacaktır.
Bu kısa girişten sonra bir örnek ile HTML
kodlarını kullanmaya başlayalım. Diyelim ki elimizde şöyle bir metin var:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
http://www.erenet.net
Bu metni HTML kodları ile şöyle yazarsak:
Düşünde bile
göremez,
işler,
Düşlerin gördüğü işleri.
Web browser'da
aşağıdaki gibi bir görüntü elde ederiz:
Düşünde bile göremez işler,
Düşlerin gördüğü işleri.
Bu örnekte ve belirteçleri Web browser'a aralarındaki metni kalın (bold)
göstermesini söyler.
belirteci ise satır başı verilmesi gerektiğini. Bunlar gibi başka pek çok belirteç var ama güzel bir Web
sayfası tasarlamak için başlangıçta öğrenmeniz gereken belirteç sayısı 30-40 kadardır.
Profesyonelleştikçe yeni belirteçler kullanmaya başlayabilirsiniz.
Bir de yazdıklarınızın düzgün görünmesi için her html dosyasının başında:
sonunda:
belirteçlerinin bulunmasına dikkat edin. Bunlar sayfanın
başını sonunu belirlemek için gerekli belirteçlerdir. Koymazsanız, Web browser'ınızda metin
belirteçleri ile birlikte görünebilir.Bu örnekteki belirteçleri kendiniz denemek istiyorsanız, Not
Defteri'ne istediğiniz metni bu belirteçleri kullanarak girin. Belgeye bir isim ve htm soyadını
('te html soyadını da kullanabilirsiniz) vererek kaydedin. Sisteminize bir Web browser
yüklü ise htm soyadlı bu belgenin üzerine çift tıkladığınızda browser açılacak ve metniniz
biçimlendirilmiş haliyle ekrana geelcek.
HAYDİ BİR WEB SAYFASI YAPALIM
HTML dilini
öğrenmenin en kolay yolu, deneme yanılma ile web sayfaları hazırlayarak bu sayfaları web tarayıcısı
ile kontrol etmek, hataları düzelterek ilerlemektir. Ayrıca bilmediğiniz kodların nasıl kullanıldığını
öğrenmek için Internet bağlantınız varsa varolan HTML sayfalarını web tarayıcınızın kaydetme
seçeneğini kullanarak sabit diske kaydedip herhangi bir metin editörü kullanarak açıp
inceleyebilirsiniz. Şimdi adım adım bir web sayfası hazırlayalım.
Adım 1. Pencere Başlığının, arka planın belirlenmesi ve renkler. Her web
sayfasının bir başlığı olmalıdır. Bu başlık web tarayıcısının başlık çubuğunda
görüntülenecektir. Bu iş için tag'ı kullanılır.<p> <title> ve tag'ları
arasına yazacağınız metin web sayfasının başlığı olarak görüntülenecektir.
tag'ı
aşağıdaki gibi kullanılır. <title>Bu benim ilk denemem!Web
sayfalarının arka planını da istediğiniz gibi ayarlayabilirsiniz. Bu aşamada iki
adet seçeneğiniz var. Birincisi boş bir arka plan kullanarak bu arka planın
rengini ayarlamak, ikincisi ise bir resim dosyasındaki resmi alıp web sayfasının
arka planına ' döşemek'. Bu işlemi aynen 'in masaüstündeki duvar kağıdına
benzetebiliriz. Önce boş bir arka planı renklendirmeyi görelim. Web sayfasının
arka planının rengi tag'ını kullanarak
değiştirilir. Default arka plan rengi gridir. Arka plan rengini örneğin beyaz yapmak için body tag'ını
veya şeklinde kullanabilirsiniz. Birinci seçenekte
rengin İngilizce ismi, ikinci seçenekte ise aynı rengin RGB cinsinden renk kodu hexadecimal (onaltılı
sayı sistemi) olarak verilmektedir. Eski tarihli browser'lar renk isimlerini algılayamazlar, bu yüzden
sayfalarınızda renklerin onaltılı sayı sistemi kodlarını kullanmak daha hayırlıdır. Yan tarafta
gördüğünüz tabloda, web sayfalarının arka planlarında kullanılabilecek olan temel renkler isim ve
sayı kodu olarak listelenmiştir. Onaltılı sayıların RGB kombinasyonları ile oynayarak istediğiniz
rengi web sayfası arka plan rengi olarak belirleyebilirsiniz.
Bir Web sayfasının arka planına bir resim
döşeyebilirsiniz. Bu işlem için ilk önce elinizde bir resim dosyası olması gerekir. Web sayfalarında
kullanılabilecek bütün resimler JPG veya GIF formatında olmalıdır. Web okulunu hazırlarken
elinizde bir resim düzenleme programının olduğunu ve JPG veya GIF formatındaki dosyalarla
çalışmayı bildiğinizi varsayıyoruz. Örneğin elimizde arka.gif diye bir resim
olsun. Bu resmi web sayfasının arka planına döşemek için yine
tag'ını
kullanacağız. ARKA.GIF adındaki bir resmi web sayfasının arkasına döşemek için tag'ını aşağıdaki gibi
kullanmalısınız. Bu aşamada ARKA.GIF dosyasının, HTM dosyası ile aynı klasörde yer
alması gereklidir. Örnek bir resim döşemesi aşağıdaki resimde gösterilmiştir. Bu aşamada bir web
sayfasının arka planında bir resim döşediğinizde, arka plan rengi kullanmaya gerek kalmadığı gibi bir
hisse kapılırsınız, yanılırsınız. Genelde Internet yavaş bir şey olduğu için, çoğu kullanıcı sörf
yaparken resimleri kapatma yoluna gidiyorlar. Böyle olunca arka plana döşenmiş resimler
görünmeyecek, arka plan rengi de default olarak gri olduğu için sizin hiç
düşünmediğiniz bir web sayfası ortaya çıkabilecektir. Bu yüzden size tavsiyemiz,
arka plan grafiği kullandığınızda arka planda kullandığınız resme uygun bir arka
plan rengini de tag'ının içinde belirtmenizdir. İki belirteç
bir tag içerisinde kullanılabilir. Ve resmiler kapatıldığında web tarayıcısı
otomatik olarak belirtilen arka plan rengini web sayfasına uygulayacaktır. Sarı
içerikli bir arka plan resmi ile kullanılması gereken tag'ı aşağıda gösterilmiştir.
Adım 2.
Web sayfasının metin içeriği. Web sayfalarında aynen kitap veya dergi sayfalarında olduğu gibi
metinler ve resimler kullanılabilir. 2. Adımda web sayfalarında metinlerin kullanımına değineceğiz.
Web sayfalarında metinler aynen Word veya benzeri bir kelime işlemci programda olduğu gibi bold,
italik vs.. şeklinde formatlanabilir, font tipi, rengi ve boyutu ayarlanabilir. Web sayfasının içerisine
yazdığınız metin web tarayıcısının genişliği boyunca yazılır, artan kısım otomatik olarak alt satıra
atılır. Örneğin aşağıdaki gibi bir metnimiz olsun.
Merhaba. Bu benim ilk web sayfası denemem.
Yazdığım metni bold, italik, veya altçizgili olarak görüntülemek istiyorum.
Bu metni web sayfasına girdiğinizde aşağıdaki gibi bir ekran görüntüsü ile
karşılaşacaksınız. Şimdi bu metni formatlamaya başlayalım. Öncelikle merhaba
kısmını büyük yapmak lazım. Bunun için de tag"ını
kullanacağız. Bu tag'da x yerine birden 6'ya kadar numara verebilirsiniz. 1 en büyük boyut, 6 en
küçük boyuttur. Denemeyle sabittir, 1 ile 4 arasında rakamlar kullanmak en iyisidir. Şimdi merhaba
yazısını büyütmek için onu tag'ına alalım.
Merhaba
Burada,
ile
arasındaki metin, büyültülecektir. Aşağıdaki resimde merhaba tag'ı değişik
boyutlarında kullanılmıştır. Böylece merhaba yazısını istediğimiz gibi büyüttük.
tag'ını kullanırken
öğrendiğimiz bir ikinci şey ise metin formatlamasının nasıl yapıldığı. Demek ki, bir tag'ın
formatlaması iki tag arasına ( ile açılış,
ile kapanış) aldığımız metne uygulanıyor. Şimdi
hızlı bir biçimde diğer metin tag'larını inceleyelelim. aradaki metni bold (kalın) yapar
aradaki metni italik yapar
aradaki metnin altını çizer
Bu tür metin formatlama tag'ları
birbirlerinin içinde kullanılabilirler. Örneğin bir metin parçasını hem bold hem
de italik yapmak için .....
formatlamasını kullanmak gerekecektir. Özgün metnimize geri dönelim. Bu
metinde adı geçen formatlamaları uyguladığımızda HTML sayfamızdaki metin aşağıdaki gibi
olacaktır.
Merhaba.
Bu benim ilk web sayfası denemem. Yazdığım metni
bold, italik, veya altçizgili olarak görüntülemek istiyorum. Böyle bir formatlama
yapıldığında elde edilecek olan web sayfası görüntüsü aşağıdaki gibidir. Metin parçalarını web
sayfasında görüntülerken paragraf başı ve satır sonunu da elle işaretlemek zorundasınız yoksa metin
otomatik olarak alta kaydırılacaktır. Burada karşımıza iki adet tag çıkıyor.
Bunlardan birincisi
, ikincisi de
tag'ı. Birincisi satır sonu,
ikincisi ise paragraf başı anlamına geliyor. Söz konusu metinde ' Bu benim ilk
web sayfası denemem' yazısından sonra bir satır sonu yani verelim.
Ayrıca paragraf başını denemek için de ' bold, italik, veya altçizgili' metnini yeni bir paragraftan
başlatalım. Bu durumda kullanacağımız formatlama aşağıdaki gibi olacaktır. Merhaba.
Bu benim ilk web sayfası denemem.
Yazdığım metni bold, italik,
veya altçizgili
olarak görüntülemek istiyorum.Dikkat ederseniz,
yani paragraf başı
tag'ının kullanıldığı yerlerde
yani satır sonu kullanmıyoruz. Çünkü paragraf başı tag'ı zaten satır
sonunu da belirlemektedir. Yukarıdaki örnekte kullanılan tag'lamanın ekranda göstereceği sonuç
aşağıdadır. Son olarak HTML sayfalarında enter tuşunu kullanmanın web sayfasının görünümüne bir
etkisi olmadığını söyleyelim. Web sayfalarının ekranda görünümünde satır sonları, satır araları ve
paragraf başları tamamen tag'lar ile belirlenir. Bu yüzden metin dosyasında enter kullanmanın web
sayfasına herhangi bir etkisi yoktur. Ancak web sayfasını düzenlerken her şeyin derli toplu
gözükebilmesi için bu tür bir enter'lama yapabilirsiniz. Gelecek sayımızda metin
formatlarken renk ve font kullanmayı,
tag'ının ne işe yaradığını, metinlerin bir liste halinde nasıl alt alta
sıralanacağını görecek ve web sayfalarında resim kullanımına giriş yapacağız.
Geri Dön
Tavsiye Edin
Yazdır
sitesine aittir. Design: Erenet.info