­čĺ» HTML Kodlar─▒ ve ├ľrnekleri – Web Tasar─▒m & Programlama
HTML DERSLER─░

­čĺ» HTML Kodlar─▒ ve ├ľrnekleri

─░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.

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    

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.

 

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

 

2 Yorum

Yorum yap

Sayfam─▒z─▒ YouTube'da da takip etmek ister misiniz?
Holler Box