bilalhoca

HTML’e Giriş
 HTML, HyperText Markup Language'in kısaltmasıdır.
 HTML çeşitli anlamlara gelen kodlamalar (tag) ve düz
metinden oluşur.
 Bu kodlar ancak bir Web Browser (Internet Explorer,
Firefox) tarafından anlamlı hale getirilebilir.
 Bu kodla yazılmış dosyaların uzantıları genellikle html ya
da htm'dir.

Bir HTML Dökümanının Temel Öğeleri
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<head>
<title>Benim Sayfam</title>
</head>
<body>
Bu benim ilk sayfam...
</body>
</html>

Bir HTML Dökümanının Temel Öğeleri
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML //EN">
Bu damga bir SGML (Standard Generalized Mark-up Language) damgasıdır.
Görüntü vermez, ancak, tarayıcıya bu dökümanın bir HTML dökümanı
olduğunu belirtir.
<HTML> </HTML>
HTML dökümanının başladığı ve bittiği yerleri belirtir. Her web
dökümanında bu sınırlar belirtilir.
<HEAD> </HEAD>
Web sayfasında görüntülenmeyen, ama web sayfası ile ilgili bilgileri (META)
veren ve istenirse sayfanın bazı yapısal özelliklerinin belirlenebildiği
bölümdür. Bu bölümde yapılabilen işleri ileride göreceğiz.
<TITLE> </TITLE>
Sayfanın adını belirtir.Tarayıcıda web sayfasının adı olarak görünür. Bazı
arama araçlarında (search engine) web sayfalarının indekslenmesinde
kullanılır.Ad verilmesi zorunlu değildir, ama her web dökümanına, o
dökümanın içeriğine uygun bir ad vermek iyi bir alışkanlıktır.
<BODY> </BODY>
Web safasının gövdesini belirler. İstemciye sunulacak her şey bu bölümde yer

Doğru DOCTYPE Kullanımı
 DOCTYPE, HTML veya (X)HTML dökümanımızın tipini
göstermek için kullandığımız bir koddur.
 Genel kullanımı:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN“"http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd">
 Burada dökümanımızın XHTML 1.0 verisyonu dikkate alınarak
yazıldığı ve kullanılan bu kuralların linki verilmiştir.
 Bu tanımlamadan sonra web tarayıcıları bu kurallara göre sayfayı
yorumlayacak ve buna göre bir görünümü kullanıcıya sunacaktır.

Doğru DOCTYPE Kullanımı
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
( Bu kullanım sayfanın HTML 4.01 kurallarının geçerli olduğu bir
HTML dosyası olduğunu gösterir.)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
(Bu kullanım sayfanın hem HTML hemde XHTML kurallarının geçerli
olduğunu bir XHTML dosyası olduğunu gösterir.)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(Bu kullanım sayfanın sadece XHTML1.0kurallarının geçerli olduğu bir
XHTML sayfası olduğunu gösterir. Bu kodlama yapıldığıında tüm XHTML
kurallarına harfiyen uyulmalıdır. Örneğin kodların hepsinin küçük harfle
yazılması gibi.)

Temel HTML Etiketleri
Etiket (Tag) Açıklama
<html> Bir HTML dökümanını belirtir
<body> Dökümanın görüntülenecek kısmını berlitir.
<h1> to <h6> Başlıkları belirtir.
<p> Bir paragraf belirtir
<br> Boş bir satır bırakır.
<hr> Sayfada yatay bir çizgi çizer
<!--> Yorum satırı olduğunu belirtir.

Temel HTML Etiketleri
 Başlıklar
Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar
kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken,
<h6> ise en küçük puntoyu belirtir.
<h1>Bu bir başlık</h1>

Metin Biçimlendirme Etiketleri
Etiket (Tag) Açıklama
<b> Koyu metin
<big> Büyük metin
<em> Vurgulanmış metin
<i> İtalik metin
<small> Küçük metin
<strong> Güçlü metin
<sub> Alt indis metini
<sup> Üst indis metin
<ins> Altı çizili metin
<del> Üstü çizili metin

Tablolar
 Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler;
İLK
ETİKET
SON
ETİKET
AÇIKLAMA
<TABLE> </TABLE>
Tablonun başlangıç ve bitimini tanımlamada
kullanırız.
<CAPTION> </CAPTION>
Tablonun altına ya da üstüne başlık metni
eklemede kullanılır. Bunun için Align özelliğine
top ya da bottom değeri atanır.
<TR> </TR> Table Row: Tablo satırı oluşturmada kullanılır.
<TH> </TH>
Table Header: Tabloya başlık hücresi ekler.
Başlık hücresi bold ve ortalı yazılır.
<TD> </TD>
Table Data: Tablonun satırına veri elemanı
(hücre) eklemede kullanılır.

Tablolar
 Tablolar satır ve sütunlardan oluşur.Tabloya genel bir başlık atayabiliriz
(thead). Her sütun için de kendi başlığını oluşturmak mümkündür.
Tablonun sona erdiği satırdan sonraki satıra açıklama koyabiliriz (caption).
Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle
birleştirebiliriz:

Tablolar
 <TABLE> Etiketi
 <TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe
sahiptir.
ÖZELLİK AÇIKLAMA
ALIGN
Tablonun sayfadaki hizalamasını kontrol eder. Left, center veya right olabilir. Varsayılanı left tir.
WIDTH
Tablonun genişliğini sabit olarak belirteceksek bu özelliğe pixel olarak bir sayı, sayfanın yüzdesi
büyüklüğünde olmasını istiyorsak yüzdeli bir sayı yazılır. (WIDTH=”100” ya da WIDTH=”100%”)
BORDER
Border yani çerçeve büyüklüğü pixel olarak bildirilir. “0” verilirse çerçevesizdir.
CELLSPACING
Hücreler arasındaki çerçevenin kalınlığını belirtir. Varsayılan olarak 1 dir.
CELLPADDING
Hücre çerçevesi ile içeriği arasındaki mesafeyi pixel olarak belirler. Varsayılanı 1 pixeldir.

Tablolar
 <TR> Etiketi
 TR etiketi iki tane özelliğe sahiptir. Bunlar;
ÖZELLİK AÇIKLAMA
ALIGN
Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder.
left, right, center olabilir.
VALIGN Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder.
top, middle, bottom olabilir.

Tablolar
 <TH> ve <TD> Etiketleri
 Tablo Başlığı (Table Header=TH) veTabloVerisi (Table Data=TD)
 etiketlerinin özellikleri;
ÖZELLİK
AÇIKLAMA
ALIGN
Hücre içeriğinin yatay hizalamasını kontrol eder.
VALIGN
Hücre içeriğinin dikey hizalamasını kontrol eder.
NOWRAP
Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping)
ROWSPAN
Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir.
COLSPAN
Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1 dir.
WIDTH
Hücrenin pixel olarak genişliği
HEIGHT
Hücrenin pixel olarak yüksekliği

Tabloda başlık ve gövde
 Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde
(body) bölümlerine ayrılabilir.Tabloda başlığı <thead> gövdeyi
<tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir
açıklama vermek mümkündür.
 Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve
bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.
 Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri
<tbody>...</tbody> arasına alınır.

HTML Listeleme (Lists)
3 tür listeleme şekli vardır. Bunlar; Sıralı liste, Sırasız liste ve Tanımlama
listeleridir.
 Sırasız Liste
 Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile
işaretlenir.
 Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile
başlar.
<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>
 Sıralı Listeler
 Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her
madde de <li> etiketi ile başlar.
<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>

HTML Listeleme (Lists)
Tanımlama Listeleri
Bir tanımlama listesi maddelerin sıralanması
demek değildir.
Bir tanımlama listesi <dl> etiketi ile başlar. Her
terim <dt> etiketi ile başlar. terimin
tanımlaması <dd> etiketi ile başlar.
<dl>
<dt>Kahve</dt>
<dd>Koyu sıcak içecek</dd>
<dt>Süt</dt>
<dd>Beyaz soğuk içecek</dd>
</dl

Listeleme Etiketleri
Etiket Açıklama
<ol> Sıralı Liste
<ul> Sırarsı Liste
<li> Liste Maddesi
<dl> Tanımlama Listesi
<dt> TerimTanımı
<dd> Tanımın Açıklaması

HTML Layout (Yerleşim)
Div
 HTML' de tasarımlarımızı sağa, sola hizalamak, nesneleri ve yazıları
dilediğimiz koordinatlara yerleştirmek için kullanılır.
 CSS dediğimiz stil kodlamasıyla tam uyumlu olması nedeniyle
de table yani hücre sistemlerinin yerini hızla almakta olan alternatif
bir tag' dır.
 Gösterimi : <div> </div>

Neden Tablosuz Tasarım ?
Tablosuz tasarımı tercih etmeniz için ana sebepler;
 W3 Standartlarında bir yapıya sahip olması.
 Tarayıcılar ile uyumuluk ve buna bağlı olarak hızlı
açılması.
 Site içeriğine daha kolay müdahele edebilme olanağı.
 ModernTasarım'ı yakalama ve uyarlama.
 Daha doğru,gerçekçi ve creative tasarımlar oluşturma.
 div" tagları CSS ile tam uyumludur.

HTML Formları
 HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form
kontrolleridir.
 Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları
arasındaki veri alışverişini sağlamak için ideal bir araçtır.
 Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda
oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra
gönderilir ve web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir
programa iletir. Program bilgileri değerlendirdikten sonra gerekli
işlemleri yapar.
 Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de
kullanabiliriz

HTML Formları
 <FORM> Etiketi
 Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen
kontroller input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl
değerlendirileceği form etiketinin içinde gösterilir.
 Genel kullanım;
 <FORM ACTION=url METHOD=get- postTARGET=pencere> …..
</FORM>
 Özellikleri:
ÖZELLİK AÇIKLAMA
ACTION
Formun onay buttonuna basıldığında form bilgilerinin gönderileceği URL yi
belirtir.
METHOD
Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar. Get ya da
Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman çoğunlukla
Post metodunu kullanırız. Get metodunda form ile gönderilen veriler URL nin
sonuna eklenir.
TARGET
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi
pencerede belireceğini gösterir.

HTML Formları
 KontrolTipleri
 HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri
ile oluşturulur.
 KONTROLYAZIM ŞEKLİ
 TextBox <INPUTTYPE=“text”>
 Kullanıcının tek satırdan oluşan string değer girmesinde kullanılır.

HTML Formları
 Password <INPUTTYPE=“password”>
 Yukarıdaki gibi string ifade girişi yapılır. Bununla birlikte yazılan karakterler yerine
“*” karakteri gösterilir.
 Hidden <INPUTTYPE=“hidden”>
 Formla birlikte taşınan bu alandaki bilgi kullanıcıdan gizlenir.
 File <INPUTTYPE=“file”>
 Forma eklenen kullanıcının bir dosyasının ismini girmesine izin verir.

HTML Formları
 CheckBox <INPUTTYPE=“checkbox”>
 Kullanıcının doğru/yanlış (true/false) şeklinde mantıksal değer girmesinde
kullanılır.

HTML Formları
 RadioButton <INPUTTYPE=“radio”>
 Özel bir seçenek listesinden saçim yapma imkanı sağlar. Radibuttonların name
özelliğine aynı değerler verilerek sınıflandırılabilir.

HTML Formları
 Submit <INPUTTYPE=“submit”>
 <FORM> etiketinin ACTION özelliğinde belirtilen URL ye form bilgilerini
göndermede kullanılır.
 Reset <INPUTTYPE=“reset”>
 Bütün form kontrollerini sıfırlamada kullanılır. Formun sayfa ilk yüklendiğindeki eski
halini almasını sağlar.

HTML Formları
 Button <INPUTTYPE=“button”>
 İstemc-tarafı (Client-Side) scriptlerinden JavaScript ya daVBScript i tetikleyebilecek
komut düğmesi oluşturur.
 TextArea <TEXTAREA>
 Çok satırlı metinlerin girilmesine imkan sağlayan bir kontroldür.
 ComboBox <SELECT size=“1”>
 Kullanıcıya açılan bir listeden hazır seçenekler sunar.
 ListBox <SELECT size=“n”>
 Kullanıcıya liste şeklinde hazır seçenekler sunar. Buradaki “n” ListBox ın kaç satırlı
olacağını belirtir.

HTML Formları
 <INPUT> Etiketi
 Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi
özelliklere sahip olduğu be bu özelliklerinin anlamları:
ÖZELLİK KULLANAN KONTROL AÇIKLAMA
TYPE hepsi Kontrolün çeşidini belirtir. Varsayılan Text tir.
NAME Hepsi
Kontrolün adını belirtir. Kontrolün adı formun ACTION özelliğinde
belirtilen URL ye kontrolde yazılı olan değeri taşır..
VALUE
Text,
password,
hidden,
radio,
submit,
reset,
button
Text, password ve hidden kontrolleri için birinci değeri, radio ve
checkbox kontrolleri için seçildiğinde gidecek olan değeri, submit,
reset ve button kontrollerinde ise kontrolün başlığını (caption)
belirtir.
SIZE
Text,
password,
file
Kontrolün gösterebileceği karakter uzunluğu
MAXLENGTH
Text,
password,
file
Kullanıcının gireceği maksimum karakter sayısı
CHECKED
Checkbox,
radio Eğer yazılırsa başlangıçta kontrolün seçili olmasını sağlar.
SRC image Resmin kaynağını gösterir.
ALIGN image
Resmin hizalanmasını belirtir. (left, right, top, middle ya da bottom
olabilir.)

HTML Formları
 <SELECT> ve <OPTION> Etiketleri
 Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu
 kontrollerde gözükecek her bir seçenek <OPTION> etiketi ile oluşturulur.
 Kullanımı:
 <SELECT name=”adı” size=”n”>
 <OPTION value=”değer1”> Gözüken Metin1</OPTION>
 <OPTION value=”değer2”> Gözüken Metin2</OPTION>
 </SELECT>
 Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan
 budur) ComboBox (Drop-Down Menu) stilinde gözükecektir.

HTML Formları
 <SELECT> Özellikleri:
 <OPTION> Özellikleri:
ÖZELLİK AÇIKLAMA
NAME Yukarıda yazmıştık
SIZE Gösterilecek satır sayısını belirtir.
MULTIPLE
Eğer yazılırsa çoklu seçime izin verir. Sadece
ListBox görünümünde etkilidir.
ÖZELLİK AÇIKLAMA
VALUE
Seçimin yapılması durumunda formun
göndereceği değer
SELECTED
Bunu yazdığımız <OPTION> etiketi değeri sayfa
yüklendiğinde seçilmiş durumdadır.

CSS
Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine
has kuralları olan bir tanım dilidir. Stiller, bir HTML elementinin nasıl görüneceğini
belirleme olanağı sağlar.
Css Özellikleri:
1. Html sayfasındaki nesnelerin görüntüsünü belirler.
2. Html 4.0 sürümü ile stil dosyaları geliştirilmiştir.
3. CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı
açılmasını sağlar.
4. Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir.
5. Görüntüyü hızlı ve etkili bir şekilde değiştirmenize yarar, düzenlemesi
kolaydır, web sitenize kod fazlalığı yaratmaz.

CSS
Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:
•Stilleri CSS Dosyasından Çağırmak
•HTML Sayfasında CSSYazmak
•HTML Elementinin İçerisinde Stil Belirtmek
1. Stilleri CSS Dosyasından Çağırmak
Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.
HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki şekilde stil dosyanızın adını
belirtilir.
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet"/>

CSS
2. HTML Sayfasında CSSYazmak
HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stiller
yaratmamız mümkün. örnek :
<html>
<head>
<title>Sayfa Başlığı</title>
<style type="text/css">
body { background-color:black; color:white; }
p { font-family:Tahoma,Verdana; font-size: 12px; }
</style>
</head>
<body>
<p>Bu 12 pikselTahoma yazı tipi ile yazıldı.</p>
</body>
</html
Örneğe baktığımızda <style type="text/css"> elementini HEAD elementi içinde açıp kapatıyor
ve içine stillerimizi yazıyoruz. Böylelikle dosyamızda belirttiğimiz stiller dışarıdan bir dosyaya
bağlı olmaksızın kullanılabilir olacaklar.

CSS
3. HTML Elementinin İçerisinde Stil Belirtmek
Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler
üretmek gerekebilir. Böyle durumlarda her elementin style="" özelliği
kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE
özelliğine sıralarız. Örneğin;
<p style="font-family:Tahoma; font-size: 12px;"> Bu 12 pikselTahoma
yazı tipi ile yazıldı. </p>

CSS Kod Yapısı
 Bir CSS kodu iki temel bileşenden oluşur. Biri element ,diğeri ise bir ya da daha
fazla özelliği bildirdiğimiz ifade bölümü.
Element (seçim) genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi.
İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar
p { color: red; text-align: center; }

Seçiciler (Selectors)
 Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi
etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni
özellikler ekleme olanağı verdiği gibi istediğimiz bir
kelimeye style özellikleri atayıp istediğimiz zaman
çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id
seçicisi ve sınıf seçicisi.

Id Selectors(Id Seçicileri)
 Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız. HTML
belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML
etiketine stil vermekte kullanılır.
 Sadece tek bir elementte kullanılabilir. birden fazla yerde kullanmak için uygun
değildir. (Kapsayıcı, taşıyıcı, container, sidebar, navigation bar, footer gibi
değişmeyecek sabit alanlarda kullanırız.)
 Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte
kullanılabilir).
ID Kullanımı:
<div id="stil">Hoş Geldiniz!</div>
Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu
elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:
#stil { font: 10ptTahoma,Verdana; color: blue; }

Class Selectors (Sınıf Seçicileri)
 Class değeri ise ID’nin tam tersi olarak birden çok noktaya eklenebilir.
 Kodu sayfanızın içinde oluşturduğunuz her içeriğe defalarca
tanımlayabilirsiniz.Ama eğer bu değer ID olsaydı sadece tek bir noktaya
ekleyebilirdik. Simgesel olarak (.) şeklinde yazılır.
 Genelde içerikte sıkça kullanacağımız stiller için class yapısını tercih
ederiz.
Kullanımı:
<div class="stil">Hoş Geldiniz!</div>
Örnekte Class değeri "stil" olan bir DIV elementi görüyoruz. CSS
dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod
yapısını oluşturmalıyız:
.class{ font: 10ptTahoma,Verdana; color: blue; }

 Örnek:
 STYLE>
 
 </style>

 Örnek:
 <HTML>
 <HEAD>
 <LINK rel=stylesheet href=“stil.css” type=“text/css”>
 </HEAD>
 <body>
 Body tagının normal stili
 <p class=“stil1”>İlk paragrafımız . stil1</h1>
 <P class=“stil ”>ikinci paragraf . stil </P>
 Bu bölümde kullanılan stil standart stildir.
 <div class=“stil”> Div tagında stil değişikliği yaptık. stil </div>
 <SPAN class=“stil1”>Yine SPAN tagında değişiklik var. stil1 </SPAN>
 </BODY> </HTML>

Stillerin Link Düzenlemeleri İçin
Kullanılması
 Link stilleri oluşturulurken dört parametre kullanılacaktır.
 a: Sayfada bulunan bir link renk ve durumu
 a:active : Link tıklandığında alacağı renk ve durum
 a:visited : Ziyaret edilmiş bir linkin alacağı renk ve durum
 a:hover : Fare ile linkin üzerine gelindiğinde özelliklerinin
işleme konulması. Örneğin fare linkin üzerine geldiğinde altı çizili olması isteniyorsa
hover kısmında underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem altı
hem üstü çizili olması için iki tane hover kullanılmalıdır.
 color : Linklerin, ziyaret edilen linklerin.. renk özelliğinin
ayarlanması burada yapılır.
 text-decoration: none seçilirse ilgili linkin altı çizili özelliği ortadan
kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam eder.

Stillerin Link Düzenlemeleri İçin
Kullanılması
 <style>
 A: {
 color : renk;
 text-decoration :none|underline
 font-size:10pt;
 color:red;
 }
 A:active { color : renk; text-decoration :none|underline }
 A:visited { color : renk; text-decoration :none|underline }
 A:hover { color : renk; text-decoration :none| underline|
overline }
 </style>

CSS ArkaPlanlar
 CSS arkaplan özellikleri bir HTML nesnesine arkaplan eklemenizde
yardımcı olur. Bununla ilgili olarak tanıyacağımız CSS kodları:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background

CSS ArkaPlanlar
CSS'de Renk İfadeleri
En çok kullanılan üç tanesi:
Onaltılık (Hex) Renkler
Tarayıcı Renk İsimleri
Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen
sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.
Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.
Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz.
Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

CSS ArkaPlanlar
background-color: Arkaplan Rengi
Bir elementin arkaplan rengini belirlememizi sağlar.
div { background-color: #EFEFEF; }
background-image: Arkaplan Resmi
Bir element içinde arkaplan resmi kullanmamızı sağlar.
body { background-image: url('resim.jpg'); }
Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı
resim.jpg olarak gösterilmiştir.

CSS ArkaPlanlar
background-repeat: ArkaplanTekrarı / Döşeli
Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi
sağlar. Dört kullanımı vardır:
1.no-repeat :Tekrar edilmeyecektir
2.repeat :Tekrarlanacaktır / döşenecektir
3. repeat-x : Sadece sağa doğru tekrar edecektir
4. repeat-y : Sadece aşağı doğru tekrar edecektir
Aşağıdaki kullanım örneğini inceleyelim:
body { background-image: url('resim.jpg'); background-repeat:
no-repeat; }
Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.

CSS ArkaPlanlar
background-attachment:Arkaplan Sabitliği
Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar.
Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini)
istiyorsak fixed özelliği kullanırız.
body { background-image: url('resim.jpg'); background-attachment: fixed; }
background-position: Resmin Nereye Hizalanacağı
Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla
onun hizalanma şeklini belirleme şansına sahip oluruz.
body { background-image: url('resim.jpg'); background-repeat: no-repeat;
background-position: right top; }
Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru
hizalanacağını bildirir

CSS ArkaPlanlar
background:Arkaplan Belirlemenin KısaYolu;
Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün.
Bunun için kullanacağımız kod:background.
body { background: #000000 url('resim.jpg') no-repeat
right top; }

CSS Listeleri
 Listelerde kullandığımız madde imlerini biçimlendirirken CSS'den
faydalanabiliriz.
•Sıralı listelerdeki numaraların görünüşünü değiştirebiliriz.
•Maddelenmiş listelerdeki imlerin şekillerini değiştirebiliriz.
•Madde imi yerine belirlediğimiz bir resim kullanabiliriz.
listelerde biçimlendirme yaparken sıklıkla kullanılan
komutlar:
•list-style-type
•list-style-image
•list-style-position

CSS Listeleri
list-style-type: Listeleme ŞekliTipi
Bir listenin stilini belirlememizi sağlar.Aşağıdaki
örnekte madde işaretleri kare (square) olacaktır:
li { list-style-type: square; }
Aşağıdaki şekilde görünecektir:
Numaralanmış Liste
Maddelenmiş Liste

CSS Box Model (Kutu Yapısı)
Kutu modelinde size tanıtacağımız dört özellik var:
 Margin - Kenarlığın çevresinde verilen boşluk.
 Border - Kenarlık
 Padding - Kenarlık ile içerik arasındaki boşluk.Arkaplan
rengine boyanır.
 Content (İçerik)

CSS Box Model (Kutu Yapısı)
Yukarıda CONTENT içeriğin bulunduğu kısımdır. İçerik ile kenarlık arasında verdiğimiz
boşlukpadding, kenarlıktan sonra vereceğimiz boşluk ise margin olarak adlandırılır.

Bir Elementin Genişliği ve Yüksekliği
Kutu modelinde size tanıtacağımız dört özellik var:
.box{ width:250px;
padding:10px;
border:5px solid gray;
margin:10px; }
Yukarıdaki örnekte genişlik (width) 250 piksel olarak ayarlanmıştır. Peki
HTML dosyamızda da bu elementin kaplayacağı alan 250 piksel mi olacaktır?
•250 piksel = Genişlik
•20 piksel = Sağdan ve Soldan İç Boşluk (padding 10x2)
•10 piksel = Sağ ve Sol Kenarlıklar (border 5x2)
•20 piksel = Sağ ve Sol Dış Boşluk (margin 10x2)
•300 piksel =Toplam Genişlik

CSS Margin(Dıştan Boşluk)
•margin özelliği bir HTML elementinin çevresi ile ona komşu başka bir HTML elementi
arasında belirtilen miktarda genişletip boşluk yaratır. Bu boşluk kenarlığın dışında
olacağı için dış kenarlık diyoruz.
Dış kenarlığı belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css
koduyla da bunlar hızlıca belirlenebilir.
Tüm margin komutları:
•margin-top - Üstten boşluk
•margin-right - Sağdan boşluk
•margin-bottom -Alttan boşluk
•margin-left - Soldan boşluk
Alabileceği değerler:
auto - Kenarlıklar tarayıcı tarafından otomatik ayarlanır
px - piksel olarak boşluk belirtme
% - içerik genişliğine göre oranlar
Kısa yol Kullanımı:
.stilim { margin: 10px 20px 10px 20px; }

CSS Padding (İçten Boşluk)
padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk
yaratmamızı sağlar.Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve
sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca
belirlenebilir.
Tüm padding komutları:
padding - Hızlı kullanım
padding-top - Üstten boşluk
padding-right - Sağdan boşluk
padding-bottom -Alttan boşluk
padding-left - Soldan boşluk
Alabileceği değerler:
genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
yüzde kullanma (%) - İçerik genişliğine göre oranlar
Kısa yol Kullanımı:
.stilim { padding: 10px 20px 10px 20px; }

CSS Border ( Kenarlıklar)
Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar
şunlardır:
 border-style
 border-width
 border-color
Kenar Belirtmenin KısaYolu
Sadece border kullanarak da border-width, border-color ve border-style değerlerini
belirtmemiz mümkün. Örneğe bakalım:
.kutum { border: 1px #0000CC solid; }
Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:
border-left - Sol kenar
border-right - Sağ kenar
border-top - Üst kenar
border-bottom -Alt kenar

CSS Float
•CSS ile sayfa planlamak için kullanılan yöntemlerden bir tanesidir .Float bir elementi
NormalAkışın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış
elementlere float uygulandığında elementler eğer yeterli alan varsa yan yana dizilirler.
Float Dinamik Göreceli Konumlandırma gibidir ve bu amaçla kullanılabilir.
img { float:left; margin:0 4px 4px 0; }
float:left ataması yapılan resim sola dayanacak ve metin bu resmin etrafını saracaktır.

CSS Clear
• Clear: Float ile sık sık kullanılan diğer özellik clear'dir. Float elementinin etkisinden
kurtulmak için clear özelliğini kullanırız. Float uygulanmış kutu sonra gelen
elementleri etkiler bu etkiden kurtulmak için clear özelliği kullanılır.
clear özelliğinin kullanımına örnek verecek olursak. Eğer float uygulanmış
element'ten sonraki elementin içeriği float uygulanmış kutunun yüksekliğinden
küçük ise bir sonraki element de bu float uygulamasından etkilenecektir. Biz bu etkiyi
kaldırmak için clear özelliğini kullanırız. Clear özelliği üst kutu ile araya gerekli
mesafeyi koyacaktır, bir bakıma üst kutu ile araya üst margin değeri ataması
yapmaktır.kullanımı;
“Clear: both;”

CSS Positions
 position:absolute|reletive |Static | Fixed;
 absolute: sayfanın en başından geçerli noktayı alır.
 reletive: sayfanın en son yazılan elamanının bulunduğu noktayı başlangıç
olarak alır.
 Static: Hiç bir özellik belirtilmediyse(left,right, top, bottom gibi değerlerin
etkisi yoktur.)
 Fixed: Sabit tarayıcıya göre hareket etmeyen element
 top: belirlenen başlangıç noktasından belirtilen pixel kadar aşağı yazar.
 left: başlangıç noktasında sağa doğru belirtilen pixel kadar uzaklığa
yazar.
 width: yazılacak yazı için maksimum genişlik belirler ve bu genişlik
aşıldığı zaman bir alt satıra geçer.

CSS Positions
 Static: Olması Gerektiği Gibi Bırakmak
Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi
sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri
belirlenemez.
 Fixed: Sabitlemek
Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız
bile o element orada yer alacaktır (hareket etmez).
p.fixed { position: fixed; top: 30px; right: 5px; }
Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5
piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.
Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir

CSS Positions
 relative: Normal Pozisyona Göre Konumlama
Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa
ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı
tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz.Ancak
biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.
h2 { position: relative; left: -20px; }
Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola
kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin
alanına girebilecektir.

CSS Positions
 absolute: Herhangi Bir Konum Belirleme
Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML
sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2
elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150
piksel altında (100, 150) olmasını istiyorsak:
h2 { position: absolute; left: 100px; top: 150px; }
Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan
kaplamazlar.Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden
ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi
düşünülebilir.
"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve
onları kapayabilir.

CSS Positions
 z-index: Elementin Önceliğini Belirlemek
Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası
belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML
elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.
img { position: absolute; left: 0px; top: 0px; z-index: -1; }
Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında
görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır)
olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul
edilecektir.
Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder.
Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha
büyük olan -2 özelliğine sahip element daha üstte görünecektir.

CSS Positions
Kaydırmayı Sonlandırmak
 clear: both; Float ile sık sık kullanılan diğer özellik clear'dir.
Float elementinin etkisinden kurtulmak için clear özelliğini
kullanırız. Float uygulanmış kutu sonra gelen elementleri etkiler
bu etkiden kurtulmak için clear özelliği kullanılır.
 clear özelliğinin kullanımına örnek verecek olursak. Eğer float
uygulanmış element'ten sonraki elementin içeriği float
uygulanmış kutunun yüksekliğinden küçük ise bir sonraki
element de bu float uygulamasından etkilenecektir. Biz bu etkiyi
kaldırmak için clear özelliğini kullanırız. Clear özelliği üst kutu
ile araya gerekli mesafeyi koyacaktır, bir bakıma üst kutu ile araya
üst margin değeri ataması yapmaktır.

CSS Display (Gösterme)
Bir Elementi Gizlemek/Göstermemek
Bunun için kullanabileceğimiz iki kalıp ifade var:
• visibility: hidden; - Element gizlenir ancak elementin sahip
olduğu alan boşluk şeklinde sayfada görünecektir.
• display: none; - Element gizlenir ve sahip olduğu alan da
sayfada gösterilmez ve yer kaplamaz.

bilalhoca

Recommended

Recommended

More Related Content

Similar to bilalhoca

Similar to bilalhoca (15)

bilalhoca