Başlıklarımız başlığa benziyor peki başlık neye benziyor yani Times new roman ve bold mu? Ya ben başlıklarımın tüm sayfada aynı font, aynı renk, aynı boyutta olmasını istiyorsam o zaman yapmam gereken tüm başlıklarımda aynı class'ı kullanırım diye düşünebilirsiniz ancak bu çok uzun süren bir işlem oysa html nerelerin başlık olduğunu biliyor bizde onun bu bilgisnden faydalanarak tüm h1 lerin arasına yazılmış olan yazıları bul ve onları benim istediğim gibi şekillendir diyebiliriz. Bunu söylemek için HTML kodlarını tekrar bir hatırlayalım.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sayfamın Başlığı</title>
</head>
<body>
<h1>Sayfamdaki en büyük başlık</h1>
<p>Bu da bir paragraf yaz yaz dur aklımada bir şey gelmedi. Biraz kısa bir paragraf olucak gibi birşeyler birşeyler daha başka şeyler falan filan ancak bu kadar saçmalayabildim.</p>
<ul>
<li>Bu da bir liste bu ilk maddesi</li>
<li>Bu da ikinci maddesi</li>
<li>Bu üçüncü ve sondan bir önceki maddesi</li>
<li>Bu dördüncü ve sonuncu maddesi</li>
</ul>
<p>Buradada başka bir paragraf var işte burayada birşeyler yazalım yazalım yazalım</p>
<h2>Bu sayfamızdaki ikinci en büyük başlık</h2>
<p>Bu da son paragrafımız artık bittim aklıma gerçekten başka hiç birşey gelmiyor</p>
</body>
</html>
Şimdi kodlarımızı bir hatırlayalım şimdi css'ti ne alaka HTML'le diye düşüneceksiniz ancak tagler yani etiketlerden bahsedeceksek HTML'li biraz olsun anlamamız gerekmekte
 |
| HTML Tagleri (Etiketleri) |
- head: Head tagı içerisine yazılanlar html tagı yorumlanırken dikkat edilmesi gereken bilgileri barındırıyor. Ancak buraya yazılan kodlar tarayıcımızın içinden hiç bir zaman görüntülenmiyor. Buraya yazılan kodlardan sadece title tarayıcımızın tepesinde görünür ve buradaki hiç bir tage css uygulanmaz.
- body: Tarayıcının içinde gördüğümüz herşeyin kodlarının yazıldığı yerdir ve body'nin kendiside olmak üzere burada bulunan tüm taglere css uygulanır.
head tagının içindeki hiç bir tag'e css uygulanmadığından bu bölümdeki taglere şimdilik bakmayacağız. Body tagının içindeki taglere göz attığımızda karşımıza 1 adet h1, 3 adet p, 1 adet ul ve 4 adet li çıkıyor şimdi eğer tüm p'leri etkileyecek bir css oluşturursam, html kodları taranır ve 3 adet p bulunup oluşturduğum css kuralı buralarda uygulanır. Oldukca basit eğer h1'ler için bir css kuralı oluşturursam Etkilenecek olan yazı sayfanın en başındaki "Sayfamızdaki en büyük başlık" yazısı olacaktır. Çünkü onun haricinde h1 tagi içine alınmış bir yazıya sahip değilim.
Dreamweaver'da bir boş bir Files > New diyerek boş bir HTML sayfası açalım. Burada Design kısmına bir yazı yazalım, yazıyı seçili hale getirip, Properties panelindeki Format açılır menüsünden Heading 1'i seçelim.
 |
| Yazıyı H1 yapmak |
Bundan sonra yapacağımız işlem sayfamızı eğer kaydetmediysek kaydetmek olacak. Daha sonra Css panelindeki New CSS Rule buttonuna tıklayarak yeni bir Css kuralı oluşturmaya başlayalım, açılan pencereden tag'i seçip Css kuralına h1 adını verelim. Şimdilik this document only seçeneğini seçelim.
 |
| Dreamweaver'da Tag türü Css kuralı oluşturmak |
 |
| Css türü Tagler |
Oyyla!
Hiç yorum yok:
Yorum Gönder