Html Dersleri...
Html Ders 1
1)Html
Html’ye Giriş
Html web sayfası tasarım dilidir.İngilizce açılmış şekli: Hyper Text Markup Language (yani Hiper Metin Kodlama Dili). Bir kaç günlük çalışmayla iyi bir web tasarımcısı olabileceksiniz.
Html kodlarıyla web sayfaları yapabilmek için özel bir tasarım programına gerek yok.başlat-tüm programlar-donatılar-wordpad yada not defterini açın.Ve başlayalım.
Öncelikle bir web sayfası <html> kodu ile başlar ve </html> kodu ile biter
Kod:
<html>
Merhaba
</html>
Şimdi bunu kaydetmemiz gerekio.Dosya-farklı kaydet seçeneğinden herhangi bir ad yazın ve sonu .html olarak bitsin.Örneğin ilk denemem.html.Ayrıca alttaki seçenekte bulunan Metin Belgeleri(*.txt) seçeneğini Tüm Dosyalar olarak değiştirin.
Tabiki bu çok basit bir uygulamaydı şimdi geçelim geliştirilmiş sayfa uygulamamıza.İşte gerçek iskeletimiz şu:
Kod:
<html>
<head>
<title>Html Öğreniom</title>
</head>
<body>
Merhaba
</body>
</html>
Şimdi kaydedin.Ve yaptığınız sayfanızı açın.Dikkatinizi çeken bişe oldu sanırım.Sayfamızın en üst kısmında Html Öğreniom yazıo.<title>…</title> kodu sayfamızın en üstünde bulunan simge kutucuğuna sayfayı tanıtmak için yazılır.Ayrıca arama motorlarından sayfanıza da bu şekilde ulaşılır!Şimdi bu iskeletdeki diğer kodların ne işe yaradığını görelim:
<html>…</html> HTML kodlarının tamamı bu iki kodun arasına yazılır.
<title>…</title> Web sayfasının en üstünde ve Windows çubuğundaki simge kutucuğunda, kullanıcıya sayfayı tanıtmak için kullanılan başlık yazısı bu iki komut arasına yazılır.
<head>…</head> <title> komutundan başka bu kısma genelde JavaScript (veya VBScript) kodlarıyla oluşturulan fonksiyonlar yazılır. (Bunları ileriki derslerde göreceğiz.
<body>…</body> Web sayfasında görmek istediğimiz yapı buraya (gövdeye) yazılır. Örneğin görünmesi istenen metin, resim vb. araçlar için gerekli HTML kodları buraya girilir.
Bu iskeleti öğrenmek mecburiyetindeyiz.Çünkü web sayfalarını yaparken bu iskelet bizim yegane yardımcımız olacak.
Artık yazı yazmaya,paragraf ve satır oluşturmaya geçelim.
<p>…</p> Kodu bizim paragraf yapmamızı sağlar.Örnek:
Kod:
<html>
<head>
<title>İlk denemem</title>
</head>
<body>
<p>Merhaba.Bu benim ilk web sayfası denem!!</p>
</body>
</html>
Artık nasıl kaydedileceğini söylememe gerek yok sanırım.Bu arada tekrar tekrar not defterini açıp kodları yazmamıza gerek yok.Tüm bu değişiklikleri ilk önce yaptığımız sayfa üzerinden de yapabiliriz.yaptığımız sayfaya sağ tıklayalım,birlikte aç’a basalım,notepad yada not defterini tıklayalım.İşte kodlar önümüzde sadece öğrendiklerimizi eklicez.Sonra kaydet seçeneğine tıklıcaz.Sayfamızı tekrar açtığımızda değişikler kendini belli edecektir.
Şimdi de satır başı yapalım.Bunun içinde <br> komutunu kullanıcaz.Sanırım ilginizi çeken bişe oldu.Sadece <br> dedim.Bazı komutlarda "</>" kullanılmaz.<br> komutunda da aynı şekilde. Şimdi nasıl kullanacağımızı görelim:
Kod:
<html>
<head>
<title>İlk denemem</title>
</head>
<body>
<p>Merhaba bu benim ilk web denemem!</p>
<br>Evet bu sefer dee satır başı yaptım...
Ya da böle de kullanabiliriz..</br>
</body>
</html>
Şimdilik bu kadar yeter.Devam edilecektir…
03.12.2011:Html Ders 2
Metin Derslerine Devam
Bir de <pre>….</pre> kodu var.Bu kod ise metnimizin yazdığımız gibi algılatmaya yarar.Bir örnekle inceleyelim:
Kod:
<html>
<head>
<title>Metnimizi Yazdığımız Gibi Algılıyo</title>
</head>
<body>
<pre>
<font color="blueviolet">
Metni hizalanmış olarak yazıcaz
Tabiki sade bu kadar değil
Renkleri de kullanalım dimi?
Ve web sayfasında da ayneen
Böle görülecek!!</font>
</pre>
</body>
</html>
Burda renk kodlarını birlikte kullandık.Ee geliştirelim biraz di mi?
Tanıtıcı Mesaj
Üzerine gelip biraz beklediğinizde bişeyler yazan metinler vardır ya işte biz de böle bişe yapıcaz.Bu yüzden yine <p> yani paragraf kodunun içine bişe eklicez.
<p title="istediğimiz bir şey yazaz buraya">buraya hessah paragrafımız</p>Bir örnekle görelim:
Kod:
<html>
<head>
<title>Tanıtıcı Mesaj Yapıyom</title>
</head>
<body>
<p title="bak bu bi şiirden alıntı">
<br><font color="red"><b>Bir Halin Var Özlüyorum</b></font>
<br><b>Bir halin var seviyorum</b>
<br><b>Küçük ellerinden daha çok</b>
<br><b>Bir halin var özlüyorum</b>
<br><b>Sıcak dudaklarında yok</b>
<br><font color="green"><b>Cahit Külebi</b></font>
</body>
</html>
Baktığınız sayfada şiirin üzerinde mous’u biraz bekletin ve açıklamayı görün!
Karakter Kodları
Web sayfalarımızda yazdığımız halde algılanamayan bazı karakterler vardır.Bunlardan bazıları şunlardır: <(küçüktür işareti),>(büyüktür işareti),
&(ampersand işareti),"(çift tırnak), (boşluk)
< (< küçüktür işareti)
> (> büyüktür işareti)
& (& ampersand işareti)
" (" çift tırnak)
(boşluk)
<br> (boş satır)
Bir örnekle açıklayalım.Mesela Html derslerini anlatıyoruz.Ama yazdığımız halde < karakteri görünmüo:
Kod:
<html>
<head>
<title>Karakter Kodlarını Öğreniyoruz</title>
</head>
<body>
<p><font color="red">Html Dersleri 1)</font></p>
<br><b>Her Html sayfası " <html>" ile başlar ve "</html>" ile biter.</b>
<br>
<br>       <font color="pink">Önce bunu öğrenmeliyiz</font>
</body>
</html>
Html Ders 3
Link Eklemek
Link eklemek için (yazıya,bir programla yaptığımız butona,resme) <a> (anchor=dayanak) kodunu ve linkimizin yönlendirdiği sayfanın kaynağını belirleyen "href" (hyperlink reference)’i kulanırız.Bir örnekle işleyelim.
HTML-Kodu:
<html>
<head>
<title>Link Eklemek</title>
<body>
<p align="center"><font color="red" size="4" face="Comic Sans MS">
<a href="http://www.sat-elit.com/indir.zip">Burdan İndirin</a></p>
</body>
</html>
Burada görüldüğü gibi <a> kodunu ve href parametresini beraber kullanmamız gerekiyor.ayrıca verdiğimiz linkin başına ve sonuna (") işaratini eklemeliyiz.
Tablo Yapmak
Html’de tablolar <table> kodu ile başlar ve </table> kodu ile biter.Satır kodları ise <tr> ile başlar ve </tr> ile biter.Sütun kodları ise <td> ile başlar ve </td> ile biter.Aşağıdaki örnekle kavrayabiliriz sanırım.
HTML-Kodu:
<html>
<head>
<title>Basit Tablo Yapmak</title>
</head>
<body>
<p align="center"><font color="red" size="4" face="Arial">İpek Ongun'un Kitapları</font></p>
<br><table>
<tr>
<td>Yazar</td>
<td>Kitapları</td>
</tr>
<tr>
<td>İpek Ongun</td>
<td>Mektup Arkadaşları,Bir Genç Kızın GizliDefteri..</td>
</tr>
</table>
</body>
</html>
Bu örnekte sanırım nasıl yapılması gerektiğini kavradık.Bu tabii çok basit bir tablo oldu.Ama sabırsızlanmayın.Bu tabloyu neye dönüştürdüğünüze siz bile inanamayacaksınız.
Tabloyu Border Ekleyelim
Bu tip tabloya ızgara tablo deniyor."border" parametresini <table> komutuna ekliyoz o kadar.Bakın örneğe ne kolay!
HTML-Kodu:
<html>
<head>
<title>Basit Tablo Yapmak</title>
</head>
<body>
<p align="center"><font color="red" size="4" face="Arial">İpek Ongun'un Kitapları</font></p>
<br><table border="1">
<tr>
<td>Yazar</td>
<td>Kitapları</td>
</tr>
<tr>
<td>İpek Ongun</td>
<td>Mektup Arkadaşları,Bir Genç Kızın GizliDefteri..</td>
</tr>
</table>
</body>
</html>
Html Ders 4
Bir de rules parametresi var.Geçen dersimizde öğrendiğimiz frame parametresine benzer bi şe.Bu parametreden snra şu kodları kullanıyoruz:
rows :Sadece satır çizgilerini gösterir.
cols :Sadece sütun çizgilerini gösterir.
all :Tüm çizgileri gösterir.
groups: Sadece tablonun etrafındaki çizgileri gösterir.
none:Sınır çizgilerini göstermez.
Örnekle görelim;
HTML-Kodu:
<html>
<head>
<title>Tablo Sınır Çizgisi;Rules Parametresi</title>
</head>
<body>
<p align="center"><font color="red"><b>Rules Parametresi</b></font></p>
<table rules="rows">
<tr>
<td>Yazar Adı</td>
<td>Kitapları</td>
</tr>
</table>
<table rules="cols">
<tr>
<td>İpek Ongun</td>
<td>Mektup Arkadaşları,...</td>
</tr>
</table>
</body>
</html>
İsterseniz rules parametresinin kodlarını da değiştirebilirsiniz.Ben fazla uzatarak kafanızın karışmasını istemedim. Biz burada iki tane ayrı tablo yaptık.Çünkü iki tane <table> kodu kullandık.tek tablo örneği aşağıda. Şimdi yaptığımıza göz atalım.
Tablo Boyutlandırma
Evet, artık çerçevesi olan bir tablomuz var. Ama tablomuzun ve hücrelerinin boyutları pek güzel değil, HTML hücrelerin genişliğine göre ölçüler belirlemiş kendince. Bu gibi ölçüleri HTML’in insafına bırakmamalıyız. Bu nedenle <table> ve <td> kodları için width (genişlik) ve height (yükseklik) parametrelerini kullanacağız. Bu parametrelere piksel cinsinden değerler verebildiğimiz gibi, yüzde oranları da verebiliriz. Mesela "100%", "50%" vb. (İngilizcede yüzde işareti rakamların sonuna yazılır, tabi HTML’de de).Bir örnek yapalım;
HTML-Kodu:
<html>
<head>
<title>Tablo Boyutlarını Ayarlama</title>
</head>
<body>
<p align="center"><font color="red">Tablo Boyutlandırma</font></title>
<table border="1"width="90%">
<tr>
<td width="200">Yazar</td>
<td width="20%">Kitap</td>
<td>Yaşadığı Şehir</td>
</tr>
<tr>
<td>İpek Ongun</td>
<td>Bir Genç Kızın Günlüğü</td>
<td>Orası meçhul</td>
</tr>
</table>
</body>
</html>
Tablomuzun genişliği(width) sayfanın %90 bölümünü kaplayacak.Bunun nedeni ise <table> parametresine width="90%" yazmamız tabii.Devamında ise sütunların genişliğini ayarlamak kaldı.Bu yüzden de <td> parametrelerine değerler verdik.İlk sütun 200 yazdığımızdan 200 piksel ikinci sütun devamının %20 sini kaplıyo en son sütuna da değer vemedik çünkü ilk iki sütundan geri kalan da onun.Yani toplam %90 a tamamlanmış oluyo...
Html Ders 5
Hücreler Arası ve Hücre İçi Boşluklar
<table> koduna başka ayarlamalar da yapabiliriz. Örneğin cellpadding parametresiyle, hücre içindekilerle hücre çizgisi arasındaki boşluğu ayarlayabiliriz. Veya cellspacing ile hücreler arasındaki boşluğu ayarlayabilirizBir örnekle inceleyelim..
HTML-Kodu:
<html>
<head>
<title>Hücreler arası,hücre içi boşluklar</title>
</head>
<body>
<p align="center"><font color="red">Hücre arası ve hücre içi boşluklar</title>
<table border="1" cellspacing="2" cellpading="1">
<tr>
<td>Yazar adı</td>
<td>Kitapları</td>
</tr>
<tr>
<td>Muzaffer İzgü</td>
<td>Her Eve Bir Karakol,Demokrasimiz Kaç Para Eder?</td>
</tr>
</table>
</body>
</html>
Bu uygulamamızda cellspacing’e 2 değerini vererek hücreler arasıdaki boşluğu artırdık bu şekilde beana göre daha hoş görünüyo.Tabii siz 0 da yapabilirsiniz.O halde ise hücre gibi değil de çizgilerle bölünmüş gibi durur.Sizin göz zevkinize kalmış."cellpading’e 1 değerini vererek ise hücre çizgisi ile hücredeki yazılar arasındaki değeri ayarlamış olduk.
Hücre İçindeki Yazıları Hizalama
Tablodaki hücreler içinde bulunan yazıların hangi yana yaslanacağını align ve valign parametreleriyle belirleyebiliriz. Bu parametreler <table>, <tr> veya <td> kodlarına uygulanabilir. align parametresini daha önceki bölümlerden biliyoruz, hücre içindeki donatıyı (metin, resim vb.) sağa, sola veya ortaya yaslamasını sağlar. valign ise hücre içindeki donatıyı aşağı, yukarı veya ortaya (bottom, top, center) yaslamaya sağlar. Bu iki parametreyi birden uygulayarak, karma yaslamalar yapabiliriz: (solyukarı, ortaaşağı, vb.)Bi örnekle inceleyelim:
HTML-Kodu:
<html>
<head>
<title>Yazıları hizalama<title>
</head>
<body>
<p align="center"><font color="red">Yazıları Hizalama</font></p>
<table border="1" cellpading="0" cellspacing="2">
<tr valign="top">
<td width="200" align="center">Yazar</td>
<td width="20%" align="center">Kitapları</td>
</tr>
<tr valign="bottom">
<td align="right">Gülten Dayıoğlu</td>
<td align="right">Yurdumu Özledim</td>
</tr>
</table>
</body>
</html>
Yukarıda ilk satırı yukarıortaya ikinci satırı solaşağıya yasladık.
Html Ders 6
Hücre İçinin Arkaplan Rengini(bgcolor) Ve Hücrenin Arkaplan Rengini Ayarlama
Tablomuzu biçimlendirmek için bir başka kod
da bgcolor kodudur.Bu kodu kullanarak
tablomuzun arkaplan rengini değiştirebiliriz.Şimdi bir örnekle görelim.
HTML-Kodu:
<html>
<head>
<title>Hücrenin arkaplan rengini ayarlayalım</title>
<body>
<p align="center"><font color="red"><b>Tablo Hücrelerimin Arkaplanını değiştiriyorum</b></font></p>
<table border="2" cellspacing="0" cellpading="1" width="90%">
<tr>
<td width="20%" bgcolor="violet">Ad</td>
<td width="200" bgcolor="blueviolet">Soyad</td>
<td bgcolor="green">Kitap Adı</td>
</tr>
<tr>
<td bgcolor="violet">Herb</td>
<td bgcolor="blueviolet"> Cohen </td>
<td bgcolor="green">Her Konuyu Müzakere Edebilirsiniz</td>
</tr>
</table>
</body>
</html>
Çerçeve Rengi
Tabi sadece arka planı değil, çerçeve rengini de değiştirebiliriz. Bunun için bordercolor kodu kullanılır. Eğer tablo çerçevesi 3d (üç boyutlu) olmasını istiyorsak, bordercolorlight ile çerçevenin aydınlık kısmının rengini, bordercolordark ile de çerçevenin karanlık kısmının rengini belirleyebiliriz.Bir örnekle görelim.
HTML-Kodu:
<html>
<head>
<title>Çerçeve Rengi</title>
</head>
<body>
<p align="center"><font color="red"><b>Çerçeve Rengi</b></font></p>
<table cellspacing="0" cellpading="1" border="2" bordercolordark="red" bordercolorlight="yellow" >
<tr>
<td width="200">Yazar</td>
<td width="200">Kitap</td>
</tr>
<tr>
<td>Gülten Dayıoğlu</td>
Html Ders 7
Tablo Tasarımı
Birden Fazla Satır veya Sütun Kaplayan Hücreler
Bunun için 2 tane kod öğrenicez.İlki rowspan kodu.Bu kod <td> ile birlikte kullanılır.Kod ile hücrenin kaç satır kapladığını belirtiyoruz.Örnekle inceleyelim.
HTML-Kodu:
<html>
<head>
<title>Birden Fazla Satır Kaplayan Hücreler</title>
</head>
<body>
<p align="center"><font color="red"><b>Birden Fazla Satır Kaplayan Hücreler</b></font></p>
<table cellspacing="0" cellpading="0" border="1" width="90%">
<tr>
<td rowspan="2">Bu hücre 2 satır kaplıyo</td>
<td>Bu hücre 1 satır kaplıyo.</td>
</tr>
<tr>
<td>Bu hücreye de değer vermediğimden 1 satır kaplıyo</td>
</tr>
</tr>
</table>
</body>
</html>
Görüldüğü gibi ikinci satırda yalnızca bir tane kod kullandık.Bunun nedeni ilk satırdaki birinci hücrenin zaten iki satır kaplamış olmasıdır.
İkincisi ise colspan kodu.Bu kod ile de hücremiz iki sütun kaplıyo.Bu kod da tabiki <td> ile birlikte kullanılıyo.Şimdi bir örnek yapalım.
HTML-Kodu:
<html>
<head>
<title>Birden Fazla Sütun Kaplayan Hücreler</title>
</head>
<body>
<p align="center"><font color="red"><b>Birden Fazla Sütun Kaplayan Hücreler</b></font></p>
<table border="1" cellspacing="0" cellpading="2" width="90%">
<tr>
<td colspan="2">Bu hücre iki sütun kaplıyo</td>
<td>Bu hücre 1 sütun kaplıyo</td>
</tr>
<tr>
<td>Bu hücre de bir sütun kaplıo</td>
<td>Bu hücre de bir sütun kaplıo</td>
<td>Bu hücre de bir sütun kaplıo</td>
</tr>
</table>
</body>
</html>
Burda ise kodu yazdığımız bölümün hücrelerini azaltıyoruz..
Html Ders 8
Tablomuzu Artık Yerleştirelim
Bu konumuzda "sayfalarımızı nasıl düzene sokabiliriz" sorusuna cevap verebiliriz.Öğrendiğimiz tablo ekniklerini uygulamaya başlayalım.Aşağıdaki örneğe bir bakın:
HTML-Kodu:
<html>
<head>
<title>Web Yerleşimi</title>
</head>
<body>
<table border="0" cellspacing="0" cellpading="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="pink" valign="top">Bu renkli kısma genelde;logolar,linkler(sayfalar arası geçiş için),reklamlar vb konulur.</td>
<td valign="top">Bu kısma ise metinsel dökümanlar,resimelr vb konulur.</td>
</tr>
</table>
</body>
</html>
Bu tasarımın olumlu ve olumsuz yönlerini inceleyelim. Bu tasarım iki bölümden oluşuyor, ilk bölüm hiperlinklerin, logoların, yönlendiricilerin bulunacağı bölüm, diğeri ise metinlerin bulunacağı bölüm. Renkler güzel seçilmiş, uyumlu ve gözü yormuyor. İkinci bölümde metinler, resimler, anlatılar ve donatılar yer alıyor, bu nedenle beyaz rengi seçilmiş olması da artı bir puan. Ayrıca anlatı kısımı pencereye göre genişleyip, daralabiliyor, bu da olumlu. Sıra geldi olumsuz yönlerine. İlk renkli bölüm pencerenin soluna tamamen bitişik değil ve çok kötü görünüyor. Ayrıca ikinci bölümdeki yazılar ile pencere ve ilk bölüm arasında hiç boşluk yok, bu da hiç güzel görünmüyor. İlk renkli kısımda da yazılar sol tarafa yapışmış.Çözümlerine bakalım;
a)Web sayfalarında Html varsayılan değeri olarak pencere kenarlarında bir miktar boşluk bırakır.Webmaterlar ise bundan hiç hoşlanmaz bu nedenle <body> koduna leftmargin="0" ve topmargin="0" kodu atarlar.
b)Sol renkli kısımda yazıların tabloya yapışmasını engellemke amacıyla önceki derslerde anlattığım tablo içinde tablo yöntemini kullanırız.Büyük tablomuz 180 piksel değerinde.İçine de 160 piksel değerinde tabloyu ortalayarak koyabiliriz..Bu şekilde de sorun ortadan kalkmış olur.
c)Sağ taraftaki anlatı kısmını oluşturan tablonun içine üç sütunlu yeni bir tablo eklersek ve birinci sütun ile ikinci sütuna 20 piksellik genişlik atayıp, orta sütunu esnek bırakırsak (yani bir genişlik belirtmezsek), bu bölümdeki yazıların sol kısıma ve sağdaki pencere kenarına en az 20 piksellik aralık vermiş oluruz. Şimdi örnekle çözümü görelim.
HTML-Kodu:
<html>
<head>
<title>Web Tasarım</title>
</head>
<body topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0" width="160">
<tr>
<td><br>Bu renkli bölüme genellikle logolar, yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width=20> </td>
<td><br>Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
<td width=20> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Html Ders 9
Resim Yerleşimi
Önce sayfaya resim koymayı öğrenelim sonra nereye koycağımıza karar veririz.Ama dikkat sayfaya koyduğumuz resim sayfamızla aynı klasörde olmalı.Bu yüzden sitenize ait yeni bir dosya açmanızı öneririm.
Sayfaya resim yerleştirmek için <img src="dosyanınismi.dosyanın türü"> kodunu kullanırız.(Burda img=image src=searc olarak aklımızda kalabilir.)Mesela <img src="sat-elit.gif">Örnekle inceleyelim;
HTML-Kodu:
<html>
<head>
<title>resim Yerleştirme</title>
</head>
<body>
<img src="sat-elit.gif">
</body>
</html>
Burda sayfamıza bir resim yerleştirdik.
Resimlerin Boyutlarını Ayarlama
İnternetten aldıgımız ya da bize ait resimler çok büyük ya da küçük olabilirler.Bunların boyutlarını istediğimiz gibi yapalım o halde.Bunun için <img src"….">kodunun içine width="…" height="…" kodlarını eklememiz yeterli.Şimdi örneğe bakın.
HTML-Kodu:
<html>
<head>
<title>Şişko Ayıcık</title>
</head>
<body>
<img src="ayicik.gif" width="315" height="315">
</body>
</html>
Resimlere Link Koymak
Web sayfalarında bir çok kez yapılan bannerlere link konulduğunu görmüşsünüzdür.Biz de böle yapıcaz işte.Örneğe bakın..
HTML-Kodu:
<html>
<head>
<title>Bannerlere Link Koymak</title>
</head>
<body>
<a href="http://www.sat-elit.com"><img src="sat-elit.gif"></a>
</body>
</html>
Burda da yazılara link vermek için kullandığımız <a href="….">kodunu kullandık.Tek değişik tarafı kodun ortasında resim yerleştirmek için kullanılan kod olması.Yani çok kolay.
Resim Sınır Çizgisi
Biraz önce yaptığımız sayfada açıkça görülüyor.Sat-Elit bannerinin etrafında çizgi var.Bu çizgi ise hoş durmuyor.Bunu kaldırmak için ise border="0" kodunu kullanıcaz.Bir örnekle inceleyelim.
HTML-Kodu:
<html>
<head>
<title>Sınır Çizgilerini Yok Etme</title>
</head>
<body>
<img src="kalpler.gif" border="0">
</body>
Html Ders 10
Resim Dosyalarını Hizalama
<img> kodunun konumunu belirleyen parametreler aşağıda görünmektedir. Açıklamalarda alt seviye ile taban seviyenin aynı şey olmadığına dikkat edin. Resimler genellikle bu parametreler yerine genellikle görünmez tablolar kullanılarak konumlandırılır. Ama aynı satır veya paragrafları paylaşan küçük resimlerle, metinler yapacaksanız bu kodlar çok işinize yarayacaktır.
align="left" Resmi metinin sol tarafına yerleştirir.
align="right" Resmi metnin sağ tarafına yerleştirir.
align="top" Satırdaki en yüksek donatının (yazı, resim vb.) üst seviyesini hizalayacak şekilde resmi yerleştirir.
align="texttop" Satırdaki en yüksek yazının üst seviyesini hizalayacak şekilde resmi yerleştirir. (genellikle top ile aynı işlevi görür, ama her zaman değil)
align="middle" Satırın taban seviyesini, resmin orta yükseklik seviyesine getirir.
align="absmiddle" Satırın orta seviyesini, resmin orta yükseklik seviyesine getirir.
align="baselign" Satırın taban seviyesini, resmin taban seviyesine getirir.
align="bottom" baselign ile aynı işlevi görür.
align="absbottom" Resmin alt seviyesini, satırın alt seviyesine getirir.
Örnek yapalım:
HTML-Kodu:
<html>
<head>
<title>Evrenin Evrimi</title>
</head>
<body>
<b>align="left"</b><br><br>
<img src="yer.gif" align="left">Yeni galaksilerin, yıldızların ve kendi gezegenler sistemimizin oluşmasına çoğu zaman, evrenin, yıldızların ve yıldız sistemlerinin evrim süreci diye bakılır. Burada kullanılan “evrim” sözcüğü tabi ki, canlıların evrimindekinden farklı bir anlamdadır. Her iki durumda da bir “evrimleşme” vardır, ancak farklı bilimlerin çalışma alanlarına girerler. Canlıların evrimi biyolojik bilimlerin, evrenin ve evreni oluşturan birimlerin evrimi ise fiziksel bilimlerin inceleme konusudur.<br><br><br>
<b>align="right"</b><br><br>
<img src="yer.gif" align="right">Evrenin evriminin en azından beş-on milyar yıl kadar önce başladığının kanıtları tartışma götürmez derecede açıktır. En çarpıcılarından biri de, uzak galaksilerin kaçış hızlarıdır. Evrenin bir bütün olarak genişlediği, ilk kez 1920’lerin sonunda ve 1930’ların başında Amerikalı astronom Edwin Hubble tarafından uzak yıldız ve galaksilerden gelen ışığın dalga boyundaki değişmelerin incelenmesiyle ortaya çıkarıldı (Hubble, 1929; Hubble ve Humason, 1931). Geriye doğru ekstrapole ederek astronomlar, genişlemenin 10 ila 20 milyar yıl kadar önce başladığını tahmin ediyorlar.<br><br><br>
<b>align="top"</b><br><br>
<img src="yer.gif" align="top">Çok daha yoğun bir başlangıç halinden genişleme düşüncesinin gerçek olduğu, 1965’te Bell laboratuarlarındaki radyo-astronomların, ilk evrenden bugüne ulaşmış zayıf bir “radyastatik” bulmalarıyla kanıtlanmış oldu (Penzias ve Wilson, 1965). Üstelik bu zayıf radyasyonun yoğunluğu “genişleyen evren” modelinden beklenen yoğunlukla tam tamına aynıydı. Önceden yapılan tahminlerin gerçekliğini gösteren bu buluş, evrenin 100 milyar santigrad derecelik bir başlama sıcaklığındaki yoğun halinden bugünkü biçimine evrimleştiğine ilişkin bilimsel teoriye büyük bir güç katmıştır (Weinber, 1977).<br><br><br>
<b>align="texttop"</b><br><br>
<img src="yer.gif" align="texttop">Bazı elementlerin radyoaktif izotopları değişmez bir kendiliğinden bozunmayla, başka elementlerin kararlı izotoplarına dönüşürler. Buradan evrenin milyarlarca yıldır var olduğuna ilişkin bir yığın kanıt daha bulunmuştur.<br><br><br>
<b>align="middle"</b><br><br>
<img src="yer.gif" align="middle">Dünya, meteor ve ay örneklerindeki radyoaktif izotoplarla bunların kararlı bozunma ürünlerinin bağıl oranlarının incelenmesi, yaşlarının 4.5 milyar yol kadar olduğu sonucuna götürmektedir. Elde edilen bulgular, yıldızların evrimi teorisinden yola çıkılarak yapılan tahminlerle ve yaşamın, canlıların evrimi için gereken zamanla tümüyle uyuşmaktadır. Evrenin yaşının diğer bir ölçümü de uranyum izotoplarının bağıl bolluklarını inceleyerek yapılır. Yarı ömrü 700 milyon yıl olan uranyum 235 izotopunun bağıl bulunuş oranının küçüklüğü, dünyadaki Uranyum’un yaşının 7 milyar yıl olduğunu göstermektedir. Evrenin var oluşu ve evrimine ilişkin olarak ortaya koyduğumuz bu tablo nihai çözüm olmamakla birlikte, bu konuda evrenin yaşındaki gibi bir belirsizlik yoktur.<br><br><br>
<b>align="absmiddle"</b><br><br>
<img src="yer.gif" align="absmiddle">Astrofizikçiler, ayrıca galaksilerin ve birer birer yıldızların, yıldız sistemlerinin oluşumuyla ilgili olarak da inandırıcı ve tutarlı hipotezler geliştirdiler. Kendi yıldız (güneş) ve gezegenlerin bugün galaksimizin görünür bölümlerinde gözlemlediğimiz gibi, yıldızlar arası boşlukta bulunan toz ve gaz bulutlarının yoğunlaşmasıyla oluştuğu düşünülmektedir. Allende meteorundaki izotoplarla yapılan jeokimyasal incelemeler sonucunda elde edilen yeni bulgular, güneş sistemimizi oluşturan bu yoğunlaşmanın yaklaşık 4.5 milyar yıl önce, yakın bir yıldız ya da süpernova patlamasıyla başladığını gösteriyor. Pek çok ayrıntının bilinmemesine karşın, sürecin ana hatlarında bilim çevrelerinde tam bir görüş birliği vardır. <br><br><br>
<b>align="baselign"</b><br><br>
<img src="yer.gif" align="baselign">Yıldızların evrimiyse, daha nicel olarak da anlaşılmıştır. Yıldız evriminin bilgisayar simülasyonuyla, büyük yıldız yığınlarındaki yıldızların, gözlenen sıcaklık ve parlaklıkların karşılaştırılması sonucunda, bu yığınların 10 milyar yaşında olduğu anlaşılmıştır. Yaratılışçıların jeolojik belgelere ve evrime karşı çıkmalarının bir nedeni de, dünyanın çok genç, hatta birkaç bin yıllık olduğuna ilişkin inançlarıdır. Evrenin yaşının çok büyük (milyarlarca yıllık) olduğunu yadsımakla, yaratılışçılar; astronomi, astrofizik, nükleer fizik, jeoloji, jeokimya ve jeofizik bilimlerinden elde edilen sonuçlarla tümüyle çelişkiye düşmektedirler. Yaratılışçılar, dünyanın yaşının birkaç bin yıl olduğu sonucuna Tevrat’taki zamanlanmış olayların incelenmesi ve kayıtlı nesillerin sayılmasıyla ulaşmışladır (Renckens, 1969). Bu sonucu desteklemek için girişilen çabalardan biri de, dünyanın günümüzdeki magnetik
alanının dünya ile birlikte yaratılan alanın gittikçe yok olmakta olan bir kalıntısı olduğu ve dünyanın yaşının 10.000 yıldan fazla olması halinde, alanın ilk kuvvetinin mümkün olamayacak kadar büyük olması gerektiği iddiasıdır. Bu bilimsel olarak sınanabilecek bir iddiadır ve nitekim sınanmıştır da; sonuçta bu sav tümüyle çürütülmüştür. Bugünkü bilimsel bulgular, dünyanın magnetik alanının sıvı haldeki iç katmanlarının hareketinden oluştuğunu göstermektedir. Bu alan değişmekte ve kaymaktadır, ama kaymalar arasında gücü korunup, dünyanın merkezindeki dinamo etkileriyle sürekli yenilenmektedir.<br><br><br>
<b>align="bottom"</b><br><br>
<img src="yer.gif" align="bottom">Bilim adamları, dünyanın yaşını tam olarak bilemedikleri zamanlarda bile çok çok yaşlı olduğunu biliyorlardı. Bugün, dünyanın yaşını saptamakta bir düzineden fazla birbirinden bağımsız yöntem kullanılabiliyor. Bunlar farklı bozunma sistemlerine ve farklı bozunma sabitlerine dayalı yöntemlerdir. Ayrıca, çeşitli uranyum izotoplarının bağıl oranlarına dayanan yöntemler de kullanılmaktadır.<br><br><br>
<b>align="absbottom"</b><br><br>
<img src="yer.gif" align="absbottom">Bir kayanın yaşını incelerken, birçok değişik izotop sisteminden aynı sonuç elde edilirse, bilim adamları bu şekilde bulunan bir yaşa, daha büyük bir güven duyarlar. Değişik izotop sistemlerinin aynı sonuçları rastlantıyla vermeleri çok çok düşük bir olasılıktır. Sonuç olarak, şunu söylemek sanırım yeterli olacaktır: Her geçen gün artan jeokronolojik kanıtlar, dünyanın ve güneş sistemimizin yaşının 4.5 milyar yıl olduğunu göstermektedir.<br><br><br>
</body>
</html>
Anlaşılmayacak bir şey yok sanırım.
Resim konumuz burada bitti.Şimdi yeni konumuza geçelim.
Liste Yapma
Sırasız liste
İlk liste çeşidimiz sırasız liste.Bu listemizin kodu <ul>…</ul> ve arasındaki maddelerin başına da <li>….</li>kodunu ekliyoruz.Örneğe bakalım:
HTML-Kodu:
<html>
<head>
<title>Mario Vargas Llosa</title>
</head>
<body>
Mario Vargas Llosa'nın kitapları:
<ul>
<li>Kent ve Köpekler</li>
<li>Julia Teyze</li>
<li>Yüzbaşı ve Kadınlar Taburu</li>
<li>Alplerde Kaybolmak</li>
</ul>
</body>
</html>
Bu örneğimizde Vargas’ın kitaplarını ardı ardına sıraladık ve her maddenin başına siyah bir nokta işareti (disc) konuldu. Maddelerin başına başka işaretler koymak da olasıdır. Bunun için <ul> koduna type="…" parametresi tanımlanır. Bir kaç örnek vermek gerekirse: <ul type="disc">,<ul type="circle"> veya <ul type="square">.Örnekle inceleceleyelim:
HTML-Kodu:
<html>
<head>
<title>Kitaplar</title>
</head>
<body>
Mario Vargas Llosa'nın kitapları:
<ul type="disc">
<li>Kent ve Köpekler</li>
<li>Julia Teyze</li>
<li>Yüzbaşı ve Kadınlar Taburu</li>
<li>Alplerde Kaybolmak</li>
</ul>
Amin Maalouf'un kitapları:
<ul type="square">
<li>Afrikalı Leon</li>
<li>Tanios Kayası</li>
<li>Doğunun Limanları</li>
<li>Semerkant</li>
</ul>
Ursula K. Leguin'in kitapları:
<ul type="circle">
<li>Karanlığın Sol Eli</li>
<li>Mülksüzler</li>
<li>Yerdeniz Üçlemesi (aslında "dörtleme")</li>
<li>Başlama Yeri</li>
</ul>
</body>
</html>
Bazen maddelerin de alt maddeleri olabilio.Bu durumda <ul> kodunu kapatmadan tekrar <ul> kodunu yazarız.Örneğe bakın.
HTML-Kodu:
<html>
<head>
<title>Ursula K. Leguin</title>
</head>
<body>
Ursula Kroeber Leguin'in kitapları:
<ul>
<li>Karanlığın Sol Eli</li>
<li>Mülksüzler</li>
<li>Yerdeniz Üçlemesi</li>
<ul>
<li>Yerdeniz Büyücüsü</li>
<li>Atuan Mezarları</li>
<li>En Uzak Sahil</li>
<li>Tehanu</li>
</ul>
<li>Alplerde Kaybolmak</li>
</ul>
</body>
</html>
(Ama çook kolay di mi?)
Sıralı liste
Bu şekilde listeler içinse <ol>….</ol> kodunu kullanıyoruz.tabii içine yazdığımız maddeleri belirtmek için yine <li>…</li> parametresini kullanıcaz.Örnekel inceleyelim:
HTML-Kodu:
<html>
<head>
<title>Halikarnas Balıkçısı</title>
</head>
<body>
Cevat Şakir Kabaağaçlı'nın kitapları:
<ol>
<li>Mavi Sürgün</li>
<li>Aganta Burina Burinata</li>
<li>Anadolu'nun Tanrıları</li>
<li>Parmak Damgası</li>
</ol>
</body>
</html>
Bu uygulamamızda maddelerin önüne sıra numaraları koymuş olduk. İşaretlerde olduğu gibi, sıra numaralarının da çeşitleri vardır. Ve alt maddeler oluşturmak olasıdır.Örnekle inceleyelim..
HTML-Kodu:
<html>
<head>
<title>Halikarnas Balıkçısı</title>
</head>
<body>
Cevat Şakir Kabaağaçlı'nın kitapları:
<ol type="A">
<li>Mavi Sürgün</li>
<li>Aganta Burina Burinata</li>
<li>Anadolu'nun Tanrıları</li>
<li>Parmak Damgası</li>
</ol>
Cevat Şakir Kabaağaçlı'nın kitapları:
<ol type="a">
<li>Mavi Sürgün</li>
<li>Aganta Burina Burinata</li>
<li>Anadolu'nun Tanrıları</li>
<li>Parmak Damgası</li>
</ol>
Cevat Şakir Kabaağaçlı'nın kitapları:
<ol type="I">
<li>Mavi Sürgün</li>
<li>Aganta Burina Burinata</li>
<li>Anadolu'nun Tanrıları</li>
<li>Parmak Damgası</li>
</ol>
Cevat Şakir Kabaağaçlı'nın kitapları:
<ol type="i">
<li>Mavi Sürgün</li>
<li>Aganta Burina Burinata</li>
<li>Anadolu'nun Tanrıları</li>
<li>Parmak Damgası</li>
</ol>
</body>
</html>
Html Ders 11
Tanım Listesi
Elbette listenizi maddelerken önüne bir işaret veya sıra numarası koymanız şart değil. Bunun için <dl>…</dl> (definition list; tanım listesi) kodları arasında <dd>…</dd> (definition description; tanım açıklaması) ile işaretsiz ve numarasız maddeler sıralayabilirsiniz. Bu maddelerin önünde sadece boşluk olacaktır. Bu boşluk olmasını istemiyorsanız <dt>…</dt> (definition term; tanım terimi) kullanabilirsiniz. Hemen örnekle gösterelim:
HTML-Kodu:
<html>
<head>
<title>Kitaplar</title>
</head>
<body>
Yazarlar ve kitapları:
<dl>
<dt>Mario Vargas Llosa'nın kitapları:</dt>
<dd>Kent ve Köpekler</dd>
<dd>Julia Teyze</dd>
<dd>Yüzbaşı ve Kadınlar Taburu</dd>
<dd>Alplerde Kaybolmak</dd>
<dt>Amin Maalouf'un kitapları:</dt>
<dd>Afrikalı Leon</dd>
<dd>Tanios Kayası</dd>
<dd>Doğunun Limanları</dd>
<dd>Semerkant</dd>
<dt>Ursula K. Leguin'in kitapları:</dt>
<dd>Karanlığın Sol Eli</dd>
<dd>Mülksüzler</dd>
<dd>Yerdeniz Üçlemesi (aslında "dörtleme")</dd>
<dd>Başlama Yeri</dd>
</dl>
</body>
</html>
Bu uygulamada yazarların isimlerini "bold" (kalın) yazsaydık daha güzel gözükürdü herhalde. Bu listeleme tarzında da içiçe listeler ve alt maddeler oluşturulabilir.
Göstermediğim bir kaç kod daha var, onları da kısaca anlatayım. <ul>…</ul> yerine <dır>…</dır> veya <menu>…</menu> kodlarını da kullanabilirsiniz, değişen birşey olmaz.
Multimedya
Sayfalara Swf(flash) Dosyaları Eklemek
Bu amaçla <img> kodunu kullanabiliriz.Fakat ayrıca kullanılan bir kod daha var.Bu kod da <embed> kodudur.Bir örnek yapalım.
HTML-Kodu:
<html>
<head>
<title>MuLtİmEdYa</title>
</head>
<body>
<center>
Bu bir swf dosyasıdır.
<embed src="index.swf" width="100%" height="100%"></embed>
</center>
</body>
</html>
Burada görüldüğü gibi <embed> koduna src parametresini ekliyoruz
Html Ders 12
Kayan Yazılar
<marquee> kodu ile yazılarımızın kaymasını sağlayabiliriz.Bir örnekle inceleyelim:
HTML-Kodu:
<html>
<head>
<title>Multimedya</title>
</head>
<body>
<font color="red" size="4"><marquee>Paylaşıma Hoş Geldiniz</marquee></font>
</body>
</html>
Sayfada görüldüğü gibi yazımız sola doğru kayıyo..Yazıların kaymasını kontrol de edebiliriz.sağa doğru kaymasını isteyebiliriz.Bunun için kullanacağımız parametre ise direction="right" parametresidir.Örneği inceleyelim.
HTML-Kodu:
<html>
<head>
<title>Multimedya</title>
</head>
<body>
<font color="red" size="4"><marquee direction="right">paylaşıma Hoş Geldiniz</marquee></font>
</body>
</html>
Ayrıca değişik şekillerde de yazımız kayabilir.Bunun içinse "behavior" parametresini kullanırız.Tabiki 3 değişik hareket var."scrool", "slide","alternate".Bu parametreyi şöyle kullanıyoruz.<marquee behavior="scrool">.Siz istediğinizi seçebilirsiniz.Şimdi örneğe geçelim:
HTML-Kodu:
<html>
<head>
<title>Multimedya</title>
</head>
<body>
<font color="red" size="4"><marquee behavior="scrool">Merhaba Arkadaşlar Hoş Geldiniz</marquee></font>
<br><font color="red" size="4"><marquee behavior="slide">Merhaba
Html Ders 13
Form Araçları
1-Metin Kutusu:
Arkadaşlar metin kutusu oluşturmak için kullandığımız kodlar 2 tane.İkisini de aşağıda ki örnekte göstericem.İlkinde küçük,ikincisinde ise büyük metin kutusu olacak.İlkinde kullanacağımız küçük metin kutularında <input type="text"> kodunu yazıyoruz.İkincisindeki için ise <textarea rows="5" cols="20"> kodunu kullanıyoruz.Bu kodda ki rows boyunu ayarlamamızı cols ise enini ayarlamamızı sağlar.Bir örnek yapalım;
HTML-Kodu:
<html>
<head>
<title>Form Araçları</title>
</head>
<body>
<form name="Textbox:Metin Kutusu">
Adınız*
<input type="text" name="isim">
<br>Soyadınız*
<input type="text" name="soyisim">
<br><textarea cols="20" rows="5">Görüşlerinizi buraya yazın</textarea>
</form>
</body>
</html>
Büyük metin kutumuzun arkaplan rengini,yazı stilini,yazı rengini ayarlayabiliriz.
Arkaplan renginin ayarlanması için; style="background=…. " parametresini <textarea> koduna ekliyoruz.
Yazı stilininin ayarlanması için: style="font-family=…….." parametresini <textarea> koduna ekliyoruz.
Yazı rengini ayarlanması için; style="color=….." parametresini <textarea> koduna ekliyoruz.Bir örnekle inceleyelim:
HTML-Kodu:
<html>
<head>
<title>Form Araçları;Metin kutusu</title>
</head>
<body>
<form name="metin kutusu" action="mailto:kemirgen@hotmail.com" method=get>
Aşağıdaki bölümleri doldurmanız gerekir:<br><br>
Adınız*:
<input type="text" name="isim"><br>
Soyadınız*:
<input type="text" name="soyisim"><br>
E-mail**:
<input type="text" name="e-mail">
<br><textarea cols="20" rows="5" style="background:blue" style="font-family:comic sans MS" style="color:lime">görüşlerinizi buraya yazabilirsiniz:)</textarea>
</form>
</body>
</html>