Html Nedir - Kırklareli Üniversitesi Personel Web Sistemi

advertisement
HTML TEMELLERİ
Öğr. Gör. Emine TUNÇEL
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
Html Giriş
Html Nedir?
• Açılımı Hyper Text Markup Language tam Türkçe’si
bulunmamakla birlikte HiperMetin İşaretleme dili denilebilir
• Web sayfalarını oluşturmak için kullanılan ana dildir.
• Önceden tanımlanmış, biçimlenmiş etiket (tag) lerini
kullanır.
• Bir programlama dili değil, işaretleme dilidir.
• Html dosyaları, sunucu bilgisayarda .html ya da .htm
uzantılı olarak saklanır
Html Giriş
Html Nedir?
• Html etiketlerinin görevi, web sayfalarının birbirine nasıl
bağlanacağını; sayfa içindeki metin, resim vb. elemanların nasıl
yerleşeceğini belirlemektir.
• Sunucudan istemciye gelen web sayfasının içeriği bu
etiketler vasıtasıyla biçimlendirilerek ziyaretçiye sunulur.
• İçeriğin biçimlendirme görevini İnternet Explorer, Firefox,
Chrome gibi web tarayıcıları üstlenmiştir.
Html Giriş
Html Nedir?
• Html tasarlanırken son derece basit ve anlaşılır olması
planlanmıştır.
• Bu nedenle özel programlara ihtiyaç duyulmadan sadece
NotePad ile yazılabilir.
• Günümüzde html kodlarını otomatik olarak oluşturan bir
çok editör programı mevcuttur. Bunların bazıları Dreamweaver,
Frontpage, Corel Web Suite olarak sıralanabilir.
XHTML
XHtml Nedir?
• XHTML açılımı eXtensible Hyper Text Markup Language
yani html’in hem genişletilmiş hem de daha işlevsel olan
versiyonudur.
• Html ve Xml yapılarının World Wide Web Consortium
(W3C) tarafından 2001 yılında birleştirilerek XHTML 1.0 olarak
duyurmasıyla ortaya çıkmıştır.
• XML (eXtensible Markup Language) ise genişletilmiş
işaretleme dilidir. Şimdilik XML’in daha önceden tanımlanmış
etiketlerle
değil
kullanıcının
tanımladığı
etiketlerle
oluşturulduğunu bilmemiz yeterlidir.
XHTML
Neden XHtml?
• Html de uyulması gereken kurallar daha gevşektir. Bu
nedenle çoğu zaman düzgün bir şekilde gösterilmeyen sayfalar
ortaya çıkmaktadır.
• Xhtml de ise belirli katı kurallar bulunmaktadır. Böylece
hem görüntü hem de hız açısından daha işlevsel sayfalar
oluşturulur.
• Örneğin DOCTYPE etiketi kullanılmak zorundadır.
• Arama motorları açısından da indekslemenin daha çabuk
olması ve üst sıralarda yer alabilmesi için Html’den daha katı
kurallara sahip Xhtml’in kullanılması daha iyi olacaktır.
XHTML
XHtml’de Uyulacak Kurallar
• Açılan tüm etiketler kapatılmalıdır.
• Tüm etiketler ve özellikler küçük harflerle yazılmalıdır.
• Etiket özelliklerine ait değerler çift tırnak içerisinde
yazılmalıdır.
• Etiket özellikleri değer almadan tek başına kullanılamazlar.
• İç içe girmiş daha bir biri içerisinde yuvalanmış elemanlarda
etiketin kapanış sırasına dikkat edilmelidir.
HTML Etiketleri
HTML Etiketleri
• Html biçimlendirme etiketlerine genellikle Html
Etiketleri denir.
• Her Html etiketi önce açılır ve sonra
kapatılır.(istisnalar hariç)
• <etiket>…</etiket> ifadesi gibi önce başlangıç
etiketi ve sonra / işareti eklenerek bitiş etiketi yazılır.
• Html etiketleri büyük-küçük harfe duyarlı değildir
yani <etiket> , <ETİKET> ve <Etiket> aynı görevi görür.
HTML Etiketleri
• <html> ve </html> etiketleri: Tarayıcıya bir html
dosyasının başlayacağını söyler. Html dosyasındaki son
etiket ise </html> ‘dir. Bu da tarayıcıya html dosyasının
sonlandığını söyler.
• <head> ve </head> etiketleri: arasında kalan
kısım, arka plan bilgilerini içerir. Tarayıcı penceresinde
görüntülenmez. Başlık gibi…
• <title> ve </title> etiketleri: arasında kalan kısım
dokümanınızın başlık bilgilerini içerir. Başlık tarayıcı
penceresinin en üstünde görüntülenir.
• <body> ve </ body > etiketleri: arasında kalan
kısım tarayıcı penceresinde görüntülenecek olan
kısımdır.
HTML Etiketleri
• YORUM SATIRI <!-- Yorum satırı --> kaynak kodu
içerisinde programcılar tarafından hangi satırın ne iş
gördüğünü anlatmaları için kullanılır. Bu satırlar sayfa
tarayıcı da görüntülenirken dikkate alınmazlar.
HTML’de Nitelikler
• Nitelikler (Attributes), Html öğelerine ek özellikler
eklenmesini sağlar
• Nitelikler daima özellik=" değer " ikililerinden oluşur.
• Nitelikler, daima başlangıç etiketleri içerisinde belirtilir.
• Niteliklerin değeri her zaman tırnak içerinde
belirtilmelidir.
• Etiket özellikleri yazılmadığında varsayılan değerlerini
alır.
• Örnek olarak yeni bir paragraf başlatan <p> etiketini
verebiliriz.
• Varsayılan olarak metin sola yaslanır.
• Ortalamak ya da sağa yaslamak için etikete özellik
eklenmelidir.
• <p align=" center" > İçerik </p>
<head> Etiketi
• Belgenin konusu, başlığı, URL’si, kullanılan dil gibi
ziyaretçiye görünmeyecek bilgiler yer alır
• Alt etiketleri
– <BASE> Etiketi
– <META> Etiketi
– <TİTLE> Etiketi
– <STYLE> Etiketi
– <LINK> Etiketi
– <SCRİPT> Etiketi
<head> Etiketi
• <BASE> Etiketi: Bir HTML dokümanında daha
sonra belirtilecek kaynakların aranması gereken temel
URL’i gösterir.
• Diyelim ki HTML belgesinde bir resme yer
veriyorsunuz. HTML dosyasını siz yazdığınızda bunu
muhtemelen şöyle yazarsınız:
• <img src=" resim.png"/>
• 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 büyük ihtimalle bulamayacaktır.
<head> Etiketi
• <BASE> Etiketi:
• Base etiketi server veya tarayıcıya neyi nerede
arayacaklarını bildirir.
• Html dokümanının başlık kısmına <base href="
http://website.com.tr/resimler/">
şeklinde
bir
tanımlama ekleyerek her resim için ayrı ayrı <img
src="http://website.com.tr/resimler/
resim.png"/>
yazmaktan kurtuluruz.
• Ayrıca resimleri farklı bir dizine aldığınızda
sitedeki bütün kodları tek tek düzeltmektense yalnızca
base etiketini düzenleriz.
<head> Etiketi
• <meta> Etiketi:
• Meta etiketi Html belgesi hakkında meta verileri sağlar.
Meta veriler tarayıcı da gözükmezler.
• Meta etiketleri genellikle description (açıklama),
keywords (anahtar kelime), authors (sayfanın yazarı) ve
last modified (son değiştirme tarihi) gibi meta verileri
tanımlamak için kullanılır.
• Meta verileri, sayfa yüklenirken nasıl görüntüleneceğini
belirlemek amacıyla tarayıcılar ve indeksleme yapmak
amacıyla da arama motorları kullanır.
• Meta verileri, isim/değer çiftleri şeklinde tanımlanır.
• Xhtml standartlarına göre <meta> etiketi mutlaka
kapatılmalıdır
<head> Etiketi
• <meta> Etiketi:
• Arama
motorları
tanımlanması :
için
anahtar
kelimelerin
•
Sayfa açıklamasının tanımlanması:
•
Karakter kodunun tanımlanması:
•
Sayfa yazarının tanımlanması:
•
Sayfanın yenilenme süresinin tanımlanması:
<head> Etiketi
•
•
<title> Etiketi:
Sayfa başlığını ekler.
• Tarayıcı da başlık çubuğunda <title></title>
etiketleri arasına yazılan başlık görüntülenir.
•
<style> Etiketi:
•
Sayfa içi stil belirleme de kullanılır
•
<link> Etiketi:
• Sayfaya ait stil dosyalarını harici olarak bağlamak
için kullanılır
<body> Etiketi
•
Html belgesinin tüm içeriğinin yer aldığı bölümdür.
•
Bu bölümde yer alan içeriğin tümü tarayıcı da görüntülenir.
• Body etiketi ile birlikte kullanılacak özellikler ve aldığı
değerler aşağıdaki gibidir:
<body> Etiketi
Özellik
Değer
Açıklama
HTML5
HTML4.01
alink
renk
Linkin üzerine gelindiğinde tıklanırken
oluşacak rengi belirler
Kullanılmaz
Kullanılması
istenmiyor
background
URL
Sayfanın arka planına resim ekler
Kullanılmaz
Kullanılması
istenmiyor
bgcolor
renk
Sayfanın arka plan rengini belirler
Kullanılmaz
Kullanılması
istenmiyor
link
renk
Tıklanmamış linklerin rengini belirler
Kullanılmaz
Kullanılması
istenmiyor
text
renk
Sayfadaki metinlerin rengini belirler
Kullanılmaz
Kullanılması
istenmiyor
vlink
renk
Tıklanmış linklerin rengini belirler
Kullanılmaz
Kullanılması
istenmiyor
topmargin
piksel
Sayfanın üst kenar boşluğunu belirler
Kullanılmaz
Kullanılması
istenmiyor
leftmargin
piksel
Sayfanın sol kenar boşluğunu belirler
Kullanılmaz
Kullanılması
istenmiyor
Metin Biçimlendirme Etiketleri
•
<font> Etiketi
• Html dosyası içindeki yazının rengini,
büyüklüğünü değiştirmek için kullanılır.
tipini
ve
Metin Biçimlendirme Etiketleri
•
<b> veya <strong> Etiketi – Metni kalın yapar
•
<i> veya <em> Etiketi – Metni eğik yapar
•
<u> Etiketi – Metni alt çizgili yapar
•
<del> ve <s> Etiketi – Metni üst çizgili yapar
•
<sub> Etiketi – Metni alt simge olarak gösterir.
•
<sup> Etiketi – Metni üst simge olarak gösterir.
• <address> Etiketi – İtalik bir şekilde adres ve yer
tanımlamaları yapmak için kullanılır
• <abbr> Etiketi – Kısaltma yazmak için kullanılır. Üzerine
gelince ayrıntı çıkar.
Metin Biçimlendirme Etiketleri
•
H2SO4 ifadesini web sayfasında oluşturunuz
•
(X+Y)2=X2+2XY+Y2
• " Burada sigara içmek yasaktır" ifadesini aynı sigara
kelimesi kırmızı olacak şekilde yazdırınız
• Pınarhisar Meslek Yüksekokulu
ifadesini kelimelerin
birisi beyaz diğeri kırmızı olacak şekilde
mavi zemin
üzerine yazdırınız
Paragraf ile ilgili Html Etiketleri
• <p> Etiketi – Metnin içinde paragraf oluşturmak
için kullanılır. Otomatik olarak paragraf etiketlerinin
öncesinde ve sonrasında bir satır atlar.
• <br/> Etiketi – Alt satıra geçmek için kullanılır. Bu
etiketin başlangıç etiketi yoktur. Çoğu zaman sadece
<br> etiketi de kullanılır ancak bu özellik gelecek nesil
HTML (Xml ve Xhtml) dilinin ilk kuralını bozmaktadır.
Bu yüzden <br/> etiketini kullanmanız tavsiye edilir.
• <h1>…….<h6> Etiketleri – Başlık oluşturmak için
kullanılır. h1 en büyük puntoyu h6 ise en küçük puntoyu
belirtir.
Paragraf ile ilgili Html Etiketleri
• <nobr> Etiketi – Ekran çözünürlüğüne bağlı olarak
içeriğin yatayda kaydırılmasını engeller. İçerik tek
satırda görüntülenir
• <pre> Etiketi – Html kod sayfasındaki biçimin
aynen kullanılmasını sağlar. Enter ile alt satıra
geçilebilir. Bırakılan birden fazla boşluk tarayıcı da
görüntülenir.
• <center> Etiketi – İçeriği yatayda ortalar.
İçeriğin türü paragraf, başlık, resim, vs. önemli
değildir.
Paragraf ile ilgili Html Etiketleri
• <hr/> Etiketi - sayfaya yatay bir çizgi çizer ve
<br/> etiketinde olduğu gibi başlangıç etiketi yoktur.
• <hr/> etiketinin aldığı özellikler :
• Align: Çizginin sayfadaki konumunu belirler.
• Size: Piksel cinsinden çizgi kalınlığını belirler.
Varsayılan değeri 2 piksel’dir.
• Width: Çizginin kalınlığını belirler. Varsayılan
değeri %100’dür.
• Color: Çizginin rengini belirler.
• NoShade: Gölgeli olmayan çizgi
Paragraf ile ilgili Html Etiketleri
• <div> Etiketi – sayfa içerisinde katman oluşturmak
için kullanılır. Katmanlar stil kodları ile sayfanın
istenilen yerine alınabilir.
• <blockquote> Etiketi – Blok olarak verileri
gruplamak için kullanılır. Bloklar biraz içeriden
başlayarak devam eder. Girinti arttırma işlemi
• <span> Etiketi – Satır içindeki verileri bütünden
farklı bir şekilde biçimlendirmek için kullanılır. Örneğin
bir paragraf içinde sadece span etiketleri içine alınmış
bir cümle, bir kelime ya da sadece bir harf paragrafın
şekline uymayıp ayrı bir şekilde görüntülenecektir.
Html’de Listeleme
Html’de 3 çeşit listeleme yöntemi bulunmaktadır:
― Sıralı Listeleme
― Sırasız Listeleme
― Tanımlama Listeleri
• Listeye yeni bir eleman eklemek için <li> etiketi
kullanılır
•
Html’de Listeleme
•
Sıralı Listeleme <ol> Etiketi – Ordered List yani
sıralı listeleme anlamına gelen bu etiket harf veya
rakam ile işaretlenmiş listeler oluşturmak için kullanılır
• Type özelliği ile sıralamanın tipi belirlenir. Aldığı
değerler aşağıdaki gibidir:
 1 – Sayı ile listeleme
 a – Küçük harf ile listeleme
 A – Büyük harf ile listeleme
 i – Küçük roma rakamı ile listeleme
 İ – Büyük rom rakamı ile listeleme
Html’de Listeleme
•
Sıralı Listeleme <ol> Etiketi
Html’de Listeleme
•
Sırasız Listeleme <ul> Etiketi – Unordered List
yani sırasız listeleme anlamına gelen bu etiket numara
ve harfler olmaksızın çeşitli işaretler ile listeleme
yapmak için kullanılır
• Type özelliği ile listeleme de kullanılacak işaretlerin
tipi belirlenir.
• Type parametresinin aldığı değerler aşağıdaki
gibidir:
 circle – İçi boş daire
 disc– içi dolu daire
 square – içi dolu kare
Html’de Listeleme
•
Sırasız Listeleme <ul> Etiketi
Html’de Listeleme
•
Tanımlama Listeleri <dl> Etiketi – Definition
•
Örnek olarak;
List yani tanımlama listeleri anlamına gelen bu etiket
terim ve açıklamaları içeren listeler oluşturmak için
kullanılır.
• Genel Kullanımı aşağıdaki gibidir :
Html’de Listeleme
• Aşağıda çıktısı verilen sayfanın kaynak kodunu
yazınız.
Html’de Listeleme
• Aşağıda çıktısı verilen sayfanın kaynak kodunu
yazınız.
Html’de Resimler
• Html sayfalarına resim ekleyebilmek için <img>
etiketi kullanılır.
•
•
•
•
•
•
•
•
•
src – resmin yolu
title – resmin üzerine gelindiğinde görüntülenecek başlık
alt – resim yüklenmediğinde görüntülenecek metin
width – resmin genişliği
height – resmin yüksekliği
align – resmin sayfadaki konumu
border – çerçeve
hspace – resmin yanındaki nesnelere olan yatay uzaklığı
vspace – resmin yanındaki nesnelere olan dikey uzaklığı
Html’de Resimler
•
Src parametresi
<img src="Resim.jpg"> resim
onu çağıran html dosyası ile aynı
klasörde
<img src=
"Resimler/Resim.jpg">
Resim dosyası onu çağıran html
dosyasının bulunduğu klasörden
bir seviye aşağıda Resimler
klasöründe
<img src="../Resim.jpg">
Resim dosyası onu çağıran html
dosyasının bulunduğu klasörden
bir seviye yukarıda
Html’de Resimler
•
align parametresi
<img src="Resimler/web.jpg"
width="50" height="50" border="1"
align="top">
<img src="Resimler/web.jpg"
width="50" height="50" border="1"
align="middle">
<img src="Resimler/web.jpg"
width="50" height="50" border="1"
align="bottom">
<img src="Resimler/web.jpg"
width="50" height="50" border="1"
align="left">
<img src="Resimler/web.jpg"
width="50" height="50" border="1"
align="right">
Html’de Linkler
• Başka bir bölüme, sayfaya, adrese link oluşturmak
için <a> etiketi kullanılır. 4 farklı şekilde link
verilebilir:
1. Sayfa arası link
2. Sayfa içi link
3. Dosya linki
4. Mail linki
Html’de Linkler
•
Sayfa arası link
•
<a href="http://www.milliyet.com.tr">Haberler</a>
•
<a href="hakkimizda.html">Hakkımızda</a>
•
<a href="http://www.facebook.com.tr">
<img src="facebook.png" /></a>
• <a href="iletisim.html" target="_blank" >
İletişim</a>
Html’de Linkler
•
Sayfa içi link
•
Uzun içeriğe sahip sayfalarda kullanılır.
• Eklenen bağlantı farklı bir sayfayı değil aynı sayfada
farklı bir bölümü işaret eder
• Sayfanın farklı kısımlarına bağlantı eklemek için
öncelikle bağlantı eklenecek satır veya paragraflara yer imi
konulur
•
Yer imi tanımlaması şu şekildedir:
•
<a name=" yer imi adı " > Gözükecek Metin </a>
•
Tanımlanan yer imine bağlantı oluşturmak için
•
<a href="#yer imi adı"> Gözükecek Metin </a>
Html’de Linkler
•
Dosya Linki
• Bir resim dosyası, müzik dosyası, winzip arşivi gibi
farklı türdeki dosyalara link vermek için kullanılır.
• <a href="D:\Muzik\Birsen Tezer\Hoşgeldin.mp3">
Tıkla ve İndir</a>
• <a href="C:\Users\EmineTuncel\Desktop\nivoslider3.2.zip">İndir
• <a href="D:\Film\Dedemin İnsanları\Dedemin
Insanlari.avi">indirmek için tıkla</a>
Html’de Linkler
•
Mail Linki
•
Belirtilen bir mail adresine bağlantı oluşturur
• <a href="mailto://emine.tuncel@kirklareli.edu.tr">
Bize sorun</a>
•
Konu belirtmek için;
• <a href="mailto://emine.tuncel@kirklareli.edu.tr
?subject=sorular">Bize sorun</a>
Download