Web Tasarımının Temelleri «HTML ETİKETLERİ - I» [email protected]Karabük Üniversitesi T.O.B.B. Teknik Bilimler Meslek Yüksekokulu Demir Çelik Kampüsü 78050 Karabük/TÜRKİYE KBÜ KARABÜK ÜNİVERSİTESİ Öğr. Gör. Dr. Abdullah ELEN https://www.elenium.net Belge No: TBP107/02 Revizyon: R-001 Yayın Tarihi: 26.09.2018 TBP107
33
Embed
KBÜ Web Tasarımının Temelleri · HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir. HTML komutları herhangi bir metin (text) düzenleme
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Web Tasarımının Temelleri« H T M L E T İ K E T L E R İ - I »
[email protected]ük Üniversitesi T.O.B.B. Teknik Bilimler Meslek YüksekokuluDemir Çelik Kampüsü 78050 Karabük/TÜRKİYE
HTML’nin Temel YapısıE s s e n t i a l S t r u c t u r e o f t h e H T M L
3
Æ
▪ HTML (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.
▪ HTML komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi, çeşitli web tasarımı editörlerini kullanarak da oluşturulabilir.
▪ HTML komutları etiketlerden (tag) oluşur.
▪ Html komutları yazılırken aşağıdaki kurallara dikkat edilmesi gerekir;▪ HTML komutları “<” ve “>” işaretleri arasına yazılır. Burada
yer alan“< >” etiketleme yapmak için kullanılan işarettir.
4
HTML’nin Temel Yapısı
<etiketAdi>…</etiketAdi>
<html><head>…</head>< body >…</body>
</html>
Æ
▪ HTML etiketleri yazılırken; ş, ç, ö, ü, ı, ğ gibi Türkçe karakterler kullanılmamalıdır.
▪ HTML komutları büyük küçük harf duyarlı değildir.
▪ Tümü büyük harflerle açılmış olan bir etiket tümü küçük harflerle yazılan aynı etiket ile kapatılabilir.
▪ Açılan her etiket kapatılmalıdır.
▪ İlk açılan etiket en son kapatılır ve etiketi kapatma sırasında “/” işareti unutulmamalıdır.
5
HTML’nin Temel Yapısı
<HTML><Head>…</hEAd>< BoDy >…</bodY>
</htmL>
Æ
▪ HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htmuzantısı ile saklanır.
▪ Kaydetme işlemi sırasında Dosya-Kaydet seçeneğine tıklanır.
▪ Dosya-Kaydet komutuna tıklandıktan sonra karşınıza gelen Farklı Kaydetpenceresinden sırasıyla "Dosya Adı" ve "Kayıt Türü" belirlenir.
6
HTML Dosyasını Kaydetme
Æ
▪ <html> etiketi, tarayıcıya bunun bir HTML belgesiolduğunu bildirir.
▪ <html> etiketi bir HTML belgesinin köküdür (Root).
▪ <html> etiketi, diğer tüm HTML etiketlerini kapsar (<!DOCTYPE> etiketi hariç).
▪ <html> etiketi, html kodlarının yazımına başladığımızı gösteren etikettir.
▪ Tüm html kodları <html>…</html> arasında yer alır.
▪ </html> ile html kodlarının yazımının bittiği anlaşılır.
7
<html>
<!DOCTYPE html>
<html>
…</html> Tüm kodlar
buraya yazılır!
Æ
▪ <!DOCTYPE> bildirimi, bir HTML belgesinde <html> etiketinden önce yazılır.
▪ <!DOCTYPE> bildirimi bir HTML etiketi değildir. Bu, sayfanın hangi HTML sürümü olduğu hakkında web tarayıcısına yönelik bir talimattır.
▪ HTML 4'te üç farklı, HTML5'te ise yalnızca bir tane <!DOCTYPE> bildirimi vardır.
8
<!DOCTYPE>
<!DOCTYPE html>
<html>
…</html>
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 5
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
Æ
▪ Hazırlayacağımız web sayfasına ait; sayfa başlığı (title), sitiller (style), komut dosyaları (script), siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan meta etiketleri vb. bilgilerin bulunduğu bölümdür.
▪ <head> etiketi içerisinde; <title>, <meta>, <style>, <link>, <script>, <noscript> ve <base> etiketleri bulunur.
▪ <head> etiketi HTML 4 için gereklidir. Ancak HTML5 için ihmal edilebilir.
9
<head>
<html><head>
<title>Sayfa Başlığı</title></head>< body >…</body>
</html>
<html><title>Sayfa Başlığı</title>< body >
…</body>
</html>
HTML 4 & HTML5 HTML5
Æ
▪ <body> etiketi, bir HTML belgenin gövdesini tanımlar.
▪ <body> etiketi; metin (text), köprüler (hyperlink), resimler (image), tablolar (table), listeler (list) vb. gibi bir HTML belgesinin görünür tüm elemanlarını içerir.
▪ alink, background, bgcolor, link, textve vlink gibi renk parametrelerini alır. Ancak bunların hiçbiri HTML5'te desteklenmez!
10
<body>
<!DOCTYPE html>
<html><body>
…</body>
</html>
Web sayfasında görünen tüm
nesneler buradadır!
Æ
▪ Kaynak koduna yorum eklemek için kullanılır.
▪ Yorumlar web sayfasını tarayıcılarda çalıştırdığınızda görüntülenmez.
▪ Kodunuzu açıklamak için yorumları kullanabilirsiniz, bu da kaynak kodunu daha sonraki bir tarihtedüzenlerken size yardımcı olabilir.
▪ Belge üzerinde istediğiniz bir yere yorum ekleyebilirsiniz.
11
<!--...-->
<!DOCTYPE html><!-- Bu ilk HTML sayfam --><html>
<body><!-- Burası belge içeriğidir. -->
…
</body></html>
Æ
▪ HTML başlıklarını tanımlamak için;<h1>, <h2>, <h3>, <h4>, <h5>, <h6> etiketleri kullanılır.
▪ <h1> en önemli, <h6> ise en az önemli olan başlığı tanımlar.
▪ <P> etiketi, bir HTML belgesinde paragraf tanımlamak için kullanılır.
▪ Web tarayıcıları, her bir <p> öğesinden önce ve sonra otomatik olarak bir miktar kenar boşluğu (margin) ekler. Kenar boşlukları CSS ile değiştirilebilir.
13
<p>
<!DOCTYPE html><html>
<body><p>Bu bir paragraf örneğidir.</p><p>Bu bir paragraf örneğidir.</p><p>Bu bir paragraf örneğidir.</p>
</body></html>
Æ
▪ <hr> etiketi, bir HTML sayfasındaki tematik bir değişikliği (örneğin; konunun değişmesi) tanımlar veya içeriği ayırmak (veya bir değişikliği tanımlamak için) kullanılır. Bu etiket kapatılmaz!
14
<hr>
<!DOCTYPE html><html>
<body><h1>HTML</h1><p>HTML web sayfalarını tanımlamak için kullanılan bir dildir.</p><hr><h1>CSS</h1><p>CSS, HTML nesnelerinin nasıl görüneceğini tayin eder.</p>
</body></html>
Æ
▪ <br> etiketi tek bir satır sonu ekler. Yani bir alt satıra geçmek için kullanılır. Bu etiket kapatılmaz!
15
<br>
<!DOCTYPE html><html>
<body><p>İnsanın kazandığı paradan değil,<br>paranın kazandığı insandan kork.<br>Necip Fazıl KISAKÜREK</p>
</body></html>
Meta EtiketleriM e t a Ta g s
16
Æ
▪ Meta etiketleri genellikle sayfa açıklaması (description), anahtar kelimeler (keywords), belgenin yazarı (author), son güncellemeleri ve diğer meta verileri (metadata) belirtmek için kullanılır.
▪ <meta> etiketleri her zaman <head>…</head> etiketinin içinde bulunur.
▪ Meta veriler, web tarayıcılar (içeriğin nasıl görüntüleneceği), arama motorları (anahtar kelimeler) veya diğer web servisleri tarafından kullanılabilir.
17
<meta>
Æ
▪ Meta etiketinde kullanılan parametreler aşağıdaki tabloda gösterilmektedir. HTML5 destekler HTML5 desteklenmez!
18
<meta>
Özellik (Attribute) Değer (Value) Açıklamalar
charset Karakter seti HTML belgesi için karakter kodlamasını belirtir.
content Metin "http-equiv" veya "name" özelliklerinin değerini verir.
http-equivcontent-type,default-style,refresh
İçerik özelliklerinin bilgileri için bir HTTP başlığı sağlar.
Web Sayfasının tüm cihazlarda iyi görünmesi için viewportu tanımla;
Æ
▪ HTML5, web tasarımcıları için <meta> etiketi ile görüntüleme alanı (viewport) üzerinde kontrol sahibi olmasını sağlayan bir yöntem geliştirmiştir.
▪ Bir viewport, web sayfasının görünen alanını ifade eder. Sayfanın boyutlarını ve ölçeklemesini nasıl kontrol edebileceğinize ilişkin tarayıcı talimatları verir.
▪ width=device-width, cihazın ekran genişliğine göre web sayfasının genişliğini ayarlar (Bilgisayar, telefon vb. aygıta bağlı olarak değişir).
▪ initial-scale=1.0, bir web sayfası tarayıcı tarafından ilk kez yüklendiğinde başlangıç yakınlaştırma (zoom) seviyesini ayarlar.
20
meta: viewport
Æ
▪ Aşağıdaki görüntülerde, bir web sayfasının viewport meta etiketi tanımlı olan ve tanımlı olmayan örneği verilmiştir. Aşağıdaki bağlantılara tıklayıp, örnekleri canlı olarak inceleyebilirsiniz…
1996'da bir W3C çalıştayında önerilmiştir ve 1999 yılında kullanım şekli HTML 4.01'in Ek-B kısmında açıklanmıştır. Ancak meta robot etiketi, HTML teknik özelliklerine hiçbir zaman resmi olarak eklenmemiştir.
Özel Meta Robots Etiketleri
Sitil EtiketleriS t y l e Ta g s
25
Æ
▪ Bir HTML belgesinin stil bilgilerinitanımlamak için kullanılır.
▪ <style> öğesinin içinde, HTML öğelerinin tarayıcıda nasıl işlenmesi gerektiğini belirtirsiniz.
▪ Bir HTML belgesinde birden fazla<style> etiketi içerebilir.
26
<style>
<html><head>
<style type="text/css">p {color: green;}
</style><style type="text/css">
h1 {color: red;}</style>
</head>< body >
<h1>Örnek Başlık</h1><p>Bu bir örnek paragraf metnidir.</p>
</body></html>
Örnek BaşlıkBu bir örnek paragraf metnidir.
HTML kodunun sonuç görüntüsü
<style type="text/css">… </style>
Æ
▪ Bir belge ile harici bir kaynak arasındaki bağlantıyı tanımlar.
▪ <link> etiketi harici stil sayfalarına bağlanmak için kullanılır.
▪ Bir HTML belgesinde birden fazla <link> etiketi içerebilir.
27
<link>
<html><head>
<link rel="stylesheet" type="text/css" href= "theme.css" /></head>< body >
<h1>Örnek Başlık</h1><p>Bu bir örnek paragraf metnidir.</p>
</body></html>
Örnek BaşlıkBu bir örnek paragraf metnidir.
HTML kodunun sonuç görüntüsü
p { color: green; }h1 { color: red; }
theme.css
Harici bir CSSdosyası!
Script EtiketiS c r i p t Ta g
28
Æ
▪ <Script> etiketi, istemci tarafı komut dosyasını (JavaScript) tanımlamak için kullanılır.
▪ <Script> etiketi, JavaScript kodlarını içerir ya da src özelliği aracılığıyla harici bir JavaScript dosyasını işaret eder.