HTML Nedir?

HTML (Hyper Text Markup Language) internet ortamında gönderdiğimiz metin belgeleri için işaretleme dilidir. HTML'in amacı bir internet sayfasının kullanıcıya nasıl gösterilmesi gerektiğini belirlemektir. HTML, bir programlama dili olarak tanımlanamaz. HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.

HTML birçok programalam dili ile birlikte kullanılabilen bir işaretleme dilidir. Özellikle web programlama dilleri olan ASPX ve PHP dilleri ile bütünleşik çalışabilmektedir.

Versiyon Yıl

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

HTML Temel Kavramlar

HTML Dosyası Nedir?

HTML, Hyper Text Markup Language'in kısaltmasıdır. HTML kodlamalar (tag) ve düz metinden oluşur. Taglar ancak bir Web Browser (Firefox, IE, Chrome) tarafından anlamlı hale gelirler. HTML kodlarıyla yazılmış dosyaların uzantıları html veya htm'dir. HTML, en basit yolla bir not defteri ile yazılabilir.

HTTP Nedir?

HTTP (Hyper Text Transfer Protocol) HTML sayfalarının internet ortamında yayınlanmasını sağlayan bir protokoldür. Browser'larınızın adres satırına baktığınızda ilk önce http:// ifadesi görünmektedir. Bu ifade sayfanın http protokolü üzerinden görüntülenmekte olduğunu belirtir.

FTP Nedir?

FTP (File Transfer Protokol) Uzaktaki bilgisayarların aralarında doğrudan dosya göndermelerini sağlayan bir protokoldür. FTP sayesinde bilgisayarımızdaki bir dosyayı uzaktaki bir bilgisayara gönderebiliriz.

WWW Nedir?

WWW (World Wide Web) Geniş Dünya Ağı anlamına gelen dünyadaki bilgisayarların birbirleriyle iletişim kurabildiği, veri paylaşımının yapılabildiği global bir network'dür. Bu network'e bağlı olan milyarlarca bilgisayar web sayfalarını düzenleyip belirli bir sunucu üzerinden yayın yaparlar. Her web sayfasının kendine ait www ile başlayan bir adresi vardır. Bu adresleri İnternet Gezginleri (Browsers : IExplorer, Firefox, Chrome) ile görüntüleyebildiğimiz yazılımlar vardır.

URL Nedir?

URL (Uniform Resource Locator) İnternet ortamında gidilecek olacan adresin ifadesidir.

HTML, en basit yolla bir not defteri ile yazılabilir. Fakat not defteri ile web sayfası oluşturmak oldukca zaman alıcı ve yorucu olabilir. Bu nedenle hata kontrolü yapabilen, tablo ve yerleşim konusunda hazır araçlar sunabilen, oluşturma aşamasında sihirbazlarla çalışmaya olanak sağlayan birçok Web Tasarım Editörü ortaya çıkmıştır. Profesyonel anlamda HTML çalışmak istiyorsanız mutlaka not defteri (tercihen notepad++) kullanmanızı tavsiye ediyorum.

Popüler Web Tasarım Editörleri

• Adobe Dreamweaver • Amaya W3C's Editor • RapidWeaver • WYSIWYG Web Builder • CoffeeCup HTML Editor • Notepad++

HTML Sayfasının Yapısı

gövde

: Sayfamızın ana etiketidir.

: Sayfamıza ait başlık, meta, stil gibi tanımlamaları yapacağımız bölümdür. : Sayfamızın başlığını bu etiket ile belirleriz.

: Sayfamızın gövdesidir. İçeriğimizi burada oluştururuz.

İlk Web Sayfam

HTML sayfaları aslında birer metin dökümanlardır. Windows'un not defteri yada notepad++ tarzı metin editörlerini kullanılarak kod yazılabilir. Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp test.html olarak kaydedin. Ve bu dosyayı bir browser ile görüntüleyin.

ilk web sayfam...

HTML Görünümü

Örneğin Açıklaması

html tagları browser'mıza bir html dosyasının işleneceğini bildirir. Sayfamızdaki son tag 'dir. Bu da html dosyasının sonunun geldiğini ifade eder.

head tagları başlık bilgilerini içerir.

title tagları sayfamızın başlık bilgilerini içerir. buradaki başlık tarayıcı penceresinin en üstünde görüntülenmektedir.

tagları browser penceresinde görüntülenecek olan kısmı belirtir.

HTML Tag'ları

• HTML öğelerini belirtmek için kullanılır. • HTML etiketleri 2 karakter ile sınırlanır ve çift olarak kullanılır. • Bu çiftlerden birincisine start tag, ikincisine ise end tag denir. • Başlama ve bitiş arasında kalan herşeye ise element contents denir. • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani ve aynı görevi görür.

Start tag End tag

World Wide Web Consortium (W3C) küçük harf kullanımını önerir.

HTML Elementler

Başlangıç etiketi ile bitiş etiketi arasında yer alan her şeye HTML element denir.

• HTML elementi başlangıç etiketi ile başlar bitiş etiketi ile biter. • Başlangıç etiketi ve bitiş etiketi arasında yer alan herşeye HTML elementi denir. • Bazı HTML elementlerinin içeriği boştur. Bu elementler başlangıç etiketi ile kapatılır. • Birçok HTML elementi attribute içerir. • HTML elementleri içlerinde bir çok HTML elementleri içerebilirler. • HTML belgeleri iç içe geçmiş elementlerden oluşur.

Basit Kodlar - HTML Başlıklar

HTML başlıkları

aradaki tüm rakamlar kullanılarak tanımlanabilir.

Bu bir başlık

Bu bir başlık

Bu bir başlık

Bu bir başlık Bu bir başlık

Bu bir başlık

Basit Kodlar - HTML Paragraflar

HTML paragrafları

etiketi ile tanımlanır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

Bu bir paragraf

Bu da başka bir paragraf

HTML Görünümü

Bu bir paragraf

Bu da başka bir paragraf

Basit Kodlar - HTML Linkler

HTML bağlantıları etiketi ile tanımlanır.

Link ornegi HTML Görünümü Link ornegi

Basit Kodlar - HTML Resimler

HTML'de resimler etiketi ile tanımlanır. etiketi kapalıdır, bu etiket parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

HTML Görünümü

Basit Kodlar - HTML Özellikler

• İngilizcede “attributes” denir, dilimizde ise özellik veya öznitelik denir. • HTML elementlere/etiketlere ilave bilgi sağlarlar. • Öznitelikler her zaman başlangıç/açılış etiketinde olur. • Öznitelikler isim ve değer (name=”value”) olarak iki kısımdan oluşur., •

ise en küçük puntoyu belirtir.

HTML bağlantıları etiketi ile tanımlanır.

Link ornegi

HTML Görünümü

Link ornegi

Bağlantı adresleri href özniteliği ile belirtilir. Öznitelik değerleri her zaman çift tırnak arasında olur. Bir değer arasında zorunlu olarak çift tırnak işareti varsa tek tırnak ile yazılabilir.

Bazı HTML öznitelikleri: class: Bir element için bir veya birden fazla sınıf belirtir. id: Bir element için benzersiz bir kimlik belirler. style: Element için bir satır içi CSS stili belirler. title: Element için ilave bilgi sağlar.

HTML Biçimlendirme

Biçimlendirme

Web sayfalarındaki en temel unsurlardan biride metinlerdir. Bu dersimizde HTML sayfamızdaki metinleri biçimlendirirken (kalınlık, italik yazma, vurgu, vb.) kodlardan nasıl yararlanabileceğimizi göreceğiz.

ve etiketleri : Kalın veya italik metin gibi, biçimlendirme çıkışı için ve etiketleri kullanır.

etiketi : Yine etiketi gibi kalın olarak biçimlendirme çıkışı sağlar. Fakat ve etiketleri, okuyucu için sayfayı tarayıcıda görsel olarak izlerken herhangi bir farklılık yaratmamasına karşın ikisi de sonuçta yazının kalın görünmesini sağlar. Ayrıldıkları nokta şudur etiketi sadece yazının stilini değiştirir. etiketi ise, yazının stilini değiştirmekle kalmayıp, ona önem katar. Arama motorları sayfayı indekslerken takıları arasındaki kelimelerin, diğer kelimeler ile karşılaştırıldığında daha önemli olduğunu varsayar. Aynı şekilde, sayfayı bir okuma yazılımına okutursanız, takıları arasındaki kelimeleri daha yüksek sesle okuduğunu görebilirsiniz. Diğer yandan takısının böyle bir işlevi yoktur, tek yaptığı yazıyı kalın göstermedir.

(emphasize) etiketi : İçerdiği metnin italik gösterilerek öneminin vurgulanmasını sağlar.

etiketi : İçerdiği metnin bilgisayar kod parçası olduğunu belirtir.

etiketi gibi metin bloklarının içinde kullanılması durumunda blok ile uyumlu gösterilerek, metni kesintiye uğratmaz. İçerdiği metin sabit genişlikli yazı tipi ile gösterilir.

_{(subscript) ve ^{(superscript> etiketleri : İçerdiği metnin güncel fontun ufak puntosu ile normal karakterlerin biraz altında alt yazı olarak gösterilmesini sağlar. Aynı şekilde kullanımı satır yüksekliğini normal karakterlerin biraz üstünde bir üst yazı olarak gösterilmesini sağlar.}}

Etiketlerin bir arada kullanım örneği

Kalın bir metin

Güclü bir metin

Saga yatık bir metin

Vurgulanmis bir metin

Programlama dili metni

Bu metin _altsimge ve ^{üst simge}

HTML Görünümü

Kalın bir metin Güclü bir metin Saga yatık bir metin Vurgulanmis bir metin Programlama dili metni üst simge Bu metin altsimge ve

Metin Biçimlendirme Etiketleri

Kalın Metin Vurgulanmış Metin İtalik Metin Küçük Yazı Güçlü Metin _{Alt hizada yazmak ^{Üst hizada yazmak Altı çizgili metin Üstü çizgili metin İşaretlenmiş metin}}

Programlama Dilleri Etiketleri

Programlama dili metini Klavye metini Örnek bilgisayar kodu metni Tele tip metin Değişken

 Biçimlendirilmemiş metin 
HTML Atıf, Alıntı ve Tanım Etiketleri 
 Kısaltma  Baş harfleri ile kısaltma 
 Adres öğesi  Metin yönü 
 Uzun alıntı  Kısa alıntı  Alıntı  Tanımlama terimi 
 etiketi : Bir alt satıra geçmeyi sağlamaktadır. Bu etiket kullanılmazsa tüm yazılar ve nesneler yatay bir şekilde ard arda gelecektir. Şimdi, HTML p etiketi ile oluşturduğumuz bir paragraf içinde br etiketi kullanarak satır başı yapılmasını sağlayalım. 
Burası birinci satır.
Burası ikinci satır
 
HTML Görünümü 
Burası birinci satır. 
Burası ikinci satır 
HTML Linkler 
HTML Dersleri HTML 
Linkler ile Çalışmak 
Linkler neredeyse tüm web sayfalarında bulunur. Linkler kullanıcıların sayfadan sayfaya dolaşmalarını sağlayan yapılardır. Bir HTML dosyasında link nasıl oluşturulur? 
 etiketi : Bir köprü tanımlar. bu etiket ile herhangi bir yazıya, sayfaya veya resme hyperlink (köprü veya bağlantı) oluşturabilirsiniz. Bir  etiketi bağlantı verilebilecek isimlendirilmiş bir çapa (anchor) oluşturulmasınada olanak sağlar. Çapa, sayfa içinde bir nevi yer imi görevini görerek herhangi bir bağlantı adresinin sonuna '#' karakteri ile birlikte çapa ismi kullanıldığında sayfanın o bölgesine odaklanılmasını sağlar. Farklı bir ifadeyle çapa, sayfa içi hedef bağlantı veya yer imi oluşturur.  etiketinin en önemli özelliği bağlantıyı hedef gösteren href niteliğidir. 
Temel Kullanımı : link yazısı  şeklindedir. 
 href niteliği ile gidilecek olan adres belirtilir. Bu adres herhangi bir resim, dosya, web sayfası, sayfadaki alt bir bölüm veya mail adresi olabilir. Target niteliği ise bağlantının açılış tipini belirler. 
Target niteliği Parametreleri : 
_blank (yeni pencerede aç) 
_parent (açık sayfanın yerinde aç) 
_self (aynı pencere içerisinde aç) 
_top (aynı pencere içerisinde sayfa üzerinden itibaren aç) 
Linklerde title Özelliği 
 etiketinin bir özelliğide link üzerine mouse imleci ile gelindiğinde açıklama yazısı görüntülemesini sağlamaktır. 
Örnekler 
/dev/null blog e-mail göndermek için buraya tıklayın. Örnek resim dosyası için tıklayın. bağlantıyı yeni bir sayfada açmak için tıklayın.. title özelliği 
HTML Görünümü 
/dev/null blog e-mail göndermek için buraya tıklayın. 
Örnek resim dosyası için tıklayın. bağlantıyı yeni bir sayfada açmak için tıklayın.. title özelliği 
Yazılara link verebildiğimiz gibi aynı şekilde resimlerede link verebiliriz. 
 
HTML Head 
HTML sayfamızın ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında ,    
  
HTML  Elementi 
Sayfamız içinde bulunan tüm bağlantılar için taban adresin (alan adının) tanımlanmasını sağlar.  elementi,  elementi içinde ve harici kaynaklara referans veren bağlantılardan önce kullanılmalıdır. Bir browser, sayfa içinde tam yolu belirtilmemiş herhangi bir bağlantının güncel sayfanın bulunduğu dizinde olduğunu kabul etmektedir.  elementi bağlantıların aranacağı alan adının ayrıca belirtilmesini sağlar. 
Kullanım Örneği 
   
HTML  Elementi 
 elementi, sayfanın  alanında sayfanın hazırlanması için gerekli harici dokümanlara erişim veya yüklenmesi için bağlantı oluşturulmasını sağlar. 
Kullanım Örneği 
   
Link elementi Özellikleri id= Kimliğini belirtir. class= Sınıf adını belirtir. style= CSS kuralları tanımlar. title= Kısa bilgi belirtir. lang= İçerdiği metnin lisanını belirtir. dir= İçerdiği metnin yönünü belirtir. charset= Bağlantı kaynağının karakter kodlamasını belirtir. type= Bağlantı kaynağının içerik tipini belirtir. href= URL adresini belirtir. hreflang= Bağlantı kaynağının lisanını belirtir. rel= Bağlantı kaynağının, elementin bulunduğu sayfanın nesi olduğunu belirtir. rev= Elementin bulunduğu sayfanın, bağlantı kaynağının nesi olduğunu belirtir. target= Hedef çerçevenin (frame) adını belirtir. media= Stil şablon kurallarının geçerli olduğu medyayı belirtir. 
HTML  Elementi 
 içinde kullanılarak, browser'a ve arama motorlarına sayfa ile ilgili veriler sağlamak için kullanılır. Bu veriler, isim-değer çifti şeklinde name ve content özellikleri kullanılarak belirtilir. Ayrıca http-equiv özelliği ile bir http başlığı belirtilip aynı şekilde content özelliği ile değeri atanabilir. 
Kullanım Örneği 
    
Meta elementi Özellikleri lang= İçerdiği metnin lisanını belirtir. dir= İçerdiği metnin yönünü belirtir. http-equiv= HTTP başlığının adını belirtir. name= Özelliğin veya verinin adını belirtir. content= Özelliğin veya HTTP başlığının değerini belirtir. scheme= Özelliğin değerini yorumlamak için kullanılacak isteğe bağlı şemayı belirtir. 
HTML  
Mesajı Gör mesaj sayfa yuklendiginde eklendi.. 
HTML   
HTML Özel Karakterler 
Bazı özel karakterler HTML dilinde çeşitli anlamlara sahip olabilmektedir. Biz bu özel karekterleri kullanmak istediğimizde, kodlamalarda sorunla karşılaşabiliriz. Örneğin "<" karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak sorun oluşturabilir. Bu nedenle & veya # ile başlayan ve ; ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız. İsim kısaltmalı özel karakterler akılda daha kalıcı olduğu için kullanımı daha kolaydır. Fakat çoğu tarayıcı bu kısaltmaları yeterince desteklemiyor. karakter numaraları ise tüm tarayıcılar tarafından desteklenmektedir. Özel karakterler büyük/küçük harf duyarlılığına sahiptirler. 
En Çok Kullanılan Özel Karakterler Çıktı Açıklama Özel Karakterler Özel Karakter Numarası Fazladan boşluk     < Küçüktür < < > Büyüktür > > & Ve & & " Alıntı " " 
Özel karakter ile birden fazla boşluk bırakmak : HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız   özel karaktlerini kullanmanız gerekir. 
HTML CSS (Cascading Style Sheets) 
HTML Stil Dosyalarıyla Çalışmak 
CSS (Cascading Style Sheets - Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları) HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. Sayfalarımızın ve içindeki bileşenlerin görünüm kalitesini artırmak amacıyla bizlere birçok biçimlendirme özelliği sağlar. HTML Head başlıklı yazımda HTML elementlerinin alt nesnesi olarak anlatılan style nesnesi ile doküman üzerinde herhangi bir HTML elementinin kenar dolgusu (padding), arka plan (background), kenarlık (border), renk (color), yazı tipi (font) ve yerleşim (position) gibi farklı CSS özelliklerini dinamik olarak okumak ve değiştirmek mümkündür. Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılabilir ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir kez tanımlayıp bütün sayfalarımızda ortak olarak kullanabiliriz. Bu bize hem görünümde ortak stil uygulanmasını hemde sayfaların hafızadaki boyutu küçüldüğü için yüklenme ve güncellemede hızı sağlayacaktır. 
CSS ile HTML Styling 
CSS stil HTML öğeleri için HTML4 ile birlikte tanıtılmıştır. CSS kodları HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da kullanılabilirler. Türüne göre  veya  bölümlerinde yer alabilirler. 
CSS aşağıdaki şekillerde HTML eklenebilir: 
• Harici Stil Kullanımı (External Style Sheet) • Dahili Stil Kullanımı (Internal Style Sheet) • Etiket İçinde Stil Kullanımı (Inline Style) 
External Style Sheet (Harici Stil Kullanımı) 
İsminden de anlaşılacağı gibi CSS kodlarımız ayrı bir dosyada olacaktır. Bu kullanım tarzı birçok sayfa için idealdir. Harici bir stil sayfası ile, bir dosya değiştirerek bir Web sitesinin tamamının görünümünü değiştirebilirsiniz. Her sayfada  etiketini kullanarak stil sayfası bağlanmalıdır. etiketi  bölümünün içinde olmalıdır.    
Internal Style Sheet (Dahili Stil Kullanımı) Bu kullanım tarzında CSS kodlarımızı  etiketi altında   
Inline Style (Etiket İçinde Stil Kullanım) Bu kullanım tarzında ise CSS kodlarımızı HTML etiketleri içine "style" özniteliği ile birlikte yazmalıyız. 
etiket icinde stil kullanımı ornek.
 
HTML Stil Örneği : Sayfa Arkaplanı 
  
 
Baslık arkaplanı kırmızı
 
Paragraf arkaplanı yesil
  
 örnekte background-color özelliği bir öğe için arka plan rengini tanımlamaktadır. 
Sayfamızda birden fazla kullanım tarzını kullanmak istersek öncelik sıralamasışu şekilde olacaktır : Etiket İçinde - Dahili Kullanım - Harici Kullanım 
HTML Stili Etiketleri