Merhaba arkadaşlar bu yazıda, web sayfalarının temel taşı olan HTML belgesinin nasıl oluşturulduğunu adım adım öğreneceğiz.
Temel HTML Dokümanı
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="HTML Eğitim seti">
<meta name="author" content="Script Nova">
<link rel="stylesheet" type="text/css" href="dosyadı.css">
<script src="dosyaismi.js"></script>
<style></style>
<title>vermek istediğin başlık buraya yazılır.</title>
<link rel="shortcut icon" href="icondosyadı.ico">
</head>
<body>
</body>
</html>
<!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlamak zorundadır. Bu kod aslında sayfanın HTML5 formatına göre kodlandığını gösterir. Sayfanın en başında yer alır.
<html></html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır. Sayfanın başlangıcını ve sonunu belirtir.
<html lang="en">: Sayfanın dilini belirtir. Türkçe sayfalarda “tr” kullanılırken, İngilizce sayfalarda “en” kullanılır. <html> tagının bir özelliğidir.Yani, ayrı bir komut değildir.
<head></head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir. Bu etiketin içerisine meta datalar yazılır.Yani meta etiketler buraya yazılır. İçerik buraya yazılmaz.
<body></body>: Ziyaretçiye gösterilecek içeriği barındırır. Yapıyı <body> </body> etiketi içerisinde oluşturulur.
<meta charset="UTF-8">: HTML kodunun Türkçe karakter desteğini sağlar. Aynı zamanda birçok dili de barındırır. <head></head> tagı(etiketi) içine yazılmalıdır.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Responsive için kullanılır. Mobil cihazlarda görünüm için kullanılır. <head></head> tagı(etiketi) içine yazılır.
<meta name="keywords" content="HTML, CSS, JavaScript">: Arama motorlarına anahtar kelimeleri verir. Bu meta etiketinde arama motorlarına "HTML, CSS, JavaScript" anahtar kelimeleri verir. <head></head> tagı(etiketi) içine yazılır.
<meta name="description" content="HTML Eğitim Seti">: Google’da bir şeyler aradığımızda web sayfasının altında yer alan tanımlamaları yapmasını sağlar. <head></head> tagı(etiketi) içine yazılır. Bu kod satırında tanımlama şudur: HTML Eğitim Seti
<meta name="author" content="Script Nova">: Bu meta etiketi sayfanın yazarının ismini verir. <head></head> tagı(etiketi) içine yazılır. Bu kod satırında yazarın ismi “Script Nova”dır.
<link rel="stylesheet" type="text/css" href="dosyadı.css">: css dosyasını html dosyasına bağlar. <head></head> tagı(etiketi) içine yazılır. Css tanımlamak için <head></head> etiketin içerisine <style></style> etiketi açarak css tanımlanabilir.
<script src="dosyaismi.js"></script>: JavaScript dosyasını html dosyasına bağlar. <head></head> tagı(etiketi) içine yazılır.
<title>vermek istediğin başlık buraya yazılır.</title>: Bu etiket sitenin başlığıdır. <head></head> tagı(etiketi) içine yazılır.
<link rel="shortcut icon" href="icondosyadı.ico">: Bu kod satırı web sayfasına favicon ekler. <head></head> tagı(etiketi) içine yazılır.
Merhaba ve HTML'e hoş geldiniz! Bu yazıda, web geliştirme dünyasının temel taşı olan HTML (Hypertext Markup Language) hakkında temel bilgileri öğreneceksiniz. Web sitelerini oluşturmak için kullanılan bu güçlü işaretleme dilini öğrenmek, çevrimiçi varlığınızı oluşturmanın ilk adımıdır. İsterseniz hemen başlayalım!
HTML nedir?
“Hyper Text Markup Language” baş harflerinin birleşimi ile oluşmuştur. Türkçesi “Hiper Metin İşaretleme Dili” dir.
Geçmişten Günümüze
1991 - “HTML” çıktı.
1995 - “HTML 2.0” sürümü çıktı.
1997 - “HTML 3.2” sürümü çıktı.
1999 - “HTML 4.01” sürümü çıktı.
2000 - “XHTML” sürümü çıktı. Açılımı: “Extensible HyperText Markup Language” dır. Türkçesi: “Genişletilebilir Büyütülmüş Metin İşaretleme Dili” dir.
2014 - “HTML5” sürümü çıktı. Günümüzde HTML5 kullanılıyor.