HTML Dersleri 3 HTML 5 Dökümanı Oluşturalım

HTML 5 NEDİR?

HTML5 web tasarım temel dili olan HTML ailesinin son üyesidir. Bundan önce birçok sürümü bulunan HTML, beşinci sürümü ile bambaşka bir hal almıştır.

HTML giderek gelişti ve yıllar geçtikçe CSS yeni özellikleri ile birlikte 4. versiyona kadar yükseldi. HTML her ne kadar yeterli gibi görünse de CSS ile yazılan çoklu kodlar hatalara neden oluyordu ve bunun önüne geçmek için HTML5 geliştirildi.

HTML 5 ile gelen esnek yapı kod hatalarını en aza indirdi, hatta birçoğunu görmezden geliyordu. XHTML’ deki küçük – büyük harf duyarlılığı kalkmıştı. Bununla birlikte çok fazla kod sorunu kısmen çözüldü. CSS ile olan uyum sorunu düzeltildi ve beraberinde getirdiği yeni etiketler ile hem içerik ve görüntüye, hem de arama motorları için önemli kolaylıklar sağladı.

Henüz HTML5 ile gelen özelliklerin tamamı bazı tarayıcılar tarafından desteklenmese de ileride web tasarımının vazgeçilmezi haline geleceği kesin. Bunun nedeni ise daha önce web programla dilleri ile yapılan işler HTML5 ile kolay şekilde yapılıyor olması. Bunun yanında web tasarımında birçok farklı yeni özellikler HTML5 ile kullanılmaya başlandı.

HTML5 henüz geliştirilme aşamasında olsa da bu gün bir çok web tasarımcı artık bu yeni sürümü tercih etmektedir. Kısmen daha az kod yazma imkânı verse de HTML5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, Javascript ve CSS den almaktadır.

HTML5 dili, internet üzerinden aktarılan bilginin sunumunun düzenli olması amacıyla geliştirilmiştir. HTML dili ile düz metin şeklindeki bilgilere başlıklar ekleyebilir, paragraf yapabilir, liste oluşturabilir ve formlar ekleyebiliriz. HTML işaretleme dilidir. İşaretleme dili olduğu için tag’ lar kullanılarak yazılır. Her tagında bir açılışı ve kapanışı vardır. Birkaç tane bu kural dışında olan istisna etiketler de vardır. Diğer etiketler de aynı biçimde yazılır.

 Bu dersimizden itibaren sadece HTML 5 etiketleri yanı sıra eski HTML teknolojilerinde kullanılan elementleri de HTML 5 ile karşılaştırmalı olarak anlatacağım. Şimdi isterseniz konuyu çok fazla uzatmadan Temel HTML5 dersleri ile yavaş yavaş HTML5 dünyasına adımımızı atalım.

HTML 5 DÖKÜMANI OLUŞTURALIM

<HTML>….</HTML>

Terimlerin İngilizcesini söylemek zorundayım zira bütün yazılım dillerinde  geçerli dil İngilizce’ dir. Yukarıda kırmızı ile yazılmış şeylere “TAG” yani “etiket” derler. İlki açılış tagıdır, ikincisi kapanış tagı. Kapanış tagı yapmak için açılış tagına “/” eklediniz mi yeterlidir. Tagların hepsinin olmamakla beraber birçoğunun kapanış tagı vardır. Tagları Tarayıcınızla konuşmak gibi değerlendirin, daha doğrusu bir şeyler yapmasını tarif ediyorsunuz. Şu anda tarayıcıya bunun <HTML> etiketi ile HTML dokümanının başlangıcı olduğunu’ söylediniz ve </HTML> etiketi ile de HTML dokümanının sonu olduğunu söylediniz.  Şimdi içine bir şeyler dolduralım.

HTML5 dökümanı oluştururken oluşturacağımız belgelerin başına (!DOCTYPE HTML) muhakkak koyacağız.

HTML5 belgemizde kullanacağımız belge türü bildirimi: <!doctype html> Bu bildirimin anlamı; belgemizin bir HTML 5 belgesi olduğu anlamına gelir. Kullanımı aşağıdaki gibidir:

Belgelerimizi kodlarken kullanacağımız bir çok metin editörü bulunmaktadır. Bunlardan en çok tercih edileni Notepad ++, Sublime Text ve Brackets metin editörüdür. Bunlardan başka metin editörleri de bulunmaktadır. Adobe Dreamweaver gibi… Metin editörlerinin birçok avantajlı yönleri vardır; fakat hepsinin ortak özelliği kod renklendirme ve kod tamamlama özelliğine sahip olmasıdır.

Derslerimizde Brackets metin editörümüzü kullanacağız. Önceki derslerimizde de anlattığım gibi bir çok kısayolu bulunan metin editörü PHP, ASP, C#, HTML, XML, CSS, Python gibi birçok dilin kodlarını renkli bir şekilde gösterebilir ve kod yazımında kolaylık sağlar. Derslerimizi anlatırken Brackest metin editörünü kullanacağım ve kısayollarını anlatmaya çalışacağım. İlk olarak Brackest adlı metin editörü programını indirin.  Karmaşık gibi gözükmesine rağmen Brackest oldukça basit bir programdır. Şimdi Brackets metin editörümüzü açalım ve aşağıdaki HTML kodlarını yazalım.

          Brackets metin editöründe bu etiketleri yazmanın kısa yolu :

Brackets kısa yoldan HTML iskeleti oluşturabiliriz ama biz işin kolayına kaçmayalım. Bu işi tam anlamıyla öğrenene kadar kodları yazalım. Yine de ben HTML5 iskeleti oluşturmanın kısa yolunu göstereyim.

Sol alt kısımda bulunan HTML Skeletion kısmını tıklayarak aşağıdaki gibi istediğiniz kısımları işaretleyebilirsiniz.

Tamam butonu sonucunda aşağıdaki gibi çıktı alabiliriz.

Oluşturduğunuz HTML kodunu çalıştırmak için Brackets üzerindeki sol alt kısımda bulunan canlı ön izleme özelliği ile ön tanımlı tarayıcınızda görüntüleyebilirsiniz. Alternatif olarak Brackets üzerinden görüntülemek yerine kaydettiğiniz klasöre giderek oluşturduğunuz dosyayı istediğiniz tarayıcı üzerinde çalıştırabilirsiniz.

İşaretli bölüme tıkladığınızda Brackets ön tanımlı tarayıcı ile bir sayfa açarak hazırlamış olduğunuz sayfanızı görüntüler.  Brackest metin editörüne ait ön izleme özelliği wamp programı ile localhost oluşturmadan dökümanlarımızın çıktısını görüntüleyebiliriz.

Bu dersimizde bir önceki dersimizde gördüğümüz basit HTML yapısını inceleyeceğiz ve HTML’ deki önemli bazı kuralları öğreneceğiz.

İlk olarak basit bir HTML örneğini ele alalım:

Bu örneği daha da basite indirgeyeyim:

Her şey daha açık bir hâl aldı. Yazdığım <html> etiketinin içinde head ve body adlı iki farklı element daha olduğunu göreceksiniz. Ayrıca klavyemizdeki Caps Lock tuşunun bir üstündeki Tab tuşuna basarak head ve body’nin html etiketinin içinde yazıldığına dikkatinizi çekmek isterim. Açıkçası bunu yapmayabilirdim; ama yapmamdaki amacım HTML’ deki hiyerarşik yapıyı sizlere öğretmek.

Tüm HTML etiketleri <örnek> şeklinde açılır ve köşeli parantezlerin içine yazdığınız “etiket adı’ nın başına / (slash) işareti yazılarak kapatılır. Böylece “örnek” etiketini kapalı hâli </örnek> şeklindedir. <örnek>’i açma etiketi olarak, </örnek> şeklinde yazılanı ise kapatma etiketi olarak adlandırabiliriz. Ayrıca bir kısım HTML üstatları ‘etiket’ yerine ‘element’ terimini kullanmayı tercih etmektedir. Bu da aklınızda olsun.

HTML etiketinin açılım ve kapatım şekli bazı istisnalar dışında daima böyledir. Yazmak istediğimiz içerik daima açılım ve kapatım etiketlerinin içindeki boş alana yazılır.

Şimdi tekrar daha da basite indirgenmiş örneğimize dönelim:

HTML açma etiketi ile kapatma etiketi arasında head ve body etiketlerinin olduğunu görüyorsunuz. head ve body’nin ise aynı satır düzeyinde yer aldıklarını… head İngilizce’ de baş, body ise gövde anlamına gelmektedir. Bu da bize HTML’ in bir iskelet yapısı olduğunu gösterir. Html etiketini bir insan vücudu; body ve head’ in ise bu vücudun başı ve gövdesi olduğunu düşünebilirsiniz.

<head> etiketi daima <html> etiketinin içinde yer alır ve <head>’in içerisine yazılan <title> dışındaki tüm içerik kullanıcı tarafından görülmez. <body>’in içine yazılan içerik neyse tarayıcı ekranında o görülecektir.

<title> sayfa başlığı anlamındadır. Bir önceki dersimizde gördüğümüz gibi örneğin şu an tarayıcınızın sekmesindeki başlığın “Temel HTML Etiketleri ve Kurallar” şeklinde başlayan bir yazı olduğunu göreceksiniz:

Bu da aslında pencere içeriğinde görülmez; fakat bir istisna olarak kabul edilebilir.

HTML5′ teki hiyerarşik yapıyı tam olarak anlamadıysanız aşağıdaki hatalı HTML kodlarını inceleyiniz:

İlk örnekteki hata head elementinin html etiketinin dışına yazılmış olması. Unutmayın ki HTML5’teki tüm etiketler daima <html> etiketinin içine yazılır.

İkinci örnekteki hata biraz daha komplike. body’ nin kapatma etiketi html’ in dışına yazılmış ve bu da yanlış kodlama örneklerinden biri. Yine unutmayın ki iki HTML5 etiketi asla ve asla birbirleri ile kesişmezler.

Yani <a etiketi><b etiketi></a etiketi></b etiketi> şeklinde bir yazım yoktur.

Doğrusu <a etiketi><b etiketi></b etiketi></a etiketi> şeklindedir.

Son açılan element önce kapatılır. Bu kuralı hiçbir zaman unutmayalım.

Bu dersin başındaki ilk örneğe dönelim.

<p> adlı bir etiket göreceksiniz. Bu etiket HTML5′ te içerik eklenirken en sık kullanılan elementlerden biridir. Paragraf kelimesinin kısaltmasıdır.

Şimdi ilk web sayfanızı nasıl yapacağınızı anlatacağım.

Brackest metin editörünü açın ve yeni bir sayfa oluşturun. Sayfa tamamen boş olsun. İçine aşağıdaki kodları yazın. Tek tek yazın. Brackets metin editöründe HTML etiketleri oluşturmanın kısa yolu olsa da bilgilerimizi pekiştirene kadar hazıra alışmamak adına kodları tek tek yazmamız öğrenmenizi kolaylaştıracaktır.

Hiyerarşik yazmaya özen gösterin. Örneğin; <html> yazdıktan sonra enter’a basın. Daha sonra tab tuşu ile boşluk bırakın ve kodun kalan kısmını yazın. Brackest metin editöründe hiyerarşik yazımın kısa yolu CTRL + SHİFT + L tuş kombinasyonudur. Kodlarınızı yazdıkdan sonra bu tuş kombinasyonu ile tüm etiketlerini hiyerarşik bir şekilde düzenleyebilirsiniz. Bu kolaylık için Brackest programına Beautify eklentisini kurmalısınız.

Her şey bittikten sonra Brackest metin editörünün Dosya menüsünden Dosya > Farklı Kaydet…’e tıklayınız. Uzantı olarak. html yazınız.

Şimdi kaydettiğiniz dosyaya dönünüz ve Birlikte aç komutundan Google Chrome’ u seçiniz. Daha sonra dosyanızı açınız.

Başlık etiketlerini hizalamak istersek align niteliğini kullanabiliriz. Bu nitelik ile kullanılan değerler left (sola), right (sağa), center (ortalı) ve justify (iki yana yaslı)’ dir.

Tebrikler! İlk web sayfanızı oluşturdunuz. Her şey bu kadar kolay.

Buraya kadar web teknolojilerinde kullanılan en temel kavramları ve HTML 5 sürümüne kadar HTML’ in hangi aşamalardan geçtiğini öğrendikten sonra bir sonraki dersimizde kodlarla haşır neşir olmaya başlayacağız.

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir