TÜM HTML KODLARI VE ANLAMLARI

Bu yazımızda Html kodları nelerdir? Html5 ile gelen anlamsal etiketler nelerdir? ve bu kodların ne işe yaradığını yani anlamlarını öğreneceğiz. 

Tüm kodları gruplayarak listeledim. Gruplamış olduğum her tabloda kodun açıklamasını kısaca özetlemeye çalıştım. Eğer o kod ile ilgili detaylı yazmış olduğum bir yazım bulunuyorsa, tablonun altında o yazılara link verdim. Kısa açıklamaların yeterli olmadığını düşündüğünüz yerlerde daha detaylı anlatım için yazılarımı okuyabilirsiniz. 

TEMEL HTML KODLARI VE ANLAMLARI

<!DOCTYPE> Dökümanın türünü belirtir. Sayfanın en üstünde yazılır. Tarayıcıların sayfayı doğru görüntülemesini sağlar
<html> Tüm Html etiketlerini kapsar
<head> Sayfa ile ilgili bazı bilgilerin (meta bilgileri, sayfa başlığı vb..) tanımlandığı etikettir
<title> Sayfa başlığının verildiği etikettir
<body> Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler
<script> Javascript kodlarının yazıldığı etikettir
<style> Css kodlarının yazıldığı etikettir
<meta> Sayfa açıklaması, sitenin yazarı, kullanılan karakter seti vb.. bilgilerin tanımlandığı etikettir
<link> Dışarıdan bir dosyayı sayfamıza eklemek (referans vermek) için kullanılır
<h1> – <h6> Başlık eklemek için kullanılır. h1’den h6’ya doğru yazı boyutu küçülür. Yani en büyük başlık için h1 etiketini kullanıyoruz
<p> Paragraf eklemek için kullanılır
<a> Link eklemek için kullanılır
<br> Alt satıra geçmek için kullanılır
<hr> Yatay çizgi eklemek için kullanılır
<div> Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır
<span> Html kodlarını kapsayıcı bir etiket içerisine almak için kullanılır
<!–…–> Yorum satırı eklemek için kullanılır

Meta Etiketleri (Tagları) Nedir? Meta Etiketi Kullanımı

Html Başlık Etiketleri

Html Sayfalarına Paragraf Ekleme – p Etiketi

Html Link Verme (Yazıya, Resme, Dosyaya, İndirme Linki)

Html Sayfalarında Satır Atlama ve Alt Satıra Geçme – br Etiketi

Html Sayfalarına Yatay Çizgi Ekleme – hr Etiketi

Html Div Nedir? Span Nedir? Div ve Span Kullanımı

Html Yorum Satırı (Açıklama Notları) Ekleme

BİÇİMLENDİRME İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI

<abbr> Yazılan kısaltmaların açılımlarını belirtmek için kullanılır. Örneğin Html kısaltmasının üzerine fare ile gelindiğinde açılımının Hyper Text Markup Language olduğunu gösterebiliriz
<address> Html belgelerinde adres ve iletişim bilgilerini yazarken kullanılır. Yazıları italik yapar
<b> Yazıları koyulaştırmak (kalınlaştırmak) için kullanılır
<bdo> Yazıyı tersten yazmak için kullanılır
<blockquote> Başka kaynaklardan uzun alıntılar yaparken kullanılır. Alıntı yapılan yazıya sağdan ve soldan 40px margin değeri uygulanır. Yani yazı 40px içeri alınır
<cite> Alıntı yapıldığını belirtmek için kullanılır. Bu etiket içerisindeki yazılar italik olarak görüntülenir
<code> Yazıları bir bilgisayar kodu parçası görünümünde yapmak için kullanılır
<del> Yazıların üstünü çizmek için kullanılır
<dfn> Tanımları belirtmek için kullanılır
<em> Yazıları italik yapmak için kullanılır
<i> Yazıları italik yapmak için kullanılır
<ins> Yazıların altını çizmek için kullanılır
<kbd> Yazıları klavye formatında göstermek için kullanılır
<mark> Vurgulanmak istenen yazılar için kullanılır. Seçilen yazının arkaplan rengini sarı yapar
<pre> Biçimlendirilmiş yazıları olduğu gibi göstermek için kullanılır
<q> Başka kaynaklardan kısa alıntılar yaparken kullanılır. Alıntı yapılan yazıyı çift tırnak (” “) arasına alır
<samp> Yazıların bilgisayar çıktısı biçiminde olmasını sağlar
<small> Yazının boyutunu küçültmek için kullanılır
<strong> Yazıları koyulaştırmak (kalınlaştırmak) için kullanılır
<sub> Yanındaki yazının biraz altında olmasını istediğimiz durumlarda kullanılır
<sup> Yanındaki yazının biraz üstünde olmasını istediğimiz durumlarda kullanılır
<u> Yazıların altını çizmek için kullanılır
<var> Matematiksel değişkenleri belirtmek için kullanılır

Html Biçimlendirme Etiketleri

LİSTE OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI

<ul> Sırasız liste oluşturmak için kullanılır
<ol> Sıralı liste oluşturmak için kullanılır
<li> Liste elemanlarını eklemek için kullanılır
<dl> Açıklamalı liste oluşturmak için kullanılır
<dt> Açıklamalı liste elemanlarına başlık vermek için kullanılır
<dd> Açıklamalı liste elemanlarını oluşturmak için kullanılır

Html Listeleme Etiketleri – ul Etiketi – ol Etiketi

Html Listeleme Örnekleri – İç İçe Listeler

TABLO OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI

<table> Tablo oluşturmak için kullanılır
<caption> Tabloya başlık eklemek için kullanılır
<th> Tabloda başlık alanları eklemek için kullanılır
<tr> Tabloda yeni bir satır eklemek için kullanılır
<td> Tabloda yeni bir hücre eklemek için kullanılır
<thead> Tablo kodlarının daha düzenli olması için başlık kodları bu etiket içerisine yazılabilir
<tbody> Tablo kodlarının daha düzenli olması için içerik kodları bu etiket içerisine yazılabilir
<tfoot> Tablo kodlarının daha düzenli olması için alt bilgi kodları bu etiket içerisine yazılabilir
<col> Tablo sütun gruplarına uygulanacak özellikleri belirtmek için kullanılır
<colgroup> Tablo sütun grubu oluşturmak için kullanılır

Html Tablo Oluşturma

Html Tablo Örnekleri

FORM OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI

<form> Form oluşturmak için kullanılır
<input> Tek satırlık metin girişini sağlamak için kullanılır
<textarea> Çok satırlı metin girişini sağlamak için kullanılır
<button> Tıklanabilir buton oluşturmak için kullanılır
<select> Açılır menü oluşturmak için kullanılır
<optgroup> Açılır menüdeki elemanları gruplamak için kullanılır
<option> Açılır menünün her bir elemanını eklemek için kullanılır
<label> Form öğeleri için etiket belirtmemizi sağlar
<fieldset> Form elemanlarını gruplamak için kullanılır
<legend> Fieldset elemanı için başlık tanımlamamızı sağlar
<datalist> Özel liste seçenekleri sunmak için kullanılır

Tüm Detaylarıyla Html Form Oluşturma

Html Buton Ekleme – Bağlantılı Html Buton Oluşturma

Html Form Örnekleri (İletişim Formu, Kayıt Formu vb..)

RESİM, SES VE VİDEO İLE İLGİLİ KULLANDIĞIMIZ HTML KODLARI VE ANLAMLARI

<img> Resim eklemek için kullanılır
<map> Resim haritası oluşturmak için kullanılır
<area> Resim haritalarında alan koordinatı belirtirken kullanılır
<canvas> Grafik çizmek için kullanılır
<figcaption> Figure elemanı için bir başlık tanımlar.
<figure> Özel bir içerik alanı oluşturmak için kullanılır
<iframe> Var olan bir Web Sayfası içerisinde başka bir web sitesini, web sitesinin bir sayfasını veya youtube videoları gibi içerikleri görüntülememizi sağlar
<audio> Ses veya müzik içerikleri eklemek için kullanılır
<source> Medya öğeleri için birden fazla medya kaynaklarını tanımlar
<track> Medya öğeleri için metinleri tanımlar
<video> Video içerikleri eklemek için kullanılır

Html Resim Ekleme

Html Resme Link Verme

Html iframe Nedir? iframe Kullanımı ve iframe Kodu

Siteye Youtube Video Ekleme (iframe Kodu İle)

Siteye Google Map Ekleme (Harita, Adres, Konum Ekleme)

HTML5 İLE GELEN ANLAMSAL HTML KODLARI VE ANLAMLARI

Bu etiketler anlamsal etiketler olduğu için açıklama kısımlarına birşey yazmadım. Bunlarla ilgili Html Div Nedir? Span Nedir? Div ve Span Kullanımı yazımı okuyarak daha iyi anlayabilirsiniz.

<header>  
<footer>  
<main>  
<section>  
<article>  
<aside>  
<nav>  
<details>  
<summary>  

DİĞER HTML KODLARI VE ANLAMLARI

<noscript> Script çalıştırma özelliği kapalı tarayıcılar için alternatif kod bölümü oluşturur
<embed> Sayfalarımıza dışardan bir obje gömmemizi sağlar
<object> Sayfalarımıza nesneleri gömmemizi sağlar
<param> Bir nesne için parametre tanımlamamızı sağlar
<time> Bir tarih veya saat tanımlarken kullanılır
<progress> Bir sürecin ilerleme durumunu belirtmek için kullanılır
<output> Bir hesaplamanın sonucunu tanımlar
<base> Tüm linkler için kaynak kök adresi belirtmeyi sağlar

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link