HTML TAG Acıklamaları (Uygulama 2)

<!DOCTYPE html>
<html><head><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>TEMEL HTML KODLARI</title>
</head>
<body>
<h1>Temel HTML Tagları</h1>
<h2>&lt;HTML&gt; TAGI</h2>
<p><H3>Tarayıcının açtığı sayfanın içerisinde HTML kodları olduğunu anlamasını sağlayan etikettir.</H3></p>
&lt;!DOCTYPE HTML&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;sayfa’nın başlığı buraya yazılır.&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
sayfa’nın içeriği buraya yazılır.<br>
&lt;/body&gt;<br>
&lt;/html&gt;</p>

<h2>&lt;HEAD&gt; TAGI</h2>
<p><h3>Meta dataları, sayfa başlığı, scriptler, stiller gibi bilgileri içeren, sayfanın içeriğinden önce gelen tagdır.</h3></p>
<p>&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;sayfa’nın başlığı buraya yazılır.&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
sayfa’nın içeriği buraya yazılır.<br>
&lt;/body&gt;<br>
&lt;/html&gt;</p>

<h2>&lt;BODY&gt; TAGI</h2>
<p><H3>Öğesi tüm metin gibi bir HTML belgesi içeriği, köprüler, resimler, tablolar, listeler, vb içeri.</H3></p>
<p>&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;sayfa’nın başlığı buraya yazılır.&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
sayfa’nın içeriği buraya yazılır.<br>
&lt;/body&gt;<br>
&lt;/html&gt;</p>

<h2>&lt;UL&gt; TAGI</h2>
<p><H3>Genellikle sıralama niteliğine sahip olmayan öğeler için kullanılır. Liste öğeleri başına kare, yuvarlak gibi şekiller konularak belirlenebilir.</H3></p>
<p>&lt;ul&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ul&gt;</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>&lt;OL&gt; TAGI</h2>
<p><H3>Genellikle sıralama, dizilim yapılan içeriklerin listelenmesi için kullanılır. Liste başlarında sayı, harf gibi işaretler kullanılabilinir.</H3></p>
<p>&lt;ol&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ol&gt;</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>
&lt;ol start=”50″&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ol&gt;</p>
<ol start=”50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p><H3>type paramatresinin 1,A,a,I,i gibi başka değerleri de vardır.</H3></p>
<p>
&lt;ol type=”I”&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ol&gt;</p>
<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<h2>&lt;Lİ&gt; TAGI</h2>
<p><h3>Ul ya da ol içinde yer alan listenin her bir öğesini kapsar.</h3></p>
<p>&lt;ol&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ol&gt;<br>
&lt;ul&gt;<br>
&lt;li&gt;Coffee&lt;/li&gt;<br>
&lt;li&gt;Tea&lt;/li&gt;<br>
&lt;li&gt;Milk&lt;/li&gt;<br>
&lt;/ul&gt;</p>

<h2>&lt;A&gt; TAGI</h2>
<p><H3>Bir sayfadan diğerine bağlantı için kullanılan bir köprüyü tanımlar.</H3></p>
<p>&lt;a href=”http://www.w3schools.com”&gt;Visit W3Schools.com!&lt;/a&gt;</p>
<P>3 Farklı yöntemle link ekleme kodları vardır.</p>

<h2>&ltİMG&gt; TAGI</h2>
<p><H3>HTML sayfası bir görüntü tanımlar.</H3></p>
<p>&lt;img src=”aaaa.jpg” alt=”aaaa .jpg” height=”11″ width=”11″&gt;</p>

<h2>&ltTİTLE&gt; TAGI</h2>
<p><H3>Tüm HTML belgelerinde gerekli başlığı tanımlar.</H3></p>
<p>&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;HTML Reference&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
Sayfa’nın kodlarının bulunduğu kısımdır.<br>
&lt;/body&gt;<br>
&lt;/html&gt;</p>

<h2>&ltDİV&gt; TAGI</h2>
<p><H3>HTML belgesinde bir bölüm tanımlar.</H3></p>
<p>&lt;div style=”color:#0000FF”&gt;<br>
&lt;h3&gt;This is a heading&lt;/h3&gt;<br>
&lt;p&gt;Burada paragraf var.&lt;/p&gt;<br>
&lt;/div&gt;</p>

<h2>&ltMETA&gt; TAGI</h2>
<p><H3>HTML belgesi hakkında meta veriler sağlar.</H3></p>
<p>&lt;head&gt;<br>
&lt;meta name=”description” content=”Free Web tutorials”&gt;<br>
&lt;meta name=”keywords” content=”HTML,CSS,XML,JavaScript”&gt;<br>
&lt;meta name=”author” content=”Ståle Refsnes”&gt;<br>
&lt;meta charset=”UTF-8″&gt;<br>
&lt;/head&gt;</p>

<h2>&ltLİNK&gt; TAGI</h2>
<p><H3>Boş bir unsurdur.</H3></p>
<p>&lt;head&gt;<br>
&lt;link rel=”stylesheet” type=”text/css” href=”theme.css”&gt;<br>
&lt;/head&gt;</p>

<h2>&ltTABLE&gt; TAGI</h2>
<p><H3>HTML tablosu tanımlar.</h3></p>
<p>&lt;table border=”1″ width=”400″&gt;<br>
&lt;tr&gt;<br>
&lt;th&gt;1&lt;/th&gt;<br>
&lt;th&gt;2&lt;/th&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;3&lt;/td&gt;<br>
&lt;td&gt;4&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt;</p>
<html>
<body>
<table border=”1″ width=”400″>
<tr>
<td> 1 </td>
<td colspan=”2″>2</td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
<td rowspan=”2″>7</td>
</tr>
<tr>
<td colspan=”2″>8</td>
<td>9</td>
</tr>
<tr>
<td colspan=”4″>10</td>
</tr>
</table>
</body>
</html>

<h2>&ltTR&gt; TAGI</h2>
<p><h3>HTML tablosunda bir satır tanımlar.</h3></p>
<p>&lt;table border=”1″ width=”400″&gt;<br>
&lt;tr&gt;<br>
&lt;th&gt;1&lt;/th&gt;<br>
&lt;th&gt;2&lt;/th&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;3&lt;/td&gt;<br>
&lt;td&gt;4&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt;</p>

<h2>&lt;TD&gt; TAGI</h2>
<p><h3>HTML tablosunda standart bir cep tanımlar.</h3></p>
<p>&lt;table border=”1″ width=”400″&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;1&lt;/td&gt;<br>
&lt;td&gt;2&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt;</p>

<h2>&lt;TH&gt; TAGI</h2>
<P><H3>HTML tablosunda bir başlık hücre tanımlar.</H3></P>
<p>&lt;table border=”1″ width=”400″&gt;<br>
&lt;tr&gt;<br>
&lt;th&gt;month&lt;/th&gt;<br>
&lt;th&gt;saving&lt;/th&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;january&lt;/td&gt;<br>
&lt;td&gt;$100&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt;</p>
<table border=”1″>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

<h2>&lt;FORM&gt; TAGI</h2>
<p><H3>HTML formu oluşturmak için kullanılır.</H3></p>
<p>&lt;form action=”demo_form.asp” method=”get”&gt;<br>
First name: &lt;input type=”text” name=”fname”&gt;&lt;br&gt;<br>
Last name: &lt;input type=”text” name=”lname”&gt;&lt;br&gt;<br>
&lt;input type=”submit” value=”Submit”&gt;<br>
&lt;/form&gt;</p>

<form action=”demo_form.asp”>
First name: <input type=”text” name=”FirstName” value=”Mickey”><br>
Last name: <input type=”text” name=”LastName” value=”Mouse”><br>
<input type=”submit” value=”Submit”>
</form>

<h2>&lt;LABEL&gt; TAGI</h2>
<p><H3>&lt;label&gt; Etiketi &lt;input&gt; elemanı için bir etiket tanımlar.</H3></p>
<p>&lt;form action=”demo_form.asp”&gt;<br>
&lt;label for=”male”&gt;Male&lt;/label&gt;<br>
&lt;input type=”radio” name=”sex” id=”male” value=”male”&gt;&lt;br&gt;<br>
&lt;label for=”female”&gt;Female&lt;/label&gt;<br>
&lt;input type=”radio” name=”sex” id=”female” value=”female”&gt;&lt;br&gt;<br>
&lt;input type=”submit” value=”Submit”&gt;<br>
&lt;/form&gt;</p>
<form action=”demo_form.asp”>
<label for=”male”>Male</label>
<input type=”radio” name=”sex” id=”male” value=”male”><br>
<label for=”female”>Female</label>
<input type=”radio” name=”sex” id=”female” value=”female”><br><br>
<input type=”submit” value=”Submit”>
</form>

<h2>&lt;OPTİON&gt; TAGI</h2>
<p><H3>Bir seçim listesinde bir seçenek tanımlar.</H3></p>
<p>&lt;select&gt;<br>
&lt;option value=”volvo”&gt;Volvo&lt;/option&gt;<br>
&lt;option value=”bmw”&gt;Saab&lt;/option&gt;<br>
&lt;option value=”opel”&gt;Opel&lt;/option&gt;<br>
&lt;option value=”audi”&gt;Audi&lt;/option&gt;<br>
&lt;/select&gt;
</p><select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>

<h2>&lt;SELECT&gt; TAGI</h2>
<p><H3>Açılır liste oluşturmak için kullanılır.</H3></p>
<p>&lt;select&gt;<br>
&lt;option value=”volvo”&gt;Volvo&lt;/option&gt;<br>
&lt;option value=”saab”&gt;Saab&lt;/option&gt;<br>
&lt;option value=”mercedes”&gt;Mercedes&lt;/option&gt;<br>
&lt;option value=”audi”&gt;Audi&lt;/option&gt;<br>
&lt;/select&gt;</p>
<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>

<h2>&lt;STRONG&gt; TAGI</h2>
<p><H3>Bu önemli metinleri tanımlamak için kullanılır.</H3></p>
<P>&lt;em&gt;İHLAS KOLEJİ&lt;/em&gt;&lt;br&gt;</p>
<p>&lt;strong&gt;MAZLUM FIRAT ORAL&lt;/strong&gt;&lt;br&gt;</p>
<p>&lt;dfn&gt;11 BİLGİSAYAR&lt;/dfn&gt;&lt;br&gt;</p>
<p>&lt;code&gt;864 NUMARA&lt;/code&gt;&lt;br&gt;</p>
<p>&lt;samp&gt;BİLİŞİM TEKNOJİLERİ BÖLÜMÜ&lt;/samp&gt;&lt;br&gt;</p>
<p>&lt;kbd&gt;İHLAS KOLEJİ&lt;/kbd&gt;&lt;br&gt;</p>
<p>&lt;var&gt;MFO&lt;/var&gt;</p>

<em>İHLAS KOLEJİ</em><br>
<strong>MAZLUM FIRAT ORAL</strong><br>
<dfn>11 BİLGİSAYAR</dfn><br>
<code>864 NUMARA</code><br>
<samp>BİLİŞİM TEKNOJİLERİ BÖLÜMÜ</samp><br>
<kbd>İHLAS KOLEJİ</kbd><br>
<var>MFO</var>

<h2>&lt;SPAN&gt; TAGI</h2>
<p><H3>Bir belgede grup satır içi elemanlarını tanımlamak için kullanılır.</H3></p>
<p>&lt;p&gt;My mother has &lt;span style=”color:blue”&gt;blue&lt;/span&gt; eyes.&lt;/p&gt;</p>
<p>Benim gözlerimin rengi <span style=”color:black;font-weight:bold”>siyah</span> ‘tır.<span style=”color:darkolivegreen;font-weight:bold”>Babamın gözleri </span> kahve</p>

<h2>&lt;İFRAME&gt; TAGI</h2>
<p><H3>Satır içi çerçeve eklemek için kullanılır.</H3></p>
<p>&lt;iframe src=”http://www.w3schools.com”&gt;&lt;/iframe&gt;</p&gt;

<h2>&lt;!DOCTYPE&gt; TAGI</h2>
<p><H3>Bildirge bir HTML etiketi değil <DOCTYPE>, bu HTML sürümünü sayfa hakkında web tarayıcısı için bir talimat içeri yazılır</H3><br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;Title of the document&lt;/title&gt;<br>
&lt;/head&gt;<br>
<br>
&lt;body&gt;<br>
The content of the document……<br>
&lt;/body&gt;<br>
<br>
&lt;/html&gt;</p>
<p></p>
<h2>&lt;İNPUT&gt; TAGI</h2>
<p><H3>Veri girebilmek için kullanılan koddur.</H3></p>
<p>&lt;form action=”demo_form.asp”&gt;<br>
First name: &lt;input type=”text” name=”fname”&gt;&lt;br&gt;<br>
Last name: &lt;input type=”text” name=”lname”&gt;&lt;br&gt;<br>
&lt;input type=”submit” value=”Submit”&gt;<br>
&lt;/form&gt;</p>

<form action=”demo_form.asp”>
First name: <input type=”text” name=”FirstName” value=”Mickey”><br>
Last name: <input type=”text” name=”LastName” value=”Mouse”><br>
<input type=”submit” value=”Submit”>
</form>
</body></html>

W3Schools Online Web Tutorials
http://www.w3schools.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s