-
201.
+53. Gün / 1. DersTümünü Göster
Merhaba beyler bayanlar bugün artık anasayfamızda birşeyler göstermeye başlayacağız. Blog veya video çekmemi isteyenler var aranızda yakın zamanda blog açıp burada sizinle paylaşacağım. Şimdi herkes index. html sayfasını oluştursun ardından altta yazılan kodları <body> </body> tagları arasına yazsın. Kısaca kodların ne işe yaradığını anlatacağım.
index. html kodları
<div id="container">
<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href="index. html">Anasayfa</a></li>
<li><a href="hakkimizda. html">Hakkımızda</a></li>
<li><a href="iletisim. html">iletişim</a></li>
</ul>
</div>
</div>
container adlı divimiz bizim en genel divimiz oluyor. bunu yapmamdaki amaç tüm içeriği kapsayan bir yapı oluşturmak için. daha sonra ilerleyen zamanlarda proje içeriği karmaşıklaştıkça hizalama sorunları olmasın diye böyle bir kapsayıcı div yerleştiriyorum.
header adlı divimiz ise genelde sitelerin üst kısmında bulunan yer için adlandırılır. bunun içerisinde menü logo varsa arama kutucuğu hatta yeri geldiği zaman slider (resim geçişi) bulunabilir. ben çok kapsamlı birşey yapmayacağım. sadece basit bir site yapımından bahsedeceğim için şablonu basit hazırlıyorum.
header içerisine aslında <img> ile bir logo ekleyebilirdim ama ekstra örnek logo bulmak için uğraşmadım oraya hemen bir <h1> tagı açıp logo yazdım. tabi siz o h1 kaldırıp yerine <img src="assets/img/logo.png" alt="logo"> olarak değiştirebilirsiniz.
header içerisinde sağda bulunan bir de menümüz var. bu menüyü ul>li>a şeklinde yaptım ki ileride menü ekleme çıkarma olayı olduğunda dinamik bir yapımız olsun.
en son ise bir clear classımız var. bunun ne işe yaradığına gelecek olursak. yan yana div eklediğimizde daha sonra alta div eklemek istediğimzde karışıklık olmasın diye hizalamaları düzelten bir yapısı vardır. clear adını siz istediğiniz gibi yaparsınız fakat standartı bu şekildedir. style.css dosyamızda bir .clear tanımladım ve içerisine float:both; dedim. şimdi bu ne işe yarıyor diyeceksiniz bunu style.css kodlarını yazdıktan sonra açıklayacağım.
aynı clear classını </ul> bitiminden sonra da yaptım ki bunu style.css kodlarını incelediğinizde anlayacaksınız umarım.
bu arada aklıma gelmişken ufak bir farktan size bahsetmek istiyorum. id ile class farkı nedir derseniz. id sayfa içerisinde bir tane bulunmak zorundadır. he birden fazla da bulunabilir fakat standarta uymaz. class ise birden fazla yerde kullanılmak istendiğinde kullanılır. mesela yukarıdaki clear classımızı id şeklinde yapsaydım olmazdı. olurdu ama standartlardan uzaklaşırdık. umarım farkı kısaca anlatabilmişimdir. Tüm bu yapıyı inceleyin istiyorum. Kısaca html kodları yazıp bir şablon ayarladık. Tabi ki devamı gelecek. Bir sonraki derste style.css kodlarını sizinle paylaşacağım.
// Soruları alta yazabilirsiniz.
Yazılımcı insanın kuralları yoktur: Kuralları kendisi belirler. Twitter sayfamız: https://twitter.com/Inci_Yazilim Youtube sayfamız :https://www.youtube.com/channel/UCXrcyB4czsKC0QpSz4mSSEw/featured
Bu sayfalardan olur da bir gelir elde edersek bu gelir Gazi ve Şehit ailelerine verilecektir. Sözümüz olsun
Siber suç kapsamına giren casus, korsan, virüs, vb. yazılım paylaşımları hakkında işlem yapılmaktadır.
Hackleme adı altında açılan başlıklar silinecektir.Crackli dosyalar lisans ve telif yüzünden paylaşılmamalıdır
Açmış olduğunuz başlıklara indirilebilir linkler koymak yasaktır.
Her türlü şikayet, öneri, soru ve tavsiyeleriniz için Yazılım altincisi admini ile iletişime geçebilirsiniz ulaşamadığınız takdirde ise diğer co-mod ve yetkili panpalarımız sizler için görevlendirilmiştir.
makaras admin