HTML'nin tarayıcıların anladığı bir dil olduğundan bahsetmiştik. HTML dosyalar `.htm` veya `.html` uzantılı olan dosyalardır ve bir tarayıcıda açılmaları gerekir. Dosyanın düzenlenmesi ise örneğin basitçe Notepad ile yapılabilir. Yani içeriğimizi Notepad ile oluşturup tarayıcıda görüntüleriz.
Şimdi masaüstünde bir metin belgesi oluşturalım. Bunun için masaüstünde sağ tıklayıp **Yeni > Metin Belgesi** dememiz yeterli. Bu dosyanın adını da `deneme.html` koyalım. Uzantı değişmesi ile ilgili bir uyarı gelir, burada **Evet** diyelim. Artık HTML uzantılı bir dosyamız oldu. Dosya simgesinin tarayıcınızın (varsayılan Chrome, Internet Explorer ya da başka hangi tarayıcı ise) simgesi olduğunu göreceksiniz. Bu dosyayı çift tıklayarak açarsanız tarayıcıda boş bir sayfa açtığını göreceksiniz. Düzenlemek için ise dosya üzerinde sağ tıklayıp "Birlikte Aç" sekmesinden Notepad'i seçmelisiniz. Tekrar belirtmeliyim ki HTML dosyayı görüntülemek ve düzenlemek farklı şeylerdir. Bir internet sitesini görüntülersiniz ama düzenleyemezsiniz. Düzenlemek için bir Notepad, Notepad++ gibi bir programa ihtiyacınız vardır.
HTML Dosyası Oluşturma
Sıra geldi içerik eklemeye. Dosyayı Notepad ile birlikte açıp içine adınızı ve soyadınızı yazıp kaydedip kapatın. Dosyayı çift tıklayarak açtığınızda tarayıcınızda isminiz yazdı.
TEBRİKLER!
İlk HTML dosyanızı hazırlayıp çalıştırdınız. Şimdi soranlar olacaktır: "Buraya ne yazsak tarayıcıda çıkacak ise bu iş bu kadar mı?" Tabi ki hayır. Diyelim ki adınızı kalın bir punto ile yazmak ya da italik (eğik) yazmak istediniz. İşte bu nokta HTML'in devreye girdiği ilk noktadır. Yani metin düzenlemek. Bunun için HTML kodlarının yapısını da biraz anlatayım.
HTML Kodlarının Temelleri
Tüm HTML kodları `<` ve `>` işaretleri ile belirlenir (bu işaretlerin arasına yazılır). İlk olarak belgemizin HTML belgesi olduğunu tarayıcıya söyleyelim.
<!DOCTYPE html>
<html>
<head>
<title>İlk Dosyamız</title>
</head>
<body>
Merhaba Dünya Ben Bir HTML sayfasıyım!
</body>
</html>Bu noktada sayfamızın HTML sayfası olduğunu tarayıcıya söyledik. En güncel sürüm olan HTML 5 olduğunu söylemek için ilk satırda `<!DOCTYPE html>` kullanıyoruz. Tüm HTML kodları `<kodismi>` ile başlayıp `</kodismi>` ile biter. Genel yapı olarak HTML sayfası 2'ye ayrılır; sayfanın başlığı ve içeriği yazan kişinin bilgilerini içeren `<head>` kısmı ve sayfanın tüm içeriğini barındıran `<body>` kısmı.
Sayfa Başlığı ve İçerik Eklemek
Şimdi de sayfa başlığımıza adımızı yazdırıp sayfa içeriğine "Merhaba Dünya Ben Bir HTML sayfasıyım!" yazalım:
<!DOCTYPE html>
<html>
<head>
<title>İlk Dosyamız</title>
</head>
<body>
Merhaba Dünya Ben Bir HTML sayfasıyım!
</body>
</html>
Masaüstünde oluşturduğumuz `deneme.html` dosyasını sağ tıklayıp **Birlikte Aç > Notepad** diyerek yukarıdaki kodu yapıştırın. Kaydedip dosyaya çift tıkladığınızda tarayıcı sekmesinde adınızın yazdığını; sayfa içeriğinde de "Merhaba Dünya Ben Bir HTML sayfasıyım!" yazdığını göreceksiniz.
Metin Stilleri: Kalın ve İtalik Yapma
Şimdi bu yazıyı kalın ve italik yapalım. Bunun için `<b>` ve `<i>` etiketlerini kullanacağız.
<!DOCTYPE html>
<html>
<head>
<title>İlk Dosyamız</title>
</head>
<body>
<b><i>Merhaba Dünya Ben Bir HTML sayfasıyım!</i></b>
</body>
</html>
Kodu çalıştırdığınızda sayfada yazının hem italik hem de koyu renk olduğunu göreceksiniz. İstersek kelime hatta harflere kadar indirgererek bu yapıyı kullanabiliriz.
Satır Atlama: `<br>` Kodu
Yeri gelmişken, tek kullanılan ve kapatmadan işlem yapılan satır atlama kodumuz `<br>` ile ilgili biraz bilgi verelim. `<body>` kısmına yazacağınız yazılarda satır atlayarak, birden fazla boşluk koyarak yazabilirsiniz ama tarayıcınız bunları görmez. Tüm metinlere düz metin muamelesi yapacaktır. Metninizde satır atlatmak istediğiniz yere `<br>` yazmanız yeterlidir.
Buraya kadar anlattıklarım ile ilgili geniş bir örnek kod vermem gerekirse:
<!DOCTYPE html>
<html>
<head>
<title>İlk Dosyamız</title>
</head>
<body>
LOGORİTMİK<br>
<b><i>İlk kelime italik ve koyudur!</i></b><br>
<b><i>S</i>adece ilk harf italik ve koyudur!</b><br>
<b>Bu metin sadece koyudur.</b><br>
<i>Bu metin sadece italiktir.</i>
</body>
</html>```
Göreceğiniz gibi `<br>` kodu sayesinde her cümle sonunda bir satır atlamış olduk. `<br>` kodlarını kaldırarak denediğinizde tüm cümlelerin yana yana yazıldığını görebilirsiniz.
Detay bilgi olarak: Her kod `<örnekkod>` şeklinde başlayıp `</örnekkod>` şeklinde bitiyordu ama istisna durumlar var. `<br>` kodu bir kapamaya ihtiyaç duymadan tek başına kullanılabilen bir koddur.
Bu temel bilgilerle artık daha karmaşık HTML sayfaları oluşturabilir ve düzenleyebilirsin!
Yorumlar
Henüz yorum yapılmamış. İlk yorumu siz yapın!