- harryzzers#7700
- Katılım
- 19 Eyl 2021
- Mesajlar
- 1,522
- Tepkime puanı
- 424
- Şehir
- Yurtdışı
Açıklama
Hiper Metin İşaretleme Dili web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir. HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz.
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
: w3.org/html/, whatwg.org
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
: html,.htm
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
:
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
ve
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
: 1993 (28 yıl önce)
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
: Tümü
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
: Living Standard (2021)
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
:
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
Örnek Kod:
BASİT HTML ETİKETLERİ
Başlıklar:
6 çeşit başlık vardır:<h1>, <h2>, . . . <h6>. Bunlardan en büyüğü <h1>, en küçüğü ise <h6>'dır.
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
<h1>H1 ile yapılan başlık</h1> <h2>H2 ile yapılan başlık</h2> <h3>H3 ile yapılan başlık</h3> <h4>H4 ile yapılan başlık</h4> <h5>H5 ile yapılan başlık</h5> <h6>H6 ile yapılan başlık</h6> | H1 ile yapılan başlıkH2 ile yapılan başlıkH3 ile yapılan başlıkH4 ile yapılan başlıkH5 ile yapılan başlıkH6 ile yapılan başlık |
Paragraflar <p> etiketiyle oluşturulur. Paragraf metni <p> ile </p> arasında yer alır. Örneğin:
<p>Bu bir paragraftır. </p>
Paragraf başlatmadan bir satır boşluğu yaratmak için <br/> etiketi kullanılır. Örneğin:
<p>Paragrafın ilk satırı. <br />Paragrafın ikinci satırı. </p>
Sayfaya (aşağıdaki gibi) yatay çizgi eklemek için <hr> etiketini kullanırız.
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
<p>Birinci paragraf</p> <p>İkinci paragraf </p> <p>Üçüncü paragraf <br />Alt satır </p> <hr /> | Birinci paragraf Ikinci paragraf Üçüncü paragraf Alt Satır |
METİNLER
HTML:
<font color="red" face="arial" size="3">. . </font>Color yazı karakterinin rengini, face yazi tipini (arial, verdana, tahoma gibi), size da boyutunu belirler. Size değişkeninde kullanılan rakam 1'den 7'ye kadardır.
<font> etiketi HTML 4. 0 'da desteklenmemektedir ama yine de taracıyıcılar <font> etiketi ile yapılmış biçimlendirmeyi destekler. Hala pek çok web sayfasında <font> etiketi kullanılmaktadır. Başlangıç seviyesi için <font> etiketi kullanmak yeterliyken ilerki seviyeler için stilleri kullanmanız tavsiye edilir. (Bkz:
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
)Font etiketi ile birlikte aşağıdaki tabloda verilen etiketleri kullanarak sayfanızdaki metinleri biçimlendirebilirsiniz.
| Etiket | Açıklama | Uygulama |
|---|---|---|
<b>. . </b> | Kalın biçimlendirme | Metin |
<i>. . </i> | İtalik biçimlendirme | Metin |
<u>. . </u> | Altı çizgili biçimlendirme | Metin |
<sup>. . </sup> | Üst simge | X2 |
<sub>. . </sub> | Alt simge | H2 |
<code>. . </code> | Bilgisayar kodu biçimi | Metin |
<blockquote>. . </blockquote> | Alinti biçimi |
|
Renkler :
HTML dokümanlarında renkler ya İngilizce isimleriyle, ya da 16'lık sayı düzenindeki "hexadecimal" değerleriyle belirtilir.
En sık kullanılan ve hemen hemen bütün tarayıcıların desteklediği 16 renk aşağıdakilerdir:
| Renk | Renk adi: | Renk | Renk adi: |
| aqua | | black |
| blue | | fuchsia |
| gray | | green |
| lime | | maroon |
| navy | | olive |
| purple | | red |
| silver | | teal |
| white | | yellow |
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
bulabilirsiniz.Örnek :
<body bgcolor="green">
Bu örnekte sayfanın arkaplan rengi yeşil olur.
<body bgcolor="#008000"> aynı sonucu verir.
Örnek :
<font color="#4B0082"> Font rengi "indigo" oldu. </font> Etiketi kapattığımız için tekrar normale döndü.
LİNKLER:
Linkler <a>. . . </a> etiketi içinde, href="" komutuyla belirtilir.
Örnek:
HTML:
<a href="http://www.metu.edu.tr" target="_blank">ODTÜ Ana Sayfası</a>
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
Bu örnekte bir de target değişkeni verilmiştir. Adresi verilen web sayfasının başka bir pencerede açılmasını isterseniz target="_blank" komutunu eklemeniz gerekir. Aynı pencerede açılmasını isterseniz ilgili değişkeni target="_top" şeklinde yazabilirsiniz. Hiç bir şey yazılmazsa da sayfa aynı pencerede açılır.
title değişkenini kullanarak da fare linkin üzerine geldiğinde gözükecek link açıklamasını ekleyebilirsiniz. Aşağıdaki örnekte fareyle linkin üzerine gelip beklerseniz Orta Doğu Teknik Üniversitesi yazısını göreceksiniz.
HTML:
<a href="http://www.md-12.com" target="_blank" title="Kişisel Sayfam için tıklayın" >Harry</a>
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
Eğer hazırladığınız dokümanlar arasında bir bağlantı kurmak istiyorsanıiz, <a> etiketini aşağıdaki gibi kullanmalısınız.
HTML:
<a href="dosyaadi.HTML">Önceki sayfa</a>Bir e-posta adresine link vermek istiyorsanız:
HTML:
<a href="mailto:mail@mail.com.tr">E-posta atmak için tıklayın. </a>E-posta atmak için tıklayın.
Bu linke tıklandığında bilgisayarda kurulu varsayılan e-posta okuma programı açılır ve gönderilecek adres bölümünde etiket içinde belirtilen adres yazar.
Aynı doküman içinde bağlantı kurmak istersek tutturucu noktaları (anchor points) kullanırız. Tutturucu HTML sayfasında bir yer işaretidir. İsmi ile bir bölgeyi belirler ve bu tutturucuya bir link verebilirsiniz. Bu sayfadaki her konu başlığına bir tutturucu belirlenmiştir. Sayfa başındaki listede herhangi bir başlığa tıkladığınızda sayfa içindeki ilgili konu başlığına gider. Örnek olarak Resim Ekleme bölümüne gitmek için
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
tıklayabilirsiniz. Tutturucuların kullanımı aşağıdaki gibidir.Linkler başlığına aşağıdaki gibi bir tutturucu belirleriz.
HTML:
<a name="link">Linkler</a>Sayfanın herhangi bir bölümünde yukarıda belirlediğimiz tutturucuya aşağıdaki gibi link veririz
HTML:
<a href="#link">Linklere git</a>Sağ tarafta bulunan Başa Dön linkleri de bu şekilde hazırlanmıştır.
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
RESİM EKLEME
Resim ekleme:
<img src="resim.jpg" />
şeklinde olur. Dikkat etmemiz gereken kulanacağımız resmin dizin yapısıdır.
Bağımsız Değişkenler :
HTML:
<img src="" width="" height="" border="" alt="" />alt: Resme açıklama vermemizi sağlar. Fareyi resmin üstüne getirdiğimizde, alt değişkeninde yazılan açıklama ekranda çıkar. Eğer resim açılmazsa, onun yerine açıklama görünür.
src : Resim dosyasının kaynağını belirtir.
** Eğer web sayfasının arka planında bir imajın çıkması istenirse:
HTML:
<body background="resim.jpg">Resimleri linke dönüştürmek için <a> etiketi ile <img> etiketini içiçe kullanırız.
HTML:
<a href="http://www.metu.edu.tr" target="_blank"><img src="odtu.jpg" /></a>Not: Resimlerin width ve height değişkenlerini belirtmeniz sayfanızın yüklenirken şeklinin bozulmasını önler.
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
LİSTELER:
Üç çesit liste vardır:
i. Sıralı Liste(Ordered List):
Örnek:
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
| <ol type="1">Çerezler: <li>Kavurga <li>Çekirdek <li>Mısır <li>Cips </ol> <ol type="a">Içkiler: <li>Bira <li>Votka <li>Şarap <li>Viski <li>Rakı </ol> |
|
type: {1, a, A, I, i}
Listeyi start değişkeni ile istediğimiz sayıdan baslatabiliriz:
Örnek:
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
| <ol start="199">Çerezler: <li>Kavurga <li>Çekirdek <li>Mısır <li>Cips </ol> |
|
Örnek:
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
| <ul type="circle">Çerezler: <li>Kavurga</li> <li>Çekirdek</li> <li>Mısır</li> <li>Cips</li> </ul> <ul type="disc">Içkiler: <li>Bira</li> <li>Votka</li> <li>Şarap</li> <li>Viski</li> <li>Rakı</li> </ul> |
|
type:{square, disc, circle}
iii. Tanımlama Listeleri (Definition List):
Örnek:
| HTML etiketi | Etiketin Web Sayfasındaki görüntüsü |
| <dl> <dt>Karbonhidrat ve ben <dd>En çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım. </dd></dt> <dt>Sebze ve ben <dd>Sebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir. </dd></dt> <dt>Et ve ben <dd>Et seven bir insanimdir. Her çesit kebabi afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama. </dd></dt> </dl> | Karbonhidrat ve benEn çok bol karbonhidratlı yemekleri severim, özellikle de makarna ve türevlerini. Lazanya favorimdir. Pizza ve mantıya da bayılırım.Sebze ve benSebzeyle aram pek iyi değildir ama taze fasulye oldukça lezziz bir yiyecektir. Onun dışında dolma, sarma da güzeldir.Et ve benEt seven bir insanımdır. Her çesit kebabı afiyetle yerim. Kırmızı olsun, beyaz olsun, hemen hemen bütün etleri yerim. Balık seçerim ama. |
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
TABLOLAR
Tablolar <table>. . . . </table> etiketleri arasında oluşturulur. <table> etiketinden sonra daima <tr> gelir. Her satır tanımlandığında <tr>, her hücre tanımlandığında da <td> etiketi kullanılır.
Örnek :
HTML:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td>4. hücre</td><td>5. hücre</td><td>6. hücre</td></tr>
</table>| 1. hücre | 2. hücre | 3. hücre |
| 4. hücre | 5. hücre | 6. hücre |
<table border="" cellpadding="" cellspacing="" width="" height="" bgcolor="" align="" valign="">
<td height="" width="" bgcolor="" align="" valign="" colspan="" rowspan="">
border : Çerçevenin kalınlığını belirler. border="0" dersek tabloda çerçeve bulunmaz, bu miktarı arttırdıkça çerçevenin kalınlığı da artar.
cellpadding , cellspacing : Hücre elemanlarının sınırlara olan uzaklığı cellpadding, satır ve sütunların uzaklığı ise cellspacing değişkeni ile belirtilir.
bgcolor: <table bgcolor="red"> şeklinde kullanarak bütün tablo ya da <td bgcolor= "red"> şeklinde sadece tek bir hücre renklendirilir.
align : Hücredeki elemanın yatay konumunu belirler ve "right, left, center" opsiyonları ile kullanılır.
valign : Hücre elemanının düşey konumunu belirler ve opsiyonları "top, bottom, middle"dır.
colspan , rowspan : Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan değişkeni kullanılır. Birleştirilen hücreye ait <td>. . </td> etiketi silinir.
Örnek :
HTML:
<table border="1">
<tr><td>1. hücre</td><td>2. hücre</td><td>3. hücre</td></tr>
<tr><td rowspan="2">4. hücre</td><td colspan="2">5. hücre</td></tr>
<tr><td>6. hücre</td><td>7. hücre</td></tr>
</table>| 1. hücre | 2. hücre | 3. hücre |
| 4. hücre | 5. hücre | |
| 6. hücre | 7. hücre |
FORMLAR
Formlar <form>. . . </form> etiketleri arasında oluşturulur. Form bilgilerini action değişkeninin içine yazdığınız dosyaya veri olarak gönderebilirsiniz. Formlar sayesinde anket ve geribildirim uygulamaları hazırlayabilirsiniz. Ayrıntılı bilgi için
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
tıklayın.Örnek:
HTML:
<form name="kimlik" action="gonder.php" method="get">
Isim/soyad : <input type="text" size="20" name="isim"><br>
Doğum yeri : <input type="text" size="20" name="dogumyer" ><br>
Doğum tarihi : <input type="text" size="10" name="dogumtarih" ><br>
Cinsiyet : <input type="radio" name="cins" value="erkek" > Erkek <input type="radio" name="cins" value="kiz"> Kiz<br>
Hobiler:<br>
<input type="checkbox" name="muzik" >Müzik dinlemek<br>
<input type="checkbox" name="manti" >Manti açmak<br>
<input type="checkbox" name="bungee" > Bungee Jumping<br>
<input type="checkbox" name="aikido">Aikido<br>
<input type="checkbox" name="halay">Halay çekmek<br>
<input type="checkbox" name="diger">Diğer :<br>
<textarea rows="4" cols="30" name="diger"></textarea><br>
Şifrenizi giriniz:<br>
<input type="Password" size="15"><br>
<input type="submit" value="GÖNDER"> <input type="reset" value="SIL">
</form>method="get":Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post":Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text" : Tek satırlık bir metin alanı açar.
size="" :Bu metin alanının boyutunu belirler.
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür.
<textarea rows="" cols=""> :type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.
Listeleme:
Select ve option etiketlerini kullanarak seçimlik liste (menü) oluşturabiliriz. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir.
Örnek:
HTML:
<select name="otolar">
<option>Alfa Romeo</option>
<option>BMW</option>
<option>Peugeot</option>
<option>Renault</option>
<option>Seat</option>
<option>Lada</option>
</select>|
Bu bağlantıyı görmek için
Giriş yap veya kayıt ol.
|-
Bu bağlantıyı görmek için Giriş yap veya kayıt ol.tarafımca düzenlenmiştir. Tüm linkler ve yönlendirmeler Metu.Edu sitesine aittir.
