İ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 Kodları ve Anlamları
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.
Bu makale aşağıdaki konuları içermektedir.
İçindekiler
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
İçeriği Gruplama Etiketleri
Metin Düzenleme Etiketleri
Gömülü içerik Etiketleri
Tablodaki HTML kodlarını, aşağıda başlıklar halinde HTML Kodları Anlamları ve HTML Kodları Örnekleri şeklinde daha detaylı olarak bulabilirsiniz.
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.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <title>Ben tarayıcıda görünen başlık metniyim :)</title> </head> <body> <h1>Bu bir Başlık</h1> <p>Bu da benim ilk paragrafım. Merhaba HTML. Merhaba Dünya</p> </body> </html> |
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 VSCODE 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:
1 2 3 | <!-- Yorumunuzu buraya yazın --> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <article vocab="http://schema.org/" typeof="Article"> <header> <h2 property="name">Hayatın İlk Kuralı</h2> <p property="datePublished"><time datetime="2016-02-28">3 gün önce</time></p> </header> <div property="articleBody"> <p>Yakınınızda bir mikrofon varsa, sıcak olduğunu ve ne diyorsan dünyaya gönderiyorum. Ciddi anlamda.</p> <p>...</p> </div> <footer> <a href="?yorumlar=1">Yorumları göster ...</a> </footer> </article> |
Başka bir örnek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <article> <header> <h2><a href="#">Şort giyme hakkında kısa not</a></h2> <p>Doe Joe tarafından 10 Şubat 2016 Çarşamba tarihinde gönderildi. <a href="https://siteadi.com/#yorumlar">6 yorum</a></p> </header> <p>Diğer bir gezgin ilginç bir soru sordu: Neden şort giymiyorsun? uzun? Kişi zaman olarak culottes giyiyordu, bu yüzden doğada eşitlik sorununu düşündüm. ancak sorgulayıcının giysisinin şüpheli olmasına rağmen dürüst bir cevap vermeye çalıştım. </p> <p> Kısa cevap, şort giymekten hoşlandığım, uzun cevap ...</p> <p><a href="https://siteadi.com/notlar">Okumaya devam et: Kısa not giyen şort</a></p> </article> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <article> <header> <h2>Elmalar</h2> <p>Lezzetli, lezzetli meyveler!</p> </header> <p>Elma, elma ağacının görkemli meyvesidir.</p> <section aria-label="Kırmızı elmalar."> <h3>Kırmızı Lezzetli</h3> <p>Bu parlak kırmızı elmalar birçok ülkede bulunanlardan en yaygın olanlarıdır. süpermarketler.</p> </section> <section aria-label="Yeşil elmalar."> <h3>Doe Joe</h3> <p>Bu sulu, yeşil elmalar harika bir dolgu oluşturur. Elmalı turta.</p> </section> </article> |
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.
1 2 3 4 5 6 7 8 | <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <body> <h1>Bir Sayfa Örneği</h1> <nav> <ul> <li><a href="/">AnaSayfa</a></li> <li><a href="/events">Etkinlikler</a></li> ...more... </ul> </nav> <article> <header> <h2>Örnek Bir Yazı Başlığı</h2> <p>yazar ile ilgili detaylar</p> </header> <nav> <ul> <li><a href="#genel">Genel Bilgi</a></li> <li><a href="#diger">Diğer Bilgiler</a></li> ...more... </ul> </nav> <div> <section id="genel"> <h2>Genel Bilgi</h2> <p>...daha...</p> </section> <section id="diger"> <h2>Diğer Bilgiler</h2> <p>...daha...</p> </section> ...daha... </div> <footer> <p><a href="?duzen">Düzenle</a> | <a href="?sil">Sil</a> | <a href="?incele">İncele</a></p> </footer> </article> <footer> <p><small>© orneksayfalar.com</small></p> </footer> </body> |
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.
1 2 3 4 5 6 7 | <p>Örnek bir yazı...</p> <aside> <h4>yazı başlığı</h4> <p>Yazı detayı .. .... ...</p> </aside> |
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.
1 2 3 4 5 6 7 8 9 10 | <article> <header> <h1>En Önemli Başlık</h1> <h3>Daha az önemli başlık</h3> <p>birşeyleri de buraya yazabiliriz</p> </header> <p>Lorem Ipsum dolor set amet....</p> </article> |
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.
1 2 3 4 5 6 7 | <footer> <p>Yazar: Hayri Hay</p> <p>İletişim: <a href="mailto:epostam@mail.com"> epostam@mail.com</a>.</p> </footer> |
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ı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> </head> <body> <h1>BAŞLIK 1</h1> <h2>BAŞLIK 2</h2> <h3>BAŞLIK 3</h3> <h4>BAŞLIK 4</h4> <h5>BAŞLIK 5</h5> <h6>BAŞLIK 6</h6> </body> </html> |
HTML <p> Etiketi – HTML Paragraf Ekleme
HTML sayfalarına paragraf eklemek için <p> </p> etiketi kullanılır.
HTML Paragraf Ekleme Kodları:
1 2 3 4 | <p>Bu bir paragraftır.</p> <p>Bu ikinci paragraftır.</p> |
1 2 3 4 5 6 7 8 9 10 | <fieldset> <legend>Kişisel bilgi</legend> <p> <label>İsim: <input name="n"></label> <label><input name="anon" type="checkbox"> Diğer kullanıcılardan gizle</label> </p> <p><label>Adres: <textarea name="a"></textarea></label></p> </fieldset> |
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.
1 2 3 4 5 6 7 8 | <address> <p>Name: Doe Joe</p> <p>Çıkmaz sk. No:10</p> <p>Çankaya / Ankara</p> ... </address> |
1 2 3 4 5 6 7 8 9 | <address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> |
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
1 2 3 4 5 6 7 | <p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> |
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:
1 2 3 4 5 6 7 | <pre> merhaba dünya bu bir yazı m e r h a b a </pre> |
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.
1 2 3 | <p><blockquote>Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. </blockquote>Çevrimiçi Video'ya tıkladığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. </p> |
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.
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.
“I” harfi yerine küçük”i” harfi yazılırsa, sıralama i, ii, iii,…. şeklinde küçük roma
rakamları ile yapılacaktır.
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.
İç İç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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Liste Örnekleri-1</title> </head> <body> <ol> <li> İŞLEMCİ <ol> <li>INTEL</li> <li>AMD</li> </ol> </li> <li> HDD <ol> <li>Seagete <ol type="a"> <li>SSD</li> <li>SATA</li> </ol> </li> <li> Western Digital </li> </ol> </li> <li> RAM </li> </ol> </body> </html> |
Ekran çıktısı:
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:
1 2 3 4 5 6 7 | <ul> <li>Kahve</li> <li>Çay</li> <li>Süt</li> </ul> |
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:
1 2 3 4 5 6 7 8 | <dl> <dt>Kahve</dt> <dd>Sade Kahve</dd> <dt>Süt</dt> <dd>Sütlü Soğuk Kahve</dd> </dl> |
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:
1 2 3 4 5 6 7 8 | <dl> <dt>Kahve</dt> <dd>Sade Kahve</dd> <dt>Süt</dt> <dd>Sütlü Soğuk Kahve</dd> </dl |
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:
1 2 3 4 5 6 7 8 | <dl> <dt>Kahve</dt> <dd>Sade Kahve</dd> <dt>Süt</dt> <dd>Sütlü Soğuk Kahve</dd> </dl> |
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:
1 2 3 4 5 | <figure> <img src="resim.jpg" alt="Örnek bir resim" width="304" height="228"> </figure> |
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:
1 2 3 4 5 6 | <figure> <img src="kaplumbaga.jpg" alt="Caretta carettalar" style="width:100%"> <figcaption>Denizlerde yaşayan eşsiz canlılar</figcaption> </figure> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <main> <h1>Web Tarayıcıları</h1> <p>Google Chrome, Firefox, ve Internet Explorer günümüzde en sık kullanılan tarayıcılardır.</p> <article> <h1>Google Chrome</h1> <p>Google Chrome 2008 yılında GOOGLe şirketi tarafından geliştirilmeye başlanmış bir tarayıcıdır</p> </article> <article> <h1>Internet Explorer</h1> <p>Internet Explorer 1995 yılında Microsoft tarafından geliştirilmeye başlanmıştır.</p> </article> <article> <h1>Mozilla Firefox</h1> <p>Firefox 2004 yılından Mozilla tarafından geliştirilmeye başlanmış bir tarayıcıdır.</p> </article> </main> |
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.
1 2 3 4 5 | <div style="width:50%;background-color:#FDFDDB;border:3px solid #C4C401;padding:5px;"> <p><q>Mutluluk çoğu zaman açık bıraktığınızı bilmediğiniz bir kapıdan gizlice girer.</q> Söz:<cite>John Barrymore</cite></p> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <article lang="en-US"> <h2>My use of language and my cats</h2> <p>My cat’s behavior hasn’t changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p> <div lang="tr-TR"> <p>Siyah ve beyaz renkli olan diğer kedim, çok tatlı. Takip etti Bizi bugün havuza, bizimle birlikte kaldırıma doğru yürüyoruz. Dün Görünüşe göre komşularımızı ziyaret etti. Acaba bunu biliyor mu? düzlükleri bizim ayna görüntüsümüzdür.</p> <p>Hm, az önce fark ettim ki son paragrafta İngilizceyi kullandım İngilizce. Ama Amerikan İngilizcesi yazmam gerekiyor. Yani ben "kaldırım" veya "düz" veya "renk" dememeli ...</p> </div> <p>"Kaldırım" ve "apartman" ve "renk" demeliyim!</p> </article> |
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:
1 2 3 | <a href="https://www.yazilimkodlama.com/" target="blank">Anasayfaya Gidin.</a> |
Kodlar çalıştığında aşağıdaki gibi olacaktır.
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.
1 2 3 4 5 | <a href="mailto:ornek@hotmail.com">Örnek Adlı kişinin mail adresi</a> <a href="+902121001010">Benim Numaram Değil (+902121001010)</a> |
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.
1 2 3 | <em>vurgulu yazı</em> |
HTML <small> Etiketi
<small> etiketi, daha küçük metni (ve diğer yan yorumları) tanımlar.
1 2 3 4 | <p>Yazılım Kodlama, web tasarımı ve programlama konusunda yazılar içerir.</p> <p><small>Sitede daha fazla bilgi bulabilirsiniz.</small></p> |
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.
1 2 3 4 | <p><s>Benim sitemin adı ahmetcansever.com'dur</s></p> <p>Benim Sitemin adı yazilimkodlama.com'dur</p> |
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.
1 2 3 | <p><cite>NUTUK</cite> Kültür Bakanlığı Yayınevi tarafından yayınlanmıştır.</p> |
HTML <q> Etiketi
<q> etiketi alıntı etiketinin kısa yazımıdır.
Tarayıcılar normalde tırnak işaretleri ekler.
1 2 3 4 5 | <p>Tolsyoy'un değine göre: <q>Uzak ve imkansız gözüken bir şey, bir anda yakın ve mümkün olabilir.</q> Ne denebilir ki hayat süprizlerle doludur.</p> |
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:
1 2 3 | <p><dfn>HTML</dfn> Web tasarımı için kullanılan işaretleme dilidir.</p> |
1 2 3 | <p><dfn title="HyperText Markup Language">HTML</dfn> web tasarımı işaretleme dilidir.</p> |
1 2 3 | <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> web sayfası işaretleme dilidir.</p> |
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.
1 2 3 | Web Tasarım ve Programlama Dersi <strong>HTML</strong> Örnekleri |
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.
1 2 3 4 5 | <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> |
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.
1 2 3 4 5 | <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> |
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.
1 2 3 4 5 | <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <ruby> <rb>旧 <rb>金 <rb>山 <rt>jiù <rt>jīn <rt>shān <rtc>San Francisco </ruby> |
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:
1 2 3 4 5 6 7 | <ul> <li><data value="53">Domates</data></li> <li><data value="54">Patates</data></li> <li><data value="55">Kabak</data></li> </ul> |
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.
1 2 3 4 | <p>Hergün <time>10:00</time>'dan sonra açığız</p> <p>Yapılacak etkinlik 1:<time datetime="2016-04-23 10:00">Ulusal Egemenlik ve Çocuk Bayramı Programı</time>.</p> |
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.
1 2 3 4 5 6 7 8 | <em>Emphasized yazı</em><br> <strong>Güçlü yazı</strong><br> <code>Biraz kod parçası</code><br> <samp>Örnek yazı</samp><br> <kbd>Klavye çıktısı</kbd><br> <var>Değişken</var> |
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.
1 2 3 | 2<sup>4</sup> = 2 x 2 x 2 x 2 |
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.
1 2 3 | Bitkiler gündüz CO<sub>2</sub> alır, O<sub>2</sub> verirler. Gece ise O<sub>2</sub> alır, CO<sub>2</sub> verirler. |
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.
1 2 3 | Bu etiket ile istenen metnin <b>bold (kalın)</b> olarak yazılması sağlanır. |
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.
1 2 3 | Web Tasarım ve Programlama Dersi <i>HTML</i> Dersleri |
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ı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> </head> <body> <h1>İSTİKLAL MARŞI</h1> <p>Korkma, sönmez bu şafaklarda yüzen al sancak;<br> Sönmeden yurdumun üstünde tüten en son ocak.<br> O benim milletimin yıldızıdır, parlayacak;<br> O benimdir, o benim milletimindir ancak.<br> </p> </body> </html> |
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;
1 2 3 | <img src="tablo.jpg" alt="HTML Tablo Örneği"> |
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.
1 2 3 | <iframe width="500" height="300" src="https://www.yazilimkodlama.com"></iframe> |
HTML <embed> Etiketi
<embed> etiketi, harici bir uygulama veya etkileşimli içerik için bir eklenti tanımlar (plug-in).
Örnekler:
1 2 3 4 5 6 | <embed type="video/webm" src="/media/ornek/cicek.mp4" width="250" height="200"> |
1 2 3 | <embed src="elvedaflash.swf"> |
1 2 3 4 5 | <embed type="video/quicktime" src="/tasarim/video.mov" style="width:100%;"> |
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:
1 2 3 4 5 | <object data="/sayfalar/calisma.html" width="350" height="95"></object> |
1 2 3 4 5 | <object data="dosya.pdf" type="application/pdf"> <embed src="dosya.pdf" type="application/pdf" /> </object> |
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:
1 2 3 4 5 6 | <object data="/music/ses.wav"> <param name="controller" value="true"> <param name="autoplay" value="false"> </object> |
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.
1 2 3 4 5 | <video src="/video/ornek.mp4" width="170" height="85" controls> <p>Tarayıcınız HTML5 standartlarını desteklemiyor</p> </video> |
1 2 3 4 5 6 7 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Tarayıcı desteklemezse bu yazı gösterilecektir. </video> |
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:
1 2 3 4 5 6 | <audio controls> <source src="ses.mp3" type="audio/mpeg"> Tarayıcı desteklemezse bu uyarı gösterilecek. </audio> |
İ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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> </head> <body> <h2>HTML Tablolar</h2> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Ergül</td> <td>50</td> </tr> <tr> <td>Ayşe</td> <td>Türk</td> <td>45</td> </tr> <tr> <td>Fatma</td> <td>Duru</td> <td>30</td> </tr> </table> </body> </html> |
İ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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Ergül</td> <td>50</td> </tr> <tr> <td>Ayşe</td> <td>Türk</td> <td>45</td> </tr> <tr> <td>Fatma</td> <td>Duru</td> <td>30</td> </tr> </table> |
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.
1 2 3 4 5 6 7 | <form> . form elemanları . </form> |
<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.
1 2 3 | <form action="/action_page.php" method="get"> |
1 2 3 | <form action="/action_page.php" method="post"> |
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:
1 2 3 4 5 6 7 8 9 10 11 | <form action="/sayfa.php"> <label for="kadin">Kadın</label> <input type="radio" name="cinsiyet" id="kadin" value="k"><br> <label for="erkek">Erkek</label> <input type="radio" name="cinsiyet" id="erkek" value="e"><br> <label for="diger">Belirtmek İstemiyorum</label> <input type="radio" name="cinsiyet" id="diger" value="d"><br><br> <input type="submit" value="Kaydet"> </form> |
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:
1 2 3 4 5 6 7 8 | <form> Adı:<br> <input type="text" name="ad"><br> Soyadı:<br> <input type="text" name="soyad"> </form> |
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.
1 2 3 4 5 6 7 8 9 | <form action=""> Kullanıcı:<br> <input type="text" name="kadi"> <br> Şifre:<br> <input type="password" name="sifre"> </form> |
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.
1 2 3 4 5 6 | <form> <input type="radio" name="cinsiyet" value="erkek" checked> Erkek<br> <input type="radio" name="cinsiyet" value="kadin"> Kadın<br> </form> |
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.
1 2 3 4 5 6 7 8 9 10 11 | <form action="/action_page.php"> <input type="checkbox" name="dil1" value="ing">İngilizce <br> <input type="checkbox" name="dil2" value="fr">Fransızca <br> <input type="checkbox" name="dil3" value="alm">Almanca <br><br> <input type="submit"> </form> |
Button <input type=”button”> :
Buton oluşturmak için kullanılır.
1 2 3 | <input type="button" onclick="alert('www.yazilimkodlama.com')" value="TIKLA!"> |
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.
1 2 3 4 5 6 7 8 9 | <form action="action_page.php"> Ad:<br> <input type="text" name="ad" value="Ahmet"><br> Soyad:<br> <input type="text" name="soyad" value="Cansever"><br><br> <input type="submit" value="GÖNDER"> </form> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 | <form action="/action_page.php"> Ad:<br> <input type="text" name="ad" value="Mickey"> <br> Soyad:<br> <input type="text" name="soyad" value="Mouse"> <br><br> <input type="submit" value="Gönder"> <input type="reset"> </form> |
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.
1 2 3 4 5 6 7 8 | <select name="dersler"> <option value="web">Web Tasarım</option> <option value="veri">Veri Tabanı</option> <option value="grafik">Grafik Animasyon</option> <option value="protem">Programlama Temelleri</option> </select> |
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:
1 2 3 4 | <textarea name="mesaj" rows="10" cols="30"> </textarea> |
HTML Form Örnekleri Sayfasına Gitmek İçin TIKLA
<progress>Etiketi
<progress> etiketi bir görevin ilerlemesini gösterir.
1 2 3 | <progress value="22" max="100"></progress> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 | <form action="/action_page.php"> <fieldset> <legend>Personel Bilgileri :</legend> Adı:<br> <input type="text" name="ad" ><br> Soyadı:<br> <input type="text" name="soyad" ><br><br> <input type="submit" value="Gönder"> </fieldset> </form> |
Ekran Çıktısı:
HTML <legend> etiketi
<legend> etiketi, <fieldset> öğesi için bir başlık tanımlar.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <form> <fieldset> <legend>Kişisel Bilgiler:</legend> İsim: <input type="text" size="30"><br> Eposta: <input type="text" size="30"><br> Doğum Tarihi: <input type="text" size="10"> </fieldset> <fieldset> <legend>Adres Bilgileri:</legend> Adres 1: <input type="text" size="30"><br> Adres 2: <input type="text" size="30"> </fieldset> </form> |
Kaynaklar
https://www.w3.org/TR/html52/sections.html#the-section-element
Selam!
Maşallah a!
“Elhemdulilleh!”
İyi, güzel!
Kolaylıklar olsun!
Gayet iyi,
Emeği geçenlere çok Tşk.Ederim
Emeği geçen herkese teşekkürler güzel bir bilgi
teşekkür ederim
çok teşekkürler
arkadaşlar örnekler güzel fakat daha fazla olmasını rica ediyorum. Java script örneklerinin arttırılması lazım.Teşekkürler