HTML Dersleri 2 HTML Döküman Yapısı

HTML DÖKÜMAN YAPISI

HTML etiketleri, doküman içerisinde ağaç yapısına benzer şekilde dizilirler. Bütün HTML dökümanlarında temel elementler bulunmaktadır. Bunlar DOCTYPE, html, head ve  body elementleridir. Yani kabaca aşağıdaki kod bloğundaki bir yapı bir HTML belgesinin temelini oluşturur. Bu elementlerin her biri bir HTML dökümanında spesifik bir role sahiptir. Örneğin DOCTYPE elementi internet tarayıcılarına bu belgenin bir HTML belgesi olduğunu belirtir. Burada HTML belgesinin sürümüne dair bilgiler yer alır.

Aşağıdaki görselde HTML 4.01 versiyonu ile oluşturulmuş bir HTML belgesi görülmektedir.

Buradaki kavramların ne anlama geldiğine değinelim. Bu kavramlar değinmeden önce aşağıdaki görseli inceleyelim:

Görselde örnek olarak <p> elementi verilmiştir.  HTML etiketinin açılışı ve kapanışı belirtilmiştir. Alt kısımdaki görselde ise örnek olarak <p> elementine align özelliği verilmiş ve bu özelliğe center değeri verilmiştir.

Şimdi örnekte kavramların anlamına değinebiliriz.

<body></body> etiketleri arasına ise kullanıcının web tarayıcı ekranında göreceği bileşenlerin tamamı yerleştirilir. Diğer bir ifadeyle body kısmında bir html dökümanın gövde kısmında yer alacak kodlar yer alır, head kısmında başlık bilgileri, etiketler yer alır. <body> etiketi ile birlikte kullanılacak özellikler ve aldığı değerler aşağıdaki gibidir:

ÖZELLİK DEĞER AÇIKLAMA
alink renk Linkin üzerine gelindiğinde tıklanırken tıklanırken oluşacak rengi belirler.
background URL Sayfanın arka planına resim eklememizi sağlar.
bgcolor renk Sayfanın arka plan rengini belirler.
link renk Tıklanmamış linklerin rengini belirler.
text renk Sayfadaki metinlerin rengini belirler.
vlink renk Tıklanmış linklerin rengini belirler.
top margin piksel Sayfanın üst kenar boşluğunu belirler.
left margin piksel Sayfanın sol kenar boşluğunu belirler.

<body>  elementinin alabildiği bu özelliklerin tümü CSS ile yapılabildiği için bu özellikler HTML 5′ de desteklenmez.  CSS derslerinde bu özellikler ayrıntılı olarak anlatılacaktır.

<head></head> etiketleri arasına kullanıcının göremeyeceği ve döküman ile ilgili bilgiler yerleştirilir. Örneğin dökümanı yazan kişi, döküman ile ilgili anahtar kelimeler (keywords), dökümanın tipi ve içerik gibi bilgiler bu bölümde          yer alır. head elementinin içinde meta data bulunur. Bu meta data tarayıcı tarafından görüntülenmez.  head elementi alanında yer alan elementler aşağıdaki gibidir:

  • <base> elementi
  • <meta> elementi
  • <title> elementi
  • <style> elementi
  • <link> elementi
  • <script> elementi

HTML ÖGELERİ

HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır.

HTML öğeleri, HTML etiketleri kullanılarak tanımlanır.

HTML ETİKETLERİ

HTML dokümanları bir işaretleme dili olduğu için tag’ lar (etiketler) kullanılarak yazılır.

  • HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
  • HTML etiketleri 2 karakter ile sınırlanır. < ve >. < > etiketi ile başlar ve </> etiketi ile biter.
  • Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi
  • Bu karakterlere grup parantezleri (angle brackets) denir.
  • HTML etiketleri çift olarak kullanılır.
  • HTML etiketlerinde Türkçe karakter kullanılmaz.
  • Başlama ve bitiş etiketleri arasında kalan her şeye ise öge içeriği (element contents) denir.
  • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan “İ” ve “ı” harflerinin bu durumun dışında kaldığını unutmayınız!)
  • HTML etiketlerini iç içe kullanırken dikkat etmemiz gereken en önemli nokta en son açılan etiket en önce kapatılır.

Birkaç etiket dışında HTML etiketlerinin tamamının başlangıç ve bitişi aynıdır.

ÖRNEK :

Bu bir HTML öğesidir:

HTML öğesi başlangıç etiketi olan <b> ile başladı.

HTML öğesinin içeriği: Bu metin koyu

HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı.

<b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir.

ETİKETLERİ NEDEN KÜÇÜK HARFLERLE BELİRTİRİZ ?

HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web’ de gezintiye çıkarsanız birçok sitenin kaynak kodunun büyük harflerle yapılmış olduğunu göreceksiniz. Fakat biz her zaman küçük harf kullanırız. Neden?

Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.

DOCTYPE VERSİYONLARI

DOCTYPE, hazırladığınız sayfaların hangi tipte bir belge olduğunu tarayıcıya (browser) bildirmek için kullanılır. Bu sayede tarayıcı bu sayfayı hangi standarda (hangi HTML sürümü kullanılmış) göre yorumlayacağını anlamış olur. Eğer DOCTYPE kullanılmazsa tarayıcılar sayfaları standarda uygun olarak yorumlamayacak, dolayısıyla her tarayıcı size farklı farklı sonuçlar verecektir. Sitenin tarayıcılarda farklı görünmesinin nedenlerinden birisi DOCTYPE kullanılmamasıdır. HTML dökümanı oluştururken oluşturacağımız belgelerin başına (!DOCTYPE HTML) muhakkak tanımlamamız gerekiyor.

Çok uğraşıp en iyi ve en doğru CSS kodunu yazdıktan sonra yanlış DOCTYPE kullandığınızda sayfanız düzgün bir şekilde gözükmeyecektir ve bu size bir çok sorun oluşturacaktır. Sitenizde tam DOCTYPE bildirimi ve strict DTD kullanmanız çok önemlidir.

HTML belgemizde kullanacağımız belge türü bildirimi: <!doctype html> Bu bildirimin anlamı; belgemizin bir HTML belgesi olduğu anlamına gelir. Her HTML versiyonu için değişik DOCTYPE tanımlaması vardır.

HTML5’ten önce Strict, Transitional ve Frameset adlı üç farklı belge tipi bildirimi vardı. Şimdi bunların kullanımlarını görelim. Bunlar Transitional (geçişken), Strict (kesin), Frameset (çerçeve)

Transitional tanımında sayfa kısmen standartlara uygun yorumlanır, bu sayede eski html etiketleri de kullanabilirsiniz. Strict’e göre daha esnektir ve bazı hataları göz ardı edebilir.

Strict tanımında sayfa kesin kurallara uygun şekilde yorumlanır. Kullanım dışı <font> elementi gibi elementleri içermez.

Frameset tanımı ise frame’lerle (çerçevelerle) yapılan web sayfalarını belirtmekte kullanılırdı.

Aşağıda bütün HTML versiyonları için DOCTYPE tanımlamalarını göreceksiniz.

HTML 4.01 Strict

Bu kullanım sayfanın kesin olarak HTML 4.01 kurallarının geçerli olduğu bir HTML dosyası olduğunu gösterir.

HTML 4.01 Transitional

Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğunu ve eski HTML etiketlerinin de kullanılabildiği bir HTML dosyası olduğunu gösterir.

HTML 4.01 Frameset

Bu kullanım sayfanın bir HTML çerçeve (frame) sayfası olduğunu gösterir. Kullanımı azaldı.

XHTML 1.0 Strict

Bu kullanım sayfanın sadece XHTML1.0 kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığında tüm XHTML kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle yazılması gibi.

XHTML 1.0 Transitional

Bu kullanım sayfanın hem HTML hem de XHTML kurallarının geçerli olduğunu bir XHTML dosyası olduğunu gösterir.

XHTML 1.0 Frameset

Bu kullanım sayfanın bir HTML çerçeve (frame) sayfası olduğunu gösterir. Kullanımı azaldı.

XHTML 1.1

Bu kullanım sayfanın XHTML1.1 kurallarının geçerli olduğu bir XHTML sayfası olduğunu gösterir.

HTML 5

Farkettiyseniz en son sürüm olan HTML 5 diğer tanımlamalara göre oldukça basit ve kısadır.

Bir çok HTML editörü DOCTYPE tanımını otomatik ekleyecektir.

DocType bilgisi <html> etiketinden de önce, sayfanın en üstünde bulunmalıdır.

Sayfanızı hazırlamaya başlamadan önce yukarıdaki belge tiplerinden size uygun olanını seçip tasarımınızı ona göre yapmalısınız. Hazırladığınız sayfaya sonradan DocType eklemek veya değiştirmek tasarımınızı etkileyecektir.

Her tarayıcıda aynı görünen sayfalar hazırlamak için strict (kesin) tanımlama tipi kullanmak, hatta xhtml kullanmak en doğru seçim olacaktır. Fakat hem strict hem de xhtml`in çok katı kuralları olduğundan dikkatli olmak gerekiyor.

Hem güncel ve hem de sorunsuz tasarımlar için tercih edilmesi gereken standart HTML 5’ dir, fakat HTML 5 güncel tarayıcılarda çalışmaktadır, eski sürümlerde sorun çıkartabilir.

<BASE> ETİKETİ

<base> etiketi bir HTML dökümanında daha sonra belirtilecek kaynakların aranması gereken temel URL adresini gösterir. Diyelim ki HTML belgesinde bir resme yer veriyorsunuz. HTML dosyasını siz hazırlıyorsanız muhtemelen şu şekilde yazarsınız:

Böyle bir tanım yapıldığında tarayıcı” resim.png” dosyasını ona atıf yapılan HTML dosyası ile aynı dizinde arayacaktır ve muhtemelen bulamayacaktır.

<base> etiketi tarayıcıya neyi nerede arayacağını belirtir.  HTML dökümanının en üst kısmına (meta etiketlerinin üst satırına) <base href=”https://www.egitimkanalim.com/resimler”> şeklinde bir tanımlama ekleyerek her resim için ayrı ayrı <img src=”https://www.egitimkanalim.com/resimler/resim.png” /> yazmaktan kurtulursunuz.

Ayrıca resimleri farklı bir dizine aldığınızda tüm linkleri tek tek düzenlemektense sadece <base> etiketini düzenlersiniz.

<META> ETİKETLERİ

Bu etiket, HTML dökümanının kendisi ve içeriği ile ilgili bilgileri sağlar. Örneğin dökümanın yazarı, içeriği ile ilgili anahtar kelimeler, dökümanın kısa tanımı gibi bilgileri girmemizi sağlar. Ayrıca sayfayı yenileme (refresh) ve sayfayı başka bir URL’ye yönlendirmeyi sağlar.  Meta tagları tarayıcılar ve arama motorları için çok önemlidir. Arama motorlarına yani google, bing, yandex, bing vs. sitelere sitenizin site içeriği hakkında ve sayfa yapısı hakkında bilgi sunar. Arama motorlarına istediği türde ve uygun meta tagları sitenize eklemeniz sayesinde, üst sıralarda yer almak kolay basittir. Sayfanızın üst sıralarda yer almasını istiyorsanız bu özellikleri doğru ve yaratıcı bir şekilde kullanmalısınız. SEO (Arama Motoru Optimizasyonu) için bu özelliğin değeri düşse de sayfalar için meta tagları olmazsa olmazlardandır. Meta tag’lar sayfa kodlarımızın yani <head> bu alana meta tagları gelecek </head> etiketleri arasına eklenir.

Şimdi Meta tagının alabileceği temel değerleri inceleyelim.

          <meta> etiketinin bitiş ifadesi yoktur; bunun yerine etiket kapatılmadan önce “/”  (sağa yatık slash) işareti eklenir.

CHARSET (KARAKTER TANIMI) 

Sayfanın içerik tipini ve karakter kodlamasını belirtir. Önemli bir özelliktir çünkü sayfanın karakter kodlaması varsayılan olarak ISO-8859-1’ dir. Eğer Türkçe bir sayfa yapınız varsa kodlamayı utf-8 yapmalısınız.

Burada charset=windows-1254  ifadesi tarayıcıya Windows’ta Türkçe karakter seti kullanmasını belirtiyor.
Burada charset=iso-8859-9 ifadesi tarayıcıya Windows dışı uygulamalarda Türkçe karakter seti kullanmasını belirtiyor.

Sayfanın içerik tipini ve karakter kodlamasını belirtir. Önemli bir özelliktir çünkü sayfanın karakter kodlaması varsayılan olarak ISO-8859-9’ dir. Eğer Türkçe bir sayfa yapınız varsa kodlamayı utf-8 yapmalısınız. İki çeşit yazılışı vardır.

Not: Http-equiv özelliği content özelliği ile HTTP üstbilgisi çiftini (bilgi-değer) belirtir.

Html5 ile gelen bazı yenilikler ile bu özellikte basit bir hale gelmiştir.

Yukarıdaki 3 farklı kullanım HTML 4 sürümüne aitken HTML 5 versiyonundaki kullanımı aşağıdaki gibidir.

HTML 5 sürümünde görüldüğü gibi oldukça sade bir hale getirilmiştir.

UTF-8 bir kodlama dilidir. Sitenizin latin alfabesiyle kodlandığını belirtir ve tarayıcılar buna göre sayfanızı okur, analiz eder. Bu etiketin olmadığı bir Türkçe sayfada Türkçe harfleri kullanamazsınız bozuk çıkar. Örneğin: ç,ş,ı,ğ vb. harfleri düzgün okunabilmesi için bu etiket kullanılmaktadır. Özel kodlamalarda bu karakter seti değiştirilebiliyor ancak en sık kullanılan kullanımı bu şekildedir. Bu etiketi kullanmasam ne olur diyenler için cevabı aşağıda ki resimdedir. 🙂

Şuan kullanılan birçok tarayıcıda artık bu sorun bulunmuyor. Sayfayı otomatik olarak Türkçe karakterlere uygun hale getiriyorlar ancak örneğin PHP dosyalarında HTML kullanırken bu etiketi muhakkak eklememiz gerekiyor. Yukarıda ki resim gösterildiği gibi bir sayfa istemiyorsanız bu etiketi kullanın.

KEYWORDS (ANAHTAR KELİME)

Arama motorları için sayfa içeriğini tanımlayacak sözcükler eklenmelidir. Kelimeler arasında mutlaka virgül olması gerekmekte ve 20 kelimeyi geçmemesi gerekmektedir. Çok fazla kelime eklerseniz sitenizi spam yapıyor diye arama motorları aşağı sıralara çeker.

Aynı kelimeyi defalarca tekrar etmekte spam sayılmaktadır.

DESCRİPTİON (AÇIKLAMA)

Sayfanın içeriği hakkında açıklama yapmamızı sağlar. Bu arama motorları için önemli bir özelliktir. Bu özelliği doğru ve düzgün bir biçimde kullanabilirsek sayfanın üst sıralara çıkması da kolaylaşır. Google için içeriğe yazabileceğiniz en fazla yazı karakteri 200 karakterdir.

AUTHOR (SAYFA YAZARI)

Sayfanın yazarını ya da editörünün ismini veya iletişim bilgilerinin belirtilmesini sağlar.

REFRESH (YENİLEME)

Belli bir süre ile geçerli url adresini yenileme ya da başka sayfaya yönlendirme işlemi yapar. Content özelliğine iki değer yazabiliriz; ”Saniye; URL “Sadece süreyi yani saniyeyi belirtirsek  süre dolunca geçerli sayfa yenilenecektir. Eğer süre ve URL belirtirsek  o süre bittiğinde belirtilen URL ye yönlendirilecektir.

Aşağıdaki örnekte sayfa 30 saniyede bir güncellenecektir.

Aşağıdaki örnekte ise sayfa 30 saniye sonra Google sitesine yönlenecektir.

ROBOTS (SAYFA TAKİBİ)

Arama motoru robotlarının site içindeki linklerin ve sayfa indeksinin nasıl davranacağını belirtebileceğimiz güzel bir özelliktir. Aldığı değerler ve işlevleri aşağıdaki gibidir.

  • Index: Güncel sayfanın dizine eklenmesini raporlar.
  • Follow: Sayfa içindeki bağlantıların ve linklerin izlenmesini botlara bildirir.
  • Archive: Sayfanın arama sonuçlarında önbelleğe kopyalanmasını bildirir.
  • No Index: Sayfanın dizine dahil edilmemesini bildirir.
  • No Follow: Sayfa içindeki bağlantı veya linklerin izlenmemesini bildirir.
  • All: Sayfadaki içeriğin indeksleme ya da hizmet için herhangi bir kısıtlama olmadığını bildirir. Bu default ( varsayılan ) değerdedir. Hiç bir etkisi olmaz.
  • None : ”No Index, No Follow” ile aynı özelliktedir.
  • No Archive: Sayfanın önizleme kopyasını önbellekte tutulmamasını bildirir.
  • No Snippet: Arama sonuçlarında sayfanın sadece başlığını ve metin bağlamını göstermesini bildirir.
  • No Odp: Arama sonuçlarında DMOZ dizinindeki açıklama yerine sayfanın kendi açıklamasını kullanılmasını sağlar. Sayfa Open Directory Project ( ODP ) başlığını ve açıklamasını görüntüler.
  • Noydir: Sadece Yahoo bu özelliği desteklemektedir.
  • No Translate: Arama sonuçlarında sayfanın çevirisinin yapılmayacağını bildirir.
  • No Image Index: Sayfanızın görüntülerinin Google’da görünmesini istemiyorsanız bu özelliği kullanabilirsiniz.
  • Unavailable_after: Sayfanızın belli bir tarihli indeksini Google arama sonuçlarından kaldırmak istiyorsak bu yeni özelliği kullanabiliriz.

İNDEX ENGELLEMESİ

Tarihli indexleri arama sonuçlarından kaldırılması için istek yollanmış oluyor.

CONTENT-LANGUAGE (İÇERİK DİLİ)

Sayfanın hangi dilde yayın yaptığının bilgisini verir.

ABSTRACT (ÖZET)

Sayfanın kısa özetinin belirtilmesini sağlayan özelliktir.

COPYRİGHT (TELİF HAKKI)

Sayfanın güncel Telif Hakkını belirtmemizi sağlar.

DESİGNER (TASARIMCI)

Sayfanın tasarımcısını belirtmemizi sağlar.

RATİNG (DEĞERLENDİRME)

Sayfa içeriğinin kimlere yönelik olduğunu belirtmemizi sağlayan bir özelliktir. 5 değer alır;

  • General ( Genel ) : Sayfanın herkese yönelik olduğunu belirtir.
  • Mature ( Olgun – Büyük ) : Güncel sayfanın yalnız büyükler için olduğunu belirtir.
  • Restricted : Sayfanın kısıtlı içerikte olduğunu belirtir.
  • 14 Years : Sayfanın sadece 14 yaş üstüne hitap ettiğini belirtir.
  • Safe For Kids : Sayfanın çocuklar için güvenli olduğunu belirtir.
Sayfa içeriği herkese yönelikse “All” yapılmalıdır.

CLASSİFİCATİON (SINIFLANDIRMA)

Sayfanın hangi kategoriler arasında olduğunu belirtebilirsiniz. Örneğin: ”Spor , Finans , Web Hosting , Yazılım ” vb.

RESOURCE-TYPE (KAYNAK TİPİ)

Sayfanın kaynak tipini belirtmemizi sağlar.

SUBJECT (KONU)

Sayfanın konusunu belirtmemizi sağlar.

DİSTRİBUTİON (DAĞITIM)

Sayfanın hangi bölgeye hitap ettiğini yani Sadece Yaşadığımız ülkeye mi yoksa tüm Dünya’ ya mı hitap ettiğimizi belirtmemiz mümkün. Aşağıdaki değerleri alır.

EXPİRES (GEÇERLİLİK SÜRESİ)

Sayfanın son aktif tarihini GMT formatında arama motorlarına bildirmemizi sağlar. Sayfayı daimi olarak geçersiz kılmak için “0”değerini vermemiz gerekir.

GENERATOR (KOD EDİTÖRÜ)

Sayfayı oluşturmak için kullanılan programları veya editörleri belirtmemizi sağlar.

LANGUAGE (SAYFA LİSANI)

Sayfanın default ( varsayılan ) dilini tanımlamamızı sağlar.  Tarayıcılara ve arama motorlarına sayfanın lisanını belirtmemiz açısından önemli bir özelliktir.

PUBLİSHER (YAYIMCI)

Sayfanın yayımcısını belirtmemizi sağlar.

REPLY-TO (E-POSTA)

Sayfanın aktif e-posta adresini tanımlamamızı sağlar.

REVİSİT AFTER (SONRAKİ ZİYARET)

Sayfanın güncel hali Google botları tarafından kontrol edilmektedir. Bu kontrol belli bir aralıkta olmaktadır. Bir sonraki kontrolün kaç gün sonra yapılacağını bu özellik ile belirlemeniz mümkün. Aşağıdaki örnekte 5 Günde bir botlar sayfanızı ziyaret edecektir.

VİEWPORT (UYUMLULUK GÖRÜNÜMÜ)

Görünüm, bir web sayfasının mobil cihazda nasıl görüntüleneceğini denetler. Görünüm olmadan, mobil cihazlar sayfayı tipik bir masaüstü ekranı genişliğinde, ekrana sığacak şekilde ölçeklenmiş olarak görüntüler. Bir görünüm ayarlamak, sayfanın farklı cihazlarda genişliği ve ölçeklenmesi konusunda denetim olanağı verir. Mobil cihazlarda iyi şekilde görüntülenecek biçimde optimize edilmiş sayfaların doküman başlığında width=device-width, initial-scale=1 ifadesini içeren bir meta görünüm olmalıdır.

Bu kod kullanıcının cihazında görünür alanı sabitleyecektir.

Ayrıca minimum-scale, maximum-scale ve user-scalable parametreleri de var. minimum-scale, maximum-scale parametreleri kullanıcının yakınlaştırma ve uzaklaştırma değerine belirlemek için kullanılır. user-scalable parametresi kullanıcının yakınlaştırma ve uzaklaştırma yapıp yapmayacağı belirler. İki değer alır yes ve no.

Erişebilirlik açısından minimum-scale, maximum-scale ve user-scalable kullanımı pek önerilmemektedir. Kullanıcı bazı durumlarda sitenin bazı alanlarını(örneğin resimleri) yakınlaştırmak istediğinde bunu engellediğimiz için bu imkândan mahrum kalacaktır.

<LİNK> ETİKETİ

Link etiketi; HTML dokümanımıza sayfa içi ve dış verilerin bağlantısını, yani stil dosyaları veya diğer adıyla CSS dosyalarını ve tarayıcımızın sekme kısımlarında görünen “favicon” dediğimiz ufak simgeyi, sayfamıza dâhil etmemiz için kullandığımız etiket türüdür. Dilimizde bağlantı anlamına gelmektedir. Link etiketi genellikle dış dosyaların bağlantılarını yani CSS dosyalarını, oluşturduğumuz HTML sayfalarımıza dâhil etmemize yarar. Buda HTML sayfamızın daha temiz ve daha düzgün kod yapısında olmasını sağlar. Çünkü link etiketi; HTML kodlarıyla oluşturduğumuz herhangi bir objenin boyutlarını, stillerini ve bunun gibi işlemleri CSS dosyalarında belirlediğimiz için, HTML sayfamızı daha kullanışlı hâle getirir.

Link etiketin yazılışı; <link> işareti ile başlar </link> işareti ile biter. Link etiketinin iki türlü kullanım şekli vardır. Bunlar; dâhili kullanım türü ve harici kullanım türü şeklindedir. İlk örneğimize dâhili kullanım türüyle başlayalım.

<STYLE> ETİKETİ

Style elementi sayfa dışı (harici) kullanımda link elementi ile kullanılır. Bazen sayfa içinde sadece o sayfaya özgü CSS kodları kullanmak isteyebiliriz. Bunun için <style> etiketini kullanmamız yeterlidir. Dilimizde stili, tarz anlamına gelmektedir. Bilindiği üzere HTML’de <style> etiketi dosyanın veya kodların stil bilgilerini içerir. Bu sayede CSS kodlarını ister inline olarak istersek de <link> etiketi kullanarak dışarıdan yükleyip çalıştırabiliriz. <style> etiketinin type özelliği (MIME Type olarakta bilinir) çalıştırılacak kodun veya dosyanın hangi tipte olduğunu belirtmek için kullanılır (Örnek; type=”text/css”). Ancak HTML 4’te ve HTML5’te type özelliği farklı tanımlanmakta. Şimdi aradaki farka bakalım.

HTML 4 sürümünde kullanımı aşağıdaki gibidir.

HARİCİ KULLANIM
DAHİLİ KULLANIM
HTML 5 sürümünde aşağıdaki gibi sade ve basit bir kullanımı mevcuttur.

HARİCİ KULLANIM
DAHİLİ KULLANIM
Sayfa içi style kullanımına bir örnek verirsek;

Görüldüğü gibi elementler için, tanımlanan id’ ler için, tanımlanan class’ lar için ayrı ayrı özellikleri atayabilmenin yolu CSS’ den geçiyor. CSS konusunu detaylı bir şekilde ilerleyen derslerimizde göreceğiz.

Yukarıdaki örnekte rel’ in açılımı relationship’ tir ve dilimizde ilişki anlamına gelmektedir. Sayfaya eklenecek dosyanın ilişkisini tarayıcıya belirtir. Örneğin; ilk satırda bir CSS dosyası eklenmiştir. Bunun için de rel atfına stylesheet yazılmıştır.

Favicon ekleme
Bu örnekte ise rel atfına ise shortcut icon yazılmıştır. Dilimizde kısayol ikonu anlamına gelmektedir. Sayfa ikonunu bu şekilde sitemize eklemiş olduk.

<SCRİPT> ETİKETİ

Bilindiği üzere HTML’de <script> etiketi kullanıcı taraflı (client-side) çalışmakta. Bu sayede Javascript kodlarını ister inline olarak istersek de src özelliği sayesinde dışarıdan yükleyip çalıştırabiliriz. Javascript ile form doğrulama ve kontrol işlemleri, veri kayıt işlemleri, veri gönderip alma işlemleri ve anlık sayfa içi işlemler gibi burada saymadığımız birçok işlemleri yapabiliriz.

Elbette sadece Javascript kodları değil diğer tipteki kodlar veya dosyalar içinde kullanılabilir. İşte <script> etiketinin type özelliği (MIME Type olarakta bilinir) çalıştırılacak kodun veya dosyanın hangi tipte olduğunu belirtmek için kullanılır.  Script etiketleri (tagları) genellikle <head>…</head> etiketleri içerisinde kullanılır. Fakat zorunlu kaldığımız durumlarda script etiketini <body>…</body> etiketleri içerisinde de kullanabiliriz.

Script etiketin yazılışı; <script> işareti ile başlar </script> işareti ile biter.

Script etiketinin iki türlü kullanım şekli vardır. Bunlar; dâhili kullanım türü ve harici kullanım türü şeklindedir. Ancak HTML 4’te ve HTML5’te type özelliği farklı tanımlanmakta. Şimdi aradaki farka bakalım.

HTML 4 sürümünde kullanımı aşağıdaki gibidir.

HARİCİ KULLANIM
DAHİLİ KULLANIM
HTML 5 sürümünde aşağıdaki gibi sade ve basit bir kullanımı mevcuttur.

HARİCİ KULLANIM
DAHİLİ KULLANIM

Harici kullanımda src attribute kullandım. Bununla demek istediğim şu bu HTML döklümanı harici bir dosya ile birlikte çalışacak. Dolayısı ile bu dosyanın adını ve konumunu src attribute içinde tanımladım. Burada tanımladığım dosya bir Jquery dosyası. Bir HTML belgesinde birden fazla script elementleri yer alabilir. Örnek olarak aşağıdaki gibi bir yapı olabilir :

Sayfa içi script kullanımına bir örnek verirsek;

Bu kod bloğunda görüldüğü üzere iki tane script elementi yer alıyor. İlk script içinde jquery kütüphanesini belirten dosyanın adı ve konumu yer alıyor. İkinci kısımda ise Jquery’nin temel özelliklerinin kullanıldığı bir kod bloğu var.  Script elementi head elementi içinde yer alabileceği gibi aynı zamanda body içinde de yer alabilir. Ama genel olarak kabul gören head elementi içinde kullanımıdır.

Bu arada önemli bir nokta bir HTML dökümanında script elementlerinin sırası önemlidir. Çünkü script içindeki kodlar bu verilen sıra ile çalışırlar. Bu örnekte öncelikle jquery kütüphanesinin yeri gösterilmiştir. Daha sonra diğer kod bloğu verilmiştir.

<TİTLE> ETİKETİ

Başlık olarak doğrudan dilimize çevrilebilir. Sayfa başlığını belirtir.

Kullanımı şu şekildedir:

Ekran görüntüsü aşağıdaki gibidir. Tarayıcınızdaki sekme başlığına bakarsanız <title> etiketini görebilirsiniz.

Bu dersimiz bu kadar bir sonraki dersimizde HTML döküman yapısını anlatacağım ve HTML 5 dökümanı oluşturacağız. Bir sonraki dersimizde görüşmek üzere….

 

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