Merhabalar bugün sizlere günümüzde web tasarım sayfalarında kullanılan html5 yapısını ve bazı temel etiketlerini anlatacağız.
Ben bu konuyu biraz bilimsel yazıdan çok sanki böyle bir kahramanın hikayesini anlatır gibi anlatmak istiyorum.
Bu sayede belki bazılarımıza sıkıcı gelen o durumdan kurtulabilir ve faydalı olabiliriz.
Hadi hep beraber hikayemize geçiş yapalım.
HTML5: Bir Web Macerasına Hoş Geldiniz!
Efenim html5 web sayfaları oluşturmak için kullanılan HTML (Hypertext Markup Language) yani Hiper metin işaretleme dilinin beşinci ve bugün kullanılan en son sürümüdür. Bugün kullanılan diyorum çünkü bu hikayede daha çok sürümler ortaya çıkacağı aşikar. Biz şimdilik son kahramanımızın hikayesine ve etiketlerine (süper güçlerine) odaklanalım.
Her hikayenin bir başlangıcı vardır. HTML belgemizin başlangıcı ise <html> etiketiyle başlar. Bu etiket, tarayıcıya "Hey, ben bir HTML belgesiyim!" der. Belgenin başı ve sonu bu etiketle belirlenir
Her kahramanın bir akıl hocası vardır, değil mi? HTML belgemizin akıl hocası da <head> etiketidir. Bu etiketin içinde meta veriler, başlıklar ve bağlantılar bulunur.
Her hikayede bir giriş sahnesi vardır. HTML belgemizde bu sahneyi <header> etiketi oluşturur ve <head> etiketiyle karıştırılmamalıdır buna dikkat edelim gerçi bazen bende bir kitap okurken kahramanları karıştırabiliyorum ama olsun siz bu hataya düşmeyin. Etiketin kısaca tanımına gelecek olursak eğer başlıklar, logolar ve navigasyon menüleri bu etikette yer alır.
Ve işte asıl sahneye geliyoruz! <body> etiketi, belgenin asıl içeriğini barındırır. Tüm aksiyon burada gerçekleşir. Yazılar, resimler, bağlantılar ve daha fazlası bu etiketin içinde yer alır. Kısacası bu hikayenin mihenk taşı bölümüdür diyebiliriz.
Kahramanımızın macerası bölümlerden oluşur. <section> etiketi, belgemizi anlamlı bölümlere ayırır. Her bölümde farklı bir hikaye anlatılır. Bunu dostlarından yardım isteyen ve onları bir araya getirmek için oradan oraya sürüklenen reddilen örselenen çilekeş bir Marvel kahramanını anlatan bölüm gibi düşünebilirsiniz.
Her hikaye bir sonla biter artık mutlu sonlamı yoksa mutsuz dramatik bir sonlamı bitireceksiniz size kalmış. Fakat biz burada html5 hikayesini anlattığımız için mutlu bir son tanımını kullanıyoruz ve belgemizin sonu ise <footer> etiketiyle bitiyor. Bu etiket, yazar bilgileri, telif hakları ve iletişim bilgileri gibi içerikleri barındırır yani yazan yöneten ve senaryo sahiplerini.
Ve işte, HTML5’in büyülü dünyasında kısa bir yolculuk yaptık! HTML5 etiketleri, web sayfalarımızı yapılandırmamız ve anlamlı hale getirmemiz için muhteşem araçlar sunar. Bu temelleri öğrenerek, kendi dijital maceranıza adım atabilirsiniz. Fakat HTML5 sadece temel etiketlerden ibaret değildir. Mesela bazı yararlı etiketler de var bunları da dijital maceranızda yerine göre kullanabilirsiniz.
Okuyan gözlerinize sağlık diliyorum.
Sağlıcakla.
Ben bu konuyu biraz bilimsel yazıdan çok sanki böyle bir kahramanın hikayesini anlatır gibi anlatmak istiyorum.
Bu sayede belki bazılarımıza sıkıcı gelen o durumdan kurtulabilir ve faydalı olabiliriz.
Hadi hep beraber hikayemize geçiş yapalım.
HTML5: Bir Web Macerasına Hoş Geldiniz!
Efenim html5 web sayfaları oluşturmak için kullanılan HTML (Hypertext Markup Language) yani Hiper metin işaretleme dilinin beşinci ve bugün kullanılan en son sürümüdür. Bugün kullanılan diyorum çünkü bu hikayede daha çok sürümler ortaya çıkacağı aşikar. Biz şimdilik son kahramanımızın hikayesine ve etiketlerine (süper güçlerine) odaklanalım.
1 - <html> Etiketi: Büyük Başlangıç
Her hikayenin bir başlangıcı vardır. HTML belgemizin başlangıcı ise <html> etiketiyle başlar. Bu etiket, tarayıcıya "Hey, ben bir HTML belgesiyim!" der. Belgenin başı ve sonu bu etiketle belirlenir
Kod:
<!DOCTYPE html>
<html>
<!-- Diğer etiketler burada -->
</html>2 - <head> Etiketi: Bilgeliğin Merkezi
Her kahramanın bir akıl hocası vardır, değil mi? HTML belgemizin akıl hocası da <head> etiketidir. Bu etiketin içinde meta veriler, başlıklar ve bağlantılar bulunur.
Kod:
<head>
<title>HTML5 Macerası</title>
<meta charset="UTF-8">
</head>
3 - <header> Etiketi: Kahramanın Giriş Sahnesi
Her hikayede bir giriş sahnesi vardır. HTML belgemizde bu sahneyi <header> etiketi oluşturur ve <head> etiketiyle karıştırılmamalıdır buna dikkat edelim gerçi bazen bende bir kitap okurken kahramanları karıştırabiliyorum ama olsun siz bu hataya düşmeyin. Etiketin kısaca tanımına gelecek olursak eğer başlıklar, logolar ve navigasyon menüleri bu etikette yer alır.
Kod:
<header>
<h1>HTML5 Macerası</h1>
<nav>
<ul>
<li><a href="#bolum1">Bölüm 1</a></li>
<li><a href="#bolum2">Bölüm 2</a></li>
</ul>
</nav>
</header>4 - <body> Etiketi: Aksiyon Başlıyor!
Ve işte asıl sahneye geliyoruz! <body> etiketi, belgenin asıl içeriğini barındırır. Tüm aksiyon burada gerçekleşir. Yazılar, resimler, bağlantılar ve daha fazlası bu etiketin içinde yer alır. Kısacası bu hikayenin mihenk taşı bölümüdür diyebiliriz.
Kod:
<body>
<!-- Muhteşem içerikler yazılar ve hikayeler burada yer almaktadır -->
</body>5 - <section> Etiketi: Bölümler Arası Yolculuk
Kahramanımızın macerası bölümlerden oluşur. <section> etiketi, belgemizi anlamlı bölümlere ayırır. Her bölümde farklı bir hikaye anlatılır. Bunu dostlarından yardım isteyen ve onları bir araya getirmek için oradan oraya sürüklenen reddilen örselenen çilekeş bir Marvel kahramanını anlatan bölüm gibi düşünebilirsiniz.
Kod:
<section id="bolum1">
<h2>Birinci Bölüm</h2>
<p>HTML5’in temellerini öğreniyoruz. Uzay istasyonumuzu genişletiyoruz.</p>
</section>
<section id="bolum2">
<h2>İkinci Bölüm</h2>
<p>Daha ileri seviye konulara dalıyoruz. Uzaylıları uzaklaştırıyoruz vs</p>
</section>6 - <footer> Etiketi: Mutlu Son ( Ya da size kalmış )
Her hikaye bir sonla biter artık mutlu sonlamı yoksa mutsuz dramatik bir sonlamı bitireceksiniz size kalmış. Fakat biz burada html5 hikayesini anlattığımız için mutlu bir son tanımını kullanıyoruz ve belgemizin sonu ise <footer> etiketiyle bitiyor. Bu etiket, yazar bilgileri, telif hakları ve iletişim bilgileri gibi içerikleri barındırır yani yazan yöneten ve senaryo sahiplerini.
Kod:
<footer>
<p>© 2024 THS Lojistik Tim HTML5 Macerası. Tüm hakları saklıdır.</p>
</footer>Ve işte, HTML5’in büyülü dünyasında kısa bir yolculuk yaptık! HTML5 etiketleri, web sayfalarımızı yapılandırmamız ve anlamlı hale getirmemiz için muhteşem araçlar sunar. Bu temelleri öğrenerek, kendi dijital maceranıza adım atabilirsiniz. Fakat HTML5 sadece temel etiketlerden ibaret değildir. Mesela bazı yararlı etiketler de var bunları da dijital maceranızda yerine göre kullanabilirsiniz.
- <article>: Kendi başına anlamlı bir içeriği ifade eder.
- <aside>: Ana içeriğin yanında yer alan, ilgili ek bilgiler içerir.
- <figure> ve <figcaption>: Görseller ve açıklamalar için kullanılır.
Okuyan gözlerinize sağlık diliyorum.
Sağlıcakla.
Lojistik Tim Sundu
