- 14 Tem 2013
- 1,402
- 0
HTML(Hyper Text Markup Language) bir içerik düzenleme dilidir.Programlama dili değildir çünkü işlev bakımından program oluşturulmaz.HTML, W3C tarafından standartlaştırılmaktadır.Belli etiketler üzerinden websayfalarına içerik girişi ve içerik tasarımı yapılır.Çeşitli programlama dilleriyle bir arada kullanılabilir.Mesela HTML ile genel bir yapı oluşturursunuz.Yazıları,resimleri belirlersiniz veya tablo oluşturur link verirsiniz.Daha sonrada CSS ile bu yapılarınızı şekillendirirsiniz.Daha sonrada PHP gibi bir dil ile bu şekillendirdiğiniz sayfalara çeşitli işlevler kazandırabilirsiniz.CSS(Cascading Style Sheets) HTML'in yetersiz kaldığı yerlerde kullanılmak üzere geliştirilmiş bir tasarım dilidir diyebiliriz.Html 4.0 sürümü ile stil dosyaları geliştirilmiştir.Tanım dosyaları .css uzantılıdır.İstenirse html ile aynı kodlamanın bulunduğu sayfadada yazılabilir ancak harici .css dosyaları websitenin daha hızlı açılmasını sağlamaktadır.Şimdi genel yapıdan bahsettik HTML'den giriş yapalım.
Lafı fazla uzatmıcam genel yapıdan bahsedip örnek verip geçicem arkadaşlar.
<html>
<head>
</head>
<body>
</body>
</html>
Yukarda bir html şablonu var.Html kodları <html>..</html>etiketleri arasına yazılırlar.<head>..</head> ve <body>..</body> bölümlerinden oluşurlar.
Head Bölümü:Genelde sayfada direk olarak gözükmeyen teknik bilgilerin yer aldığı kısımdır.Ayrıca sayfanın başlığıda(tittle) bu kısımda yer alır.Arama motoruyla ilgili anahtar kelimeler felanda burada bulunur.
TİTLE:Sayfa başlığı anlamına gelir head etiketleri arasına yazılır.
<head>
<tittle>Sayfa başlığı</tittle>
</head>
Body:Head bölümüne göre daha çok yazıların,içeriklerin bulunduğu kısımdır.Yani bir sayfadaki yazı,resimler bu bölümde yer alır.Paragraflar,paragraf başlıkları vb içerebilir.
PARAGRAF BAŞLIKLARI
<h1>..</h1>
<h2>..</h2>
<h3>..</h3>
<h4>..</h4>
<h5>..</h5>
<h6>..</h6>
6 adet etiketi vardır.Etiket numarası arttıkça boyutu küçülür.Yani h1 en büyük h6 en küçük puntodadır.
HORİZONTAL LİNE
Sayfada yatay düzlem boyunca düz bir çizgi çeker.Sayfayı boyutlarken,içerik alanlarını belirlerken kullanılır.
</hr> şeklinde kullanılır.
YENİ SATIRA GEÇİŞ
<br /> etiketiyle bir yazıda yeni satıra geçiş yapabiliriz.
PARAGRAF OLUŞTURMA
<p>..Metin..</p> şeklinde oluşturulabilir.
<pre>..Metin..</pre> şeklindede paragraf oluşturabiliriz.p tag'inden farklı olarak boşluk ve yazının yapısı korunmak istediğinde pre tag'leri kullanılır.
YAZI TÜRLERİ
<b>..Bold yazı..</b> Kalın yazı yazar.
<strong>..Kalın Yazı..</strong> Bold ile aynı görevi görür.Kalın yazı yazmayı sağlar.
<em>İtalic yazı</em> İtalic yani yana yatık bir biçimde yazar.
<b><em>..HEM İTALİC HEM KALIN YAZI..</em></b>
YORUM SATIRI
Uzun kodlar yazdıktan sonra kodlarımıza bir süre sonra baktığımızda nerede ne kullandığımızı hatırlamayabiliriz.İşte bu yüzden kodlarken açıklamak amacıyla yeri geldiğince yorum satırları kullanılırız.Bu satırlar herhangi bir işleme tabi tutulmaz.
<!-- .......... --> şeklinde kullanılır.
<!-- Bu bir yorum satırıdır. -->
LİSTE YAPILARI
<ul>..</ul> unordered lists yani sıralı olmayan liste anlamına gelir.
<ol>..</ol> ordered lists yani sıralı liste haline gelir.
Listede yer alcak yazı ve elemanlar yukarda bahsedilen 2 tag arasında yazılır.
<ul>
<li>Yazı1</li>
<li>Yazı2</li>
<li>Yazı3</li>
</ul>
Yukardaki listenin çıktısı sıralı olmayan bir liste şeklinde olacaktır.
<ol>
<li>Yazı1</li>
<li>Yazı2</li>
<li>Yazı3</li>
</ol>
Burdaki listenin çıktısı ise başlarında 1. 2. 3. gibi ibareler bulunan bir liste çıktısı olacaktır.
TABLO YAPILARI
<table>..</table> Tablo özellikleri bu taglerle belirtilir.Tablo yapıları bu tagler arasında yer alır.
<table border=10>..</table>
border özelliği tabloya çerçeve katar.
<table width=500>..</table>
width tablo genişliğini belirlerken kullanılır.Eğer yazılar sığmazsa alt satıra geçer iyi ayarlamak gereklidir.
<table cellpadding=10 cellspacing=5>..</table>
yukarda cellpadding ve cellspacing adında 2 tane deyim kullandık.
cellpadding sütunlar içindeki yazıların sağa,sola,yukarıya,ve aşağıya olan mesafesini belirtmek için kullanılır.
cellspacing ise hücreler arasındaki mesafeyi ayarlarken kullanılır.
<tr>..</tr> Tablo satırı anlamına gelir.Aynı satırda buluncak hücreler,veriler aynı tr tagleri arasında bulunur.
<td>..</td> Tablo sütunları anlamına gelir.
<th>..</th> Table header yani tablo başlığı anlamına gelir.<tr>..</tr> tagleri arasında kullanıldığında sütunları bold ve ortalanmış bir şekilde yazar.Tabloda genel başlık ifade eden sütunlar için kullanılır.
colspan özelliği kaplayacağı alanı belirlerken kullanılır mesela 4 hücre var bu 4 hücreyide kapsasın istiyorsak colspan=4 yaparız.
<table border=10>
<tr>
<th colspan=4>BU EN ÜSTTE BULUNAN 4 SÜTUNUDA KAPSAYAN YAZIDIR.</th>
</tr>
<tr>
<th>Ögrenci Adı</th>
<th>Ögrenci Soyadı</th>
<th>Ögrenci Numarası</th>
<th>Ögrenci Notu</th>
</tr>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>123</td>
<td>100</td>
</tr>
</table>
Bide 3 sütunu kapsayan şekline bakalım.
<table border=10>
<tr>
<th colspan=4>BU EN ÜSTTE BULUNAN 4 SÜTUNUDA KAPSAYAN YAZIDIR.</th>
</tr>
<tr>
<th>Ögrenci Adı</th>
<th>Ögrenci Soyadı</th>
<th>Ögrenci Numarası</th>
<th>Ögrenci Notu</th>
</tr>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>123</td>
<td>100</td>
</tr>
</table>
Yukardaki kodların çıktısı aşağıdaki gibi olacaktır.
LİNK VERME
<a href="linkadresi" tittle="nesne yada yazının üstüne gelince görülcek yazı">Link verilcek nesne yada yazı</a>
SAYFA İÇİNDE BELLİ BİR YERE GÖNDERME
<a name="dönüs"></a>
..YAZILAR..RESİMLER..vs..
<a href=#dönüs>Dönüs kısmına gel</a>
Yukarda naptık açıklayayım.Dönmek istediğimiz yere <a name="dönüs"></a> ile bir dönüs ibaresi bıraktık.
Daha sonra <a href=#dönüs>Dönüs kısmına gel</a> ile bu kısma link verdik."Dönüs kısmına gel" yazısına bastığımızda bizi dönüs ibaresi bıraktığımız yere gö-türecektir.Aynı sayfa içinde izbarını istenilen yere gö-türür.
LİNK VEREREK MAİL GÖNDERME
<a href="mailto:[email protected]">Mail göndermek için tıklayınız.</a>
Yukardaki gibi istenilen adrese mail göndermek için kullanılır.Yazıya tıklanınca Outlook programı başlatılacaktır.
RESİM EKLEME
<img src="resimadresi" width=500 height=500/> şeklinde resim eklemesi yapılabilir.width ve height resmin boyutlarını belirler.
İstiyorsanız <a href> tag'i içerisine alarak resim'e link koyabilirsiniz.
RESME LİNK VERME
<a href="istenilenadres"><img src="resimlinki" width=500 height=500/></a>
Şimdilik bu kadar daha sonra güncellerim belki ~ xMaterdom
Lafı fazla uzatmıcam genel yapıdan bahsedip örnek verip geçicem arkadaşlar.
<html>
<head>
</head>
<body>
</body>
</html>
Yukarda bir html şablonu var.Html kodları <html>..</html>etiketleri arasına yazılırlar.<head>..</head> ve <body>..</body> bölümlerinden oluşurlar.
Head Bölümü:Genelde sayfada direk olarak gözükmeyen teknik bilgilerin yer aldığı kısımdır.Ayrıca sayfanın başlığıda(tittle) bu kısımda yer alır.Arama motoruyla ilgili anahtar kelimeler felanda burada bulunur.
TİTLE:Sayfa başlığı anlamına gelir head etiketleri arasına yazılır.
<head>
<tittle>Sayfa başlığı</tittle>
</head>
Body:Head bölümüne göre daha çok yazıların,içeriklerin bulunduğu kısımdır.Yani bir sayfadaki yazı,resimler bu bölümde yer alır.Paragraflar,paragraf başlıkları vb içerebilir.
PARAGRAF BAŞLIKLARI
<h1>..</h1>
<h2>..</h2>
<h3>..</h3>
<h4>..</h4>
<h5>..</h5>
<h6>..</h6>
6 adet etiketi vardır.Etiket numarası arttıkça boyutu küçülür.Yani h1 en büyük h6 en küçük puntodadır.
HORİZONTAL LİNE
Sayfada yatay düzlem boyunca düz bir çizgi çeker.Sayfayı boyutlarken,içerik alanlarını belirlerken kullanılır.
</hr> şeklinde kullanılır.
YENİ SATIRA GEÇİŞ
<br /> etiketiyle bir yazıda yeni satıra geçiş yapabiliriz.
PARAGRAF OLUŞTURMA
<p>..Metin..</p> şeklinde oluşturulabilir.
<pre>..Metin..</pre> şeklindede paragraf oluşturabiliriz.p tag'inden farklı olarak boşluk ve yazının yapısı korunmak istediğinde pre tag'leri kullanılır.
YAZI TÜRLERİ
<b>..Bold yazı..</b> Kalın yazı yazar.
<strong>..Kalın Yazı..</strong> Bold ile aynı görevi görür.Kalın yazı yazmayı sağlar.
<em>İtalic yazı</em> İtalic yani yana yatık bir biçimde yazar.
<b><em>..HEM İTALİC HEM KALIN YAZI..</em></b>
YORUM SATIRI
Uzun kodlar yazdıktan sonra kodlarımıza bir süre sonra baktığımızda nerede ne kullandığımızı hatırlamayabiliriz.İşte bu yüzden kodlarken açıklamak amacıyla yeri geldiğince yorum satırları kullanılırız.Bu satırlar herhangi bir işleme tabi tutulmaz.
<!-- .......... --> şeklinde kullanılır.
<!-- Bu bir yorum satırıdır. -->
LİSTE YAPILARI
<ul>..</ul> unordered lists yani sıralı olmayan liste anlamına gelir.
<ol>..</ol> ordered lists yani sıralı liste haline gelir.
Listede yer alcak yazı ve elemanlar yukarda bahsedilen 2 tag arasında yazılır.
<ul>
<li>Yazı1</li>
<li>Yazı2</li>
<li>Yazı3</li>
</ul>
Yukardaki listenin çıktısı sıralı olmayan bir liste şeklinde olacaktır.
<ol>
<li>Yazı1</li>
<li>Yazı2</li>
<li>Yazı3</li>
</ol>
Burdaki listenin çıktısı ise başlarında 1. 2. 3. gibi ibareler bulunan bir liste çıktısı olacaktır.
TABLO YAPILARI
<table>..</table> Tablo özellikleri bu taglerle belirtilir.Tablo yapıları bu tagler arasında yer alır.
<table border=10>..</table>
border özelliği tabloya çerçeve katar.
<table width=500>..</table>
width tablo genişliğini belirlerken kullanılır.Eğer yazılar sığmazsa alt satıra geçer iyi ayarlamak gereklidir.
<table cellpadding=10 cellspacing=5>..</table>
yukarda cellpadding ve cellspacing adında 2 tane deyim kullandık.
cellpadding sütunlar içindeki yazıların sağa,sola,yukarıya,ve aşağıya olan mesafesini belirtmek için kullanılır.
cellspacing ise hücreler arasındaki mesafeyi ayarlarken kullanılır.
<tr>..</tr> Tablo satırı anlamına gelir.Aynı satırda buluncak hücreler,veriler aynı tr tagleri arasında bulunur.
<td>..</td> Tablo sütunları anlamına gelir.
<th>..</th> Table header yani tablo başlığı anlamına gelir.<tr>..</tr> tagleri arasında kullanıldığında sütunları bold ve ortalanmış bir şekilde yazar.Tabloda genel başlık ifade eden sütunlar için kullanılır.
colspan özelliği kaplayacağı alanı belirlerken kullanılır mesela 4 hücre var bu 4 hücreyide kapsasın istiyorsak colspan=4 yaparız.
<table border=10>
<tr>
<th colspan=4>BU EN ÜSTTE BULUNAN 4 SÜTUNUDA KAPSAYAN YAZIDIR.</th>
</tr>
<tr>
<th>Ögrenci Adı</th>
<th>Ögrenci Soyadı</th>
<th>Ögrenci Numarası</th>
<th>Ögrenci Notu</th>
</tr>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>123</td>
<td>100</td>
</tr>
</table>
Bide 3 sütunu kapsayan şekline bakalım.
<table border=10>
<tr>
<th colspan=4>BU EN ÜSTTE BULUNAN 4 SÜTUNUDA KAPSAYAN YAZIDIR.</th>
</tr>
<tr>
<th>Ögrenci Adı</th>
<th>Ögrenci Soyadı</th>
<th>Ögrenci Numarası</th>
<th>Ögrenci Notu</th>
</tr>
<tr>
<td>Ali</td>
<td>Veli</td>
<td>123</td>
<td>100</td>
</tr>
</table>
Yukardaki kodların çıktısı aşağıdaki gibi olacaktır.
LİNK VERME
<a href="linkadresi" tittle="nesne yada yazının üstüne gelince görülcek yazı">Link verilcek nesne yada yazı</a>
SAYFA İÇİNDE BELLİ BİR YERE GÖNDERME
<a name="dönüs"></a>
..YAZILAR..RESİMLER..vs..
<a href=#dönüs>Dönüs kısmına gel</a>
Yukarda naptık açıklayayım.Dönmek istediğimiz yere <a name="dönüs"></a> ile bir dönüs ibaresi bıraktık.
Daha sonra <a href=#dönüs>Dönüs kısmına gel</a> ile bu kısma link verdik."Dönüs kısmına gel" yazısına bastığımızda bizi dönüs ibaresi bıraktığımız yere gö-türecektir.Aynı sayfa içinde izbarını istenilen yere gö-türür.
LİNK VEREREK MAİL GÖNDERME
<a href="mailto:[email protected]">Mail göndermek için tıklayınız.</a>
Yukardaki gibi istenilen adrese mail göndermek için kullanılır.Yazıya tıklanınca Outlook programı başlatılacaktır.
RESİM EKLEME
<img src="resimadresi" width=500 height=500/> şeklinde resim eklemesi yapılabilir.width ve height resmin boyutlarını belirler.
İstiyorsanız <a href> tag'i içerisine alarak resim'e link koyabilirsiniz.
RESME LİNK VERME
<a href="istenilenadres"><img src="resimlinki" width=500 height=500/></a>
Şimdilik bu kadar daha sonra güncellerim belki ~ xMaterdom
Son düzenleme:
