Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:

Transkript

1 HTML nedir? HTML e GİRİŞ E. Fatih Yetkin HTML Hyper Text Markup Language kısaltmasıdır. Bir HTML dosyası, çeşitli işaretleme etiketleri içeren bir metin dosyasıdır. Bu işaretleme etiketleri (markup tags) tarayıcıya sayfayınasıl görüntüleyeceğini söyler. HTML nedir? Bir HTML dosyası oluşturmak HTML dosyasının uzantısı htm ve ya html olmalıdır. Herhangi bir metin editörü kullanılarak oluşturulabilir. Öte yandan daha profesyonel araçlar Dreamweaver vb. kullanılarak da yapılabilir. Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın: <head> <title>sayfanın başlığı</title> </head> Bu ilk sayfam<b>koyu yazdım burasını</b> Bir HTML dosyası oluşturmak Örneğe Dair Açıklamalar Hazırladığınız dosyayı dosya_adi.html şeklinde kaydedip herhangi bir tarayıcı(browser) ile açın. Dosya adını seçerken serbestsiniz ancak uzantınızın mutlaka htm ve ya html olması gerekmektedir. İlk etiket tarayıcıya html dosyasının balangıcı olduğunu belirtir. Son etiket olan ise html dosyasının sona erdiğini bildirir. <head> ve </head> arasında kalan bilgi dosyanın başlık bilgileridir ve bunlar tarayıcıda gösterilmez. <title> ile dosyanın başlığı oluşturulur. 1

2 Örneğe Dair Açıklamalar HTML etiketlerinin özellikleri: etiketi altında tarayıcıda gösterilecek olan bilgiler bulunur. <b> ve </b> arasında yazılacak olan metinler koyu karakter ile yazılır. HTML etiketleri HTML bileşenlerini işaretlemek için kullanılır. < ve > işaretleri ile belirlenirler. Genellikle çiftler halinde kullanılırlar. Yani <b> ile açtığımız özelliği </b> ile kapatmamız gerekir. Bunlardan ilki başlangıç, ikincisi ise sonlandırma etiketi adını alır. HTML etiketlerinin özellikleri: HTML Bileşenleri Başlangıç ve sonlandırma etiketleri arasında kalan bölüm bileşenin içeriği (element content) adını alır. HTML etiketlerini kullanırken büyük küçük harf ayrımı yoktur (case insensitive) ama genellikle küçük harf tercih edilir. Bunda html standartlarını oluşturan w3c(www consortium) nin seçimi etkendir. Bir önceki örneği hatırlayacak olursak, <head> <title>sayfanın başlığı</title> </head> Bu ilk sayfam<b>koyu yazdım burasını</b> Burada aşağıdaki satır bir HTML bileşenidir. <b>koyu yazdım burasını</b> HTML Bileşenleri HTML Bileşenleri Bir HTML bileşeni başlangıç etiketi ile başlar (Burada <b>) Daha sonra içerik yer alır (Burada koyu yazdım burasını metni) Son olarak da sonlandırma etiketi yer alır. (Burada </b>) Aşağıdaki kesim de benzer şekilde bir HTML bileşeni olarak adlandırılır. Bu ilk sayfam<b>koyu yazdım burasını</b> Bu bileşenin elemanları hangileridir? 2

3 HTML Etiketlerinin Nitelikleri HTML Etiketlerinin Nitelikleri Bazı HTML etiketleri, bileşene dair bazı ek özellikleri belirtmemize yarıyabilecek niteliklere(attributes) sahip olabilirler. Örneğin bir tablo oluşturmaya yarayan <table> etiketine tablonun kenar çizgilerinin olmamasını bildirmek için <table border="0"> denilmelidir. Nitelikler de tıpkı etiketler gibi küçük büyük harf ayırmazlar ama genel kabul gören halleri küçük harf kullanmak üzerinedir. Nitelikler kesinlikle çift ve ya tek tırnak içerisinde yazılmalıdır. Ama aşağıdaki gibi bir kullanım da yasaldır. name='john "ShotGun" Nelson' Temel HTML Etiketleri Başlıklar Başlık etiketleri (headings) <h1> den <h6> ya dek olan etiketler ile gösterilirler. Bu aşağıdaki gibi bir çıktı üretir. <h1>başlık 1</h1> <h2>başlık 2</h2> <h3>başlık 3</h3> <h4>başlık 4</h4> <h5>başlık 5</h5> <h6>başlık 6</h6> Paragraflar Yeni satıra geçmek Paragraflar etiketi ile tanımlanırlar. Bir paragraf Bir başka paragraf HTML tıpkı başlıklarda olduğu gibi paragraf etiketlerinden sonra da otomatik olarak bir satır atlar. HTML de yazdığımız metini düzenlerken yeni br satıra geçmek için <br> kullanılır. Böylece yeni bir paragrafa geçmeden satır değiştirmek mümkün olabilmektedir. Bir paragraf <br> içinde yeni satır <br> ve bi tane daha 3

4 Yorumlar HTML içerisinde tarayıcıda görünmesini istemediğiniz bazı yorum ve açıklamalar yapabilirsiniz. Bunun için <! Bu bir açıklamadır yapısını kullanmanız gereklidir. Paragraf örneği This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. Biçemleme örneği Başlık Örneği My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. Note that your browser simply ignores your formatting! <h1 align="center">this is heading 1</h1> The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. Yatay çizgi Arkaplan rengi The hr tag defines a horizontal rule: <hr> This is a paragraph <hr> This is a paragraph <hr> This is a paragraph <body bgcolor="yellow"> <h2>look: Colored Background!</h2> 4

5 Temel HTML Etiketleri Metin Biçem Etiketleri Etiket Description <b> Koyu metin Etiket Açıklama <big> Büyük karakterli HTML dosyasını başlatır <em> Vurgulu metin Belgenin ana kısmını belirler <i> Yatık metin <h1> to <h6> 1 den 6 ya dek başlık tipi seçer Paragraf açar <small> Küçük karakterli <br> Yeni satıra geçer <strong> Kalın karakterli <hr> <!--> Yatay bir çizgi çizer Yorum <sub> Altindis metin <sup> Üstindis metin <ins> Alti çizili metin <del> Üst çizili metin Örnekler Bilgisayar Çıktısı Etiketleri Örnek dosyaları inceleyiniz. Sözkonusu dosyalar aşağıdanbulunabilir. Etiket <code> Açıklama Bilgisayar programı yazılacağını belirtir. <kbd> <samp> Klavye metni girileceğini belirtir. Örnek bilgisayar kodu girileceğini belirtir. <var> Değişken tanımlar <pre> Önbiçemli metin girileceğini belirtir. Örnekler Alıntı, Tanımlama vs. Etiketleri Örnek dosyaları inceleyiniz. Sözkonusu dosyalar aşağıdanbulunabilir. Tag <abbr> <acronym> Description kısaltmalarda kullanılabilir kısaltmalarda kullanılabilir <address> <blockquote> Bir adres bilgisi girileceğini belirtir. Uzun bir alıntı yapılacaksa kullanılabilir. <q> Kısa bir alıntı yapılacaksa kullanılabilir. <cite> Referans verirken kullanılabilir. <dfn> Bir tanımlama için kulanlabilir. 5

6 Örnekler Karakter Kodları Örnek dosyaları inceleyiniz. Sözkonusu dosyalar aşağıdan bulunabilir. Bazen HTML dosyasının içerisine HTML içinde kullanılabilen bazı simgeleri girmek gerekli olabilir. Bu durumda bu özel karakterin HTML içerisinde tanımlı kullanım şekli ile kullanılması gerekir. Bu tarz tanımlamalar 3 ana parçadan oluşur. & işareti ile başlar, karakterin adı ile devam eder ve ; ile sonlanır. Karakter Kodları Karakter Kodları Örneğin kelimeler arasında fazladan bir boşluk bırakmak istiyorsanız, kodunu kullanmalısınız. Ayrıca bu sözkonusu karakterin sayısal karşılığını da kullanmanız mümkndür. (non-breaking space) için bu kod şeklinde olacaktır. Bazı sık kullanılan karakter kodları bir sonraki slaytta verilmiştir. Karakter < > & " Açıklama Boşluk küçüktür büyüktür ve Çift tırnak Giriş İsmi < > & " Giriş Numarası < > & " ' tırnak ' (IE ile çalışmaz) ' HTML de bağlantılar (linkler) Çapa nın kullanılması HTML dosyasından bir başka HTML dosyasına bağlantı kurmak için çapa (anchor) etiketi kullanılır. Genel yapısı aşağıdaki gibidir. <a href="url">görüntülenecek metin</a> <a> ile web üzerindeki herhangi bir dosyayı çağırabilirsiniz. Bu bir film, resim, ses, ya da metin dosyası olabilir. <a> ile bir bağlantı kuracağınızı ve href ile de bu bağlantıyı nereye kuracağınızı belirtirsiniz. Örneğin arıbil in sayfasına link vermek için; <a href= ARIBIL </a> 6

7 Çapa nın kullanılması Sayfa içi bağlantılar Link verdiğiniz dosyanın aynı sayfada açılmasını istemiyorsanız <a> etiketine ait target niteliğini kullanmanız gerekir. <a href= target=_blank> ARIBIL </a> Linkin sizi aynı sayfa içerisinde bir başka yere yönlendirmesini isterseniz öncelikle <a> etiketi ile yönlendirilmesini istediğiniz kesimi isimlendirmeniz gereklidir. <a name= burasi > Bağlantı buraya yapılacak </a> Daha sonra da yine <a> ile bu ismi kullanarak sayfanın o kesimine link verebilirsiniz. <a href= #burasi > Bağlantı buradan yapılacak </a> Örnek 1 <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. <a href=" This text</a> is a link to a page on the World Wide Web. Örnek 2 You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> Çerçeveler (Frame) <frameset> etiketi Çerçeveler yardımı ile birden fazla HTML dosyasını aynı tarayıcı sayfasında gösterebilirsiniz. Bu şekilde ouşturulan herbir HTML dosyası frame adını alır ve tümü birbirinden bağımısızdır. Frame yapısının kötü tarafları fazla sayıda HTML dosyası ile uğraşmak zorunda kalmanız ve de bu durumun arama motorlarında bazı güçlüklere yol açabilmesidir. <frameset> etiketi sayfanın ne şekilde çerçevelendirileceğini belirler. Cols ve ya rows şeklinde aldığı argümanlar ile sayfanın ne şekilde yerleşeceği belirlenir. <frame> etiketi ile de hangi bölümün hangi HTML dosyasından oluşacağı belirlenebilir. <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> 7

8 Örnek 1 Örnek 2 <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> HTML Tabloları HTML de tablo oluşturmak için <table> etiketi kullanılır. Oluşturulan tabloda yeni bir satır oluşturmak <tr> etiketi ile mümkündür. <td> etiketi ile de satırın bileşenleri oluşturulur. <th> etiketi sütun başlıkları atmak için kullanılabilir. Örnek Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. <h4>one column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>one row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> Örnek devamı <h4>two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> 8