https://img.webme.com/pic/n/net-uzman/reklamalan.png

Net-Uzman.Tr.Gg HtmlKodLar Asp Php Java BilgisayarDersleri Photoshop Dersleri Pr ArttırmaYontemleri DreamWeaver DersLeri

Full Css Dersleri

CSS (Cascading Style Sheets) web tasarımcılarının işini oldukça kolaylaştırmaktadır. CSS HTML'den ayrı yeni bir dil değil, HTML'in önemli bir parçasıdır. CSS ile web sayfasındaki araçların görünümleri genelleştirilir.

HTML derslerinde style="..." parametresini görmüştük. Bu parametre ile tanımlanan kodun özelliklerini değiştirmiştik. CSS style özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de Internet Explorer 4.0 browserlar ve daha gelişmiş olanları CSS'yi destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.

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:

Kod:
<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.
_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..

İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.
______________________________________________________________________________

Nesne Özelliklerini Genelleştirme


Kod:
Sayfa tasarımında CSS'den 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ı JavaScript ve VBScript derslerinde ayrıntılı olarak göreceğiz.

CSS kullanımını anlatabilmek için aşağıdaki iki örneği inceleyelim. İlk örnekte style="..." parametresi kullanılıyor. İkincisinde ise <style>...</style> kodları kullanılmaktadır.
<html> <head> <title>Style parametresi ile...</title> </head> <body> <h1 style="font-size:18pt; color:blue; text-align:left">AĞIR ROMAN</h1> <p style="font-size:12pt; color:crimson; text-align:justify">Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p> <h4 style="font-size:8pt; color:black; text-align:right">Metin Kaçan</h1> </body> </html>



Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:
Kod:
<html> <head> <title>Style kodu ile...</title> <style> <!-- p { font-size:12pt; color:crimson; text-align:justify } h1 { font-size:18pt; color:blue; text-align:left } h4 { font-size:8pt; color:black; text-align:right } --> </style> </head> <body> <h1>AĞIR ROMAN</h1> <p>Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p> <h4>Metin Kaçan</h1> </body> </html>



Şimdi geldik "N'aptık?" köşesine. İ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, <style>...</style> kodları arasında kod kod tanımlanmıştır. 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.

CSS'nin yapısı; uygulamamızdan da görüleceği üzere, şöyledir: KOD {ÖZELLİK: değer}. Eğer koda birden fazla özellik atayacaksak, tıpkı style="..." parametresinde olduğu gibi stil özellikleri arasına ";" işareti konur: KOD {ÖZELLİK1: değer1; ÖZELLİK2: değer2; ÖZELLİK3: değer3} gibi. Stil özelliklerini yanyana yazabileceğiniz gibi, uygulamada olduğu gibi altalta da yazabilirsiniz:

KOD
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
Kod:
{
ÖZELLİK1:değer1;
ÖZELLİK2:değer2;
ÖZELLİK3:değer3
}

_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..
________________________________________________________________________________________________________

CSS'yi Dış Dosya ile Tanımlama


CSS araçlarını HTML kodlarına atamanın bir başka yolu daha vardır: CSS özelliklerini .css uzantılı bir dosyaya yazmak ve web sayfasından bu dosyayla bağlantı kurmak. Herhangi bir metin editöründe oluşturduğumuz; <style>...</style> kodları arasına yazdığımız CSS özelliklerini içeren, bir dosyayı .css kök ismi ile kaydedin. 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 diaz.css olsun:

Kod:
<link rel="stylesheet"
type="text/css"
href="diaz.css">


Daha önce style parametresi ve style kodları ile yaptığımız AĞIR ROMAN isimli sayfayı, bu sefer yeni öğrendiğimiz dış dosya yöntemiyle yapalım. (Yine aynı sayfayı yapacağız.) Tabi önce .css isimli dosyayı oluşturacağız. Aşağıdaki sayfayı tarz.css ismiyle kaydettim:
p { font-size:12pt; color:crimson; text-align:justify } h1 { font-size:18pt; color:blue; text-align:left } h4 { font-size:8pt; color:black; text-align:right }

Bu sayfayı "tarz.css" ismiyle kaydettikten sonra, web sayfasını şöyle oluştururum:
Kod:
<html> <head> <title>Dış dosya yolu ile...</title> <link rel="stylesheet" type="text/css" href="tarz.css"> </head> <body> <h1>AĞIR ROMAN</h1> <p>Güneş buluttan sıyrılırken Kolera'nın âlemci kadınları bir omuz darbesinde yıkılacakmış gibi duran evlerinin önünde oto tamircileriyle, marangozlarla, tornacılarla aslanlar gibi muhabbete koyuldular. Bir yandan da kaynak yaparken elleri titreyen ustalara esrarı daha kallavi içmeleri için zıvana hazırlamaya başladılar. Köylü kadınlar, kocalarının mahalle hakkında anlattıkları korku hikâyelerinden tırstıklarından mahkûmlar gibi camdan bakıyorlardı.</p> <h4>Metin Kaçan</h4> </body> </html>



Özellikle aynı formatta çok fazla sayfa içeren siteler için dış dosya yöntemini kullanmanızı tavsiye ederim. Böylece her sayfa için aynı kodları yazıp durmanız gerekmez. Ayrıca sayfaların formatını değiştirmek istediğinizde ".css" uzantılı dosyanızı değiştirmeniz yeterli olacaktır. CSS'nin yapısını böylece tanımış olduk, diğer sayfalarda ayrıntıları öğreneceğiz. Görüşmek üzere.
_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..

İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.



Metin Biçimi



HTML kodlarına atanan parametreler, metin formatı konusunda çok yetersiz kalmaktadır. En basiti metni iki yana yaslayamıyorduk. HTML derslerinden hatırlanacağı üzere, align="..." parametresi ile metni sağa (right), sola (left) ve merkeze (center) yaslamak mümkün. Ancak göze hoş gelen iki yana yaslama biçimini bu parametreyle gerçekleştiremiyorduk.
Metin Hizalama

CSS'de metni yaslamak için text-align özelliğinden yararlanıyoruz. Bu özelliğe verebileceğimiz değerler:left (sol), right (sağ), center (orta) ve justify (iki yana yasla). Aşağıdaki uygulamamıza bakalım:
<html> <head> <title>Text-align özelliği</title> <style> <!-- p { text-align:justify } h1 { text-align:center } h3 { text-align:left } h4 { text-align:right } --> </style> </head> <body> <br> <h4>Ankara, Kasım 1996</h4><br> <h1>Anadolu'da Bronz Çağı Kentleri</h1> <p>Kentler, endüstri toplumunda olduğu gibi endüstri öncesi toplumlarda da tarih boyunca en devingen öğe oldu, toplum yaşantısında belirgin izler bıraktı. Anadolu'da kent ve kentleşme tarihi üzerinde yapılmış çeşitli araştırmaların sonuçlarını bir araya getirip bunlardan yeni sentezler üretti. Anadolu kentlerinde mekânsal yapı değişimi ile bu yapıyı belirleyen sosyo-ekonomik süreçler arasındaki nedensellik ilişkilerinin irdelendiği bu kitap, araştırmacılar, özellikle kent plancıları için önemli bir kaynak.</p> <h3>Sevgi Aktüre</h3> </body> </html>


Uygulamamızda yer alan <p>, <h1>, <h3> ve <h4> kodların hepsi align="..." parametresini destekleyen kodlardır. Bu parametreyi desteklemeyen <code>, <address> gibi kodlar pek tabi ki text-align özelliğini de desteklemezler. Hangi kodların hangi parametreleri desteklediğini HTML Kodları sayfasından öğrenebilirsiniz.
Metinler ve Çizgiler

Metin formatı için kullandığımız bir başka özellik: text-decoration. Bu özelliğin aldığı değerler şunlardır:
overline Yazıların üstünün çizili olmasını sağlar.
text-decoration: overline
line-through Yazıların üzerinin çizili olmasını sağlar.
text-decoration: line-through
underline Yazıların altının çizili olmasını sağlar.
text-decoration: underline
none Yazıların çizgisiz olmasını sağlar.
text-decoration: none

Bu özelliği web tasarımcıları daha çok hiperlinkler için kullanırlar. Bildiğiniz gibi <a href="..."> kod ve parametresiyle oluşturduğumuz hiperlinkler, mavi renkli altı çizili yazılardır. Eğer hiperlinklerin altı çizili olmasını istemiyorsak CSS dosyamızda şu özelliği kullanırız:text-decoration: none. Aşağıdaki hiperlink çeşitlerine bakalım:
<html> <head> <title>Text-align özelliği</title> </head> <body> <br> <a href="derscss1.html" style="text-decoration:overline">Metin Formatı</a><br> <a href="derscss2.html" style="text-decoration:line-through">Font Formatı</a><br> <a href="derscss3.html" style="text-decoration:underline">Arkaplan Formatı</a><br> <a href="derscss4.html" style="text-decoration:none">Tablo Formatı</a><br> <a href="derscss5.html">Sınıflandırma</a><br> </body> </html>


Tabi text-decoration özelliğini başka bir menüde de kullanabiliriz. Örneğin başlık yapmaya yarayan <h1>...<h6> kodlarına bu özelliği atayarak, altı çizili alt başlıklar oluşturabiliriz.
Metin Renkleri

Metnin renk özelliklerini tanımlamak için color aracından yararlanırız. Bu özelliğin aldığı değerler İngilizce renk ismi olarak tanımlanabileceği gibi, hekzadesimal (onaltılık sistem) rgb kodları veya ondalık rgb kodları halinde de tanımlanabilir.
h1 { color:crimson; } h2 { color:#8b008b; } h3 { color:rgb(139,0,139) } h4 { color:rgb(54%,0%,54%) }
Satır Arası Yükseklik

Metnin hizalamayı, metnin çizgi formatını ayarlamayı ve metnin rengini belirlemeyi öğrendik. Metnin satırları arasıdaki mesafeyi belirlemek şimdiki konumuz. Bunun için line-height özelliğini kullanıyoruz. Eğer metnin line-height özelliğine normal değerini verirsek, satır arası yükseklik varsayılan değerini alır. Tabi biz bu özellik üzerinde şu değerlerle oynayabiliriz.
sayı Satır arası yüksekliğini verilen sayıya göre belirler.
line-height: 1.5
birim Satır arası yüksekliğini px, cm gibi girilen birimlere göre belirler.
line-height: 10mm veya line-height: 15px
yüzde Satır arası yüksekliği yüzde oranı cinsininden belirler.
line-height: 150%

Sayfayı fazla uzatıp, okuyucuyu sıkmamak için uygulama yapmıyorum, sizler <p> koduna bu özellikleri atayarak istediğiniz satır aralığında paragraflar oluşturabilirsiniz. Başka kodlarla da denemeniz faydalı olacaktır. Ayrıca Özelleştirme konusunu anlattığım sayfada bu özellikleri kullanacağım birkaç örnek bulunacak, onlara da bakabilirsiniz.
Harfler Arası Boşluk

Metin formatı için öğreneceğimiz diğer bir özellik: harfler arasındaki mesafeyi ayarlamak. Bunun için letter-spacing aracından yararlanacağız. (NOT:NN browserını kullananlar bu özelliği göremez.) Bu özelliğe vereceğimiz değerler cm, mm gibi veya px (piksel) gibi birimlerle tanımlanmalı. Vereceğimiz değer negatif olursa, harfler arasındaki boşluk normalden daha az olur. Değer pozitif olursa; anlaşılacağı üzere, harfler arasındaki mesafe normale göre daha fazla olur. Matematiği süper olan okuyucularımız, bu değerin sıfır olması halinde nasıl sonuç alınacağını hemen anlamıştır: Birşey değişmez.
<html> <head> <title>Harfler arası mesafeyi ayarlamak...</title> <style> <!-- h1 {letter-spacing:-3px} h2 {letter-spacing:1 cm} h3 {letter-spacing:0 cm} h4 {letter-spacing:5mm} --> </style> </head> <body> <br> <h1>Büyük Altay!</h1><br> <h2>Büyük Altay!</h2><br> <h3>Büyük Altay!</h3><br> <h4>Büyük Altay!</h4><br> </body> </html>


IE kullanan okuyucularımız bu uygulamayla letter-spacing özelliğini daha iyi kavramışlardır. Uygulamada 5mm yazılan yere 0.5cm de yazabilirdik pekalâ. İngiliz matematiğinde ondalık sayıların "." ile, Türk matematiğinde ise "," ile ayrıldığını unutmayalım.
Satırbaşı Boşluğu

Sayfa uzuyor ama biz halâ metin formatını bitiremiyoruz. Bir başka özellik de satır başı tanımlamak. HTML derslerinde öğrendiğimiz <p> kodu ile satır başı yapmaksızın, üst ve alt satırları boş bırakılan paragraflar elde ediyorduk. Aslında bu format standartlaştı ama eski format; yani satırbaşı bırakma geleneğini de bir çırpıda silemeyiz. Satır başı bırakabilmek için text-indent özelliğinden yararlanıyoruz. Bir önceki özellik de olduğu gibi, bu özelliğe de cm, px gibi birimlerle tanımlanmış değerler verebiliyoruz ve yine negatif değerler atanabiliyor. Eğer değer pozitifse, bildiğimiz anlamda satır başı bırakılmış oluyor, eğer negatif ise paragrafın ilk satırı diğer satırların solunda kalıyor. Diğer özelliğin aksine, bu özelliği NN 4.0 ve daha üstü browser'lar da destekliyor; desteklemeyenleri ayrıca belirtiyorum zaten.
<html> <head> <title>Satır başı bırakma</title> <style> <!-- p {text-indent:1cm} --> </style> </head> <body> <br> <p>İşte o günden sonra, biz eşek milleti, konuşmasını, söyleşmesini unutmuşuz; her duygumuzu, her düşüncemizi, anırtıyla anlatmaya başlamışız. O eski kuşaktan eşek, tehlike kuyruk altına girinceye dek, kendini avutup, kandırmamış olsaydı, bizler de konuşmasını bilecektik.</p> <em>Ah Biz Eşekler, Aziz Nesin</em> </body> </html>

Büyük Harf, Küçük Harf

Diğer özelliğimiz: text-transform. Bu özelliğe değerler vererek metnin büyük harflerle yazılı olmasını (uppercase), küçük harflerle yazılı olmasını (lowercase) veya sözcüklerin ilk harflerinin büyük olmasını (capitalize) sağlayabiliyoruz. Uygulamamız ile neler dediğimi daha iyi anlayacaksınız:
<html> <head> <title>Büyük harf, küçük harf sorunsalı,</title> <style> <!-- h2 {text-transform:lowercase} h3 {text-transform:uppercase} h4 {text-transform:capitalize} --> </style> </head> <body> <br> <h2>BüYüK AlTaY!</h2><br> <h3>BüYüK AlTaY!</h3><br> <h4>BüYüK AlTaY!</h4><br> </body> </html>


Metin formatı için kullanacağımız son özellik: vertical-align (düşey-hizalama). Bu özellikle araçların düşey olarak nasıl hizalanacağını belirleriz. HTML derslerinde <img> komutunu anlattığımız sayfada, resim nesnesinin yazıya göre nasıl hizalanacağını align="..." parametresiyle göstermiştik. Bu sefer hizalamayı CSS özellikleriyle yapıyoruz. vertical-align özelliğinin aldığı değerler şunlardır:
baseline Nesne ana elemanın taban hattına yerleşir.
vertical-align: baseline
sub Nesne alt simgeymiş gibi hizalanır.
vertical-align: sub
super Nesne üst simgeymiş gibi hizalanır.
vertical-align: super
top Nesne satırdaki en yüksek elemanın yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: top
text-top Nesne metnin yüksekliğini tepe hattı alacak şekilde hizalanır.
vertical-align: text-top
middle Nesne ana elemanı ortalayacak şekilde hizalanır.
vertical-align: middle
bottom Nesne satırdaki en aşağıdaki elemanın seviyesini taban hattı alacak şekilde hizalanır.
vertical-align: bottom
text-bottom Nesne metnin tabanını taban hattı alacak şekilde hizalanır.
vertical-align: text-bottom
yüzde oranı Nesne satır hattına göre yüzde oranı ile hizalanır; negatif değerler geçerlidir.
vertical-align: 5%

HTML derslerinde nesne hizalamayı iyi öğrenenler, anlatılanları rahatlıkla anlamışlardır. Bu özellik NN 4.0 ve üzeri browser'larda sadece <img> kodu için geçerlidir. Bu sayfalık bu kadar, diğer sayfada görüşürüz.
_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..

İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.

Font Biçimi


Bir önceki sayfada metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki dersimizde ise yazı fontlarının özellikleri ile oynayacağız.
Font Türü

Önce font seçmeyi öğrenelim. HTML derslerinde <font> kodu ve face="..." parametresi ile yazı fontunu belirliyorduk. CSS'de ise bu işi font-family özelliği ile yaparız:
h1 { font-family:Arial } h2 { font-family:Courier } h3 { font-family:Comic Sans MS } h4 { font-family:Verdana }
Font Büyüklüğü

HTML derslerinde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..." parametresini kullanıyorduk. CSS'de ise font-size özelliğine değerler veririz. Verilen değer yüzde oranı (%şeklinde olabilir veya pt (point) birimi cinsinden olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller (yürürlükteki değerden bir küçük), larger (yürürlükteki değerden bir büyük) gibi değerler de kullanabiliyoruz:
h1 { font-size:xxlarge } h2 { font-size:160% } h3 { font-size:larger } h4 { font-size:10pt }
Font Eğikliği

Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde) olmasını istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz:
h1 { font-style:normal } h2 { font-style:italic } h3 { font-style:oblique }
Büyük Harf, Küçük Harf

Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF; boyutça büyük değil) font-variant: small-caps özellik ve değerini kullanırız. Eğer bunu istemiyorsak normal değerini veririz:
h1 { font-variant:small-caps } p { font-variant:normal }
Font Kalınlığı

Eğer fontlarımızın kalın (bold) olmasını istiyorsak, font-weight özelliğinden yararlanırız. Bunun için font-weight özelliğine normal, bold (kalın), bolder (yürürlükteki kalınlıktan bir değer daha kalın), lighter (yürürlükteki kalınlıktan bir değer ince) gibi standart değerler verebiliriz. Veya 100, 200,...,800,900 gibi sayısal değerler de verebiliriz. 400 sayısal değeri, normal font değerini verir. 700 sayısal değeri ise kalın (bold) font değerini verecektir.
h1 { font-size:14pt; font-weight:900 } h2 { font-size:14pt; font-weight:bold } h3 { font-size:14pt; font-weight:500 } h4 { font-size:14pt; font-weight:normal } h5 { font-size:14pt; font-weight:lighter } h6 { font-size:14pt; font-weight:200 }
Font Özelliklerini Tek Kodla Tanımlama

Font formatı sayfamızda öğreneceğimiz son özellik: font. Bu özellik fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç standart tip değer alıyor:

font: (font-style değeri) (font-weight değeri)
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri) (font-family değeri)
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri)/(line-height değeri) (font-family değeri)

Not: line-height özelliğini metin formatı sayfasında görmüştük.
code { font: italic bolder } p, h3, td, pre { font: italic normal bold 12px arial } blockquote, sub, sup, strong { font: oblique small-caps 900 10px/12px courier }

Font formatı sayfamız da bu kadar. Bu sayfada özelliklerin CSS formatında nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTML'de işlediğimiz konuyla paralel gidildiği için, okuyucuların yazılanları kolaylıkla anladığını düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiğim yazım şekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde çeşitli kodların özellikleri üzerinde oynayabilirsiniz. Bundan sonraki sayfada arkaplan formatı üzerinde duracağız.
_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..

İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.
Arkaplan Biçimi


HTML derslerinde sayfanın arkaplanını değiştirmek için <body> komutuna bgcolor="..." parametresini atıyorduk. Bu parametre tablolar veya diğer kodlar (h1-h6, marquee,vb...)için de geçerliydi.
Arkaplan Rengi

CSS'de ise bu kodların background-color özelliğine renk değerleri veriyoruz.
body { background-color: yellow } td { background-color: #ffffcc } h1 { background-color: rgb(100%,100%,85%) } div { background-color: rgb(255, 255, 217) }
Arkaplan Resmi

HTML'de arkaplana resim koymak için background="..." parametresinden yararlanıyorduk. CSS'de arkaplan resmi yerleştirmek için background-image (arkaplan görüntüsü) özelliğine url(...) şeklinde adres değeri veririz. Eğer arkaplana resim koymak istemiyorsak none değeri veririz. Not:Arkaplan resmi istemezseniz, hiç bu özelliği yazmazsınız, olur biter. Ama DHTML derslerinde bu none değerinin faydalarını göreceksiniz.
body { background-image: url(duvar.gif) } td { background-image: url(c:kaplamalartiles.gif) } div { background-image: url(http://geocities.com/selnur/resimler/newworld.jpg) } span { background-image: none }
Arkaplan Resmini Döşeme

HTML'de arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan resimlerinin her zaman döşenmesini (kendisini tekrar etmesini) istemeyiz. CSS'de bunun için çok güzel bir özellik var: background-repeat. Bu özelliğin alacağı değerler şöyle:
repeat Arkaplan resmini hem yatay hem de düşey olarak döşer (tekrarlar).
background-repeat: repeat
repeat-x Arkaplan resmini sadece yatay olarak döşer.
background-repeat: repeat-x
repeat-y Arkaplan resmini sadece düşey olarak döşer.
background-repeat: repeat-y
no-repeat Arkaplan resmini döşemeden, tek bir resim halinde gösterir.
background-repeat:no-repeat

body { background-image: url(duvar.gif); background-repeat: repeat } td { background-image: url(c:kaplamalartiles.gif); background-repeat: repeat-x } div { background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); background-repeat: repeat-y } span { background-image: url(manzara.bmp); background-repeat: no-repeat }
Arkaplan Resminin Konumu

Sayfamızın arkaplanında tek bir resim yer alacaksa, bu resmin sayfa üzerindeki konumunu belirlemeliyiz. Bunun için CSS'nin background-position özelliğinden yararlanırız. Bu özellik iki değer birden alır, ilk değer resmin sayfaya göre düşey konumunu, ikinci değer ise resmin sayfaya göre yatay konumunu ifade eder. background-position: (düşey konum değeri) (yatay konum değeri). Bu değerleri aşağıdaki biçimlerde yazabiliriz. Not: Bu özelliği NN gözatıcıları (browser) desteklemiyor.
background-position: top left
background-position: top center
background-position: top right
background-position: center left
background-position: center center
background-position: center right
background-position: bottom left
background-position: bottom center
background-position: bottom right
background-position: (yüzde değer) (yüzde değer)
background-position: (birim değer) (birim değer)

body { background-image: url(monalisa.jbg); background-repeat: no-repeat; background-position: 100px 60px } td { background-image: url(c:kaplamalartiles.gif); background-repeat: no-repeat; background-position: top left } div { background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); background-repeat: no-repeat; background-position: center center } span { background-image: url(manzara.bmp); background-repeat: no-repeat; background-position: 35% 35% }
Arkaplan Resmini Sabitleme

Netscape gözatıcılarının tanımadığı bir diğer özellik de background-attachment. Bu özellikle arkaplan resminin sayfayla beraber kayıp kaymayacağını belirliyoruz. Eğer bu özelliğe scroll değerini verirsek, sayfamızla beraber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara göre değişmez, sabit kalır.
body { background-image: url(monalisa.jbg); background-repeat: no-repeat; background-position: 100px 60px; background-attachment: fixed } td { background-image: url(c:kaplamalartiles.gif); background-repeat: no-repeat; background-position: top left; background-attachment: scroll } div { background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed } span { background-image: url(manzara.bmp); background-repeat: no-repeat; background-position: 35% 35%; background-attachment: scroll }
Arkaplan Resim Özelliklerini Tek Kodla İfade Etme

Bir arkaplan resmini CSS'de ifade etmek için; son uygulamamızda olduğu gibi, dört özellikten yararlanmamız şart değil. Bu özelliklerin hepsini background özelliğinde toplayabiliriz: background: (background-color değeri) (background-image değeri) (background-repeat değeri) (background-attachment değeri) (background-position değeri).
body { background: #ffffcc url(monalisa.jbg) no-repeat fixed 100px 60px } td { background-image: crimson url(c:kaplamalartiles.gif) no-repeat scroll top left } div { background-image: rgb(100%, 100%, 85%) url(http://geocities.com/selnur/resimler/newworld.jpg) no-repeat fixed center center } span { background-image: rgb(255, 255, 217) url(manzara.bmp) no-repeat scroll 35% 35% }

Burada Netscape gözatıcısı kullananlar bu kodun daha önce belirttiğim background-positon, background-attachment bölümlerini göremezler ama geri kalan kısımlarını görürler. Bu kod bir önceki Font Formatı sayfasındaki font koduna benziyor değil mi? Herşey bir yana, iki kod da kendi sayfalarının sonunda yer alıyor.
_________________
 



Dışkenar Boşluğu


Bir önceki sayfada nesnelerin sınır çizgilerini CSS ile şekillendirmeyi öğrenmiştik. Şimdi bu sınır çizgilerin dışkenar boşluklarını şekillendirmeyi göreceğiz.

HTML'de nesnelerin diğer nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu dersimizde bu boşluğu margin özelliği ile ifade edeceğiz.
Dışkenar Boşluk Değeri

margin özelliğine vereceğimiz değerler şu şekillerde olabilir:
auto Dışkenar boşluğunu gözatıcı (browser) otomatik olarak belirler.
margin: auto
birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.
margin: 12px, margin:1cm, vb.
yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
margin: 20%

Eğer margin özelliğine tek değer verirsek, tüm dışkenar boşlukları bu değeri alır. Eğer iki değer verirsek, üst ve alt dışkenar boşlukları ilk değeri, sol ve sağ dışkenar boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst dışkenar boşluğu ilk değeri, sol ve sağ dışkenar boşlukları ikinci değeri, alt dışkenar boşluğu üçüncü değeri alır. Eğer dört değer verirsek, üst dışkenar boşluğu ilk değeri, sağ dışkenar boşluğu ikinci değeri, alt dışkenar boşluğu üçüncü değeri, sol dışkenar boşluğu dördüncü değeri alır.
<html> <head> <title>Dışkenar boşlukları,</title> </head> <body> <p>Dışkenar boşlukları:</p> <p style="border-style: solid; border-width: 2px; margin: 1cm">Tek değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px">İki değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10%">Üç değer.</p> <p style="border-style: solid; border-width: 2px; margin: 1cm 20px 10% auto">Dört değer.</p> </body> </html>


Öğretici uygulamamızda dışkenar boşluklarının daha iyi gözlenebilmesi amacıyla, sınır çizgileri 2px (piksel) kalınlıkta tasarlandı. (Sınır çizgilerini belirtmek gibi bir zorunluluk yoktur.) Uygulamamızda görüldüğü üzere, ilk nesnemizin dışkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt dışkenar boşluklar 1 cm, sol ve sağ dışkenar boşluklar 20 piksel. Üçüncü nesnemizin üst dışkenar boşluğu yine 1 cm, sol ve sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu ise sayfanın onda biri (10%) kadar. Son nesnemizin üst dışkenar boşluğu 1 cm, sağ dışkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol dışkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır.

CSS'de üst, alt, sol ve sağ dışkenar boşluklarını ayrı ayrı ifade etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır:
margin-top Üst dışkenar boşluğunu ifade eder.
margin-top: 15%
margin-left Sol dışkenar boşluğunu ifade eder.
margin-left: 25mm
margin-bottom Alt dışkenar boşluğunu ifade eder.
margin-top: auto
margin-right Sağ dışkenar boşluğunu ifade eder.
margin-top: 30px
_________________
İçkenar Boşluğu


Bu sayfa bir önceki sayfanın tekrarı gibi olacak. Her nesnenin dışkenar boşluğu olduğu gibi, sınır çizgisiyle nesne arasında bulunan içkenar boşluğu da vardır. Bu sayfadaki konumuz bu içkenar boşluklarını CSS ile şekillendirmek.
İçkenar Boşluk Değeri

Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni için önemli bir işlemdir. CSS'de dışkenar boşluklarını ifade etmek için padding özelliğinden yararlanırız.

padding özelliğine vereceğimiz değerler şu şekillerde olabilir:
birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.
padding: 12px, margin:1cm, vb.
yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
padding: 20%

Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç değer verirsek, üst içkenar boşluğu ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri, alt içkenar boşluğu üçüncü değeri alır. Eğer dört değer verirsek, üst içkenar boşluğu ilk değeri, sağ içkenar boşluğu ikinci değeri, alt içkenar boşluğu üçüncü değeri, sol içkenar boşluğu dördüncü değeri alır.
<html> <head> <title>İçkenar boşlukları,</title> </head> <body> <p>İçkenar boşlukları:</p> <p style="background-color: red; padding: 1cm">Tek değer.</p> <p style="background-color: red; padding: 1cm 20px">İki değer.</p> <p style="background-color: red; padding: 1cm 20px 10%">Üç değer.</p> <p style="background-color: red; padding: 1cm 20px 10% auto">Dört değer.</p> </body> </html>


Öğretici uygulamamızda içkenar boşluklarının daha iyi gözlenebilmesi amacıyla, nesnemize (paragrafa) arkaplan rengi verildi. Uygulamamızda görüldüğü üzere, ilk nesnemizin içkenar boşluğu 1 cm. İkinci nesnemizin üst ve alt içkenar boşlukları 1 cm, sol ve sağ içkenar boşlukları 20 piksel. Üçüncü nesnemizin üst içkenar boşluğu yine 1 cm, sol ve sağ içkenar boşlukları 20 piksel, alt içkenar boşluğu ise sayfanın onda biri (10%) kadar. Son nesnemizin üst içkenar boşluğu 1 cm, sağ içkenar boşluğu 20 piksel, alt dışkenar boşluğu sayfanın onda biri kadar ve sol içkenar boşluğu ise gözatıcının (browser'ın) atadığı otomatik değer kadardır.

CSS'de üst, alt, sol ve sağ içkenar boşluklarını ayrı ayrı ifade etmek de mümkündür. Bu özelliklere de aynı şekilde değer verilir. Aşağıda bu özellikler ve açıklamaları görülmektedır:
padding-top Üst içkenar boşluğunu ifade eder.
padding-top: 15%
padding-left Sol içkenar boşluğunu ifade eder.
padding-left: 25mm
padding-bottom Alt içkenar boşluğunu ifade eder.
padding-top: auto
padding-right Sağ içkenar boşluğunu ifade eder.
padding-top: 30px
_________________
 


Listeleme


Bu sayfayı okumadan önce, HTML'de öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile şekillendirmektir.
Maddeleme İşaretleri

HTML'de anlatıldığı üzere, iki tür listeleme vardır: sıralı listeleme, sırasız listeleme. Sıralı listelemeyi type="..." parametresine "1", "a", "A", "I", "i" gibi değerler vererek şekillendiriyorduk. Aynı şekilde sırasız listelemeyi type="..." parametresine "disc", "circle", "square" gibi değerlerle şekillendiriyorduk. CSS'de type="..." parametresinin işlevini list-style-type özelliği üstlenmiştir. Bu özelliğin aldığı özellikler de aşağı yukarı aynı:
none Maddelerin önüne işaret koymaz.
list-style-type: none
disc Maddelerin önüne disk şeklinde işaret koyar.
list-style-type: disc
circle Maddelerin önüne çember şeklinde işaret koyar.
list-style-type: circle
square Maddelerin önüne kare şeklinde işaret koyar.
list-style-type: square
decimal Maddelerin önüne sıralı rakam koyar koyar. (1, 2, 3, 4, 5...)
list-style-type: decimal
decimal Maddelerin önüne sıralı rakam koyar. (1, 2, 3, 4, 5...)
list-style-type: lower-roman
decimal Maddelerin önüne sıralı küçük roma rakamı koyar. (i, ii, iii, iv, v...)
list-style-type: lower-roman
upper-roman Maddelerin önüne sıralı büyük roma rakamı koyar. (I, II, III, IV, V...)
list-style-type: upper-roman
lower-alpha Maddelerin önüne sıralı küçük harf koyar. (a, b, c, d, e...)
list-style-type: lower-alpha
upper-alpha Maddelerin önüne sıralı büyük harf koyar. (A, B, C, D, E...)
list-style-type: upper-alpha

Bu özellikleri sadece ol, ul ve li kodlarına atayabiliyoruz. (Çünkü diğerleri sıralama kodu değil.)
Resim Nesnelerini Maddeleme İşareti Yapma

Tabi maddelerin önüne sadece bu işaretleri koymakla veya hiçbir şey koymamakla sınırlandırılmış değiliz. list-style-image özelliğine url(...) adres değeri vererek, maddelerin önüne dosya adresi verilen görüntü elemanının gelmesini sağlayabiliriz: list-style-image: url(ok.gif) gibi.
<html> <head> <title>Resimli maddeleme,</title> </head> <body> <p>CSS Dersleri</p> <ul style="list-style-image: url(top.gif)"> <li>CSS'ye Giriş</li> <li>Metin Formatı</li> <li>Font Formatı</li> <li>Arkaplan Formatı</li> <li>Sınır Çizgisi</li> <li>Dışkenar Boşluğu</li> <li>İçkenar Boşluğu</li> <li>Listeleme</li> <li>Konumlandırma</li> <li>Sınıflandırma</li> </ul> </body> </html>

Listeleme Boşluğu

ol, ul gibi listeleme kodlarında, listelenen maddeler sayfanın solunda belli bir mesafe bırakmaktadır. Bu mesafeyi artırmanın yolu list-style-position özelliğine inside değeri vermektir. outside değerini verirsek, maddeler sayfa solunda eskisi kadar boşluk bırakacaktır. Bana inanmıyorsanız, aşağıdaki örneğe inanın. Not: Netscape gözatıcısı bu özelliği desteklemiyor.
<html> <head> <title>Listeleme Düzeni,</title> </head> <body> <p>list-style-position: Inside</p> <ul style="list-style-type: square; list-style-position: inside"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> <p>list-style-position: Outside</p> <ul style="list-style-type: square; list-style-position: outside"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> <p>Varsayılan değer</p> <ul style="list-style-type: square"> <li>Madde1</li> <li>Madde2</li> <li>Madde3</li> </ul> </body> </html>

Listeleme Özelliklerini Tek Kodla İfade Etme

Şimdi bu özelliklerin hepsini taşıyan, klasik ders sonu özelliğimize geçelim: list-style. Bu özellik şöyle ifade edilir: list-style: (list-style-type değeri) (list-style-position değeri) veya list-style: (list-style-position değeri) (list-style-image değeri). Not: Bu özelliği Netscape gözatıcıları desteklemiyor.
_________________


Gercek bir hacker olmak icin hacklemeniz lazim. Oturup text dosyalari okuyarak hacker olunmaz..

İyi bir hacker’san, ismini herkes bilir. Ama büyük bir hacker’san kimse kim olduğunu bilmez.
Konumlandırma

Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz.
Nesne Yüzdürme

İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği verirsek nesne sağda, left özelliği verirsek solda, none özelliğini verirsek yazıldığı yerde konumlandırılır.
<html> <head> <title>Nesne Konumlandırma,</title> </head> <body> <p style="text-align: justify">Augustus sonunda kararını verdi: Dünyayı gezip dolaşacak, insanlara şu ya da bu şekilde yardım elini uzatabileceği ve kendilerine duyduğu sevgiyi açıkça ortaya koyabileceği bir yer bulup orada kalacaktı. <img src="volkan.gif" style="float: right"> Yüzünü kimsenin görmek istememesine alışmıştı çaresiz; avurtları çökmüş, gözleri çukura gömülmüştü; sırtındaki giysileri, ayağındaki ayakkabıları gören, onu dilenci sanırdı; sesi ve yürüyüşü de bir zaman herkesin işitip görmekten haz duyduğu, herkesi büyüleyip hayran bırakan ses ve yürüyüş olmaktan çıkmıştı. Taranmamış bakımsız ak sakalı çocukları korkutuyordu; şık giyimli beyler ve hanımlar ondan kaçıyor, yanında bulunmaktan rahatsızlık duyarak kendilerini adeta pisliğe bulanmış hissediyorlardı; dilenciler ise ellerindeki birkaç lokma yiyeceğe göz dikmiş bir yabancı sanarak ona kuşkuyla bakıyorlardı. Bütün bunlar da Augustos'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi. <img src="volkan.gif" style="float: left"> Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Bütün bunlar da Auustus'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi. Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Diyelim bir fırının önünde bir çocuk gördü de çocuğun boyu minik eliyle uzanıp kapının tokmağını çevirmeye yetmiyor, koşup yardım ediyordu hemen. Karşısına kendisinden de çaresiz durumda biri çıktıkça, örenğin bir dilenci ya da sakat biriyle karşılaştıkça, yolda bir süre ona eşlik edip yardımcı oluyordu; bunu yapamadı diyelim, cebindeki birkaç kuruşu seve seve eline tutuşturuyor, iyilik taşan pırıl pırıl bir bakışı, kardeşçe bir selamı, kendisini anlayıp derdine ortak olduğunu gösteren bir jesti böyle bir kimseden esirgemiyordu. Gezip dolaştıkça, insanların yüzüne bakar bakmaz onların kendisinden neler beklediğini, yüksek sesle vereceği giler yüzlü bir selamın mı yoksa sessiz bir bakışının mı ya da hiç yanlarına sokulmayıp uzaktan geçmesinin mi onları memnun bırakacağını anlamaya başlamıştı. <img src="volkan.gif" style="float: right"> Dünyadaki onca sefalete karşın yine de sızlanıp şikayet etmeksizin yaşayıp giden insanlara rastladıkça şaşmadan duramıyordu. Her acıyı neşeli bir kahkahanın, her ölüm yasını neşeli bir çocuk şarkısının izlediğini, her sıkıntının, her bayalığın yanında bir güzelliğin, bir esprinin, bir tesellinin, bir gülümsemenin yer aldığını hayranlıkla görüyor, bunu da harikûlade buluyordu.</p> </body> </html>

Nesne Boyutları

Konumlandırılan HTML nesnesinin büyüklüğünün belirtilmesi de çok önemlidir. Nesnelerin boyutlarını belirlemek için width (en) ve height (boy) özellikleri kullanılır. Bu özelliklere şu şekillerde değerler verilir:
auto Nesnenin boyutlarını gözatıcı otomatik olarak belirler.
width: auto; height: auto
birimsel değer Nesnenin boyutlarının CSS birimleriyle ifade edilmesidir.
width: 20px; height: 1cm
yüzde oran Nesnenin boyutlarını, sayfaya olan yüzde oranıyla belirler.
width: 50%; height: 25%

<html> <head> <title>Nesne Boyutları,</title> </head> <body> <img src="volkan.gif" style="width: 8cm; height: 10cm"> </body> </html>


Not: width ve height özelliklerini Netscape desteklemiyor.
Nesne Konumlandırma

Bundan önceki iki sayfada nesneyi konumlandırmak için dışkenar veya içkenar boşluklarından yararlanıyorduk. Bu özellikler her ne kadar sınır çizgisine olan mesafeyi belirliyorlarsa da, sınır çizgisinin kullanılmadığı zamanlarda pekala konumlandırma aracı olarak da kullanılabilir. Veya sırf konumlandırmak için kullanılan top ve left özelliklerinden yararlanabiliriz. top özelliği nesnenin üstünde bırakılacak boşluğu, left özelliği ise nesnenin solunda bırakılacak boşluğu belirler. Bu özelliklere şu şekilde değerler verebiliriz:
auto Nesnenin bırakacağı boşluğu gözatıcı otomatik olarak belirler.
top: auto; left: auto
birimsel değer Nesnenin bırakacağı boşluğun CSS birimleriyle ifade edilmesidir.
top: 20px; left: 1cm
yüzde oran Nesnenin bırakacağı boşluğun sayfaya olan yüzde oranıyla belirler.
top: 50%; left: 25%

Konumlandırma Türleri

Ancak bu özelliklerin kullanılabilmesi için position (konum) özelliğine değer vermemiz gerekir. Eğer position özelliğinin değeri absolute ise, verilen top ve left değerleri sayfaya veya içinde bulunulan elemana göre konumlandırır:
<html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p {position: absolute; top: 200px; left: 100px} h1 {position: absolute; top: 100px; left: 100px} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html>


Eğer position koduna relative (bağıl) değerini verirsek, top ve left değerleri kendisinden önce tanımlanan nesneye göre konumlandırır:
<html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p {position: relative; top: 200px; left: 100px} h1 {position: relative; top: 100px; left: 100px} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html>


Yukarıdaki iki uygulama arasındaki farkı görebildiniz mi? positon: absolute olan örnekte başlığın tepe çizgisi, sayfanın başından 100 piksel aşağıda; paragrafın tepe çizgisi ise sayfanın başından 200 piksel aşağıda. positon: relative olan örnekte yine başlık aynı konumda ama paragraf sayfa başından değil, başlıktan itibaren 200 piksel aşağıda. Yani sayfa başından 300 piksel aşağıda yer alıyor.

Nesneleri width, height left ve top özellikleriyle kesin olarak konumlandırabilir ve boyutlandırabiliriz. Not1: position özelliğini kullanmayı unutmayın. Not2: Netscape gözatıcılarının width ve height özelliklerini desteklemediğini unutmayın.
<html> <head> <title>Top ve left özellikleri,</title> <style> <!-- p { position: absolute; top: 200px; left: 100px; width: 400px; height: 250px; background-color: red } h1 { position: absolute; top: 100px; left: 100px; width: 400px; height: 30px; background-color: blue } --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html>

Görünürlük

Şimdi değil ama ileride görünmez nesneler de koymak isteyeceğiz. (DHTML derslerinde mesela.) Bir nesnenin görünür olup olmamasını visibility (görünürlük) özelliğine visible (görünür) veya hidden (gizli, görünmez) değerleri vererek sağlarız. Not: Bu özelliği Netscape gözatıcıları desteklemiyor.
<html> <head> <title>Görünürlük,</title> <style> <!-- p {visibility: visible} h1 {visibility: hidden} --> </style> </head> <body> <h1>Halikarnas Balıkçısı,</h1> <p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler... Halikarnas Balıkçısı'nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç değillerdir. Balıkçı, denize bağlı olarak, güzelliği, özgürlüğü, başkaldırıyı, insanoğlunun geçmişteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliğinden alabildiğine etkin bir anlatımla ortaya koyarak, çağdaş insancıl bakışla eski uygarlıklar arasındaki bağları göstermiştir.</p> </body> </html>



HTML'de nesneleri konumlandırırken, herkesin sizinle aynı gözatıcıyı (browser'ı) kullanmadığını, herkesin sizinle aynı çözünürlük ve pencere büyüklüğünde çalışmadığını aklınızda tutun.

Fare İmleci


Fare İmlecini Seçmek

Fare imlecinin sembolünü değiştirmek de sizin elinizde. Bunun için cursor özelliğini kullanıyoruz. cursor özelliği aşağıdaki değerleri alabilir:
url Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz. --
default Varsayılan değer bildiğimiz ok şekli imleç. Değiştirdiğimiz imleçten varsayılan değere dönmek için sıkça kullanılır.
hand Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
crosshair Ziyaretçiyi bir noktayı belirlemesi (nişan alması) yönünde güdüler.
pointer Ziyaretçiyi bir noktayı göstermeye güdüler.
move Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.
e-resize Herhangi bir nesneyi doğuya doğru genişletmek için kullanılır.
ne-resize Herhangi bir nesneyi kuzey doğuya doğru genişletmek için kullanılır.
nw-resize Herhangi bir nesneyi kuzey batıya doğru genişletmek için kullanılır.
n-resize Herhangi bir nesneyi kuzeye doğru genişletmek için kullanılır.
se-resize Herhangi bir nesneyi güney doğuya doğru genişletmek için kullanılır.
sw-resize Herhangi bir nesneyi güney batıya doğru genişletmek için kullanılır.
s-resize Herhangi bir nesneyi güneye doğru genişletmek için kullanılır.
w-resize Herhangi bir nesneyi batıya doğru genişletmek için kullanılır.
text Ziyaretçiyi yazı yazmaya güdüler.
wait Ziyaretçiye "bekle" der.
help Ziyaretçiyi yardım almak için tıklamasını güdüler.

İnternetten indirdiğiniz veya imleç yapan yazılımlar kullanarak yapacağınız bir .cur uzantılı dosyayı fare imleci haline getirebilirsiniz. Aşağıdaki örnekte sat.cur isimli bir dosya ile imleci değiştiriyoruz. cursor özelliğinde url desteği vermeyen imleçlere karşı alternativ imleçler tanımlayabiliyoruz. (Örnekte var.)
Kod:
<html> <head> <title>Nesne Konumlandırma,</title> </head> <body> <center> <table cellpadding="0" cellspacing="0" border="0" bgcolor="green" width="350" height="200" style="cursor:url('sat.cur'),pointer,hand;"> <tr><td><p>Fareyle bu bölgeye geldiğinizde imleç değişecektir.</p></td></tr> </table> </center> </body></html>

Bugün 29 ziyaretçi (62 klik) kişi burdaydı!
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol