Selam Dostlar , "CSS Nedir ?" İsimli Konumdan Sonra Şimdi Basit Bir Site Yapmayı Düşündüm 
:
Başlangıcımızı ******** Type'la Başlayalım
Html Girişini Yapalım ...
Head ve Body Belirleyelim ...
Siteminiz Başlığını Belirleyelim ...
Başlığımızı Head İçinde Belirleyelim
Yazımızı Tam Ortaya Getirelim ve Kalınlaştıralım:
Yazımızın Arkaplanını Grey Yapalım
Bu Sırada CSS Devreye Giriyor ve Bu Yüzden ********* Etiketini Kullanıyoruz
Kodumuzun Diğer Kodlardan Farklanması İçin <div> Etiketini Kullanıyoruz ve Açıklamaya Başlık Yazıyoruz ...
Şimdi Arkaplanı Grey Yapalım
Evet , Şimdi Arkaplan Ölçütümüzü Küçülterek Aşağı Endirelim
Başlığımız Bu Kadarlık , Şimdi Hakkımda Kısımına Geçelim:
Şimdi Şekillendirelim
Yazımız Yarı-Başlık Haline Geldi ve Altından Çizgi Çektik + Kırmızı Renk Verdik:
Şimdi İçini Dolduralım ...
Şimdi Yazımızın Text Fontunu Değiştirelim:
Şimdi Discord Adresimizi Ekleyelim
Süsleyelim ve En Güzel Şekile Getirelim:
Şimdi Discord Yazısının Üzerine Fareyi Getirdiğimizde Renk Kırmızı Olsun İstiyoruz ( Hover )
Buna Yavaşlığı Animations'la Vere Biliriz Ancak Pek Güzel Olmaz Diye Düşünüyorum :gozkirpan
Çıktı :
:
Başlangıcımızı ******** Type'la Başlayalım
Kod:
<!DOCTYPE HTML>Html Girişini Yapalım ...
Kod:
<html>
</html>Head ve Body Belirleyelim ...
Kod:
<head>
</head>
<body>
</body>Siteminiz Başlığını Belirleyelim ...
Kod:
<title> Herorahim - Official Site </title>Başlığımızı Head İçinde Belirleyelim
Kod:
<body>
Herorahim - Official Website
</body>Yazımızı Tam Ortaya Getirelim ve Kalınlaştıralım
:
Kod:
<center> <h1> Herorahim - Official Website </h1> </center>Yazımızın Arkaplanını Grey Yapalım
Bu Sırada CSS Devreye Giriyor ve Bu Yüzden ********* Etiketini Kullanıyoruz
Kodumuzun Diğer Kodlardan Farklanması İçin <div> Etiketini Kullanıyoruz ve Açıklamaya Başlık Yazıyoruz ...
Kod:
<div id="baslik"> <center> <h1> Herorahim - Official Website </h1> </center> </div>Şimdi Arkaplanı Grey Yapalım
Kod:
*********
#baslik { background: grey; }
</style>Evet , Şimdi Arkaplan Ölçütümüzü Küçülterek Aşağı Endirelim
Kod:
*********
#baslik { background: grey;
margin: 80px; }
</style>Başlığımız Bu Kadarlık , Şimdi Hakkımda Kısımına Geçelim
:
Kod:
<div id="hakkimda"> <h2> Hakkımda : </h2> </div>Şimdi Şekillendirelim
Kod:
*********
#hakkimda {
color: red;
text-decoration: underline; }
</style>Yazımız Yarı-Başlık Haline Geldi ve Altından Çizgi Çektik + Kırmızı Renk Verdik
:Şimdi İçini Dolduralım ...
Kod:
<div id="bilgihakkimda"> <h4> Merhaba Ben Herorahim. Sitemi Ziyarete Hoşgeldin :) , İlgi Alanlarım: Yazılım-Deface-Crack-Siber Güvenlik Alanları ... </h4> </div>Şimdi Yazımızın Text Fontunu Değiştirelim
:
Kod:
*********
#bilgihakkimda {
font-family: "Lucida Console", Courier, monospace;
</style>Şimdi Discord Adresimizi Ekleyelim
Kod:
<div id="discord"> <h3> <center> Discord: Herorahim#4962 </center></h3> </div>Süsleyelim ve En Güzel Şekile Getirelim
:
Kod:
#discord {
color: blue;
border: 6px double;
background-color: lightgrey;
margin: 50px;
height: 50px;
width: 500px;
}Şimdi Discord Yazısının Üzerine Fareyi Getirdiğimizde Renk Kırmızı Olsun İstiyoruz ( Hover )
Kod:
#discord:hover { color: red; }Buna Yavaşlığı Animations'la Vere Biliriz Ancak Pek Güzel Olmaz Diye Düşünüyorum :gozkirpan
Çıktı :
Kod:
<!DOCTYPE HTML>
<html>
<title> Herorahim - Official Site </title>
<head>
</head>
<body>
<div id="baslik"> <center> <h1> Herorahim - Official Website </h1> </center> </div>
<div id="hakkimda"> <h2> Hakkımda : </h2> </div>
<div id="bilgihakkimda"> <h4> Merhaba Ben Herorahim. Sitemi Ziyarete Hoşgeldin :) , İlgi Alanlarım: Yazılım-Deface-Crack-Siber Güvenlik Alanları ... </h4> </div>
<div id="discord"> <h3> Discord: Herorahim#4962 </h3> </div>
</body>
*********
#baslik { background: grey;
margin: 80px; }
#hakkimda {
color: red;
text-decoration: underline; }
#bilgihakkimda {
font-family: "Lucida Console", Courier, monospace;
}
#discord {
color: blue;
border: 6px double;
background-color: lightgrey;
margin: 50px;
height: 50px;
width: 500px;
}
#discord:hover { color: red;
}
</style>
</html>
