|
HTML Hakkında |
HTML dökümanın hazırlanması
HTML Dökümanları tamamı ASCII karakterlerden ve herhangi bir editörde
yazılabilen metinlerden oluşmuştur. UNIX üzerinde pico veya vi
kullanarak HTML dökümanlarınızı hazırlayabilirsiniz. Temel
bir döküman aşağıdaki gibi yazılabilir: < title> Burası konunun yazılacağı yer </title> < h1> Bu, 1 numaralı başlık </h1> HTML dünyasına hoşgeldiniz. <br> Birinci paragrafımız. <p> Bu da ikinci.. <p>
HTML yazarken, metnin Web programının
anlayacağı şekilde gösterilebilmesi için belirteçler kullanır.
Yukarıdaki örnekte:
Tüm HTML belirteçleri, küçüktür işareti (< ), belirteç
ismi ve büyüktür işaretinden (> ) oluşur. Genellikle her
belirtecin < h1> ve < /h1> örneklerindeki gibi
bir çifti olur ve sondaki belirtecin ismi önüne ayraç gelir. Not1: HTML belirteçleri "case sensitive"dir..?
< title > , < tITLE> veya < tiTlE> belirteçleri
aynı görevi yaparlar. Temel
Belirteçler
KonularHer HTML sayfasının ve ile ayrılan bir konusu olmak zorundadır. Konular genellikle sayfadan bağımsız olarak ekranın en üstüne basılır. <title> Sayfamın konusu </title> Başlıklar
HTML, 1'den 6'ya kadar numaralanmış 6 çeşit başlık destekler. Başlıklar normal karakterlerden daha büyük ve kalın yazılırlar. Temel olarak, <Hy> Sayfamın başlığı </Hy>
olarak tanımlanmış bir belirteçte y, 1 ile 6
arası bir değer alabilir. Y sayısı arttıkça fontun büyüklüğü
azalır. ParagraflarDiğer kelime işlemcilerdekinin aksine, HTML dökümanlarında programcı
özel bir belirteç kullanmadıkça bir cümle herhangi bir yerinden ayrılıp
kalan kısmı altta görünebilir, birden fazla boş satır tek satır
olarak algılanır. HTML'ye hoşgeldiniz <br> Bu ilk paragraf <p>
Buna göre
aşağıdaki örnek, okuduğunuz dosyanın başındaki örnekle aynı çıktıyı
verir. <title> Burası konunun yazılacağı yer </title> <h1> Bu, 1 numaralı başlık </h1> HTML dünyasına hoşgeldiniz. Birinci paragrafımız. <p> Bu da ikinci.. <p>
HTML
dosyalarının okunurluğunu artırmak için başlıklar ile karşılık
gelen belirteçleri aynı satirda, paragraf düzenleyen komutlar ise satır
sonunda olmalıdır. Satır sonu belirteciParagraf, iki satır arasında bir satır boşluk bırakırken, satır sonu belirteci kullanıldığı kursör alta geçer ve takip eden tüm metin,boşluk bırakmadan bir alttan yazılır. Bu ilk satır. <br> İkinci satır daha uzun. <br> Ama bu bir paragraf sonu..<p>
Sayfanın ortalanmasıParagraflar ortalanırken < center> ve </center> belirteçlerinden yararlanılır. Ortalanması istenen tüm metin, bu iki belirtecin arasına yazılır. <center> In practical terms, HTML is a collection of styles. </center>
BağlantılarHTML'nin en büyük özelliklerinden
birisi, tek sayfa ile sınırlı kalmamasıdır. Böylece bir sayfadan diğerine
bağlantı yapılabilir. HTML'in bu görevini yerine getirmesini sağlayan
belirteç <a> 'dir Dökümanınızdan başka dökümana bağlantı
ypabilmek için:
Kısa bir örnekle açıklayalım: <a href="internet.html"> İnternet nedir? </a>
Ekranda "İnternet Nedir?" yazısı
belirecek ve kullanıcıdan burayı seçmeyi bekleyecektir. Kullanıcı
fare ile bu yazı üzerine tıkladığında ise program kontrolü yine bir
HTML dosya olan internet.html dosyasına bırakacaktır. Bu durumda
bulunduğunuz dizinden farklı bir dizindeki dosyaya bağlantı yapmak
isterseniz, o dosyanın ait olduğu dizini yazmak zorundasınız.Buna göre
"languages/Fortran/introduction.html" dosyasını
kullanabilmek için <a href="languages/Fortran/introduction.html" > Fortran diline giriş </a>
şeklinde bir belirteç yazmak gerekir. Kaynak BağlantılarıHTML'in bir diğer özelliği ise, tek bir makinaya bağımlı kalmadan diğer İnternet servisleriyle bağlantı kurabilmesidir. Bunun için URL (Uniform Resource Locator) kullanılır. URL, http,gopher, news olabileceği gibi telnet de olabilir. Kullanım "sentaksı", URL-ismi://makina-ismi[:port]/dizinler/dosya-ismi Burada URL, file :
Kendi sisteminizde bir dosyaya, erişmek için kullanılır. Port numarası,
genellikle yazılmaz. Size aksi durum belirtilmedikçe, kullanmanıza
gerek yoktur. <a href=http://compclup.ceng.metu.edu.tr/web.lat5.html>
yazdınız. Halihazır döküman bölgeleri bağlantılarıBir metin üzerinde belirli bölgelere ulaşmak için yine belirteçler kullanılabilir. Diyelim ki bir döküman hazırladınız ve bunu kullanıcının erişebileceği 2 parçaya ayırmak istiyorsunuz. Yapmanız gereken, bu üç parçanın isimlerini belirlemek ve dökümanda yerlerini ayırmaktır. Örnekte, <a href="bu_dökümanın#1.parça"> Buradan ilk bölüme gidin </a> <a href="bu_dökümanın#2.parça"> Buradan ikinci bölüme </a> <a name="1.parça"> İşte ilk bölüm> İlk bölüm ile ilgili metinler burada... </br> <a name="2.parça"> İşte ikinci bölüm> İkinci bölüm ile ilgili metiner burada.. </bt>
<a href= ile başladığınız belirteçte önce döküman ismini, sonra da dökümanın içindeki parça ismini girmelisiniz. <a name= belirtecinde ise o belirteçten itibaren parçanın başladığını anlıyoruz. Kullanıcı ilk bölüme gitmek için fareyi kullandığında ekranda , İlk bölüm ile ilgili bilgiler burada
ifadesini görecektir. Diğer döküman bölgelerine bağlantıYukarıdaki örnek doğrultusunda farklı olarak tek yapılması gereken, döküman ismine, hangi dökümana bağlantı yapmak istiyorsak o ismi vermektir. <a href="diğer_döküman_ismi#parça_ismi"> başka dökümana geçiş</a> <a name=parça_ismi>
Ana komutlarListelerDökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir. Düz listelerDüz liste yaratmak için,
Örnek olarak, <ul> <li> Elma <li> Armut </ul>
Örnek, ekranda şu şekilde görülür :
Numaralı ListelerNumaralı listeler, düz listelerden
farklı olarak, <ul> belirteci yerine <ol> kullanırlar.
Ekranda liste elemanlarının başında 1'er artan numaralar görünür. <ol> <li> Linux İşletim Sistemi <li> Unix İşletim Sistemi </ol>
ekrana şunları yazar:
Tanımlı listelerGenellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır. <DL> <DT> NCSA <DD> NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. <DT> Cornell Theory Center <DD> CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering. </DL>
Ekrandaki çıktı şu şekilde görünür: NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. NCSA is one of the participants in the National MetaCenter for Computational Science and Engineering. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. CTC is another participant in the National MetaCenter for Computational Science and Engineering. İçiçe ListelerTüm liste çeşitleri, 3'den fazla bölüm kullanmadıkça içiçe yazılabilir. Örnek olarak, <ul> <li> İstanbul'un büyük semtleri <lu> <li> Beyoğlu <li> Taksim <li> Bakırköy </lu> <li> Ankara'nın belli başlı yerleşim birimleri <lu> <li> Kızılay <li> Ulus </lu> </lu>
Ekrandaki görüntüsü,
| Ankara'nın
belli başlı yerleşim birimleri | |
| Kızılay | |
| Ulus |