- HTML5 -

Site İçeriği

Html Nedir?
Temel Html Bilgileri
Html Ana Etiketleri
Html Head Etiketleri
Html Body Etiketleri
Bazı Örnekler

Html Nedir?

Html kısaca işaretleme dilidir. Html programlama dili olmadığı için bir program ya da web sitesi sadece Html ile yazılamaz. Html5 işaretleme dilinin son sürümüdür. Her Web sitesinde Html kodları vardır herhangi bir Web sitesine girip sağ tık incele derseniz sitenin Html ve daha birçok kodunu görebilirsiniz. Web sitesinin yalnızca iskeleti Html kodlarıyla yazılır. Buna birkaç örnek verecek olursak mesela bir insan vücudu düşünelim insan vücudunun temeli iskelettir ya da bir ev yapacağınızı düşünün ilk işiniz tuğlalarla bir yapı yapmak olur değil mi? İşte Html tam da bu tuğlalardan oluşan yapıdır ya da diğer örnekteki gibi insan vücudunun iskeletidir. Sadece Html bir Web sitesi için yeterli değildir ama aynı örneklerdeki gibi iskelet olmadan bir yapı tamamlanamaz. Html kullanılırken yazılan her kod kapanmak zorundadır. Html ile yazılan bir Web sayfası renklerden yoksun belirli bir düzen ve tasarımdan mahrumdur. Bu sayfada sadece html kodlarıyla yapılmış çok nadir yerlerinde CSS'den yararlanılmıştır. Sitenin renksizliğinin sebebi sadece Html kodları ile neler yapabileceğimizi az çok görmektir. Zaten CSS Web sitesinin renk ve ölçü yani atasarım bölümüdür geriye kalan temel öğelerin çoğunu yapan Html'dir. Peki Html kodları madem sitenin iskeletini yapmak için var bu sitenin iskeleti nedir? Gelin hep birlikte Html kodlarıyla neler yapabileceğimize bir Web sayfasının iskeletini nasıl çıkarabileceğimize bakalım.

Site İçeriğine Dön

Konu Anlatımına Dön

Temel Html Bilgileri
Bilgi Örnek Kod Bloğu Açıklama
< ... > < html > Html açma etiketleri büyüktür ve küçüktür işaretleri arasına yazılır.
< /... > < /html > Html kapama etiketleri ise etiket ismi yazılmadan önce slash konularak kapatırlır. Html'de açılan her etiket kapatılmak zorundadır.
< !--*--> < !--Head Kodları-- > Html'de yorum satırı ve metni yazmak için kullanılan etikettir.Yazılan proje kodlarına sonradan bakıldığında karışıklık olmasın diye satırların yanına sadece programcının gördüğü notlar alınır. Biz bunlara yorum satırı ya da metni deriz.
Blok div,footer,form,h,hr,li,nav,ol,p,pre,table,ul,video... Blok elemetleriyle yani blok etiketleriyle yazılan yazılar eklenen görseller sayfanızın genişlik olarak tamamını kaplamasa dahi, blok etiketleriyle yazıldıkları için kaplamış varsayılarak eklenen diğer yazı ya da görselleri bir alt satırdan başlatılır.
İnline Blok dışındakilerin neredeyse hepsi a,img,strong,b,br... İnline elementleriyle yani inline etiketleriyle yazılan yazılar eklenen görseller kapladığı yer kadar sayfanızda yer kaplar böylelikle eklediğiniz diğer yazı ya da görseller yan yana satır boyu devam eder.
İnline-Blok css kodları içine = display:inline-blok Bazen bazı blok elementlerinin alt alta gelmesi işimize yaramaz çünkü sayfamızı kötü gösterirler. Böyle durumlarda etikete inline-blok özelliği eklenerek blok elementlerinin inline elementleri gibi yan yana kullanılabilmesi sağlanır.

Site İçeriğine Dön

Html Ana Etiketleri
Etiket Örnek Kod Bloğu Açıklama
html < html >

kodlar

< /html >		 Kod sayfamıza html'i tanıtmak için açılıp kapanan koddur tüm kodlar bu açma kapama kodları arasına yazılır.
head < html >
< head >

kodlar

< /head >
< /html > 		Html'de sayfa 2 ana bölümden oluşur. Bu 2 bölümün ilki head bölümüdür. Head bölümünü kısaca tarayıcı bölümü olarak aklınızda tutabilirsiniz. Head bölümünde karakter setinizi belirleyebilir, sayfanızın telefonda açıldığında nasıl görüneceğini beliyecek kodlar yazabilir, seo ayarlarını yapabilir, style dosyanızı ekleyebilir, sayfanıza başlık ve ikon gibi özelliklerini girebilirsiniz. Sayfanızı tarayıcıya head etiketleri arasında tanıtırsınız.
body < html >
< head >

kodlar

< /head >
< body >

kodlar

< /body >
< /html >
Html'de 2. ana bölüm ise body bölümüdür. Body'de yazılıp eklenen herşey kullanıcının sayfayı açtığında gördükleridir.

Site İçeriğine Dön

Html Head Etiketleri
Etiket Örnek Kod Bloğu Açıklama
title < title > Html Öğreniyorum < /title > Başlık etiketidir. bu etiket arasına yazdığınız yazı sitenizin başlığıdır.
meta < meta name="..." content="..." > meta içinde sayfanızın tanıtımını yapabilirsiniz. Meta'nın name içine yazılan özelliğine göre content içine sayfa hakkında bilgi veriyoruz.
charset < meta charset="UTF-8" > Sayfanın karakter setini belirler mesela content özelliğine yazılan UTF-8 Türkçe karakter setidir.
http-equiv="" content="" < meta http-equiv="refresh" content="10" > Bu özellik sitenin kaç saniyede bir yenileneceğini belirleyen bir meta özelliğidir.
http-equiv="X-UA-Compatible" content="" < meta http-equiv="X-UA-Compatible" content="IE=Google" > Bu özellik sayfanızın hangi browser'a tanımlı olduğunu belirleyen meta özelliğidir.
viewport < meta name="viewport" content="width=device-with,initial-scale=1.0" > Sayfanın başka ekranlardaki boyut ayarını yapmak için kullanılan etikettir. Content özelliğine yazılan ölçülerle (width=device-with,initial-scale=1.0) bu mümkün olur.
keywords < meta name="keywords" content="..." > Sayfanın içeriğini oluşturan kelimelerin bulunduğu etikettir. Content özelliğinin içinde kelime kelime aralara virgül koyarak tarayıcıya sayfayı tanıtma etiketidir.
description < meta name="description" content="..." > Bu etiket sayfa hakkında bilgi veren temel etiketlerdendir. Content özelliğinin içinde tarayıcıya sayfanın özetini geçme işlemini yapacağımız etikettir.
author < meta name="author" content="..." > Sayfanın yapımcısının adı, iletişim bilgilerinin bulunduğu etikettir. Content içine bilgilerinizi aralarda virgülle yazarsanız bunu sadece kod sayfasını açanlar görebilir. Eğer siteniz beğenilmişse web sitesi tasarlamanız için sizinle iletişime geçebilirler.
link < link rel="stylesheet" href="" > Style dosyasını sayfaya tanımlamak için kullanılan etikettir. href özelliğinde bağlantı verilir. html uzantılı dosyayı nereye kayıt ederseniz css dosyasını da oraya kayıt etmelisiniz.

Site İçeriğine Dön

Html Body Etiketleri
Etiketler Örnekler Örnek Kod Bloğu Açıklama
h1

Başlık

 < h1 > Başlık < /h1 > h etiketleri genelde başlık etiketi olarak bilinir. h harfinin yanındaki sayı büyüdükçe başlığın boyutu küçülür. h etiketleri blok etiketleridir.
h2

Başlık

 < h2 > Başlık < /h2 >
h3

Başlık

 < h3 > Başlık < /h3 >
h4

Başlık

 < h4 > Başlık < /h4 >
h5
Başlık
 < h5 > Başlık < /h5 >
h6
Başlık
 < h6 > Başlık < /h6 >
p Html açıklamamız p etiketiyle yazılmıştır. < p > ... < /p > p etiketi paragraf etiketidir. Blok etiketi olduğu için p etiketi içine yazdığınız bir harf dahi olsa diğer yazınız alt satırdan başlar.
br Ali
Okula
Gidiyor		 Ali < br > Okula < br > Gidiyor br etiketi yazıyı bir alt satıra geçirme etiketidir. Siz kod kısmında alt alta da yazsanız sayfanızda b yan yana görünür. br etiketi bu durumu çözmemize yani alt satıra inebilmemize yardımcı olur. br etiketi kendinden kapanan etiketler arasındadır kapanmasına gerek yoktur.
hr Açıklamadan sonraki çizgi hr ile yapılmıştır. < hr > hr etiketi çizgi etiketidir. Sayfanıza enlemesine çizgi çekmek için kullanabilirisniz. hr etiketi de kendinden kapanan etiketlerdendir yeniden kapatmaya gerek yoktur.
strong Yazı < strong > Yazı < /strong > Yazılan yazıyı kalınlaştırmak için kullanılan etikettir.
b Yazı < b > Yazı < /b > Yazılan yazıyı kalınlaştırmak için kullanılan etikettir. Strong etiketiyle aynı işlevdedir.
i Yazı < i > Yazı < /i > Yazıyı italic yani eğik yazılmasını sağlayan etikettir.
mark Yazı < mark > Yazı < /mark > Yazılan yazının üzerini sarı renk ile çizmeye yarayan etikettir.
a href="..." Okulum < a href="https://akademik.adu.edu.tr/myo/aymes/default.asp" >
Okulum < /a >		 Yazılara ve resimlere istediğiniz linki vermek için kullanılan etikettir. target özelliği ile linki sayfanız içinde mi yoksa yeni bir sayfada mı açacağınızı belirleyebilirsiniz. target="_blank" diyerek farklı sayfada linkinizi açabilirsiniz, otomatik aynı sayfada açılması için ayarlanmıştır. Link etiketiyle çapa yöntemi de yapılabilir, çapa yöntemi sayfa içinde gezinmeye yarayan bir yöntemdir. Öncelikle karşımıza gelmesini istediğimiz yere a etiketi açıp href silinip yerine name yazılarak name içine bir isim verilir. İkinci olarak nereden gelmek istiyorsanız a etiketini oraya yapıştırın ve href içine başına "#" işareti koyarak name'e ne yazdıysanız onu yazıp a açma kapama etiketleri içine sayfada görünmesini istediğiniz yazıyı yazın. href özelliği girdiğiniz ve a açma kapama etiketleri arasına yazılmış yazıya tıklandığında name özelliği girdiğiniz a etiketini yapıştırdığınız yere gider. Çapa örneklerini "örnek için tıklayınız" yazılarında kullandım.
img src="..." alt="..." Örnek için tıklayın < img src="html.png" alt="Html Resmi" > img etiketi resim eklemek için kullanılan etikettir. src içine resmin kaynağı alt içine de resmin bulunamama durumunda yerine ne yazılması gerektiği yazılır. Ayrıca img etiketinin içinde width(genişlik) ve height(yükseklik) etiketleri de kullanılabilir. img'de kendinden kapanan etiketler arasındadır. hspace img etiketinin sağ ve sol taraflarından bırakılacak boşluğu ayarlamamıza, vspace ise img etiketini üst ve alttan bırakılacak boşluğu ayarlamamıza yardımcı olur.
center Örnek için tıklayın < center >...< /center > Bu etiket içine yazılan yazı ya da resimler sayfanızda ortalanır. Yeni sürüm yani Html5'de bu kod çalışmayabilir.
ol
  1. Aydın
  2. İzmir
  3. Muğla
 < ol >
< li > Aydın < /li >
< li > İzmir < /li >
< li > Muğla < /li >
< /ol > 		Ordinary List yani Sıralı listeler bazı yazıları madde madde sıralı bir şekilde sıralamak istediğimizde kullandığımız bir listeleme yöntemidir. ol etiketi oluşturulur içine "li" etiketleri ile liste elemanları yazılarak liste oluşturulur. Otomatik olarak sayılı gelir ama bunu type özelliği ile değiştirmek mümkündür mesela type="a" derseniz a'dan z'ye listenizin elemanlarını sıralayacaktır.
ul
  • Uşak
  • Afyonkarahisar
  • Denizli
 < ul >
< li > Uşak < /li >
< li > Afyonkarahisar < /li >
< li > Denizli < /li >
< /ul > 		Unordinary List yani Sırasız listeler ise liste maddelerini sıralamaz sadece nokta küp gibi özelliklerle listeler. ul etiketi de açılan etiketin içine "li" etiketi açılıp li etiketi içine maddeler yazılarak oluşturulur. ol etiketinde sayıları değiştirebildiğimiz gibi ul etiketinde de noktayı değiştirebiliriz. Yine type="square" yazdığımızda noktalar kare olacaktır.
table Örnek için tıklayınız < table >
< tr >
< th >Ege İlleri< /th >
< th >Plakaları< /th >
< /tr >
< tr >
< td >Aydın< /td >
< td >09< /td >
< /tr >
< tr >
< td >İzmir< /td >
< td >35< /td >
< /tr >
< /table > 		Table etiketi tablo oluşturma etiketidir. Açılan table etiketi içine tr etiketi açıp staır ekleriz bu tr etiketi içine açılmış th ya da td etiketleri ise sütun oluşturmamıza yardımcı olur. İç içe geçmiş bir yapı olduğu için biraz kafa karıştırabilir ama oluşrutması eğlenceli yapılar arasındadır bence. tr satır demiştik th tablo başlığı için kullanılır td ise tablo hücresine yazılan herhangi bir yazı için kullanılmaktadır. td ve th etiketlerinin büyüktür işaretinden önce rowspan="*" yazıp * yerine sayı yazarsanız sayı kadar satırı birleştirir. Eğer aynı yere colspan="*" yazıp * yerine sayı yazarsanız sayı kadar sütunu birleştirir. Ben rowspen özelliğini tablomun başlığını tek hücre yapmak için kullandım. cellspacing özelliği tablo hücrelerinin birbirinden ve tablo sınırlarından pixel türünde ayarlanmasını sağlar. cellpadding hücre içindeki verilerin,hücre uzaklığını ayarlar.
div Body'de yazılan çoğu kod div yani kutucuk içine yazılır. < div > ... < /div > Css'de yazılan classlar ile kullanılan web sitesinde kutucuk oluşturmayı sağlayan etikettir. Divler sayesinde kod blokları siteye daha düzenli yerleştirilebilir.
span Ela topu tut. Ela
< span style="color: red;" >
topu< /span >
tut.		 İnline elementidir. Arasına yazılan yazıya style kodu girmemizi sağlayan bir etikettir.
form Örnek için tıklayınız < form action="..." method="get" >

kodlar

< /form >		 Form etiketleri arasına yazılan input etiketleriyle Html ile form oluşturulur. İnput etiketleri kendinden kapanan etiketlerdir. Genel olarak iletişim bölümlerinde kullanılan bu formlar sayesinde kullanıcıların istek, şikayet ve görüşleri alınabilir. Method özelliği formun get ya da post yani kapalı ya da açık gönderilmesini sağlar. Action özelliği Form'da girilen bilgilerin değerlendirileceği url'yi belirlememizi sağlar.
input type="text" Ad:

1) Ad: < input type="text" >
2) < input type="text" placeholder="Soyad" > 		Ad ve Soyad gibi kullanıcıdan yazı biçiminde bilgi almak için kullanılan form etiketidir. İnput etiketine placeholder özelliği eklenirse veri girilene kadar placeholder'a yazılan yazı yer tutar. Örnek üzerinde deneme yapabilirsiniz. Maxlenght form içinde yazılacak yazının en fazla kaç karakter olacağını belirler. Required doldurulması zorunlu alandır input sonuna yazılan bir özelliktir.
input type="password" Şifre: Şifre:< input type="password" > Kullanıcıdan şifre almak ve şifre karakterlerini gizlemek için kullanılan koddur. Yazılan karakterler yıldız biçiminde gösterilir. Örnek üzerinde deneme yapabilirsiniz.
input type="email" E-mail: E-mail: < input type="email" > E-mail hesapını kullanıcıdan almak için kullanılan input etiketidir.
input type="checkbox" C#
Python
Java 		< input type="checkbox" > C#
< input type="checkbox" > Python
< input type="checkbox" > Java 		Bazen bazı durumlarda kullanıcılardan seçim yapmaları beklenir. Böyle durumlarda İnput'un checkbox özelliği kullanılır.
input type="radio" name="cinsiyetRadio"
input type="radio" name="cinsiyetRadio" 		Kadın
Erkek 		Kadın < input type="radio" name="cinsiyetRadio" checked="true" >
Erkek < input type="radio" name="cinsiyetRadio" > 		Kullanıcıya yalnız bir seçeneği seçtirmek isterseniz yani mesela örnekteki gibi cinsiyet seçimlerinde bir bireyin yalnızca birini seçmesi gerekirse input'un type özelliği radio olarak değiştirirseniz sadece birinin seçileceği bir seçenek listesi oluşturabilirsiniz. İnput radio'yu kullanırken tüm seçeneklere aynı name'i vermezseniz birden fazla seçenek seçilir bu durum istediğimiz birşey değildir. Dolayısıyla tüm seçeneklere aynı name verilmek zorundadır. Checked özelliğini true yaparsanız seçeneklerden biri seçili gelir ve kullanıcı seçeceği seçeneğe göre seçili seçeneği değiştirebilir.
input type="file" Dosya: Dosya:< input type="file" > Kullanıcının dosya eklemesini mümkün kılan etikettir.
input type="submit" value="Gönder" input type="reset" value="Temizle" < input type="submit" value="Gönder" >
< input type="reset" value="Temizle" > 		Yazılan formu gönderme ve formu temizleme butonu oluşturmaya yarayan input etiketidir.
textarea name="mesajInput" id="mesajAlani" cols="px" rows="px" Mesaj Kutusu: Mesaj Kutusu:
< textarea name="mesajInput" id="mesajAlani"
cols="20px" rows="10px" > < /textarea > 		Belirlenen cols ve rows ölçülerinde bir mesaj kutusu oluşturan input etiketidir.
select < select name="Aydın" id="İlçeler" >
< optgroup label="İlçeler" >İlçeler< /optgroup >
< option value="İncirliova" >İncirliova< /option >
< option value="Efeler" >Efeler< /option >
< option value="Koçarlı" >Koçarlı< /option >
< /select > 		Özellikle adres bilgilerinde il ilçe gibi seçimlerde hamburger menü olarak tanımladığımız açılır menüler devreye girer. select etiketleri içine option etiketi yazılır ve value olarak görünmesini istediğimiz değeri yazarız aynı değeri option etiketini kapatmadan önce de yazarız ki yazdığımız değer hamburger seçim listemizde görünsün. İstediğimiz kadar değer girebiliriz. Optgroup özelliği hamburger menüye başlık girmemizi sağlar.
input type="date" Doğum Tarihi: Doğum Tarihi: Doğum tarihi gibi bazı durumlarda kullanıcıdan tarih almamız gerekir. type özelliğini date yaptığımızda tarih girilebilir hale gelir.
video Örnek için tıklayınız < video src="" > < /video > Video ekleme etiketidir. Bağlantı yoluyla video eklemeye yarar. Video etiketi içine bağlantı girildikten sonra width(en) ve height(boy) özelliği girilebilir. Ayrıyeten video kontolü için video etiketi içine controls yazılması video kontrolünü kullanıcının yapmasını sağlar.
source Örnek için tıklayınız < source src="" type="" > Video ve müzik ekleme etiketidir. Dosyayoluyla eklenir type özelliğiyle de video mu ses mi gibi tipi belirlenir. Video ise Video etiketleri arasına ses ise audio etiketleri arasına yazılır.
iframe Örnek için tıklayınız < iframe src="" frameborder="0" >< /iframe > Youtube ya da başkasının web sitesinden video eklemeye yarayan etikettir. Frame border yani çerçeve eklenebilir. En ve boyu ayarlanabilir.
pre 
 HTML 
    HTML
        HTML
                
< pre >
  HTML
    HTML
        HTML
            < /pre >
Pre etiketi içine yazılanları nasıl yazdıysanız o şekilde sayfanızda göstermenize yarayan etikettir.
& nbsp ; H T  M   L H & nbsp ; T & nbsp ;& nbsp ;
M & nbsp ;& nbsp ;& nbsp ; L		 nbsp harf,metin,resim neyi istersek aralarında birer birim boşluk bırakmamıza yardımcı olur.
fieldset
Html Öğreniyorum.
< fieldset >
Html Öğreniyorum
< /fieldset > 		Yazılan yazıya çerçeve çizmek için kullanılan etikettir.
marquee Örnek tablonun altındadır. < marquee behavior="alternate" direction="right" >
Html öğreniyorum. Kendi Web Sitemi yapıyorum...
< /marquee > 		Marquee etiketi kayan yazı etiketidir. behavior yazının sağdan sola soldan sağa kaymasını sağlar. direction özelliği ise belirtilen yönden kaymayı başlatan özelliktir.

Site İçeriğine Dön

Html öğreniyorum. Kendi Web Sitemi yapıyorum...

Bazı Örnekler


Html Resmi Html Resmi 2
İmg etketiyle Resim eklenmiştir.                 İmg etiketi İnline Olduğu İçin 2.si yanına gelmiştir.        Konu Anlatımına Dön

Html Resmi3
Center etiketi ile resim ekleme     Konu Anlatımına Dön


Video etiketi ile eklenmiştir.     Konu Anlatımına Dön




Video için video, ses için audio etiketleri içine source ile yerleştirilmiştir.    Konu Anlatımına Dön



İframe ile youtube'dan video eklenmiştir    Konu Anlatımına Dön

İletişim Formu











Konu Anlatımına Dön

Site İçeriğine Dön

Zamanınızı Ayırdığınız İçin Teşekkürler. Nazmiye Filiz :)