HTML'nin Temelleri
Bu makalede HTML'nin temel bilgilerini açıklıyoruz.
Bu, DOCTYPE bildirimi, <html>, <head> ve <body> etiketleri gibi ana etiketleri açıklar. Ayrıca etiketleri, nitelikleri ve özel karakterleri açıklar.
YouTube Video
HTML'nin Temelleri
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Dosyanın başında, HTML5 kurallarını takip ettiğini belirten bir HTML5 belgesi olduğunu ilan ederiz.
-
<html><html>etiketi, bir HTML belgesinde tüm içeriği saran en dıştaki elemandır. Her HTML dosyası yalnızca bir<html>etiketi içerir ve diğer tüm etiketler bu etiketin içinde yuvalanır. Açılış<html>etiketindekilang="en"bir özniteliktir ve tarayıcıya belgenin İngilizce yazıldığını bildirir. Bu, ekran okuyuculara ve arama motorlarına belgenin dilini bildirmeye yardımcı olur. -
<head><head>etiketi, sayfanın meta verilerini (bilgilerini) tanımlar. Bu, sayfa başlığını, karakter kodlamasını ve duyarlı tasarım ayarlarını içerir. Duyarlı tasarım, web sitelerinin veya uygulamaların çeşitli cihazlar ve ekran boyutlarına uyum sağlayarak iyi görüntülenmesi için tasarlanmış bir yöntemi ifade eder. Bu, kullanıcıların içerikleri akıllı telefonlar, tabletler ve masaüstü bilgisayarlar gibi farklı cihazlarda rahatça görüntülemelerini sağlar.<meta charset="UTF-8">, belgenin karakter kodlamasını UTF-8'e ayarlar.<meta name="viewport" content="width=device-width, initial-scale=1.0">, mobil cihazlar için görüntülemeyi optimize eden bir ayardır. Sayfa, cihazın ekran genişliğine göre ayarlanır.<title>etiketi, tarayıcı sekmesinde görüntülenen sayfa başlığını temsil eder. Bu örnekte, 'HTML Temelleri' başlığı ayarlanmıştır. -
<body><body>etiketi, kullanıcıya gösterilen içeriği barındırır. Bu etiketin içinde metin, resimler, bağlantılar vb. yazılır. -
<main><main>etiketi, sayfanın ana içeriğini temsil eder. Bu, başlıklar ve paragrafları içerir. -
<h1><h1>etiketi, sayfadaki en önemli başlığı temsil eder.<main>etiketi ve<h1>etiketinin bir belgede yalnızca bir kez kullanılması yaygındır. -
<p><p>etiketi bir paragrafı temsil eder. -
<!-- Comment -->Yorumları HTML'de bu formatta yazabilirsiniz. İstemci tarafı HTML herkes tarafından görüntülenebilir olduğundan, yorumlara şifreler veya API anahtarları gibi hassas bilgiler eklemeyin.
HTML birçok etikete sahiptir, ancak burada aşağıdaki noktalara dikkat edin. Bir HTML dosyası, bir DOCTYPE bildirimi ve bir <html> etiketinden oluşur. <html> etiketi bir <head> etiketi ve bir <body> etiketi içerir. HTML'de, tüm etiketler <html> etiketi içinde yer alır ve metnin yapısı ebeveyn, çocuk ve kardeş ilişkileri ile ifade edilir, ağaç yapısına benzer şekilde. HTML yazarken, belge yapısına da odaklanın.
Etiketler ve Özellikler
Bir sonraki adımda, HTML etiketleri ve niteliklerine göz atalım.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Etiketler köşeli parantezler (<, >) içinde yer alır ve genellikle bir açılış ve bir kapanış etiketinden oluşur. Ancak, <meta> etiketi ve <img> etiketi gibi içerik içermeyen tek etiketler de vardır. Tek etiketler kapanış etiketi gerektirmez.
Etiketler, etiketlere ek bilgi sağlayan özelliklere sahip olabilir. Özellikler, açılış etiketi içinde attributeName="değer" formatında yazılır.
Burada, <div> bir etiket olarak adlandırılır ve <div>Content</div> bir öğe olarak kabul edilir.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML'de yaygın olarak kullanılan özellikler arasında id, class ve style bulunur. id özelliği, bir elemana benzersiz bir tanımlayıcı vermek için kullanılır ve bir sayfada aynı id'ye sahip yalnızca bir öğe olabilir. Bu, belirli öğeleri JavaScript veya CSS ile manipüle etmek için yararlıdır. class özelliği, bir sınıf adı atayarak birden fazla öğeyi CSS veya JavaScript ile gruplamanıza olanak tanır. Aynı sınıfı birden fazla öğeye atayarak stil paylaşımına izin verebilirsiniz. style özelliği, bir öğe için satır içi CSS stillerini belirtir. Normalde, stiller bir dış stil sayfasında veya <style> etiketi içinde tanımlanır, ancak bu özellik, belirli öğeler için stilleri doğrudan belirtmek istediğinizde kullanılır.
HTML'de özel karakterler
Gelecek adımda, HTML'deki özel karakterlere bakalım.
HTML'de belirli sembolleri ve karakterleri görüntülemek için kullanılan özel karakterler vardır. Bu özel karakterlere varlıklar denir. Özel karakterler & (amper) ile başlar, ardından bir ad veya sayı gelir ve ; (noktalı virgül) ile biter.
HTML'deki temsilci özel karakterler
İşte bazı yaygın özel karakterler.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
HTML'de özel karakterlerin kullanım örnekleri
Özellikle, HTML'de köşeli parantezler (<, >) ve çift tırnak işaretleri doğru şekilde kullanılmalıdır.
HTML'de açı ayraçları (<, >) ve çift tırnak işaretleri aşağıda gösterildiği gibi özel karakterler olarak temsil edilmelidir.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML Sürümleri
Burada HTML sürümlerine bir göz atalım.
HTML sürümleri, web sayfalarının yapısını ve işlevselliğini tanımlamak için gelişmiştir. İşte ana sürümler:.
-
HTML 1.0 (1993)
İlk HTML sürümü yalnızca çok temel biçimlendirme özelliklerine sahipti. Bağlantılar, başlıklar, paragraflar ve listeler gibi öğeleri tanımlıyordu.
-
HTML 2.0 (1995)
Daha fazla öğe eklenmiş, formlar ve tablolar için destek içeren ilk standartlaşmış sürüm.
-
HTML 3.2 (1997)
Daha fazla düzenleme özelliği eklenmiş, stil öğelerini ve betikleri gömme imkanı sağlanmıştır. Ayrıca,
<table>elemanını kullanarak yapılan düzenlemeler yaygınlaştı. -
HTML 4.01 (1999)
Yapı ve sunumun ayrılması ilerlemiş ve CSS tanıtılmıştır. Standartlara uygun siteler oluşturulması önerildi. Ayrıca, belgelerin uluslararasılaşması ve erişilebilirliği iyileştirildi.
-
HTML5 (2014)
Video ve ses, tuval, yerel depolama, konum belirleme ve diğer yeni API'ler için destek getiren en son büyük sürüm. Mobil uyumludur, daha etkileşimli web uygulamaları geliştirilmesine olanak tanır.
HTML5.2, 2017 yılında önerilen bir HTML sürümüdür ve HTML5'in geliştirilmiş bir versiyonudur. HTML5.2'den beri, statik bir sürüm numarası yerine HTML Living Standard olarak sürekli güncellenir.
HTML, bu sürümler aracılığıyla daha esnek ve güçlü bir web teknolojisi olarak gelişmiştir.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.