HTML5 ve CSS – JS ile Uyumu

HTML5 temel web teknolojilerinin başında gelen, web üzerinde statik sayfaları oluşturmak için geliştirilmiş yüksek metin işaretleyici dil olarak adlandırılan bir işaretleme dilidir. Çoğu bilişim otoritesi için HTML dili bir programlama dili değil XML gibi bir işaretleme dilidir çünkü tek başına server taraflı ya da kod arkası olarak işlev yapmaz.

ÖNEMLİ NOT: Web Teknojileri her geçen gün kendini geliştirmekte ve kullanıcılara spesifik deneyimler kazandırmayı amaçlamaktadır.Bir web sitesinin görünümü tasarlanırken ilk olarak temel bir HTML yapısı tanımlanarak , kullanıcıya sunmaya çalıştığımız hizmet ne ise ona göre bir tasarım planı çıkartılması gerekir. Örneğin üst düzey bir e-ticaret web sitesi oluşturduğumuzu düşünürsek şüphesiz bir web sitesi dinamik bir şekilde olacak ve server tarafında çalışacak olan bir programlama dili kullanılması gerekecektir. Hiç şüphesiz bu dillerin en popülerleri ASP.Net ve PHP dir.

HTML yapısı oluşturulurken etiket yapıları kullanılır ve bunlara bazı özellikler (attribitues) atayarak çeşitli ayarlamalar ve sınıflamalar yapabilirsiniz. En son HTML teknolojisi HTML5 olarak adlandırıldı ve web tasarımcıların işini kolaylaştıran bazı yeni etiketler tanımlandı (<aside>,<header>,<nav>,<footer> gibi)

 

BAŞLICA HTML ETİKETLERİ

METİN ETİKETLERİ

<h1>, <h2, <h3>, <h4>, <h5>, <h6> : Metinlere başlık vermek için kullanılan bu etiket 6 çeşittir ve sayı büyüdükçe başlık büyüklüğü azalır. SEO optimasyonu sağlayabilmek için gerektiğinden fazla kullanılmamalıdır.

<p></p> : Metin veya paragraf etiketi olarak bilinir. Stil özellikleri kullanarak metine yazının tipini, rengini, boyutunu, pozisyonunu ve daha bir çok özelliğini ayarlayabilirsiniz.

<title> : Tanımlandığı sayfanın en üst bölümünde yer alan (sekme ismi) sayfaya isim vermek için <head> tagları arasında tanımlanan bir HTML etiketidir.

TEMEL ETİKETLER :

<html> veya <!DOCTYPE html> : En temel HTML etiketidir ve tüm etiketler kapsar. Özelliklerinden biri sunucu tarafında çalıştığında kullanılacak programlama dilini belirleyebilmesidir.

<head> : Meta etiketlerinin, <title> etiketinin, ve harici dosya linkleri içeren etiketlerin tanımlandığı ve html için temel unsurların belirlendiği, kritik öneme sahip olan HTML etiketidir.

<body> : HTML sayfamızın temel içeriği (metinler,resimler,videolar,slayt ,animasyon vb.) içerisinde barındıran temel etikettir. Sayfamızın en önemli kısmı olarak tanımlanır çünkü yapmak istediklerimizi bu alanda ziyaretçilere sunarız.

<div>: En çok kullanılan html etiketidir. Sayfayı çeşitli bölümlere ayırarak o bölümlere vereceğiniz sınıf ve id tanımlamaları ile web sayfanızın daha düzenli olması sağlayabilirsiniz. XHTML kurallarına uyumlu bir web sayfası oluşturmak istiyorsanız bu etiketi muhakkak kullanmanız gerekmektedir.

Ek 1 Bilgi :Etiketin adı da “division (bölünmüş)” kelimesinin kısaltılmış halidir.

<header> : HTML5 teknolojisinin bilişim dünyasına kazandırdığı bu tag sayesinde navigasyon alanları , logolar, temel sayfa başlığı gibi etiketler ayrı tutularak daha standart ve tasarımı üst düzey HTML sayfaları oluşturulabilmektedir.

<article> : HTML5 ile yeni oluşturulan bu tag ile metinlerinizi bir makale şeklinde yazabilmek imkanınız bulunmaktadır. Uzun bir metin tanımlarken kullanılması daha mantıklıdır.

<aside> : Yeni bir etiket olan <aside> reklamların sergilendiği genelde sayfanın kenarlarında tanımlanan ve günümüzde oldukça kullanılan temel bir HTML 5 etiketidir.

<section> : Daha kullanışlı olarak HTML içeriğinizi sektörlere bölen bu etiket sayesinde tasarımları oluştururken daha pratik bir yol izleyebilirsiniz. CSS tanımlanırken sınıf ve id yapıları kullanılarak stilleri belirleyebilir ve tasarımınızı en iyi şekilde tanımlayabilirsiniz.

DİĞER YARARLI ETİKETLER :

<img /> : HTML de en çok kullanılan taglardan biri de resimlerinizi göstermeye ve onlara stil vermeye yarayan özellikleri içerisinde barındıran <img> etiketidir.

<img alt=””/> : Seo açısından en önemli özellik olan altyazı metni özelliği resimlerinize isim vermenize ve Google aramalarda bu isimle görsellerde indekslenmesine yarar.

<img width=”100″ height:”100″ /> : CSS kullanmadan resimlere yükseklik ve genişlik (width) vermek için kullanılan özelliktir.

<img src=”/image/ornek.png” /> : Resmin bulunduğu yolu belirtmemize yarar ve böylece istenilen resme ulaşılmış olur.

ÖNEMLİ NOTLAR

CSS(Cascading Style Sheets) web sitesi html yapısına renk ve boyut kazandıran, sayfaların yazı ve resim özelliklerinin belirleyen bir web teknolojisidir. Ancak CSS3 ile web sitesine bir çok animasyon ve efekt eklenebildiği gibi CSS Sprite gibi metodlarla web sitemizi hızlandırabilmekteyiz. Eğer bir web programcısı iyi bir programcı olduğunu söylüyorsa sitesinin en iyi görünümde olması için CSS bilgisini üst düzeyde tutmalıdır.

CSS kadar önemli olan bir diğer teknoloji ise bir script dili olan javaScript teknolojisidir. Bilindiği üzere sayfamız içinde farklı efektler kullanmak ya da kod kalabalığı içinde HTML5 ve CSS üzerinde değişiklik yapmak istiyorsak belirli bir düzeyde javaScript bilme zorunluluğundayız. JQuery , AJAX gibi günümüzde yaygın olarak kullanılan script teknolojileri temelini javaScript teknolojiisinden almaktadır. Algoritma zekası iyi düzeyde bulunan hemen her programcı bu dili rahatlıkla kullanabilmektedir.

CSS ve JavaScript kodları ayrı olarak tutulursa web sayfası için daha hızlı görüntelenme avantajı oluşur. XHTML kurallarına uymak istiyorsak HTML5 içi style ve script taglarından olabildiğince kaçınmamız gerekmektedir. Css hakkında bir çok yazımıza sitemiz içeriğinden ulaşabilirsiniz. JS konusunu da ise gelecek yazılarımda yer vermeyi planlıyorum.

Temel Düzeyde HTML – CSS ve JS öğrenmek için yararlanabileceğiniz bir web sitesi: http://www.w3schools.com/