kolay web dersleri html..

3333

Emektar
27 Ara 2005
3,212
45
Little Town.
- HTML -


Web sayfası hazırlamak çok zor bir iş değil...Yazdığınız bir yazıyı* o yazıyla ilgili resimler görünebilecek* varsa sesleri duyulabilecek biçimde başkalarının izlemesini sağlayabilirsiniz.

Ama başka bilgisayarların bunu anlayıp* sizin yaptığınız gibi gösterebilmeleri için* ortak bir dil kullanmaları gerekir. Bu dile html denir.

Browser'lar (yani bilgisayardaki bu işe yarayan programlar) ingilizce olarak yazılmak zorunda olunan bu komutlara bakıp* neyi nasıl göstereceğini anlar.

HTML dili kullanarak websayfası hazırlamak için özel bir editöre gerek yoktur. Notepad kullanarak sayfalarınızı hazırlayabilirsiniz.

Yazı yazmanıza yarayacak bir program (Not Defteri) nasıl açılır* nasıl kaydedilir biliyorsunuz...

Biraz zor gelebilecek olan şey ise* ingilizce olan bu komutları doğru yazmak olabilir. Bir şey çalışmıyorsa* önce ingilizcesini doğru yazdım mı acaba diye kortrol etmeniz iyi olur. Sonra diğer olasılıkları kontrol edersiniz.


<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* **** 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
notdefteri.gif


Ö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
smile.gif

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

01-np.gif


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
smile.gif
) 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...

02-np.gif


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

02-np.gif


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.


Ş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.

<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 bu sayfaya bakabilirsiniz. Renklerle ilgili ilginizi çekebilecek ayrıntılar için de buraya bir ara göz atın.



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.


Renk Adı Hexadecimal Kodu
red FF0000
yellow FFFF00
lime 00FF00
cyan 00FFFF
blue 0000FF
magenta FF00FF
white FFFFFF
whitesmoke F5F5F5
gainsboro DCDCDC
lightgrey D3D3D3
silver C0C0C0
darkgray A9A9A9
gray 808080
dimgray 696969
black 000000
darkslategray 2F4F4F
slategray 708090
lightslategray 778899
steelblue 4682B4
royalblue 4169E1
cornflowerblue 6495ED
lightsteelblue B0C4DE
mediumslateblue 7B68EE
slateblue 6A5ACD
darkslateblue 483D8B
midnightblue 191970
navy 000080
darkblue 00008B
mediumblue 0000CD
dodgerblue 1E90FF
deepskyblue 00BFFF
lightskyblue 87CEFA
skyblue 87CEEB
lightblue ADD8E6
powderblue B0E0E6
azure F0FFFF
lightcyan E0FFFF
paleturquoise AFEEEE
mediumturquoise 48D1CC
lightseagreen 20B2AA
darkcyan 008B8B
teal 008080
cadetblue 5F9EA0
darkturquoise 00CED1
aqua 00FFFF
turquoise 40E0D0
aquamarine 7FFFD4
mediumaquamarine 66CDAA
darkseagreen 8FBC8F
mediumseagreen 3CB371
seagreen 2E8B57
darkgreen 006400
green 008000
forestgreen 228B22
limegreen 32CD32
lime 00FF00
chartreuse 7FFF00
lawngreen 7CFC00
greenyellow ADFF2F
palegreen 98FB98
lightgreen 90EE90
springgreen 00FF7F
mediumspringgreen 00FA9A
darkolivegreen 556B2F
olivedrab 6B8E23
olive 808000
darkkhaki BDB76B
darkgoldenrod B8860B
goldenrod DAA520
gold FFD700
khaki F0E68C
palegoldenrod EEE8AA
blanchedalmond FFEBCD
moccasin FFE4B5
wheat F5DEB3
navajowhite FFDEAD
burlywood DEB887
tan D2B48C
rosybrown BC8F8F
sienna A0522D
saddlebrown 8B4513
chocolate D2691E
peru CD853F
sandybrown F4A460
darkred 8B0000
maroon 800000
brown A52A2A
firebrick B22222
indianred CD5C5C
lightcoral F08080
salmon FA8072
darksalmon E9967A
lightsalmon FFA07A
coral FF7F50
tomato FF6347
darkorange FF8C00
orange FFA500
orangered FF4500
crimson DC143C
red FF0000
deeppink FF1493
fuchsia FF00FF
hotpink FF69B4
lightpink FFB6C1
pink FFC0CB
palevioletred DB7093
mediumvioletred C71585
purple 800080
darkmagenta 8B008B
mediumpurple 9370DB
blueviolet 8A2BE2
indigo 4B0082
darkviolet 9400D3
darkorchid 9932CC
mediumorchid BA55D3
orchid DA70D6
violet EE82EE
plum DDA0DD
thistle D8BFD8
lavender E6E6FA
ghostwhite F8F8FF
aliceblue F0F8FF
mintcream F5FFFA
honeydew F0FFF0
lightgoldenrodyellow FAFAD2
lemonchiffon FFFACD
cornsilk FFF8DC
lightyellow FFFFE0
ivory FFFFF0
floralwhite FFFAF0
linen FAF0E6
oldlace FDF5E6
antiquewhite FAEBD7
bisque FFE4C4
peachpuff FFDAB9
papayawhip FFEFD5
seashell FFF5EE
lavenderblush FFF0F5
mistyrose FFE4E1
snow FFFAFA
 

3333

Emektar
27 Ara 2005
3,212
45
Little Town.
Yazıyı istediğimiz yere yerleştirmek
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.

Web sayfanıza Resim eklemek
Sayfalarımızın daha güzel görünmesi için grafiklere ihtiyacımız vardır. Bu grafiklere biz resim diyelim
smile.gif
Mesela buttonlar yaptık bunları nasıl yerleştireceğiz? Gelin şimdi bunu öğrenelim...

Resimleri sayfamıza yerleştirmeye yarayan etiketimiz img src="resmin adı" 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.



ornek.gif


Ortaya ya da sağa hizalanması isteseydik* aşağıdaki kodları yazmamız gerekecekti.


Resmin ortaya hizalanması

<img src="cicek.jpg align="center">

ornek.gif


Resmin sağa hizalanması

<img src="cicek.jpg" align="right">

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" width=230 height=252>

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" width=230 height=252 alt="DayDay web sitene hoşgeldin

misra.gif

Mısra'nın resminin üzerine gelin bakalım

Şimdi bir hatırlatma... Resimlerimiz ile .htm dosyalarımız aynı klasörde olmalı. Yoksa resimlerimiz gözükmez. Onun yerine bir çarpı işareti görmekte pek hoş olmaz...



Tablolar
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" >
<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>


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>



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

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




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>


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

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:
(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
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:ö[email protected]örnek.com ">
ö[email protected]örnek.com </a>

ö[email protected]örnek.com​



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.. (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.
 

3333

Emektar
27 Ara 2005
3,212
45
Little Town.
kolay web dersleri

Web sitemi nasıl yüklerim?

Web sitenizi yükleyin (Upload)

Yaptığınız çalışmaları web de yayınlamak (yani upload etmek) sayfaları yapmak kadar kolay bir iştir... Yaptığınız sayfaların başkaları tarafından görünmesi için herkese açık bir bilgisayara (server) yüklememiz gerekir.
Sayfalarınızı Windows' un Web yayım sihirbazı ile yükleyebilirsiniz..


Windows Web Yayım sihirbazı ile dosyalarımızı web de yayınlayalım:

Web sitenizi hazırlarken düzenli çalışmıştınız değil mi? Yani konularınıza uygun farklı klasörler oluşturup* resimleri bunların içine koydunuz. Ya da çok büyük bir site değilse bütün resim dosyalarını resim isimli bir klasörde topladınız...
Böyle yaparsanız* hem aradığınız resimlerin nerede olduğunu bulmanız kolay olur* hem de aynı isimdeki resimlerin birbirini silmesini önlersiniz.



Dosyalar hazır oluuuun!

wys1.gif


Web Yayım sihirbazını açıyoruz: ( C: Program Files/Web yayımı )
Önce karşımıza bazı sorular çıkıyor ileriyi tıklayın.

wys2.gif


Daha sonra sizin sayfalarınız olduğu klasörü bulmanız lazım..
Bunu Gözat düğmesine basarak yapabilirsiniz.. İleriyi tıklayın..

wys3.gif


Web Sunucusu seçin sayfası gelecek.. Buradan Yeni düğmesine tıklayın.
Açıklayıcı bir ad yazın (mesela site gibi..) İleriyi tıklayın.

wys_ek2.gif


Daha sonra gelecek sayfada yükleme türünüzü seçin (Mesela FTP) ve buna göre
adresinizi yazın (mesela ftp. www.geocities.com/siteadi
("siteadi" yerine kendi sitenizin ismini yazın!)
Şimdi yüklemeye başlıyabilirsiniz.. Yüklerken de Kullanıcı adı ve prolanızı yazarsınız..
Her defasında bu işlem tekrar edilir.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.