Bu makalede, yapımda olan HTML hakkında konuşulacak konulara ve bir giriş cümlesine yer verilecektir.
HTML, web sayfalarının oluşturulmasında kullanılan bir işaret dilidir. Bu dil, bir web sayfasının yapısını ve içeriğini belirlemek için kullanılan çeşitli etiketlerden oluşur. HTML, web tarayıcıları tarafından anlaşılabilen bir formatta yazılmalıdır.
Yapım aşamasında HTML ile ilgili tartışılan konular arasında HTML temelleri, HTML etiketleri, metin etiketleri, başlık etiketleri, paragraf etiketleri, biçimlendirme etiketleri, HTML dosya yapısı, head bölümü, body bölümü ve doctype deklarasyonu gibi unsurlar yer almaktadır.
HTML temelleri, HTML’nin temel bileşenleri ve nasıl kullanılacaklarına dair bir giriş sağlar. Metin etiketleri, metin içeriğini belirlemek ve metni biçimlendirmek için kullanılırken, başlık etiketleri ve paragraf etiketleri metin düzenlemesinde önemli bir role sahiptir.
Biçimlendirme etiketleri, metni şekillendirmek ve biçimlendirmek için kullanılır ve HTML dosya yapısı, bir HTML dosyasının içeriği, yapısı ve uygun kuralları hakkında bilgi sağlar. Head bölümü, HTML dosyasının başlık bilgileri gibi önemli bilgileri içerirken, body bölümü, web sayfasının görünen içeriğini içerir. Doctype deklarasyonu ise HTML dosyasının en başında yer alır ve tarayıcılara hangi HTML sürümünün kullanıldığını belirtir.
HTML Temelleri
HTML’nin temellerini öğrenmek, web sayfaları oluşturmanın ilk adımıdır. HTML, Hyper Text Markup Language’ın kısaltmasıdır ve internet üzerindeki içeriği yapısallaştırmak için kullanılır. HTML, web tarayıcılara nasıl içeriğin görüntüleneceği hakkında talimatlar verir.
HTML’yi kullanarak bir web sayfası oluşturmak için, başlangıç etiketi ile başlamalı ve içerisindeve öğelerini içermelidir. öğesi, sayfanın başlık, stil ve betimleme bilgilerini içerirken, öğesi sayfa içeriğini içerir. Web sayfasının içeriği etiketleri arasında oluşturulur ve etiketlerle yapılandırılır.
HTML’nin temel bileşenlerini anlayarak, bir çerçeve oluşturmak ve içeriği biçimlendirmek için hangi etiketleri kullanmanız gerektiğini öğrenebilirsiniz. Bu temel bilgiler, daha karmaşık web sayfaları oluşturmanız için sağlam bir temel sağlar.
HTML Etiketleri
HTML Etiketleri
HTML, Hypertext Markup Language (Hipermetin İşaretleme Dili) kısaltmasıdır. Web sayfalarını oluşturmak için kullanılan standart bir dildir. HTML’nin temel yapısını oluşturan etiketler, web tarayıcılarına nasıl görüntüleneceğini ve nasıl işleneceğini belirtir.
HTML etiketleri, birçok farklı türe ve işlevselliğe sahiptir. İşte HTML etiketlerinden bazıları:
- <p> etiketi: Paragraf oluşturmak için kullanılır. Metinleri bölümlere ayırır ve düzenli bir şekilde görüntülenmesini sağlar.
- <h1> – <h6> etiketleri: Başlıkları belirtmek için kullanılır. <h1> en önemli başlığı temsil ederken, <h6> en az önemli başlığı temsil eder.
- <a> etiketi: Bağlantıları oluşturmak için kullanılır. Kullanıcıları başka bir web sayfasına veya belirli bir bölüme yönlendirebilir.
- <img> etiketi: Resimleri görüntülemek için kullanılır. Belirli bir kaynaktan resimleri sayfaya ekler.
HTML etiketleri sayesinde web sayfalarına çeşitli öğeler, bağlantılar, metinler, resimler ve daha fazlası eklenebilir. Her etiket, belirli bir işlevi yerine getirir ve belirli bir amaca hizmet eder. Bu etiketlerin doğru kullanımı, web sayfasının doğru şekilde oluşturulması ve tarayıcılar tarafından doğru şekilde yorumlanması için önemlidir.
|Etiket
|Açıklama
|<p>
|Paragraf etiketi
|<h1> – <h6>
|Başlık etiketleri
|<a>
|Bağlantı etiketi
|<img>
|Resim etiketi
Metin Etiketleri
Metin Etiketleri
HTML web sayfalarında metinleri biçimlendirmek ve düzenlemek için kullanılan etiketlerdir. Metin etiketleri, sayfadaki metni farklı boyutlarda, biçimlerde ve renklerde göstermek için kullanılabilir.
Başlık etiketleri, paragraf etiketleri, liste etiketleri ve kalın/kaynak etiketleri gibi çeşitli metin etiketleri bulunur. Bu etiketler, web sayfalarının okunabilirliğini artırır ve metinlerin iyi yapılandırıldığını ve anlaşılır olduğunu gösterir.
Başlık etiketleri, metnin önem seviyesine göre sıralandığı ve hiyerarşik bir yapı oluşturduğu başlıkları belirtmek için kullanılır. Örneğin, <h1> etiketi en büyük ve en önemli başlığı temsil ederken, <h6> etiketi en küçük ve en az önemli başlığı temsil eder.
Paragraf etiketleri, bir metin parçasını yeni bir paragraf ile başlatmak için kullanılır. Örneğin, <p> etiketi ile başlayan bir metin parçası, bir sonraki <p> etiketi ile başlayan metin parçasından ayrılır.
Metin etiketleri, web sayfalarında içeriklerin düzenlenmesini ve vurgulanmasını sağlar. Doğru şekilde kullanıldığında, metin etiketleri kullanıcıların içeriği kolayca okuyabilmesini ve sayfadaki önemli bilgilere daha hızlı erişebilmesini sağlar.
Başlık Etiketleri
HTML başlık etiketleri, web sayfalarında başlık olarak kullanılan metinleri belirtmek için kullanılır. Başlık etiketleri, sayfa içeriğinin yapısını ve önemli başlıkları vurgulamak için kullanılır. Bu etiketler, sayfanın iletisini anlamak için önemlidir ve aynı zamanda arama motorları tarafından da dikkate alınır.
Başlık etiketleri, arama motoru optimizasyonu için önemli bir etkiye sahiptir. Web sayfasının başlıkları, içeriğin anlatısını ve konunun önemini anlamada yardımcı olur. Örneğin, bir web sayfasında “Nasıl HTML Etiketleri Kullanılır” başlığı, kullanıcıların sayfanın ne hakkında olduğunu anlamasına yardımcı olur.
Başlık etiketleri, başlığın önem düzeyini belirten h1, h2, h3, h4, h5 ve h6 etiketlerinden oluşur. h1 etiketi, en önemli başlığı temsil ederken, h6 etiketi en az önemli başlığı temsil eder. Arama motorları, bu etiketleri kullanarak sayfadaki başlıklardan ne kadar önemli olduğunu anlar ve sıralama sonuçlarını etkileyebilir.
Başlık etiketleri, metin düzenlemesinde de önemli bir role sahiptir. Başlık etiketleriyle, metni daha görsel olarak ayırabilir ve dikkat çekici hale getirebiliriz. Ayrıca, başlık etiketleri sayesinde metinde ana fikirlerin belirginleştirilmesi ve metin akışının düzenli bir şekilde ilerlemesi sağlanabilir.
Paragraf Etiketleri
HTML paragraf etiketleri, metinleri belirli bir düzen ve yapı içinde görüntülemek için kullanılır. Bu etiketler sayesinde web sayfalarında metinler arasında boşluklar oluşturabilir ve metinleri paragraflara ayırabiliriz. Paragraf etiketleri, sayfanın okunabilirliğini arttırırken aynı zamanda metin düzenlemesinde de önemli bir rol oynar.
Paragraf etiketleri, <p> etiketi kullanılarak oluşturulur. Bu etiketin açılış tag’i <p> ve kapanış tag’i </p> şeklindedir. Metin veya içerik, bu etiketler arasına yazılır ve paragraf olarak şekillendirilir. Örneğin;
<p>Bu bir paragraf örneğidir.</p><p>Bu da bir başka paragraf örneğidir.</p>
Bu kod bloğunda, <p> etiketi kullanılarak iki ayrı paragraf oluşturulmuştur. Paragraf etiketleri, web sayfasının metin içeriğini düzenlemek ve okunabilirliğini artırmak için önemlidir. Paragraflar, metinlerin mantıklı bir şekilde bölünmesini ve düzenlenmesini sağlar.
Biçimlendirme Etiketleri
Bir HTML belgesi oluştururken metni biçimlendirmek önemlidir. HTML biçimlendirme etiketleri, metni şekillendirme ve vurgulama konusunda büyük bir rol oynar. Bu etiketler, metni kalın, italik, altı çizili veya üstü çizili olarak görüntülememizi sağlar.
Başlangıçta, metnimizi <strong> etiketi ile kalınlaştırabiliriz. Bu etiket ile birlikte, içerik daha dikkat çekici hale gelir ve önemli olan kısımlar daha belirgin hale gelir. Ayrıca, metni vurgulamak için <em> etiketini kullanabiliriz. Bu etiket, metni italik olarak görüntüler ve anlamı veya önemi vurgular.
Bununla birlikte, metin içerisinde altı çizili veya üstü çizili bir vurgu yapmak gerektiğinde <u> ve <s> etiketlerini kullanabiliriz. <u> etiketi, metni altı çizili olarak görüntülerken, <s> etiketi metni üstü çizili olarak görüntüler.
HTML biçimlendirme etiketleri ayrıca metin düzenini de değiştirebilir. Örneğin, metni başlık olarak vurgulamak için <h1>, <h2> veya <h3> gibi başlık etiketlerini kullanabiliriz. Ayrıca, metni paragraf olarak gruplamak için <p> etiketini kullanabiliriz.
Bu biçimlendirme etiketleri, metnimizi daha okunabilir ve görsel olarak çekici hale getirir. HTML tarafından sağlanan bu etiketler sayesinde metnimizi daha etkili bir şekilde şekillendirebilir ve vurgulayabiliriz.
HTML Dosya Yapısı
Bir HTML dosyası, web tarayıcısına nasıl görüntüleneceği konusunda talimatlar veren bir yapıya sahiptir. Bu yapı, belgenin içeriğini ve düzenini belirler. Doğru HTML dosya yapısı kullanmak, web sayfanızın doğru şekilde gösterilmesini sağlar ve tarayıcıların sayfayı anlamasına yardımcı olur.
Bir HTML dosyası genellikle aşağıdaki elemanlardan oluşur:
- Deklarasyonu: Bu, sayfanın HTML sürümünü bildiren ve tarayıcıya uygun bir şekilde işlemesi için gerekli bir bildirimdir.
- Etiketi: Bu, bir HTML belgesinin başlangıcını ve sonunu gösteren bir çift etikettir.
- ve Etiketleri: etiketi, bir HTML belgesinin başlık bilgilerini içerir, etiketi ise belgenin gövde içeriğini içerir.
- Başlık Etiketleri:
etiketi, tarayıcının sekme başlığına görüntülenecek metni sağlar.
Web sayfanızın yapısını doğru oluşturmak, sayfanın okunabilirliğini ve erişilebilirliğini artırır. Bu da kullanıcı deneyimini iyileştirir ve arama motorlarında daha iyi bir sıralama elde etmenize yardımcı olur. HTML dosya yapısını doğru bir şekilde kullanmak, web sitelerinin etkili ve profesyonel görünmesini sağlar.
Head Bölümü
Head bölümü, HTML dosyasının en üstünde yer alan bölümdür ve genellikle meta ve başlık bilgilerinin tanımlandığı alandır. Head bölümünde kullanılan etiketler, web tarayıcısına sayfa hakkında bilgi verir ve sayfanın düzenini belirlemek için kullanılır. HTML dosyasının head bölümünü daha iyi anlayabilmek için aşağıdaki tabloda sık kullanılan etiketlere ve amaçlarına bir göz atalım:
|Etiket
|Amaç


<title>
|Sayfa başlığını tanımlar. Tarayıcının sekme başlığında görünen metni belirler.


<meta charset="utf-8">
|HTML dosyasının karakter kodlamasını belirler. Türkçe karakterlerin düzgün görüntülenmesi için “utf-8” genellikle kullanılır.


<meta name="description" content="Açıklama metni">
|Sayfanın açıklamasını belirler. Arama motorları bu açıklamayı kullanarak sayfayı arama sonuçlarında gösterir.


<link rel="stylesheet" href="style.css">
|Sayfanın stil dosyasını bağlar. Bu sayede sayfaya dışarıdan stil uygulanabilir.
Yukarıda verilen etiketler sadece head bölümünde kullanılan yaygın etiketlerdir. Head bölümünde kullanılan etiketlerin amacı, sayfanın nasıl görüneceğini ve işlevini belirlemektir. İyi bir head bölümü, sayfanızın güzel ve düzenli görünmesini sağlayabilir ve arama motorları tarafından daha iyi anlaşılmasına yardımcı olabilir. Bu nedenle, HTML dosyalarınızı oluştururken, head bölümüne doğru etiketleri eklemeyi unutmayın.
Body Bölümü
Body Bölümü:
HTML dosyasının body bölümü, web sayfasının kullanıcıya görünen kısmıdır. Bu bölümde, çeşitli HTML etiketleri kullanılarak içerik oluşturulur.
HTML içerisindeki en temel etiketlerden biri
<p> etiketidir. Bu etiket, paragraf oluşturmak için kullanılır. Bir paragrafın başlangıcı ve sonunu belirtir. Örneğin:
<p>Merhaba, HTML'nin gücünü keşfetmeye hazır mısınız?</p> <p>Bu yeni teknoloji ile web sayfalarınızı etkileyici ve ilgi çekici hale getirebilirsiniz!</p>
Ayrıca, içerikte listeler oluşturmak için
<ul> ve
<li> etiketleri de kullanılabilir. Bu etiketler, sıralı veya sırasız listeler oluşturmak için kullanılır. Örneğin:
<ul> <li>HTML öğrenmek için kaynaklar</li> <li>CSS ile sayfa tasarımı yapmak</li> <li>JavaScript'in interaktif özelliklerini kullanmak</li> </ul>
Bunlar sadece body bölümünde kullanılan temel etiketlerdir. HTML ile daha gelişmiş ve karmaşık içerikler oluşturmak için daha birçok etiket bulunmaktadır. HTML etiketleriyle oynayarak web sayfalarınıza istediğiniz şekilde içerik ekleyebilirsiniz.
Doctype Deklarasyonu
Doctype deklarasyonu, bir HTML dosyasının en başında yer aldığı ve tarayıcıya hangi HTML versiyonunu kullanması gerektiğini belirttiği önemli bir etikettir. Peki, doctype deklarasyonunun önemi nedir ve nasıl kullanılır?
- Doctype deklarasyonu, tarayıcının HTML dosyasını doğru bir şekilde yorumlamasını sağlar. Her HTML versiyonunun farklı kuralları ve özellikleri vardır, bu nedenle dosyanın doğru bir şekilde işlenmesi için uygun doctype deklarasyonunun kullanılması önemlidir.
- Doctype deklarasyonu, tarayıcıya hangi HTML versiyonunu kullanması gerektiğini söyler. Örneğin, ifadesi, tarayıcının HTML5’i kullanması gerektiğini belirtir.
- Doctype deklarasyonunun uygun şekilde kullanılması, tarayıcı uyumluluğunu artırır. Eski tarayıcılar ve yeni nesil tarayıcılar, farklı HTML versiyonlarını destekleyebilir. Doctype deklarasyonu, tarayıcının doğru bir şekilde HTML dosyasını yorumlamasını sağlar ve herhangi bir uyumluluk sorununu ortadan kaldırır.
Doctype deklarasyonu, HTML dosyasının en başına şeklinde eklenir. Bu ifade, tarayıcıya HTML5 versiyonunu kullanması gerektiğini belirtir. Eğer farklı bir HTML versiyonu kullanmak istiyorsanız, uygun doctype deklarasyonunu kullanmalısınız. Doctype deklarasyonu genellikle HTML dosyasının ilk satırında yer alır ve tarayıcıdaki uyumluluk modunu belirler.
Bu nedenle, HTML dosyalarını yazarken doctype deklarasyonunu doğru ve uygun şekilde kullanmak önemlidir. Doctype deklarasyonu sayesinde tarayıcılar, HTML dosyalarını doğru bir şekilde yorumlayabilir ve web sayfalarının kullanıcılar tarafından doğru bir şekilde görüntülenmesini sağlar.