TEMEL HTML DERS NOTLARI -

Transkript

1 HTML Nedir? HTML (HyperText Markup Language / Hareketli-Metin Isaretleme Dili) basitçe, browserlarla görebilecegimiz, internet dökümanlari olusturmaya yarayan bir çesit dildir. Tanimda geçen "internet dökümani" ifadesinin yanisira HTML ile olusturdugunuz belgeleri harddiskinize kaydedebilir ve internet baglantiniz olmasa bile bu belgeleri görüntüleyebilirsiniz. HTML, programlama dilleri (pascal, basic,..) gibi bir programlama mantigi tasimadigindan ögrenilmesi gayet kolay bir dildir. Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandigimiz komutlar dizisi bile diyebiliriz HTML için. HTML nispeten kolay bir dildir. Bu dilde binary veya hexadecimal kodlar yok. Hersey metin tabanli ve bir HTML dökümani olusturmak için ihtiyaciniz olan sey bir editör. Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu isi Windows'un Notepad'i ile dahi halledebilirsiniz. Piyasada iki tip editör bulunuyor. Birisi metin tabanli, kod yazmayi gerektiren fakat bunun yanisira rutin bazi islemleri kolaylastiran editörler (HotDog, HomeSite..) digeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alirsin) tarzi denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,..). Benim yeni baslayanlara tavsiyem Windows'un Notepad'i. Bu islerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz. Çünkü bir yerde istenmedik sonuçlar çikabilir ve kodlara müdahele etmeniz gerekebilir. Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek. HTML'de Temel Unsurlar Burada sunu da belirtmek gerekiyor; browserlar arasindaki yorum farklarindan dolayi sayfaniz bir browser'da iyi görünürken bir baska browser'da hiç istemediginiz bir sekilde görüntülenebilir. Hele yeni bazi teknikleri (css, dhtml gibi) sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor. Yine de piyasayi neredeyse yari yariya paylasan bu iki browser'in birbirlerine üstün oldugu yönleri var. Sonuçta, ne kadar fiyakali bir sayfa da yapsaniz elde ettiginiz basari sayfanizi ziyaret eden kisinin kullandigi browser'a mahkum. Hatta ziyaretçiniz browser'ina verdigi bir talimatla "yalniz su fontu kullan", "grafikleri görüntüleme" seklinde bir ayar yapmissa emekleriniz bosa gitti demektir. Yine de bu kadar karamsar olmayalim. Bu kadar genel bilgi yeter. Bir sonraki konuda ilk HTML sayfamizi yapiyoruz. Ilk sayfam Iste ilk HTML sayfamizi yapiyoruz. Öncelikle çalismalarinizi saklamak için kullanacaginiz bos bir klasör olusturup uygun bir ad verin, mesela html_ders olsun. Daha sonra bu ad bize lazim olacagindan kolaylik olmasi için siz de yeni klasöre bu adi verebilirsiniz. Simdi de bu klasörü açip yeni bir metin belgesi olusturun (sag fare/yeni/metin belgesi). Dosyayi çift tiklayarak açin ve sunlari yazin: <title>ilk Sayfam</title> Sayfama Hosgeldiniz Simdi dosyayi kaydedin (Dosya/Farkli Kaydet...). Dosya adi kismina söyle yazin: "sayfa1.htm" (tirnaklar dahil) ve Tamam'a basin.

2 Notepad'i kapatin, metin dosyasini silin ve olusan yeni dosyayi açin. Dosya varsayilan browser'iniz (Internet Explorer, Netscape Navigator gibi) tarafindan açilacaktir. Tebrikler ilk HTML sayfanizi yaptiniz. Simdi de bu belgeyi nasil olusturdugumuzu birlikte inceleyelim. Birsey dikkatinizi çekti mi? Ingilizce bir takim kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasina yazdik. Bu ifadelere tag (etiket) deniyor. [ Etiket=Element=Label]. Etiketler etki etmesi istenilen metnin önüne ve arkasina yaziliyor. Önce etiketi yaziyoruz, sonra metni yaziyoruz daha sonra ayni etiketi önüne bir bölü isaretiyle tekrar yaziyoruz. Bu son yaptigimiz etiketi sonlandiriyor. Bir kaç istisna disinda tüm etiketler belge içerisinde sonlandirilmak zorunda. Burada kullandigimiz etiketler ve anlamlari söyle: html>... : Tarayiciya HTML dosyasinin basladigini ve bittigini belirtiyor. Diger tüm kodlar bu iki etiket arasina yazilir Bir HTML belgesi iki bölüme ayriliyor: head(baş ve body(gövde).... etiketleri arasina sayfa hakkinda bilgiler yaziyoruz. meta ve title gibi etiketler burada yeraliyor. Meta etiketlerine ileride deginecegiz.... arasi ise sayfamizin gövde bölümü. Ekranda gösterilecek kisimlar bu tagler arasinda yeraliyor. <title>...</title> : Title sayfanin basligini belirtiyor. Burada yazilanlar browser'in üst tarafinda (title bar) browser adiyla beraber gösteriliyor. Hazirladigimiz sayfada dikkat ederseniz sadece temel etiketleri kullandik. Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadik. Bu yüzden... arasina yazdigimiz Sayfama Hosgeldiniz yazisi browser'in varsayilan metin ayarlariyla gösteriliyor. Isin ilginç tarafi hiçbir kod yazmadan sadece Sayfama Hosgeldiniz yazip kaydetsek ve browser'da böyle görüntülesek de ayni neticeyi elde edecektik. Sonraki bölümde metin biçimlendirmeye yarayan etiketleri ögrenecegiz. Bir Web Dökümaninin ana çatisi ve kodlar(tag) Bir web sayfasinin ana çati olarak adlandirabilecegimiz iskelet yapisini asagidaki sekilde görüyorsunuz. Web sayfasi yapmaya baslarken önce bu çatiyi olusturun ve sonra içeriyi doldurmaya baslayin... < > Bir Web Sayfasinin Ana Çatisi < > Sayfa Hakkinda Bilgilerin Tanimlandigi Yer. Sayfanin Ana Gövdesi.. Hersey Burda Yapilyor.

3 1.KURAL: Bir web sayfasi kodlamasi ile baslar, ile biter... ( ilk TAG'imiz(komutumuz)... Ileriki sayfalarda bu TAG denilen kodlarin tam listesini ve ne ise yaradiklarini bulabilirsiniz...) 2.KURAL: Bir web sayfasi kaynak kodunda; ve ve isaretleri ile tanimlanmis 2 ana bölge vardir... ( ve ile sinirlanan bölgede sayfanin basligi, yazari, arama motorlarinin kullanacagi bilgiler, JavaScriptler vs. gibi bilgiler kodlanir. Bu bölüm sayfanin genel görünüsüne direkt olarak etki etmez.(javascript vb. hariç...) ve ile sinirlanan bölge ise sayfanin içerigi ve görünüsü ile ilgili olarak bütün herseyin yeraldigi bölgedir. Tasarimcilik burada gerçeklesir...) 3.KURAL: Adina TAG dedigimiz bütün komutlar "küçüktür" ve "büyüktür" isaretleri arasina yazilir. (Bu taglerin olmazsa olmaz kuralidir. Bütün browserler "<" ve ">" isaretleri arasindaki yazilanlari komut olarak algilar. bu isaret olmadiginda yazilanlar ya oldugu gibi görüntülenir yada HATA meydana gelir.) 4.KURAL: Sayfa kodlamasinda kullanilan TAG dedigimiz komutlarin büyük çogunlugu "/" isareti ile kapatilmak zorundadir. Bunun bazi istisnalari da vardir tabi... (Asagidaki sekilde bir örnek görüyorsunuz) (Örnegin <table> tablo açma komutu </table> tag'i ile kapatilmak zorundadir. Eger bu yapilmazsa sayfa dogru görüntülenmez, hata olusur. Istisna olarak bazi komutlari kapatmaya gerek yoktur. Örnegin <br> satir atlatma komutu...) <center>... Yazi,Resim vs.... Nesnelerin Ortalanmasini... Saglayan Kod </center> 5.KURAL: Bazi TAG lerin "parametreleri" vardir. Verdigimiz komutun aktivitesini arttirir... (Örnegi asagida görüyorsunuz... Bunlari kullanmak tamamen tasarimcinin keyfine kalmistir. Birbaska ifadeyle komutunu kullanmak zorunlu iken, parametrelerini kullanmak tercihe baglidir.) <body bgcolor="#ffffff" text="#000000"> / Body Komutunun Parametreler UZUN LAFIN KISASI: Bir web sayfasinin görünüsü 2 ye ayriliyor. Birisi browserler ile gördügümüz gerçek yüzü, digeri ise kelime islem programlari ile gördügümüz kaynak kodlari... Tasarimcilik bu kaynak kodlarda vücut buluyor. Herhangi bir web sayfasini "kaynak kodlari" açisindan ele alirsak temelde 2 ana bölümden (ana çati) meydana geldigini görüyoruz. Kaba tabiri ile bunlar; ve komutlari ile sinirlanan bir "bas" bölümü ve birde ve komutlari ile sinirlanan "gövde" bölümü. Sayfanin

4 görünüsü ve içerigi ile ilgili olarak hersey bu gövde dedigimiz alanda kodlanmakta ve bu kodlama için kullanilan komutlar adina TAG dedigimiz isaretlerden olusmakta... DIKKAT: Konuyu anlatirken simdilik teknik terimlere ve isin ayrintilarina girmiyoruz. Bu noktada hatirlatalim ki; yukarida kodlama yaparken kullandigimiz ve TAG diye adlandirdigimiz web sayfasi kodlama biçimi tek degildir. VRML, SGML, ASP gibi sözcükler duymussunuzdur. Yani web sayfasi hazirlamakta kullanilan birden fazla kodlama biçimi vardir. Biz burada HTML (HyperText Markup Language) HiperMetin Anlamlandirma Dili olarak adlandirilan biçimi görmekteyiz. Web'te en çok kullanilan dil de budur zaten... Metin Biçimleme Bu bölümde ögrenecegimiz etiketler: Baslik etiketleri: <h1>...<h6> Metni yazıldığı biçimde gösteren: <PRE> </PRE> Metni alınıt haline getirir (girintili). <BLOCKQUOTE> </BLOCKQUOTE> Metni bölümlere ayırır:<div> </DIV> Paragraf etiketi: <p>...</p> Ortalama: <center>...</center> Diger etiketler: <b>...</b>,<i>...</i>,<u>...</u>,<tt> </t>, , , <s> </s> HTML'de metin stillerini üç sekilde belirleyebiliriz: Düzenlemek istedigimiz metnin hemen önüne koyacagimiz bir etiketle biçimleme stili. Buna in-line (satir içi) biçimlendirme denir. Sayfanin head (bas) kismina koyulan stillere body (gövde) bölümden atif yapilarak metin biçimleme. (Embedded-Gömülü biçimlendirme) HTML dosyasinin disinda baska bir stil dosyasi olusturarak stil için bu dosyayi kullanma. Buna Cascading Style Sheets-Yigilmali Stil Kagitlari deniyor. Kisaca CSS. Bu teknik bize örnegin yüzlerce sayfanin stilini tek bir stil dosyasi ile belirleme gibi genis imkanlar veriyor. Birinci metotta her metin için ayri ayri stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istedigimiz metne uygulayabiliyoruz. Burada önemli olan bir diger husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2. ve 3. metodu Internet Explorer ve Netscape'in son sürümleri (yorum farkliliklari ile beraber) destekliyorlar. Burada konumuz birinci metoda göre biçimlendirmeyi ögrenmek. Baslik etiketlerinden basliyoruz. Notepad'i açiyor ve su kodlari yaziyoruz; <title>baslik Etiketleri</title> <h1>baslik 1</h1> <h2>baslik 2</h2> <h3>baslik 3</h3> <h4>baslik 4</h4> <h5>baslik 5</h5> <h6>baslik 6</h6> Sayfanin isleyisine baktigimizda, önce her zaman yapmamiz gerektigi gibi,, <title> etiketlerini yerlestirdik. Sayfa basligi olarak "Baslik Etiketleri"ni seçtik ve sayfanin

5 gövde kismina istedigimiz metinleri yazdik ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasina aldik. Browser metin biçimleme etiketleri olan <h1>...<h6> etiketleri arasindaki kelimelere belirli büyüklükler verdi. Simdi de kendiniz <h1>...<h6> etiketlerinin yerlerini degistirerek alistirma yapin ve tam olarak bu isin nasil oldugunu kavrayin. Hatta iyi bir deneme-yanilma olmasi açisindan örnegin her seferinde degisik bir etiketi veya sonlandirma etiketini HTML kodundan silerek ne gibi etkiler olusturdugunu gözlemleyin. Denemelerinizin bir kisminda hiçbir degisiklik olmadigini gözlemleyeceksiniz bunun sebebi, browser'inizin otomatik olarak hatayi algilayip düzeltmesidir. Diger etiketleri toplu olarak kullanarak yeni bir HTML dosyasi olusturalim. Kodlar su sekilde olsun: <title>baslik Etiketleri-2</title> <h1><center>sayfama Hosgeldiniz</center></h1> <p>html etiketleri ile, </p> Yazilari <b>koyu </b> <i>italik </i> ve <u>alti çizili </u> olarak yazabiliyorum Etiketleri kullanma mantigini anladiniz herhalde. Biçimlendirmek istedigimiz metnin basina ilgili etiketi yaziyoruz ve metnin sonunda da ilgili etiketi sonlandiriyoruz. Etiket biz sonlandirmadigimiz müddetçe etkisini göstermeye devam ediyor. Eger hala tereddütleriniz varsa örnekler üzerindeki kodlarin yerlerini degistirerek kaydedin ve diger taraftan browser'inizin reload/yenile tusuna basarak degisiklikleri gözlemleyin. Yeni ögrendigimiz kodlara bir göz atalim: <center>...</center> Aradaki metinleri sayfaya göre ortalar. (center) <b>...</b> Aradaki metni koyu (bold) yazar. <i>...</i> Aradaki metni egik (italic) yazar. <u>...</u> Aradaki metni alti çizili (underline) olarak yazar. <h1>...<h6> Baslik (heading) etiketi. h1 en büyük, h6 en küçük. <p>...</p> Aradaki metin paragraf özelligi kazanir. Sonlandirildiginda, takib eden metin bir satir bosluk birakilarak ve satir basina yazilir. Burada bilmeyenler için küçük bir bilgi; bir html dökümanini açtigimizda ve ekran üzerinde farenin sag tusuna tiklayip kaynagi görüntüle/view source'u seçtigimizde Internet Explorer için Notepad, Netscape için kendi Source Viewer'i açilacak ve bize o sayfanin kodunu gösterecektir. Su ana kadar yazilarimizin font ayarini browser'in 'varsayilan fontu'na biraktik. Bir sonraki konuda, metinlerde istedigimiz fontu nasil kullanacagimizi görecegiz Yatay Çizgi: <HR> Nitelikleri:

6 Width: yatay uzunluğu belirler. Pixel ve % cinsinden değer alır. Size: Dikey büyüklüğünü belirler. Align: Yatay hizalamasını yapar. Center/left/right değerleri alır. Noshade Gölgesiz yapar. Color: rengini ayarlar.