HTML’ye Giriş

HTML’ye Giriş

Tim Berners-Lee tarafından 1989 yılında HTML ( Hyper Text Markup 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 (What You See Is What You Get - 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 ’dir ve sonunda etiketinin kullanılması gerekir.

Kullanılan çoğu etiketin kapatma etiketi bulunduğu gibi sadece başlangıç etiketi olan kodlarda vardır. Örneğin etiketinin ş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. <table border=“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. Bu örnek yanlıştır Bu örnek doğrudur 

<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. <table border=“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. Bu örnek yanlıştır Bu örnek doğrudur 

Temel EtiketlerHTML 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 EtiketiBu 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 EtiketiWeb 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 EtiketiHR ve BR etiketleri sonlandırma etiketi bulunmayan kodlardır. Sonlandırma etiketi bulunmayan etiketler ve <hr /> şeklinde de yazılabilir.

 Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. 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. 

<html><title> HR Etiketi </title><body><hr><hr color=red> ( color è Renk verir)<hr color=blue size=5> (size è Kalınlık verir)<hr color=green width=500></body></html> HR Etiketi’nin Parametreleri<hr width=100> Çizginin genişliğini ayarlamak için kullanılır.<hr size=20> Çizginin kalınlığını ayarlamak için kullanılır.<hr color=ff0000> Çizginin rengini ayarlamak için kullanılır.<hr align=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 EtiketleriHTML ç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 EtiketleriHTML 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 EtiketiParagraf 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 etiketi sonlandırmalı olarak kullanılır.

Sola dayalı olması için:Yazınızı buraya yazacaksınız

Ortada olması için:Yazınızı buraya yazacaksınız

Sağa dayalı olması için:Yazınızı buraya yazacaksınız

Kalın, İtalik, Alt ÇizgiliYazı 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ı Yazınızı buraya yazacaksınız

Eğik (İtalik) yazı Yazınızı buraya yazacaksınız

Altı çizgili (underline) yazı Yazınızı buraya yazacaksınız

Font EtiketiFont etiketi ile varsayılan olarak belirlenmiş metin rengi, boyutu yada yazı tipi özelliği değiştirilebilir. Bunun için kullanılan etiket .. 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.

 ............... 

USKMYO

Ayrıca renklerin kodları kullanılabilir.blue - #0000ffyellow - #ffff00white - #ffffffblack - #000000

Madde İmli Listeleme EtiketiMadde imli listeleme ( unordered list) 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:<ul type="disc"><li>POP</ul><ul type="circle"><li>Jazz</ul><ul type="square"><li>Modern</ul>

Numaralı Listeleme EtiketiNumaralı listeleme (ordered list) 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> <li>En sevdiğim kış meyveleri:<ul><li>Portakal<li>Mandalina<li>Nar<li>Ayva</ul></ol>

Tanımlama Listeleme EtiketiTanımlama listelerinde (definition list) 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> En sevdiğim hayvanlar<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>

Link EtiketiBağ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 Link EtiketiMail 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 Link EtiketiTasarı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>

Resim EtiketiHTML dokümanlarında resimler <img> etiketi ile oluşturulur. Bu etiketin sonlandırma etiketi bulunmaz. Web sayfasına resim eklemek için <img src=“dosyanın kaynak yeri yada html adresi” > şeklinde yapılmaktadır.Bir klasörün içindeki resmin siteye eklenmesi için <img src="resim/deniz.jpg" >şeklinde klasör isminin belirtilmesi gerekmektedir. Bir üst dizindeki resim kullanılacaksa

<img src=“../tablo.jpg" > şeklinde kullanılmalıdır. Eğer ki dosya html sayfasından alınacaksa

<img src=“http://basin.sdu.edu.tr/haber/2009/4392/4392_01.jpg”>

Bu etiketin alt parametreleri mevcuttur.

Resim Etiketi ÖzellikleriTüm Parametreleri ile Örnek Kullanımı : <img src=“foto.jpg" border="5" height="105“ width="90" align="center" alt=“Tatil_Antalya">

Resme Link EklemeResimlere 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"><img src="file:///Macintosh HD/Users/onurpisirir/Pictures/PNG/Run.png" width="160" height="179" /></a>

Tablo EtiketiTablolar 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 EtiketiHTML 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.

Frame EtiketiFrame (ç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.

Documents

HTML’ye Giriş