HTML'YE GİRİŞ, HTML DERSLERİ-1

HTML NEDİR?

“Hyper Text Markup Language” ifadesinin baş harflerinin birleşimi olan HTML’yi, Türkçeye “Hiper Metin Biçimlendirme Dili” veya “Bağlantılı (Köprü) Metin İşaretlendirme Dili” şeklinde çevrilir. HTML için kısaca metinleri biçimlendirmeye yarayan dil şeklinde tanımlayabiliriz.

HTML, web sayfalarını oluşturmaya yarayan bir script (komut) dilidir. HTML, “Hyper Text Markup Language” (Hiper Metin İşaretleme Dili) ifadesinin kısaltmasıdır. “Hyper Text“, bir link (bağlantı) yoluyla çalıştırılan bir metin parçasıdır. “Markup Language” ise, bir doküman içerisinde metinler oluşturmaya, bir düzen, bir sayfa yapısı oluşturmaya yarayan, işaretlerden oluşan bir dildir.

Bir web sayfasında birbiri ile bağlanılı linkler (bağlantılar) “Hyper Text” olarak adlandırılır. Web sayfalarının (HTML dokümanlarının) birbiri ile bağlantısı Hyper Text İşaretleme Dili ile sağlanmaktadır. İşaretleme dili (Markup language), biçimi text (metin) olan bir dokümanı etiketler ile işaretleme (markup) anlamına gelmektedir.

Bir HTML dosyası bir metin dosyası türüdür ve içerisinde yanlızca metinler bulunur. Bir tarayıcı bir HTML dosyası açtığında, dosyanın içerisindeki HTML etiketlerine bakar ve bu etiketlere göre bir sayfa yapısı oluşturur, bir resim ekleyebilir sayfaya, diğer sayfalara veya başka web sitelere bir link-bağlantı kurabilir. HTML dokümanları, bir metin dosyaları oldukları için, basit metin editörlerle bir HTML dokümanı oluşturulabilir.

Google Docs ya da MS Office Word gibi bir editörde oluşturduğunuz bir metni göz önünde bulunduralım. Bu metne istediğimiz gibi bir başlık ve paragraf ekleyebilir, dilediğimiz yerin altı çizili olmasını ya da kalın olmasını sağlayabiliriz. Tablo ekleyebilir, sıralı- sırasız listeler oluşturabiliriz. Oluşturduğumuz bu metin sayfasının elemanlarını sayfanın herhangi bir yerinde istediğimiz gibi konumlandırabiliriz. İşte benzer şekilde web sayfalarının oluşturmak için de HTML kullanmak gerekmektedir. “İşaretleme etiketleri” yardımıyla web sayfası ve sayfa elemanları oluşturulur.

Eğer basit bir metni webte yayınlama amaçlanıyorsa, elbette bir web sitesi oluşturma zorunluluğu bulunmamaktadır. MS Offide Word, Google Docs gibi editörlerde bir metin oluşturup bunu webte yayınlayabilirsiniz. Ancak daha fazla sayfalar gerektiren kompleks bir iş için bir web sitesi oluşturmak gerekir.

Bir web sayfası oluşturmak için, HTML bilgisine gereksinim olmayan bazı editörler kullanılabilir. Çok güçlü studyo editörlerle (örneğin webflow.com, bootstrapstudio.io) mükemmel web siteleri oluşturulabilir. Ancak HTML bilmek her zaman işleri kolaylaştıracaktır. Web tasarımını bir meslek olarak seçecekler için HTML’ye hakim olma gerekliliğinden bahsetmeye gerek yok sanırım. Web site yöneticileri ve blog sahiplerinin de HTML bilmeleri bir seçenek değil bir zorunluluk olduğunu söylemek gerekir.

HTML dokümanlarını studyo editör kullanmadan kendimiz oluşturabilmemiz için, kullandığınız işletim sistemleriyle birlikte standart olarak gelen metin editörler kullanabiliriz. (Örneğin Windows ile birlikte gelen Notepad) Yapmamız gereken Notepad editörünü açıp, html etiketlerini .html ya da .htm uzantılı olarak kaydettikten sonra dokümanı açmak. Gelişmiş metin editörler kullanarak çok daha hızlı ve kolay bir şekilde HTML dokümanları oluşturabiliriz.

Biraz daha ayrıntıya girecek olursak;

• Bir HTML dokümanında bir metin yazdığımızda bu metnin kalın, eğik, altı çizgili, büyük ya da küçük olacağını tarayıcı nasıl bilecek? HTML dokümanında kullanacağımız etiketler ile metni işaretleyerek bunu tarayıcıya bildirebiliriz. İşte burda basit bir örnek;

Bu bir metindir, burası <b>kalın</b>, burası ise <i>eğik</i>olacak.

• Yukarıda da ifade ettiğim gibi, HTML iki temel ihtiyaca karşılık vermektedir. Web sayfaları oluşturmak ve metinleri işaretlemek. Özellikle web site yöneticileri ve bloggerlar mükemmel metinler, yayınlar oluşturmak, metinleri işaretlemek için HTML’ye gereksinim duyarlar. Öte yandan tasarımcı ve programcılar da web sayfalarını oluşturmak için HTML’ye ihtiyaç duyarlar. 

• HTML “etiketleri” kavramı ile HTML “elemanları” kavramı birbirinden farklıdır. Bir HTML dokümanında “başlık”, “paragraf”, “tablo” gibi unsurlar, HTML elemanlarıdır. HTML elemanlarını oluşturmak için ise tag’lara ihtiyaç duyulur. HTML elemanlarını etiketleyen ifadelere tag (etiket) denir. Tarayıcılar HTML etiketlerini kullanarak HTML elemanlarını sayfa içerisinde oluştururlar. 

• HTML etiketleri büyük/küçük harf duyarlılığı yoktur. Ancak W3C (World Wide Web Consortium) HTML 4 ve sonraki sürümleri için küçük harf kullanmayı önermektedir.

• HTML başlangıçta, bilim insanları arasında bilgi alışverişini kolaylaştırmak amacıyla, başlık, paragraf, liste gibi doküman yapısını oluşturmak üzere geliştirildi.

HTML bilmenin yararları:

• Bir editöre bağlı kalmadan web sayfalarını oluşturma, studyo editörlerin yapamadığı effektleri yapabilme,
• Başka sitelerde kullanılan etiketleri inceleyebilme,
• Web yayınlarını özelleştirebilme, özgün blog tasarımlarını yapabilme

Bir web sayfası da iki temel öğeden oluşur:

• baş kısım (head)
• gövde (body)

HTML tasarlayıcıları, tıpkı bir insanın anatomisine benzer bir şekilde bu dili tasarlamışlardır.

head

body

footer

<!DOCTYPE html> <html> <!-- HTML dokümanında temel iki öğe--> <!-- head kısmı-->        <head>               <title>SAYFA BAŞLIĞI</title>        </head> <!-- body kısmı-->         <body>             <h1>YAZI BAŞLIĞI</h1>             <p>Paragraf...</p>         </body> </html>

head: Sayfa hakkındaki bilgiler burada yazılır ve burada yazılan metin ve etiketler sayfada görüntülenmez.

body: Sayfada görüntülenecek bilgiler buraya yazılır.

BAŞLIK KISMI (HEAD SECTİON)

Sayfada görüntülenmeyecek sayfaya ilişkin bilgiler burada yer alır.<head> ve </head> etiketleri sayfanın başlık kısmını oluşturmak için kullanılan etiketlerdir. Bu etiketler içerisinde;

• Sayfanın başlığını belirlemek için <title> </title> etiketleri,
• Sayfanın arama motorları tarafından indekslenmesi gibi işlemler için metatagları,
• Sayfada kullanılacak belirli JavaScript ve CSS kodları,

yer alır.

GÖVDE KISMI (BODY SECTİON)

Kullanıcı sayfayı yüklediğinde göreceği kısım body kısmında yazılır. Bu kısımda yer alacak temel öğeler şunlardır:

• Text-metin
• Links-bağlantılar
• İmages-resimler
• Backgrounds-arkaplan
• Tables-tablolar
• Frames-.çerçeveler
• Forms-formlar

NOT: HTML derslerimiz, son versiyon HTML 5 derslerini kapsamaktadır. HTML’nin önceki sürümleri bu derslerimizde yer almamaktadır.

Aşağıda, HTML 4‘te var olup HTML 5’te kaldırılan etiketlerin listesini vermenin önemli olduğunu düşünmekteyim. Bunlarla karşılaştığınızda HTML 5’te artık kullanılmadığını hatırlamış olmak açısından bunları bilmek önemli.

kaldırılan etiket	yerine kullanılan etiket
<acronym>	<abbr>
<applet>	<object>
<basefont>	CSS
<big>	CSS
<center>	CSS
<dir>	<ul>
<font>	CSS
<frame>	-
<frameset>	-
<noframes>	-
<strike>	CSS, <s>, ya da <del>
<tt>	CSS

HTML 5 HANGİ YENİLİKLERİ GETİRDİ?

• HTML sayfa bildirimi ifadesi değişti:

<!DOCTYPE html>

• karakter seti bildirimi değişti:
  

HTML 5 karakter seti bildirimi:

<meta charset="UTF-8">

UTF-8 bildirimi, dünyadaki tüm karakter ve sembolleri kapsayan bir bildirimdir.

HTML 4’te kullanılan karakter seti:

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

• Önemli elementler getirildi:

Bunlar:

• <header>, <footer>, <article> ve <section> gibi semantik elementler,
• Form etiketleri için yeni nitelikler (attribute),
• Gfafik elementleri:<svg> ve <canvas>
• Multimedia elementleri:<audio> ve <video>

HTML DOSYASI OLUŞTURMA

• HTML dosyaları oluşturmak için gelişmiş metin editör (text editör) kullanmak gerekli değildir. Basit metin editörlerle HTML dosyaları oluşturulabilir. Online metin editörler kullanılarak da hazırlanan HTML dosyaları test edilebilir. Derslerimizde bizlerde online metin editör kullanarak hazırladığımız HTML dokümanının nasıl göründüğünü inceleyebileceğiz.
• Windows için Notepad++, Webstorm; Linux için Vim, Emacs, Gedit metin editörlerini indirip kullanabilirsiniz. Sublime ve Atom editörleri ise hem Windows’ta hem de Linux’te çalıştırılabilen ve yaygın olarak kullanılan editörlerdir.

• İndirdiğiniz editörünün içerisine aşağıdaki HTML etiketlerini yapıştırıp index.html olarak kaydedin. Sağ tıklayıp “tarayıcıda aç” seçeneğine tıkladıktan sonra HTML etiketleri ile oluşturduğunuz metni tarayıcıda görüntüleyebilirsiniz.  Ya da derslerimizi daha kolay takip edebilmek için aşağıdaki kod editörünü kullanabilirsiniz.

<!DOCTYPE html> <html>   <head>     <title>SAYFA BAŞLIĞI</title>   </head> <body>   <h1>YAZI BAŞLIĞI</h1>   <p>Paragraf...</p> </body> </html>

HTML etiketlerini buraya yazın...

Etiketlerin açıklaması:

• !DOCTYPE : Bu bir HTML etiketi değildir, HTML dökümanın tipini  (Document type definition) belirleyen bir bildirimdir. Sayfanın hangi HTML sürümü ile oluşturulduğunu tarayıcıya bildirmek için kullanılır. !DOCTYPE bildirimi, HTML5 bildirimidir. Diğer HTML versiyonları bildirimleri hakkında bilgi edinmek için tıklayınız. HTML dokümanın en başına yazılması gerekir. Tarayıcılarda sayfanın düzgün çalıştırılmasını sağlar.

• <html> : HTML dökümanının çalıştırıldığını tarayıcıya bildiren etikettir. HTML sayfalarındaki ilk etiket <html> etiketidir. Son etiket </html> etiketi ise HTML sayfasının son bulduğunu bildirir.

• <title></title> : Bu etiketler sayfanın başlığını tarayıcı penceresinin üstünde görünmesini sağlamak için kullanılan etiketlerdir.

• <body></body> : Tarayıcı penceresi içerisinde sayfanızı gösterecek olan etiketlerdir. Sayfada yer alacak elemanlar, bu etiketler arasına yazılır.

• <h1></h1> : <h> etiketleri sayfada yer alacak bir metnin başlığını oluşturmak için kullanılır. h1’den h6’ya kadar başlık etiketi kullanılabilir. h1 en büyük başlık etiketi, h6 ise en küçük başlık etiketidir.
• <p></p> : Paragraf oluşturmak için kullanılan etiketleri