KBÜ Web Tasarımının Temelleri · HTML (Hypertext Markup Language), web sayfaları hazırlamak...

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

KBÜKARABÜK ÜNİVERSİTESİ

Öğr. Gör. Dr. Abdullah ELEN

https://www.elenium.net

Belge No: TBP107/02Revizyon: R-001

Yayın Tarihi: 26.09.2018

TBP107

mailto:[email protected]

https://www.elenium.net/

İçindekiler

2

➢HTML’nin Temel Yapısı

➢Meta Etiketleri

➢Sitil Etiketleri

➢Script Etiketi

➢HTML5 Desteği Olmayan Etiketler

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><html>

<body>

…

</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.

12

<h1>,…,<h6>

<!DOCTYPE html><html>

<body><h1>Başlık 1</h1><h2>Başlık 2</h2><h3>Başlık 3</h3><h4>Başlık 4</h4><h5>Başlık 5</h5><h6>Başlık 6</h6>

</body></html>

Æ

▪ <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>


<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>


<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>


<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.

name

author,description,keywords,viewport

Meta veriler için bir ad belirtir.

scheme format/URI<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD"><meta name="identifier" content="0-2345-6634-6" scheme="ISBN">

Æ

Arama motorları için anahtar kelimelerin tanımlanması;

19

META Örnekleri

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

<meta name="description" content="Web Tasarımının Temelleri Ders Notları">

Web Sayfası için açıklama tanımlaması;

<meta name="author" content="Abdullah Elen">

Web Sayfasının yazarı/oluşturanı tanımlaması;

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

Web Sayfasını 30 saniyede bir tazele/yenile tanımlaması;

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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…

21

meta: viewport

Viewport YOK! Viewport VAR!

https://www.w3schools.com/html/example_withoutviewport.htm

https://www.w3schools.com/html/example_withviewport.htm

Æ

▪ HTML belgesinin karakter kodlamasını belirtir.

▪ Yaygın olarak kullanılan değerler:▪ UTF-8 Unicode için karakter kodlaması

▪ ISO-8859-1 Latin alfabesi için karakter kodlaması

▪ Teorik olarak, herhangi bir karakter kodlaması kullanılabilir, ancak hiçbir tarayıcı bunları anlamaz.

▪ Bir karakter kodlaması ne kadar yaygın kullanılırsa, bir tarayıcının bunu anlaması şansı o kadar iyidir.

▪ Tüm karakter kodlamalarını görüntülemek için IANA karakter setlerisayfasını ziyaret edebilirsiniz.

22

meta: charset

HTML 4: <meta http-equiv="content-type" content="text/html; charset=UTF-8">HTML 5: <meta charset="UTF-8">

http://www.iana.org/assignments/character-sets/character-sets.xhtml

Æ

▪ İçerik özelliklerinin bilgileri için bir HTTP başlığı sağlar.

23

meta: http-equiv

HTML 4: <meta http-equiv="content-type" content="text/html; charset=UTF-8">HTML 5: <meta charset="UTF-8">

<meta http-equiv="content-type | default-style | refresh">

Sözdizimi (Syntax)

Özellik (Attribute) Açıklamalar

content-typeBelge için karakter kodlamasını belirtir.<meta http-equiv="content-type" content="text/html; charset=UTF-8">

default-styleBelge için kullanılması tercih edilen sitili belirtir.<meta http-equiv="default-style" content="tercih edilen stylesheet">

refreshBelgenin kendini yenilemesi için bir zaman aralığı tanımlar.<meta http-equiv="refresh" content="300">

Æ

24

meta: robots



<meta name="robots" content="index">

<meta name="robots" content="noindex">

<meta name="robots" content="follow">

<meta name="robots" content="nofollow">

<meta name="robots" content="index, follow"><meta name="robots" content="all">

<meta name="robots" content="noindex, follow">

<meta name="robots" content="noindex, nofollow"><meta name="robots" content="none">

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.

29

<script>

<html><head>

<script src="test.js"></script><script type="text/javascript">

function myFunction() { alert("Merhaba Dünya!"); }</script>

</head><body>

<button onclick="myFunction()">Buraya Tıkla</button></body>

</html>

function myFunction() {alert("Merhaba Dünya!");

}

test.js

Harici bir JSdosyası!

Æ

30

Hepsi Bir Arada!<!DOCTYPE html><html>

<head><title>Sayfa Başlığı</title><meta charset="UTF-8" /><meta name="author" content="Abdullah Elen" /><meta name="description" content="Web Tasarımının Temelleri Ders Notları" /><meta name="keywords" content="HTML, CSS, JavaScript" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style type="text/css">

p { color: green; }h1 { color: red; }

</style><link rel="stylesheet" type="text/css" href="/mySytleSheet.css"><script src="/myJavaScript.js"></script><script type="text/javascript">

function myFunction() { alert("Merhaba Dünya!"); }</script>

</head><body>

<h1>Örnek Başlık</h1><p>Bu bir örnek paragraf metnidir.</p><button onclick="myFunction()">Buraya Tıkla</button>

</body></html>

Yandaki HTML kodunu bir metin belgesine yapıştırın ve «Dosya/Farklı Kaydet» menüsünden aşağıdaki şekilde kaydediniz.

HTML5 Desteği Olmayan EtiketlerN o t S u p p o r t e d Ta g s i n H T M L 5

31

Æ

Etiket Destek Durumu Açıklamalar

<acronym> Yerine <abbr> kullanılır. Kısaltma (örneğin TBMM) tanımlamada kullanılır.

<applet> Yerine <embed> veya <object> kullanılır. Gömülü uygulama tanımlamada kullanılır.

<basefont> Yalnızca CSS olarak desteklenir. Tüm metinler için varsayılan renk, boyut ve yazı tipini belirtir.

<big> Yalnızca CSS olarak desteklenir. Metin boyutunu büyütmede kullanılır.

<center> Yalnızca CSS olarak desteklenir. Metni ortalı olarak yazdırmada kullanılır.

<dir> Yerine <ul> kullanılır. Dizin listesi tanımlamada kullanılır.

<font> Yalnızca CSS olarak desteklenir. Metin rengi, boyutu ve yazı tipini belirlemede kullanılır.

<frame> Desteklenmez! Çerçeve kümesinde bir pencere tanımlamada kullanılır.

<frameset> Desteklenmez! Çerçeve kümesi tanımlamada kullanılır.

<noframes> Desteklenmez! Çerçevelerin (Frame) desteklenmediğini bildirmede kullanılır.

<strike> Yerine <del> ya da <s> kullanılır. Üstü çizili metinler için kullanılır.

<tt> Yalnızca CSS olarak desteklenir. Teletype metin tanımlamak için kullanılır.

32

HTML5 Desteği Olmayan Etiketler

Æ

1 Tasarımın Temel İlkeleri, Milli Eğitim Bakanlığı (24.09.2018)

2 HTML Element Reference, w3schools (25.09.2018)

3 https://www.whoishostingthis.com/resources/robots-meta/ (26.09.2018)

4 http://www.html-5.com/metatags/robots-metatag.mobile.html (26.09.2018)

5

6

7

8

9

10

B u d e r s n o t u h a z ı r l a n ı r k e n a ş a ğ ı d a b e l i r t i l e n k a y n a k l a r d a n y a r a r l a n ı l m ı ş t ı r.

33

Kaynaklar

https://www.w3schools.com/tags/

https://www.whoishostingthis.com/resources/robots-meta/

http://www.html-5.com/metatags/robots-metatag.mobile.html

KBÜ Web Tasarımının Temelleri · HTML (Hypertext Markup Language), web sayfaları hazırlamak...

Documents

Transcript of KBÜ Web Tasarımının Temelleri · HTML (Hypertext Markup Language), web sayfaları hazırlamak...