HTML Dersleri

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

HTML Sayfasının Yapısı

<html>

<head>
<title> baslik </title>
</head>

<body>
gövde
</body>

</html>

<html>   </html> : Sayfamızın ana etiketidir.
<head>   </head> : Sayfamıza ait başlık, meta, stil gibi tanımlamaları yapacağımız bölümdür.
<title>     </title> : Sayfamızın başlığını bu etiket ile belirleriz.
<body>   </body> : Sayfamızın gövdesidir. İçeriğimizi burada oluştururuz.

İlk Web Sayfam

HTML sayfaları aslında birer metin dökümanlarıdırlar. Bu nedenle buradaki anlatımlarımda Windows'un not defteri yada notepad++ tarzı metin editörlerini baz alarak örnekler vereceğim. Bu sayede kodları tek tek yazarak altyapıyı daha iyi kavrayacağımızı düşünüyorum.

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.

<html>

<head>
<title> baslik </title>
</head>

<body>
ilk web sayfam...
</body>

</html>

HTML Görünümü

Örneğin Açıklaması

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

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

<title> </title> 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.

<body> </body> 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. <b> </b>
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 <b> ve <B> aynı görevi görür.

Start tag	End tag
<p>	</p>
<a href="test.html">	</a>
<br>

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ı <h1> <h6> aradaki tüm rakamlar kullanılarak tanımlanabilir.

<h1>Bu bir başlık</h1>
<h2>Bu bir başlık</h2>
<h3>Bu bir başlık</h3>

Bu bir başlık

Basit Kodlar - HTML Paragraflar
HTML paragrafları <p> etiketi ile tanımlanır. HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

<p>Bu bir paragraf</p>
<p>Bu da başka bir paragraf</p>

HTML Görünümü
Bu bir paragraf
Bu da başka bir paragraf

Basit Kodlar - HTML Linkler
HTML bağlantıları <a> etiketi ile tanımlanır.

<a href="http://www.ibrahimbayraktar.net">Link ornegi</a>

HTML Görünümü
Link ornegi

Basit Kodlar - HTML Resimler
HTML'de resimler <img> etiketi ile tanımlanır. <img> etiketi kapalıdır, bu etiket parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.

<img src="ornek.png" alt="Örnek Resim">

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.,
<h6> ise en küçük puntoyu belirtir.

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

<a href="http://www.ibrahimbayraktar.net">Link ornegi</a>

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.

Global HTML öznitelikleri hakkında daha fazla bilgi için tıklayınız

/dev/null Web Günlüğü

Sayfalar

17 Kasım 2013 Pazar

HTML Nedir?

Bu bir başlık

Bu bir başlık

Bu bir başlık

1 yorum: