HTML & CSS. Öğr.Gör. M.Ersin AKAY

(1)

HTML & CSS

!

Öğr.Gör. M.Ersin AKAY

(2)

Neler Öğreneceğiz?

●

HTML işaretleme dili

●

CSS stil şablonları

(3)

HTML

!

Hyper Text Markup Language

(4)

HTML’de Neler Öğreneceğiz?

●

Html işaretleme dili temel yapısı ve kavramları

●

Html kod yapısı(head,body)

●

Head içerisinde yer alan başlıca etiketler(title,meta,script,link)

●

Başlık Etiketleri

●

Metin düzenleme

etiketleri(p,font,b,i,u,sub,sup,nbsp,br)

●

Bağlantı(link) oluşturma

●

Resim ekleme(img)

(5)

HTML’de Neler Öğreneceğiz?

●

Listeler(ul,ol,li)

●

Tablolar(table,tr,td)

●

Formlar(form,input..)

●

Yerleşim düzeni, anahat oluşturma(table,div)

(6)

HTML 

Temel Yapı ve Kavramlar

●

Web Sayfalarının tüm görselliğini sağlayan HTML dilidir

●

Yapısal bir dil değildir

●

Kodları notepad ve/veya dreamweaver yazabiliriz

●

Bilgisayarımızdaki web tarayıcılar(internet explorer, firefox) tarafından derlenir

●

Dosya uzantısı .html’dir

●

Çift-tıkla çalıştır, çünkü web server’a ihtiyacı yoktur

(7)

HTML 

Kod Yapısı – Etiketler (Tag)

●

Kodlar etiketlerden oluşur

●

<etiket adı> ile başlar ve çoğunlukla </etiket adı> ile kapanır

●

<etiket adı özellik adı = “değer”> şeklinde özellikler içerir

●

Etiket ve özelliklerde kesinlikle Türkçe

karakter kullanılmaz !

(8)

HTML 

Kod Yapısı – <html><head><body>

<html>

<head>

……

</head>

<body>

……

</body>

</html>

(9)

HTML 

<head>

<html>

<head>

<title>EmlakBuluyoruz.Com : Gaziantep Emlak Satılık Kiralık Daire Ev İşyeri Arsa Arazi</title>

<meta name="author" content="paralelinteraktif.com" />

<meta name="copyright" content="Copyright (c) emlakbuluyoruz.com" />

<meta name="keywords" content="gaziantep,emlak,gaziantep

emlak,buluyoruz,emlak buluyoruz,konut,işyeri,arsa,kiralık,satılık" />

<meta name="description" content="Gaziantepte ve Gaziantep ilçelerindeki emlakçıların verdikleri satılık veya kiralık ev, işyeri, arsa

ilanlarının listelendiği Gaziantep'in en büyük emlak portalı" />

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

<meta name="revisit-after" content="1 days" />

<meta name="rating" content="general" />

<meta content="text/html; charset=iso-8859-9" http-equiv="Content-Type" /

>

</head>

. . .

!

</html>

(10)

HTML 

Başlık Etiketleri

Başlık etiketleri yalnızca yazıyı boyutlandırmak için değildir. SEO(Arama Motoru Optimizasyonu) için önemlidir. İçerikte vurgu amaçlı kullanılır

(11)

HTML 

Çizgi(Ayıraç) – Açıklama Satırı

<hr color=“” size=“” width=“” /> etiketi yatayda içeriği birbirinden ayırmak için kullanılır

!

açıklama etiketleri arasına yazılan içerik görüntülenmez

(12)

12

<html>

<body>

<p>HTML’de boşluklar ve satırlar dikkate alınmaz:</p>

<p>

Korkma, sönmez bu şafaklarda yüzen al sancak;

Sönmeden yurdumun üstünde tüten en son ocak.

O benim milletimin yıldızıdır, parlayacak;

O benimdir, o benim milletimindir ancak.

</p>

</body>

</html>

HTML 

Paragraf, Yeni Satır, Boşluk

HTML’de boşluklar ve satırlar dikkate alınmaz:

Korkma, sönmez bu şafaklarda yüzen al sancak;Sönmeden yurdumun üstünde tüten en son ocak.O benim milletimin yıldızıdır, parlayacak; O benimdir, o benim milletimindir ancak.

HTML’de boşluklar ve satırlar dikkate alınmazlar. Bu boşlukları dizgide kullanabilmek  için etiketlerden yararlanırız

(13)

13

<html>

<body>

<p>HTML’de boşluklar ve satırlar dikkate alınmaz:</p>

<p>

Korkma, sönmez bu şafaklarda yüzen al sancak;<br />

Sönmeden yurdumun üstünde tüten en son ocak.<br />

O benim milletimin yıldızıdır, parlayacak;<br />

O benimdir, o benim milletimindir

     ancak.

</p>

</body>

</html>

HTML 

Paragraf, Yeni Satır, Boşluk

HTML’de boşluklar ve satırlar dikkate alınmaz:

Korkma, sönmez bu şafaklarda yüzen al sancak; 

Sönmeden yurdumun üstünde tüten en son ocak. 

O benim milletimin yıldızıdır, parlayacak;  

O benimdir, o benim milletimindir ancak.

• <p></p> etiketi ile paragraf oluşturulur.

• Paragrafın varsayılan olarak üst ve alt boşlukları vardır.

• <br /> etiketi ile yeni bir satır oluşturulur. Açılış ve kapanışı tek etiketle yapılır

• “ ” ise kullanıldığı yerde bir adet boşluğu ifade eder

(14)

HTML 

Metin Düzenleme,Biçimlendirme

• <body bgcolor=“” text=“”>

• Tüm sayfada ‘bgcolor’ zemin rengini,

• Tüm sayfada ‘text’ yazı rengini belirlemek için kullanılır

• Renk değerleri bgcolor=“red” renk ingilizce karşılığı veya

bgcolor=“#FF0000” şeklinde hexadecimal renk kodunu yazarak da verilebilir.

• <font face=“” color=“” size=“”></font>

• Belirli bir yazının tip, renk ve boyut olarak biçimlendirilmesi sağlanır

• face=“Arial” veya face=“Tahoma,Arial”

• size =“3” 1 den 7 ye kadar değer alır

Her ne kadar tarayıcılar tarafından bu etiketler çalıştırılsa da, günümüzde artık  CSS stilleri ile bu biçimlendirmeler gerçekleştirilmekte ve HTML5 versiyonu kod modelinde artık desteklenmemektedir

(15)

15

<html>

<body>

<p>Normal Yazı</p>

<p><b>Kalın Yazı</b></p>

<p><strong>Kalın Yazı</strong></p>

<p><u>Altı çizili Yazı</u></p>

<h2>Yazı belirli bir oranda <small>küçük</small>

olarak görüntülenir</h2>

<h2>Yazıyı <mark>işaret</mark>lemek için kullanılır</

h2>

<p>Favori rengim <del>mavi</del> kırmızı.</p>

• ‘<b> - <strong>’ ve ‘<i> - <em>’ arasında tarayıcıda görsel olarak bir fark yoktur

• Arama motorları açısından <strong> ve <em> yazıda vurguyu-önemi arttırmak   anlamına gelmektedir

HTML 

Metin Düzenleme,Biçimlendirme

(16)

HTML 

Bağlantılar(Link)

• <a href=“”></a>

• Bağlantılar(linkler);

• Dış bağlantılar

• Site İçi bağlantılar

• e-posta bağlantısı

• dosya bağlantısı

• Sayfa içi bağlantılar

(17)

HTML 

Dış Bağlantılar

• <a href=“http://www.emlakbuluyoruz.com”>Gaziantep Emlak İlan Sitesi</a>

!

• Yeni bir pencerede ve/veya sekmede 

<a href=“http://www.adanaemlakbul.com”

target=“_blank”>Adana Emlak İlan Sitesi</a>

!

(18)

HTML 

Site İçi Bağlantılar

• Site içerisinde ziyaretçinin site içeriğine yönlendirilmesi için oluşturulan bağlantılardır. 

• Anasayfa (index.html) => Ürünler(html/urunler.html) 

 

<a href=“html/urunler.html”>Ürünler</a> 

• Ürünler(html/urunler.html) => Anasayfa (index.html)  

 

<a href=“../index.html”>Anasayfa</a>

!

(19)

HTML 

E-Posta ve Dosya Bağlantıları

• E-Posta 

 

<a href=“mailto:bilgi@gantep.edu.tr”>E-posta gönder</a> 

• Dosya (indirme-download) 

 

<a href=“docs/bilgilendirme.doc”>Bilgilendirme dosyası</a>

!

(20)

HTML 

Sayfa İçi Bağlantılar

• Uzun içeriğe sahip sayfalarda kullanılan bir tekniktir.

• Örneğin; 

<a href=“#icerik1”>İçerik 1</a> 

… 

<h2 id=“icerik1”>İçerik 1</h2> 

… 

<h2 id=“icerik2”>İçerik 2</h2> 

… 

<h2 id=“icerik3”>İçerik 3</h2> 

…

(21)

21

<html>

<head>

<style>

a:link {color: green;text-decoration: none;}

a:visited {color: pink;text-decoration: none;}

a:hover {color: red;text-decoration: underline;}

a:active {color: yellow;text-decoration: underline;}

</style>

</head>

<body>

<p>Linklerin varsayılan renkleri değiştirilebilir</p>

<a href="html_images.asp">HTML Linkler</a>

</body></html>

HTML 

Bağlantılar & Renklendirme

Linklerin varsayılan renkleri değiştirilebilir HTML Linkler

• Linklerin renklerini değiştirmek için CSS kodları kullanılır

• “color” özelliği ile yazı rengi

• “text-decoration” ile altı çizili olup olmaması durumu belirlenir

• a:link => ilk durumu a:visited => ziyaret edilmiş  a:hover => üzerinde a:active => tıklanma anı

(22)

22

HTML 

Resimler

JPG GIF PNG

(23)

23

HTML 

Resimler

• <img src=“” alt=“” width=“” height=“”/>

!

• “src” : bu alana resmin uzak veya yerel adresi yazılır

!

• “alt” : alternatif yazı anlamında olup, temelde resim

görüntülenmediğinde görünecek yazıdır. Ayrıca arama motorları açısından resimle ilgili açıklayıcı bilgilerin tanımlanması tavsiye edilen önemli bir özelliktir.

!

• “width” : resim genişliği

!

• “height” : resim yüksekliği

(24)

24

HTML 

Resimler

Örnek;

!

!

<img src=“http://www.cicekci.com/cicek.jpg” alt=“Menekşe çiçeği"  

width=“50%" height=“50%” />

!

<img src=“cicek.jpg” alt=“Menekşe çiçeği"  

style=“width:128px;height:128px” />

!

<img src=“../resimler/cicek.jpg” alt=“Menekşe çiçeği"  

width="128" height=“128" />

(25)

25

HTML 

Resimler

Resime Link Vermek

!

<img src=“cicek.jpg” alt=“Menekşe çiçeği" width="128" height=“128"  

border=“0” />

</a>

!

HTML5 versiyonunda “border” desteklenmeyecek olup CSS özellikleri kullanılacaktır

!

<img src=“cicek.jpg” alt=“Menekşe çiçeği"  

style=“width:128px;height:128px; border:0”/>

</a>

(26)

26

HTML 

Resimler

Resimler ve Hizalama

!

align=“left” />

!

HTML5 versiyonunda “align” desteklenmeyecek olup CSS özellikleri kullanılacaktır

!

style=“float:left” />

(27)

27

HTML 

Resimler

Resimler ve Hizalama

(28)

HTML 

Listeler

• Sırasız Listeler

!

• Sıralı Listeler 

• Açıklama Listeleri 

• İç içe Listeler 

• Yatay Listeler

(29)

HTML 

Listeler

• Sırasız Listeler(unordered list)

!

<ul>

<li>Kahve</li>

<li>Çay</li> 

<li>Süt</li>

</ul>  

• Liste tipi

<ul type="disc|circle|square">

(30)

HTML 

Listeler

• Sıralı Listeler(ordered list)

<ol>

<li>Apple Iphone</li>

<li>Samsung Note</li> 

<li>Nokia Lumia</li>

</ol>

!

• Liste tipi

<ol type="1|A|a|I|i"> 

1 : Sayı (varsayılan) A : Alfabetik Büyük harf a : Alfabetik Küçük harf I : Büyük Roma rakamı i : Küçük Roma rakamı

(31)

HTML 

Listeler

• Açıklama Listeleri(definition list)

<dl>

<dt><strong>ul</strong> ekileti</dt>

<dd>Sırasız Listeler için kullanılır</dd>

<dt><strong>ol</strong> etileti</dt>

<dd>Sıralı Listeler için kullanılır</dd>

<dt><strong>dl</strong> etileti</dt>

<dd>Açıklama Listeleri için kullanılır</dd>

</dl>

(32)

HTML 

Listeler

• İç içe Listeler

<ul>

<li>Tıp Fakültesi</li>

<li>Mühendislik Fakültesi <ol>

<li>Bilgisayar</li>

<li>Elektronik</li>

</ol>

</li>

<li>Fen-Edebiyat Fakültesi</li>

</ul>

(33)

HTML 

Listeler

• Yatay Listeler (menu)

<ul id="menu">

<li><a href="/htmlders.html">HTML</a></li>

<li><a href="/jsders.html">JavaScript</a></li>

</ul>

!

Normal liste kodunu html olarak hazırlıyoruz.

Liste elemanları blok elemanlardır, yanyana gelmezler Ama…

(34)

HTML 

Listeler

<style>

ul#menu { padding: 0;}

ul#menu li { display: inline;}

ul#menu li a {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

} ul#menu li a:hover { background-color: orange;}

</style>

!

Html kodumuzdan önce yazacağımız CSS kodları ile listenin yapısına müdahale edebilir ve yatay görünümlü bir liste elde edebiliriz.

(35)

HTML 

Tablolar

<table border="1">

<tr>

<th>Gelir</th>

<th>Gider</th>

</tr>

<tr>

</tr>

<tr>

<td>Şubat</td>

</tr>

</table>

• table

• tr(table row) : satır

• th(table header) : başlık

• td(table data) : hücre

(36)

HTML 

Tablolar - Table Özellikleri

• Tablo hizalama

• Tablo zemin rengi

• Tablo kenar çizgisi

• Tablo genişliği

(37)

HTML 

Tablolar - Table Özellikleri

• Tablo Hücre içi boşluk

(38)

HTML 

Tablolar - Table Özellikleri

• Tablo Hücrelerarası boşluk

(39)

HTML 

Tablolar - tr Özellikleri

• Satırda yatay hizalama

• Satırda dikey hizalama

• Satırda zemin rengi

(40)

HTML 

Tablolar - td,th Özellikleri

• Hücrede yatay hizalama

• Hücrede dikey hizalama

• Hücrede zemin rengi

• Hücrede genişlik-yükseklik

(41)

HTML 

Tablolar - td,th Özellikleri

<tr>

<th>Gelir</th>

</tr>

<tr>

</tr>

<tr>

<td>Şubat</td>

</tr>

<tr>

<td colspan="2">Toplam: 380</td>

</tr>

</table>

• Hücre Sütun birleştirme

(42)

HTML 

Tablolar - td,th Özellikleri

<tr>

<th>Gelir</th>

<th>Toplam</th>

</tr>

<tr>

</tr>

<tr>

<td>Şubat</td>

</tr>

</table>

• Hücre Satır birleştirme

(43)

HTML 

Tablolar - Örnekler

(44)

HTML 

Tablolar - Örnekler

(45)

HTML 

Tablolar - Örnekler

(46)

HTML 

Tablolar - Örnekler

(47)

CSS

CASSCADING STYLE

SHEETS

(48)

css

STİL ŞABLONLARI

Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani

renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir.

Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir.

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda

kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

(49)

Css kullanım Şekilleri

◼

Yerel css :Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur.

◼

Genel css : HTML belgesinin head bölümüne

yazılır ve belgenin tümünü etkiler.

◼

Harici css : Ayrı bir kod sayfası olarak yazılır

kaydedilir ve kullanılacağı sayfaya eklenir.

(50)

YEREL CSS

◼ HTML derslerinde geçen ama üzerinde pek durmadığımız style

parametresi üzerinde açıklama yapmam gerekiyor. style parametresi

<p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir:

<p style="text-align:left; font-size:12pt; color:red">...</p>

Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan <p>

koduna style parametresi atanmıştır. Böylece paragrafın sola yaslanmasını, 12pt (point: nokta) font büyüklüğündeki harflerden oluşmasını, harflerin renginin kırmızı olmasını sağlıyoruz. style

parametresinde birden fazla özellik tanımlanacaksa, örnekte olduğu gibi her özellikler arasına ";" işareti konur.

(51)

<html>

<head>

</head>

<body>

<h2>CSS Kullanımı</h2><br>

<h2 style=“font-size:20pt; color:blue”>CSS Kullanımı</h2>

<h2 style=“font-size:20pt; text-align:center color:red”>CSS Kullanımı</h2>

</body>

</html>

(52)

<html>

<head>

<title>yerel css ile</title>

</head>

<body>

<h1>INTERNET EXPLORER 9 REKOR KIRDI</h1>

<p>Merakla beklenen ve tarayıcı savaşlarını

kökünden etkileyeceği düşünülen Internet Explorer 9un beta sürümü 2 haftada çok büyük ilgi gördü.

Microsoftun açıklamasına göre, Internet Explorer 9 beta iki hafta içinde 6 milyon defa indirildi.

15 Eylülde yayınlanan Internet Explorer 9 beta, IE 8in beta sürümünü de 2.5 katına katladı.

IE 9da HTML 5e büyük destek veren Microsoft, tarayıcısına W3C İnternet Standartları testini uyguladı.

</p>

<h4>Metin Kaçan</h4>

</body>

</html>

Ekran görüntüsü

(53)

Ekran görüntüsü

(54)

Nesne Özelliklerini Genelleştirme

◼

Sayfa tasarımında CSSden yararlanacaksak

style="..." parametresini kullanmamız şart

değil,sayfa özelliklerini <style>...</style> kodları arasında da tanımlayabiliriz.<style>...</style>

kodları <head>...<head> bölümünde; bir

fonksiyonmuşcasına yer alır. (Fonksiyonları

(55)

Genel Stil Şablonları (genel css)

◼ H1 {font-size:18pt ; color:#336699}

Selektor

Değer özellik

Bildirim Alanı Bildirim alanı

(56)

(57)

Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:

(58)

(59)

NE YAPTIK?

◼ İlk uygulamada <p>, <h1> ve <h4> kodlarını style="..." parametresi ile bu kodlara bazı özellikler atandı.

◼ Örneğin <p>...</p> arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması sağlandı.

◼ İkinci uygulamada ise her koda style="..." parametresi atamak yerine, tüm stil özellikleri kodların başında ;<head>...</head> bölümünde,

◼ Bu iki uygulama ile aynı sonuca ulaşıyoruz. İlk uygulamanın daha kısa

sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada <p> kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini

değiştirmek istediğimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleştirmesi ile azalacaktır.

(60)

◼ KOD

{ ÖZELLİK1:değer1;

ÖZELLİK2:değer2;

ÖZELLİK3:değer3

} Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz:

KOD1, KOD2, KOD3, KOD4, KOD5 { ÖZELLİK1:değer1;

ÖZELLİK2:değer2;

ÖZELLİK3:değer3 }

(61)

CSSyi Dış Dosya ile Tanımlama

◼

Web sayfamızın <head>...</head> kısmına aşağıdaki kodlarla .css uzantılı dosyanızla

bağlantı kurun; mesela dosyanın ismi tarz.css olsun:

<html>

<head>

<title>Dış dosya yolu ile...</title>

</head>

<body>

………

</body>

</html>

(62)

◼

Önce

tarz.css

dosyasını

oluşturalım

(63)

(64)

(65)

Css

Bölüm 2- Örnekler ve ID-Class seçiciler

(66)

En Çok Kullanılan bildirimler

•

Font-size:….px

•

Text-align:left

•

Color:#005533

•

font-family:arial;

•

background-color:#b0c4de;

•

font-weigh:bold => Fontun kalınlık incelik durumunu belirler. bold: Fontu kalın yapar.

normal: Fontun normal halde olmasını sağlar.

(67)

En Çok Kullanılan bildirimler

•

font-style:italic => Fontun stilini belirler.

•

text-transform :lowercase =>küçük harf

•

text-transform :uppercase =>büyük harf

•

text-decoration : underline => Yazının altının çizili olmasını sağlar.

•

text-decoration : overline =>Yazının üstünün çizili olmasını sağlar.

•

text-decoration : none => Yazının herhangi bir yerine çizgi

•

çekilmemesini sağlar.

(68)

ÖRNEK

(69)

ÖRNEK2

<html>

<head>

h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

h4 {text-decoration:blink;}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p><b>Not:</b> "blink" özelliği IE de çalışmaz.

Chrome veya Safari tarayıcılarını kullanınız..</p>

</body>

</html>

(70)

(71)

SEÇİCİLER - SELECTORS

1.

ID TİPİ SEÇİCİLER

2.

CLASS TİPİ SEÇİCİLER

•

CSS dosyalarındaki stillerin etki edeceği elemanlar, HTML'deki "element"ler, "classlar" veya "id"lerdir.

•

Elementler, tanımlı HTML kodlarıdır. Örneğin a, h1, body, div,

p... Bu elementlere etki edecek CSS kodları ise şu şekilde

tanımlanır: h1 {...;}

p {...;}

body {...;}

•

(72)

ID SEÇİCİLER

◼ CSS dosyasında bir idye etki edecek kodu yazmak için başa diyez (#) işareti koyulur.

◼ ÖRNEK

(73)

(74)

Class seçiciler

◼ Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz

durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf

seçicisinin iki türü vardır. Class seçiciler

. İle başlar

(75)

(76)

(77)

Div Nedir?

• HTML' de tasarımlarımızı

sağa, sola hizalamak, nesneleri ve yazıları dilediğimiz koordinatlara yerleştirmek için kullanılan ve az kod ihtiva etmesi ve Google tarafından tavsiye edilmesi ve sevilmesi nedeniyle son zamanlarda gündeme gelen bir

kodlama biçimidir.

• CSS