HTML’in temellerini öğrenmeye başlamadan önce, HTML’in ne olduğunu ve nasıl çalıştığını kısaca tanıyalım. HTML, web sayfaları oluşturmamızı sağlayan bir işaretleme dilidir. (Evet programlama dili değil. 😁) Web tarayıcımızın sayfaların yapısını anlamasına yardımcı olan etiketlerden oluşur. Bu etiketlerle, metinleri, görüntüleri, bağlantıları ve diğer içerikleri düzenleriz ve biçimlendiririz. HTML temelleri oldukça basittir. Sadece birkaç saatte temellere aşina olabilirsiniz.
HTML’in temellerini aşağıda 10 soruyla anlatmaya çalıştım. Her sorunun altında, cevabı açıklayan bir paragraf ve örnek bir kod bulunmaktadır. Kodları kendi web sayfanızda denemek için HTML editörü kullanabilirsiniz.
1. Tüm HTML belgeleri hangi etiketle başlamalıdır?
Kısa cevap: <!DOCTYPE html>
Bu etiket, oluşturduğumuz dosyanın bir HTML belgesi olduğunu bildirir. <!DOCTYPE html> aynı zamanda HTML’in en güncel versiyonunun kullanıldığını tarayıcıya söyler. Bu etiket, HTML belgesinin en başında yer almalıdır. Yani yazacağımız herhangi bir HTML etiketinden önce gelmelidir.
<!DOCTYPE html>
<html>
<!-- HTML belgesi burada başlar -->
</html>2. HTML belgesinin başlangıç ve bitiş etiketleri nelerdir?
Kısa cevap: <html>…</html>
Bu etiketler, HTML belgesinin başlangıç ve bitiş noktalarını belirtir. Tüm HTML etiketlerini ve onların içinde yer alan içerikleri bu etiketler arasına yazarız.
<!DOCTYPE html>
<html>
<!-- HTML belgesi burada başlar -->
<head>
<!-- Başlık etiketleri burada -->
</head>
<body>
<!-- Gövde etiketleri burada -->
</body>
<!-- HTML belgesi burada biter -->
</html>
3. HTML belgesinin başlığını nerede tanımlarız?
Kısa cevap: <head>…</head> etiketleri arasında.
Bu etiketler, HTML belgesinin başlığını ve diğer ek bilgileri içerir. Başlık etiketleri, tarayıcıya sayfayı nasıl işleyeceğini söyler, ancak bunlar kullanıcı tarafından görülmez. Başlık etiketleri arasında en önemlisi <title> etiketidir. Çünkü bu etiket, sayfanın başlığını belirtir. Tarayıcının sekmesinde ve Google sonuçlarında görünür.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
<meta charset="UTF-8" />
<meta name="description" content="HTML'in temellerini öğrenin." />
<meta name="keywords" content="HTML, temel, öğrenme" />
<meta name="author" content="Muhammet Şükrü ENGİNOĞLU" />
</head>
<body>
<!-- Gövde etiketleri burada -->
</body>
</html>4. HTML belgesinin gövdesini nerede tanımlarız?
Kısa cevap: <body>…</body> etiketleri arasında.
Bu etiketler, HTML belgesinin gövdesini oluşturur. Gövde etiketleri, kullanıcı tarafından görülen tüm içerikleri içerir. Mesela metinler, resimler, bağlantılar, tablolar, listeler, formlar ve daha fazlası. Gövde etiketleri, başlık etiketlerinden sonra başlar ve HTML etiketinin sonuna kadar devam eder.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<p>Bu sayfada HTML'in temellerini öğreneceksiniz.</p>
<img src="htmlLogo.png" alt="HTML logosu" />
<a href="https://www.frontcuabi.com">Daha fazla bilgi için buraya tıklayın.</a>
</body>
</html>5. HTML belgesinde metinleri nasıl başlık haline getiririz?
Kısa cevap: <h1> ile <h6> arasındaki etiketleri kullanarak.
Bu etiketleri, HTML belgemizde metinlerimizi başlık haline getirmek için kullanılırız. <h1> en önemli ve en büyük başlık için, <h6> en az önemli ve en küçük başlık için kullanılır. Ayrıca başlık etiketlerini, oluşturduğumuz içeriklere anlam ve önem katmak için de kullanırız. Bu, arama motorları ve ekran okuyucular için faydalıdır.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<h2>HTML Nedir?</h2>
<h3>HTML Etiketleri</h3>
<h4>HTML Başlık Etiketleri</h4>
<h5>HTML Paragraf Etiketleri</h5>
<h6>HTML Diğer Etiketleri</h6>
</body>
</html>6. HTML belgesinde metinleri nasıl paragraf haline getiririz?
Kısa cevap: <p> ve </p> etiketleri arasına yazarak.
Bu etiketleri, HTML belgemizdeki metinleri paragraf haline getirmek için kullanırız. Metinleri anlamlı bölümlere ayırmak için <p></p> etiketlerini sıkça kullanırız. Ayrıca bu etiketler arasına yazdığımız metinler, otomatik olarak yeni satıra geçer. (Blok element özelliği)
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<p>HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir.</p>
<p>HTML, bir web tarayıcısı tarafından anlaşılabilen ve sayfaların yapısını belirleyen etiketlerden oluşur.</p>
<p>HTML etiketleri, metinleri, görüntüleri, bağlantıları ve diğer içerikleri düzenlemek ve biçimlendirmek için kullanılır.</p>
</body>
</html>7. HTML belgesinde metinleri nasıl vurgularız?
Kısa cevap: <strong> ve <em> etiketlerini kullanarak.
Bu etiketleri, HTML belgemizdeki metinleri vurgulamak için kullanırız. <strong> etiketi, metni kalın yaparak vurgular. Bu etiket, metnin önemli olduğunu belirtir. <em> etiketi ise, metni italik yaparak vurgular. Bu etiket, metnin vurgulanması gerektiğini belirtir. Bu etiketler, metinlerin anlamını ve tonunu değiştirebilir. Bu yüzden vurgulama etiketleri SEO ve ekran okuyucular için de önemlidir.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<p><strong>HTML</strong> (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir.</p>
<p><em>HTML</em>, bir web tarayıcısı tarafından anlaşılabilen ve sayfaların yapısını belirleyen etiketlerden oluşur.</p>
</body>
</html>8. HTML belgesinde metinleri nasıl biçimlendiririz?
Kısa cevap: <style> etiketine CSS (Cascading Style Sheets) ekleyerek.
CSS, HTML belgesindeki metinleri ve diğer öğeleri biçimlendirmek için kullanılan bir işaretleme dilidir. (Evet, bu da programlama dili değil.) CSS ile metinlerin renk, yazı tipi, boyut, hizalama, aralık, kenarlık, arka plan gibi özelliklerini ve daha fazlasını değiştirebiliriz. CSS ile HTML elementlerimizi 3 şekilde stillendirebiliriz. Birincisi satır içi (inline) stillendirme, ikincisi dahili CSS ile (internal) ve üçüncüsü de harici (external) CSS ile stillendirme. Aslında bu CSS başlığı altında işlenmesi gereken ayrı bir konu. Onu da başka bir yazıda işlerim. Burada yalnızca inline(satır içi) CSS kullanımından bahsedeceğim.
<!DOCTYPE html>
<html>
<head>
<title>HTML Temelleri</title>
</head>
<body>
<h1 style="color: blue; font-family: Arial;">HTML Temelleri</h1>
<p style="color: green; font-size: 18px;">HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir.</p>
</body>
</html>Büyük projelerde genellikle inline stillendirme kullanılmaz çünkü projede yer alan kodlar fazlalaştıkça kontrol zorlaşabilir. Bu yüzden genellikle external CSS tercih edilir. Dediğim gibi bu, ayrı bir yazının konusu. Burada sadece temel olarak HTML elementlerini nasıl hızlıca stillendirebiliriz bunu gördük.
9. HTML belgesinde görsel nasıl ekleriz?
Kısa cevap: <img> etiketi ile.
Bu etiketi, HTML belgemize görsel eklemek için kullanırız. <img> etiketi, kendi kendine kapanan (self-closing) bir etikettir, yani kapanış etiketi yoktur. <img> etiketinin en önemli iki özelliği src ve alt’tır. src özelliği, resmin kaynağını (URL/dosya yolu) belirtir. alt özelliği ise, resmin alternatif metnini belirtir. Alternatif metin, resim yüklenemediğinde veya görüntülenemediğinde gösterilir. Ayrıca, ekran okuyucuları ve SEO için de faydalıdır.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<p>HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir.</p>
<!-- Resim eklemek için img etiketi -->
<img src="html-logo.png" alt="HTML logosu" />
</body>
</html>10. HTML belgesinde bağlantıları nasıl oluştururuz?
Kısa cevap: <a> etiketi ile.
Bu etiketi, HTML belgelerimizde bağlantı (link) oluşturmak için kullanırız. <a> etiketi, açılış ve kapanış etiketleri arasında bağlantı metnini içerir. <a> etiketinin en önemli özelliği href’tir. href özelliği, bağlantının gideceği hedefi (URL) belirtir. Bağlantılar, web sayfaları arasında gezinmeyi sağlar. Ayrıca, resimlere, e-posta adreslerine, dosyalara ve diğer kaynaklara da bağlantı verebiliriz.
<!DOCTYPE html>
<html>
<head>
<!-- Başlık etiketleri burada -->
<title>HTML Temelleri</title>
</head>
<body>
<!-- Gövde etiketleri burada -->
<h1>HTML Temelleri</h1>
<p>HTML (HyperText Markup Language), web sayfalarının oluşturulmasında kullanılan temel bir işaretleme dilidir.</p>
<img src="html-logo.png" alt="HTML logosu" />
<!-- Bağlantı oluşturmak için a etiketi -->
<a href="https://www.frontcuabi.com">Daha fazla bilgi için buraya tıklayın.</a>
</body>
</html>Bu yazıda, HTML’in temellerini öğrenmek için 10 soru ve cevap sundum. Umarım faydalı olmuştur. Diğer yazılarım için blog sayfasını ziyaret edebilirsiniz. HTML biliyorum, React’ten devam edeyim mi diyorsunuz? Buradan React-Vite kurulum rehberiyle güzel bir başlangıç yapabilirsiniz.
