HTML Kodları – Web Tasarım & Programlama
HTML DERSLERİ

HTML Kodları

İnternet’in icadından önce bir zaman düşünün. Web siteleri yoktu ve kağıda basılmış ve sıkıca bağlı kitaplar birincil bilgi kaynağınızdı. Peşinde olduğunuz bilgilerin tam olarak izini sürmek için oldukça fazla çaba ve okuma (okuma) gerekiyordu.

Bugün bir web tarayıcısı açabilir, istediğiniz arama motorunu seçerek dünyanın her hangi bir noktasındaki bilgiye rahatlıkla arayabilirsiniz. Akla gelebilecek herhangi bir bilgi parmaklarınızın ucuna gelmiş olur. İşte yazıda sizlere bu sayfa ve internet üzerindeki tüm sayfalarda kullanılan HTML kodlarını ve söz dizimlerini göstereceğim.

HTML (Hyper Text Markup Language), Web sayfaları oluşturmak için kullanılan işaretleme dilidir.
Kullandığımız Chrome, Firefox , Opera İnternet Explorer gibi tarayıcılar HTML kodlarını işleyerek bu kodları web sayfasına dönüştürür.
Bir web sayfasında görüntülenen tablo, paragraf, başlık vb. tüm içerik HTML Etiketlerinden oluşur.

HTML Giriş
Başlarken… HTML kodları nerede yazılır?
HTML yazım kuralı Basit HTML belgesi
HTML yorum etiketi – Yorum Satırları Oluşturma

 

Bölümleme Etiketleri
article section nav aside
header footer h1, h2, h3, h4, h5 ve h6

 

İçeriği Gruplama Etiketleri
p address hr pre
blockquote ol ul li
dl dt dd figure
figcaption main div  

 

Metin Düzenleme Etiketleri
a em strong  small 
s cite q dfn
abbr ruby rp rt
rtc data time code
var samp kbd sub
sup i b u
mark bdi bdo span
br wbr    

 

Gömülü içerik Etiketleri
picture source img iframe
embed object param video
audio track map area

 

Tablo Etiketleri
table caption colgroup col
tbody thead tfoot tr
td th    

 

Form Etiketleri
form label input button
select datalist optgroup option
textarea output progress meter
fieldset legend    

 


Başlarken…

Bu derste HTML ile kendi Web Sayfanızı oluşturabileceksiniz. Çünkü HTML öğrenmek oldukça kolaydır.

Aşağıda en basit haliyle bir HTML belgesini görüyorsunuz.

 

Yukarıdaki HTML kodlarını açıklamaya geçmeden önce bir soruya cevap verelim.

 


HTML Kodları Nerede Yazılır?

Html kodu yazmak için bilgisayarlara bir program yüklemek gerekmez. Wordpad, not defteri  gibi bir metin editörü ile Html sayfaları oluşturabilirsiniz.

Kod yazmayı daha kolay hale getirmek için dreamwear, Sublime Text, Brackets veya Notepad++ gibi programlar kullanılabilir. Yazılan html kodları kaydedilirken;

htm, xhtml ve html gibi tarayıcıların anlayacağı şekilde kaydedilmesi gerekir.

Biz örneklerimizde metin düzenleyicisi olarak Brackets programını kullanacağız.

 

 


HTML Yazım Kuralları

HTML Etiketleri (tag) “<” ve “>” işaretleri arasına yazılır.

Bir HTML öğesi genellikle içeriğin arasına yerleştirilen bir başlangıç ​​etiketi ve bitiş etiketinden oluşur. Örnek: <p>…….</p>

Bitiş etiketi, başlangıç ​​etiketi gibi yazılır, ancak etiket adından önce bir “/” eklenir. “<html>  </html>” , “<p> </p>” vb.


HTML Belgesi

Yukarıda en basit haliyle yazdığımız HTML kodlarını açıklayalım.

<!DOCTYPE html> bildirimi belgeyi HTML5 olarak tanımlar.

<html> </html> Tüm etiketleri saran, html kodu ile kodlama işleme yapılması gerektiğini belirten sayfanın başında açılarak sayfanın sonunda da kapatılan etiketin adıdır. <html> … </html> şeklinde açılmalı ve kapanmalıdır.

<head>  </head> etiketi belge hakkında meta bilgileri içerir. Bu bölümdeki yazılan hiç bir şey sayfada görünmez. Meta öğeleri genellikle sayfa açıklaması, anahtar kelimeler, belgenin yazarı, son değiştirilen ve diğer meta verileri belirtmek için kullanılır.

<title> </title> bu etiketler arasına yazdıklarınız tarayıcınızda başlık olarak görüntülenecektir.

<body> </body> Sayfamızın içeriği ile ilgili tüm HTML kodları  buraya yazılacaktır. Başlıklar, paragraflar, resimler, videolar, listeler vb..

Bu konu da ilginizi çekebilir: Temel HTML Kodları

Html belgesinin temel etiketlerini açıkladık. Artık içerik oluşturmak için kullanılan HTML Kodlarına (HTML Etiketleri) geçelim.


HTML Yorum Etiketi

Yorum etiketleri, HTML kaynak koduna yorum eklemek için kullanılır.

Aşağıdaki sözdizimini kullanarak HTML kaynağınıza yorum ekleyebilirsiniz:

 


HTML <article> Etiketi

<article> Makale öğesi, bir belge, sayfa, uygulama veya sitedeki eksiksiz veya müstakil bir bileşimi temsil eder. Bu bir dergi, gazete, teknik veya bilimsel makale, bir makale veya rapor, bir blog veya başka bir sosyal medya yazısı olabilir.

Genel bir kural, makale öğesinin yalnızca öğenin içeriği belgenin anahatlarında açıkça listelenmesi durumunda uygun olmasıdır. Her makale, tipik olarak, makale öğesinin çocuğu olarak bir başlık (h1-h6 öğesi) eklenerek tanımlanmalıdır.

Makale elemanları iç içe geçtiğinde, iç eşya elemanları, dış eşyaların içeriğiyle ilgili prensipte olan eşyaları temsil eder. Örneğin, bir sitedeki blog girişi, blog girişi için makale öğesi içine yerleştirilmiş makale öğelerindeki diğer blog girişlerinin özetlerinden oluşabilir. 

Örnek:

Başka bir örnek

Schema.org kelime hazinesi, CreativeWork – Makale alt türlerini kullanarak makalenin türü hakkında daha ayrıntılı bilgi sağlamak için kullanılabilir, ayrıca makalenin yayımlanma tarihi gibi diğer bilgiler de sağlanabilir.


HTML <section> Etiketi

<section> Bölüm öğesi, belgenin veya uygulamanın genel bir bölümünü temsil eder. Bu bağlamda, bir bölüm içerik tematik bir gruplandırmasıdır. Her bölüm, genellikle bölüm öğesinin bir çocuğu olarak bir başlık (h1-h6 öğesi) eklenerek tanımlanmalıdır.

Örnek:

 


HTML <nav> Etiketi

<nav> öğesi, sayfanın diğer sayfalara veya sayfa içindeki bölümlere bağlantı veren bir bölümünü gösterir: gezinme bağlantılarına sahip bir bölümdür.

Bir belgenin tüm bağlantılarının <nav> öğesinin içinde olması gerekmez. Ancak <nav> öğesi yalnızca büyük gezinme bağlantı bloğu için tasarlanmıştır. 

Engelliler için ekran okuyucular gibi tarayıcılar bu öğeyi, içeriğin ilk oluşturulmasını ihmal edip etmemeyi belirlemek için kullanabilir.


HTML <aside> Etiketi

<aside> etiketi, yerleştirildiği içerikten başka bir içerik tanımlar.

Bir kenara öğe, bir sayfanın, ebeveynlik bölümleme içeriğinin içeriği ile teğet olarak ilgili olan ve bu içerikten ayrı olarak düşünülebilecek içerikten oluşan bir bölümünü temsil eder. Bu tür bölümler, basılmış tipografide genellikle kenar çubukları olarak gösterilir.

Eleman çekme tırnakları veya kenar çubukları gibi tipografik etkiler için, reklam için, nav elemanları grupları için ve en yakın atası bölme içeriğinin ana içeriğinden ayrı olarak kabul edilen diğer içerikler için kullanılabilir.

 


HTML <header> Etiketi

<header> öğesi, tanıtım içeriği veya bir dizi gezinti bağlantısı için bir kökü temsil eder.

Bir <header> öğesi tipik olarak şunları içerir:

bir veya daha fazla başlık elemanı (<h1> – <h6>)
logo veya simge
yazarlık bilgisi
Tek bir belgede birkaç <header> öğesi olabilir.

Bir başlık elemanının en yakın atası bölme kök elemanı gövde elemanı olduğunda ve ana elemanın veya bir bölümleme içerik elemanının soyundan gelmiyorsa, bu başlık vücut elemanına yöneliktir ve sayfanın bir bütün olarak giriş içeriğini temsil eder.

 


HTML <footer> Etiketi

<footer> etiketi, bir belge veya bölüm için altbilgiyi tanımlar.

Bir <footer> elemanı, içeren elemanı hakkında bilgi içermelidir.

Bir <footer> elemanı tipik olarak şunları içerir:

yazarlık bilgisi
telif hakkı bilgisi
iletişim bilgileri
site haritası
Başa dön
İlgili belgeler
Tek bir belgede birkaç <footer> elemanı olabilir.

 


HTML <Hx> Etiketleri – Başlık Ekleme Etiketleri

HTML’ de başlıklar <h1> .. <h6> etiketleriyle oluşturulur.

Başlık boyutu <h1> den <h6> y< doğru küçülür. Önemli başlıklar için <h1> etiketi kullanılır. Aşağıdaki örnekte tüm başlıklara ait (<h1> den <h6> ya kadar) görünümleri inceleyebilirsiniz.

Html Kodları:


HTML <p> Etiketi – HTML Paragraf Ekleme

HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.

HTML Paragraf Ekleme Kodları:

 


HTML <address> Etiketi

HTML <address> etiketi, bir belgenin veya makalenin iletişim bilgilerini (yazar / sahibi) tanımlar.
elemanı genellikle italik olarak görüntülenir. Çoğu tarayıcı, öğeden önce ve sonra bir satır sonu ekler.

Adres öğesi bir kişi, kişi veya kuruluş için iletişim bilgilerini temsil eder. Fiziksel ve / veya dijital konum / iletişim bilgilerini ve bir kişi (ler) i tanımlayan veya bilgileri ilgilendiren bir organizasyon tanımlayan bir araç içermelidir.


HTML <hr> Etiketi – Yatay çizgi

Yatay çizgiler, belgenin bölümlerini görsel olarak ayırmak için kullanılır. <hr> etiketi, belgedeki geçerli konumdan sağ kenar boşluğuna bir çizgi oluşturur ve çizgiyi buna göre keser.

Örneğin, aşağıda verilen örnekteki gibi iki paragraf arasında bir satır vermek isteyebilirsiniz


HTML <pre> etiketi

<pre> etiketi önceden biçimlendirilmiş metni tanımlar.

Bir <pre> öğesindeki metin, sabit genişlikte bir fontta (genellikle Courier) görüntülenir ve hem boşlukları hem de satır kesmelerini korur.

Örnek kod:

 

 


HTML <blockquote> Etiketi

Blockquote , başka bir kaynaktan alıntılanan içeriği, isteğe bağlı olarak bir footer veya cite öğesi içinde olması gereken bir atıf ile ve isteğe bağlı olarak ek açıklamalar ve kısaltmalar gibi satır içi değişikliklerle temsil eder. Kullanımıyla ilgili örnek HTML kodlarını ve ekran çıktısını inceleyebilirsiniz.

 


HTML <ol> Etiketi  – HTML Sıralı Liste Oluşturma

OL etiketi sıralı liste oluşturmak için kullanılır. Kelime işlemci programındaki numaralandırma
işlemi ile aynıdır. Listeleme işlemi harf, rakam veya roma rakamı şeklinde yapılabilir.
Belirteceğiniz parametreler yardımı ile de istediğiniz harf, rakam veya roma rakamından
başlayarak sıralı listenizi oluşturabilirsiniz.liste_html_1

Type parametresi kullanarak listenin rakamla mı harfle mi başlayacağını
belirleyebiliriz.
“A” harfi yerine küçük “a” harfi yazılırsa sıralama a, b, c, …. şeklinde küçük harflerle
olacaktır.
liste_html_2

“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma
rakamları ile yapılacaktır.

liste_html_3

Sıralamanın her zaman “1” den veya “A” dan başlamasını istemeyebiliriz. Bu tür
durumlarda Start parametresi kullanılır. Start parametresinin her zaman sayı olması gerekmektedir. Örneğin sıralamayı “C” harfinden başlatmak istiyorsak start değerine “C” yazmak yerine “3” yazmak zorundayız.

liste_html_4

İç İçe Sıralı Liste Oluşturma

OL etiketlerini iç içe kullanarak listeler oluşturulabiliriz. Örneğimizde bilgisayar parçalarıyla ilgili basit bir liste gerçekleştirelim.

Ekran çıktısı:

liste_html_5

 


HTML <ul> Etiketi  –  HTML Sırasız Liste Oluşturma

Sırasız listeler <ul> </ul> etiketiyle tanımlanır. Daha sonra her bir eleman <li> </li> etiketleri arasında belirtilir. Type parametresi ile kullanacağınız madde işaretinin şeklini belirleyebilirsiniz. Type ile kullanılan parametreler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare)’dir.

Örnek:

Ekran Çıktısı:

  • Kahve
  • Çay
  • Süt

Sırasız listelerde liste işareti çeşitli şekiller alabilir.


HTML <li> Etiketi

Li elemanı bir liste öğesini temsil eder. Ana öğesi bir ol veya ul ise, öğe, bu öğeler için tanımlandığı şekilde ana öğe listesinin bir öğesidir. Aksi takdirde, liste öğesinin başka bir li öğeyle listeyle ilgili tanımlanmış bir ilişkisi yoktur.

Ana eleman bir ol elemanı ise, li elemanın sıralı bir değeri vardır.

Değer özelliği, varsa, liste öğesinin sıra değerini veren geçerli bir tamsayı olmalıdır.

Liste etiketleri için bakınız.

Daha fazlası için HTML Liste Örnekleri konusuna bakabilirsiniz.


HTML <dl> Etiketi

<dl> etiketi bir açıklama listesi tanımlar.

<dl> etiketi, <dt> (terimleri / adları tanımlar) ve <dd> ile birlikte kullanılır (her terimi / adı tanımlar).

Örnek:


HTML <dt> Etiketi

<dt> etiketi, açıklama listesindeki bir terimi / adı tanımlar.

<dt> etiketi, <dl> (bir açıklama listesini tanımlar) ve <dd> (her bir terim / adı açıklar) ile birlikte kullanılır.

Örnek:


HTML <dd> Etiketi

<dd> etiketi, açıklama listesindeki bir terimi / adı tanımlamak için kullanılır.

<dd> etiketi, <dl> (bir açıklama listesini tanımlar) ve <dt> (terimleri / adları tanımlar) ile birlikte kullanılır.

Bir <dd> etiketinin içine paragraflar, satır sonları, resimler, bağlantılar, listeler vb. koyabilirsiniz.

Örnek:


HTML <figure> Etiketi

<figure> etiketi, resimler, şemalar, fotoğraflar, kod listeleri vb. Gibi kendi kendine yeten içeriği belirtir.

<figure> öğesinin içeriği ana akışla ilgili olsa da, konumu ana akıştan bağımsızdır ve kaldırılırsa belgenin akışını etkilememelidir.

Örnek:


HTML <figcaption> Etiketi

<figcaption> etiketi, <figure> öğesinin başlığını tanımlar.

<figcaption> öğesi, <figure> öğesinin ilk veya son çocuğu olarak yerleştirilebilir.

Örnek:


HTML <main> Etiketi

<main> etiketi, bir belgenin ana içeriğini belirtir.

<main> öğesinin içindeki içerik belgeye özgü olmalıdır. Kenar çubukları, gezinme bağlantıları, telif hakkı bilgileri, site logoları ve arama formları gibi belgeler arasında tekrarlanan hiçbir içerik içermemelidir.

Örnek:


HTML <div> Etiketi

HTML <div> etiketi, belgenizin bir bölümünü tanımlamak için kullanılır. <div> etiketiyle, diğer HTML öğelerini tek bir mantıksal grupta birleştirebilirsiniz.

Temel etiket, <div> </div> şeklinde ve açılış / kapanış etiketleri arasına yerleştirilmiş içerikleri  diğer HTML öğeleriyle birlikte yazılmıştır.

HTML 5’te, <div> öğesinin rolü bir miktar azalmıştır. Bununla, HTML 5’in <div> ‘in geleneksel olarak kullanıldığı rolü üstlenen yeni unsurlar getirdiğini kastediyorum. Özellikle, HTML 5 kullanarak bir belgeyi işaretlerken, <div> öğesinin daha önce kullanıldığı durumlarda <article>, <aside>, <header> ve <footer> öğeleri kullanılmalıdır. Bu nedenle, <div> etiketi yalnızca, kullanılacak başka bir uygun HTML öğesi yoksa kullanılan bir uzantı mekanizması olarak kullanılmalıdır.


HTML <a> Etiketi  –  HTML Link Kodu Kullanma

Linkler neredeyse tüm web sayfalarında bulunur. Bağlantılar, kullanıcıların sayfadan sayfaya doğru yönlendirilmesi için kullanılır. Örneğin bu sitede tıkladığınız her menü link kullanılarak yönlendirilmektedir. Eğer bağlantının farklı pencerede açılması istenirse target=”_blank” özelliği eklenmelidir.

Örnek Kullanım:

Kodlar çalıştığında aşağıdaki gibi olacaktır.

Anasayfaya Gidin.

HTML mailto ve tel bağlantısı oluşturma

mailto: link verilecek kişinin mailadresi yazılır. Bu özellik çalışması için bilgisayarda mail programının olması gerekir. Outlook gibi. Bağlantıya tıklandığında mail programında gönderilecek kişi e-posta adresi verilen bağlantıya göre doldurulacaktır.

tel:telefon numarası verilecek kişinin numarası yazılır. Bu özellik mobil cihazlarda çalışacaktır. Bu bağlantı üzerine tıklandığında  verilen telefon numarası çevrilecektir.


HTML <em> Etiketi

<em> etiketi, bir ifade etiketidir. Vurgulanan metin olarak işler.

Bilgi: Bu etiket kaldırılmadı, ancak CSS ile daha zengin bir etki elde etmek mümkündür.

 

HTML <small> Etiketi

<small> etiketi, daha küçük metni (ve diğer yan yorumları) tanımlar.

 


HTML <s> Etiketi

<s> etiketi, doğru veya alakalı olmayan metni belirtir.

<s> etiketi değiştirilen veya silinen metni tanımlamak için kullanılmamalıdır, değiştirilen veya silinen metni tanımlamak için <del> etiketini kullanılır.

 


HTML <cite> Etiketi

<cite> etiketi bir eserin başlığını tanımlar (örneğin, bir kitap, bir şarkı, bir film, bir TV şovu, bir resim, bir heykel, vb.).

Not: Bir kişinin adı işin adı değildir.

 


HTML <q> Etiketi

<q> etiketi alıntı etiketinin kısa yazımıdır.

Tarayıcılar normalde tırnak işaretleri ekler.

 


HTML <dfn> Etiketi

<dfn> etiketi, HTML’de bir terimin tanımlayıcı örneğini temsil eder.

Tanımlayan örnek genellikle bir belgede bir terimin ilk kullanımıdır.

<dfn> etiketinin en yakın ebeveyni ayrıca <dfn> içindeki terimin tanımını / açıklamasını da içermelidir.

<dfn> etiketinin içindeki terim aşağıdakilerden herhangi biri olabilir:

 


HTML <strong> Etiketi

<strong> etiketi yazıya <b> etiketi ile aynı görünümü verir. Yani yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur: <b> takısı sadece yazının stilini değiştirir. <strong> takısı ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken <strong> takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu varsaymaktadır.  Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, <strong> takıları arasındaki kelimeleri daha yüksek sesle okuyacaktır.

Ekran Çıktısı:

Web Tasarım ve Programlama Dersi HTML Örnekleri


HTML <abbr> Etiketi

HTML <ABBR> etiketi, içerdiği kelimenin, bir kelime veya kelime grubunun kısaltılmış hali olduğunu belirtir. Bununla birlikte baş harflerinden oluşan kısaltma tanımlanmasını sağlayan <ACRONYM> etiketine HTML 5‘te hiç yer verilmediği için her türlü kısaltmada alışkanlık açısından <ABBR> etiketi ile kullanılmalıdır.

HTML Sözdizimi ve Özellikler

<ABBR>
id= Eşsiz kimliğini belirtir.
class= Sınıf adını belirtir.
style= CSS kuralları tanımlar.
title= Kısaltılmış kelimeyi veya kısaltma hakkında kısa bilgi belirtir.
lang= İçerdiği metnin lisanını belirtir.
dir= İçerdiği metnin yönünü belirtir.
 


HTML <ruby> Etiketi

<ruby> etiketi, bir yakut ek açıklamasını belirtir.

Bir yakut eki, karşılık gelen karakterlerin telaffuzunu veya anlamını belirtmek için ana metne eklenmiş küçük bir metindir. Bu tür açıklamalar Japonca yayınlarda sıklıkla kullanılmaktadır.

<ruby> etiketini <rt> ve / veya <rp> etiketleriyle birlikte kullanın: <ruby> öğesi, açıklama / telaffuz gerektiren bir veya daha fazla karakterden ve bu bilgiyi veren bir <rt> öğesinden oluşur, ve yakut ek açıklamalarını desteklemeyen tarayıcılarda ne gösterileceğini tanımlayan isteğe bağlı bir <rp> öğesi.

 


HTML <rp> Etiketi

<rp> etiketi, yakut ek açıklamalarını desteklemeyen tarayıcılar tarafından gösterilecek olan yakut bir metnin etrafına parantez sağlamak için kullanılabilir.

<rp> etiketini <ruby> ve <rt> etiketleriyle birlikte kullanın: <ruby> öğesi, açıklama / telaffuz gerektiren bir veya daha fazla karakterden ve bu bilgiyi veren bir <rt> öğesinden ve yakut ek açıklamalarını desteklemeyen tarayıcılar için neyin gösterileceğini tanımlayan isteğe bağlı <rp> öğesi.

 


HTML <rt> Etiketi

<rt> etiketi, yakut bir açıklamadaki karakterlerin (Doğu Asya tipografisi için) açıklamalarını veya telaffuzlarını tanımlar.

<rt> etiketini <ruby> ve <rp> etiketleriyle birlikte kullanın: <ruby> öğesi, açıklama / telaffuz gerektiren bir veya daha fazla karakterden ve bu bilgiyi veren bir <rt> öğesinden ve yakut ek açıklamalarını desteklemeyen tarayıcılar için neyin gösterileceğini tanımlayan isteğe bağlı <rp> öğesi.

 


HTML <rtc> Etiketi

HTML <rtc> etiketi, yakut ek açıklamalarındaki yakut metin bileşenleri için yakut metin kabını işaretler. Yakut ek açıklamaları Doğu Asya tipografisinde yaygın olarak kullanılır.

Temel etiket, açılış ve kapanış etiketleri arasında yazılan içerikleriyle birlikte <rtc> </rtc> şeklinde yazılmıştır. Etiketler bir <ruby> etiketinin içine yerleştirilmelidir.

<rtc> öğesini hemen ardından bir <rb>, <rt>, <rtc> veya <rp> takip ediyorsa veya ana öğede daha fazla içerik yoksa, kapanış etiketi ihmal edilebilir.


HTML <data> Etiketi

<data> öğesi, içeriğini, değer niteliğindeki bu içeriğin makine tarafından okunabilir bir formu ile birlikte gösterir.

value niteliği mevcut olmalıdır. value, öğenin içeriğinin makinede okunabilir bir biçimde olması istenir.

Örnek:


HTML <time> Etiketi

<time> etiketi, insan tarafından okunabilir bir tarih / saat tanımlar.

Bu öğe ayrıca tarihleri ve saatleri makinede okunabilir bir şekilde kodlamak için de kullanılabilir, böylece kullanıcı temsilcileri kullanıcının takvimine doğum günü hatırlatıcıları veya zamanlanmış etkinlikler eklemeyi teklif edebilir ve arama motorları daha akıllı arama sonuçları üretebilir.


HTML <code> Etiketi

<code> etiketi bir cümle etiketidir. Bir parça bilgisayar kodu tanımlar.

İpucu: Bu etiket onaylanmadı, ancak CSS ile daha zengin bir etki elde etmek mümkündür.

 


HTML <sup> Etiketi – Üst Simge Etiketi

<sup>…..</sup> bu etiketi kullanarak üst simge eklemesi yapılımaktadır. <sup> etiketi kullanımı ile ilgili örnek HTML kodları ve ekran çıktısını inceleyelim.

 


Ekran Çıktısı:

24 = 2 x 2 x 2 x 2


HTML <sub> Etiketi – Alt Simge Etiketi

<sub>…</sub> etiketi kullanılarak  alt simge eklemeyi aşağıdaki HTML kodlarını kullanarak  oluşturalım.

Ekran Çıktısı:

Bitkiler gündüz CO2 alır, O2 verirler. Gece ise O2 alır, CO2 verirler.


HTML <b> Etiketi – Kalınlaştırma

Bu etiket ile istenen metnin bold (kalın) olarak yazılması sağlanır.
Aşağıdaki HTML kodunu incelediğimizde b etiketinin kullanımını görüyoruz.


HTML <i> Etiketi – Eğik Yazı (İtalik) Etiketi

Bu etiket kullanılarak italik yazı özelliği vermek istediğimiz yazıları hazırlayabiliriz. Aşağıda örnek HTML kodları ve ekran çıktısını görebilirsiniz.

 


HTML <br> Etiketi – HTML Alt Satıra Geçme

HTML dokümanında alt satır geçmek için klavyeden ENTER tuşuna basmanız bir işe yaramayacaktır.

<br> etiketi satır sonu olduğunu belirtir. Eğer paragraf kullanmadan bir alt satıra geçmek isterseniz <br> etiketi kullanmalısınız.

HTML Alt Satıra Geçme Kodları:


HTML <img> Etiketi  – Resim Ekleme Kodu

Bir web sayfasında bulunan resimle sayfanın göze daha hoş görünmesini sağlayacaktır. HTM sayfasına resim eklemek için örnek kod;

HTML’de, görüntüler  <img> etiketi ile tanımlanır.

<img> etiketi diğer etiketler gibi </img> şeklinde kapatılmaz. Yukarıdaki kullanımı inceleyin.

src niteliği, görüntünün URL’sini (web adresi) belirtir.

alt niteliği bir görüntü için alternatif bir metin sağlar, Bu çeşitli nedenlerle olabilmektedir. Örneğin kullanıcı bir nedenden dolayı görüntüleyemiyorsa (yavaş bağlantı nedeniyle veya src niteliğinde bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa gibi..

Bu sebele alt özelliğine verilecek değer resmi açıklayıcı, resimle alakalı olmalıdır.

 

İlginizi çekebilir: HTML Resim Ekleme


HTML <iframe> Etiketi

<iframe> etiketi bir satır içi çerçeveyi belirtir.

Geçerli HTML belgesine başka bir belgeyi gömmek için satır içi çerçeve kullanılır.


HTML <embed> Etiketi

<embed> etiketi, harici bir uygulama veya etkileşimli içerik için bir eklenti tanımlar (plug-in).

Örnekler:


HTML <object> Etiketi

<object> etiketi, bir HTML belgesindeki gömülü nesneyi tanımlar. Web sayfalarınıza multimedya (ses, video, Java uygulamaları, ActiveX, PDF ve Flash gibi) gömmek için bu öğeyi kullanın.

HTML belgenize başka bir web sayfasını gömmek için <object> etiketini de kullanabilirsiniz.

<object> etiketiyle gömülü eklentilere parametreler iletmek için <param> etiketini kullanabilirsiniz.

Örnekler:


HTML <param> Etiketi

<param> etiketi, bir <object> öğesiyle gömülü eklentiler için parametreleri tanımlamak için kullanılır.

İpucu: HTML 5 ayrıca ses veya video oynatmak için iki yeni öğe içerir: <audio> ve <video> etiketleri.

Örnek:


HTML <video> Etiketi

HTML Video öğesi (<video>) belgede video oynatmayı destekleyen bir medya oynatıcısını gömer. Ses içeriği için de <video> kullanabilirsiniz, ancak <audio> öğesi daha uygun bir kullanıcı deneyimi sağlayabilir.

Yukarıdaki örnek, <video> öğesinin basit kullanımını gösterir. <img> öğesine benzer şekilde, src niteliğinin içinde görüntülemek istediğimiz medyaya bir yol ekledik; video genişliği ve yüksekliği gibi bilgileri belirtmek, otomatik oynatılmasını ve döngü yapmasını isteyip istemediğimizi, tarayıcının varsayılan video kontrollerini göstermek isteyip istemediğimizi, vb. belirtmek için başka özellikler ekleyebiliriz.

<video> </video> etiketlerinin açılması ve kapanması içindeki içerik, öğeyi desteklemeyen tarayıcılarda geri dönüş olarak gösterilir.

İsteğe bağlı nitelikler

Nitelik Değeri Açıklama
autoplay autoplay Videonun hazır olduğu anda oynatılmaya başlayacağını belirtir
controls controls Video kontrollerinin gösterilmesi gerektiğini belirtir (oynat / duraklat düğmesi vb.).
height pixel Video oynatıcının yüksekliğini ayarlar
loop loop Videonun her bittiğinde tekrar başlayacağını belirtir
muted muted Videonun ses çıkışının sessize alınması gerektiğini belirtir.
poster URL Video indirilirken veya kullanıcı oynat düğmesine basana kadar gösterilecek bir resim belirtir.
preload auto
metadata
none
Sayfa yüklendiğinde yazarın videonun nasıl yükleneceğini düşündüğünü ve nasıl düşünüleceğini belirtir
src URL Video dosyasının URL’sini belirtir
width pixel Video oynatıcının genişliğini ayarlar

Bu tablo hangi web tarayıcısının hangi video dosyası formatını desteklediğini tanımlar.

Browser MP4 WebM Ogg
Internet Explorer Evet Hayır Hayır
Chrome Evet Evet Evet
Firefox Evet* Evet Evet
Safari Evet Hayır Hayır
Opera Evet* Evet Evet


HTML <audio> Etiketi

HTML ses etiketi, müzik ve diğer ses klipleri gibi sesleri tanımlamak için kullanılır. Şu anda, HTML 5 ses etiketi için desteklenen üç dosya biçimi vardır.

  • mp3
  • wav
  • ogg

HTML5, <video> ve <audio> denetimlerini destekler. Flash, Silverlight ve benzeri teknolojiler multimedya öğelerini oynatmak için kullanılır.

Örnek:

İsteğe bağlı nitelikler

Nitelik Değeri Açıklama
autoplay autoplay Videonun hazır olduğu anda oynatılmaya başlayacağını belirtir
controls controls Video kontrollerinin gösterilmesi gerektiğini belirtir (oynat / duraklat düğmesi vb.).
loop loop Videonun her bittiğinde tekrar başlayacağını belirtir
muted muted Videonun ses çıkışının sessize alınması gerektiğini belirtir.
preload auto
metadata
none
Sayfa yüklendiğinde yazarın videonun nasıl yükleneceğini düşündüğünü ve nasıl düşünüleceğini belirtir
src URL Video dosyasının URL’sini belirtir

Bu tablo hangi web tarayıcısının hangi ses dosyası formatını desteklediğini tanımlar.

Browser mp3 wav ogg
Internet Explorer Evet Hayır Hayır
Google Chrome Evet Evet Evet
Mozilla Firefox Evet* Evet Evet
Opera Hayır Evet Evet
Apple Safari Evet Evet Evet

 


HTML Tablo Oluşturma Kodu

Bir HTML tablosu <table> </table> etiketi ile tanımlanır.

Her tablo satırı <tr> </tr> etiketi ile tanımlanır.

Tablo başlığı <th> </th> etiketi ile tanımlanır. Varsayılan olarak tablo başlıkları kalın ve ortalanmış yazılacaktır.

Tablo hücreleri tanımlamak için <td> </td> etiketleri kullanılır.

Örnek:

 

İlginizi çekebilir: HTML Tablo Örnekleri

 


HTML <table> etiketi

Tablo öğesi, bir tablo biçiminde birden fazla boyutlu verileri temsil eder.

table elemanı table modelinde yer alır. Tablolarda torunları tarafından verilen satırlar, sütunlar ve hücreler vardır. Satırlar ve sütunlar bir ızgara oluşturur; Bir tablonun hücreleri, bu ızgarayı üst üste binmeden tamamen örtmelidir.

 


HTML <tr> etiketi

Tr elemanı, tablodaki bir hücre sırasını temsil eder.

Tr elemanı table modelinde yer alır.


HTML <td> etiketi

Td öğesi bir tablodaki veri hücresini temsil eder.

Td elemanı ve onun colspan’ı, rowspan ve başlıkları özellikleri tablo modelinde yer alır.


HTML <th> etiketi

Bu eleman bir tablodaki başlık hücresini temsil eder.

Bu eleman belirtilen bir kapsam içeriği özelliğine sahip olabilir.

Tablo örnek:

 


HTML Form Oluşturma Kodları

HTML‘ de kullanıcıdan giriş almak için kullanılan formları oluşturmak için aşağıdaki etiketleri kullanırız.


HTML <form>  Etiketi 

<form>  etiketi kullanıcıdan  bilgi toplamak için kullanacağımız formu tanımlamak için kullanılmaktadır.

<form> etiketinin alabileceği bazı özellikleri inceleyelim.

Action özelliği :

<form action=”/action_page.php“>

Action özniteliği, form gönderilirken yapılacak işlemi tanımlar.
Normal olarak, kullanıcı, gönder düğmesini tıklattığında form verisi sunucu üzerindeki bir web sayfasına gönderilir.
Yukarıdaki örnekte, form verileri sunucudaki ‘/action_page.php’ adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu tarafı komut dosyası içerir.

Method Özelliği :

Method özniteliği, form verilerini gönderirken kullanılacak HTTP yöntemini belirtir. Bu yöntem GET yada POST olabilir.

 

Get ve Post Farkı Nedir ?

Form verisi gönderirken varsayılan yöntem GET’tir.
Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanına görünür. Bu yüzden Hassas bilgileri gönderirken GET kullanılmamalıdır!
GET, boyut sınırlamaları da olduğu için kısa, hassas olmayan, miktarda veri için uygundur.

Form verileri hassas veya kişisel bilgiler içeriyorsa daima POST kullanılmalıdır. POST yöntemi, gönderilen form verilerini sayfa adresi alanına görüntülemez. Ayrıca POST hiçbir boyut sınırlamasına sahip değildir ve büyük miktarda veri göndermek için kullanılabilir.


HTML <label> Etiketi

<label> etiketi, <button>, <input>, <meter>, <output>, <progress>, <select> veya <textarea> öğesi için bir etiket tanımlar.

<label> öğesi, kullanıcı için özel bir şey oluşturmaz. Bununla birlikte, fare kullanıcıları için kullanılabilirlik iyileştirmesi sağlar, çünkü kullanıcı <label> elemanı içindeki metne tıklarsa kontrolü değiştirir.

<label> etiketinin for niteliği, bunları birleştirmek için ilgili öğenin id niteliğine eşit olmalıdır.

Örnek:

 


HTML <input> Etiketi

<input> etiketi en önemli Form etiketidir. <input> etiketi , tür özelliğine bağlı olarak çeşitli şekillerde görüntülenebilir.

<input> etiketinin type özelliğine göre bazı örnek kullanımları aşağıdaki gibidir.

Type Açıklama
<input type=”text”> Tek satırlık bir metin girişi alanı tanımlar.
<input type=”radio”> Bir çok seçenekten birini seçmek için bir radyo düğmesi tanımlar.
<input type=”submit”> Formu göndermek için bir gönder düğmesi tanımlar.

Şimdi bu türleri açıklayalım.

Text Girişi   <input type=”text”> :

Metin girişi için tek satırlık bir giriş alanı tanımlar.

Örnek:

Ekran Çıktısı:

Yukarıdaki örneği incelediğimizde input etiketinin type özelliğinin text olarak ayarlandığını, yani kullanıcıya tek satırlık bir veri girişi yapma imkanı sağlandığını görmekteyiz. name özelliği önemlidir. Her girdi alanının gönderilmesi gereken bir ad özniteliğine sahip olması gerekir. Yani bir isim vermek gerekir. Name özniteliği atlanırsa, o girdi alanının verileri gönderilemeyecektir.

Şifre Girişi <input type=”password”> :

 

<input type=”password”> şifre giriş alanı oluşturmak için kullanılır.

Ekran Çıktısı:

İlginizi çekebilir: HTML Form Örnekleri

 

Radio Button Girişi  <input type=”radio”> :

Radyo düğmeleri, bir kullanıcının sınırlı sayıda seçimden birini seçmesine izin verir.  Aşağıdaki örneği ve ekran çıktısını inceleyelim.

Ekran Çıktısı :

CheckBox Girişi <input type=”checkbox”> :

 

Radio Button öğesinden farklı olarak birden fazla seçim yapılabilmesi gereken durumlarda kullanılmaktadır. Kullanımı ile ilgili kodlar ve ekran çıktısı aşağıdadır.

 

Button <input type=”button”> :

Buton oluşturmak için kullanılır.

Aşağıdaki butona tıklayarak yukarıdaki kod satırının ne işe yaradığını görebilirsiniz.

 

Gönder (Submit) Butonu   <input type=”submit”> :

Verilerin işleneceği sunucu sayfasına verileri göndermek amacıyla kullanılır. Formun işleneceği sayfa Form etiketinde action özelliğinde belirtilmelidir. Aşağıda Submit butonunun kullanımını gösteren bir örnek ve aekran çıktısı bulunmaktadır.

Ekran Çıktısı:

Reset Butonu <input type=”reset”> :

<input type=”reset”> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar.

Örnek:

Ekran Çıktısı:


HTML <select> Etiketi

<select> etiketi açılır liste kutusu oluşturmak için kullanılır. kullanımı aşağıdaki gibidir.

Yukarıdaki HTML kodlarını yazıp sayfamızı görüntülediğimizde aşağıdaki ekran çıktısı oluşacaktır.

Kodları inceleyelim.

<option> etiketi seçim yapılabilecek elemanları tanımlamak için kullanılır.

Önceden seçilmiş bir seçeneği tanımlamak için, selected özelliği kullanılır. Yani yukarıdaki örnekteki listede varsayılan olarak Veri Tabanı öğesinin gelmesini istersek kodlarımızı aşağıdaki şekilde düzenlemeliyiz.

 

 


HTML <textarea> Etiketi

Formumuzda çok satırlı bir metin alanı kullanmamız gerektiğinde <textarea> etiketini kullanabiliriz. <textarea> etiketinde rows ve cols özellikleri kullanılabilir.

Rows özelliği, bir metin alanında görünür satır sayısını belirtir.

Cols özelliği, bir metin alanının görünür genişliğini belirtir.

Örnek:

 

HTML Form Örnekleri Sayfasına Gitmek İçin TIKLA


<progress>Etiketi

<progress> etiketi bir görevin ilerlemesini gösterir.

 


HTML <fieldset> Etiketi – Form Verilerini Gruplama 

Form içindeki elemanları gruplamak için kullanılır.

<fieldset> etiketi  ilgili verileri bir formda gruplamak için kullanılır.

<legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.

Örnek:

Ekran Çıktısı:


HTML <legend> etiketi

<legend> etiketi, <fieldset> öğesi için bir başlık tanımlar.

Örnek:

 

Kaynaklar

https://www.w3.org/TR/html52/sections.html#the-section-element

 

1 Yorum

  • arkadaşlar örnekler güzel fakat daha fazla olmasını rica ediyorum. Java script örneklerinin arttırılması lazım.Teşekkürler

Yorum yap