Bugün size her webmasterın bilmesi gereken bir dil olan HTML Dilini elimden geldiği kadar kapsamlı bir şekilde yeni başlayanlar için anlatmaya çalışıcam umarım işinize yarayacakdır .
Öncelikle HTML Nedir ?
HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.
HTML'in ne olduğunu umarım az çok anlamışsınızdır . Şimdi yavaşdan eğitimimize geçelim ;
Öncelikle bunu bi yeni metin belgesinde ya da Notepad++ kullanabiliriz
Şimdi Programımızı açalım :
1) - Html Nasıl Yazılır ? Temel eğitim.
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
2) - Html Etiketleri Nelerdir Nasıl kullanılır
<head> Başlık bilgilerini İçerir
<title>...</title> Sayfanın Başlığı
<body> Dökümanın gövdesi görüntülenecek kısım
<!-- --> Bu tag yorum satırıdır Normalde <body> arasına yazdiğiniz etiketler değerlenirken Bu kodun arasına yazdığınız şeyler Sadece koda bakanlar tarafından görülür tarayıcı bunları derlemez
<h1></h1> Bu tag başlık yapımında kullanılır Sayı büyüdükçe Boyut küçülür
<p></p> Bu tag paragraf oluşturur arasına yazıcağınız şeyler paragraf olarak görüntülenir
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Bu Bir Başlıktır</h1>
<p>Bu Bir paragrafdır</p>
</body>
</html>
<br> Bu tag boş satır oluşturur ne kadar yazarsanız o kadar cok boş satır bırakır
<hr> Bu tag Paragraflar arasındaki boşluğa çizgi çeker
3) - Html Biçimlendirme Ve uygulama örnekleri
<b>...</b> Bu tag Paragrafı kalın yazar eğer paragrafta bir kelimeyi ya da cümleyi kalın yazmak istiyosanız <b> tagları arasına almanız yeterli olur
<big>...</big> Bu tag adındanda anlıcağınız gibi Büyük yazar
<i>...</i> Bu tag italik metin oluşturur
<small>...</small> Bu tag Metni ufaltır
<strong>...</strong> Bu tag ismindende anlaşıldığı gibi Metindeki harflere daha güçlü bir gösterim katar
<sub>...</sub> Bu tag alt indis metinidir genelde matematiksel terimlerde kullanılır arasına yazdığınız kelimeler normal metinin hizasından aşşağıda görünür
<sup>...</sup> Bu tag ise sub tagının tam tersi üst indis metini oluşturur
<ins>...</ins> Bu tag Altı çizili metin oluşturur
<del>...</del> Bu tag Metnin üstüne çizer
<code>...</code> Bu tag ise Metni kod şeklinde yazar
4) - Html Link verme Nasıl Link verilir
<a></a> Bu tag Link verir
<a href="Basınca gidilecek link"><b> Basılmasını istediğiniz cümle ya da paragraf bu şekilde göndermek istediğiniz yere gönderebilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>IPiyango Html Dersleri</h1>
<p>Html Bağlantılarını inceliyoruz</p>
<a href="Site Adresi"> Buraya tıklayınız</a>
</body>
</html>
<a href="....." target="_blank"><b>....</b></a> Bu target blank kodu ise sayfayı götürmek yerine açmak istediğiniz linki yeni bi sekmede açar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>IPiyango Html Dersleri</h1>
<p>Html Bağlantılarını inceliyoruz</p>
<a href="Site Adresi" target="_blank"> Buraya tıklayınız</a>
</body>
</html>
Sayfa içi Yönlendirme:
<a href="#git"Basılması gereken cümle</a> Burası gönderen yeri
<a name="git"<p>Gelineceke paragraf</p> Burası ise Gelinen yer
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#git">Aşşağıya git</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="git"></a>
</body>
</html>(Br komutları sayfa uzasın diyedir)
5) - Html Tablo oluşturma
<table>...</table> Bu tag tablo başlatır
<tr>...</tr> Bu tag tablo satır açmak için kullanılır
<th>...</th> Tablonun başlıklarını belirtmek için kullanılır Tr tagları arasında kullanmalısınız
<td>...</td> Bu tag tablo stun açmak için kullanılır
<table border="İstediğiniz kalınlık"> Bu tag tabloda kenarlık belirtmek için kullanılır
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="3">
<tr>
<th>Adı</th>
<th>Soyadı</th>
</tr>
<tr>
<td>Bedirhan</td>
<td>Kaya</td>
</tr>
</table>
</body>
</html>
!!!Not=Eğer Türkçe karakter kodlama hatası verirse
KOD : <**** charset="UTF-8">
Etiketinin head taglarının arasına koymak sorunu çözecektir
<th width="Genişlik sayı olarak"...</th> Tablonun başlığının genişliği için kullanılır
6) - Html Listeleme etiketleri
<ul>...</ul> Sırasız listeleme için kullanılır
<li>...</li> Listenin maddeleri için kullanılır
<ol>...</ol> Sıralı listeleme için kullanılır (1,2,3,4) Şeklinde
<dl>...</dl> Tanımlama listesi için kullanılır
<dt>...</dt> Dl ile yaptığımız tanımlama listelesinin alt başlıkları için dl tagları arasında kullanılır
<dd>...</dd> Dt tagı ile yaptığımız Dl'nin alt başlıklarının açıklaması olarak kullanılır
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Sırasız listeleme -->
<ul>
<li>Birince Madde</li>
<li>İkinci Madde</li>
<li>Üçüncü Madde</li>
</ul>
<!-- Sıralı Listeleme -->
<ol>
<li>... Eğitimleri</li>
<li>....Eğitimler</li>
<li>.... Eğitimleri</li>
</ol>
<!-- Tanımlama Listesi -->
<dl>
<dt>Html Dersleri</dt>
<dd>Html derslerini öğretildiği forum başlığı</dd>
</dl>
</body>
</html>
7) - Html Formlar Form oluşturma
Burada anlaşılması için yerine kendi örneklerimi yazıcam
<form>...</form> Form başlatır
radio Buton yapmak için kullanılır
name Birbiriyle aynı olmalı sadece birinin seçilmesi için
value Gelen veri tipi
checked Seçilenlerin yanına yazıldığında sayfayı yenileyince sıfırlanması yerine seçili kalmasını sağlar
checkbox Çoklu seçim
<input type="text" name="IPiyango"> Formda Sorular yanında dolduracak sorular oluşturur
<input type="radio" name"1" value="Alıcıya gelen bilgi"> Bu etiketler ise Dolduracak kutucuklar yerine buton vermeye yarar
<input type="radio" name"1" checked=".." value=".."> Bu etiketler sayfayı yenileyince seçili kalmasını sağlar
<input type="checkbox" name="..."> Bu etiketler birden fazla seçeneği seçmek için kullanılır
<form action="Gönderilecek yer" method="get/post" > ............. </form> Bu etiketler gönder butonuna basınca nereye gönderceğini gösterir "get" bilgileri açık gönderir "post" ise gizli bir şekilde gönderir
<input type="submit" name=".." value="Butonun ismi"> Bu etiketler ise Gönder butonu oluşturmak ve butona istediğiniz ismi takmaya yarar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<form>
Adınız
<input type="text" name="Aliveli4950">
<br>
Soyadınız
<input type="text" name="Veliali4950">
<hr>
</form>
<form>
<input type="radio" name="aynı olmalı" value="Erkek(Gönderilen değer)"> Erkek
<input type="radio" name="aynı olmalı" value="Kadın(Gönderilen değer"> Kadın
</form>
<!-- İstedğiniz Kadar seçmek için -->
<form>
Mavi Gözlü
<input type="checkbox" name="">
Sigara içmiyor
<input type="checkbox" name="">
Uzun boylu
<input type="checkbox" name="">
</form>
<!-- Gönder butonu eklemek -->
<form action="http://......" method="post">
Adınız
<input type="text" name="ad">
<input type="submit" name="" value="Gönder butonunun ismi">
</form>
</body>
</html>
<textarea cols="20" rows="50"> .... </textarea> Bu etiketler yeni bir yazı kutucuğu oluşturmanızı sağlar ("cols" "rows") ise metin kutucuğunu enini ve boyunu ayarlamanızı sağlar
8) - Html Sayfaya Resim ekleme
<img src="Resmin adresi"> Bu etiket sayfaya resim eklemenizi sağlar
<img src="Resmin adresi" alt="Resmin tanımlama metini"> Alt parametersi ile resmin tanımlamasını yapmanızı sağlar
<img width="resmin boyu" src="...." alt="..."> Bu etiketler Resmin Orantılı bir şekilde boyunu ayarlar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<img width="400" src="Resmi adresi" alt="Resmin açıklaması">
</body>
</html>
9) - Html Renklerin kullanımı ver Arkaplan Değiştirme
<body bgcolor="#Rengin kodu"> Bu etiket arkaplanın rengini ayarlamanızı sağlar Html renk kodları yazarak Google amcadan bulabilrisniz kodları Ya da ingilizce terim kullanrak Örneğin:black yellow Gibilerinide kullanabilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body bgcolor="#CCFFCC">
</body>
</html>
<body background="Resmin Adresi > Sayfaya resim eklemenizi sağlar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body background="Resmin adresi">
</body>
</html>
10) - Html Div blok yapısı oluşturma
<div> 1.Bölge </div> Bloklar oluşturur kaydedip bakınca anlamsız gelebilir
<div style="background: red;"> 1.Bölge </div> Burada css kodu kullandım aklınız karışmasın sadece blok blok olduğunu anlamnız için yaptım
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<div style="background: red;">1.Bölge</div>
<div style="background: yellow;">2.Bölge</div>
<div style="background: orange;">3.Bölge</div>
</body>
</html>
11) - Html İframe (Sayfa içinde sayfa ekleme)
<iframe src="Sayfa içine ekliyeceğiniz diğer sayfanin adresi"> Bu etiketlerler sayfa içine sayfa ekleyebilirsiniz ((height="Yükseklik") (width="genişlik") ile Ayarlayabilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<iframe src="Gösterilecek sitenin adresi" height="300" width="600"></iframe>
</body>
</html>
12) - Html **** taglar
<head>
<title></title>
<**** charset="UTF-8"> (Sayfa dilini Türkçe olduğunu belirtir)
<**** name="description" content="Html Dersleri"> (Sayfa açıklamsı bi nevi özeti)
<**** name="keywords" content="Html, Taglar vs."> (Anahtar kelimeler)
<**** name="author" content="IPiyango"> (Yazarın adı)
<**** name="viewport" content="width=device-width, initial-scale=1.0"> (Genişlik belirtir zaten standart genişlik belirtilmiş)
</head>
Kod:
<head>
<**** charset="UTF-8">
<**** name="description" content="Free Web tutorials">
<**** name="keywords" content="HTML,CSS,XML,JavaScript">
<**** name="author" content="John Doe">
<**** name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Öncelikle HTML Nedir ?
HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir betik dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır. HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır. Yazdığımız html dosyaları düz yazı dosyalarından başka bir şey değildir. Yani yazdığımız html dosyalarını bir C ya da Pascal programında olduğu gibi bir derleyici ile derlememize gerek yoktur. Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir. index.* dosyaları UNIX ve türevi sunucu sistemler, default.htm dosyasıda WinNT ya da türevi sistemler için giriş sayfası olur. Yukarıda saydıklarımın dışında uzantısı değişik birçok biçemdeki sayfalar da sunucu sistemin ayarları değiştirilerek giriş sayfası yapılabilir.
HTML'in ne olduğunu umarım az çok anlamışsınızdır . Şimdi yavaşdan eğitimimize geçelim ;
Öncelikle bunu bi yeni metin belgesinde ya da Notepad++ kullanabiliriz
Şimdi Programımızı açalım :
1) - Html Nasıl Yazılır ? Temel eğitim.
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
2) - Html Etiketleri Nelerdir Nasıl kullanılır
<head> Başlık bilgilerini İçerir
<title>...</title> Sayfanın Başlığı
<body> Dökümanın gövdesi görüntülenecek kısım
<!-- --> Bu tag yorum satırıdır Normalde <body> arasına yazdiğiniz etiketler değerlenirken Bu kodun arasına yazdığınız şeyler Sadece koda bakanlar tarafından görülür tarayıcı bunları derlemez
<h1></h1> Bu tag başlık yapımında kullanılır Sayı büyüdükçe Boyut küçülür
<p></p> Bu tag paragraf oluşturur arasına yazıcağınız şeyler paragraf olarak görüntülenir
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Bu Bir Başlıktır</h1>
<p>Bu Bir paragrafdır</p>
</body>
</html>
<br> Bu tag boş satır oluşturur ne kadar yazarsanız o kadar cok boş satır bırakır
<hr> Bu tag Paragraflar arasındaki boşluğa çizgi çeker
3) - Html Biçimlendirme Ve uygulama örnekleri
<b>...</b> Bu tag Paragrafı kalın yazar eğer paragrafta bir kelimeyi ya da cümleyi kalın yazmak istiyosanız <b> tagları arasına almanız yeterli olur
<big>...</big> Bu tag adındanda anlıcağınız gibi Büyük yazar
<i>...</i> Bu tag italik metin oluşturur
<small>...</small> Bu tag Metni ufaltır
<strong>...</strong> Bu tag ismindende anlaşıldığı gibi Metindeki harflere daha güçlü bir gösterim katar
<sub>...</sub> Bu tag alt indis metinidir genelde matematiksel terimlerde kullanılır arasına yazdığınız kelimeler normal metinin hizasından aşşağıda görünür
<sup>...</sup> Bu tag ise sub tagının tam tersi üst indis metini oluşturur
<ins>...</ins> Bu tag Altı çizili metin oluşturur
<del>...</del> Bu tag Metnin üstüne çizer
<code>...</code> Bu tag ise Metni kod şeklinde yazar
4) - Html Link verme Nasıl Link verilir
<a></a> Bu tag Link verir
<a href="Basınca gidilecek link"><b> Basılmasını istediğiniz cümle ya da paragraf bu şekilde göndermek istediğiniz yere gönderebilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>IPiyango Html Dersleri</h1>
<p>Html Bağlantılarını inceliyoruz</p>
<a href="Site Adresi"> Buraya tıklayınız</a>
</body>
</html>
<a href="....." target="_blank"><b>....</b></a> Bu target blank kodu ise sayfayı götürmek yerine açmak istediğiniz linki yeni bi sekmede açar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>IPiyango Html Dersleri</h1>
<p>Html Bağlantılarını inceliyoruz</p>
<a href="Site Adresi" target="_blank"> Buraya tıklayınız</a>
</body>
</html>
Sayfa içi Yönlendirme:
<a href="#git"Basılması gereken cümle</a> Burası gönderen yeri
<a name="git"<p>Gelineceke paragraf</p> Burası ise Gelinen yer
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#git">Aşşağıya git</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="git"></a>
</body>
</html>(Br komutları sayfa uzasın diyedir)
5) - Html Tablo oluşturma
<table>...</table> Bu tag tablo başlatır
<tr>...</tr> Bu tag tablo satır açmak için kullanılır
<th>...</th> Tablonun başlıklarını belirtmek için kullanılır Tr tagları arasında kullanmalısınız
<td>...</td> Bu tag tablo stun açmak için kullanılır
<table border="İstediğiniz kalınlık"> Bu tag tabloda kenarlık belirtmek için kullanılır
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="3">
<tr>
<th>Adı</th>
<th>Soyadı</th>
</tr>
<tr>
<td>Bedirhan</td>
<td>Kaya</td>
</tr>
</table>
</body>
</html>
!!!Not=Eğer Türkçe karakter kodlama hatası verirse
KOD : <**** charset="UTF-8">
Etiketinin head taglarının arasına koymak sorunu çözecektir
<th width="Genişlik sayı olarak"...</th> Tablonun başlığının genişliği için kullanılır
6) - Html Listeleme etiketleri
<ul>...</ul> Sırasız listeleme için kullanılır
<li>...</li> Listenin maddeleri için kullanılır
<ol>...</ol> Sıralı listeleme için kullanılır (1,2,3,4) Şeklinde
<dl>...</dl> Tanımlama listesi için kullanılır
<dt>...</dt> Dl ile yaptığımız tanımlama listelesinin alt başlıkları için dl tagları arasında kullanılır
<dd>...</dd> Dt tagı ile yaptığımız Dl'nin alt başlıklarının açıklaması olarak kullanılır
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- Sırasız listeleme -->
<ul>
<li>Birince Madde</li>
<li>İkinci Madde</li>
<li>Üçüncü Madde</li>
</ul>
<!-- Sıralı Listeleme -->
<ol>
<li>... Eğitimleri</li>
<li>....Eğitimler</li>
<li>.... Eğitimleri</li>
</ol>
<!-- Tanımlama Listesi -->
<dl>
<dt>Html Dersleri</dt>
<dd>Html derslerini öğretildiği forum başlığı</dd>
</dl>
</body>
</html>
7) - Html Formlar Form oluşturma
Burada anlaşılması için yerine kendi örneklerimi yazıcam
<form>...</form> Form başlatır
radio Buton yapmak için kullanılır
name Birbiriyle aynı olmalı sadece birinin seçilmesi için
value Gelen veri tipi
checked Seçilenlerin yanına yazıldığında sayfayı yenileyince sıfırlanması yerine seçili kalmasını sağlar
checkbox Çoklu seçim
<input type="text" name="IPiyango"> Formda Sorular yanında dolduracak sorular oluşturur
<input type="radio" name"1" value="Alıcıya gelen bilgi"> Bu etiketler ise Dolduracak kutucuklar yerine buton vermeye yarar
<input type="radio" name"1" checked=".." value=".."> Bu etiketler sayfayı yenileyince seçili kalmasını sağlar
<input type="checkbox" name="..."> Bu etiketler birden fazla seçeneği seçmek için kullanılır
<form action="Gönderilecek yer" method="get/post" > ............. </form> Bu etiketler gönder butonuna basınca nereye gönderceğini gösterir "get" bilgileri açık gönderir "post" ise gizli bir şekilde gönderir
<input type="submit" name=".." value="Butonun ismi"> Bu etiketler ise Gönder butonu oluşturmak ve butona istediğiniz ismi takmaya yarar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<form>
Adınız
<input type="text" name="Aliveli4950">
<br>
Soyadınız
<input type="text" name="Veliali4950">
<hr>
</form>
<form>
<input type="radio" name="aynı olmalı" value="Erkek(Gönderilen değer)"> Erkek
<input type="radio" name="aynı olmalı" value="Kadın(Gönderilen değer"> Kadın
</form>
<!-- İstedğiniz Kadar seçmek için -->
<form>
Mavi Gözlü
<input type="checkbox" name="">
Sigara içmiyor
<input type="checkbox" name="">
Uzun boylu
<input type="checkbox" name="">
</form>
<!-- Gönder butonu eklemek -->
<form action="http://......" method="post">
Adınız
<input type="text" name="ad">
<input type="submit" name="" value="Gönder butonunun ismi">
</form>
</body>
</html>
<textarea cols="20" rows="50"> .... </textarea> Bu etiketler yeni bir yazı kutucuğu oluşturmanızı sağlar ("cols" "rows") ise metin kutucuğunu enini ve boyunu ayarlamanızı sağlar
8) - Html Sayfaya Resim ekleme
<img src="Resmin adresi"> Bu etiket sayfaya resim eklemenizi sağlar
<img src="Resmin adresi" alt="Resmin tanımlama metini"> Alt parametersi ile resmin tanımlamasını yapmanızı sağlar
<img width="resmin boyu" src="...." alt="..."> Bu etiketler Resmin Orantılı bir şekilde boyunu ayarlar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<img width="400" src="Resmi adresi" alt="Resmin açıklaması">
</body>
</html>
9) - Html Renklerin kullanımı ver Arkaplan Değiştirme
<body bgcolor="#Rengin kodu"> Bu etiket arkaplanın rengini ayarlamanızı sağlar Html renk kodları yazarak Google amcadan bulabilrisniz kodları Ya da ingilizce terim kullanrak Örneğin:black yellow Gibilerinide kullanabilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body bgcolor="#CCFFCC">
</body>
</html>
<body background="Resmin Adresi > Sayfaya resim eklemenizi sağlar
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body background="Resmin adresi">
</body>
</html>
10) - Html Div blok yapısı oluşturma
<div> 1.Bölge </div> Bloklar oluşturur kaydedip bakınca anlamsız gelebilir
<div style="background: red;"> 1.Bölge </div> Burada css kodu kullandım aklınız karışmasın sadece blok blok olduğunu anlamnız için yaptım
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<div style="background: red;">1.Bölge</div>
<div style="background: yellow;">2.Bölge</div>
<div style="background: orange;">3.Bölge</div>
</body>
</html>
11) - Html İframe (Sayfa içinde sayfa ekleme)
<iframe src="Sayfa içine ekliyeceğiniz diğer sayfanin adresi"> Bu etiketlerler sayfa içine sayfa ekleyebilirsiniz ((height="Yükseklik") (width="genişlik") ile Ayarlayabilirsiniz
Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<**** charset="utf-8">
</head>
<body>
<iframe src="Gösterilecek sitenin adresi" height="300" width="600"></iframe>
</body>
</html>
12) - Html **** taglar
<head>
<title></title>
<**** charset="UTF-8"> (Sayfa dilini Türkçe olduğunu belirtir)
<**** name="description" content="Html Dersleri"> (Sayfa açıklamsı bi nevi özeti)
<**** name="keywords" content="Html, Taglar vs."> (Anahtar kelimeler)
<**** name="author" content="IPiyango"> (Yazarın adı)
<**** name="viewport" content="width=device-width, initial-scale=1.0"> (Genişlik belirtir zaten standart genişlik belirtilmiş)
</head>
Kod:
<head>
<**** charset="UTF-8">
<**** name="description" content="Free Web tutorials">
<**** name="keywords" content="HTML,CSS,XML,JavaScript">
<**** name="author" content="John Doe">
<**** name="viewport" content="width=device-width, initial-scale=1.0">
</head>
