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:  
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”>




· 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
- Frameset: :Çerçeve oluşturmak için kullanılan etiket
- Rows: :Yatay olarak böler
- Cols: :Dikey olarak böler <frameset cols=”20%,200px,*” or “50%,50%”>
- Frame: :Hangi .bölümün hangi sayfayı görünecegi belirlenir
- Name :Çerçeveye isim verilir Target paremetresine bu isim verilir
- Noresize :Çerçevenin büyüklüğünü kullanıcı tarafından değiştirilememesi
- Src :Çerçevede hangi sayfa açılacagı yolu ve adi
- 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
-
- Marginheight : Çerçevede sayfadaki ilk nesne ile üsten bırakılacak boşluk
- 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>
- 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
- 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 rengi
- Width-Height: kayan nesen genişliği ve yuksekligi
- Loop :Kaç kez kayacagını yazarız <Marquee Loop=”1,2,7”>
- Scrolldelay :Yazının kayma hızını ayarlar<Marquee scrolldelay=”40”>
- Scrollamount:Her harekette kaç piksel kayacagını yazıyoruz <Marquee scrollamount=”5”>
- Behavior: Kayma özelligi degişir <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ÇLARI(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 ELEMANLARI
- Form:Formlar internet kullanıcıları ile web sayfsı yöneticileriyle iletişimi sağlamak için kullnı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 hizalanacagı 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 boyutlrı verilir.
- Maxlenght:Ögeye girilebilecek max deger bilgisi.
<form>Type
<pre> Tc no:<input type=”text” name=”tckimlik” value=”Tc no” size=”20” maxlength=”11”> Text
<pre> Ad :<input type=”text” name=”Ad” value=”adınız” size=”20” maxlength=”25”>
|
<input type=”text” name=”Ad” value=”” size=”20” > Password
<input type=”password” name=”parola” value=”” size=”20”>
<input type=”checkbox” name=”kutu1” > Checkbox :checked ile varsayılan olarak birden fazla işaretleme yapılabilir.
<input type=”checkbox” name=”kutu2” >müzik Bilgisayar
<input type=”checkbox” name=”kutu3” checked>spor
name aynı olursa biri seçilebilir ama value farklı yazılmalıdır. Radio :yuvarlak düğme
<input type=”radio” name=”dugme” value=”a” >
<input type=”radio” name=”dugme” value=”a” >
<input type=”radio” name=”dugme” value=”b”>erkek kız
<input type=”text” name=”mail” ><br> Submit :Düğme
<input type=”submit” name=”buttongonder” value=”Gönder” >
Reset:Sil
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” >
<input type=”reset” name=”silici” value=”Temizle” >
- 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>