HTML Kaliteli [Ders]//c3h3n

c3h3n · 13-12-2007, 19:12

Öncelikle Bu bir Alıntıdır Makaleleri sadece ben Birleştirdim.

Komutları öğrenmeye başlıyoruz!

<HTML> </HTML>

Bir web sayfası <html> ile başlar, </html> ile biter.

<html>
<head>
<title>Buraya sitenin adı yazılır</title>
</head>
<bOdy>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</bOdy>
</html>

<HEAD> </HEAD>

Sitemizin adının yer aldığı Title’lın, Meta Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim.

<TITLE> </TITLE>

Her sitenin bir adı olması gerekir.
<title> DayDay </title>
Mısra ile Bulut’nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar...

<BODY> ... </BODY>

Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm.
Buradaki komutların neler olduğunu sırayla öğreneceksiniz.
Ama önce, sayfamızı şöyle bir görelim değil mi?
Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! "
Haydi bakalım deneyelim:

__________________________________________________ _________

İlk Sayfamızı yapıyoruz

Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var.
Programların içinde Donatılar... Onun içinde de not defteri...
Aslında bunun yerini bildiğinize eminim
Aşağıdaki yazıyı açtığınız sayfaya yazın.

<html>
<head>
<title> DayDay </title>
</head>
<bOdy> DayDay seni çok seviyoruz </bOdy>
</html>

İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek)
Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz.

O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim:
Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett ) Oldu işte ! Yazdığımız diğer yazılar artık görünmüyor.

Görünen sadece söylemek istediğiniz şey olacak...

img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif">

Sonraki derste bu yazıya daha neler yapabileceğimizi göreceğiz.
__________________________________________________ ___________

Yazı (Tip, Renk, Büyüklük)

Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz.

Yazılar aşağıdaki komutlar içine yazılır.

<font> ............... </font>

Yazının büyüklüğü için "size"
yazı tipi için "face"
Yazı rengi için "color" komutlarını kullanmanız gerekir.

Aşağıdaki örneği yazın:

<font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font>

Yazıların yerinin <bOdy> komutundan sonra gelmesi gerektiğini unutmayın.

<html>
<head>
<title> DayDay </title>
</head>
<bOdy>

<font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font>
</bOdy>
</html>

İsterseniz yaptığımızın neye benzediğine bakalım.

img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif">

Şimdi tek tek tekrar edelim.
YAZI BÜYÜKLÜĞÜ

font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz.
Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür.
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532
<h1> DayDay </h1>
<h2> DayDay </h2>
<h3> DayDay </h3>
<h4> DayDay </h4>
<h5> DayDay </h5>
<h6> DayDay </h6>

YAZI RENGİ
Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız.
color="red" yerine, farklı renk isimleri yazın.

red - kırmızı
blue - mavi
yellow - sarı
white - beyaz
black - siyah

Diğer renklerin İngilizce yazılışları ve kodları için color=#0000ff bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de color=#0000ff buraya bir ara göz atın.
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532

Kodlarla yazmak istiyorsanız,
color="#FF0000" renk adı yerine kod yazmanız gerekir.

red - #ff0000
blue - #0000ff
yellow - #ffff00
white - #ffffff
black - #000000

Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz.

YAZI TİPİ
face="Arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir.

Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın )) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik.

c3h3n · 13-12-2007, 19:14

Yazıyı istediğimiz yere yerleştirmek
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532

Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar.

<center>....</center>

Yazınızı <center>....</center> arasına yazarsanız. Sayfanın ortasında görünür.
<p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar.

Sola dayalı olması için:

<p>Yazınızı buraya yazacaksınız</p>

Ortada olması için:

<p align=center>Yazınızı buraya yazacaksınız</p>

Sağa dayalı olması için:

<p align=right>Yazınızı buraya yazacaksınız</p>

Satırbaşı ve paragraf yapmak

<br>

Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür.

Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir.

<p>

Bu iki komutun diğerlerinden bir farkı var.
Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez.

c3h3n · 13-12-2007, 19:16

Kalın, eğik ve altı çizgili yazmak

Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak.

Kalın (Bold) yazı

<b>Yazınızı buraya yazacaksınız</b>

Yazıyı eğik yazmak için kullanacağınız kod ise böyle...

Eğik (İtalik) yazı

<i>Yazınızı buraya yazacaksınız</i>

Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız.

Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız...
Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ...

Altı çizgili (underline) yazı

<u>Yazınızı buraya yazacaksınız</u>

Peki... Hem kalın hem eğik yazmak istersek ne yapacağız?
O zaman her iki kodu da peşpeşe kullanacağız.
Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın.

<b><i> Yazınızı buraya yazacaksınız</i></b>

Web sayfanıza Resim eklemek
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532

Merhaba arkadaşlar,
Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz.
Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Size bir sır vereyim mi? Bu dersleri çalışırken winamp’ı açalım ve öyle çalışmaya başlayalım

Böylece hem eğlenir hem öğreniriz ...
Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim

Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim...
Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src= "">etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim:

Resim ekliyoruz

<html>
<head>
<title>Sayfamızda Resim </title>
</head>
<bOdy>
<p><img src= "cicek.jpg">
</bOdy>
</html>

Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor.br
img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif">
Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti.

Resmin ortaya hizalanması

<img src= "cicek.jpg">

img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif">

Resmin sağa hizalanması

<img src= "cicek.jpg">

img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif">

Resmimizin boyutlarını da belirleyebiliriz.
Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz.

<img src= "cicek.jpg">

Resmin üzerine gelince görünen yazı
Mouse’umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir.

<img src= "cicek.jpg">

c3h3n · 13-12-2007, 19:18

Tablo yapmayı öğreniyoruz

Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir.
Tablo için kullanacağımız temel etiketler aşağıdakilerdir.

Tablo oluşturmak için

<table></table>

Yatay hücre oluşturmak için

<tr>

Dikey hücre oluşturmak için

<td>

6 bömüme (hücreye) ayrılmış bir tablo yapalım

<table border="1">
<tr>

<td>Birinci sırada Hücre1</td>
<td>Birinci sırada Hücre2</td>
<td>Birinci sırada Hücre3</td>

</tr>

<tr>
<td>İkinci sırada Hücre1</td>
<td>İkinci sırada Hücre2</td>
<td>İkinci sırada Hücre3</td>
</tr>
</table>

Birinci sırada Hücre1

Birinci sırada Hücre2

Birinci sırada Hücre3

İkinci sırada Hücre4

İkinci sırada Hücre5

İkinci sırada Hücre6

Hücremin içi renkli olsun (bgcolor)

<table>
<tr>
<td bgcolor="red">
kırmızı hücrem oldu</td>
</tr>
</table>

Kırmızı hücrem oldu

Hücremin içinde resim istiyorum (background)

<table>
<tr>
<td background="deneme.gif">
Heeyy burada kablumbiklerim vaarr</td>
</tr>
</table>

Heeyy burada kablumbiklerim vaarr

Hücremin kenar kalınlığını değiştirmek istiyorum (border)

<table border="10">
<tr>
<td>kenarı kalın oldu</td>
</tr>
</table>

<table border="1">
<tr>
<td>kenarı ince oldu</td>
</tr>
</table>

kenarı kalın oldu

kenarı ince oldu

Hücremin kenarını renkli yapmak istiyorum (bordercolor)

<table border="10" bordercolor="green">
<tr>
<td>kenarını yeşil yaptım</td>
</tr>
</table>

kenarını yeşil yaptım

Hücremin içini de renkli yapmak istiyorum (bgcolor)

<table border="10" bordercolor="red">
<tr bgcolor="yellow">
<td>kenarını yeşil yaptım</td>
</tr>
</table>

içi sarı kenarı kırmızı

Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ")

<table border="10" width="300" height="80" >
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532
<tr>
<td>genişliği 250 yüksekliği 80 piksel</td>
</tr>
</table>

genişliği 300 yüksekliği 80 piksel

Hücremin içindeki yazı sağda olsun (align=" ")

<table border="1" width="150" height= "100">
<tr>
<td align="right">
DayDay</td>
</tr>
</table>

DayDay

Hücremin içindeki yazı altta olsun (valign=" ")

<table border="1" width="150" height="100">
<tr>
<td valign="bottom">
Hücre</td>
</tr>
</table>

DayDay

Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan)

<table border="1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td colspan="2">4</td><td>5</td>
</tr>
<tr><td>6</td><td>7</td><td>8</td>
</tr>
</table>

1

2

3

4

5

6

7

8

Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan)

<table border= "1">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr><td >4</td><td> rowspan="2">5</td><td>6</td>
</tr>
<tr><td>7</td><td>8</td>
</tr>
</table>

1

2

3

4

5

6

7

8

Yazılarım hücrenin kenarına değmesin (cellpadding)

<table border="1" cellpadding="15">
<tr>
<td>Değmiyor</td>
</tr>
</table>

Değmiyor

Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing)

<table border="1" cellspacing="15">
<tr>
<td>Etrafında boşluk var</td>
</tr>
</table>

Canım sıkılıyor

Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.

c3h3n · 13-12-2007, 19:21

Yazıya link vermek

Yazılara nasıl link verilir?
Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir.
Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar.
Bir yazıya nasıl link veriririz?
Bir yazıya link vermek istediğimizde şu kodları yazarız:
(Kalın olarak yazılan yere kendi linkinizi yazacaksınız):

<a href= "http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa)</a>

Linkimizin yazısını nasıl renklendiririz?

Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için bOdy taginin yanına renk kodlarımızı yazarız:
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532
(kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..)

<bOdy bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000">

Linkimizin altında açıklama çıkmasını istiyorsak (title)

Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır:

<a href= "http://adresiniz" title="açıklaması">
(örnek için aşadağıdaki linkin üzerine farenizi getirin ve biraz bekleyin)

Webdersleri hepsini açıklar Reklam Amaçlı Deil

e-postamıza link verelim(mailto)

Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız:

<a href= "mailto:Webmaster@Wardom.Org /b>b a rel="nofollow" target=_blank">c3h3n@Wardom.Org</a> {Boyle Bir Mail Adresi Yok Eklemeyin!]

Boyle Görünücek:c3h3n@Wardom.Org

Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım.
Siz sayfanızda kendi e-postanızı yazacaksınız..)

Genelde en çok kullanılan mail programı Microsoft’un Outlook Express isimli programıdır. Eğer bilgisayarınızda Windows işletim sistemi yüklü ise bu program da otomatik olarak kurulu olacaktır.

Yazımızın üzerine faremizi getirdiğimiz zaman rengini değiştirmek için CSS bilmemiz gerekiyor. Bunu da o zaman anlatalım olur mu?
CSS ile sayfalarımız daha dinamik olur.. Bunu da unutmadan söyleyelim.

c3h3n · 13-12-2007, 19:24

Sıralı Liste Nasıl Yapılır?

Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim:

Numaralı (ya da) başka tür listeler yapalım:

Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekliyerek yapılır.

En sevdiğim hayvanlar:
<ol>
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>

Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

Kediler
Köpekler
Balıklar
Kuşlar

Sıralı listemizin sıra numarasını Roma Rakamları ile göstermek istersek <OL> etiketimizin yanına "type" değerinin yanına Roma Rakamlarından birini yazarız.
(Mesela I ):

En sevdiğim hayvanlar:
<ol type="I">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>

Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

Kediler
Köpekler
Balıklar
Kuşlar

Listemizin Sıralamasında Harfler kullanalım (type)

Listelerimizin sıralanmasnda rakam değil de harf kullanmak istiyorsak <OL> etiketinin yanındaki "type" değerinin karşısına "a" yazmamız yeterli.. Belli bir harften başlamanız gerekiyorsa start etiketini kullanmanız gerekiyor... Hangi harften başlamasını istiyorsanız onun sıra numarasını yazmalısınız...

En sevdiğim hayvanlar:
<ol type="a">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>
En sevdiğim Hayvanlar:
<ol type="a" start="3">
<li>Kediler
<li>Köpekler
<li>Balıklar
<li>Kuşlar
</ol>

Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir:

En sevdiğim Hayvanlar:

Kediler
Köpekler
Balıklar
Kuşlar

En sevdiğim Hayvanlar:

Kediler
Köpekler
Balıklar
Kuşlar

Bugün sayılı listeleri öğrendik. Bir de sayısız listeler ve Tanımlama Listeleri var... Bunları da bir sonraki dersimizde öğreneceğiz.
Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın..
Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz.

c3h3n · 13-12-2007, 19:27

Çerçeve (frame)

Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere içerisinde görüntüleniyor...

Web tasarımcıları çerçeveyi pek sevmez. Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve teknolojisi HTML’ e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak! Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi görünmez ziyaretçimize hiçbir zaman!

Bu derste Çerçeve yani Frame etiketini göreceğiz..

Çerçeve içinde Çerçeve.. Her yer çerçeve..

Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame’in (çerçevenin) özelliklerini ve frame’de gösterilecek sayfayı belirtiyoruz...

Şimdi örneklerimizi yapalım ve inceleyelim:

Örnekler:

cerceve1.htm dosyası:

<html>
<head>
<title>Sol çerçeve</title>
</head>
<bOdy bgcolor="#FF0000">
<font size=7>Sol Çerçeve</font>
</bOdy>
</html>

cerceve2.htm dosyası:

<html>
<head>
<title>Sağ Çerçeve</title>
</head>
<bOdy bgcolor="#000099">
<font size=7>Sağ Çerçeve</font>
</bOdy>
</html>

Şimdi de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile kaydedelim:

<html>
<head>
<title>Çerçeveli bir sayfa</title>
</head>
<frameset cols="30%, 70%">
<frame name="solcerceve" src= "><frame name="sagcerceve" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Şimdi de yazdığımız kodlamayı inceleyelim:

Örneği İnleyin : http://www.webdersleri.com/web-internet/html/ornek/frame.htm

Yukarıdaki butona basarak örneği inceleyebilirsiniz.

Örneği incelediyseniz şimdi de yapımında kullandığımız kodlamayı bir inceleyelim:

Öncelikle normal olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm ’ yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset> etiketini kullandık.. <frameset cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın yüzde 30’unu kaplayacak şekilde diğerini ise sayfanın yüzde 70’ini kaplayacak şekilde ayarladık..
Daha sonra da sayfamızın içine çerçeveleri yerleştirdik
<frame name="solcerceve" src= "> ile sol çerçeveyi,
<frame name="sagcerceve" src= "> ile de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes> etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz

)

Bir sayfaya 4 tane çerçeve sığar mı?

Bu bir arabaya 4 filin sığması kadar olağan bir durum!

Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada birleştirelim:

<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset cols="50%, 50%" rows="50%, 50%">
<frame name="bir" src= "><frame name="iki" src= "><frame name="uc" src= "><frame name="dort" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Bu sayfayı frame2.htm adı ile kaydedin..

Örnek2 :http://www.webdersleri.com/web-inter...nek/frame2.htm

Şimdii, bu sayfanın diğer sayfadan bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim..
Bu sayfadaki fark <frameset rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde sayfaya yerleştirir.. (cols’ da dikey öyle değil mi?)

Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532

Şimdi de bir başka örnek:

<html>
<head>
<title>Çerçeveli Sayfa</title>
</head>
<frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000">
<frame name="bir" src= "><frameset cols="*,*">
<frame name="iki" src= "><frame name="uc" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes>
</frameset>
</html>

Örnek3 : http://www.webdersleri.com/web-internet/html/ornek/frame3.htm

Şimdi de inceleyelim:

Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı

Sayfamızın kodlamasına baktığımızda:
frameborder="yes" border="5" bordercolor="#000000"> ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder" etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no" ise kenarlıksız olmasını sağlar.

<frame name="bir" src= "> etiketinin sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile değiştirebileceğinizi görüyorsunuz.

Son olarak Çerçeve 2 de uyguladığım bir yöntem olan; scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun, "no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma çubuğu aktif olsun.

Ayrıca;

<frame name="uc" src= ">

marginwidth ve marginheight etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50" yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır.
Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532

Bu derste de çerçeveleri inceledik. Bir sonraki ders de çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan söz edeceğiz.

Anlayamadığınız ya da öğrenmek istediğiniz konuları bana sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun..

İlkağan · 17-12-2007, 03:10

Teşekkürler ellerine gözlerine sağlık.

dukabjk · 17-12-2007, 13:09

sagolasın yakın zamanda hepsını okuyup bıtırecem

canin cehenneme · 17-12-2007, 16:20

çok güzel umarım devamı vardır.

ThEmDx · 24-01-2008, 15:03

çok saol güzel dersler.

oflee · 07-03-2008, 00:53

eyw saolasın da günümüz teknolojisinde html boş bilgi durumunda nerdeyse

CoLoNeL` · 07-03-2008, 00:57

c3h3n çok güzel paylaşımlar tebrik ediyorum fakat bunları notepad yada wordpad a kaydedip eklenti olarak versen hem göze daha hoş gelir hemde arkadaşlar daha rahat faydalanır bence.

Flexy_ · 07-03-2008, 02:12

Çok güzel bir paylaşım Bravo..

daon · 28-04-2008, 12:39

emeğine sağlık baya uğraşmışsındır

13-12-2007, 19:12	#1
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	HTML Kaliteli [Ders]//c3h3n Öncelikle Bu bir Alıntıdır Makaleleri sadece ben Birleştirdim. Komutları öğrenmeye başlıyoruz! <HTML> </HTML> Bir web sayfası <html> ile başlar, </html> ile biter. <html> <head> <title>Buraya sitenin adı yazılır</title> </head> <bOdy>Burasını daha sonra dolduracağız. Sitenizde olması gereken herşey bu arada yer alacak</bOdy> </html> <HEAD> </HEAD> Sitemizin adının yer aldığı Title’lın, Meta Tag denilen, arama motorlarında bulunmanızı kolaylaştıran şeylerin yazıldığı yerdir. Sitede birçok şeyi, yazıların biçimlerini, büyüklüklerini, renklerini belirleyip işimizi epey kolaylaştıran CSS ler de buraya konur. Javacript denen bazı şeyler de... Bunları söyledim ama kafanız karışmasın, zamanı gelince onların neler olduğunu anlatacağım. Şimdilik geçelim. <TITLE> </TITLE> Her sitenin bir adı olması gerekir. <title> DayDay </title> Mısra ile Bulut’nin sitesinin adı: DayDay. Biliyorsunuz insanlar birşeyi ararken adını yazıp ararlar... <BODY> ... </BODY> Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölüm. Buradaki komutların neler olduğunu sırayla öğreneceksiniz. Ama önce, sayfamızı şöyle bir görelim değil mi? Bulut, ilk sayfada bu yazı olsun istiyor: "DayDay, seni çok seviyoruz! " Haydi bakalım deneyelim: __________________________________________________ _________ İlk Sayfamızı yapıyoruz Önce not defterimizi açalım. Monitörün altında sol tarafta başlat menüsü var. Programların içinde Donatılar... Onun içinde de not defteri... Aslında bunun yerini bildiğinize eminim Aşağıdaki yazıyı açtığınız sayfaya yazın. <html> <head> <title> DayDay </title> </head> <bOdy> DayDay seni çok seviyoruz </bOdy> </html> İndex adını verin ve önceden belirlediğiniz bir yere kaydedin. (Daha sonra bulmanız gerekecek) Kaydettiğiniz sayfaya gidip tıklayınca hiç birşey olmadı değil mi? Hiç web sayfasına benzemiyor. İlk yazdığınız gibi yani aşağıdaki gibi görüyorsunuz. O zaman "farklı kaydet" seçeneğini kullanıp yeniden deneyelim: Bu kez kaydederken index.html (ya da index.htm) yazarak kaydedin. Tekrar gidip bu yeni sayfaya tıklayarak açın. Evett ) Oldu işte ! Yazdığımız diğer yazılar artık görünmüyor. Görünen sadece söylemek istediğiniz şey olacak... img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif"> Sonraki derste bu yazıya daha neler yapabileceğimizi göreceğiz. __________________________________________________ ___________ Yazı (Tip, Renk, Büyüklük) Bu yazıyı hatırlıyorsunuz. Sadece yazmıştık. Çok sıradan görünüyor değil mi? Farklı durumlar için, farklı büyüklük, tip ve renklerde yazılar gerekir. Ayrıca yazının sayfanın neresinde duracağına da siz karar vermelisiniz. Yazılar aşağıdaki komutlar içine yazılır. <font> ............... </font> Yazının büyüklüğü için "size" yazı tipi için "face" Yazı rengi için "color" komutlarını kullanmanız gerekir. Aşağıdaki örneği yazın: <font size="3" face="Arial" color="red">DayDay seni çok seviyoruz</font> Yazıların yerinin <bOdy> komutundan sonra gelmesi gerektiğini unutmayın. <html> <head> <title> DayDay </title> </head> <bOdy> <font size="4" face="Arial" color="red">DayDay seni çok seviyoruz</font> </bOdy> </html> İsterseniz yaptığımızın neye benzediğine bakalım. img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif"> Şimdi tek tek tekrar edelim. YAZI BÜYÜKLÜĞÜ font size="4" 5 yerine 2, 3, 4, 6 yazabilirsiniz. Ayrıca yazınızı aşağıdaki kodların arasına da yazabilirsiniz.. Yine aşağıda gördüğünüz büyüklüklerde görünür. Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 <h1> DayDay </h1> <h2> DayDay </h2> <h3> DayDay </h3> <h4> DayDay </h4> <h5> DayDay </h5> <h6> DayDay </h6> YAZI RENGİ Renkler için ya renk kodunu ya da ingilizce adını yazmalısınız. color="red" yerine, farklı renk isimleri yazın. red - kırmızı blue - mavi yellow - sarı white - beyaz black - siyah Diğer renklerin İngilizce yazılışları ve kodları için color=#0000ff bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de color=#0000ff buraya bir ara göz atın. Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 Kodlarla yazmak istiyorsanız, color="#FF0000" renk adı yerine kod yazmanız gerekir. red - #ff0000 blue - #0000ff yellow - #ffff00 white - #ffffff black - #000000 Dikkat ettiyseniz color=" " tırnak işaretleri arasında renk adını kullanırken # işaretini yazmıyoruz. Onu sadece renk kodlarını yazarken kullanıyoruz. YAZI TİPİ face="Arial" yerine Verdana, Arial Narrow, Times New Roman, Comic Sans MS, Helvetica, sans-serif, gibi yazı tipi adlarını yazarsanız yazınız o biçimde görünecektir. Ama çok önemli bir şey var... Bir yazı tipi, ancak başkasının bilgisayarında da o yazıdan varsa görünür. Yoksa yaptığınız bir işe yaramaz. Bu yüzden, örnek olsun diye baktığınız sayfadaki font isimlerini kullanmaya kalkmayın )) Yukarıda yazdığım örneklerle yetinmelisiniz şimdilik.

13-12-2007, 19:14	#2
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Yazıyı istediğimiz yere yerleştirmek Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 Yazıların sayfanın neresinde durması gerektiğine biz karar verebiliriz. Hiçbir şey yazmazsak, Sayfanın solunda dururlar. <center>....</center> Yazınızı <center>....</center> arasına yazarsanız. Sayfanın ortasında görünür. <p> Paragraf yapmak için kullanılır. Ayrıca yazı yerleştirmelerinde de işe yarar. Sola dayalı olması için: <p>Yazınızı buraya yazacaksınız</p> Ortada olması için: <p align=center>Yazınızı buraya yazacaksınız</p> Sağa dayalı olması için: <p align=right>Yazınızı buraya yazacaksınız</p> Satırbaşı ve paragraf yapmak <br> Klavyede yazarken alt satıra inmek için enter tuşunu kullanıyorsunuz. Ama web sayfası hazırlarken bu işe yaramaz. Alt satıra inmek istediğinizi sizin kod yazarak belirtmeniz gerekir. <br> yazdığınız zaman, yazınızı satırbaşı yapmadan yazmış olsanız bile, yazınız web sayfanızda satırbaşı yapılmış olarak görünür. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. <p> Bu iki komutun diğerlerinden bir farkı var. Yazdığınız her komutu "/" işaretiyle kapatmak zorundasınız ama bu ikisinde bunu yapmanız gerekmez.

13-12-2007, 19:16	#3
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Kalın, eğik ve altı çizgili yazmak Bazen yazımızın diğer yazılardan ayrılması için onu daha belirgin yapmamız gerekir. Bunun adı: "Bold" yapmak, yani yazıyı daha kalın ve siyah yazmak. Kalın (Bold) yazı <b>Yazınızı buraya yazacaksınız</b> Yazıyı eğik yazmak için kullanacağınız kod ise böyle... Eğik (İtalik) yazı <i>Yazınızı buraya yazacaksınız</i> Yazınızın altına çizgi çekmek istiyorsanız bu kodu kullanacaksınız. Ama dikkat etmeniz gereken birşey var. Biliyorsunuz, link verilen kelimelerin de altı çizgili oluyor. Yani altı çizgili bir kelime gördüğümüzde aklımıza gelen şey başka bir sayfaya gidecek olmamız... Siz link vermediğiniz kelimeleri altı çizgili yaparsanız, insanları yanıltmış olacaksınız. Onun için dikkat edin ... Altı çizgili (underline) yazı <u>Yazınızı buraya yazacaksınız</u> Peki... Hem kalın hem eğik yazmak istersek ne yapacağız? O zaman her iki kodu da peşpeşe kullanacağız. Yani ne kadar özellik vermek istiyorsak onların hepsini kod olarak peşpeşe yazabiliriz. Ama kodları kapatmayı hiçbir zaman unutmayın. <b><i> Yazınızı buraya yazacaksınız</i></b> Web sayfanıza Resim eklemek Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 Merhaba arkadaşlar, Bakıyorum bayağı ilerlediniz.. Yakında beni bile geçeceksiniz. Bu hafta sizlerle sayfamıza resim yerleştirmeyi öğrenelim... Size bir sır vereyim mi? Bu dersleri çalışırken winamp’ı açalım ve öyle çalışmaya başlayalım Böylece hem eğlenir hem öğreniriz ... Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim... Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src= "">etiketidir. Tırnak işaretlerinin arasına koyacağımız resmin adını yazarız. Şimdi bunu bir örnekle gösterelim: Resim ekliyoruz <html> <head> <title>Sayfamızda Resim </title> </head> <bOdy> <p><img src= "cicek.jpg"> </bOdy> </html> Evet işte oldu sayfamıza resmimizi yerleştirdik. Ama şimdi sadece solda duruyor.br img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif"> Ortaya ya da sağa hizalanması isteseydik, aşağıdaki kodları yazmamız gerekecekti. Resmin ortaya hizalanması <img src= "cicek.jpg"> img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif"> Resmin sağa hizalanması <img src= "cicek.jpg"> img src=http://www.webdersleri.com/web-internet/html/resim/ornek.gif"> Resmimizin boyutlarını da belirleyebiliriz. Bunun için resmin genişliğini ve yüksekliğini yazmamız gerekir. "width=230 height=252" etiketlerini kodumuza ekleriz. <img src= "cicek.jpg"> Resmin üzerine gelince görünen yazı Mouse’umuzu yani faremizi sayfamızdaki bir resmin ya da grafik unsurun üstüne getirdiğimizde görünen açıklama metni koyabiliriz. Bu metinde resmin adı, sitemiz hakkında bilgi bulunabilir. <img src= "cicek.jpg">

13-12-2007, 19:18	#4
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Tablo yapmayı öğreniyoruz Web sayfanızdaki yazı ve resimlerin bulunduğu yeri denetlemek için kullanacağınız şey tablolardır. Her tabloda dikey ve yatay istediğiniz kadar hücre oluşturabilirsiniz. Bu hücrelerin büyüklüklerini siz belirleyebilirsiniz. Böylece yazıdığınız yazılar tam olarak istediğiniz yerde durabilir. Tablo için kullanacağımız temel etiketler aşağıdakilerdir. Tablo oluşturmak için <table></table> Yatay hücre oluşturmak için <tr> Dikey hücre oluşturmak için <td> 6 bömüme (hücreye) ayrılmış bir tablo yapalım <table border="1"> <tr> <td>Birinci sırada Hücre1</td> <td>Birinci sırada Hücre2</td> <td>Birinci sırada Hücre3</td> </tr> <tr> <td>İkinci sırada Hücre1</td> <td>İkinci sırada Hücre2</td> <td>İkinci sırada Hücre3</td> </tr> </table> Birinci sırada Hücre1 Birinci sırada Hücre2 Birinci sırada Hücre3 İkinci sırada Hücre4 İkinci sırada Hücre5 İkinci sırada Hücre6 Hücremin içi renkli olsun (bgcolor) <table> <tr> <td bgcolor="red"> kırmızı hücrem oldu</td> </tr> </table> Kırmızı hücrem oldu Hücremin içinde resim istiyorum (background) <table> <tr> <td background="deneme.gif"> Heeyy burada kablumbiklerim vaarr</td> </tr> </table> Heeyy burada kablumbiklerim vaarr Hücremin kenar kalınlığını değiştirmek istiyorum (border) <table border="10"> <tr> <td>kenarı kalın oldu</td> </tr> </table> <table border="1"> <tr> <td>kenarı ince oldu</td> </tr> </table> kenarı kalın oldu kenarı ince oldu Hücremin kenarını renkli yapmak istiyorum (bordercolor) <table border="10" bordercolor="green"> <tr> <td>kenarını yeşil yaptım</td> </tr> </table> kenarını yeşil yaptım Hücremin içini de renkli yapmak istiyorum (bgcolor) <table border="10" bordercolor="red"> <tr bgcolor="yellow"> <td>kenarını yeşil yaptım</td> </tr> </table> içi sarı kenarı kırmızı Hücremin büyüklüğünü ayarlamak istiyorum (width=" " height=" ") <table border="10" width="300" height="80" > Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 <tr> <td>genişliği 250 yüksekliği 80 piksel</td> </tr> </table> genişliği 300 yüksekliği 80 piksel Hücremin içindeki yazı sağda olsun (align=" ") <table border="1" width="150" height= "100"> <tr> <td align="right"> DayDay</td> </tr> </table> DayDay Hücremin içindeki yazı altta olsun (valign=" ") <table border="1" width="150" height="100"> <tr> <td valign="bottom"> Hücre</td> </tr> </table> DayDay Tablomdaki yanyana iki hücreyi birleştirmek istiyorum (colspan) <table border="1"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr><td colspan="2">4</td><td>5</td> </tr> <tr><td>6</td><td>7</td><td>8</td> </tr> </table> 1 2 3 4 5 6 7 8 Tablomdaki altalta iki hücreyi birleştirmek istiyorum (rowspan) <table border= "1"> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr><td >4</td><td> rowspan="2">5</td><td>6</td> </tr> <tr><td>7</td><td>8</td> </tr> </table> 1 2 3 4 5 6 7 8 Yazılarım hücrenin kenarına değmesin (cellpadding) <table border="1" cellpadding="15"> <tr> <td>Değmiyor</td> </tr> </table> Değmiyor Hücremin etrafındaki çerçevenin kalınlığını ayarlıyayım (cellspacing) <table border="1" cellspacing="15"> <tr> <td>Etrafında boşluk var</td> </tr> </table> Canım sıkılıyor Bunların hepsini tekrar tekrar deneyip, neler olduğunu görmek, öğrenmenin en iyi yoludur.

13-12-2007, 19:21	#5
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Yazıya link vermek Yazılara nasıl link verilir? Bu hafta da yazılara link vermeyi öğreneceğiz. Kendi sayfamızda veya başkasının sayfasına geçmek için kullandığımız bağlatılara link denir. Link vermenin etiketi <A> yani "anchor" ingilizce de gemi demirine verilen isimdir. Yani gemileri birbirine bağlamaya yaran bu demir HTML de bizim sayfalarımızı birbirine bağlamaya yarar. Bir yazıya nasıl link veriririz? Bir yazıya link vermek istediğimizde şu kodları yazarız: (Kalın olarak yazılan yere kendi linkinizi yazacaksınız): <a href= "http://buraya vermek istediğiniz linki girin/"> Buraya linkin adını yazın (örnek: ikinci sayfa)</a> Linkimizin yazısını nasıl renklendiririz? Bazen linkimizin renkli olmasını isteriz. Mesela tıklanmadan önce mavi olan linkimiz tıklandıktan sonra kırmızıya dönüşür. Bunun olmasını istemezsek linkimizi tek renk yapabiliriz bunun için bOdy taginin yanına renk kodlarımızı yazarız: Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 (kodlarımızı aşağıdaki gibi yazarsak siyah bir linkimiz olur. Renk kodlaması için tıklayın..) <bOdy bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Linkimizin altında açıklama çıkmasını istiyorsak (title) Bazen linkimizin altında açıklama çıkmasını isteriz. Bunun için kullanacağımız kod "title" dır: <a href= "http://adresiniz" title="açıklaması"> (örnek için aşadağıdaki linkin üzerine farenizi getirin ve biraz bekleyin) Webdersleri hepsini açıklar Reklam Amaçlı Deil e-postamıza link verelim(mailto) Sayfamızda e-postamıza da link verebiliriz. Böylece sayfamızı ziyaret edenler bizimle bağlantı kurabilir. Sitemiz hakkındaki düşünceleri söyleyebilirler. Şimdi bir e-posta bağlantısı nasıl olur onu görelim. e-posta linkini A etiketinin yanına "mailto" etiketini eklemek ile yaparız: <a href= "mailto:Webmaster@Wardom.Org /b>b a rel="nofollow" target=_blank">c3h3n@Wardom.Org</a> {Boyle Bir Mail Adresi Yok Eklemeyin!] Boyle Görünücek:c3h3n@Wardom.Org Yukarıdaki linkimize tıkladığınız zaman bilgisayarınızda yüklü olan mail programı devreye girecektir. Böylece kolaylıkla o sitenin webmasterı ile bağlantı kurabilirsiniz.. (Şimdilik ben kendi e-mailimi yazdım. Siz sayfanızda kendi e-postanızı yazacaksınız..) Genelde en çok kullanılan mail programı Microsoft’un Outlook Express isimli programıdır. Eğer bilgisayarınızda Windows işletim sistemi yüklü ise bu program da otomatik olarak kurulu olacaktır. Yazımızın üzerine faremizi getirdiğimiz zaman rengini değiştirmek için CSS bilmemiz gerekiyor. Bunu da o zaman anlatalım olur mu? CSS ile sayfalarımız daha dinamik olur.. Bunu da unutmadan söyleyelim.

13-12-2007, 19:24	#6
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Sıralı Liste Nasıl Yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim: Numaralı (ya da) başka tür listeler yapalım: Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekliyerek yapılır. En sevdiğim hayvanlar: <ol> <li>Kediler <li>Köpekler <li>Balıklar <li>Kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: Kediler Köpekler Balıklar Kuşlar Sıralı listemizin sıra numarasını Roma Rakamları ile göstermek istersek <OL> etiketimizin yanına "type" değerinin yanına Roma Rakamlarından birini yazarız. (Mesela I ): En sevdiğim hayvanlar: <ol type="I"> <li>Kediler <li>Köpekler <li>Balıklar <li>Kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: Kediler Köpekler Balıklar Kuşlar Listemizin Sıralamasında Harfler kullanalım (type) Listelerimizin sıralanmasnda rakam değil de harf kullanmak istiyorsak <OL> etiketinin yanındaki "type" değerinin karşısına "a" yazmamız yeterli.. Belli bir harften başlamanız gerekiyorsa start etiketini kullanmanız gerekiyor... Hangi harften başlamasını istiyorsanız onun sıra numarasını yazmalısınız... En sevdiğim hayvanlar: <ol type="a"> <li>Kediler <li>Köpekler <li>Balıklar <li>Kuşlar </ol> En sevdiğim Hayvanlar: <ol type="a" start="3"> <li>Kediler <li>Köpekler <li>Balıklar <li>Kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: Kediler Köpekler Balıklar Kuşlar En sevdiğim Hayvanlar: Kediler Köpekler Balıklar Kuşlar Bugün sayılı listeleri öğrendik. Bir de sayısız listeler ve Tanımlama Listeleri var... Bunları da bir sonraki dersimizde öğreneceğiz. Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın.. Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz.

13-12-2007, 19:27	#7
c3h3n Forum Ustası Kayıt Tarihi: Dec 2005 Üye numarası: #44310 Yer: Kaçkar Dağları Mesaj sayısı: 3,996 Karma etkisi: 7930 Karma: 792044	Dewam Wardom.:) Çerçeve (frame) Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere içerisinde görüntüleniyor... Web tasarımcıları çerçeveyi pek sevmez. Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve teknolojisi HTML’ e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak! Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi görünmez ziyaretçimize hiçbir zaman! Bu derste Çerçeve yani Frame etiketini göreceğiz.. Çerçeve içinde Çerçeve.. Her yer çerçeve.. Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame’in (çerçevenin) özelliklerini ve frame’de gösterilecek sayfayı belirtiyoruz... Şimdi örneklerimizi yapalım ve inceleyelim: Örnekler: cerceve1.htm dosyası: <html> <head> <title>Sol çerçeve</title> </head> <bOdy bgcolor="#FF0000"> <font size=7>Sol Çerçeve</font> </bOdy> </html> cerceve2.htm dosyası: <html> <head> <title>Sağ Çerçeve</title> </head> <bOdy bgcolor="#000099"> <font size=7>Sağ Çerçeve</font> </bOdy> </html> Şimdi de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile kaydedelim: <html> <head> <title>Çerçeveli bir sayfa</title> </head> <frameset cols="30%, 70%"> <frame name="solcerceve" src= "><frame name="sagcerceve" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Şimdi de yazdığımız kodlamayı inceleyelim: Örneği İnleyin : http://www.webdersleri.com/web-internet/html/ornek/frame.htm Yukarıdaki butona basarak örneği inceleyebilirsiniz. Örneği incelediyseniz şimdi de yapımında kullandığımız kodlamayı bir inceleyelim: Öncelikle normal olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm ’ yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset> etiketini kullandık.. <frameset cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın yüzde 30’unu kaplayacak şekilde diğerini ise sayfanın yüzde 70’ini kaplayacak şekilde ayarladık.. Daha sonra da sayfamızın içine çerçeveleri yerleştirdik <frame name="solcerceve" src= "> ile sol çerçeveyi, <frame name="sagcerceve" src= "> ile de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes> etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz ) Bir sayfaya 4 tane çerçeve sığar mı? Bu bir arabaya 4 filin sığması kadar olağan bir durum! Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada birleştirelim: <html> <head> <title>Çerçeveli Sayfa</title> </head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame name="bir" src= "><frame name="iki" src= "><frame name="uc" src= "><frame name="dort" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Bu sayfayı frame2.htm adı ile kaydedin.. Örnek2 :http://www.webdersleri.com/web-inter...nek/frame2.htm Şimdii, bu sayfanın diğer sayfadan bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim.. Bu sayfadaki fark <frameset rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde sayfaya yerleştirir.. (cols’ da dikey öyle değil mi?) Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 Şimdi de bir başka örnek: <html> <head> <title>Çerçeveli Sayfa</title> </head> <frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000"> <frame name="bir" src= "><frameset cols=","> <frame name="iki" src= "><frame name="uc" src= "><noframes>Browser’ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Örnek3 : http://www.webdersleri.com/web-internet/html/ornek/frame3.htm Şimdi de inceleyelim: Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı Sayfamızın kodlamasına baktığımızda: frameborder="yes" border="5" bordercolor="#000000"> ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder" etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no" ise kenarlıksız olmasını sağlar. <frame name="bir" src= "> etiketinin sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile değiştirebileceğinizi görüyorsunuz. Son olarak Çerçeve 2 de uyguladığım bir yöntem olan; scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun, "no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma çubuğu aktif olsun. Ayrıca; <frame name="uc" src= "> marginwidth ve marginheight etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50" yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır. Kaynak: Wardom http://www.wardom.com.tr/showthread.php?t=179532 Bu derste de çerçeveleri inceledik. Bir sonraki ders de çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan söz edeceğiz. Anlayamadığınız ya da öğrenmek istediğiniz konuları bana sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun..

17-12-2007, 03:10	#8
İlkağan Forum Kalfası Kayıt Tarihi: Aug 2005 Üye numarası: #31099 Yer: İzmir Mesaj sayısı: 1,560 Karma etkisi: 723 Karma: 71508	Teşekkürler ellerine gözlerine sağlık.

17-12-2007, 13:09	#9
dukabjk Cool Üye Kayıt Tarihi: Jun 2007 Üye numarası: #129124 Mesaj sayısı: 176 Karma etkisi: 30 Karma: 2566	sagolasın yakın zamanda hepsını okuyup bıtırecem

17-12-2007, 16:20	#10
canin cehenneme Forum Kalfası Kayıt Tarihi: Mar 2005 Üye numarası: #6072 Mesaj sayısı: 830 Karma etkisi: 777 Karma: 77084	çok güzel umarım devamı vardır.

24-01-2008, 15:03	#11
ThEmDx Forum Kalfası Kayıt Tarihi: Jul 2007 Üye numarası: #132920 Yer: im seni :) Mesaj sayısı: 772 Karma etkisi: 2305 Karma: 230000	çok saol güzel dersler.

07-03-2008, 00:53	#12
oflee Daimi Üye Kayıt Tarihi: Aug 2005 Üye numarası: #32353 Mesaj sayısı: 728 Karma etkisi: 325 Karma: 31814	eyw saolasın da günümüz teknolojisinde html boş bilgi durumunda nerdeyse

07-03-2008, 00:57	#13
CoLoNeL` Banned Kayıt Tarihi: Nov 2004 Üye numarası: #35 Yer: KafsinKaf Mesaj sayısı: 415 Karma etkisi: 0 Karma: 95078	c3h3n çok güzel paylaşımlar tebrik ediyorum fakat bunları notepad yada wordpad a kaydedip eklenti olarak versen hem göze daha hoş gelir hemde arkadaşlar daha rahat faydalanır bence.

07-03-2008, 02:12	#14
Flexy_ Daimi Üye Kayıt Tarihi: Apr 2006 Üye numarası: #61566 Yer: Sakarya Mesaj sayısı: 269 Karma etkisi: 200 Karma: 19409	Çok güzel bir paylaşım Bravo..

28-04-2008, 12:39	#15
daon Çırak Kayıt Tarihi: May 2005 Üye numarası: #21082 Mesaj sayısı: 11 Karma etkisi: 0 Karma: 10	emeğine sağlık baya uğraşmışsındır

Konu Araçları	Bu Konuda Ara
Printer Çıktısını Göster Sayfayı Emaille Yolla	Bu Konuda Ara: Gelişmiş Arama