HTML SİTE PRATİĞİ - BASİT SAYFALAR

Merhaba,

Sadece basit HTML kodlarıyla yapılan bu site pratiği uygulamasında,

html sayfaları arasında geçiş (menü,navigasyon) mantığını,
bir html sayfanın header , main , footer bölümlerini,
Html etiketlerinin birbirleriyle anlamlı bir şekilde beraber kulanımını anlayacağız.

Kullanılan Metin Etiketleri

H1, h2, strong, a. img,, font, p, hr, br

Kullanılan Parametreler

bgcolor. link, alink, vlink , align, size. color, width,border

Siteyi incelerdiğinizde 4 adet sayfa olduğunu göreceksiniz.

anasayfa.html
galeri.html
hakkinda.html
iletisim.html

Dikkat ederseniz 4 sayfadada üst bölüm (header) ve alt bölüm (footer) hiç değişmiyor. Değişen sadece sayfaların gövde (main) kısımları oluyor. Dolayısıyla anasayfa tasarımın hazırladıktan sonra farklı isimle kaydedip sadece gövde bölümlerini değiştirebilirsiniz.

MENÜ (HEADER - ÜST BÖLÜM)

Sayfaların en üst kısımlarında sabit şekilde bulunan menü linkleri her durumda turuncu oluyor. Bunu body etiketine yazacağımız link parametreleri ile sağlayabilriiz.

<body link="#FF9900" alink="#FF9900" vlink="#FF9900" >

Menü linklerine (a) dikkat ederseniz varsayılan yazı boyutundan büyük ve sayfaya ortalanmış şekildeler. Dolayısıyla bu 4 linki H1 etiketi içerisinde yazıp , align="center" ile ortalayabiliriz. Menüden sonra gelen çizgiyi ise , uygun parametreler ile HR ile oluşturabiliriz. Menü ile sayfa üsr çizgisi arasındaki boşluğu da etiketleri ile ayarlayabiliriz.

 <!-- MENÜ (HEADER) -->
	<br><br><br>
	<h1 align="center">
		<a href="anasayfa.html">Anasayfa</a> 
		<a href="galeri.html">Galeri</a> 
		<a href="hakkinda.html">Hakkında</a> 
		<a href="iletisim.html">İletişim </a>
	</h1>
	<hr color="#FF9900" align="center" width="1000" />

4 sayfanında header bölümü yukarıdaki gibi olur.

FOOTER (ALT BÖLÜM)

Sayfaların en alt kısımlarında sabit şekilde bulunan footer bölümüne dikkat ederseniz , bir çizgi ile telefon ve adres bilgileri bulunuyor. Yine uygun parametreler ile hr ve yazı biçimlendirme etiketleri ile bu yapıyı kolayca yapabiliriz. Footer çizgisinin gövde(main) bölümü ile arasındaki boşluğu da yine etiketleri ile ayarlayabiliriz.

<!--ALT BÖLÜM (FOOTER)-->
  <br/><br/> 
  <hr color="#FF9900" size="1" width="1000px" align="center" />
  <p align="center">
    <font size="3">
      <strong>Telefon :</strong> 0232 565 56 56 --  <strong>Mail :</strong> aaaaa@hotmail.com
    </font>
  </p>
  <p>&nbsp;</p>

4 sayfanında footer bölümü yukarıdaki gibi olur.

MAIN (GÖVDE BÖLÜMLERİ)

Sayfaların birbirinden farklı yerleri sadece gövdeleri olur.

ANASAYFA

anasayfa.html sayfasının gövdesinde "..ANASAYFA.." yazısı ve sadece bir resim bulunyor. Resmin ortalanması için P etiketi, boşluklar için etiketi kullanıyoruz.

       <!-- ANASAYFA GÖVDE (MAIN)-->
	<br/>
	<h2 align="center" >...ANASAYFA...</h2>
	<br>
	<p align="center"><img src="htmlsiteresimler/1.jpg" width="50%"   border="5"/></p>

GALERİ

galeri.html sayfasının gövdesinde "..GALERİ.." yazısı ve altında 6 resim bulunyor. Resimlerin genişiliğini 20% , kenalıklarını 5 yapıyoruz. Resimlerin ortalanmaları için P etiketi, boşluklar ve alt satır için n etiketi kullanıyoruz.

<!-- GÖVDE (MAIN)-->
  <p>&nbsp;</p>
  <h2 align="center" >...GALERİ...</h2>
  <br>
  <p align="center">
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a> 
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a> 
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a>  <br/>
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a> 
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a> 
    <a href="htmlsiteresimler/1.jpg"><img src="htmlsiteresimler/1.jpg" width="20%"  border="5"/></a> 
  </p>

HAKKINDA

hakkında.html sayfasının gövdesinde "..HAKKINDA.." yazısı , bir resim ve resmin altında bir yazı bulunuyor.. Resmin ortalanması için P etiketi, boşluklar için etiketi kullanıyoruz. Alttaki yazı için font etiketi ile size=5 ayarlıyoruz.

<!-- GÖVDE (MAIN)-->
  <p>&nbsp;</p>
  <h2 align="center" >...HAKKINDA...</h2> 
  <br>
   <p align="center">
    <img src="htmlsiteresimler/4.jpg" width="50%" border="5"/>
  <p align="center">
  <br>
  <font size="5">
    <p align="center"> Bu sitenin hakkında sayfasıdır. Buraya sitenin ait olduğu firma,kurum,kuruluş yada kişi hakkında bilgiler yazılır.</p>
  </font>

İLETİŞİM

iletişim.htlm sayfasının gövdesinde "..İLETİŞİM.." yazısı , bir resim ve resmin altında iletişim bilgileri bulunuyor.. Resmin ortalanması için P etiketi, boşluklar için etiketi kullanıyoruz. Alttaki yazı için font etiketi ile size=3 ayarlıyoruz ve strong etiketlerini kullanıyoruz.

<!-- GÖVDE (MAIN)-->
  <p>&nbsp;</p>
  <h2 align="center" >...İLETİŞİM...</h2>  
  <br>
  <p align="center">
    <img src="htmlsiteresimler/map.jpg" width="50%"  border="5"/>
  </p>
  <h3 align="center"> <br />
    <font color="#FF9900">İLETİŞİM BİLGİLERİ</font><br /><br />
    Adres:323 sk no:56 Göztepe/İZMİR<br />
    Tel:0232 565 56 56<br />
    Fax:0232 565 55 52<br />
    Mail: dddd@hotmail.com 
  </h3>

GÜNCELLENİYOR...