HOSGELDİNİZ

#KURULUŞ   –  31.03.2013

#EKLENECEKLER

HTML Örnekleri 

CSS Örnekleri

Swf ler …

Advertisements

Araba Site (Uygulama 9)

site

HTML Tarafı

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Uyg 9</title> <link rel=”stylesheet” href=”css/style.css” type=”text/css” /> </head> <body> <div id=”kabuk”> <div id=”menü”><p>Hakkımızda &nbsp;&nbsp;+&nbsp;&nbsp; Okulumuz &nbsp;&nbsp;+ &nbsp;&nbsp;Sınıfımız &nbsp;&nbsp;+ &nbsp;&nbsp;Lorem İpsum&nbsp;&nbsp; + &nbsp;&nbsp;Lorem İpsum&nbsp;&nbsp; + &nbsp;&nbsp;İrtibat&nbsp;&nbsp; + &nbsp;&nbsp;AUTO LEASE QUİTE&nbsp;&nbsp;</p></div> <div id=”logo”><img src=”direksion.jpg” /></div> <div id=”resim”><img src=”2013MY-VW-CC-3.jpg” /></div> <div id=”solmenü”><div id=”solmenübaslik”><p><b>AMMOUNCEMENTS & SPECIALS</b></p></div> <p><b>SEPTEMBER 2008</b></p> <p>Don’t forget about our mounthly auto kase specials – Incentives change frequenfty so check back offent</p> <p><div id=”button”>check</div></p> <p><div id=”button1″><img src=”img/soru-işareti-300×300.jpg” />SORRY LİVE CHAT IS UNNAVATABLE</div></p> </div> <div id=”içerik”> <h1>Welcome To Auto Lease Today </h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed cum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> <p>&nbsp;</p> <p>Etiam arcu felis, ultricies at molestie sed, convallis non diam. Phasellus venenatis sem magna, quis aliquet eros pulvinar quis. Mauris non lobortis tortor, a ultricies libero. Aenean euismod rutrum ante, eu tempor elit tincidunt et. Mauris sit amet sollicitudin felis. Donec sed luctus velit. Vivamus luctus ut orci at gravida.</p> <p>&nbsp;</p> <p>Aenean vel ipsum et nibh dictum aliquet.</p>, <p>&nbsp;</p> <ol> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> <li>Aenean vel ipsum et nibh dictum aliquet.</li> </ol> </p> <p>&nbsp;</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed condimentum nisl et sapien ultricies adipiscing. Pellentesque consequat nulla a ligula molestie fringilla. Aenean gravida fermentum justo, ac cursus nisi tincidunt eget. Nullam placerat neque tincidunt risus ultrices, sed aliquam nunc rutrum. Mauris gravida mattis eros. Praesent vel nisi ac mi porta dignissim. Donec mollis quam et sagittis feugiat. Quisque ornare libero metus, in condimentum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae congue ipsum. Phasellus eget libero erat. Sed condimentum nisl et sapien ultricies adipiscing. Pellentesque consequat nulla a ligula molestie fringilla. Aenean gravida fermentum justo, ac cursus nisi tincidunt eget. Nullam placerat neque tincidunt risus ultrices, sed aliquam nunc rutrum. Mauris gravida mattis eros. Praesent vel nisi ac mi porta dignissim. Donec mollis quam et sagittis feugiat. Quisque ornare libero metus, in condimentum lacus pellentesque in. Vivamus ut dapibus risus, at tincidunt urna. Nullam in ornare felis. Donec scelerisque est pretium, blandit nunc vitae, fermentum arcu. Sed condimentum ligula ullamcorper, ultricies eros tincidunt, rhoncus mi. In hac habitasse platea dictumst. Sed pharetra scelerisque eros, ut vulputate odio pretium a.</p> </div> <div id=”solgeridonus”> <p><img src=”ger-donus-logo.jpg” /></p> <p>Lorem İpsum</p> <p>Lle vocal v Lle vocal Lle vocal Lle vocal Lle vocal Lle vocal </p> </div> <div id=”altmenü”><div id=”altmenübuton”><p>Horwide Auto Le…</p></div></div> </div> </body> </html>

CSS TARAFI

@charset “utf-8”; *{ margin:0; padding:0; border:none;} body{ background:#333;} div#kabuk { width:1000px; height:1200px; background-color:#000;;margin:0 auto; border:1px solid #999;} div#menü { width:1000px; height:50px; background-image:url(../img/men%C3%BC.png); border-bottom:#900 solid 5px;} div#menü p { text-align:center;color:#CCC; padding:20px; size:auto;} div#logo img { float:left;} div#resim img { float:left;} div#solmenü { float:left; width:295px; height:500px; background-color:#000;; margin-left:5px; margin-top:-40px;-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solmenü p{ float:left; color:#CCC;} div#button{ width:70px; height:20px; float:right; border:1px solid #333; margin-top:35px; margin-right:45px; background:#FFF; text-align:center;} div#button1{ width:220px; height:60px; float:right; border:1px solid #CCC; margin-left:10px; background:#FFF; text-align:left; text-align:center; padding:20px; margin-right:15px; margin-top:200px; } div#button1 img { float:left;} div#solmenübaslik{ float:left; width:295px; height:50px; background-color:#313131; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solmenübaslik p { text-align:center; color:#CCC; margin-top:15px; font:Arial, Helvetica, sans-serif;} div#solgeridonus{ float:left; width:290px; height:350px; background:#000; margin-left:5px; margin-top:5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;} div#solgeridonus img { margin-top:65px; margin-left:5px;} div#solgeridonus p { color:#F00; text-align:center;} div#içerik{width:700px; height:815px; float:right; background:#000; clear:inherit;} div#içerik p { float:left; color:#FFF; margin-left:10px;} div#içerik h1 { float:left; color:#900; margin-left:10px; margin-bottom:10px;} div#içerik ol { float:left; color:#CCC; margin-left:100px; margin-top:10px; clear:left;} div#içerik ol li { float:none; color:#CCC;} div#altmenü{ width:1000px; height:50px; float:left; background:url(../img/altmen%C3%BC.png); margin-top:5px;} div#altmenübuton { width:130px; height:40px; float:left; margin-left:5px; margin-top:2px; background-color:#2A2A2A; border:#999 solid 2px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;} div#altmenübuton p { float:right; text-align:center; margin-top:10px; color:#CCC;}

Basit Site Yapımı (Uygulama 8)

uyg8

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Uyg8</title>

CSS Tarafı

<style> * { margin:0; padding:0; border:none;} body {background-color:#0f6da1;} div#kabuk {width:600px; margin:0 auto; } div#icerik { background-color:white; float:left; padding:10px; } div#baslik { } div#buyuk-kutu { width:580px; float:left;} div.kucuk-kutu {width:285px; float:left;} div#baslik h1 { font:Verdana; font-size:32px; color:#136b9b; margin-top:10px;} div#baslik span { font:Verdana; font-size:32px; color:#C60; margin-top:10px;} div#icerik h2 { font:Verdana; color:#c60;} div.kucuk-kutu h2 {font:Verdana; color:#c60;} div#baslik a img {float:right; padding-left:10px;} div.button { float:right;} </style>

HTML Tarafı

</head> <body> <div id=”kabuk”> <div id=”icerik”> <div id=”baslik”> <h1>Simple<span>Newsletter</span></h1> <a href=”#”> <img src=”youtube.jpg” /> </a> <a href=”#”> <img src=”linkedin.jpg” /> </a> <a href=”#”> <img src=”twitter.jpg” /> </a> <a href=”#”> <img src=”facebook.jpg” /> </a> </div> <div id=”buyuk-kutu”> <img src=”featured_image.jpg” /> <h2>This is your featured story</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod idunt ut magna laoreet dolore aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod idunt ut magna laoreet dolore aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <a href=”#”> <img src=”readmore.jpg” /></a> </div> <div class=”kucuk-kutu”> <img src=”secondary1.jpg” /> <h3>This is a secondary headline</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <a href=”#”> <img src=”readmore.jpg”/></a></div> <div class=”kucuk-kutu”> <img src=”secondary2.jpg” /> <h3>This is a secondary headline</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <a href=”#”> <img src=”readmore.jpg” /></a></div> </div> </div> </body> </html>

NeAnladıkNeÖğrendik ?

span =vurgulamak için kullanılır.Burada bölmek için kullanılmıştır.

Header Tasarımı(Uygulama 7)

HTML TARAFI

hrader

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”Untitled-2.css” />
</head>
<body bgcolor=”#FFFFFF”>

<div id=”ust”><font color=”#FF0000″ face=”Tahoma, Geneva, sans-serif” size=”16px”><b>Hayırlı Sabahlar, uyanın
artık!</b><font></div>
</div>
</body>
</html>

CSS TARAFI

#ust
{
height:200px;
width:100%;
background-image:url(2.jpg); background-repeat:repeat-x;
border-bottom:4px solid#666;
text-align:center;
}

Ne Anladık Ne Öğrendik !

Aşağıdaki kod çok önemlidir.CSS ile html i birbirine bağlar.

<link rel=”stylesheet” type=”text/css” href=”Untitled-2.css” />  

<div id=”ust”>  CSS de belirtile tarafı html e kodlar.

font color : Yazının rengini belirler.

face : Burada yazı tipini belirler.

height: Yükseklik
width:Genişlik
background-image:Resmin yerini buraya yazarız.
border-bottom:4px ; Alttan 4 pixel  boşluk bırakır.
text-align: Yazıyı ortalar.

Halı Saha HTML CSS (Uygulama 6)

SAHAS

<body>

<div id=”kabuk”>

<div class=”yari-saha” style=”border-right:none;”>
<div class=”ceza-alani” style=”margin-top:60px;border-left:none;”>
<div class=”alti-pas” style=”margin-top:55px;border-left:none;”>

</div>
</div>
<div class=”yarim-daire-sag” style=”margin-top:110px”></div>
<div class=”yarim-daire-sol” style=”margin-top:110px”></div>
</div>

<div class=”yari-saha”>
<div class=”ceza-alani” style=”float:right;margin-top:60px;border-right:none;”>
<div class=”alti-pas” style=”float:right;margin-top:55px;border-right:none;”>

</div>
</div>
<div class=”yarim-daire-sol” style=”margin-top:110px”></div>
<div class=”yarim-daire-sag” style=”margin-top:110px”></div>
</div>

</div>

<img src=”futbolsahasi.jpg” />

</body>
</html>

CSS Bölümü

div#kabuk { float:left; width:520px; height:320px; background-color:#060; padding:50px; }
div.yari-saha { float:left; width:250px;height:300px;border:2px solid white;}
div.ceza-alani {float:left;height:180px;width:90px;border:2px solid white;}
div.alti-pas {float:left;height:70px;width:40px;border:2px solid white;}
div.yarim-daire-sag { float:left;
width:40px;
height:80px;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-bottomright: 40px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px; }
div.yarim-daire-sol { float:right;
width:40px;
height:80px;
border-left:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px; }

NE ANLADIK NE ÖĞRENDİK!

webkit-border-bottom-left-radius : Alt sola ovallik verir.

border-bottom-right-radius: Alt sağa ovallik verir.

border-top-left-radius: Üst sola ovallik verir.

border-right:2px solid white; Beyaz çizgi.

-webkit-border-top-right-radius: Üst sağ ovallik verir.

CSS Tablo Yapımı (Uygulama 5)

KUTU

<body>
<div id=”anasayfa”>
<div class=”kutu1″>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>

</div>

<div class=”kutu1″>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>

</div>

<div class=”kutu1″>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>

</div>

<div class=”kutu1″>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
<div class=”kutu2″></div>
</div>
</div>
</body>
</html>

 CSS Bölümü

#anasayfa
{
width:750px;
height:750px;
background-color:#0F0;
}
.kutu1
{
width:300px;
height:300px;
float:left;
margin-left:50px;
margin-top:50px;
background-color:#000;
}
.kutu2
{
width:120px;
height:120px;
float:left;
margin-left:20px;
margin-top:20px;
background-color:#00F;
}

Ne Anladık Ne Öğrendik !

DİV:

Bir bölümü tanımlar.

ID:

Sayfaya bağlantı sağlar

CLASS:

Bu tag bir css kodu ile daha fazla html tagı olarak kullanmamızı sağlar.

CSS Bölümü

width: Genişlik
height: Yükseklik
float:left; Sola hizala
margin-left: Sola boşluk bırak
margin-top: üste boşluk bırak
background-color: Arka plan rengi

HTML Form (Uygulama 4)

<html>
<head>
<title>Uygulama 4 </title>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies metus ligula, a varius nibh condimentum eu. In congue ac elit a aliquet. Suspendisse fermentum at dolor ut tempor. Quisque dapibus commodo iaculis. Vivamus orci ligula, blandit nec facilisis vestibulum, bibendum at risus. Phasellus mauris risus, lobortis vel elementum sit amet, interdum et lectus. Quisque et ultrices sem, vitae sagittis est. Nullam egestas, magna molestie auctor consequat, dui mi scelerisque diam, quis pulvinar neque mauris vestibulum elit. Nulla viverra enim sed odio euismod, sit amet commodo quam mattis. Sed quam lectus, ultricies in pulvinar vel, tristique sed turpis. Curabitur magna velit, cursus ultricies tincidunt et, viverra sit amet nisi. Nunc ac eros bibendum, mollis libero sit amet, ornare lacus. Duis sagittis vel lorem in dapibus. Pellentesque malesuada justo mi, at dignissim libero dapibus vel.

<p>Maecenas suscipit ornare semper. Ut vitae lacus ut justo malesuada rutrum. Morbi a massa sed tortor tempus malesuada. Maecenas tincidunt nisl justo, vel euismod lorem convallis a. Donec pharetra malesuada magna quis interdum. Donec vel diam eleifend, ullamcorper lorem non, sodales urna. Pellentesque fringilla placerat lectus, a malesuada justo ullamcorper sit amet. Aenean quis convallis odio. Duis faucibus tellus urna. Fusce non ornare sapien. Donec laoreet, justo et ornare pellentesque, enim elit dictum purus, vitae venenatis lacus turpis sed purus. Integer libero tellus, semper sit amet consequat non, rhoncus quis dolor. Suspendisse ut condimentum est.

<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget mi viverra tortor adipiscing porttitor in sed nisl. Donec vehicula eget leo at pharetra. Integer rutrum aliquet tellus cursus pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec iaculis nibh laoreet odio tempus iaculis. Nulla sed nibh auctor, ultrices leo sit amet, accumsan nunc.

<p>Curabitur convallis diam turpis, non sagittis eros eleifend varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin elit odio, consectetur eu quam sit amet, ultrices consequat orci. Nam leo nunc, posuere vitae dui euismod, pretium convallis enim. Phasellus a arcu lectus. Quisque vitae sollicitudin nisl. Duis dignissim pellentesque hendrerit. Donec porta blandit lectus, nec suscipit est ultrices vitae. Sed vel leo nunc. In eget sagittis lacus. Ut facilisis odio ut sapien feugiat, et pellentesque libero ullamcorper. Proin egestas enim ipsum. Duis porttitor volutpat tristique. Curabitur consectetur ligula at augue rhoncus, sed pellentesque massa suscipit. Maecenas tempor mi lacus, vel tincidunt mauris tincidunt nec.

<p>Nullam dapibus dolor ut laoreet tempor. Maecenas sapien lacus, ullamcorper non adipiscing vel, interdum non lectus. Curabitur gravida, risus id convallis porta, nibh nisl imperdiet metus, ac gravida diam elit eget sapien. Fusce egestas fermentum ligula. Curabitur cursus leo velit, porttitor sodales diam ultricies ultrices. Aliquam porta nulla sit amet arcu vehicula convallis. Phasellus congue nec est eget vulputate. Sed aliquet accumsan eros, id interdum tellus pulvinar non. Donec malesuada odio non augue congue, eget rutrum lectus interdum. Nunc aliquet eget dui et scelerisque. Sed vehicula nisi eget diam tincidunt, ac hendrerit nulla aliquam. Quisque non dui ac turpis congue imperdiet eu ut nunc.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Morbi semper quam eget luctus auctor.</li>
<li>Nunc vulputate dolor at ultrices sodales.</li>
<li>Nulla feugiat est aliquet gravida consectetur.</li>
<li>Phasellus semper nisi ut sagittis posuere.</li>
</ul>
<ol>
<li>Aliquam porta elit nec nunc tincidunt dictum.</li>
<li>Aliquam et orci consectetur, tempus mauris ornare, elementum tortor.</li>
<li>Pellentesque fermentum nisi non quam pulvinar bibendum.</li>
<li>Donec consectetur dolor ut velit ultricies cursus.</li>
<li>Nulla et augue eget ipsum ultricies condimentum eu vitae enim.</li>
</ol>
<hr>
<li>Etiam tincidunt lorem facilisis tincidunt sagittis.</li>
<li>Pellentesque id ante at est pellentesque tempor eget sit amet nisl.</li>
<li>Suspendisse eu quam egestas, porta justo nec, venenatis elit.</li>
<li>Suspendisse dictum ante eget lectus tempor feugiat.</li>
<li>Ut porta mi quis porta tincidunt.</li>
</hr>
<h2>HTML Formlar</h2>
<form action =”” name=”irtibat ” method=”get”>
<label for =”adi”>Adı Soyadı : </label>
<input type=”text” name =”adi” /><hr/>
<label for =”cins”>Cinsiyet : </label>
<p>Erkek<input type=”radio” name =”cins” value=”Erkek” checked=”checked” />
<p>Kadın<input type=”radio” name =”cins” value=”Kadın” /></p> <hr/>
<label for =”hobi” >Hobileriniz: </label>
<p>Futbol<input type =”checkbox”name=”hobi” value=”futbol” />
<p>Sinema<input type =”checkbox”name=”hobi” value=”futbol” />
<p>Seyehat<input type =”checkbox”name=”hobi” value=”seyehat” />
<p>Yürüyüş<input type =”checkbox”name=”hobi” value=”yürüyüş” /></p><hr/>
<labek for =”taraftar”>Hangi takımlısınız?</label>
<select name =”taraftar”>
<option value “sivasspor”selected=”selected”>Sivasspor</option>
<option value “denizlispor”Denizlispor</option>
<option value “samsunspor”samsunspor</option>
<option value “manisaspor”manisaspor</option>
<option value “kayserispor”Kayserispor</option>
</select><hr/>
<input type =”submit” name = “gonder” value =”Gönder”/>
<input type =”reset” name = “sifirla” value =”Sıfırla”/>
</form>
</bodY>
</html>

NE ANLADIK NE ÖĞRENDİK!

 

<get> ve <post> metodu

GET

GET metodunda formlara girilen bilgiler adres çubuğunda gönderilirken görünürler. Formlara girilen bilgiler, sayfa adresinin sonuna şu şekilde eklenir.

http://www.site.com/sayfa.php?form1=değer1&form2=değer2&&#8230;

POST

Bu metodda formlara girilen bilgiler gönderilirken görünmemektedir. Bundan dolayı daha güvenlir.

http://www.site.com Gibi

RADİO

<input type=”radio”> bir radyo düğmesi tanımlar. Radyo düğmeleri bir kullanıcı seçenek sınırlı sayıda TEK seçin bakalım:

PASSWORD

<input type=”password”> bir şifre alanı tanımlar.

parola alanına karakter (yıldız veya daireler olarak gösterilmiştir) maskelenir.

CHECKBOX

<input type=”checkbox”> bir onay kutusu tanımlar. Kutularını bir kullanıcı seçenek sınırlı sayıda SIFIR veya Daha fazla seçeneklerini belirlemenize olanak verir.

TEXT

<input type=”text”> bir kullanıcı metin girebileceği bir tek satırlık giriş alanı tanımlar.

İNPUT

<input> Elemanı kullanıcı bilgileri seçmek için kullanılır.

(Uygulama 3)Tablo

tablo

<html>
<body>
<table border=”1″ width=”400″><!– burada border tablonun kenar kalınlıgını witdh ise genişliği için kullanılan tagdır.–>
<tr>
<td> 1 </td>
<td colspan=”2″>2</td><!– colspan=”2″ ifadesi birleştirmek istediğimiz iki sütünu birleştirmek için kullanılır.–>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td><!– <td> tagı sutun olusturmak için kullanılır.–>
<td> 5 </td>
<td> 6 </td>
<td rowspan=”2″>7</td><!– rowspan=”2″ ifadesi birleştirmek istediğimiz iki satırı birleştirmek için kullanılır.–>
</tr>
<tr><!–satır oluşturmak için kullanılır.–>
<td colspan=”2″>8</td><!– colspan=”2″ ifadesi birleştirmek istediğimiz iki sütünu birleştirmek için kullanılır.–>
<td>9</td>
</tr>
<tr>
<td colspan=”4″>10</td><!– colspan=”2″ ifadesi birleştirmek istediğimiz iki sütünu birleştirmek için kullanılır.–>
</tr>
</table>
</body>
</html>

Ne Anladık Ne Öğrendik !

<TABLE>

<table> etiketi ile tanımlanır.Ve tablo oluşur.

<table border=”1″>

<table border=”1″> sınırların kalınlığını belirer.

<td colspan=”number“>

<td colspan=”number“> stünları birleştirir.

<td rowspan=”number“> satır sayısını belirler

<tr>

stundur.

<td>

satırdır.

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

Liste Link Verme(Uygulama 1)

<html>
<body>
<ul>
<a href=”http://www.ihlaskoleji.k12.tr/”><li>Ihlas Koleji</li></a>  <!–a href kodu = link vermeye yarar. –>
<a href=”https://www.google.com.tr/”><li>Google</li></a&gt;  <!–soluna  Liste şeklinde (.)koyar –>
<a href=”https://tr-tr.facebook.com/”><li>Facebook</li></a&gt;
</ul>
</body>
</html>

Ne Anladık Ne Öğrendik !

<a href “aaaa”>

Kodu link vermeye yarar .

<ul>

Liste şeklinde (.) koyar.