SDÜ - UE-MYO - Osman DABAN

Transcript SDÜ - UE-MYO - Osman DABAN

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 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 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 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 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 Ç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ı
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 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 .. 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 - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000
Madde İmli Listeleme Etiketi
Madde 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 Etiketi
Numaralı 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 Etiketi
Tanı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 Etiketi
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 Link Etiketi
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 Link Etiketi
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>
Resim Etiketi
HTML 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 Özellikleri
Tüm Parametreleri ile Örnek Kullanımı :
<img src=“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
<a href="htttp://google.com"><img src="file:///Macintosh
HD/Users/onurpisirir/Pictures/PNG/Run.png" width="160" height="179" /></a>
Tablo Etiketi
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.
Frame Etiketi
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.

SDÜ - UE-MYO - Osman DABAN

Transcript SDÜ - UE-MYO - Osman DABAN

Directory