Bir WEB sayfasının standart bileşenleri şunlardır:
ve : Sayfanın başlangıç ve bitişini belirtir.
ve : Sayfanın başlık bilgileri 'title', 'meta' vs. buraya yerleştirilir.
ve : Sayfanın içeriğinin ne olduğunun tanıtılmasında kullanılır. Sayfada görünmez ama İnternet Explorer bunu sayfayı tanımlamakta kullanır.
: Sayfanın içeriği hakkında www tarayıcılarına bilgi sağlamak için gereklidir.
ve : 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 sayfasının içindeki sıraları aşağıdaki gibidir. Bir yazı editoru (Dreamweaver, FrontPage vs.) ile ilk örneğimizi yazarsak:
Bir HTML Denemesi
Bu sayfa inşa halindedir ya da this page is under construction web sayfalarında ille de olması gerektiği düşünülen saçma yazılardır.
Renkler, body, font, ve h1..h6
Önceki örnekte diye, aşağıdakinin basitleştirilmiş biçimini kullanmıştık:
Burada font ile kullanılan 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çilmiş bağların rengi belirlenir.
Renk belirtmek için o rengin ingilizce adı ya da RGB değerleri onaltılık sistemde verilir. RGB deki sıraya göre 00-FF arası uc 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.
ve arasındaki yazılar belirtilen renkte yazılır.
ve den ve ya kadar standart yazı tiplerinden biri seçilerek yazı yazılır. h1 ile belirtilenler h6 ile tanımlananlardan daha büyüktür.
Örneğin:
Sayfa başlığı için uygun büyüklükte harfler
Bu harfler sanırım yazı için yeterliler
Gözleriniz bozuk değilse bu yazıyı okuyorsundur.
Yazıları biçimlendirmek: kalın, italik, ortalanmış, vs. ...
Önceki örnekte , , ... ile yazıların büyüklüklerini ayarlamanın basit bir yolunu görmüştük. HTML sayfamızın yazılarına biraz daha kişilik kazandırmak için aşağıdaki komutları da kullanabiliriz.
ve arasındaki yazılar koyu görünür.
ve arasındaki yazılar ise italik görünür.
ve arasındaki yazılar yanıp söner.
ve arasındaki yazılar ortalanır.
ve ile sınırlanan yazıların görüntüsünde ayarlama yapılmaz. Yani birden fazla boşluk varsa bunlar bir tane olacak şekilde azaltılmaz.
paragraf başı yapmak için kullanılır.
bir satır atlamak için kullanılır.
bir çizgi çeker.
Sayfada resim göstermek
En basit şekliyle, bir sayfaya resim koymak için aşağıdaki komut şu şekilde;
kullanılır.
Dosya_adı, gösterilecek grafik dosyasının (gif, jpg, png tipinde) bulundugu yer ve adıdır. Bağlanılan Html sayfası ile aynı dizinde bulunan resimler için yer adı belirtmeye gerek yoktur.
Alt, resim açıklaması yazmış oluruz. Google buna önem verir.
Align, resmin konumunu belirleriz.
Örneğin:
ile resmin sağa dayalı olarak çizilmesini sağlarız. 'right' yerine 'left', 'center', 'middle' gibi konum bildirici bir başka sözcük de kullanılabilir.
Ayrıca yukarıdakilere ek olarak 'border', 'width', 'height' belirteçlerini de içinde kullanabiliriz. Bunlardan 'border=' resmin çerçevesini belirleriz; border=0 dersek hiç çerçeve çizilmez. Width ve Height ile resmin boyutlarını belirleyebiliriz. Web Sayfamızın hızlı açılmasını istiyorsak, her resmin width ve height özelliklerini kullanmalıyız. Bu sayede browser programınız resimlerin yüklenmesini beklemeden çevrelerine yazıları yerleştirebilecektir.
Sayfanın hizli geliyor gibi görünmesini sağlamanın bir yolu da 'lowsrc' belirtecini içinde kullanmak. Eğer kullandığımız resimlerin bir de bulanık/niteliksiz/siyah-beyaz ama az yer tutan bir benzerini daha yapar, ve bunu şeklinde tanımlarsak, ilk önce hizliresim.gif yüklenip gösterilecektir. Bu sayede bulanık iken yavaş yavaş netleşmeye başlayan resimler belirir sayfamızda. Bunun yararı ise sayfanıza bakan kişinin çabuk karar vermesini sağlıyor olmasındadır.
HTML sayfasına Link yerleştirmek
ve : HTML'nin temeli olan bu komutlarla Link yapılır.
Açıklama Biçiminde kullanılır.
Açıklama, ister yazı ister bir grafik ya da herhangi bir nesne olabilir.
"Hedef Link" ise yerel kaynakları gösteren bir dosya adı yada uzak bir makinedaki bir başka nesneyi (yazı, grafik, video vs.) gösteren bir Link olur.
Örnek:
Web Cumhuriyeti
Ve, internetin en gözde kullanımı: Bir web sayfasından başka bir web sayfasına bağlanma:
Webublic
Kendi dizininizdeki bir sayfa için:
HTML Dersleri için buraya Tıklayabilirsiniz.
Link yardımıyla etkileşimli kullanım örneği
Bir Linke ard arda tıklamak yoluyla, slow motion biçiminde ardışık resim gösterebilirsiniz. Bu kullanım en basit şekliyle bir Bilgisayar Destekli eğitim sayfasında kullanılabilir. Amaç, kullanıcıya konuyu belli bir sırayla vermek ve konu içindeki ilişkilerin anlaşılmasını kolaylaştırmak.
Bunu yapmak için, önce tek bir resim ve o resmin link olarak tanımlandığı bir web sayfası hazırlamalısınız:
sayfa1
sonra da ikinci sayfa da hazirlanmali:
sayfa2
... bu şekilde devam edilir ve ilk sayfa yüklendikten sonra resmin üstüne tıklandığında ikinci sayfa ve içindeki resim yüklenir. İyi hazırlandığında, bu basit HTML kullanım şekliyle Java, cgi-bin, vs. bulaşmadan da etkili 'sunumlar' yapılabilir.
Ekran düzenine ilişkin daha çok komut:
... : Aradaki yazılar cols= ile belirtilen sutunlara ayrılarak ekrana basılırlar. Sutun içindeki yazının sutunun ne kadarını kaplayacağını width parametresi ile belirtiriz. gibi. Burada boşluğu yüzde yerine piksel olarak da verebiliriz. Ayrıca iki sutun arasındaki boşluğu da gutter parametresi ile veririz: yazılar...
: Bununla paragraf başları için boşluk bırakmak mümkün. Örneğin ile 48x48 piksellik bir boş kare alan yaratmış oluruz. Burada block yerine vertical ya da horizontal kullanmak da olası. Ayrıca, ile 320x200'luk bir boşluk yaratıp bunu ekranda sağa dayatmış oluruz. Yine align komutundan sonra right, left, center, absmiddle gibi diğer konum belirteçlerini kullanabiliriz.
Sayfalarda Tablo Kullanımı
Genel kullanım:
sutun1 yazılarısütun2sütun 3.....
2.satırın 1. sütunu2. sütunu3. sütunu
Tablolar satırlar ve sütunlar şeklinde ayrılmış hücrelerden oluşuyor. Her yeni satıra başlamak için etiketini, her yeni sütun için ise etiketini kullanıyoruz.
Bir örnek ile incelersek: .
Bellek tipleri
FPMEDOSDRAMDDR RAMRAMBus
Disk tipleri
MFM/RLLATA IDEULTRA ATASCSI
İşlemci tipleri
RISCCISC
Burada 2x3'lük bir tablo olusturduk. Tablomuz 1 pixel kalınlığında çerçeveye sahip (border=1), tablo sayfada 200 pixel genişliğinde yer tutacak (width=200), hücreler arası 2 pixel boş ve 2 pixellik bir kalınlık efektimiz var (cellspacing ile cellpadding).
Örnekte hücre genişliklerin yazı uzunluğuna göre otomatik ayarlanmaması için genişlikleri kendimiz belirledik (width="50%"
. Bunu pixel olarak da belirlememiz mümkündü: ile.
Hücreler içindeki yazıların nasıl yerleştirileceğini ise align="yer" ile belirtiyoruz. Burada "yer" yerine "top", "bottom", "left", "right" ve "center" kullanabiliriz.
Ve eğer, bir hücrenin iki hücre genişliğinde veya yüşekliğinde olmasını istiyorsak colspan ve rowspan seçeneklerini de kullanıyoruz. Önceki örneğe bir başlık ekleyecek olursak:
Bilgisayar Ana Bileşenleri
Tabloları içice de kullanmamız mümkün. Bu şekilde bir kullanımla bir www sayfasındaki resim ve yazıları tam istediğimiz gibi konumlandırmamız mümkün olur.
Sayfalara 'meta' komutu ile kimlik vermek
Web sayfamızın Google, Yahoo, Altavista vs. gibi tarayıcı programlar tarafından içeriğine uygun olarak dizinlerine aktarılmasını istiyorsak, komutunu kullanmak gerekir. Ayrica, yine bu komut sayesinde sayfamiza baglanani bir baska www adresine yonlendirebilir, bu yolla bir takim hareketli sayfalar dahi hazirlayabiliriz.
Sayfayi tanimlamak icin uc ayri meta komutu yeterli. Bunlarla sayfa hakkinda kisa bir paragraf, anahtar sozcuk listesi ve sayfayi hazirlayanin adini verebiliriz.
Yukarida, sayfamizi kisaca tanitmis olduk. Bu yazi, tarama sonucunda arayan kisiye gosterilecegi icin kisa, oz ve icerige uygun olmasi gerekir.
Tarayicilar artik sayfanin tumunde gecen sozcuklere ve bu sozcuklerle ilgili diger sozcuklere bakarak arama yapsa da, sayfanizin hangi olcutlere gore aranmasi gerektigini sizden iyi kimse bilemez. Onun icin, sayfayi tanimlayan anahtar sozcukleri de su sekilde verebiliriz:
Ve, son kimlik bilgisi olarak sayfadan sorumlu kisiyi belirtiriz:
Hazirladigimiz butun sayfalara bu turden kimlik vermeyi aliskanlik haline getirirsek, interneti arastirmalari icin bir kaynak olarak kullananlara epey yardim etmis oluruz.
Sayfa yonlendirme:
Eger yakında www adresimiz gecersiz olacaksa ve yeni bir www adresine simdiden tasinmissak, bunu kullanicalara onceden duyurmali ve onlari yeni adrese yonledirmeliyiz. Bunun icin eski sayfamizi su sekilde degistirebiliriz.:
Bu ornekte diyerek, www gosterici programina yeni bir sayfa yuklemesini istedigimizi belirtiyoruz.
Bu yuklemeyi kac saniye sonra yapmasi gerektigini '' yazisi ile belirliyoruz. Buradaki '3' yerine saniye cinsinden herhangi bir sure belirtebilirsiniz. '0' yazarsaniz, dogal olarak hemen diger sayfayi yuklemeye baslar.
Yonelinen sayfanin adresi de, ' ... content="saniye; url=http://...">
biciminde veriliyor.
Resimlerde 'MAP' kullanimi
Map'ler bir resmin degisik yerlerine tiklandiginda degisik baglarin yuklenmesi veya degisik bir cgi-bin isinin yapilmasi olarak tanimlanir.
Burada kullanacagimiz resmin '.gif' biciminde olmasi gereklidir. Sayfanin icinde bu resmi tanimladigimiz '
. Bunu pixel olarak da belirlememiz mümkündü: ile.
