webodam - html nedir html taglari html dersleri

html nedir html taglari html dersleri

Kodlarda kullandığımız “ işareti yerine kodları test ederken " yandakini kullanın.Esc nin hemen altında olup sadece tıklamanız yeterlidir.Bunu uygulamassanız kodlarda sorun oluşur.

Html Öğrenmeye Başlayın -1

Html ((Hyper Text Markup Language) web sayfalarının hazırlanmasında kullanılan ve gayet pratik,basit olan bir dildir.Html ile web sayfasını oluşturan metinleri ve verileri düzenleyebilirsiniz.Html ile ses,video,script veya çeşitli nesneler ekleyebilirsiniz.Kullanımı Basittir.

Kodlarınızı Test Etmek Ve Önizlemeniz İçin Gerekli Programlar;

Hazırladığınız ve ya indirdiğiniz kodları test etmek için hazırlanan programlar vardır.Bunlardan en popülerleri ve bizim önerdiklerimizden biri Frontpage yada Basit ve pratik kullanımlı AceHtmlFreware programıdır. Hiçbir program yüklemeksizin bilgisayarınızdan bir Yeni Metin Belgesi açın ve içine Önizlemek İstediğinz Kodu yazın(yapıştırın) ve Farklı kaydet e tıklayıp çıkan pencere adsız.txt yerine denemedir.htm yazın ve böylelikle önizleyeceksiniz.

Temel Komut Yapısı;

Html tag(etiket)’lardan oluşur.Html komutları kullanılırken Türkçe karakterler olan ç,ş,ö,ü,ı,ğ harfleri kullanılmaz.Html komutları “<…>” arasında yazılır ve “</…>” şu şekilde kapatılır.

Örnek;

<u>bubirdenemedir</u>

Yukarıda kodda <u> Altı çizili yazı tagı olup , bubirdenemedir= ise metindir.

1)Basit Html Komutları;

Html Kodları çok basit olup, öğrenmeniz içinde fazla zaman harcamanızı gerektirmez.

Aşağıda bazı kodlar verdik.Aşağıdaki kodları test edin ve bunların daha başlangıç kodları olduklarını unutmayın.

Kodlar	Açıklama		Önizleme
</br>	Bu kod enter görevi görür.Sağ yanda gibi iki kelimeyi birbirinden ayırır		Merhaba Nasılsın
<u>…</u>	Kelimenin Altı Çizili Olmasını Sağlar		bubirdenemedir
<i>…</i>	Kelimenin italik Olmasını Sağlar		bubirdenemedir
<b>…</b>	Kelimenin Kalın Olmasını Sağlar	bubirdenemedir
<div style="text-align: right">...</div>	Yazının sağdan başlamasını Sağlar	bubirdenemedir
<sup>…</sup>	Kelimenin Üzerine değer girilmesini sağlar	bubir^denemedir

1.1)Yazıyı Boyutlandırmak;

Yazıyı <hx>…</hx> şeklinde boyutlandırılır.X yerine 1 den 6 ya kadar değer girilir.1 en büyük değer olup 6 ise en küçüktür.

Örnek;

<h1>bubirdenemedir</h1> = Yandaki kod en büyük yazı boyutudur.

<h6>buikincidenemedir</h6> = Yandaki kod ise en küçük yazı boyutudur.

1.2)Yazıyı Renklendirmek;

Yazıyı boyutlandırabildiğimiz gibi renklendire de biliriz. <FONT COLOR="yellow">…</FONT> Yanda Görüldüğü kod ile renklendirebilirsiniz.

Örnek;

<FONT COLOR=”yellow”>denemedir</font> = denemedir

Yukarıdaki kod da color=”yellow” metnin rengidir,biz yellow(sarı) olarak belirttik.Yellow yerine sarı yani Türkçe renkler yazamassınız İngilizce olmak zorundadır.En sonda görüleceği gibi </…> şeklinde kodu bitirdik.

<FONT COLOR=”red”>2.denemedir</font> = 2.denemedir

<FONT COLOR=”orange”>3.denemedir</font> = 3.denemedir

1.3)<FONT>…</FONT> Komutu;

Yukarıda gördüğünüz gibi font kodu ile yazıyı renklendirdik.Oysa font kodu ile bir çok işlem daha uygulayabilirsiniz.

Örnek;

Mesela <font color=”red” size=”16” face=”algerian”>denemedir</font> yandaki kodu inceleyelim.

Kodu test ettiğinizde Şöyle olacak = denemedir

Önizlemesini gördünüz kodu tanımlarsak color=”red” yazının rengini,size=”16” boyutunu,face=”algerian” tipini belirler.Sizde deneyiniz

1.4)Bağlantı Vermek;

Web sayfanızdan başka bir adresle bağlantı vermek için kullanılır.Diğer bir adı köprü kodu dur.

Örnek;

Mesela http://webodam.tr.gg adresine bağlantı verelim.

Öncelikle <a href="http://webodam.tr.gg">Tiklayiniz</a> Yandaki kodu kullanıcaksınız ve Tiklayiniz a tıklandığında belirtilen adrese gideceğini bilin. Kodu tanımlarsak href=”…” noktalı yere yazacağınız adrese gidecektir.

Tiklayiniz a tıklandığında adresin farklı bir sekmede açılmasını istiyorsanız

<a href=”burayagidilecekadresinlinki.com” target=”_blank”>görünecek isim</a> yandaki kodu kullanın.

1.5)Resim Yayınlamak;

Nasıl bağlantı verebilip yazıları şekillendirebiliyorsanız ,resimde yayınlayabilirsiniz.Bunu içinde

şu kodu kullanın.Kodu tanımlarsak Resminadresi.jpg nin yerine resmin adresini verin alt=”merhaba” olan yerede resmin açıklamasını width ve height ilede resmi boyutlandırın.

1.6)Tablo Oluştun;

Html ile istenilen sutun ve satır kadar tablo oluşturabilirsiniz.Yolları İzleyin;

<tr>

<td>1.kutucuk</td>

<td>2.kutucuk</td>

</tr>

</table>

Yukarıdaki Kodda 2 sutunlu bir tablodur.Önizlemesi aşağıdadır.

1.kutucuk

2.kutucuk

Şimdi ise 2 sutun ve 2 satırlı bir kod oluşturalım;

<tr>

<td>1.kutucuk</td>

<td>2.kutucuk</td>

</tr>

<tr>

<td>3.kutucuk</td>

<td>4.kutucuk</td>

</tr>

</table>

1.kutucuk	2.kutucuk
3.kutucuk	4.kutucuk

Yukarıda tablo kodları ve örneklerini gördünüz border=”2” kalınlık olup değiştirebilirsiniz.

1.7)Tablolarınızı Boyutlandırın kodu;

Tablolarınızı Oluşturdunuz fakat tabloyu sınrlandırmak istiyorsunuz mesela genişlik ve yükseklik olarak.

Bunun için <table den sonra width=”200” yazın ve böylelikle tablonuz 200 derece genişlikle sınırlandıracaksınız.

1.8)Tablolarınıza arka plan ekleyin;

Tablolarınızın arka plan rengini <table … den sonra bgcolor=”yellow” ile renklendirebilirsiniz.

1.9)<marquee> kodu;

Bu komut ile yazılarınız haber bandları gibi kaydırtabilirsiniz. <marquee>YAZINIZ BURAYA</marquee> Kod yanda Görüldüğü gibidir.Şu anda önizlemesini gösteremiyoruz Lütfen Test edin

* * *

Böylelikle html ile az çok tanışmış oldunuz.Yukarıda belirtilen başlıklar altında yayınlanan kodlar temel olup fazla ayrıntıya girilmememiştir.Sonraki yazılarımızda ayrıntılı ve gelişmiş kodlar yayınlayacağız.

Bu yazı http://webodam.tr.gg tarafından hazırlanıp kaynak gösterilmeden alıntılanamaz ve yayınlanamaz.Bu yazı eğitim amaçlıdır.