HTML VE CSS TERİMLERİ:
CSS:İnternet sayfasıınn görünümünü değiştiren bir tanım dosyasıdır.Css kendine has kuralları olan bir tanım dilidir denilebilir.Css sayfada her bir elemana ait farklı bir özellik atamayı sağlar.
<HTML>: Web sayfasında bulunan ilk koddur.Bu kod html sayfasının başlangıcını ve sonunu belirler.Bütün html kodları bu kodun arasına yazılmak zorundadır.
<HEAD> : Web sayfasının temel özelliklerinin bulunduğu koddur.Yani sayfa başlığı, link özellikleri,yazı karakterleri özellikleri vb. özellikleri bu kodun içine yazılır.
<LİNK> : Dökümana dışardan bir kaynak bağlar.
<DİV> : Dökümanda bir bölümü temsil eder.
<SPAN> : Dökümanda bir bölümü temsil eder.
<H1>ile<H6> :Arası başlık yazısı belirler.
<UL> : Düzensiz liste.
<Lİ> : Düzenli listelemedir.
<A> : Link belirtir.
<STRONG> : Kalın yazı.
<LABEL> : Form içindeki metinlere etikettir.
<FORM> : Kullanıcıdan veri almak için düzenlenir.
<İNPUT> : Form için bilgi alanı almak için.
<b> : Koyu harfli yazı
<FOOTER> : Alt bilgi
<HEADER> : Baş bilgi
<ARTİCLE> : Siteye içerik ekleme.
<ASİDE> : Sayfa içerisinde bölümleme yapabileceğimiz bir alan sunuyor.
<BACKGROUND> : Arka plan resmini değiştirmek için kullanılır.
<OVERFLOW> : Yazılan yazıdaki taşma olma durumunda devreye girer ve taşmayı engeller.
<BORDER> : Çerçevedir.
<FLOAT> : Normal akışın dışına çıkarmak için kullanılan bir yöntemdir.
<MARGİN> : Dıştan boşluk vermeyi sağlar.
<PADDİNG> : İçten boşluk vermeye yarar.
<DİSPLAY> : Çok amaçlı kullanılır.Herhangi bir nesneyi yok saydırmaya yarar.
<FONT> : Yazının Px büyüklüğünü belirtir.
<Text-Decoration> : Metni şekillendirmeye yarar.
ÖRNEK HTML VE CSS KULLANIMI:
HTML KODU:
<html>
<head>
<title>Web sayfam</title>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ust">
<h1>
<img src="resim.jpg" border="10">
</h1>
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
<h2><br><br><br><br><br><br><br><br><br><br>
<img src="resim.jpg" border="10"></h2>
</div>
<div class="alt">
<center>
<h1>ESIN ATILAY</h1></center>
</div>
</body>
</html>
CSS KODU:
body {}
.ust{background:red; overflow:hidden; border:0px;width:1400;height:120;}
.ust h1{float:left;}
.ust h1 img{width:100px;height:100px;}
.ust ul{float:right;}
.ust ul li {float:left;list-style:none;margin:40px 5px 0 0;}
.ust ul li a{color:#333;font-size:16px;}
.ust ul li a:hover{color:blue;}
.orta{background:red; overflow:hidden; border:0px;width:120;height:494;}
.orta ul li a{color:#333;font-size:16px;}
.orta ul li a:hover{color:blue;}
.orta h2 img{width:100px;height:100px;}
.orta h2 img{float:right;}
.alt{background:red; overflow:hidden;width:1400;height:140;}
KOD'UN ÖNİZLEMESİ:
<İNPUT> : Form için bilgi alanı almak için.
<b> : Koyu harfli yazı
<FOOTER> : Alt bilgi
<HEADER> : Baş bilgi
<ARTİCLE> : Siteye içerik ekleme.
<ASİDE> : Sayfa içerisinde bölümleme yapabileceğimiz bir alan sunuyor.
<BACKGROUND> : Arka plan resmini değiştirmek için kullanılır.
<OVERFLOW> : Yazılan yazıdaki taşma olma durumunda devreye girer ve taşmayı engeller.
<BORDER> : Çerçevedir.
<FLOAT> : Normal akışın dışına çıkarmak için kullanılan bir yöntemdir.
<MARGİN> : Dıştan boşluk vermeyi sağlar.
<PADDİNG> : İçten boşluk vermeye yarar.
<DİSPLAY> : Çok amaçlı kullanılır.Herhangi bir nesneyi yok saydırmaya yarar.
<FONT> : Yazının Px büyüklüğünü belirtir.
<Text-Decoration> : Metni şekillendirmeye yarar.
ÖRNEK HTML VE CSS KULLANIMI:
HTML KODU:
<html>
<head>
<title>Web sayfam</title>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ust">
<h1>
<img src="resim.jpg" border="10">
</h1>
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
<h2><br><br><br><br><br><br><br><br><br><br>
<img src="resim.jpg" border="10"></h2>
</div>
<div class="alt">
<center>
<h1>ESIN ATILAY</h1></center>
</div>
</body>
</html>
CSS KODU:
body {}
.ust{background:red; overflow:hidden; border:0px;width:1400;height:120;}
.ust h1{float:left;}
.ust h1 img{width:100px;height:100px;}
.ust ul{float:right;}
.ust ul li {float:left;list-style:none;margin:40px 5px 0 0;}
.ust ul li a{color:#333;font-size:16px;}
.ust ul li a:hover{color:blue;}
.orta{background:red; overflow:hidden; border:0px;width:120;height:494;}
.orta ul li a{color:#333;font-size:16px;}
.orta ul li a:hover{color:blue;}
.orta h2 img{width:100px;height:100px;}
.orta h2 img{float:right;}
.alt{background:red; overflow:hidden;width:1400;height:140;}
KOD'UN ÖNİZLEMESİ:
Hiç yorum yok:
Yorum Gönder