HTML 5

HTML 5

Tarhi : 25-04-2017 12:11:17 | Yazar : ÇAĞLAR BOSTANCI

HTTP PROTOKOLÜ (Heyper Text Transfer Protocol)
SERVER – SUNUCU
CLIENT – İSTEMCİ
Web tarayıcıları http protokolünü kullanarak isteci ile sunucu arasında akışı sağlayan yazılımlardır. Web tarayıcıları sunuculardan aldıkları
istemci tarafına görsel olarak sunarlar. Sunucunun gönderdiği bilgileri web taraycısı olarak standart HTML dil yapısına göre
yorumladıktan sonra web sayfası olarak kullanıcının monitöründe görüntüler. Bu görselliği sağlayan temel dile HTML denir. Web taraycısı
sunucudan aldığı bilgileri istemci tarafında görüntülerken aynı zamanda istemciden aldığı bilgiyi tekrar sunucuya gönderir. Sunucu ile
istemci arasındaki istek yanı transfer işlemleri bu şekilde gereçekleşir. Günümüzde en çok kullanılan web tarayıcılarının başında Internet Explorer,
Firefox,Crome,Safari ve Operadır.
En SAYFASI ADRESİ
Webpopiler sunucu(SERVER – SUNUCU) dilleri => PERL, PHP, ASP, RUBY, CGI vb. gibi dillerdir.
(Uniform Resource Locator) ile tanımlanmış protokol bilgilerine göre gerçekleşir. URL üç parçadan oluşur
Taraycı dilleri => JAVASCRIPT, HTML..
WEB tarayıcıları istemci(client) ile web sunucusu(server) istek yanıt döngüsünü web sayfaları adresleri ile gereçekleştirir. Web tarayıcısı
(Browser) istemciden aldığı adresi çözümleyerek adresin bağlı olduğu sunucuya aktarır. Sunucu bu adres bağlı kayıtların geçerli olup
olmadığını denetledikten sonra istenilen cevabı web sayfasının adres bilgisine web tarayıcıya bildirir. Bu işlemler web sayfasının URL
PROTOKOL(HTTP/HTTPS)=> SİTE ADI => DİZİN ya da DOSYA
http:// www. siteadi.com /dersler/html-php/index.html
host name domain-name dizin yolu dosya

HTTP: İstemci ile sunucu arasındaki veri transfer protokolü.
WWW : Web uygularmaları için tanımlanmış bir adres olduğunu belirtir.
siteadi : Sitenin tam olarak adıdır.
.com = Ticari alan adı olarak üretilmiş olmasına rağmen günümüzde her tür site için kullanılmaya başlamıştır.
.net = İngilizcede ağ uzantısı anlamına gelen “network” kelimesinden kısaltılmıştır.
.org = Organizasyonlar için kullanılır “organization” kelimesinin ilk üç harfi kullanılmıştır.
.biz = Bu uzantı iş, ticaret anlamına gelen “business” kelimesinden kısaltılmıştır.
.info = Uzantısı bilgi anlamına gelmektedir. İngilizcede “information” kelimesinin kısaltılmışıdır.
.pro = Profesyonel anlamına gelmektedir. İngilizcede professional” kelimesinin kısaltılmışıdır.
.name = Gerçek isimler için bu uzantı kullanılmaktadır. İngilizcede “nickler” kelimesinden üretilmiştir.
.edu = Eğitim kurumları için türetilmiş bir alan adı uzantısıdır. “education” kelimesinin kısaltılmışıdır.
.gov = Devlet kuruluşlarının alan adı uzantısıdır. “government” kelimesinin kısaltılmışıdır.
.tr = Türkiye
.us = Amerika Birleşik Devletleri
.de = Almanya (Deutschland)
/dosya/dizin: Belirtilen yola göre adres teki dizene ulaşılır ve gerekli işlemler yapılır. Eğer dizin adı belirtilmemişse varsayılan dosya
okunur. index.php, index.html, index.asp, index.pel, index.cgi, default.asp, default.aspx

HTML5
* Sayfanın girişinde belge tanımlama yapılır.
ÖRN:
<!DOCTYPE html>
* Güncel bütün tarayıcılar HTML5’i desteklemektedir.
* XHTML standartlarına göre bütün html kodları küçük yazılır. HTML5’de böyle bir kısıtlama yoktur.
* Boş element grubunda bulunan elemenrler hariç başlangıç ve bitiş elementleri mutlaka bulunamalıdır.
* Etiketler hiyerarşik bir şekilde kullanılmalıdır. Açılan etiket tekarar kapanmalı / iç içe elementler kapanmamalıdır.
* Element hiyerarşisinde en son yazlan elementin kapanış etiketi ilk öncedir. Baba-Çocuk-Torun ilişkisi.
GK => Hiyerarşi : Yunanca kökenli bir sözcüktür. Bir toplumda veya bir toplulukta yer alan kişileri alt-üst görev ve yetkilerine göre
sınıflandıran sistedir.

1 -> Belge tanmımlamak için kod başlangıcına DOCTYPE direktifi yerleştirilir.
DOCTYPE direktifi HTML sayfalarında kullanılacak html in sürüm standartları ile uyumlu desteğini tanımlar
HTML5, XHTML ve HTML4.1 standartları bu direktife bağlıdır. XHTML 1.1 sürümü için DOCTYPE bildirmi aşağıdaki gibidir.

XHTML 1.0 sürümü içinse tanımlama aşağıdaki gibidir.

2 -> <html> Web sayfasının kök elementidir. Web sayfasını tanımlayan bu blog arasındaki diğer elementler hiyerarşik bağ ile bir birine bağlıdır.
3 -> <head> Web sayfasının bilgilendirilen bigilerin bulunduğu bloktur. <title>, <sytle>,<link>,<meta>,<script> gibi önemli elementler burada yazılır.
3 -> <title> Bir web sayfasını tanıtan ve içerikle ilgili başlığın yazıldığı sayfa bilgilendirme etiketidir. YAZILMASI ZORUNLUDUR. Google aramaları için önemlidir.
4 -> <meta> etiketi web sayfasındaki yazı karakterini tanmılamak için kullanırlır.
5 -> Body Web sayfasının gövde elementidir. Html kodları bu bölüme yazılır.

ÖRNEK ETİKETLER

META ETİKETİ
<meta> Etiketi ile bir web sayfasını ya da sitenin arama motorları için bilglerin tanımlanmasını sağladığı gibi, içerinğin kodlama biçiminide sağlar.<meta> etiketi web tarayıcıları için bilgiler bulundurur.<meta> etiket <head></head> etiketleri arasında yazılarak kodlanır.

Bir web sayfasının içeriği ile ilgili kısa bir açıklama yapılmasını sağlar. Arama motorlarına bilgi vermek amacı taşır. Arama motorları kısa bir açıklama ile web içeriğindeki bilgi tutarlılığına göre web sayfasını kaydedecektir.

Bir web sayfasının içeriğini temsil eden ve aralarına virgül konarak tanımlanan anahtar kelimelerini arama motorlarına tanıtmamaızı sağlar. Arama motorları bu kelimleri indexler ve bu kelimelerin geçtiği bir aramada web sayfasını sıralar. Bu kelimeler web sayfası içeriği ile uyumlu olmalıdır. Aksi halde arama motorları bu siteyi pas geçer.

Web sayfası tasarımı ve içeriği ile ilgilenen kişinin bilgilerini taşır. Çok nadiren kullanılır.

Web sayfası karakter kodlamasını tanımlar. Tarayıcı bu kodlamaya göre içeriği görüntüler.

Web sayfasını otuz sani içerisinde yeniler.

Bir <meta> alanı öğesi sayfanın boyutları ve ölçeklendirme nasıl kontrol edileceğine ilişkin tarayıcı talimatlar verir.

content = aygıt genişliği kısmı (cihaza bağlı olarak değişecektir) cihazın ekran genişliği takip genişliğini belirler.

İlk ölçekli = 1.0 kısım sayfa ilk tarayıcı tarafından yüklenen ilk yakınlaştırma düzeyini ayarlar.

İşte bir web sayfası örneğidir olmadan görünüm meta etiketi ve aynı web sayfasından ile görünüm meta etiketi:

Metin Listeleme

Liste: iç içe listeler – sıralı

TABLO ELEMENTİ

Table elementi HTML sayfalarına Excel veya Word belglerindeki tablo özelliklerine benzer bir işlev kazandırır.<table> elementil ile beraber <th>,<td>,<tr> etiketleri kullanılır. border=”1″ tabloya kalınlık belirlemek için kullanılır.
<table></table> => Ana elementir. Tablo tanımlaması yapılır.
<tr></tr> => Satır direktifi ya da elementi.
<th></th> => Başlık direktifi ya da elementi.
<td></td> => Sutun ve satırların kesiştiği hücreleri oluşturmaya yarayan etiket.
<caption></caption> => Tablo başlığı.
<thead> Sutun başlıklarını gruplamada kullanılır.
<tbody> Tablonun gövdesini belirlemede kullanılır.
<tfoot> Tablonun sonun alt bölümünü gruplamada kullanılır.
colspan=”sayı” => satırları birleştirmeye yarıyor.
rowspan=”sayı” => sutunları birleştirmeye yarıyor.

GRAFİK EKLEME 

<img> Web sayfasına her türlü grafik içeriğinin eklenmesini ve gösterilmesini sağlar.

src=”url” => Resim dosyasının adı ve bir web sitenin adres yolu.
alt=”metin” => Grafiği tesilen bir açıklamayı gösterir.
title=”metin” => Resmin başlığını içerir.
width=”sayı” => Resmin genişliğini belirler.
height=”sayı” => Resmin yüksekliğini beliler.
figure => Web sayfasındaki görselleri (resim, video gibi içerikleri) gruplamak için kullanılır.
figcaption => Figure ile gruplanan resimlere açılama eklemeye yarar.

LİNK EKLEME

Web sayfalarının içeriğine erişmek için kullanılan köprülerdir.

_blank => Bağlantıyı yeni bir pencerede açmak için kullanılır.
_self => Bağlantıyı aynı pencerede açmak için kullanılır.
_top => Bağlantıyı aynı pencere içerisinde en üstte açmak için kullanılır.
_parent => Sayfa daha önce açık olan bağlantının yerine açar.

DOSYA YOLU ANLATIMI

BASE KULLANIMI

RESİME LİNK VERME

ÇAPA KULLANIMI

İFREME KULLANIMI

HTML SAYFA DÜZENİ
Header – Bir belgenin veya bir bölüm için bir başlık tanımlar
Nav – gezinme bağlantılarının bir kabı tanımlar
section – Bir belgedeki bir bölüm tanımlar
article – bağımsız müstakil yazı tanımlar
aside- (bir kenar çubuğu gibi) içeriğinden bir yana içerik tanımlar
footer – Bir belgenin veya bir bölümü için altbilgi tanımlar
details – ek ayrıntıları tanımlar
Özeti – summary elemanı için bir başlık tanımlar

Reklam Alanı