HTML Giriş
HTML ve CSS
• HTML (HyperText Markup Language) web sayfaları oluşturmak için
kullanılan metin işaretleme dilidir.
• İnternet tarayıcılarının anlayabileceği şekilde web sayfalarının
içeriğini düzenlemek ve biçimlendirmek için kullanılır.
• HTML5 ise bu dilin son sürümünün adıdır.
• CSS (Cascading Style Sheets) ise, sayfamıza ait görselliğe dair her türlü
yapıyı düzenlememizi sağlayan bir dildir.
HTML tarihçe
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
HTML tag (etiketi) nedir?
• HTML, metin, resimler, bağlantılar, listeler, tablolar, formlar ve diğer
içerikleri organize etmek için etiketler kullanır.
• Bir HTML etiketi, bir başlangıç etiketi, içerik ve bir bitiş etiketi ile
tanımlanır.
• <tagname>İçerik...</tagname>
<h1>başlık</h1>
<p>paragraf</p>
Web tarayıcılar
• Bir web tarayıcısının (Chrome, Edge, Firefox, Safari) amacı, HTML
belgelerini okumak ve bunları doğru bir şekilde görüntülemektir.
• Bir tarayıcı HTML etiketlerini görüntülemez, ancak bunları belgenin
nasıl görüntüleneceğini belirlemek için kullanır:
Gazi Üniversitesi Web Sitesi HTML Kodu
Bir tarayıcıda web sayfasının HTML kodunu görmek için genellikle şu
adımları takip edebilirsiniz:
• Tarayıcıda web sayfasını açın.
• Sayfanın herhangi bir boş alanında sağ tıklayın (Windows) veya
Control tuşuna basılı tutarak sayfanın herhangi bir yerine tıklayın
(Mac).
• Açılan menüden "İncele" veya "Geliştirici Araçları" seçeneğini seçin.
• "Elements" veya "Öğeler" sekmesine tıkladığınızda, sayfanın HTML
kodunu görebilirsiniz.
Gazi Üniversitesi Web Sitesi HTML Kodu
HTML sayfa yapısı
• <body> bölümünün içindeki içerik (yukarıdaki beyaz alan) tarayıcıda görüntülenecektir.
• <title> etiketinin içindeki içerik, tarayıcının başlık çubuğunda veya sayfa sekmesinde gösterilecektir.
HTML dosyası oluşturma
Örnek bir HTML kodu Notepad’e yazılır veya kopyalayır:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title></head>
<body>
<h1>This is Heading</h1>
<p>This is paragraph</p>
</body>
</html>
HTML sayfasını kaydetme
• Dosyayı bilgisayarınıza kaydedin.
• Notepad menüsünde Dosya > Farklı kaydet'i seçin.
• Dosyayı "[Link]" olarak adlandırın ve kodlamayı UTF-8 olarak
ayarlayın (HTML dosyaları için tercih edilen kodlamadır).
HTML sayfasını görüntüleme
Örnek HTML etiketler
• <!DOCTYPE html> bildirimi, bu belgenin bir HTML5 belgesi olduğunu tanımlar.
• <html> etiketi, bir HTML sayfasının kök öğesidir. HTML kaynak dokümanı yaratır.
• <head> etiketi, HTML sayfasıyla ilgili meta bilgileri (dili, başlığı) içerir. Sayfada görünmez.
• <title> etiketi, HTML sayfası için bir başlık belirtir (tarayıcının başlık çubuğunda veya sayfa sekmesinde
gösterilir)
• <body> etiketi, belgenin gövdesini tanımlar ve başlıklar, paragraflar, resimler, köprüler, tablolar, listeler vb.
gibi tüm görünür içerikler için bir kapsayıcıdır.
• <h1> etiketi büyük bir başlığı tanımlar.
• <p> etiketi bir paragrafı tanımlar.
<!DOCTYPE> bildirimi
• <!DOCTYPE> bildirimi, belge türünü temsil eder ve tarayıcıların web
sayfalarını doğru bir şekilde görüntülemesine yardımcı olur.
• Sayfanın en üstünde (herhangi bir HTML etiketinden önce) yalnızca bir
kez görünmelidir.
• <!DOCTYPE> bildirimi büyük/küçük harf duyarlı değildir.
HTML öğeleri
• HTML öğeleri iç içe yerleştirilebilir.
• Öğelerin başka öğeleri içerebilir.
• Tüm HTML belgeleri iç içe geçmiş HTML öğelerinden oluşur.
HTML özellikleri
• Tüm HTML öğelerinin özelikleri (attribute) olabilir.
• Özellikler, etiketler hakkında ek bilgi sağlar.
• Özellikler her zaman başlangıç etiketinde belirtilir.
• Özellikler genellikle ad/değer çiftleri halinde gelir: name="value"
• href, src, alt, border, align, style
HTML başlıkları
• HTML başlıkları <h1> ila <h6> etiketleri ile tanımlanır.
• <h1> en önemli başlığı tanımlar. <h6> en az önemli başlığı tanımlar:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML başlıkları
• Her HTML başlığının varsayılan bir boyutu vardır.
• Başlık boyutunu CSS’in font-size özelliği ile değiştirebilirsiniz.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h1 style="font-size:60px;">Heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML paragraf
• <p> etiketi kullanılır.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML görselleri
• <img> etiketiyle tanımlanır
• Kaynak dosya ( src), alternatif metin ( alt), boyutlar (width ve height)
<!DOCTYPE html>
<html>
<body>
<p>HTML görselleri</p>
<img src="[Link]" alt="[Link]" width="225" height="225">
</body>
</html>
HTML bağlantıları
• <a> etiketi hyperlink olarak yani bir sayfadan başka sayfaya geçişte
kullanılır.
• Bağlantının hedefi href özelliğinde belirtilir.
• Özellikler, HTML etiketleri hakkında ek bilgi sağlamak için kullanılır.
<!DOCTYPE html>
<html>
<body>
<p>HTML links </p>
<a href="[Link] gider</a>
</body>
</html>
HTML bağlantıları - target
• Target özelliği bağlantılı belgenin nerede açılacağını belirtir.
• target=“_blank” linki yeni bir sekmede açar.
• target=“_self” (default)
<!DOCTYPE html>
<html>
<body>
<p>HTML links </p>
<a href="[Link] target="_blank">Google gider</a>
</body>
</html>
Linkler – Absolute ve Relative urls
• Absolute and Relative Urls
<!DOCTYPE html>
<!DOCTYPE html> <!DOCTYPE html>
<html>
<html> <html>
<body>
<body> <body>
<h2>External Paths</h2>
<h2>External Paths</h2> <h2>External Paths</h2>
<p>This example links to a page
<p>This example uses a full URL to <p>This example links to a page
located in the html folder on the
link to a web page:</p> located in the same folder as the
current web site:</p>
<p><a current page:</p>
href="[Link]
<p><a
ml/[Link]">HTML <p><a href="[Link]">HTML
href="/html/[Link]">HTML
tutorial</a></p> tutorial</a></p>
tutorial</a></p>
</body> </body>
</body>
</html> </html>
</html>
HTML bağlantıları - mailto
• Kişilerle iletişime geçmek için mailto ile e-posta linki oluşturulur.
<!DOCTYPE html>
<html>
<body>
<p>HTML links </p>
<a href="[Link]
</body>
</html>
HTML bağlantıları - download
• Download linki oluşturma
<!DOCTYPE html>
<html>
<body>
<p>HTML links </p>
<a href="[Link]">Download</a>
</body>
</html>
HTML bağlantıları - buton
• Buton ile link oluşturma
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="[Link]=‘[Link]'">HTML Tutorial</button>
</body>
</html>
HTML bağlantıları - title
• Title bilgisi ekleme
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="[Link] title="Go to Google!">Google gider</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
Bağlantılar <p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
Bookmark oluşturma <id> <h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<h2>Chapter 3</h2>
<a href="#C4">Jump to Chapter 4</a> <p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
Başka sayfaya zıplamak için; <h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<a href="html_demo.html#C4">Jump
<h2>Chapter 6</h2>
to Chapter 4</a> <p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
HTML bağlantıları - renkler
• Link renkleri değiştirilebilir.
<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: green; background-color: transparent; text-decoration: none; }
a:visited { color: pink; background-color: transparent; text-decoration: none; }
a:hover { color: red; background-color: transparent; text-decoration: underline; }
a:active { color: yellow; background-color: transparent; text-decoration: underline; }
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="[Link] target="_blank">Google</a>
</body>
</html>
HTML bağlantıları – CSS ile Link butonu
• CSS ile Link Butonu
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited { background-color: green; color: white; padding: 15px 25px;
text-align: center; text-decoration: none; display: inline-block; }
a:hover, a:active { background-color: red; }
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href=" [Link] target="_blank">This is a link</a>
</body>
</html>