CSS Birimleri

Bu makalede CSS’de kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve renkleri tanımlamak için kullanılır.

Birimleri dört gruba ayıra biliriz. uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleri

Uzunluk Birimleri

CSS’de tanımlanan 8 uzunluk birimi vardır. Bunların üç tanesi göreceli(relative) uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.

Göreceli Uzunluklar

Bu birimler diğer uzunluk birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız bize avantaj sağlayacaktır.

em: Ana elementin font boyunun (font-size) değerine göre hesaplanarak bulunur. Yani body elemanında varsayılan yazı tipi büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan “M” harfinin genişliğini baz almasıdır.

ex: Elementin “x” harfinin yüksekliğidir. Atanmış olan fontun küçük “x” değeri yüksekliğidir.

px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.

Kesin Uzunluklar

Bu uzunluklar gerçek hayatta kullanılan birimlerdir.

in: inç. 1 inch=2,54 cm’dir. Örn: line-height:0.5in

cm: Santimetre. Bizim gerçek hayatta kullandığımız santimetere değeridir. Örnek: margin:2cm

mm: Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir. Örnek: letter-spacing:1mm

pt: Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt

pc: Pika. Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc

Yüzde Birimleri

Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.

 /* elementin font-size değerinin %150 si dir */
h4 { 
    line-height: 150% 
}
/* satır genişliğinin 10% nu */
p { 
    text-indent: 10% 
}

Renk Birimleri

CSS’de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda dört çeşittir.

Renk İsimleri

Renklerin ingilizce isimleri kullanılarak tanımlama yapılabilir.

p {
    color:black; 
} /* renk tanımı siyah olarak yapılıyor*/

h1{ 
    background-color: red;
} /* h1 başlığının ardalanı kırmızı tanımlanıyor */

RGB Renk Değerleri

CSS’de renk tanımlamak için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi vardır.

#RRGGBB : Burada, RR, GG, ve BB,sırasıylakırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)

#RGB: Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)

rgb(R,G,B):Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1

rgb(R%,G%,B%):Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1

URL Değerleri

URL tanımlaması için aşağıdaki gib bir tanımlama yapılır.

url(/images/kucuk.gif)

Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.

Not : Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde mevcuttur. Ancak bunlar kullanımda değildir.

Açı Değerleri :

deg(derece), grad(gradyen) ve rad(radyan) Örnek: -90deg, 100grad ve 1.57rad

Zaman Değerleri:

milisaniye (ms) ve saniye (s) Örnek : 100ms ve 0.1s

Frekans Değerleri:

Herz(Hz) ve MegaHerz(mHz) Örnek: 10mHz

CSS Kullanım Alanları

Oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır:
 Yerel kullanım alanı
 Global kullanım alanı
 Bağlantılı kullanım alanı

Yerel Kullanım Alanı 

Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım şeklinde CSS direkt etiketin “style” özniteliği kullanılarak uygulanır.

Örnek: p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım;

<p style=”color:red; text-align:center;”>Merhaba</p>

şeklinde olacaktır.

Yerel, bir başka deyişle etiket içi CSS kullanımı, tek tek her etiketin içine yazılması gerektiği ve yönetiminin zor olması sebebiyle çok gerekmedikçe önerilmemektedir.

Global Kullanım Alanı

Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın <head> kısmında, <style>…</style> etiketi içinde yer alır. Kısmen de olsa HTML ve CSS kodumuzu birbirinden ayırmış oluruz.

Bağlantılı Kullanım Alanı

Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi “.css” uzantılı stil Ģablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda <link> etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmıĢ oluruz. Sayfalarımızın okunaklılığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir. Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil Ģablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak “CSS” veya “styles” isimlerini tercih edebilirsiniz. Bu klasörler içinde yer alan .css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluĢturulmuĢ tüm stilleri sayfamıza uygulayabiliriz.

Stil Şablonu (CSS) Temelleri

1.CSS’in Yapısı (Açıklama Satırı)

2.CSS Ekleme Çeşitleri

3.Seçiciler

A.Sınıf Seçicisi(class selector)

B.Tekil Seçicisi(ID selector)

C.Etiket Seçicisi

D.Seçici Uygulama Hiyerarşisi

I.Çocuk Seçicileri(Direct child selectors)

II.Torun Seçicileri(Descandant selectors)

III.Bitişik Kardeş Seçiciler(Adjacent Sibling Selector)

IV.Evrensel Seçiciler(Universal Selector)

V.Öznitelik Seçicileri(Attribute Selectors)

ØBasit öznitelik seçicisi

ØÖznitelik değeri seçicisi

ØKısmı öznitelik değeri seçicisi

ØAyrımlı öznitelik değeri seçicisi

4.Background Biçimlendirme

A.Background- (color, image,repeat, attachment,position)

5.Yazı Tipi Biçimlendirme (font)

A.font-(family, size, weight, style)

6.Metin Biçimlendirme(text)

A.color, text-(align, decoration, indent), line-height, word-spacing, letter-spacing)

7.Kutu Modeli(Box Model)

A.Border(Kenarlık çizgisi)

I.border-style, border-width, border-color

B.Dış çizgi (outline) özellikleri

I.Dış çizgi stil özelliği(outline-sytle, outline-color,outline-width)

C.margin (bordera göre dış alan), padding(border’a göre iç alanı)

8.Liste Biçimlendirme(list-style-type,list-style-position,list-style-image, list-style)

9.Tablo Özellikleri(border-collapse,border-spacing,caption-side,empty-cells,table-layout)

A.Boyut Özellikleri(height, width, max-height,min-height, max-width, min-width)

B.Sınıflandırma ve Konumlama

I.Görüntüleme(display:inline,block,none,list-item,table…)

II.Gezinme/Kayma(float:left,right,none)

III.Silme Özelliği(clear,:left,right,both,none)

IV.Konumlama Özelliği(position:relative,static,absolite,fixed)

V.Z-index Özelliği(z-index)

10.Taşma Özelliği(overflow:visible,hidden,scroll)

11.Kırpma Özelliği(clip:rect(üst sağ alt sol)

12.Görünülebilme Özelliği(visibility:hidden,visible,collapse

13.İmleç Özelliği(cursor:auto,crosshair,default,e-resize,help,move,…)

14.Sözde Sınıflar(psuudo classes)

A.Linkli sözde sınıflar(a:link, a:visited,a:hover,a:active)

B.İlk çoçuk sözde sınıfı(p:first-child{}, p:first-letter{ })

C.Dil sözde sınıfı(q:lang(en){}

D.Before Sözde öğesi,after sözde öğesi (p:before{content:url(ses.wav), p:before{content:url(img.gif)}

Stil Şablonları ve Seçiciler

STİL ŞABLONLARI

Stil şablonları (CSS-Cascading Style Sheets), hazırlamakta olduğunuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar oluşturmaya yarar. Html, etiket türünde bir yazım dili olduğundan tasarım konusunda çoğu zaman yetersiz kalabiliyor. Bir web sayfası hazırlanırken çok sayıda renk veya font kullanmamız estetik açısından gerekli olabilmekte. Html ile bunları her defasında ayrı ayrı tanımlamak gerekirken, CSS bir defada tanımlayıp tüm sayfada kullanabilmemize olanak sağlar. Böylelikle bir değişiklik yapmamız gerektiğinde tüm sayfalarda değişiklik yapmak yerine, mevcut CSS üzerinde değişiklik yaparak tüm sayfalara etki etmesi sağlanmaktadır.Bu da işimizi oldukça kolaylaştırır.Css kodları, body veya head bölümlerinde yer almak üzere Html kodlarının içine yazılarak kullanılır. Ayrıca harici CSS dosyaları oluşturarak da istenildiği zaman html dosyasında kullanılmak üzere de çağrılabilme özelliğine sahiptir.

Stil Şablonlarının Komut Yapısı

Style dosyaları html kodlarının <head>…</head> bölümünde tanımlanır.

Kullanımı:

<style type=”text/css”>…..</style> şeklindedir.

Stil Şablonlarının Çeşitleri, Seçiciler

Stil Şablonlarının Çeşitleri

Css kodlarının en önemli özelliklerinden birisi farklı türlerde kullanılabilmesidir. İsteğe göre tek bir ögeye, tüm sayfaya veya site içerisinde kullanılan tüm html dosyalarına etki edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır.

Yerel CSS, html belgesinin <body> bölümüne yazılır ve bir defaya mahsus olmak üzere sadece yazıldığı yerde etkili olur.

Örnek :

HTML KODLARI

<html>
<head>
<title>Yerel Stil Şablonu</title>
</head>
<body>
<h3>Yerel CSS Kullanımı</h3>
<h3 style=font-size:14pt;color:purple>Yerel CSS Kullanımı </h3>
</body>
</html>

WEB GÖRÜNTÜSÜ

Genel CSS, html belgesinin <head> bölümüne yazılır ve mevcut html dosyasının tamamı üzerinde etkili olur.

Örnek :

HTML KODLARI

<html>
<head>
<title>Genel Stil Şablonu Örneği</title>
<style type=”text/css”>
<!–h3{font-size:14pt;color:purple}–>
</style>
</head>
<body>
<h3>Genel CSS Kullanımı</h3>
</body>
</html>

WEB GÖRÜNÜMÜ

Harici CSS, Global stil şablonu olarak da adlandırılır. Hazırlanmakta olan sitenin aynı özelliklerde olmasının istenmesi durumunda kullanılır ve sitedeki tüm sayfalara etki eder. Harici CSS de kodlar ayrı bir dosyaya yazılıp uzantısı .css olacak şekilde kaydedilir. Daha sonra html dosyası içerisinde yer alan <head>….</head> etiketleri arasına;

<link rel=”stylesheet” type=”text/css” href=”dosya_ismi.css”> şeklinde yazılarak çağrılır.

Örnek :

Aşağıda verilen kodları kullanmakta olduğunuz editöre yazıp stil.css olarak kaydediniz.

h1 {font-size:10pt;color:blue}

h2 {font-size:14pt;color:purple}

h3{font-size:20pt;color:orange}

Aşağıdaki kodları kullanmakta olduğunuz editöre yazıp harici.html olarak kaydediniz.

<html><head>

<title>Harici CSS Örneği</title>

<link rel=”stylesheet” type=”text/css”href=”stil.css”>

</head></head>

<body>

<h1>Harici CSS Kullanımı</h1>

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

<h3>Harici CSS Kullanımı</h3>

</body></html>

Kodlar kaydedilip çalıştırıldığında tarayıcıdaki görüntüsü aşağıdaki gibi olacaktır.

Seçiciler (Selectors)

Seçiciler CSS’nin en çok kullanılan elemanlarındandır. <h1>, <h2>,<h3> gibi etiketlerin özelliklerini değiştirmeden onlara yeni özellikler eklemeyi sağlar.Ayrıca istediğimiz bir kelimeye, style özellikleri atayarak istenildiği zaman çağırmaya da olanak tsağlar. Id seçicisi ve sınıf seçicisi olmak üzere iki çeşit seçici vardır.

İd Seçicileri (ID Selectors): Html belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir Html etiketine stil vermek amacıyla kullanılırlar. Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız.

Sınıf Seçicileri (Class Selectors): Yazmış olduğunuz kodlarda kullandığınız <h1> gibi etiketlerin tümünün aynı özellikte olmasını istemediğiniz durumlar olabilir. Sınıf seçicileri bu tür durumlarda kullanılır.

Css Nedir ?

CSS yani Türkçesi stil şablonları, her site tasarımcısının az dahi olsa bilmesi gereken bir konudur. Normalde yazı yazarken veya bir şeyi belirtirken, bazı özelliklerle öğenin şeklini değiştirebilirsiniz ama bu öğenin farklı yerlerde de bu şekilde olmasını istiyorsanız her birine uygulamanız gerekir. 50 tane farklı sayfanız olduğunu ve hepsinde başlıkları mavi renk yaptığınızı varsayalım, aylar sonra rengi kırmızı yapmak istediğinizde bütün sayfaları tek tek düzenlemeniz gerekecektir. İşte burada CSS devreye giriyor, bir şablon içerisine bütün sayfada kullanacağınız şekilleri belirtip buradan kullanıyorsunuz. Mavi başlığı kırmızı yap deyimini sadece şablon içerisinden belirtmeniz yetiyor. Dosyanın içinde ve dışında olmak üzere 2 türlü stil şablonu kullanımı var.

İç içe çerçeve Oluşturma

<frameset> etiketi, aynı pencere içerisinde yatay ve dikey çerçeveleri birlikte kullanmanıza olanak sağlar.

Örnek :

<html>
<head>
<title>İç içe frame set kullanımı</title>
</head>
<frameset cols=”30%,70%”>
<frameset rows=”100,*”>
<frame name=”s1″src=”s1.html”scrolling=”yes”
marginwidth=”5″marginheight=”5″noresize=”noresize”>
<frame name=”s2″src=”s2.html”>
</frameset>
<frame name=”s3″src=”s3.html”>
</frameset>
<body>
</body>
</html>

 

WEB SAYFASINDAKİ GÖRÜNÜMÜ

 

 

 

 

</body>
</html>

 

WEB SAYFASI GÖRÜNÜMÜ

 

 

 

 

Çerçeveler

Çerçeveler, bir tarayıcı penceresini birden fazla pencereye bölüp her bir pencere içerisinde farklı içerikler gösterilmesini; ayrıca bir pencerede tanımlanmış olan bağlantıların (linklerin) istediğiniz bir diğer pencerede görüntülenmesini sağlar.

• Çerçevelerin özelliklerini aşağıda olduğu gibi özetleyebiliriz;
• Her çerçevenin kendine ait bir URL adresi vardır.
• Her çerçeveye bir isim verilebilir.

Çerçeveler kullanıcı tarafından verilecek ölçülerle boyutlandırılabileceği gibi otomatik olarak da boyutlanabilme özelliğine sahiptir.
İçinde çerçeveler bulunan bir sayfa oluşturmak için, öncelikle çerçevelerin özelliklerini tanımlayan temel bir html dosyası oluşturmak gerekir. Çerçevelerden oluşan bir sayfanın normal bir html belgesinden farkı içeriğinde <body> etiketi yerine, <frameset> etiketini kullanmasıdır.

<frameset>
Çerçeve oluşturmak için kullanılan etikettir. Bu komut ile tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutlarının ne kadar olacağı belirlenir.

Kullanımı:

<html>

<head>….</head>

<frameset>….</frameset>

</html>

Bu etiketle birlikte kullanılacak iki parametre vardır. Bunlar Cols ve Rows parametreleridir.

Cols

<frameset> etiketi ile kullanılan parametrelerden birisidir. Ekranı dikey olarak (sütunlar halinde) tanımlanan boyutlara bölmek için kullanılır.Oluşturulacak sütunların genişlikleri pixel veya yüzde(%) cinsinde belirlenir. Sütun sayısı, çerçeve sayısını belirleyici niteliktedir.

Kullanımı:

<frameset cols=”1. sütun genişliği, 2. sütun genişliği, 3.sütunun genişliği, …”>

Örnek :

<frameset cols=”30%, 40%, 30%”>

Buradaki 1.sütun sayfanın %30’u genişliğinde, 2. Sütun %40’ı genişliğinde ve 3. sütun ise %30’u genişliğinde boyutlandırılmıştır.

Örnek :

<html>

<head>

<title>Frameset Cols Örneği</title>

</head>

<frameset cols=”30%, 40%, 30%”>

<frame name=”sutun1″src=”s1.html”>

<frame name=”sutun2″src=”s2.html”>

<frame name=”sutun3″src=”s3.html”>

</frameset>

</html>

WEB SAYFASI GÖRÜNÜMÜ

Örnek :

<frameset cols=”200,*,200”>

Burada sütunlar şeklinde tanımlanan birinci ve üçüncü çerçeve 200 pixel değerinde, 2. çerçeve ise sayfanın geri kalan kısmını kapsayacak şekilde boyutlandırılmıştır.

Rows

<frameset> etiketi ile kullanılan bir diğer parametre ise rows parametresidir. Ekranı yatay olarak (satırlar halinde) tanımlanan boyutlarda bölmek için kullanılır.

Kullanımı:

<frameset rows=”1. satır genişliği, 2. satır genişliği, 3.satır genişliği, …”>

Örnek:

<frameset rows=”200,*,200”>

Sayfada görüntülenecek olan çerçevelerin sayısı ve boyutları belirlendikten sonra <frame> etiketi kullanılarak pencerelerin içeriğinde neler olacağı belirlenir.

Örnek :

HTML KODLARI

<html>

<head>

<title>Frameset Rows Örneği</title>

</head>

<frameset rows=”30%, 40%, 30%”>

<frame name=”sutun1″src=”s1.html”>

<frame name=”sutun2″src=”s2.html”>

<frame name=”sutun3″src=”s3.html”>

</frameset>

</html>

 

WEB GÖRÜNTÜSÜ

 

 

<frame>

<frame> etiketi, <frameset> etiketi ile oluşturulan çerçevelerin içeriğinde gösterilecek sayfaların belirlenmesi için kullanılır.

Örnek :

<frameset rows=”50%,50%”>

<frame name=”s1″src=”s1.html”>

<frame name=”s2″src=”s2.html”>

</frameset>

Yukarıdaki örnekte <frameset> ile tanımlanmış çerçevelerden oluşmuş sayfanın ilk %50’lik kısmını kapsayacak bölümüne önceden oluşturulmuş olan sayfa1.html deki içerik; diğer %50 lik dilimini oluşturan 2. çerçeveye ise sayfa2.html olarak kaydedilmiş sayfadaki içerik yerleştirilecektir. Eğer bu sayfalar önceden hazırlanıp kaydedilmemişse tarayıcıda “sayfa görüntülenemiyor” hata mesajı görüntülenecektir.

<frame> etiketi ile kullanılabilecek parametreler

name : Çerçevenin ismini gösterir.

resize/noresize : Çerçeve boyutunun değiştirilip değiştirilemeyeceğini gösterir

scrolling : Çerçevenin içeriğinin ekrana sığmadığı durumlarda, kaydırma çubuğu kullanılıp kullanılmayacağını belirler. Varsayılan değeri auto olmakla birlikte, yes veya no değerleri de verilebilir.

marginheight : Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.

marginwidth : Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.

src : Çerçeve içinde gösterilmesini istediğimiz dosyanın URL adresini belirtmek için kullanılır.

<noframe>

Bazı tarayıcılar çerçeve özelliğini desteklemeyebilir. Bu tür durumlarda sayfaya <noframe> etiketi kullanarak mesaj yazılması sağlanır ve kullanıcının bu komutla belirlenen mesajla karşılaşması sağlanır.

 

 

Formlar

Etkileşimli (dinamik) sayfalar için formlar oluşturma

Kullanıcıların girdikleri verileri mail adresine göndermek yada veritabanına kaydetmek için öncelikle sayfamızın etkileşimli yani dinamik (php, asp, jsp v.s) olması gerekmektedir. Formlar özelikle üye kayıt sayfalarında, üye giriş alanlarında, iletişim sayfalarında, görüş ve öneri gibi kullanıcı fikir ve bilgilerini iletme sayfalarında kullanılır..

Veri girişi için kullanılan yazı kutuları, şifre  kutuları, butonlar v.s tümü form etiketleri arasında yazılır. Aksi halde veri iletimi yada kaydı yapılmaz..

Örnek 1 // kodun yazımı

<form action=”” method=”post” name=”form”>
<p>Kullanıcı adınız: <input type=”text” name=”isim” value=”” /></p>
<p>Şifreniz: <input type=”password” name=”sifre” value=”” /></p>
<input name=”giris” value=”Giriş Yap” type=”submit” />
</form>

Örnek 1 // kodun çıktısı

Kullanıcı adınız:  

Şifreniz:                 

 

Örnek 6 // kodun yazımı

 

<form action=”” method=”post” name=”form”>
<p>Adınız: &nbsp; &nbsp; &nbsp; <input type=”text” name=”isim” value=”” /></p>
<p>Soyadınız: <input type=”text” name=”soyad” value=”” /> </p>
<p>Şifre: &nbsp; &nbsp; &nbsp; &nbsp; <input type=”password” name=”sifre” value=”” /></p>
<h4>Hobileriniz</h4>
<input type=”checkbox” name=”muzik” /> Müzik
<input type=”checkbox” name=”spor” /> Spor
<input type=”checkbox” name=”oyun” /> Oyun
<h4>Eğitim</h4>
<input type=”radio” name=”ilk” /> İlk okul<br />
<input type=”radio” name=”lise” /> Lise <br />
<input type=”radio” name=”univ” />Üniversite<br />
<input type=”radio” name=”doktora” /> Doktora<br />
<h4>Şehir</h4>
<select name=”sehir”>
<option>Şehir seçin</option>
<option>Rzie</option>
<option>Artvin</option>
<option>Trabzon</option>
<option>Giresun</option>
<option>Ordu</option>
<option>Samsun</option>
<option>İstanbul</option>
</select>
</form>
<br /><br />
<input name=”bilgiler” value=”Gönder” type=”submit” />
<input name=”reset” value=”temizle” type=”reset” />
</form>

Örnek 6 // kodun çıktısı

Adınız:         

Soyadınız: 

Şifre:            

Hobileriniz

 Müzik
 Spor
 Oyun

Eğitim

 İlk okul

 Lise

Üniversite

 Doktora

Şehir

 Şehir seçin Rzie Artvin Trabzon Giresun Ordu Samsun İstanbul     

 

Şimdilik örneklerimiz burada sona erdi. İlerleyen derslerimizde formaları css ile şekillendirecek ve sayfalarımızda daha hoş durmalarını sağlayacağız. Özellikle tablolar yerine div elementi ile kutular oluşturup bu kutuları css ile şekillendireceğiz..

 

Tablolar

u dersimizde önce tablolar hazırlayacağız ardından etkileşimli sayfalar  için formlar hazırlayacağız. Tablolar html tasarımda çok kolay ve hızlı sayfalar hazırlanmasına yardımcı olur ancak iç içe oluşturulan tablolar sayfaların daha yavaş açılmasına sebep olmaktadır. Web 2.0′ın hayata geçmesiyle web siteleri özellikle seo alanında çok gelişti. Bu gelişime en büyük etki sayfaların hızlı açılması etkili oldu. Tablolar sayfaların açılma süresini uzattığı içinde Web 2.0 ile birlikte tabloların kullanımı yerine “div” etiketi ile kutular oluşturup Css ile şekiller verilmesi öneriliyor.

 

Özetle tabloların yerine div elementinin kullanımı web sayfalarının boyutunu küçültüp açılma hızını arttırdı ancak bir dezavantajı var ki her div elementine css dosyalarında verilen biçimlendirmeler yüzünden css dosyası boyutu birazcık büyüdü. Tabi bu dosyanın büyümesi sayfaların açılmasını aksi yönde etkilemedi, kısaca çok sayıda tablodan oluşan  sayfaların (özellikle browser oyunları gibi) açılması hızını neredeyse 1/3 oranında hızlandırdı..

 

Tablo hazırlama:

Tablo hazırlamak için için önce “table” elementini açıyor tablomuzun sonunda kapatıyoruz… Tablomuza çerçeve vermek için border etiketini,  çerçeve rengi için bordercolor etiketini, içeriğini renklendirmek için bgcolor etiketini, genişlik vermek için width ve yükseklik vermek içinde height etiketini  kullanıyoruz.. Bir tablo içerisinde en az 1 satır ve 1 sütun olması lazım.. Tablomuza satır eklemek için tr etiketini, sütun eklemek içinse td etiketini kullanıyoruz..

örnek kod:

<table border=”3″ bodercolor=”blue” bgcolor=”red” width=”100″ height=”200″>
<tr>
<td>tablo</td>
</tr>
</table>

kodun çıktısı:

tablo

 

Tablo Örnekleri:

Örnek 1 // kodun yazımı

<table border=”2″>
<tr>
<td>tablo 1</td>
</tr>
</table>

Örnek 1 // kodun çıktısı

tablo 1

 

Örnek 2 // kodun yazımı

<table border=”2″>
<tr>
<td>satır 1 sutun 1</td>
<td>satır 1 sutun 2</td>
<td>satır 1 sutun 3</td>
</tr>
</table>

Örnek 2 // kodun çıktısı

satır 1 sutun 1

satır 1 sutun 2

satır 1 sutun 3

 

Örnek 3 // kodun yazımı

<table border=”2″>
<tr>
<td>satır 1 sutun 1</td>
<td>satır 1 sutun 2</td>
<td>satır 1 sutun 3</td>
</tr>
<tr>
<td>satır 2 sutun 1</td>
<td>satır 2 sutun 2</td>
<td>satır 2 sutun 3</td>
</tr>
<tr>
<td>satır 2 sutun 1</td>
<td>satır 2 sutun 2</td>
<td>satır 2 sutun 3</td>
</tr>
</table>

Örnek 3 // kodun çıktısı

satır 1 sutun 1	satır 1 sutun 2	satır 1 sutun 3
satır 2 sutun 1	satır 2 sutun 2	satır 2 sutun 3
satır 2 sutun 1	satır 2 sutun 2	satır 2 sutun 3

 

Örnek 4 // kodun yazımı

<table border=”3″ width=”600″>
<tr bgcolor=”green”>
<td> 1. satır 1. sutun</td>
<td>1. satır 2. sutun</td>
<td>1. satır 3. sutun</td>
<td rowspan=”4″>1. satır 4. sutun</td>
</tr>
<tr bgcolor=”#0099CC”>
<td colspan=”3″>orta satır 1</td>
</tr>
<tr bgcolor=”orange”>
<td>2. satır 1. sutun</td>
<td>2. satır 2. sutun</td>
<td>2. satır 3. sutun</td>
</tr>
<tr bgcolor=”yellow”>
<td>2. satır 1. sutun</td>
<td>2. satır 2. sutun</td>
<td>2. satır 3. sutun</td>
</tr>
</table>

Örnek 4 // kodun çıktısı

Tablolarda satırları birleştirmek için colspan, sütunları birleştirmek içinse rowspan etiketlerini kullanıyoruz..

1. satır 1. sutun	1. satır 2. sutun	1. satır 3. sutun	1. satır 4. sutun
orta satır 1
2. satır 1. sutun	2. satır 2. sutun	2. satır 3. sutun
2. satır 1. sutun	2. satır 2. sutun	2. satır 3. sutun

 

E-Posta Adresine Bağlantı Oluşturma

Hazırlamakta olduğunuz web sitesi aracılığıyla istenilen herhangi bir e-posta adresine bağlantı oluşturabilirsiniz.

E-posta adresine bağlantı oluşturmak için;

<a href=”mailto:e-posta adresi”>….</a> komutu kullanılır.

 

Örnek:

<a href=”mailto: etogm@meb.gov.tr”> E-posta göndermek için tıklayınız.</a>

Yukarıdaki html komut satırını yazıp kaydettiğinizde tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

E-posta göndermek için tıklayınız.