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.


  1.                  

    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