HTML Dersleri

**UykuCu** · 26 Haziran 2010, 16:56

<html>
<head>
<title>Burada Explorer başlığında görünecek yazı yer alır</title>
</head>
<body>
Sitenizde olması gereken herşey burada yeralır
</body>
</html>

--

Şimdi de Kodların Ne Anlma Geldiğini İnceleyelim

<HTML> </HTML>

Web sayfasında kodlar <html> kodu ile başlar </html> kodu ile biter. Diğer tüm kodlar bu iki kod arasında yer alır.

<HEAD> </HEAD>

<head> kodu ile başlar, </head> kodu ile biter. Sitenin adının yer aldığı Title'lın, Meta Tag denilen arama motorlarında bulunmanızı kolaylaştıran yazıların yazıldığı yerdir.

<TITLE> </TITLE>

<title> kodu ile başlar, </title> kodu ile biter. Her sitenin bir adı olması gerekir. Örneğin;
<title> PcTeknikZone </title>
Bu isim insanların sitenizi bulmasında yardımcı olur. Çünkü sitenizi ararken ismiyle ararlar...
(Ayrıca şunu belirtmekte fayda görüyorum ki; title kodu içine yazdıklarınız web sayfası tarayıcınızın başlığı olarak gözükür. Örneğin internet explorer da en üstte başlık kısmında yer alan yazı yani "::PC TekniK ZonE Forum ::" gibi..

<BODY> </BODY>

<body> kodu ile başlar, </body> kodu ile biter. Burası web sayfanızda olmasını istediğiniz yazı ve resimlerin bulunduğu bölümdür.

**UykuCu** · 26 Haziran 2010, 16:56

Şimdi bir deneme yapalım...

Bu kodları deneyebileceğimiz en kolay yer NOT DEFTERİdir. Şimdi;

Programlar>Donatılar>Not defteri ni açın ve aşağıdaki örneği yazın.

<html>
<head>
<title> ilk sayfam </title>
</head>
<body> HTML kodlarını öğreniyorum. </body>
</html>

ipucu: bu kodlar arasında tek boşluktan fazlasını space yada enter tusları ile yapamazsınız. Bunun için kodlar kullanılır. Bu kodları şimdilik kafanızın karışmaması için kullanmayacağız.

Bu dökümanı; ulaşımda kolaylık sağlaması için, masaüstüne yeni bir klasör açarak index ismiyle kaydedin ve kapatın. Tekrar bu dökümanı açın. Hiçbir değişiklik olmadığını göreceksiniz. Çünkü henüz bu dökümanı htm ye çevirmedik. Bu işlemi gerçekleştirmek için Dosya menüsünden farklı kaydet seçeneğini tıklayın ve index.htm yada index.html ismiyle aynı klasöre kaydedin. Şimdi de yeni kaydettiğiniz sayfayı açarak gözlem yapın. Artık bir web sayfası görünümünde olduğunu fark edeceksiniz.

Yazi Tipi, Rengi Ve Büyüklüğü İçin Ayarlamalar

--------------------------------------------------------------------------------

<FONT> </FONT>

Sayfada yazıların yazıldığı kodlar <font> kodu ile başlar, </font> kodu ile biter. Bu kodların içinde kullanılan komutlar şunlardır:
SIZE : Yazının büyüklük ayarlaması için kullanılan komuttur.
FACE : Yazı tipinin ayarlanması için kullanılan komuttur.
COLOR : Yazının renk ayarlaması için kullanılan komuttur.

Bir denem ile bunları kavrayalım:

<html>
<head>
<title> ilk sayfam </title>
</head>
<body>
<font size=”4” face=”verdana” color=”blue”> HTML kodlarını öğreniyorum. </font>
</body>
</html>

Görüldüğü gibi komutlar; “<font “ dan hemen sonra, yani “<font” kodunu “ >” ile tamamlamadan önce yazılıyor. Yapmak istediğimiz ayarlar çift tırnak yani “ “ arasında yazılıyor ve komuta = işareti ile atanıyor. Ayarlamalar bittikten sonra > işaretimizi yazabiliriz. Bu işlemden sonra yazmak istediğimiz yazıyı yazıp, </font> komutu ile kapatmalıyız. Renk ayarlarında rengin ismini yazabileceğiniz gibi hexadecimal kodunu yazarak ta daha ince ayarlamaları yapabilirsiniz.

**UykuCu** · 26 Haziran 2010, 16:56

Satırbaşı ve Paragraf Ayarları

--------------------------------------------------------------------------------

Satırbaşı 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. Bu komutu "/" işareti ile kapatmak zorunlu değildir.

paragraf yapmak

<p>

Paragraf yapmak için kullanılır. Paragraf, Hem satırbaşı hem de bir satır boşluk olması demektir. Bu komutu "/" işareti ile kapatmak zorunlu değildir.

Yazının sola dayalı olması için:
<p>Yazınızı buraya yazacaksınız</p>

Yazının ortada olması için:
<p align=center>Yazınızı buraya yazacaksınız</p>

Yazının sağa dayalı olması için:
<p align=right>Yazınızı buraya yazacaksınız</p>

Yazı Stili Ayarları

--------------------------------------------------------------------------------

Kalın (Bold) yazı

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

Eğik (İtalik) yazı

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

Altı çizgili (underline) yazı

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

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

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

**UykuCu** · 26 Haziran 2010, 16:57

Sayfaya resim eklemek

--------------------------------------------------------------------------------

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:

<html>
<head>
<title>Sayfada Resim </title>
</head>
<body>
<img src="cicek.jpg">
</body>
</html>

Resmin ortaya hizalanması

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

Resmin sağa hizalanması

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

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="web siteme hoş geldiniz ">

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

**UykuCu** · 26 Haziran 2010, 16:57

Bağlantı (Link)

--------------------------------------------------------------------------------

sayfanıza link koymak için şu kod dizimini kullanırsınız;

<a href="http://web_adresini_buraya_yazın">Bu yazı sayfada görünür</a>
yukarıda görmüş olduğunuz gibi başka bir web sayfasına yapacagınız bağlantılarda bu kod dizimi kullanılır. Başka bir sayfaya bağlantı yapmak istediğinizi web tarayıcınız "http://" kodundan anlar. Örneğin;

<a href="http://www.**********.com">deneme bağlantısı PCTeknikZone</a>
bu kod diziminin sayfanızdaki görüntüsü

deneme bağlantısı PCTeknikZone

şeklindedir.Eğer kendi PCnizden bir sayfaya link vermek isteseniz;

<a href="Pcnizdeki_sayfanın_tam_adresi\sayfa_ismi.htm l">Sayfanızda_görünecek_Link_Adı</a>

şimdiye kadar anlattığım bağlantılar hep sizin yapmış olduğunuz sayfa üzerine çağırdığınız sayfayı açar. eğer linki tıkladığınızda yeni bir sayfa olarak gelmesini isiyorsanız target kodunu kullanırsınız.. örneğin;

<a href="http://www.**********.com" target="_blank"> PCTeknikZone sayfasını açar </a>

Mail linki verme:

<a href="mailto:e-mail_adresini_buraya_yazın">e-mail gönder</a>

Linkin alt çizgisini yoketme:

style="text-decoration: none"
hemen örnek verelim;

<a href="http://www.**********.com" style="text-decoration: none"> pcteknikzone </a>

**UykuCu** · 26 Haziran 2010, 16:57

Bağlantı renklerini belirleme

--------------------------------------------------------------------------------

bgcolor: Arka plan rengi
text: Sayfa içindeki yazıların font color ile değişmediği sürece rengi
link: bir süre hiç ziyaret etmediğimiz bağlantıların rengi
vlink: ziyaret bağlantıların rengi
alink: bir bağlantıya tıkladığımızda bağlantının rengi veya mouse un düğmesini uzunca basılı tutunca bağlantının rengi

Bu belirttiğim özellikler body kısmında tanımlanır.örneğin;

<body bgcolor="#0000a0" text="#ffffff" link="#ffff00" vlink="#808000" alink="#ff0000">

Üzerine gidince ve ayrılınca renk değiştirmesini bir örnekle açıklayalım:

<a href="http://www.**********.com" onmouseover="this.style.color='blue'" onmouseout="this.style.color='red'"> Mugi </a>

tabloya örnek

--------------------------------------------------------------------------------

şimdi bir örnek yapalım, daha iyi anlayacaksınız.

<table>
<tr>
<td>ilk satırın ilk hücresi</td>
<td>ilk satırın ikinci hücresi</td>
<td>ilk satırınüçüncü hücresi</td>
</tr>
<tr>
<td>ikinci satırın ilk hücresi</td>
<td>ikinci satırın ikinci hücresi</td>
<td>iikinci satırınüçüncü hücresi</td>
</tr>
<tr>
<td>üçüncü satırın ilk hücresi</td>
<td>üçüncü satırın ikinci hücresi</td>
<td>üçüncü satırınüçüncü hücresi</td>
</tr>
</table>

**UykuCu** · 26 Haziran 2010, 16:57

hücre ayarları

--------------------------------------------------------------------------------

align: içeriği sola,sağa,ortaya yerleştirme.
valign: içeriği alta, üste, ortaya yerleştirme.

<td valign=top> içeriği üstte gösterir
<td valign=bottom> içeriği altta gösterir
<td valign=middle> içeriği ortada gösterir

<td align=left> içeriği solda gösterir
<td align=rigt> içeriği sağda gösterir
<td align=center> içeriği ortada gösterir
table tanımında kullanılan parametreler

--------------------------------------------------------------------------------

align: tabloyu sola (left), sağa (right), ortaya (center) yerleştirme.
width: tablonun genişliğini belirler.
height: tablonun yüksekliğini belirler.
bordercolor: çizgilerin rengini belirler.
bgcolor: tablonun zemin rengini belirler.
cellspacing: hücrelerin kendi aralarındaki ve dış çizgi arasındaki boşluk.
cellpadding: hücrenin içindeki yazı ile hücre çizgisi arasındaki boşluk.
border:tablonun çizgi kalınlığını belirler. kalınlığı 0 olarak belirlerseniz tablo çizgisi yokolur.

örnek:

<table border=4 align=center width=450 height=150 cellspacing=20 cellpadding=0 bordercolor=blue bgcolor=red>
.
.
.
.
</table>

table başlıkları

--------------------------------------------------------------------------------

<thead> </thead> : table'ın 1. başlığı
<caption> </caption> : table'ın 2. başlığı

Kolon ve Satır Birleştirme

--------------------------------------------------------------------------------

Rowspan: Satır birleştirmek için kullanılır (her satıra ait sadece 1 hücreyi yani bir başka deyişle alt alta hücreleri birleştirir)
Colspan: Sütun birleştirmek için kullanılır (yanyana hücreleri birleştirir)

** bu kodları kullandığınızda değerleri ne kadar verirseniz okadar td atlamak zorundasınız. Yani o değer kadar td komutunu yazmamanız gerekir. Şöyle ki; td atlamazsanız tablonuz (çigileri varsa) düzensiz görünür.

Örnek:

<table border=3>
<tr>
<td rowspan=2>&nbsp
</td>
<td >&nbsp
</td>
<td >&nbsp
</td>
<td >&nbsp
</td>
</tr>
<tr>
<td colspan=2>&nbsp
</td>
<td >&nbsp
</td>
</tr>
</table>

**UykuCu** · 26 Haziran 2010, 16:58

Çerçeveler (frame'ler)

--------------------------------------------------------------------------------

Çerçeveler sayfamızda bazı sabit bölümler ve istediğimiz alanın değiştiririlmesinde kullanılır. asıl amaç sayfanızda dolaşırken cpu kullanımını azaltmaktır ama görünümün düzen içermesi içinde kullanılır. <frameset> kodu ile başlar, </frameset> kodu ile son bulur. Bu iki kod genel çerçeveyi belirler. Bu kodların arasında kullanılan başka kodlar da vardır.

rows:altalta oluşturulacak sayfa sayısını belirtir.

cols: yanyana oluşturulacak sayfa sayısını belirtir.

src: Oluşturulmuş bir sayfayı belirtilen çerçeve içine çağırır.

<Frame>: ilgili frameset ayarlarını bu kodla yaparız. yani çerçeveye sayfa eklemek, çerçevelere bölmek gibi..

<noframes> </noframes>: çerçeveleri tanımayan tarayıcılarda ekranın boş gözükmemesi için bu kodla yedek bir sayfa bağlantısı kurulur.

scrolling=yes: ilgili çerçevede scrollbar kullanımını etkinleştirir.

scrılling=no: ilgili çerçevede scrollbar kullanımını kapatır.

scrılling=auto: ilgili çerçevede scrollbar kullanımı default ayarındadır.

name: çerçeve ismi belirler.

örnek:

<html>
<head>
<title> deneme sayfası </title>
</head>
<frameset cols="100,*,100"> sayfayı solda 100pxl sağda 100pxl geriye kalan pxl'leri orta bölümde olacak şekilde kolonlara böldük
<frame name="soldakisayfa" scrolling=no src="sol.htm"> soldaki bölüm tanımlandı
kolonla ayırdığımız çerçevelerin orta bölümü yapılıyor
<frameset rows="150,*"> sayfayı üstte 150pxl geriye kalan pxl'leri orta bölümde olacak şekilde satır mantığıyla böldük
<frame name="üstsayfa" scrolling=no src="üst.htm"> üstteki bölüm tanımlandı
<frame name="altsayfa" scrolling=yes src="alt.htm"> alttaki bölüm tanımlandı
</frameset> kolonlara ayırdığımız sayfanın orta bölümü bitti
<frame name="sağdakisayfa" scrolling=no src="sag.htm"> sağdaki bölüm tanımlandı
</frameset> kolonlara ayırdığımız sayfanın sağ bölümü bitti
çerçeveleri tanımayan tarayıcılar için bu kısmın yazılması gerekir.
<noframes>
<a href="baglantisayfasi.htm"> </a>çerçeveleri tanımayan bir tarayıcıda direkt olarak ekrana bağlantisayfasi.htm gelir.
</noframes>
</html>

bu örnekte görüldüğü gibi cols'ta veya Rows'ta ne kadar bölüm tanımlarsanız o kadar <frame mane=... src=.. > kullanmalısınız. Şunuda belirteyim ki; önce cols kullanmak şart değildir. sayfanızın düzeninin nasıl olmasını istiyorsanız ona göre cols yada rows başa gelir. bölmek istediğiniz kısımlarda bölme işlemini yaparsınız. yukarıdaki örnekte net bir şekilde görebilirsiniz.

Ayrıca benim tanımladığım bölümlerde pxl olarak kullanulan (150 yada 100 gibi) sayıları %30,%20,%80 şeklinde yüzde kavramıyla da tanımlayabilirsiniz. örnekte görmüş olduğunuz yıldız ise geriye kalan bölüm anlamındadır. tarayıcınız bunu bu şekilde anlar.

**hacon** · 01 Mayıs 2012, 01:12

güzel bir paylasim kardesim.

Merhaba Ziyaretçi Düşlerforum'a hoşgeldin !

Konu: HTML Dersleri

Seçenekler

Görüntü

HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

---> HTML Dersleri

Sistem Bilgileri

Uyarı