Merhaba sevgili SiberSahne.Com ziyaretçileri.Geçen dersimizde sizlere ” Internet Alanı ( Domain ) ” konusunu anlatmış olup genel bir kaç kavramları sizlere aktarmıştık.Ve sonunda dersimizin en keyifli bölümüne geldik.Bu konumuzda sizlerle web tasarımda temel html etiketlerini anlatacağım.Aslında konuyu sabah 10.00 çivarı eklemeyi düşünüyordum fakat sitemizin yeni tasarımını yapmamızdan dolayı biraz uzun sürdü.Gün içerisinde sitemizi ziyaret edip bu konuya ulaşamıyanlardan şahsım adına özür dilerim.Evet arkadaşlar konumuza geçiş yapıyoruz.Pür dikkat izleyiniz.Geçen hafta sizlere en son bir klasör ve index.html adında bir sayfa oluşturmanızı istemiştim.Bu gün öğrendiklerimizi lütfen oluşturduğunuz sayfada pratike dökünüz.http://www.sibersahne.com

webtasarim
Html Komut Yapısı :
Html diğer programlama dillerinden farklı olarak sadece görsel düzenleme yapmak için kullanılır.Herhangi bir metin belgesi editör programıyla ( notepad, Word … ) yazılabilir.

Yazım Kuralları :
1- Komutlar küçük ve büyük harflerle yazılabilir.
2- Komutlar türkçe karekter içermez.
3- Komutlar ” < ” ve ” > ” işaretleri arasında yazılır.Ve etiket ( tag ) adını alır.

Kullanım Biçimi <etiket>
Bir etiket <tag_adi> şeklinde başlar ve genelde </tag_adi> şeklinde biter.Etiketler iç içe yer alır.Ve en içteki etiketten başlanarak kapatılır.Bir etiket parametreler kullanılarak biçimlendirilir.Parametre adından sonra ” = ” katılır.Tırnak içerisinde parametreye atanarak değer yazılır.

Bir web sayfasında bulunması gereken zorunlu kodlar aşşağıdaki gibidir.

<html>
<head><title>Sayfa Başlığı</title>
</head>
<body> Sayfa içeriği
</body>
</html>

<Html> Etiketi ( Tagı )
Bir web sayfasında bulunması gereken ilk etikettir.Sayfanın başında açılır ve sayfanın sonunda kapatılır.

<Head> Etiketi ( Tagı )
Html belgesinin ilk bölümüdür.Sayfa ile ilgili temel özellikler burada ayarlanır.Bu alana sayfa başlıkları,Stiller,Mesaj pencereleri.

<Body> Etiketi ( Tagı )
Html belgesinin bütün içeriği burada yer alır.

Parametreleri
bgcolor : Arka plan rengini belirler.
Background: Arka plan resmini belirler.
link: Sayfadaki linklerin rengini belirler.
Alink: Saçilmiş olan linkin rengini belirler.
Ulink: Daha önceden tıklanmış olan linklerin rengini belirler.

<Title> Etiketi ( Tagı )
Sayfa başlığını belirlemek için kullanılır.<title> tagları arasında yazılan metin tarayıcı penceresinin sol üst köşesinde görülür.

Listeleme Etiketleri
Html tagları kullanarak sayfa içerisinde otomatik numaralandırma ve sıralama oluşturmak ve dökümanların göze hoş görünmesini sağlar.Web sayfalarında iki farklı listeleme yöntemi yer alır.Bunlardan birincisi sıralı liste, ikincisi ise sırasız listedir.

<Ol> Etiketi ( Tagı )
Sıralı listeler oluşturmak için kullanılır.Type parametresi aşşağıdaki değerleri alabilir.

“1″: Listeleme yaparken sayısal sıralama yapar.
“a”: Listeleme yaparken alfabetik sıralama yapar.
“i”: Listeleme yaparken romen rakamı ile sıralama yapar.

Start parametresine verilecek değer listelemenin kaçıncı sıradan başlıyacağını gösterir.

<Ul> Etiketi ( Tagı )
Listeleme yapılırken numara veya harflerin yerine küçük işaretler katılır.Type parametresine verilecek değerler aşşağıdaki gibidir.

Circle : İçi boş daire.
Square: İçi dolu kare.
Disc: İçi dolu daire.

<Li> Etiketi ( Tagı )

Ol ve ul tagları içerisinde kullanılarak listeleme elemanlarını belirler.

Şimdi buraya kadar öğrendiğimiz kodları sizlere diğer konumuzda anlattığım şekli ile index.html sayfasına ekliyelim sırasıyla.

<html>
<head>
<title>veb tasarım öğreniyorum</title>
</head>
<body bgcolor=”red” background=”web.jpg” link=”black” Alink=”yellow” Ulink=”green”>

<a href=”http://www.sibersahne.com/”>mırc</a>

<li>Web tasarım dersleri</li>
<ol type=”1″><li>Bölüm</li>
             <li>Bölüm</li>
<ol type=”a”><li>Temel etiketler</li>
             <li>Örneklemeler</li>
<ol type=”i”><li> Romen rakamları</li>
             <li>Bu kadar</li>
</ol>
</ol>
</ol>

<li>Web tasarım dersleri</li>
<ul type=”circle”><li>Bölüm</li>
             <li>Bölüm</li>
<ul type=”square”><li>Temel etiketler</li>
             <li>Örneklemeler</li>
<ul type=”disc”><li> Romen rakamları</li>
             <li>Bu kadar</li>
</ol>
</ol>
</ol>

</body>
</html>Aynen yukarıdaki kodları ekleyerek neler ortaya çıkacak görebilirsiniz.Yanlız şunu unutmayın ki arkaplan resimini seçince arkaplan rengini belirlemek gerekmez.İkisinden birisi kullanılır.Ben masaüstü’ne index.html sayfamı kayıt ettiğim için masaüstü”ne web.jpg resimini ekledim.Dikkat ederseniz ilk açtığım etiketi en son kapattım.Html’de en büyük özellik budur.İlk açılan en son kapanır.

 

 

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>Bunu örneklendirdikten sonra hemen diğer etiketimize geçelim.

 

 

Metin Düzenleme Etiketleri

<hX> Etiketi  ( Tagı )
Bu etiketler x ” 1 ve 6 ” arasında olabilir.Bu tag web sayfalarında ” 1 – 6 ” seviyelerinde başlıklar eklemek için kullanılır.

Örnek :
<h1>Html Kodları </h1>
<h2>Html Kodları </h2>
<h3>Html Kodları </h3>
<h4>Html Kodları </h4>
<h5>Html Kodları </h5>
<h6>Html Kodları </h6>

Kodlarını <body> </body> etiketleri arasına yazarak ne demek istediğimi anlarsınız.Hemen deneyiniz.

Not : Başlık taglarında ” align ” parametresi kullanılarak başlık sağa, sola, dayalı veya orta şeklinde yazdırılabilir.

Center : Başlığı ortalamaya yarar.
Right : Başlığı sola dayar.
Left : Başlığı sağa dayar.

Örnek :

<h1 align=”center”>Web tasarım</h1>

<h1 align=”left”>Web tasarım</h1>

<h1 align=”right”>Web tasarım</h1>

Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<B> Etiketi ( Tagı )
Bu tag arasına yazılan metin sayfada kalın gözüküyor.

Örnek : <b>Ben bir web tasarım öğrencisiyim.</b>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<U> Etiketi ( Tagı )
Bu taglar arasına yazılan metnin altı çizilir.

Örnek : <u> Derslerimiz çok güzel geçiyor.</u>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<İ> Etiketi ( Tagı )

Bu taglar arasına yazılan metin eğik yazılır.

Örnek : <i> Bugün 3cü dersimiz.</i>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<BR> Etiketi ( Tagı )
Html’de dosya oluştururken enter tuşu ile alt satıra geçişde tarayıcıda metin yan yana gözükür.Tarayıcıdaki metnin bir alt satıra geçmesi için <br> tagı kullanılır.

Örnek : Bu dersi bize verdiği için armoking_yesil’e teşekkür ederiz.<br>Emeklerinden dolayı teşekkürler</br>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<P> Etiketi ( Tagı )
Bu tag yeni bir parağraf oluşturmak için kullanılır.Bu tag arasında yazılan metin bir satır boşluk bırakarak alt satırdan yazılır.

Örnek : <p>Bu bir deneme sayfasıdır</p> <p> bakalım ne olacak </p>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

<Font> Etiketi ( Tagı )
Font tagı parametreleri sayesinde bu taglar arasına yazılan metini biçimlendirir.

Parametreleri :

Face : Yazı tipini belirler. ( arial, verdana … )
Size : Yazının büyüklüğünü belirler. ” 1 ve 7 ” arasında değer alır.
Color : Yazının rengini belirler.

Örnek : <font face=”arial” size=”7″ color=”green”>SiberSahne</font>
Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

Sayfa İçi Bağlantı Oluşturma
Bir html sayfasında bir konumdan başka bir konuma gitmeyi sağlamak için sayfa içi bağlantılar kullanılır.Bağlantı tagı ” a ” dır.Href parametresi linkler için adres tanımlamak amacıyla kullanılır.

Örnek :

<a href=”#webtasarim”>Web tasarım</a>
<a href=”#ucretsiz”>Ücretsiz dersler</a>

Sayfa Dışı Bağlantı Oluşturma
“a” tagı ile oluşturulan bu linkler “href” parametresi ve ” target ” parametresini destekler.Href parametresi gidilecek sayfanın adresini belirler.Target parametresine ise aşşağıdaki değerler verilir.

target =”_blank”> Bağlantı yeni bir pencerede açılır.
target =”_self”> Bağlantı aynı pencere içerisinde açılır.
target =”_top”> Bağlantı aynı pencerede en üstten itibaren açılır.
target =”_parent”> Açılan bağlantı, o anda açık sayfayı oluşturmuş bir anasayfa varsa onun yerine konur.
target =”çerçeve adi”> Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılır.

Örnek : 
<a href=http://www.sibersahne.com” target=”_blank”>Chat</a>
<a href=http://www.sibersahne.com” >Chat</a>

Kodlarınıda index.html sayfanıza yazıp görebilirsiniz.

Evet arkadaşlar bugünkü konumuz buraya kadar.Lütfen bunları pratike dökünüz ve sürekli tekrar yapınız.

Fatih bayantemur ( armoking_yesil )

Bu konudan önceki dersler :
Internet Alanı ( Domain )
Ücretsiz ve Bedava Web Tasarım Eğitimi Başladı

Bu konudan sonraki ders :

Tablolar

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • MSN Reporter
  • MySpace
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Yigg

Benzer Yazılar

  • 30 Kasım 2009 -- Formlar (4)
    Merhaba sevgili sibersahne.com takipçileri.Öncelikle Kurban Bayramınızı canı gönülden kutlar ve nice huzurlu, mutlu ve neşeli bayramlar geçirmemiz ümidi ile SELAM sunuyorum sizlere.Bugünkü web tasarım...
  • 16 Kasım 2009 -- Tablolar (2)
    Merhaba tekrardan sevgili sibersahne.com Eğitim kategorisi takipçileri.Dersimizin 4.cü bölümüne gelmiş bulunmaktayız.Bu dersimizde sizlere Web Tasarımda Tablolar konusunu anlatacağım.Yanlız bugün içim...
  • 02 Kasım 2009 -- Internet Alanı ( Domain ) (8)
    Merhaba değerli http://www.sibersahne.com okurlarımız ve takipçilerimiz.Geçen gün '' Ücretsiz ve Bedava Web Tasarım Eğitimi Başladı'' konusu ile sizlere artık '' Eğitim '' kategorimizde '' Web Tas...
  • 31 Ekim 2009 -- Web Tasarım Eğitimi (15)
    Ücretsiz web tasarım derslerimiz başlamış bulunmaktadır.Sizlerde bu derslerimiz sayesinde türkiye'nin öncü WebMaster'ları arasında yer alabilirsiniz.Yapmanız gereken sadece sizlere sunduğumuz ücretsiz...