Tüm Html Etiket ve Parametreleri Ders Notunu İndir !
HTML Giriş
Html , web sitelerine ait kodları oluşturmamızı , düzenlememizi sağlayan kodlama editörüdür . Programlama dili değildir sadece işaretleme dilidir. Görsel düzenleme için kullanılmaktadır.
Html Komutlarının Yazım Kuralları
- Büyük küçük harfler kullanılabilir .
- Türkçe karakter kullanılmaz .
- Komutlar < > ( Büyük , küçük işaretleri ) tagları arasına yazılır .
- Komutlar ile birlikte paremetreler kullanılır birden fazla parametre yanyana gelebilir .
- Parametrelere değer atanırken = işareti kullanılır .
Html Komutları
1. <html> </html>
Html kodlarının yazılarak bir web sitesi oluşturulmaya başlanılacağını bildirir .
2. <head> </head>
Başlık bilgilerinin bildirileceği etiketlerdir .
a. title:Başlık çubuğunda gözükeçek metin
b. meta: site ile ilgili bilgiler,
i.name:yayın tarihi,tasarımcısı,arama motorundaki sayfayı bulduracak anahtar kelime
ii.http-equiv:
3. <body> </body>
Gövde alanıdır. Web sayfamızda görünmesini istediğimiz her türlü bilgi burada yazılacaktır .
a. Arka plan rengi: <bgcolor>
b. Arka plan resmi: <background>
METİNLER -Biçimlendirme İşlemleri
1. Başlıklar :
<h1> ….. <h1> şeklinde ifade edilirler .
<h1> den <h6> ya kadar başlık türleri vardır . <h6> en küçük başlık değeridir .
2. Kalın: <b/>
3. İtalik: <i/>
4. Altı çizili: <u/>
5. Üzeri çizili: <s/>
6. Alt satıra geçme: <br/>
7. Paragraf oluşturma: <p/>
A) Align:Hizalama <align=”Center,left,right”>
8. Yatay çizgi : <hr width=”%10” size=”10” align=”Center” color=”red”>
A) Width: Genişlik-boyunu belirler <width=”%10,200px”>
B) Size: Çizginin dikey boyunu yüksekligini belirler <size=”=”%10,200px”>
C) Color:Renk <color=”red,#FF10CC”>
D) Align: Hizalama <align=”Center,left,right”>
9. Ekranda yazıldıgı gibi görünmesi <pre>
10. Font :<font color=”red” face=”arial” size=”6”>
A) Color: Renk <color=”black”><p/>
B) Face: Yazı Tipi <face=”arial,verdana,ms comic sans,time new roman”>
C) Size: Yazı Tipi Boyu <size=”1-10”>
11. Arka plan rengi : < Bgcolor =”pink”> body ile kullan
12. Biraz içerden yazdırma : <blockquote>
13. Boşluk:  
14. Sayfaya Üst ve Soldan boşluk verme: <topmargin=”200px” leftmargin=”100px”>
METİNLER –Listeleme İşlemleri
1. Sıralı Listeler (Ordert List):Rakamlar,harfler,roma rakamları <ol type=”1,a,i”>
<li>MM</li>
A) Type: <ol type=”a” start=”8”> <li>muş</li>: Harf ile E’den başlar
B) Start: <ol type=”1” start=”8”>: Sayı ile 8’den başlar
2. Sırasız Listeler(Unordert List): <ul type=”disc,circle,square”> ●○■
A) Type: <ul type=”disc” >:
3. Tanımlama Listeleri(DefinationList) <dl compactl>muş</dl>:<li>yerine dt ve dd kullanılır
RESİMLER İle İlgili İşlemler
1. Resim Eklemek
<img>
A) Src: Yol : <img src=”cicek.jpg,” veya “..cicek.jpg” veya “cdenemecicek.jpg”>
B) Width-Height: En-Boy <img width=”150px” height=”200px”>
C) Alt: Üzerine gelince çıkan yazı <img alt=” Çiçek resmi”>
D) Align : Hizalama <img align=”Center,left,right”>
E) Border: Kenarlık
<img border=“Dashed,Dotted,Solid,Double,Groove,Ridge”>



· Background: Sayfaya arka resim eklemek için Body ile kullanılır
<body background=”blue”>
LİNKLER İle İlgili işlemler
1. link
<a href=”deneme.pdf” style=” text-decoration:none” target=”_blank”>
A) href: Konum belirlenir
<a href=””>:
B) style: Altı çızili olayını iptal eder
<a style=”text-decoration:none”>
C) target::aynı sayfa,yeni,aynı pencere üstte,anasayfa
<a target=”_self,blank,top,paretn”>
·
Metinlere link verme:
Yazılara tıklanınca istenen bir; mail, web sitesi veya resim, açmak için
<a href=”cicek.jpg”>Resim için tıklayın</a>
·
Resimlere link verme
<a href=”cicek.jpg”> <img src=”cicek.jpg”> </a>
·
Bir internet sayfasına link verme
<a href=”http://www.google.com/”>Arama motoru için tıklayınız </a>
·
Bir dosyaya link verme
<a href=”Css.doc”>Dosyayı indirmek için tıklayın”</a>
TABLOLAR İle İlgili İşlemler
Tablo:
<table>
<tr>
<td> </td>
</tr>
</table>
A) Border-Bordercolor:
Kenarlık ile ilgili parametrelerdir . Kenarlık kalınlığı ve rengini belirleriz .
<table border=“1,3” bordercolor=”red”>
B) Align :
Tüm tabloyu ekranda hizalar
<img align=”Center,left,right”>
C) Bgcolor:
Tüm tablonun arka plan rengini belirleriz .
<table bgcolor =”red”>
D) Background:Tüm tabloya arka resim ekler
E) Width-Height:Tüm tablonun Eni-Boyu
<img width=”150px” height=”200px”>
F) Cellspacing-cellpadding:
1. satır
<tr>
A) Colspan:Aynı satırdaki hücreleri birleştirir
B) Bgcolor:Tüm satırın
<tr bgcolor =”red”>
C) Background:Tüm satırın
D) Width-Height:Tüm satırın Eni-Boyu
<img width=”150px” height=”200px”>
E) Align: Hizalama içindeki veriyi hizalama
<tr align=”Center,left,right”>
F) Valign: Tüm satırın dikey hizalaması
<tr Valign=”Top,middle,bottom”>
2. sütun
<td>
A) Rowspan: Aynı sütundaki hücreleri birleştirir
B) Bgcolor:hücrenin arka rengi
C) Background:Tüm sütunun araka resmi
D) Width-Height:Tüm sütunun Eni-Boyu
<img width=”150px” height=”200px”>
E) Align: Tüm sütunu Hizalar
<td align=”Center,left,right”>
F) Valign: Tüm sütunnun dikey hizalaması
<tr Valign=”Top,middle,bottom”>
Kayan Nesne Ekleme İşlemleri
- Marquee :metin resim tablo vb nesnelere kayma efekti verir
<marquee> </marquee>
<marquee direction=”up-left” bgcolor=”red” Loop=”3” behavior=”slide” scrolldelay=”10”> - Direction: hareket yönü belirlenir <marquee direction=”up”>hey</marquee>
- Right :sağ
- Left :sol
- Up :yukarı
- Down :aşağı
- Bgcolor :yazının arka plan rengi
- Width-Height: kayan nesnenin genişliği ve yüksekliği
- Loop :Kayan nesnenin kaç kez kayacağını belirtiriz .
<Marquee Loop=”1,2,7”> - Scrolldelay :Yazının kayma hızını ayarlarız .
<Marquee scrolldelay=”40”> - Scrollamount:Her harekette kaç piksel kayacağını yazıyoruz <Marquee scrollamount=”5”>
- Behavior: Kayma özelliğinin yönünü değiştirebiliriz . <Marquee behavior=”Alternate,Slide,Scroll”>
- Alternate :Her iki yöne gidip gelir
- Slide :Bir yönde birkez kayar
- Scroll :Sürekli bir yönde kayar
Çoklu Ortam Araçları Ekleme İşlemleri (wav,mp3,wma,au,mpg,avi)
- Ses Ekleme :
<Bgsound src=”dosyaadı.wma” loop=”-1 devamlı,3,5 kere”> - Kullanıcı Kontrollu Video Ekleme :<embed src=”a.avi” loop=”1”>
- Width :oynatıcıının genişligi
- Height: oynatıcının yuksekligi
- Loop :Kaç kere çalacagı 0 bir kez 1 devamlı çal demek
- Autostart: true-false play tuşu ile başla veya otomatik başla
- Kullanıcı Kontrollu Ses Ekleme:<embed src=”a.mp3” loop=”0”> video ile aynı
Form Nesneleri ile Form Oluşturma
- Form:Formlar ziyaretçiler ile web sayfası yöneticileri arasındaki iletişimi sağlamak için kullanılır .
- Input: Oluşturulacak nesnelerin özellikleri belirtilir
- Type:Oluşturulacak nesnelerin tipi
i. Text-Password-Radio-checkbox-submit-reset-textarea
-
- Align:Form içerisindeki hizalanacağı konumu belirlenir
- Name :Nesneye verilen isim ekranda görünmez sonra nesneye ulaşmak için kullanılır.
- Value:Varsayılan olarak görüntülenmesini istedigimz deger.
- Size:Piksel çinsinden boyutları belirlenir .
- Maxlenght: Form nesnesine girilebilecek max deger bilgisi.
Type
<form>
Text
<pre> Tc no:<input type=”text” name=”tckimlik” value=”Tc no” size=”20” maxlength=”11”>
<pre> Ad :<input type=”text” name=”Ad” value=”adınız” size=”20” maxlength=”25”>
</form>
Password
<input type=”text” name=”Ad” value=”” size=”20” >
<input type=”password” name=”parola” value=”” size=”20”>
Checkbox :
checked ile varsayılan olarak birden fazla işaretleme yapılabilir.
Örneğin Meslekler
<input type=”checkbox” name=”kutu1” > Öğretmen
<input type=”checkbox” name=”kutu2” >Muhasebeci
<input type=”checkbox” name=”kutu3” checked>Diğer
Radio Button :
Yuvarlak düğmelerdir . Tek seçimlik işlemlerde kullanılır .
Örneğin Cinsiyetiniz
<input type=”radio” name=”dugme” value=”a” >bay
<input type=”radio” name=”dugme” value=”b”>bayan
Submit :Button
<input type=”text” name=”mail” ><br>
<input type=”submit” name=”buttongonder” value=”Gönder” >
Textarea:
Adres , eklemek istediğini bilgiler gibi uzun yazılar için kullanılır.
<Body>
<form>
İstek ve önerilerinizi yazınız.<br>
<textarea name=”şikayet” cols=”50” rows=”10”> </textarea>
</form>