Sıfırdan İleri Seviye PHP (HTML ve PHPmyAdmin Dahil) #2 Kod Yapısı, Başlık Etiketleri ve Paragraf Etiketi

0
130

HTML Çok basit bir kod yapısına sahiptir. Ancak anlaşılması zaman alabilir. Bir sürü öznitelik (ileride öğreneceğiz) olduğundan kafa karıştırabilir ama zaten örnek projelerle daha iyi anlayacağız. Şuanlık sadece 3 temel şeyi bilmeniz yeterli; (diğer 2 şeyi kurs sırasında göreceğiz.)

1-HTML Kod yapısını oluşturacak iskelet
Kullanacağımız Sublime Text Editör’de bu iskeleti her projede/sayfada yazmamıza gerek kalmıyor.(Bir index.php veya index.html sayfası oluşturun) Bazı kısayollarımız var bunlardan ilkiyle başlayayım.(bu kısayolları kısayol ismi ve ardından TAB’a basarak kullanabilirsiniz.)

kısayol 1 = “html” (ikinci resim TAB’a basıldıktan sonra otomatik oluşan texttir.)


Yukarıdaki resimde gördüğünüz <title></title> kısmı sayfamızın üst kısmında gösterilecek yazıdır.

Burada dikkatinizi bir şeye çekmek istiyorum siz burayı düzenleyip kaydedip localhost a girdiğinizde orada bazı türkçe karakter sorunları olduğunu görüceksiniz. Biz bunları engellemek için “meta” kısayoluyla bi charset yani karakter seti belirliyoruz. Bu standart olarak utf-8 gelecektir ve Türkçe’ye uygundur. (meta ve title etiketleri her zaman head etiketinin arasında olur!)

Body kısmı sayfanın içindeki yazıların, ana kodların olduğu bölümdür.

Başlık Etiketleri

Başlık etiketleri <h1>YAZI</h1> dan başlayıp <h6> ya kadar gider. Peki bu sayıalr neye göre sıralanır? Bu sayılar sayfanın google gibi arama motorlarında öne çıkmasını sağlar. E ama ben tüm yazıları en büyük boy olan h1 de yazamam öne çıkmak için diyeceksiniz. Zaten hepsini h1 de yazmanız mümkün değil. Hadi bi çılgınlık yapıp yazdınız diyelim. Şimdi yardımınıza CSS Koşacak. Ama şuan css dersi önceliğimiz değil.

Başlık etiketleri örnekleri:

h1

h2

h3

h4

h5
h6

İşte bu kadar.

Paragraf Etiketi

Paragraf etiketi metinleri ayırmak için kullanılır.

örneğin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. (Bu bir lorem texti bknz: Lorem nedir?)

bu yazıyı kod olarak şu şekilde yazarız:

<!DOCTYPE html>
<html>
<head>
<title>Ders2 </title>
<meta charset="utf-8">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>

Ve yazı birleşik olur ancak biz bunu Paragraf Etiketiyle Yazarsak:

<!DOCTYPE html>
<html>
<head>
<title>Ders2 </title>
<meta charset="utf-8">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

Şu şekilde bir görüntü ortaya çıkar (kısaca paragraflara böler):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

Bir sonraki ders için buraya tıklayın

CEVAP VER

Lütfen yorumunuzu yazınız!
Lütfen adınızı giriniz