Html

HTML ‘e Giriş – Temel Tekrar

Author Bilişimci AnnemPosted on

HTML ‘e Giriş – Temel Tekrar

HTML Giriş

Programlama dili değildir-işaretleme dilidir. Sadece 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 <> tagları arasına yazılır.
  • Komutlar ile birlikte paremetreler kullanılır birden fazla parametre yanyana gelebilir ve =”” yazılır.

 

 

Html Komutları

 
1.      <html></html>
2.      <head></head>
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 Kısmı Sayfada görünmesini istediğimiz her şey burada
a.    Arka plan rengi: <bgcolor>
b.   Arka plan resmi: <background>

METİNLER -Biçimlendirme

1.      Başlıklar :                  <h1-h6> h6 en küçük değer
2.      Kalın:                         <b/>
3.      İtalik:                         <i/>
4.      Altı çizili:                  <u/>
5.      Üzeri çizili:                <s/>
6.      Alt satıra geçme:      <br/>
7.      Parağraf 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.      Ekranada Yazıldıgı gibi görünmesi  <pre>
10.  Font :<font color=”red” face=”arial” size=”6”>
A)   Color: Renk                           <color=”red,#FF10CC”><p/>
B)   Face: Yazı Tipi                      <face=”arial,verdana,ms comic sans,time new roman”>
C)   Size: Yazı Tipi Boyu                         <size=”1-7”>
11.  Arka plan rengi :                                         < Bgcolor =”red,#FF10CC”>  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 Etiketleri

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

1.      Resim Eklemek <img>
A)   Src: Yol :                   <img src=”gül.jpg,” veya “..gul.jpg” veya “cahmetgul.jpg”>
B)   Width-Height: En-Boy                     <img width=”150px” height=”200px”>
C)   Alt: Üzerine gelince çıkan yazı         <img alt=”Gul resmi”>
D)   Align : Hizalama                               <img align=”Center,left,right”>
E)   Border: Kenarlık       <img border=“Dashed,Dotted,Solid,Double,Groove,Ridge”>
             kabarık         tersi
·         Background: Sayfaya arka resim eklemek için Body ile kullanılır     <body background=”blue”>

LİNKLER

1.            link                                              <a href=”tt.doc” 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=”gül.jpg”>Resim için tıklayın</a>
·         Resimlere link verme
<a href=”gül.jpg”> <img src=”gül.jpg”> </a>
·         Bir internet sayfasına link verme
<a href=”http://www.vatanbilgisayar.com/”>Vatan bilgisayar için tıklayın”</a>
·         Bir dosyaya link verme
<a href=”Css.doc”>Dosyayı indirmek için tıklayın”</a>
·         Sayfa içi link verme
<a href=”#Link1”>Dreamweaver</a>  ….  <a name=”#Link1”>Dreamweaver …yazılarvar…</a> 
·         Mail Adreslerine link verme
<a href=”mailto:demir@yahoo.com?subject=merhaba&cc=ali@y.cm&bc=a@y.c &body=iyimisin”>
mail atmak için tıklayın”</a>

TABLOLAR

Ø  Tablo:                                                                             <table> <tr><td>       </td> </tr> </table>
A)   Border-Bordercolor: Kenarlık                    <table border=“1,3” bordercolor=”red”>
B)   Align : Tüm tabloyu ekranda Hizalar           <img align=”Center,left,right”>
C)   Bgcolor:Tüm tablonun                                 <table bgcolor =”red,#FF10CC”>  
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,#FF10CC”>  
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”>

ÇERÇEVELER

  1. Frameset:      :Çerçeve oluşturmak için kullanılan etiket
  2. Rows:             :Yatay olarak böler
  3. Cols:               :Dikey olarak böler <frameset cols=”20%,200px,*” or “50%,50%”>
  4. Frame:           :Hangi .bölümün hangi sayfayı görünecegi belirlenir
    1. Name             :Çerçeveye isim verilir Target paremetresine bu isim verilir
    2. Noresize         :Çerçevenin büyüklüğünü kullanıcı tarafından değiştirilememesi
    3. Src                  :Çerçevede hangi sayfa açılacagı yolu ve adi
    4. Scrolling        :Sayfa çerçeveye sığmazsa kaydırma çubuklarının durumu
1)      Yes   : Kaydırma çubugu çıkar
2)      No    : Kaydırma çubugu çıkmaz
3)      Auto : Kaydırma çubugu otomatik çalışır
    1. Marginheight : Çerçevede sayfadaki ilk nesne ile üsten bırakılacak boşluk
    2. Marginwidth  : Çerçevede sayfadaki ilk nesne ile soldan bırakılacak boşluk
<frameset colls=”50%,50%”>
<frame name=”1” src=”1.html” noresize scrolling=”no”>
<frame name=”2” src=”2.html” >
</frameset>
  1. Iframe            :Sayfa içerisine Çerçeve eklemek için kullanılır
<iframe name=”çerçeve” src=”yy.html” width-height=”200” scrolling=”yes” > </iframe>

KAYAN NESNE EKLEME

  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 rengi
  4. Width-Height: kayan nesen genişliği ve yuksekligi
  5. Loop               :Kaç kez kayacagını yazarız <Marquee Loop=”1,2,7”>
  6. Scrolldelay    :Yazının kayma hızını ayarlar<Marquee scrolldelay=”40”>
  7. Scrollamount:Her harekette kaç piksel kayacagını yazıyoruz <Marquee scrollamount=”5”>
  8. Behavior: Kayma özelligi degişir <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ÇLARI(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 ELEMANLARI

  1. Form:Formlar internet kullanıcıları ile web sayfsı yöneticileriyle iletişimi sağlamak için kullnı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 hizalanacagı 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 boyutlrı verilir.
    5. Maxlenght:Ögeye girilebilecek max deger bilgisi.

  2. <form>
     

     

     Type

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

 

 

 

b.           Password
<input type=”text” name=”Ad” value=”” size=”20” >
 
<input type=”password” name=”parola” value=”” size=”20”>
 
c.            Checkbox :checked ile varsayılan olarak birden fazla işaretleme yapılabilir.
<input type=”checkbox” name=”kutu1” >
d. Bilgisayar
<input type=”checkbox” name=”kutu2” >müzik
 
<input type=”checkbox” name=”kutu3” checked>spor
e. 
 
f.             Radio :yuvarlak düğme  name aynı olursa biri seçilebilir ama value farklı yazılmalıdır.
<input type=”radio” name=”dugme” value=”a” >
g. kız
<input type=”radio” name=”dugme” value=”b”>erkek
 
h. 
 
i.             Submit :Düğme
<input type=”text” name=”mail” ><br>
 
<input type=”submit” name=”buttongonder” value=”Gönder” >
 
j.             Reset:Sil
k. Formun üzerindeki bilgilerin temizlenmesi için kullanılır.
 
<pre>Ad      :<input type=”text” name=”Ad” value=”” size=”20” maxlength=”25”>
 
<pre>Soyad :<input type=”text” name=”Soyad” value=”adınız” size=”20” ><br>
<input type=”reset” name=”silici” value=”Temizle” >
l. 
 
  1. Textarea:Uzun yazılar için kullanılır.
<Body>
 
<form>
İstek ve önerinilerinizi yazınız.<br>
<textarea name=”şikayet” cols=”50” rows=”10”> </textarea>
</form>
 
 
 
 
 
 

 

 

 

Yorum Yapın

Benzer İçerikler

Daha Fazla İçerik