HTML’e Giriş (5)

Yazar Hasan | 04-03-2024, 06:56 PM

Temel HTML Komutları ve Sayfa Oluşturma

Şu ana kadar 4 derste HTML’in temel yapısını kavradığımızı varsayıyorum. Komutların nasıl kullanıldığını az çok öğrendik. Şimdi hangi komutlar ne işe yarıyor ve nasıl kullanılır onu anlatacağız.

Bir HTML sayfası iki bölümden oluşur. Bunlardan biri “Başlık” diğeri ise “Gövde”dir. Sayfanın niteliği yani arama motoruna yönelik içerikler başlık kısmında, sayfa içeriği yani biz kullanıcıların web sitelerini gezerken gördüğümüz içerikler ise gövde kısmında bulunur.

Kod:
<html>
<head></head>
<body></body>
</html>

Yukarıda görüldüğü üzere HTML sayfası <html> etiketi ile başlar ve </html> etiketi ile kapatılır. Yukarıdaki kodlar bir html sayfasıdır. İçerik eklenecekse bunu <head> ve <body> etiketleri arasına yazmanız gerekir.

Şimdi bir HTML sayfası oluşturalım ve bu sayfa tarayıcıda açtığımızda bize “merhaba dünya” yazısını göstersin

Kod:
<html>
<head></head>
<body>merhaba dünya</body>
</html>

[Resim: attachment.php?aid=53]

Yukarıdaki sayfamız tarayıcıda sadece merhaba dünya yazdırdı. Ancak sayfanın adı bizim dosyayı oluşturduğumuz “ilksayfa.html” olarak görüntülenmekte. Şimdi sayfamıza isim verelim. Burada vereceğimiz isim “Sayfam” olsun. Bunu HTML dosyası içinde <title> etiketleri arasına yazmamız gerekmektedir. <title> etiketİ İngilizce “başlık” anlamına gelen title’dan gelmektedir. Bu etiket HTML sayfasında <head> etiketleri arasında yer almalıdır. Örnek kullanımına ve önizlemesine bakalım:

Kod:
<html>
<head><title>Sayfam</title></head>
<body>merhaba dünya</body>
</html>

[Resim: attachment.php?aid=54]

Peki <title> etiketinin önemi nedir?
Arama motorları (Google, Yandex, Bing, Duckduckgo, …) tarafından sevilen ve arama motoru veritabanına sayfanın özelliğine göre -ürün satış sayfası ise “iPhone14 Satın Al gibi”- eklenen, arama sonuçlarında sayfanın daha kolay listelenmesini sağlayan ve arama sonuçlarında karşınıza çıkan içerikler bu etiket sayesindedir.

Temel olarak HTML sayfası özelliklerinden bahsettim ama sayfa oluşturup nasıl kaydedeceğiniz anlatmadım sizlere. Dersin son bölümü de bu olsun.

Yazar NotuBen çift bilgisayar kullanıyorum, biri Windows 11 tabanlı diğeri ise MacOS tabanlı. Genelde hangi bilgisayar müsaitse yazıma oradan devam ettiğimden bazen windows11 de not defterinden yazılan kodların ekran çıktısı bazen de kişisel bilgisayarım olan macbook üzerinden yazdığım kodların ekran çıktısı farklı şekilde görüntüleyebilirsiniz. Kodlarda hata yok sadece yoğunluğuma göre hangi bilgisayarda bu yazıya devam ettiğime bağlı. Anlayış göstermeniz dileğiyle Smile


Evet ilk önce Windows işletim sistemli bilgisayar kullanan arkadaşlar için anlatım yapayım. Masaüstüne gelip boş bir alanda Mouse ile sağ click yapıp gelen seçenek menüsünden “Metin Belgesi”ne tıklayınız.

[Resim: attachment.php?aid=55]

Metin belgesi açılır açılmaz öncelikli olarak olması gereken temel kodlarımızı ekliyoruz. Neydi bunlar hatırlayalım:

Kod:
<html>
<head></head>
<body> </body>
</html>

[Resim: attachment.php?aid=56]

Kodlarımızı ekledikten sonra Metin belgesi içinden sırasıyla “Dosya Sağ ok Farklı kaydet” diyoruz.

[Resim: attachment.php?aid=57]

Gelen sayfada “dosya adı” size saklı olmak ve Türkçe karakter içermemek üzere, sonuna .html yazıyoruz. Örnek olarak ben ilksayfam.html oluşturdum. Akabinde kayıt türüne ise “Tüm dosyalar”ı seçiyoruz

[Resim: attachment.php?aid=58]

Sayfamızda Türkçe karakter kullanabiliriz ve karakterlerin düzenli görüntülenmesi için hemen yan tarafta “Kodlama” alanı var buradan da UTF-8 i seçiyoruz ve akabinde kaydediyoruz.

[Resim: attachment.php?aid=59]

Klasöre baktığınızda bunu net bir şekilde görebilirsiniz. Dosyamız web tarayıcı formunda görüntülenmekte.

[Resim: attachment.php?aid=60]

Yazı Etiketleri

[etiket]HTML[/etiket], [etiket]HTML Nedir?[/etiket], [etiket]HTML öğren[/etiket], [etiket]HTML dersleri[/etiket], [etiket]HTML ders[/etiket], [etiket]HTML yeni sayfa[/etiket], [etiket]web sitesi oluşturma[/etiket], [etiket]Notepad++[/etiket]



Yazarımız Hasan hakkında: 2009 da başladı web maceram, MyBB, Wordpress, Matematik, Bilgisayar Programcılığı, Adalet derken şimdide burada bir şeyler yapmaya çalışıyorum :)

user avatar


 

Yazıya herhangi bir yorum yapılmadı

[-]
Hızlı Cevap
Güvenlik Kodu:
Lütfen, resmin üzerindeki harf ve rakamlardan oluşan Güvenlik Kodunu, aşağıdaki metin kutusuna giriniz.
Güvenlik Kodu:
(Büyük/Küçük harf duyarsız)

Yodofoo Parch Pack
Powered By YodofooPP - MyBB Türkçe
YTR v3 Theme designed for MyBB
  
Hoşgeldiniz...

Hoşgeldin, Ziyaretçi:
Giriş Yap
Kayıt Ol

Kategoriler

Yasal Uyarı
Bu internet sitesi içeriğinde yer alan tüm yazılar Yodofoo.com.TR’ye (YTR) ait olup, 5846 sayılı Fikir ve Sanat Eserleri Kanunu ve 5237 sayılı Türk Ceza Kanunu kapsamında korunmaktadır. Bu hakları ihlal eden kişiler, 5846 sayılı Fikir ve Sanat eserleri Kanunu ve 5237 sayılı Türk Ceza Kanununda yer alan hukuki ve cezai yaptırımlara tabi olurlar. YTR, ilgili yasal işlem başlatma hakkına sahiptir. YTR Blog'da yer alan tüm yazılar/makaleler bilgi edinme amacı ile sınırlı olup YTR'den izin alınmaksızın değiştirilemez, çoğaltılamaz, yayımlanamaz, dağıtılamaz, umuma iletilemez, başka bir lisana çevrilemez.