| WEB OKULU | |
| BÖLÜM 1 | |
|---|---|
1 - Giriş
2 - Temel Kodlar
3 - Sayfanın Üst ve Sol Boşluğu
4 - Frame'li Sayfa
5 - Liste Oluşturma
6 - Tablo Oluşturma
7 - Sayfa İçinde Sayfa
8 - Sayfaya Link Ekleme
9 - Sayfaya Resim Ekleme
Bölüm 2 Aradığınız konuyu bulamadıysanız Bölüm 2'ye bakmalısınız.
Web Okulu'nda, İnternette bir World Wide Web sayfasına sahip olabilmek için gerekli A'dan Z'ye herşeyi öğreneceksiniz. Öncelikle size Web Siteniz için Server'unda ücretsiz disk alanı ayıracak bir firma ismi gerekli. Angelfire, Geocities ve Tripod gibi çeşitli firmalar var. Ben Angelfire firmasını tavsiye ediyorum. Siteniz için size 5 MB free disk space tahsis ediyor. Bu alan A4 kağıdı boyutunda 1000 sayfanın üzerinde yazı alabilecek kadar büyüktür. Bir E.mail adresiniz varsa hemen başvurup 5- 10 dakika içinde sitenizi hazırlayıp internette yayına başlayabilirsiniz. Size şifre gönderileceği için e.mail adresi gerekli. Resimlerinizi kolay ve hızlı bir şekilde Angelfire'daki sitenize gönderebilirsiniz.
Bir Web sitesine girmek istediğinizde bilgisayarınız internetten o sitenin görüntüsünü almaz. Peki ne alır? HTML (Hypertext Mark-up Language) dilinde yazılmış kod'larını ve sitedeki resimleri alır. Kullandığınız browser bu kodları site görüntüsüne çevirir. Bir sitenin HTML dilinde yazılmış kodlarını görmek isterseniz o siteye girdikten sonra İ.EXPLORER'da "Görünüm" (View) ve ardında da "Kaynak" (Source) menülerine tıklayınız.
Bir Web sayfası hazırlayabilmek için ilk olarak kopyalamayı ve çalmayı öğrenmelisiniz. "Görünüm" ve "Kaynak" menülerini kullanarak beğendiğiniz herhangi bir sitenin HTML dilinde hazılanmış "not defterini" ekrana getirip "Dosya" ve "Farklı Kaydet" menüleri yardımıyla hard diskinize kaydedebilirsiniz. Bu arada ilgili sitenin normal görünümünü de yine aynı menüleri kullanarak kaydetmelisiniz. Yalnızca normal görünümü kaydederseniz; sonradan "Görünüm" ve "Kaynak" menülerini kullanarak not defterini görüntülediğinizde hemen hemen işinize yaramayacak kadar sıkışmış, birbirine girmiş olduğunu görebilirsiniz.
Web sayfalarınızı önce kendi bilgisayarınızda hazırlamalı ve daha sonra bunları kopyalayıp, Angelfire'ın Web Editörü yardımıyla internetteki sayfalarınıza yapıştırmalısınız. Hazırladığınız bir Web sayfanızı internette yayına geçirmek sadece 2-3 dakika zamanınızı alıyor.Kendi bilgisayarınızda sayfa hazırlarken ilk önce internetten normal görünümünü kaydettiğiniz bir Web sayfasına girin. Bu Web sayfasını "Dosya" ve "Farklı Kaydet" menüleri yardımıyla yeniden kaydedin. Eğer Web sitenizin "Home" sayfasını hazırlıyorsanız adına "index.html" verin. Daha sonra bu index.html sayfanızın not defterine girip ister üzerinde değişiklikler yaparak kendinize uyarlarsınız, İsterseniz tamamen silip yeniden oluşturursunuz.Tabi bunları Off Line'da yapıyorsunuz. Görünüm ve Kaynak menülerinden girerek sayfanızın not defterinde değişiklik yaptığınızda not defterinin "Dosya" ve "Kaydet" menülerini kullanmayı unutmayın. Yaptığınız değişikliğin sayfada gözükmesi için sayfadan çıkıp tekrar girmeniz gerekir.
Yazdıklarınızın düzgün görünmesi için her html sayfasına , aşağıdaki kodlarla başlamalı; <html> <head> <title>İSMAİL DEĞİRMENCİ </title> </head> <body>Aşağıda bazı sık kullanılan kodları görüyorsunuz.
<b> </b> Aradaki metni koyu yapar .
<i> </i> Aradaki metni italik yapar .
<u> </u> Aradaki metnin altını çizer.
<br> Satırbaşına dön komutudur.
Bu kodları birbirlerinin içinde de kullanabilirsiniz. Örneğin bir metni hem koyu, hem de italik yapmak için <b><i> ..... </i></b> komutları bu şekilde kullanabilirsiniz.
<p> Yeni parağraf .
<blink> </blink> Aradaki metin sinyal verir. (Netscape"te kesinlikle verir. Ama İE4"te bilemem.)
<h1> HALKBANK</h1> Aradaki metin başlıktır. 1'den 6'ya kadar (h6 gibi) rakam kullanabilirsiniz. 1 en büyük harf, 6 en küçük harftir.
<font size="1">HALKBANK</font> Yazı karakterinin boyutunu belirler. 1 en küçük, 6 en büyüktür.
<center>HALKBANK</center> Aradaki metni sayfanın solundan ve sağından merkeze alır.
<blockquote> HALKBANK </blockquote> Bu komutlar arasındaki paragraf soldan ve sağdan merkeze alınır.
<!--------> Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıda örnek görüyorsunuz.
<!-- Sol Taraf Başlıyor -->
<!------- <u>Altı çizili yazı...</b> ----->
<pre> </pre> Bu komut aradaki metnin şekline dokunmaz. Yani metni sıkıştırmaz. Ancak bu komutu örneğin 1 sayfa ya da 1 parağraf yazı için kullanamazsınız. Bir satır boyutundan daha kısa satırlar için kullanabilirsiniz. Aksi halde sayfanızda 1 Metre uzunluğunda satırlar oluşur.(Deneyin)
Bu karakteri boşluk bırakmak istediğiniz yere koyabilirsiniz.(Non-Breaking Space) Ancak dikkat edilmesi gereken husus her yalnızca bir harflik boşluk bırakır. Daha çok boşluk için yan yana çok sayıda yazmalısınız.
<hr> Yatay çizgi çizer.
<font color="blue">HALKBANK</font> Aradaki metnin rengini belirler. Esasen HTML dilinde her rengin bir kodu vardır. Bu kodları kullanmak daha uygundur.
<body bgcolor='white'>veya <body bgcolor='#FFFFFF'> body tagı sayfanın arka planı anlamındadır. Örneğin arka planı beyaz yapmak istiyorsanız, yukarıdaki komutlardan birini yazmalısınız. Eğer arka plan için elinizde bir desen gifi varsa <body background=' arka.gif'>
şeklinde komut yazmalısınız . <body background=' arka.gif' bgcolor='#ffffff'> şeklinde komut girerek hem renk, hem de gif belirtebilirsiniz.
<BODY BGCOLOR="#000000" text="#f0e68c" link="#00ffff" vlink="#ff00ff" > Benim bu sayfamın başına yazdığım bu komutta ise arka plan rengi #000000, text rengi #f0e68c , link rengi #00ffff ve vlink (ziyaret edilmiş link) rengi ise #ff00ff olarak belirtiliyor.Sayfa başına bu şekilde komutu girmelisiniz.Text rengini sayfa başında belirlemiş olmanız dilediğiniz kelime veya cümlelerin rengini değiştirmenize engel değildir.
3 - SAYFANIN ÜST VE SOL BOŞLUĞU :
Sayfanın üst boşluğuna "Topmargin" ve sol boşluğuna "Leftmargin" denir. Sayfanızda bu tagları kullanmazsanız sol ve üst'te yarım santim boşluk kalır. Değeri piksel cinsinden yazacaksınız.Bu tagları "body" tagının yanında ve aşağıdaki gibi kullanmalısınız.<body bgcolor="#ffffff" topmargin=0 leftmargin=0>
Yukarıdaki gibi "0" yazarsanız üst ve solda boşluk kalmaz.
Frame'ler 2 yada daha çok Html sayfasını ekranınızın penceresinde birleştirerek tek sayfa olarak görünmesini sağlar. Örneğin 2 bölümlü bir frame sayfası hazırlayacaksak, öncelikle bu bölümlerin her biri normal bir Html sayfası olarak hazırlanır. Dha sonra Frame komutları kullanılarak bu 2 sayfayı tek sayfa olarak gösterecek 3. sayfa hazırlanır. Bu 3.sayfaya aşağıda belirteceğimiz frame komutları ve diğer iki sayfanın isimleri girilir. Web sayfalarınızda yalnızca 3.sayfanıza link koyarsınız. Diğer 1 v 2 nolu sayfalara link konulmaz. Ancak ziyaretçi sözkonusu 3.sayfanızın kaynağına inip 1 v 2 nolu sayfalarınızın isimlerini öğrenirse, adresinizin sonuna bu sayfa isimlerini ekleyerek yalnızca bu sayfalarınızı da görebilir<FRAMESET> ...</FRAMESET> = Frame komutu bu taglar arasına yazılır.
FRAMESET COL= Dikey pencere oluşturmak için kullanılır.
FRAMESET ROW = Yatay pencere oluşturmak için kullanılır.
<FRAMESET COL="135,250,*> = Bu komutta 3 adet sayfanın bir sayfada dikey olarak birleşeceği ve 1. sayfaya 135 Piksel ve 2.sayfaya 250 Piksel yer ayrılacağı, 3.sayfaya ayrılan yerin ise değişken (*) olduğu belirtiliyor. Piksel yerine % değerler de verilebilir.
<FRAME SRC="....">= Noktalı alana sayfa ismi yada URL ismi yazılır.
<NAME="...._..."> = Sayfanın referans ismi yazılır.
MARGINWIDTH = Sayfanın sol boşluğu.
MARGINHEIGHT = Sayfanın üst boşluğu.
TARGET="_TOP" yada TARGET="_BLANK" = Frameli sayfanızda bir link varsa <a href ile başlayan tag içine mutlaka bu komutlardan birini koymalısınız.
2 sayfalı dikey ve yatay çerçeve kodları
<FRAMESET COLS="135,455">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
<FRAMESET ROWS="90,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
HTML dokümanınızda aşağııdaki gibi numarasız bir liste elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:
<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>
· Birinci Satır
· İkinci Satır
· Üçüncü Satır
Numara sıralı veya harf sıralı liste oluşturmak için aşağıdaki komutlar girilir.
<OL Type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</OL>
Yukarıdaki gibi Type=A yazarsanız sıralamada büyük harf kullanılır.Type=a yazarsanız küçük harfler, Type=I yazarsanız büyük Roma karakterleri ve Type=L yazarsanız numaralar (rakamlar) kullanılır.
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">
<Table> .... </Table> = Tablo bu taglar arasında yer alır.
Tablo için enlemesine yer seçenekleri : <table align= left, right>
CAPTİON = Tablonun tablo çizgileri dışındaki başlığı.
Enlemesine (genişliğine) yer seçenekleri : <caption align = left, center, right>
Boylamasına (yüksekliğine) yer seçenekleri : <caption valign= top, bottom>
<TH> = Sütun başlığı tanımlaması.
<TR> = Satır tanımlaması.
<TD> = Sütun tanımlaması.
<TR, TH ve TD'de enlemesine yer seçenekleri align= left, center, right>
<TR, TH ve TD'de boylamasına yer seçenekleri valign= top, middle, bottom, baseline>
BORDER = Tablonun piksel cinsinden çerçeve kalınlığını belirtir. Eğer bu tag için değer belirtmezseniz, yada "0" değerini verirseniz Tablonuzun ince de olsa çizgileri olur. Ancak "BORDER" tagının ismini hiç belirtmezseniz tablonuz yine oluşur, fakat tablonuzda hiçbir çizgi göremezsiniz.
CELLPADDING = Tablonun kenar çizgisiyle tablo içindeki yazı arasındaki boşluk mesafesini belirtir.(Piksel cinsinden)
CELLSPACING = Tablonun hücreleri arasındaki mesafeyi belirtir.
ROWSPAN = Kaç satır üstüne.
COLSPAN = Kaç sütun üstüne.
WIDTH = Tablonun genişliğini belirtir. Piksel veya % cinsinden değer verilebilir. Tablonun tüm sayfayı kaplaması isteniyorsa 590 değeri verilir. Örneğin %20 değeri verilirse tablo genişliği sayfanın % 20'si kadar olur.
HEIGHT = Tablonun yüksekliğini belirtir. Piksel veya % cinsinden değer verilebilir.
TH BGCOLOR = Tablonun arkaplan rengini belirtir. Örneğin "#00ffff" gibi.
TH BACKGROUND = Tablonun arka planına bir gif yada jpeg resmi koymak istiyorsanız bu tagı kullanmalısınız.
TD BGCOLOR = Hücre rengi. ("#00ffff") gibi.
TABLE BORDERCOLOR = Tablonun çerçeve rengi.
Table bordercolorlight = Tablo çerçevesinin açıkrenkli kısmının rengi.
Table bordercolordark = Tablo çerçevesinin koyu renkili kısmının rengi.
TD NOWRAP = Satırbaşı yok.
<Table frame=box> = Tablo şekli.
<Table frame=above> = Sol, alt ve sağ tarafı açık tablo. Yani bu kenarları yok.
<Table frame=below> = Sol, üst ve sağ tarafı açık tablo.
<Table frame=hsides> = Solu ve sağı açık tablo.
<Table frame=vsides> = Üst ve altı açık tablo.
<Table frame=lhs> = Üst ,alt ve sağı açık tablo.
<Table frame=rhs> = Üst, sol ve altı açık tablo.
<Table frame=void> = Her tarafı açık, yani çerçevesiz tablo.
Tabloya <TABLE> tag'ıyla başlanır.Her satır için <TR>, her sütun için ise <TD> tag'ı kullanılır. Her satırın sonuna </TR> ve her sütunun sonuna da </TD> tag'ları konulmalıdır. Eğer bir hücrenin yanındaki iki yada daha fazla hücreyi satır olarak yada sütun olarak içine almasını istiyorsanız, <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> komutlarını kullanmalısınız.
<table border> <tr> <td>A</td> <td>B</td> <td>C</td><td>D</td> </tr> <tr> <td>E</td> <td>F</td> <td>G</td><td>H</td> </tr> </table>
| A | B | C | D |
| E | F | G | H |
İşte size bir başka tablo
<table border=10 bordercolorlight="#00ffff" bordercolordark="#0000ff"> <tr><th>Halkbank</th><th>Yapı Kredi</th><th>İş Bankası</th> <tr><td>Kredi</td><td>Kambiyo</td><td>Mevduat</td> </table>
| Halkbank | Yapı Kredi | İş Bankası |
|---|---|---|
| Kredi | Kambiyo | Mevduat |
Rowspan Nasıl Kullanılır :
<table border=10 bordercolorlight="YELLOW" bordercolordark="RED"> <tr> <td rowspan=4>Kredi<br>Mevduat<br>Repo<br>Hazine Bonosu</td> </tr> <tr> <td>Halkbank</td> <td>Yapı Kredi</td> <td>İş Bankası</td> </tr> <tr> <td>Akbank</td> <td>Garanti</td> <td>Pamukbank</td> </tr> <tr> <td>Vakıfbank</td> <td>Emlakbank</td> <td>Ziraat</td> </tr> </table>
| Kredi Mevduat Repo Hazine Bonosu |
||
| Halkbank | Yapı Kredi | İş Bankası |
| Akbank | Garanti | Pamukbank |
| Vakıfbank | Emlakbank | Ziraat |
Colspan Kullanımı ve Diğer Unsurlar :
<table border=10 Height=400 Vidth=580 CELLPADDING="1" CELLSPACING="25" bordercolorlight="YELLOW" bordercolordark="BLUE"> <tr> <td COLSPAN=3>BANKALAR</td> </tr> <tr> <td align=center bgcolor="Red">Halkbank</td> <td align=left>Yapı Kredi</td> <td align=right>İş Bankası</td> </tr> <tr> <td valign=top>Akbank</td> <td valign=middle>Garanti Bankası</td> <td valign=bottom>Pamukbank</td> </tr> <tr> <td>Vakıfbank</td> <td>Emlakbank</td> <td>Ziraat Bankası</td> </tr> </table>
| BANKALAR | ||
| Halkbank | Yapı Kredi | İş Bankası |
| Akbank | Garanti Bankası | Pamukbank |
| Vakıfbank | Emlakbank | Ziraat Bankası |
1 - ALTI ÇİZGİLİ LİNK (Benim bir başka sayfaya)
<a href="/id/ismaildegirmenci/Aboutme.html">About Me</a>
Yukarıdaki Link sayfanızda aşağıdaki şekilde görünür.
2 - ALTI ÇİZGİSİZ LİNK
<a href="/id/ismaildegirmenci/Aboutme.html" STYLE="text-decoration: none">About Me</a>
Böyle görünür.
3 - ALTI ÇİZGİLİ VE MOUSE ÜZERİNE GİDİNCE RENGİ DEĞİŞEN LİNK
<a href="/id/ismaildegirmenci/Aboutme.html" onmouseover="this.style.color='blue'" onmouseout="this.style.color='yellow'">About Me</a>
Böyle görünür. Mouse'un okunu üzerine getirin.
Aynı şekilde başka bir Web Sitesi için Link aşağıdaki oluşturulur.
<a href="http://www.halkbank.com.tr" onmouseover="this.style.color='blue'" onmouseout="this.style.color='red'"> HALKBANK- Türkiye Halk Bankası A.Ş.</a>
Böyle görünür. Mouse'un okunu üzerine getirin.
HALKBANK- Türkiye Halk Bankası A.Ş.
4 - LİNKLİ RESİM
<A HREF="http://www.halkbank.com.tr"><IMG SRC="/id/ismaildegirmenci/images/bina.gif" WIDTH="148" HEIGHT="131" BORDER=0></A>
Bu komutu yazdığınızda, aşağıdaki bölümde göreceğiniz üzere resmin üzerine tıklandığında Halkbank'ın Web Sitesi açılacaktır.
Sayfaya resim eklemek için <img src="Resim.Gif"> tagı kullanılır. Başlıca resim formatları Gif, Jpeg, Bmp ve Tif'tir. Bmp Netscape'te görünmez. Gif ya da Jpeg kullanmalısınız. Jpeg sıkıştırılmış olduğu için Gif'e göre daha az yer kaplar ve daha kısa sürede açılır.Gif kullanırken resmi "interlaced" haline getirirseniz, resim birden açılır, ardından da yükleme sürdükçe kademeli olarak kalitesi artar. Dolayısıyla bu tür Gif resimleri çabuk açılıyormuş hissi verir. Aşağıda örnek resim linkleri görüyorsunuz.
<A HREF="http://www.halkbank.com.tr"><IMG SRC="/id/ismaildegirmenci/images/bina.gif" WIDTH="148" HEIGHT="131" ALT="HALKBANK'IN YENİ GENEL MÜDÜRLÜK BİNASINI GÖRÜYORSUNUZ.!" BORDER=0></A>
Yukarıdaki resim komutu aşağıdaki şekilde görünecektir.
"ALT" Mouse'un okunu resmin üzerine getirdiğinizde "ALT" tagıyla birlikte belirttiğimiz açıklamayı göreceksiniz. Ayrıca resme tıkladığınızda Halkbank'ın Web Sitesi açılacaktır.
"WIDTH" tagı resmin genişliğini belirtir.
"HEIGHT" tagı ise resmin yüksekliğini belirtir.
"BORDER" resmin piksel cinsinden çerçeve kalınlığını belirtir. Çerçeve istemiyorsanız "0" değerini vermelisiniz.
