Bu makalemde; temel HTML sayfa yapısı nasıl olmalıdır? Temel HTML kodları nelerdir? sorularına cevap vereceğim. HTML dili, web’in kurucu babaları olan Tim Berners Lee ve Robert Cailliau tarafından (günümüzün aç gözlü geliştiricilerinin aksine) “insanlığa hizmet” amacıyla geliştirildi.
HTML NEDİR?
Web sayfaları oluşturmak için kullanılan standart biçimlendirme dilidir. HTML, HyperText Markup Language tanımının kısaltmasıdır. Pek çok blog yazarının ezbere dile getirdiği üzere Türkçe anlamı “köprü metni işaretleme dili” değildir. Doğru çevirisi yüksek metin işaretleme dili‘dir. Hiper kelimesinin ötesinde” ya da “üzerinde” gibi bir anlamı vardır. Yani hiper metinin standart metinin ötesinde özelliklere sahip olduğunu ifade eder.
HMTL BİR SAYFA NASIL OLUŞTURULUR?
HTML sayfa oluşturmak için öncelikle Sublime Text yada Notepad++ gibi bir editör gerekmektedir. Eğer editörünüz yoksa windows işletim sisteminde bulunan not defterini (metin belgesi) de kullanabilirsiniz. Temel kodları yazıp kaydettikten sonra metin belgenizin .txt uzantısını .html yapmanız ilk sayfanızı oluşturmanız için yeterli.
WINDOWS 10 DOSYA UZANTILARINI GÖSTERME
Dosyanızın uzantısını değiştirebilmeniz için uzantıları görebiliyor olmanız gerekir. Eğer göremiyorsanız Önce Bilgisayarım ‘ı açın. Sonra sol üstteki sekmelerden Görünüm sekmesine tıklayın. Bu sekmelerin hemen altındaki bölümün sağ tarafında bulunan dosya adı uzantıları seçeneğini işaretleyin. Artık uzantıları görebilirsiniz.
TEMEL HTML YAPISI
Aşağıdaki kodları .html uzantılı dosyanın içine kopyalayarak temel HTML sayfa yapınızı oluşturabilirsiniz.
<!DOCTYPE html> <html> <head> Site Başlığı </head> <body> <h1>Konu Başlığı</h1> <p>Açıklama yazısı</p> </body> </html>
HTML İLE EN BASİT WEBSİTE YAPIMI videosunda anlattığım sitenin kodları ve açıklamaları;
<body style="text-align:center; background-color:black; color:#fff; padding:30px"> :
text-align: stili; yazıların sağa (right), sola (left) yaslanmasını ya da ortalanmasını (center) sağlar.
background-color: Tanımlandığı kapsayıcının arka plan rengini değiştirir. Örneğin body etiketine tanımladığımızda tüm sitenin arka plan rengini değiştirebiliriz. Fakat body içindeki bir etikete tanımladığımızda sadece o etiketin arka plan rengini değiştirir.
color: Atandığı kapsayıcının içindeki yazıların rengini değiştirir.
padding: Atandığı kapsayıcının içine, tanımlanan piksel(px) ve yön oranında boşluk verir. (padding-top:yukarı, padding-left: sola, padding-right: sağa, padding-bottom: aşağı, padding: her yöne)
—
<img src="serdar.jpg" style="margin-top:30px">
Resim yerleştirme kodudur. img src=”resim dosyası yolu ve dosya türü buraya yazılır“
margin: Atandığı kapsayıcının dışına, tanımlanan piksel(px) ve yön oranında boşluk verir. (margin-top:yukarı, margin-left: sola, margin-right: sağa, margin-bottom: aşağı, margin: her yöne)
—
<a href="http://www.serdarsezer.com/temel-html-yapisi/" target="_blank" > Temel HTML yapısı için tıklayınız</a>
Link yerleştirme kodudur. a href=”bağlantı buraya eklenir“.
target=”blank“: Linkin yeni bir sekmede açılmasını sağlar.