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.

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