HTML Dokümanlarının Özellikleri
İçindekiler
HTML (Hypertext Markup Language), web sayfalarının yapısını oluşturan metin tabanlı bir dildir. HTML dosyaları, tarayıcılar tarafından yorumlanarak web sayfalarının görüntülenme şeklini belirler. HTML dosyaları, .html veya .htm uzantısı ile kaydedilir.
HTML dokümanları, belirli bir başlık, bir başlık etiketi ve sayfaya ait metin, resim, form ve diğer içerikleri içerebilir. Bir HTML dokümanı, bir başlık etiketi (), başlık etiketi içinde görünen bir başlık, içerik paragrafları (
) ve diğer HTML etiketlerinden oluşan bir yapıya sahiptir. Bu yapı, web sayfasının doğru şekilde görüntülenmesini sağlar.
| HTML Dokümanlarının Özellikleri | Açıklama |
|---|---|
| Başlık Etiketi | HTML dokümanının başlığını belirler ve tarayıcı penceresinin üst kısmında görüntülenir. |
| İçerik Paragrafları | HTML dokümanının ana içeriğini oluşturan metinlerdir. Sayfanın okunabilirliğini artırır ve bilgileri düzenli bir şekilde sunar. |
| Diğer HTML Etiketleri | HTML dokümanında resimler, bağlantılar, form elemanları ve diğer içeriklerin eklenmesini sağlar. |
HTML Dosyasının Oluşturulması
HTML veya Hyper Text Markup Language, web sayfalarının oluşturulması için kullanılan bir dildir. HTML dosyası, web tarayıcılarının anlayabileceği bir formatta yazılmalıdır. Bir HTML dosyası oluşturmak için bir metin düzenleyici veya HTML editörü kullanabilirsiniz.
HTML dosyası oluştururken dikkate almanız gereken bazı noktalar vardır. Öncelikle, dosyanızın bir başlık etiketi olan <title> içermesi önemlidir. Başlık etiketi, tarayıcı sekmesinde görünen metni belirler. Ayrıca, dosyanızın bir <head> ve <body> bölümü olmalıdır. <head> bölümü, tarayıcıya sayfanız hakkında bilgi verirken, <body> bölümü, sayfanın görünen içeriğini barındırır.
HTML dosyanızın bir başka önemli özelliği de doğru etiket kullanımıdır. HTML, çeşitli etiketleri kullanarak farklı türde içerikler eklemenize olanak tanır. Örneğin, <p> etiketi bir paragraf oluşturmak için kullanılırken, <img> etiketi bir resim eklemek için kullanılır. Ayrıca, listeler oluşturmak için <ul> ve <ol> etiketleri kullanılabilir.
| Etiket | Açıklama |
|---|---|
| <p> | Paragraf oluşturur. |
| <img> | Resim ekler. |
| <ul> | Sırasız liste oluşturur. |
| <ol> | Sıralı liste oluşturur. |
HTML Etiketleri ve Kullanımları
HTML Etiketleri ve Kullanımları, web sayfaları oluştururken en temel ve önemli konuların başında gelir. HTML (HyperText Markup Language), web tarayıcılarının anlayabileceği bir dil olarak kullanılır ve sayfaların yapısını belirlemek için etiketlerin kullanımına dayanır.
HTML etiketleri, web sayfalarını şekillendirme ve içeriği organize etme amacıyla kullanılır. Bu etiketler, açılış ve kapanış etiketi olmak üzere iki bölümden oluşur. Açılış etiketi, bir öğeyi belirtmek için kullanılırken, kapanış etiketi ise öğenin sonunu işaretler. Aralarında bulunan içerik, tarayıcı tarafından o öğe olarak yorumlanır.
Bir HTML etiketi, genellikle açılış etiketi ve kapanış etiketi arasında bir içerik bölümü ile birlikte kullanılır. Örneğin, “<p> Bu, bir paragraftır </p>” şeklinde bir paragraf oluşturulur. Aşağıda en sık kullanılan HTML etiketlerine ve kullanımlarına bir göz atalım:
- <h1> – Sayfa başlığını belirtmek için kullanılır.
- <a> – Bir bağlantı oluşturmak için kullanılır.
- <img> – Bir resim eklemek için kullanılır.
- <ul> – Sırasız bir liste oluşturmak için kullanılır.
- <table> – Bir tablo oluşturmak için kullanılır.
- <form> – Bir form alanı oluşturmak için kullanılır.
| Etiket | Kullanım |
|---|---|
| <h1> | Sayfanın ana başlığını belirtmek için kullanılır. |
| <a> | Bir bağlantı oluşturmak için kullanılır. Href özelliği ile hedef URL belirtilir. |
| <img> | Sayfaya bir resim eklemek için kullanılır. Src özelliği ile resmin dosya yolu belirtilir. |
| <ul> | Sırasız bir liste oluşturmak için kullanılır. İçine
|
| <table> | Bir tablo oluşturmak için kullanılır. İçine |
| etiketleri ile satır ve sütunlar eklenir. | |
| <form> | Bir form alanı oluşturmak için kullanılır. İçine etiketi ile çeşitli giriş alanları eklenir. |
HTML Meta Etiketleri ve Önemi
HTML meta etiketleri, web siteleri için önemli bir role sahiptir. Meta etiketleri, web tarayıcılarına ve arama motorlarına site hakkındaki önemli bilgileri sağlar. Bu etiketler, sitenin açıklamasını, anahtar kelimelerini ve diğer önemli meta bilgilerini içerir. İyi bir şekilde kullanıldığında, meta etiketleri web sitelerinin sıralamasını artırabilir ve arama sonuçlarında daha iyi görünmelerini sağlayabilir.
Bir web sayfasında meta etiketleri kullanmanın birçok avantajı vardır. İlk olarak, meta etiketleri arama motorlarının sayfayı tam olarak anlamasına yardımcı olur. Meta etiketleri, sayfadaki anahtar kelimeleri ve içeriği vurgulayarak, arama motorlarının sayfayı doğru şekilde indekslemesini sağlar. Bu, kullanıcıların arama sonuçlarında doğru sayfayı bulmasını kolaylaştırır.
İkinci olarak, meta etiketleri web tarayıcılarına sayfa hakkında bilgi verir. Web tarayıcıları, meta etiketlerini kullanarak sayfanın nasıl görüntüleneceği hakkında önemli bilgileri alır. Örneğin, meta etiketleri sayfanın karakter setini, dilini ve diğer görüntüleme ayarlarını belirleyebilir. Bu, kullanıcıların sayfayı doğru bir şekilde görüntülemesini sağlar.
- Meta Açıklama Etiketi: Meta açıklama etiketi, bir web sayfasının kısa açıklamasını içerir. Bu açıklama, arama motorlarının sayfayı tanımalı ve kullanıcıların sayfa hakkında daha fazla bilgi edinmesini sağlamalıdır.
- Meta Anahtar Kelime Etiketi: Meta anahtar kelime etiketi, bir web sayfasının anahtar kelimelerini içerir. Bu etiket, arama motorlarına sayfanın içeriği hakkında daha fazla bilgi sağlar ve kullanıcıların doğru sayfayı bulmasını kolaylaştırır.
- Meta Robotlar Etiketi: Meta robotlar etiketi, arama motorlarına sayfanın nasıl indeksleneceği hakkında bilgi verir. Bu etiket, sayfanın indekslenmesi veya indekslenmemesi, bağlantıların takip edilmesi veya takip edilmemesi gibi önemli bilgileri içerebilir.
| Etiket Adı | Açıklama |
|---|---|
| Meta Açıklama Etiketi | Bir web sayfasının kısa açıklamasını içerir. |
| Meta Anahtar Kelime Etiketi | Bir web sayfasının anahtar kelimelerini içerir. |
| Meta Robotlar Etiketi | Arama motorlarına sayfanın nasıl indeksleneceği hakkında bilgi verir. |
Sayfa Başlığı Belirleme ve Başlık Etiketi
HTML dokümanlarında sayfa başlığını belirlemek ve başlık etiketini kullanmak oldukça önemlidir. Sayfa başlığı, web sayfasının odağını ve içeriğini temsil eder. Aynı zamanda SEO (Arama Motoru Optimizasyonu) açısından da büyük bir öneme sahiptir. HTML dosyasının içinde yer alan <title> etiketi sayesinde sayfa başlığı oluşturulur. Bu etiket, web tarayıcısının sekme alanında ve arama motoru sonuçlarında görünen metni belirler.
Bir HTML dosyası oluşturulurken, <head> etiketi içerisinde yer alan <title> etiketi kullanılır. Örneğin:
<!DOCTYPE html>
<html>
<head>
<title>Web Sitesi Başlığı</title>
</head>
<body>
</body>
</html>
Bu örnekte <title> etiketi içine “Web Sitesi Başlığı” yazılmıştır. Web tarayıcısı, bu başlığı sekme alanında gösterecektir. Aynı zamanda arama motorları da bu başlığı, web sayfasının içeriğini anlamak ve indekslemek için kullanır. Bu nedenle, doğru ve açıklayıcı bir başlık etiketi seçmek önemlidir.
HTML Dokümanında Resim Eklemek
HTML dokümanında resim eklemek, web sayfalarını daha görsel hale getirmek için önemli bir özelliktir. Resimler, kullanıcı deneyimini artırır ve içeriği daha çekici hale getirir. HTML’de resim eklemek için img etiketi kullanılır. Bu etiketin kullanımı oldukça kolaydır ve resim dosyasının yolunu belirtmek yeterlidir.
Öncelikle, resim dosyasının bulunduğu dizine gidilmeli ve resmin adı ve uzantısı belirlenmelidir. Ardından, img etiketi kullanılarak resim eklenir. Örneğin, aşağıdaki kodu kullanarak bir resim ekleyebiliriz:
<img src=”resim.jpg” alt=”Örnek Resim” />
Bu kodda, src özelliği resmin dosya yolunu belirtirken, alt özelliği ise resmin alternatif metnini (alternative text) temsil eder. Alternatif metin, resmin yüklenemediği durumlarda görüntülenir ve görsel engelli kullanıcılar için önemlidir.
Bunun yanı sıra, resim için genişlik ve yükseklik gibi özellikler de belirtilebilir. Örneğin:
| Özellik | Açıklama |
|---|---|
| width | Resmin genişliğini belirtir |
| height | Resmin yüksekliğini belirtir |
Örneğin, aşağıdaki kodda resmin genişliği ve yüksekliği belirtilmiştir:
<img src=”resim.jpg” alt=”Örnek Resim” width=”500″ height=”300″ />
Resim eklemek, web sayfalarının görsel tasarımını zenginleştiren önemli bir HTML özelliğidir. Doğru kullanıldığında, resimler kullanıcıları etkileyebilir ve içeriğe görsel bir destek sağlayabilir.
HTML Form Etiketleri ve İçerikleri
HTML Form Etiketleri ve İçerikleri, web sayfalarında kullanıcıların bilgi gönderebileceği ve veri alabileceği bir araçtır. Form etiketleri, kullanıcıdan veri almak için çok çeşitli giriş alanları sağlar ve bu veriyi sunucuya iletmek için kullanılır. HTML form etiketleri kullanılarak farklı türlerde formlar oluşturulabilir, kullanıcılardan metin, sayı, tarih, seçenekler ve çok daha fazlasını isteyebilirsiniz.
HTML form etiketleri, <form> etiketi ile başlar ve </form> etiketi ile sona erer. Bu etiketler arasına çeşitli form elemanlarını ekleyebilirsiniz. Örneğin, <input> etiketi, metin girişi, parola girişi, tarih seçimi, dosya yükleme gibi farklı giriş alanları oluşturmanıza olanak sağlar.
Form etiketlerinin bazı yaygın kullanılan özellikleri vardır. Örneğin, action özelliği formun verilerini göndereceği sunucu tarafını belirler. method özelliği ise form verilerinin sunucuya nasıl gönderileceğini belirler. Post ve get yöntemleri kullanılabilir. Ayrıca, form elemanlarını gruplamak ve etkileşimli alanlar oluşturmak için <fieldset> ve <legend> etiketlerinden de yararlanabilirsiniz.
- HTML form etiketlerinin kullanımı
- Form elemanları ve özellikleri
- Form verilerini sunucuya iletmek
- Form elemanlarını gruplama
- Daha fazla form özelliği
| Etiket | Açıklama |
|---|---|
| <form> | Bir formu belirtmek için kullanılır |
| <input> | Farklı türlerde giriş alanları oluşturmak için kullanılır |
| <select> | Bir açılır kutu (drop-down listesi) oluşturmak için kullanılır |
| <textarea> | Çok satırlı metin girişi için kullanılır |
| <button> | Bir tıklanabilir düğme oluşturmak için kullanılır |
Sık Sorulan Sorular
HTML Dokümanlarının Özellikleri
HTML dokümanları, web içeriğini oluşturmak için kullanılan standart metin belgeleridir. İnternet tarayıcısı tarafından okunarak web sayfalarının oluşturulmasını sağlar.
HTML Dosyasının Oluşturulması
HTML dosyası oluşturmak için bir metin düzenleyici kullanabilirsiniz. Yeni bir dosya oluşturup .html uzantısıyla kaydederek HTML kodlarını bu dosyaya ekleyebilirsiniz.
HTML Etiketleri ve Kullanımları
HTML etiketleri, web sayfalarının yapısını belirlemek ve içeriğini biçimlendirmek için kullanılır. Başlangıç ve bitiş etiketleri olarak kullanılırlar.
HTML Meta Etiketleri ve Önemi
HTML meta etiketleri, web sayfalarının tarayıcılara ve arama motorlarına bilgi sağlamak için kullanılır. Sayfa açıklaması, anahtar kelimeler, karakter seti gibi bilgileri içerebilirler.
Sayfa Başlığı Belirleme ve Başlık Etiketi
Sayfa başlığı, web sayfasının tarayıcı sekmesinde ve arama sonuçlarında görünen metindir. <title> etiketi kullanılarak belirlenir.
HTML Dokümanında Resim Eklemek
HTML dokümanına resim eklemek için <img> etiketi kullanılır ve src özelliği ile resim dosyasının URL’si belirtilir. Ayrıca alternatif metin ve boyut özellikleri de kullanılabilir.
HTML Form Etiketleri ve İçerikleri
HTML form etiketleri, kullanıcıdan bilgi girişi almak için kullanılır. <form> etiketi ile başlayıp </form> etiketi ile kapanır. İçerisinde <input> etiketleri kullanılarak farklı türde giriş alanları oluşturulabilir.
HTML Dokümanının Doctype’ı Nedir?
HTML dokümanının doctype’ı, tarayıcılara bu dokümanın hangi HTML sürümüne uyumlu olduğunu belirtir. Doctype tanımlaması, HTML dokümanının en üstündeki satıra eklenir.