Html

Tüm Html Etiket ve Parametreleri Ders Notunu İndir !

Author Bilişimci AnnemPosted on
 

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ı

  1. Büyük küçük harfler kullanılabilir .
  2. Türkçe karakter kullanılmaz .
  3. Komutlar < > ( Büyük , küçük işaretleri ) tagları arasına yazılır .
  4. Komutlar ile birlikte paremetreler kullanılır birden fazla parametre yanyana gelebilir  .
  5. 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:                                                          &nbsp
 
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

  1. Marquee :metin resim tablo vb nesnelere kayma efekti verir  

    <marquee>   </marquee>
    <marquee direction=”up-left” bgcolor=”red” Loop=”3” behavior=”slide” scrolldelay=”10”>     

  2. Direction: hareket yönü belirlenir  <marquee direction=”up”>hey</marquee>
    1. Right  :sağ
    2. Left    :sol
    3. Up      :yukarı
    4. Down :aşağı 
  3. Bgcolor          :yazının arka plan rengi 
  4. Width-Height: kayan nesnenin genişliği ve yüksekliği 
  5. Loop               :Kayan nesnenin kaç kez kayacağını belirtiriz .
    <Marquee Loop=”1,2,7”>     
  6. Scrolldelay    :Yazının kayma hızını ayarlarız .
    <Marquee scrolldelay=”40”>     
  7. Scrollamount:Her harekette kaç piksel kayacağını yazıyoruz <Marquee scrollamount=”5”> 
  8. Behavior: Kayma özelliğinin yönünü değiştirebiliriz . <Marquee behavior=”Alternate,Slide,Scroll”>
    1. Alternate       :Her iki yöne gidip gelir
    2. Slide               :Bir yönde birkez kayar
    3. Scroll              :Sürekli bir yönde kayar

Çoklu Ortam Araçları Ekleme İşlemleri (wav,mp3,wma,au,mpg,avi)

  1. Ses Ekleme :
    <    Bgsound src=”dosyaadı.wma” loop=”-1 devamlı,3,5 kere”>     
  2. Kullanıcı Kontrollu Video Ekleme :<embed src=”a.avi” loop=”1”>
    1. Width :oynatıcıının genişligi
    2. Height: oynatıcının yuksekligi
    3. Loop   :Kaç kere çalacagı 0 bir kez 1 devamlı çal demek
    4. Autostart: true-false play tuşu ile başla veya otomatik başla 
  3. Kullanıcı Kontrollu Ses Ekleme:<embed src=”a.mp3” loop=”0”> video ile aynı

Form Nesneleri ile Form Oluşturma

  1. Form:Formlar ziyaretçiler ile web sayfası yöneticileri arasındaki iletişimi sağlamak için kullanılır . 
  2. Input: Oluşturulacak nesnelerin özellikleri belirtilir
    1. Type:Oluşturulacak nesnelerin tipi
                                                              i.      Text-Password-Radio-checkbox-submit-reset-textarea
 
    1. Align:Form içerisindeki hizalanacağı konumu belirlenir 
    2. Name :Nesneye verilen isim ekranda görünmez sonra nesneye ulaşmak için kullanılır. 
    3. Value:Varsayılan olarak görüntülenmesini istedigimz deger. 
    4. Size:Piksel çinsinden boyutları belirlenir . 
    5. Maxlenght: Form nesnesine girilebilecek max deger bilgisi. 

  		2.

     

                     

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

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

 

h. 

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>

Yorum Yapın

Benzer İçerikler

Daha Fazla İçerik