“Basit HTML” konulu bu makalede, HTML’nin temel yapı taşları ve kullanım alanları ele alınacak. HTML, Hypertext Markup Language’ın kısaltmasıdır ve web sayfalarının yapılandırılmasını sağlayan bir dildir. Bu makalede, HTML etiketlerinin çeşitleri ve kullanımı açıklanacak. Aynı zamanda, başlık etiketleri, paragraf etiketi, görsel etiketleri ve link etiketleri gibi HTML’nin önemli bileşenleri de ayrıntılı bir şekilde ele alınacak.HTML, web sayfalarını oluşturmak için kullanılan temel yapı taşlarına sahiptir. Bu yapı taşlarının doğru bir şekilde kullanılması, sayfanın düzgün görüntülenmesini sağlar ve arama motorları tarafından daha iyi anlaşılır. HTML etiketleri, sayfanın belirli bölümlerini tanımlamak için kullanılır ve her bir etiketin farklı bir işlevi vardır.Görsel etiketleri, sayfalarda resim, video veya diğer medya içeriklerini göstermek için kullanılır. etiketi, resimleri sayfaya eklemek için kullanılırken,
HTML Temelleri
HTML, HyperText Markup Language’in kısaltmasıdır. Web sayfalarının yapılandırılması ve görselleştirilmesi için kullanılan bir programlama dili olarak bilinir. HTML, web tarayıcılarına içeriği nasıl sunacaklarını bildiren bir çerçeve sağlar. Web sayfalarının hiyerarşik yapısı ve bileşenlerini tanımlamak için kullanılır.
HTML’nin temel yapı taşları, etiketlerdir. Her etiket, açılış ve kapanış etiketi olmak üzere iki parçadan oluşur ve içeriği belirtmek için kullanılır. Açılış etiketi, <etiket> şeklinde yazılırken, kapanış etiketi </etiket> şeklinde yazılır. İçerik, açılış ve kapanış etiketleri arasına yerleştirilir.
HTML’nin önemi, web sayfalarının doğru şekilde işlenmesi ve görsellenmesi açısından büyük öneme sahiptir. Doğru HTML kullanımıyla birlikte, web sayfaları daha erişilebilir, taranabilir ve kullanıcı dostu hale getirilebilir.
HTML Etiketleri
HTML etiketleri, web sayfalarını oluşturmak için vazgeçilmez bir araçtır. HTML, Hypertext Markup Language’ın kısaltmasıdır ve aynı zamanda web sayfalarının yapısal düzenini oluşturur. HTML etiketleri, farklı amaçlar için farklı çeşitlere sahiptir ve web sayfalarını biçimlendirmek, içerikleri düzenlemek ve özellikler eklemek için kullanılır.
Metin etiketleri, HTML etiketlerinin en yaygın kullanılan çeşitleridir. Başlık etiketleri (h1, h2, h3 gibi), başlık olarak vurgulamak istediğimiz metinleri belirtmek için kullanılır. Paragraf etiketi (p), metinleri paragraf biçiminde düzenlemek için kullanılır ve web sayfalarının okunabilirliğini artırır. Ayrıca, liste etiketleri (ul, ol, li), liste şeklindeki içerikleri göstermek için kullanılır ve sıralı ve sırasız listeler oluşturulabilir.
Görsel etiketleri, HTML ile resim ve video gibi görsel medya içeriklerini eklemek için kullanılır. Resim etiketi (img), web sayfasına resim eklemek için kullanılır ve resim adresini belirtir. Video etiketi (video), video oynatıcısı sağlar ve video içeriğini web sayfasına yerleştirir.
HTML etiketleri, web sayfalarının düzenini ve görüntüsünü biçimlendirmek için güçlü bir araçtır. Doğru bir şekilde kullanıldığında, web sayfalarını daha okunaklı hale getirebilir ve içerikleri zenginleştirebilirler. HTML etiketlerini kullanarak web sayfanızın kullanıcı deneyimini geliştirebilir ve arama motorlarında daha iyi sıralama elde edebilirsiniz.
Metin Etiketleri
Başlık, paragraf, liste gibi metin etiketleri, HTML’de metin içeriğini düzenlemek ve yapılandırmak için kullanılır. Bu etiketler, sayfanın okunabilirliğini artırmak, vurgulamak veya listelemek gibi çeşitli amaçlarla kullanılabilir.
Başlık etiketleri, sayfanın başlıklarını belirlemek için kullanılır ve arama motorlarının sayfayı indekslerken içeriği anlamasına yardımcı olur. Örneğin, h1 etiketi genellikle sayfanın en önemli başlığını belirtirken, h2 etiketi biraz daha alt düzeydeki başlıkları gösterir.
Paragraf etiketi olan p, metin bloklarını bir arada tutmak ve düzenlemek için kullanılır. Metin içindeki bir paragrafı belirtmek için bu etiket kullanılır ve metin içeriği otomatik olarak bir paragraf biçimine dönüştürülür.
Liste etiketleri, metinleri bir liste olarak görüntülemek için kullanılır. Olur, olmaz listeler (ul) ve numaralı listeler (ol), farklı tipteki listeleri oluşturmak için kullanılabilir. Öğeler li etiketiyle belirtilir ve sıralama veya düzenleme gibi özellikler kullanılabilir.
Bu metin etiketlerini kullanarak, HTML sayfanızın içeriğini yapılandırabilir ve metinleri düzenleyebilirsiniz. Metinleri başlıklara bölmek, paragrafları vurgulamak veya listeler oluşturmak sayfanızı daha okunabilir ve anlaşılır hale getirecektir.
Başlık Etiketleri
Başlık etiketleri, HTML dokümanlarında başlıkların yapısını oluşturan önemli bir bileşendir. Başlık etiketleri, sayfanın hiyerarşik yapısını belirlemek için kullanılır ve içerikteki başlıkları farklı düzeylerde tanımlar. HTML’de en yaygın kullanılan başlık etiketleri h1, h2 ve h3’dür.
h1 etiketi, en üst seviyedeki bir başlığı temsil eder ve genellikle sayfanın ana başlığını ifade etmek için kullanılır. h2 etiketi, ikinci düzey bir başlığı temsil eder ve sayfada alt başlıkları tanımlamak için kullanılabilir. h3 etiketi ise h1 ve h2’den daha düşük bir düzeyde bir başlığı temsil eder.
Başlık etiketlerinin kullanımı, sayfanın hiyerarşik yapısını göstermek için önemlidir. Bu etiketler, arama motorlarına sayfadaki başlıkların önem sırasını gösterirken, kullanıcılara sayfada gezinmeyi kolaylaştırır. Örneğin, bir h2 başlığının altında yer alan başka başlıklar, bu başlığa bağlı olarak alt başlıklar olarak kabul edilir.
Başlık etiketleri aynı zamanda sayfadaki metnin görsel şekillendirilmesinde de önemli bir rol oynar. Tarayıcılar, başlık etiketlerine öncelik vererek metni daha büyük ve daha belirgin bir şekilde görüntülemenin yanı sıra sayfadaki diğer stil öğelerine de etkileyebilir.
Paragraf Etiketi
Paragraf etiketi olan p etiketi, HTML’de metinlerin paragraf şeklinde düzenlenmesini sağlar. Bu etiketle oluşturulan paragraflar, kullanıcılara metni daha anlaşılır ve düzenli bir şekilde sunma imkanı sağlar.
p etiketi ile oluşturulan paragraflar, genellikle web sayfalarında uzun metinlerin bölümlere ayrılması ve bilgilerin kesintisiz bir şekilde sunulması için kullanılır. Kullanıcılar, p etiketi sayesinde metinleri daha rahat okuyabilir ve anlayabilir.
p etiketiyle birlikte, metin düzenlemeleri için çeşitli seçenekler de sunulur. Bu seçenekler arasında:
- class: Belirli bir paragrafa CSS ile stil uygulamak için kullanılır.
- id: Paragrafa benzersiz bir tanımlayıcı verir ve diğer öğelerle ilişkilendirmek için kullanılır.
- style: İlgili paragrafa inline stil tanımlar.
- title: Paragrafa bir açıklama ekler.
Bu özellikler sayesinde p etiketi, metin düzenlemeleri için esnek bir seçenek sunar ve metinlerin daha etkili bir şekilde sunulmasına yardımcı olur. Ayrıca, p etiketiyle oluşturulan paragraflar, SEO açısından da önemlidir çünkü arama motorları metin içeriğini daha iyi anlar ve indeksleme yapar.
Görsel Etiketleri
Görsel etiketleri, web sayfalarında resim, video gibi görsel medya öğelerinin kullanımını sağlayan etiketlerdir. Bu etiketler, sayfada medya öğesinin nasıl görüntüleneceğini ve nasıl işleneceğini belirler.
Resim etiketleri, web sayfalarında çeşitli resimleri görüntülemek için kullanılır. Image etiketi () kullanarak, resimlerin kaynağını, boyutlarını, alternatif metinlerini ve diğer özelliklerini belirtebiliriz. Bu sayede tarayıcılar, resmi doğru şekilde yükleyebilir ve kullanıcılarımıza doğru bir web deneyimi sunabiliriz.
Video etiketleri ise web sayfalarında video içeriklerini göstermek için kullanılır. Video etiketi (
Görsel etiketlerinin kullanımı, web sayfalarını daha ilgi çekici hale getirmek ve kullanıcı deneyimini artırmak için büyük önem taşır. Doğru şekilde kullanıldığında, medya öğeleri web sayfalarına canlılık katıp, kullanıcıların ilgisini çekerek daha etkileyici bir deneyim sunar.
HTML Dosya Yapısı
HTML Dosya Yapısı, bir HTML belgesinin yapısını ve temel bileşenlerini tanımlar. Bir HTML belgesi, başlık (
) ve içerik () bölümlerinden oluşur. Bu iki bölüm, farklı amaçlara hizmet eder ve web sayfasının düzgün çalışmasını sağlar.Başlık bölümü (
), web tarayıcısına belgenin nasıl görüntüleneceğiyle ilgili bilgileri sağlar. Bu bölüm, “” etiketiyle belirli meta açıklamalarını tanımlamak, stil sayfalarını referans almak ve diğer başlık bilgilerini içermek için kullanılır. Meta açıklamaları, web sayfasının içeriği hakkında arama motorlarına önemli bilgiler sağlar.İçerik bölümü (
), web sayfasının görünen içeriğini içerir. Bu bölümde, metin etiketleri, görsel etiketleri, link etiketleri ve diğer HTML etiketleri kullanılarak web sayfasının düzenlemesi yapılır ve içerik oluşturulur. Metin etiketleri, başlıkları, paragrafları, listeleri ve diğer metin öğelerini biçimlendirmek için kullanılır.HTML dosya yapısı, web sayfalarının düzenli bir şekilde oluşturulmasını sağlar ve tarayıcıların doğru şekilde yorumlamasına yardımcı olur. HTML etiketlerini doğru bir şekilde kullanarak, web sayfaları daha okunaklı ve erişilebilir hale gelir. Aynı zamanda, başlık ve içerik bölümlerinin birbirinden ayrılması, web sayfasının daha kolay yönetilmesini sağlar.
Head Bölümü
Head Bölümü, bir web sayfasının başlık bilgilerinin yer aldığı bölümdür. Bu bölüm, sayfanın arama motorları tarafından anlaşılmasını sağlar ve kullanıcılara önemli bilgiler sunar. Head bölümünde yer alan meta açıklamaları, stil tanımlamaları gibi etiketler, web sayfasının performansını artırmaya ve ziyaretçilere daha iyi bir deneyim sunmaya yardımcı olur.
Meta açıklamaları, web sayfasının içeriğini tanımlayan ve arama motorlarının sayfayı anlamasına yardımcı olan etiketlerdir. Bu açıklamalar, sayfanın ne hakkında olduğunu ve hangi anahtar kelimeleri içerdiğini belirtir. Ayrıca, sitenin açıklamasını ve diğer önemli bilgileri de içerebilir.
Stil tanımlamaları ise sayfanın görüntüsünü belirler.
- Örneğin:
- Başlık yazı tipi, renk ve boyutu,
- Paragraf yazı tipi, satır aralığı ve kenar boşluğu gibi özellikler.
Bu etiketler, web sayfasının düzenini ve görsel şıklığını sağlar.
Head bölümü, webmaster’ların site üzerinde kontrol sağlamasını ve performansını optimize etmesini sağlar. Örneğin, CSS ve JavaScript kodlarını tanımlayarak sayfa yüklenme hızını iyileştirebilirler. Ayrıca, head bölümünde tarayıcı uyumluluğu için gerekli olan etiketler de yer alabilir.
Body Bölümü
Body Bölümü: Web sayfalarının en önemli bölümlerinden biri olan body bölümü, sitenin ziyaretçilere sunulan içeriğini kapsar. Bu bölüm, sitenin ana metinleri, görselleri ve diğer tüm içeriği içerir. Body etiketi genellikle html etiketiyle birlikte kullanılır ve içeriği tanımlamak için kullanılan bir HTML etiketidir.
Body bölümünde çeşitli etiketler kullanılarak içeriğin düzenlenmesi ve biçimlendirilmesi sağlanır. Örneğin, h1 etiketi ile başlık oluşturulabilir. Bu şekilde kullanıcılar, sayfadaki ana başlığı hızlı bir şekilde fark edebilirler. Ayrıca p etiketi ile paragraflar oluşturulabilir ve içerik daha okunabilir hale getirilebilir.
Görsel içeriklerin eklenmesi için img etiketi kullanılır. Bu etiket, resimlerin boyutlarını, alternatif metinlerini ve diğer özelliklerini tanımlamak için kullanılır. Video gibi medya içerikleri ise iframe etiketiyle eklenir.
Ayrıca body bölümünde metinler arasında bağlantılar oluşturmak için a etiketi kullanılabilir. Bu sayede kullanıcılar, tıkladıkları linklerle diğer sayfalara yönlendirilebilirler.
Body bölümü, web sayfalarının görsel ve metin içeriğini barındıran önemli bir kısımdır ve HTML etiketleri yardımıyla bu içerikler düzenlenebilir, biçimlendirilebilir ve kullanıcılarla etkileşime geçebilirler.
Link Etiketleri
=Anchor etiketi (a) kullanarak bağlantılar oluşturma ve diğer sayfalara yönlendirme
Web sayfalarında gezinme ve içerikleri arasında bağlantılar oluşturmak oldukça önemlidir. Bu bağlantıları oluşturmak için HTML’nin Anchor etiketi (a) kullanılır. Anchor etiketi, kullanıcının başka bir web sayfasına veya aynı sayfadaki belirli bir bölüme yönlendirilmesini sağlar.
Bağlantı oluşturmak için a etiketi kullanılırken, href (hypertext reference) özelliğiyle hedeflenen sayfanın veya bölümün URL’si belirtilir. Örneğin:
<a href="https://www.example.com">Example Website</a>Hedeflenen sayfa veya bölüm için URL belirtilirken, diğer sayfalara veya sitenin farklı bölümlerine referanslar da oluşturulabilir. Bu, gezinme menüleri veya içerikler arası bağlantılar oluşturmak için kullanışlıdır.
Anchor etiketi ayrıca target özelliğiyle bağlantının nasıl açılacağını belirlemek için kullanılabilir. Örneğin, yeni bir sekmede veya aynı sekmede açılması için kullanılabilir. Örneğin:
<a href="https://www.example.com" target="_blank">Example Website</a>Anchor etiketi aynı zamanda bir sayfanın içindeki belirli bir bölüme de bağlantı oluşturabilir. Bu, uzun sayfalarda kullanıcının doğrudan önemli bir bölüme gitmesini sağlar. Bunun için hedeflenen bölüme id özelliğiyle bir kimlik atanır ve anchor etiketinde bu kimlik kullanılır. Örneğin:
<a href="#section2">Section 2</a>Bu örnekte, #section2, sayfanın içindeki belirli bir bölümün kimliğini belirtir ve kullanıcı tıklandığında bu bölüme yönlendirilir.
HTML’de Anchor etiketinin doğru kullanımı, kullanıcıların gezinme deneyimlerini geliştirmeye ve içerikleri arasında etkili bağlantılar kurmaya yardımcı olur.
