Download
1 / 32
E N D
Tim Berners-Lee tarafından 1989 yılında HTML ( HyperTextMarkup Language) işaretleme dili geliştirilmiştir. Tim Berners-Lee aynı zamanda WWW, HTTP ve URL’ yide geliştiren mucittir. Tüm keşifleri 1989-1991 yılları arasında olmuştur. HTML internet üzerinden web sayfaları oluşturmak için kullanılan bir dildir. HTTP protokolu ile HTML olarak hazırlanmış sayfalar çağırılır. HTML dosyaları sunucu bilgisayar içerisinde .html yada .htm olarak tutulur. HTML ile oluşturulmuş sayfalarda yazılan kodlar “c “ yada “pascal” gibi herhangi bir derleyiciye gerek kalmadan direk çalıştırılır. HTML ilk olarak 1.0 versiyonu ile çıkmıştır. Bu süreç HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01 versiyonları çıkmıştır. Her bir versiyon ile yeni özellikler eklenmiş ve kullanım ve uygulama alanları gelişmiştir.
HTML’nin Tanımı HTML tarayıcı (browser) ‘lardan görülebilecek web sayfaları düzenlemeye yarayan bir işaretleme dilidir. İnternette gezinilen tüm sayfaların kaynağında HTML kodları kullanılmaktadır. Bu kodlar yazılırken Windows altında ‘not defteri’ yada ‘WordPad’, Linux altında da ‘pico’, ‘joe’ ya da ‘vi’ gibi metin düzenleyici programları yeterlidir. Bu metin düzenleyicilerinde yazılan kodlarla oluşturulmuş .html, .htm, .dhtml yada .shtml, uzantılı sayfalar harddiskten, internet bağlantısına gerek kalmadan çalıştırılabilmektedir. Aynı zamanda bu dosyalar Dreamweaver yada Frontpage gibi kod yazımını kolaylaştıran görsel programlarla da HTML kodları yazılıp çalıştırılabilir. Bu programlara WYSIWYG (WhatYouSee Is WhatYouGet - Ne görürsen onu alırsın) programlar denir .
HTML’de Etiket (Tag) Kullanımı Metinler üzerinde biçimlendirme yapma, resim, tablo ekleme, adreslere link verme işlemlerini yaptığımız HTML bir programlama dili olarak çalışmaz. Etiketler içerisine yazılan metinler direk verinin kendisini oluşturur. “<“ (küçüktür), “>”(büyüktür) şeklinde görünen komutlara etiket (tag) adı verilir. Kullanılan çoğu etikette başlangıç ve bitiş etiketleri vardır. Örneğin bir yazıyı koyu yazmak için kullanılan komut <b>’dir ve sonunda </b> etiketinin kullanılması gerekir. Kullanılan çoğu etiketin kapatma etiketi bulunduğu gibi sadece başlangıç etiketi olan kodlarda vardır. Örneğin <br> etiketinin </br> şeklinde bir sonlandırma etiketi yoktur.
HTML’nin Temel Yapısı HTML de kullanılan etiketler belirli bir düzene göre yazılır. Her HTML dokümanı <HTML> ile başlar ve </HTML> ile biter. Bir HTML dokümanı iki ana kısımdan oluşmaktadır:<head> . . . </head> etiketi arasında yer alan Başlık bölümü; <body>. . . </body> etiketleri arasında yer alan Gövde Bölümü. Başlık bölümü içine <title>. . . </title> etiketi konur. Eğer hazırlanan sayfa Türkçe içerikli ise Türkçe karakterlerin (ç, ğ, ı, , ş, ö, ü) düzgün görünmesi için Başlık kısmı içerisine aşağıdaki meta etiketi eklenir. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız.
Bir etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır. Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve tabloya kenarlık verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde yer almaktadır. <tableborder=“1"> Etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta ilk açılan etiketin en sonda kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir. <b><u>Bu örnek yanlıştır </b></u> <b><u>Bu örnek doğrudur </u></b>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> Title etiketi ile başlığı belirttikten sonra Başlık bölümü kapatılır ve ana kısım olan Gövde'ye geçilir. Sayfamızda görüntülemek istediğimiz bütün bilgileri Gövde kısmına koyarız. Bir etiket içerisinde varsayılan olarak gelen değeri değiştirmek için bazı parametreler kullanılır. Aşağıdaki örnekte tablo etiketinin içindeki border ifadesi parametredir ve tabloya kenarlık verilir. Parametreler her zaman başlangıç etiketi içerisinde ve “” içerisinde yer almaktadır. <tableborder=“1"> Etiketler iç içe geçebilirler ama dikkat edilmesi gereken nokta ilk açılan etiketin en sonda kapatılmasıdır. Aşağıda yanlış ve doğru uyguluma örneği verilmiştir. <b><u>Bu örnek yanlıştır </b></u> <b><u>Bu örnek doğrudur </u></b>
Temel Etiketler HTML de temel etiketler deyince ilk akla gelen tabiki “html” etiketi olmalıdır. Ardından başlık ve gerekli ayarlamaların yapıldığı “head” etiketi ve son olarak gövde bölümü olarak adlandırılan ve asıl web sayfalarının tasarlandığı bölüm olan “body” bölümü gelmektedir. HTML, HEAD, TITLE Etiketi Bu etiketler bir HTML dokümanında olmazsa olmaz diye tabir edilebilecek etiketlerdir. HEAD etiketi içerisine yazılan diğer etiketler arasında en bilineni TITLE etiketidir. TITLE etiketi dışında bazı etiketlerde HEAD etiketi altında kullanılmaktadır.
BODY Etiketi Web tarayıcısından görüntülenen her türlü bilgi <body>.....</body> etiketleri arasına yazılan bilgilerdir. Bu bilgiler düz metin olabileceği gibi, tablo ,resim, video flash animasyonları, video görüntüleri de olabilir. BODY etiketinde kullanılan parametreler de vardır. Bu parametreler sayesinde kullanılan sayfanın özellikleri de belirlenmiş olur. HR ve BR Etiketi HR ve BR etiketleri sonlandırma etiketi bulunmayan kodlardır. Sonlandırma etiketi bulunmayan etiketler <br /> ve <hr /> şeklinde de yazılabilir. <br> Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. <p>
<html> <title> HR Etiketi </title> <body> <hr> <hr color=red> ( color è Renkverir) <hrcolor=blue size=5> (size è Kalınlık verir) <hr color=green width=500> </body> </html> HR Etiketi’nin Parametreleri <hrwidth=100> Çizginin genişliğini ayarlamak için kullanılır. <hr size=20> Çizginin kalınlığını ayarlamak için kullanılır. <hrcolor=ff0000> Çizginin rengini ayarlamak için kullanılır. <hralign=right> , left, center Çizginin sayfadaki yatay konumunun sola, sağa veya ortaya hizalanmasını sağlar.
<html> <head> <title>Buraya sitenin adı yazılır</title></head> <body>Sitenizde olması gereken herşey bu arada yer alacak</body> </html>
Biçimlendirme Etiketleri HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgeye başlık, paragraf, kalın-italik-alt çizgili, fontlar gibi biçimlendirme uygulanabilir. HTML etiketleri birbirine bağlı değildir. Etiketleri kullanmak için belli bir sıra yoktur. İstenildiğinde kullanılabilir. Başlık Etiketleri HTML etiketlerinde ana başlık ve alt başlıkları düzenlemek adına belirlenmiş 6 tane başlık vardır . Bunlardan en büyüğü <h1>, en küçüğü <h6>dır. Başlık etiketlerinde Web tarayıcı tarafından otomatik olarak bir alt satıra geçme etiketi uygulanır.
Paragraf Etiketi Paragraf etiketi Web sayfasındaki paragrafları tanımlamak için kullanılır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar. Paragraf etiketinin varsayılan olan metni “sola” dayalı olarak yazar. Eğer istenirse align parametre özellikleri değiştirilerek metnin “ortalı” yada “sağa” dayalı olarak yazılabilir. Paragraf etiketi için <p> etiketi sonlandırmalı olarak kullanılır. Sola dayalı olması için: <p>Yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=center>Yazınızı buraya yazacaksınız</p> Sağa dayalı olması için: <p align=right>Yazınızı buraya yazacaksınız</p>
Kalın, İtalik, Alt Çizgili Yazı içerisinde belirlenmiş bir kelime yada ifadenin kalın, italik ya da alt çizgili yazılması istendiğinde kullanılan etiketlerdir. Kalın (Bold) yazı <b>Yazınızı buraya yazacaksınız</b> Eğik (İtalik) yazı <i>Yazınızı buraya yazacaksınız</i> Altı çizgili (underline) yazı <u>Yazınızı buraya yazacaksınız</u>
Font Etiketi Font etiketi ile varsayılan olarak belirlenmiş metin rengi, boyutu yada yazı tipi özelliği değiştirilebilir. Bunun için kullanılan etiket <font>..</font> tur. Font etiketi başlangıç seviyesinde ki kullanıcılar için kullanılırken ileri seviyelerde bu işlem stiller(CSS) ile yapılmaktadır. <font> ............... </font> <font size="3" face="Arial" color="red">USKMYO</font> Ayrıcarenklerinkodlarıkullanılabilir. blue - #0000ff yellow - #ffff00 white - #ffffff black - #000000
Madde İmli Listeleme Etiketi Madde imli listeleme ( unorderedlist) etiketi <ul>..</ul>dir. Madde imleri çeşitli simge şekilleri ile kullanılabilir. Varsayılan olarak kullanılan simge içi dolu daire simgesidir. Bunun dışında başka bir simge kullanılmak istenirse <ul> etiketi çerisinde parametre olarak belirtilmesi gerekir. Listeleme etiketlerinde kelime yada cümleler <li> etiketi ile listelenir. Bu etiket için sonlandırma etiketi kullanılmaz. İç içe oluşturulacak madde imli listeleme için ayrı ayrı <ul> etiketi kullanılır. <li> etiketleri arasına yazılır: En sevdiğim müzik türleri: <ul> <li>POP <li>Jazz <li>Modern </ul>
<UL> etiketin yandaki "type" değerinin karşısına "DISC" yazarsak içi dolu dairemiz, "CIRCLE" yazarsak, içi boş dairemiz ve "SQUARE" yazarsak köşeli bir noktamız olur. En sevdiğim müzik türleri:<ultype="disc"><li>POP</ul><ultype="circle"><li>Jazz</ul><ultype="square"><li>Modern</ul>
Numaralı Listeleme Etiketi Numaralı listeleme (orderedlist) etiketi <ol>..</ol>dir. Numaralı listeleme çeşitli biçimlerde kullanılabilir. Varsayılan olarak kullanılan “1.”dir. Bunun dışında başka bir numaralandırma kullanılmak istenirse <ol> etiketi çerisinde parametre olarak belirtilmesi gerekir. Listeleme etiketlerinde kelime yada cümleler <li> etiketi ile listelenir. Bu etiket için sonlandırma etiketi kullanılmaz. İç içe oluşturulacak madde imli listeleme için ayrı ayrı <ol> etiketi kullanılır.
Bazen de listemizin hem sayı ile listelenmesini aynı zamanda da normal bir şekilde listelenmesini isteriz.. Bunun için: <ol><li>En sevdiğim yaz meyveleri:<ul><li>Kayısı<li>Şeftali<li>Erik<li>Üzüm</ul><br><li>En sevdiğim kış meyveleri:<ul><li>Portakal<li>Mandalina<li>Nar<li>Ayva</ul></ol>
Tanımlama Listeleme Etiketi Tanımlama listelerinde (definitionlist) amaç maddeleri sıralama değildir. Burada adından da anlaşılacağı gibi tanımlama yapılır. Her bir tanımlama listesinin başlangıcı için <dl>..</dl> etiketi kullanılır. Madde sıralamada kullanılan <li> etiketi yerine <dt> ve <dd> etiketleri kullanılır. Açıklanacak terim <dt>..</dt> ile oluşturulurken tanımlama işleminin yapıldığı bölüm <dd>..</dd>dir.
<dl> <dt><font size="3" color="red"> En sevdiğim hayvanlar</font> <dd>Kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane... <dt>En Sevdiğim çiçekler <dd>Papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de... <dt>En sevdiğim yemekler <dd>Köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim </dl>
LinkEtiketi Bağlantı anlamına gelen link kelimesi sayfalar arası ilişkilendirme yapmak için kullanılır. Link etiketi <a href=“protokol:adres”>Gözükecek Metin</a>dır. Link etiketinin kullanıldığı yerler; Web sayfalarının birbiri ile ilişkilendirmek, Mail adresine yönlendirme yapmak, Bir dosyaya bağlantı kurmak, Bir resme link özelliği kazandırmak, vb.
Mail LinkEtiketi Mail link etiketine tıklandığında o bilgisayardaki aktif olarak kullanılan ve yapılandırılmış olan e-mail programı açılır ve kime bölümünde etiket içerisinde yazılan adres gözükür. Mail etiketinin kullanım şekli şu şekildedir: <a href=“mailto:e-mail adresi”> Görüntülenmesi istenen metin </a>
Http - ../ - Ftp LinkEtiketi Tasarımı yapılan bir site için aynı klasörde bulunan tüm diğer html dokümanlarına ulaşmak, farklı klasör deki bir web dokümanına ulaşmak, farklı bir sitedeki sayfaya ulaşmak yada ftp klasöründen bir dosya indirmek için mail etiketlendirme yapılabilir. Örnek Kullanım: <a href=“http://www.sdu.edu.tr”> SDÜ Ana Sayfası </a>
ResimEtiketi HTML dokümanlarında resimler <img> etiketi ile oluşturulur. Bu etiketin sonlandırma etiketi bulunmaz. Web sayfasına resim eklemek için <imgsrc=“dosyanın kaynak yeri yada html adresi” > şeklinde yapılmaktadır. Bir klasörün içindeki resmin siteye eklenmesi için <imgsrc="resim/deniz.jpg" > şeklinde klasör isminin belirtilmesi gerekmektedir. Bir üst dizindeki resim kullanılacaksa <imgsrc=“../tablo.jpg" > şeklinde kullanılmalıdır. Eğer ki dosya html sayfasından alınacaksa <imgsrc=“http://basin.sdu.edu.tr/haber/2009/4392/4392_01.jpg”> Bu etiketin alt parametreleri mevcuttur.
Resim Etiketi Özellikleri Tüm Parametreleri ile Örnek Kullanımı : <imgsrc=“foto.jpg" border="5" height="105“ width="90" align="center" alt=“Tatil_Antalya">
Resme Link Ekleme Resimlere link verme işlemi <img> ve <a> etiketlerinin aynı anda kullanılması ile gerçekleştirilmektedir. Burada öncelikle <a> etiketi ile linkin konumlanacağı adres yazılır. Görüntülenecek metin kısmına ise resmi yerleştiririz. <a href="htttp://google.com"><imgsrc="file:///Macintosh HD/Users/onurpisirir/Pictures/PNG/Run.png" width="160" height="179" /></a>
TabloEtiketi Tablolar sayfaları satır ve sütunlara bölmek ve daha düzenli bir içerik oluşturmak için kullanılırlar. Tablo oluşturma günlük yaşantımızda sıkça başvurduğumuz bir yöntemdir. Bilgilerin sistemli bir şekilde yerleştirilmesi ve bilgilerin okunmasını kolaylaştırma görevlerini üstlenir.
TABLE Etiketi HTML de tablo <table> .. </table> etiketleri ile oluşturulur. Daha sonra <tr>..</tr> satır açmak için, ardından <td>..</td> o satırda hücre oluşturmak için kullanılan etiketlerdir. Tablolara başlık eklenmek istendiğinde kullanılacak olan etiket <th>..</th>’ tır.
FrameEtiketi Frame (çerçeve) etiketi HTML sayfalarının birden fazla HTML dokümanını yayınlamak için kullanılan bir etiketlemedir. Bu sayede bir bölüm sabit kalırken diğer bölüm HTML sayfanın içeriğini ekrana getiren sayfa olacaktır. Bu şekilde oluşturulan her bir çerçevede yayınlanan HTML sayfası birbirinden bağımsızdır. Aşağıdaki örnekte sol tarafta linklerin bulunduğu ayrı bir frame, sağ tarafta tıklanan linkin görüntülendiği sayfa ise başka bir html dokümanıdır.
FRAMESET ve FRAME Etiketi <frameset>..</frameset> etiketi pencerenin hangi biçimde çerçevelere ayrılacağını belirler. Frameset’ ler satır ( rows) yada sütun ( cols) olarak belirlenir. <frame> ( sonlandırma etiketi yok) etiketi ise her bir çerçevede hangi HTML dokümanının görüntüleneceğini belirler.
