Giri┼č yap

HTML'de ├ťst Bilgiler

─░lk HTML dersimizde <head> etiketini ├Â─črenmi┼čtik ve temel etiketlerden birisi oldu─čunu s├Âylemi┼čtik. Ayr─▒ca <body> etiketine yaz─▒lanlar─▒n son kullan─▒c─▒ya g├Âsterilece─čini, arka planda ├žal─▒┼čacak di─čer t├╝m kodlar─▒n <head> i├žerisinde yaz─▒lmas─▒ gerekti─činden de bahsetmi┼čtik. Hatta ayn─▒ ├Ârnekte <head> etiketi i├žerisinde yine varsay─▒lan bir etiket olan <title> etiketini kullanarak web sayfas─▒n─▒n ba┼čl─▒─č─▒n─▒ belirlemi┼čtik. ┼×imdi bu etiketin kullan─▒m alanlar─▒na daha detayl─▒ bakal─▒m.

<head> etiketi i├žerisinde tan─▒mlanan her etiket ├╝st bilgi g├Ândermek i├žin tan─▒mlan─▒r. Bunlar─▒n i├žerisinde ┼ču etiketler vard─▒r;

  • <title> - Sayfa ba┼čl─▒─č─▒n─▒ belirler
  • <style> - HTML i├žerisinde CSS kullan─▒m─▒n─▒ sa─člar
  • <meta> - Her t├╝rl├╝ ├╝st bilgiyi tan─▒mlamak i├žin kullan─▒l─▒r.
  • <link> - Bir CSS dosyas─▒n─▒ sayfada dahil etmeye yarar
  • <script> - HTML'de javascript kullan─▒m─▒n─▒ sa─člar. Ayr─▒ca javascript dosyalar─▒n─▒ ├ža─č─▒rmaya da yarar.
  • <base> - Daha ge├žen derste ├Â─črendi─čimiz bu etiket varsay─▒lan yolu belirler.

<style> Etiketi

Bu etiket HTML sayfa i├žerisinde CSS kodu yazmam─▒z─▒ sa─člar. ├ľrnek vermek gerekirse;

<style>
body {
    background-color: #eee;
}
h1 {
    font-size: 30px;
}
</style>

Genelde <head> etiketi i├žerisine yaz─▒lsa da zaman zaman body i├žerisine de yaz─▒labiliyor. Fakat ┼č├Âyle bir sorun var, kodlar yukar─▒dan a┼ča─č─▒ do─čru yorumland─▒─č─▒ i├žin CSS kodlar─▒ her zaman en ├╝stte olmal─▒, aksi taktirde stiller sayfa y├╝klendikten sonra gelecektir buda ├žirkin bir g├Âr├╝nt├╝ olu┼čturur.

Bu etiket mevcut sayfa ile ├ža─čr─▒lacak olan sayfa aras─▒ndaki ili┼čkiyi tan─▒mlar. ├ľrne─čin CSS dosyas─▒ ├ža─č─▒rabiliriz, oda ┼č├Âyle;

<link rel="stylesheet" type="text/css" href="stil.css">

<meta> Etiketi

<meta> etiketi web sayfalar─▒nda ├╝st bilgi tan─▒mlamak i├žin kullan─▒l─▒r. ├ľrne─čin sayfan─▒n karakter kodlamas─▒n─▒, a├ž─▒klamas─▒n─▒, anahtar kelimesini, yazar─▒n─▒ vb. ├╝st bilgilerini tan─▒mlamak i├žin kullan─▒l─▒r.

Taray─▒c─▒lar, ├╝st bilgileri sayfay─▒ nas─▒l g├Âsterece─čini belirlemek i├žin kullan─▒rlar. Arama motorlar─▒ da genelde bu ├╝st bilgilere g├Âre yorumlarlar, bu a├ž─▒dan bu ├╝st bilgileri do─čru ┼čekilde belirlemek SEO i├žin ├žok ├Ânemli. Hayda.. Birde SEO diye bir ifade ├ž─▒kt─▒ der gibisiniz? SEO yani uzun ad─▒yla Search Engine Optimization yani t├╝rk├žesiyle Arama Motoru Optimizasyonu, web sayfalar─▒n─▒n arama motorlar─▒nda daha ├╝st s─▒ralarda ├ž─▒kmas─▒n─▒ sa─člar. Bu konuya daha sonra uzun uzun geliriz. ┼×imdi gelin, <meta> etiketinin kullan─▒m alanlar─▒na bakal─▒m.

Sayfan─▒n karakter kodlamas─▒n─▒ belirlemek i├žin;

<meta charset="UTF-8">

Sayfan─▒n ba┼čl─▒─č─▒n─▒ belirlemek i├žin;

<title>PROTOTURK | Yaz─▒l─▒m ve Tasar─▒m Dersleri</title>

Sayfan─▒n a├ž─▒klamas─▒n─▒ belirlemek i├žin;

<meta name="description" content="Web dilleriyle ilgili T├╝rk├že haz─▒rlanm─▒┼č i├žerikler, dersler ve daha fazlas─▒..">

Bu ┼čekilde kullan─▒ld─▒─č─▒nda arama motorlar─▒nda ┼ču ┼čekilde g├Âz├╝kecek;

Sayfan─▒n anahtar kelimelerini belirlemek i├žin;

<meta name="keywords" content="HTML, CSS, JavaScript">

Sayfan─▒n yazar─▒n─▒ belirlemek i├žin;

<meta name="author" content="Tayfun Erbilen">

Sayfay─▒ belirlenen bir s├╝re i├žerisinde yenilemek i├žin; (Bu ├Ârnekte 10sn olarak belirledik)

<meta http-equiv="refresh" content="10">

Viewport (G├Âr├╝n├╝m) Ayarlama

Haz─▒rlad─▒─č─▒n─▒z HTML sayfalara hi├ž mobilde bakmay─▒ denediniz mi? E─čer viewport de─čerini belirlemediyseniz yani g├Âr├╝n├╝m ayar─▒n─▒, o zaman mobile duyarl─▒ web sayfalar─▒ yapm─▒yorsunuz demektir. Normal ┼čartlarda mobilde g├Âr├╝n├╝m├╝n├╝ ayarlamak CSS ile yap─▒lacak bir ┼čey ancak HTML taraf─▒nda viewport'u yani g├Âr├╝n├╝m├╝ ayarlamak i├žin bir etiket bulunuyor. Hemen inceleyelim;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Bu ├Ârnekte ├Ânemli olan content i├žerisindeki de─čerler. Bunlar─▒ tek tek a├ž─▒klamak gerekirse;

  • width=device-width - G├Âr├╝n├╝m ayarlar─▒nda geni┼čli─či girilen cihaz─▒n geni┼čli─či ne ise o olarak belirle. Bu mant─▒kta mobilden girilirse mobil geni┼člik, normal bilgisayardan girilirse taray─▒c─▒n─▒n ├ž├Âz├╝n├╝rl├╝─č├╝ belirlenir.
  • initial-scale=1.0 - Sayfan─▒n yak─▒nl─▒k seviyesidir. 1.0 = 100% - Daha b├╝y├╝k yapmak isterseniz ├Ârne─čin 1.7 olarak belirleyip test edebilirsiniz.
  • user-scalable=no - Kullan─▒c─▒lar─▒n sayfay─▒ yak─▒nla┼čt─▒rmas─▒n─▒ engellemek i├žin kullan─▒l─▒r.
  • minimum-scale=1.0 - Sayfan─▒n minimum yak─▒nl─▒k de─čeri. (1.0 = 100%)
  • maximum-scale=1.0 - Sayfan─▒n maksimum yak─▒nl─▒k de─čeri. (1.0 = 100%)

Yani k─▒saca bu kodu ekledi─čimizde yak─▒nl─▒k 100% olarak g├Âz├╝kecek yak─▒nla┼čmayacak ve geni┼člik girilen cihaz─▒n geni┼čli─či olacak. width=device-width yerine width=1300 yazarsan─▒z geni┼čli─či 1300px olarak belirlemi┼č olursunuz ama bu tarz kullan─▒mlar─▒ yoktur, bu kullan─▒m en standart kullan─▒md─▒r.

Soldaki viewport kullan─▒ld─▒─č─▒nda d├╝zg├╝n g├Âz├╝ken resim, sa─čdaki ise viewport'suz mobil versiyon.

  

<script> Etiketi

HTML sayfa i├žerisinde Javascript kodlar─▒n─▒ ├žal─▒┼čt─▒rmak i├žin bu etiket kullan─▒l─▒r. ├ľrnek vermek gerekirse;

<script>
document.body.innerHTML = 'Body etiketinin i├žeri─čini de─či┼čtirdik.';
</script>

Bu ├Ârne─či anlamad─▒ysan─▒z sorun etmeyin, ├ž├╝nk├╝ Javascript'e hen├╝z hi├ž giri┼č yapmad─▒k :) Javascript b├Âl├╝m├╝ alt─▒nda bolca irdeleyece─čiz.

<base> Etiketi

Bu etiketi kullanarak sayfa i├žerisinde ba─člant─▒ verdi─čimiz t├╝m adreslerin varsay─▒lan ba┼člang─▒├ž de─čerlerini belirlemek i├žin kullan─▒l─▒r. ├ľrnek vermek gerekirse;

<base href="https://prototurk.com/upload" target="_blank">

Bunu <head> etiketi i├žerisine yazd─▒─č─▒n─▒zda art─▒k ba─člant─▒ verdi─činiz t├╝m adresler https://prototurk.com/upload alt─▒nda aranacakt─▒r. Ayr─▒ca target="_blank" dedik, buda her ba─člant─▒n─▒n yeni sekmede a├ž─▒lmas─▒n─▒ sa─člar. Yani genel bir tan─▒m yapmak i├žin kullan─▒l─▒r genelde. ├çok s─▒k kulland─▒─č─▒m etiketlerden biridir :) Protot├╝rk'├╝n kaynak kodlar─▒na bakarsan─▒z g├Ârebilirsiniz.

Tayfun Erbilen
126 g├╝n ├Ânce yazd─▒. Son g├╝ncelleme: 126 g├╝n ├Ânce