Renk kodları

HTML bize üç tip liste hazırlama imkanı veriyor

Sıralı listeler (ordered list )


Sırasız listeler (unordered list )


Tanımlama listeleri (definition list )


Sıralı listeler rakam veya harf yada her ikisini
içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde
imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden
çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir
araçtır.


Sıralı Listeler

Liste içine alınacak metinler

...

etiketleri arasına alınarak yazılır. Bu etiketler listenin başladığını ve
bittiğini belirtir. Liste maddelerinin başına ise

(list item )
etiketini getiriyoruz. Bu etikette tıpkı
etiketi gibi
sonlandırılmıyor.

etiketine parametreler ekleyebiliyoruz. Bunlarla listemizin rakamla mı harfle mi başlayacağını (type ) yada hangi rakam/harfle başlayacağını (start ) belirtebiliyoruz. Compact parametresi ise listenin mümkün olan minimum satır aralığına sahip olmasını sağlıyor. Bundan sonraki örneklerimizde sayfa kodunun yalnız body (gövde ) bölümünü vereceğiz. Kodun geri kalan kısımlarını kendi sayfanızda tam olarak yazmayı unutmayın. Kod Alanı:
1. Kimya
   
   1. Ynorganik
   2. Analitik
2. Fizik
   
   1. Dinamik
   2. Statik
3. Matematik
   
   1. Sayılar
   2. Diğer
      
      1. Türev
      2. Yntegral
Kimya Organik Inorganik Analitik Fizik Dinamik Statik Matematik Sayılar Diğer Türev Yntegral Listeleri buradaki örnekte olduğu gibi iç içe hazırlamak da mümkün. Dikkat edeceğimiz nokta; işe
etiketi ile başlayıp liste maddelerinin her birisinin başına
1. etiketini getirmek
   ve listelemeyi bitirmek istediğimiz yerde
etiketini yazmak. Liste içinde yeni bir liste oluşturmak istediğimizde listelenecek maddeden sonra tekrar
etiketini yazıyoruz ve bahsedilen kuralları aynen uyguluyoruz. Type parametresinde kullanabileceğimiz değerler şunlar olabilir; sayılar, harfler (küçük/büyük ) ve romen rakamları (i,ii,iii gibi ) Sırasız Listeler Bu tip listelerde de mantık aynı. Fark; listeleme yaparken maddelerin başına harf, rakam gibi unsurlar yerine küçük yuvarlaklar, kareler kullanabilmemiz.
etiketi yerine
etiketini kullanıyoruz, liste maddeleri için kullandığımız
• etiketi
  burada da geçerli.
  için kullanılabilecek parametreler ise şöyle; type için disc (içi dolu daire ), circle (içi boş daire ), square (içi dolu kare ). Compact parametresi sırasız listelerde de kullanılabiliyor. Kod Alanı:
  • Kimya
    
    • Ynorganik
    • Analitik
  • Fizik
    
    • Dinamik
    • Statik
  • Matematik
    
    • Sayılar
    • Diğer
      
      • Türev
      • Yntegral
  Kimya Organik Ynorganik Analitik Fizik Dinamik Statik Matematik Sayılar Diğer Türev Integral Tanımlama Listeleri Bu listelemede kullanılan etiketler şöyle;

  ...

  ,
  ,
  
  
  Listenin maddelerini belirtmek için kullandığımız
  
  etiketinin yerini burada
  
  
  
  
  
  ve
  
  
  etiketleri alıyor.
  Aynı şekilde

  ...

  veya

  ...

  etiketleri arasına
  aldığımız listeyi bu sefer
  

  ...

  arasına yazıyoruz. Yine parametre olarak

  etiketi içinde compact ifadesini kullanabiliriz. Hemen örneğimize geçelim, Neler öğrendik?

  HTML nedir?

  HTML (HyperText Markup Language-Hareketli-Metin Yşaretleme Dili ) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir...

  HTMLde Temel Unsurlar

  Bu dilde binary veya hexadecimal kodlar yok. Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör.Piyasada iki tip editör bulunuyor. Birisi metin tabanlı, kod yazmayı gerektiren...

  Listeler

  Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar...

Htmle Giriş

HTML DERS 7

FTP (File Transfer Protocol)

C:> Klasör ismi> ftp (Enter)

Open bilgiegitim.com

Username: ........

Şifre(Parola): ........

Logged in gibi bir mesaj verir.

Mkdir

Cd

cd..

put index.html  Þ Bu dosyayı gönderir.

mput *.* Þ Tüm dosyaları gönderir.

mget *.* Þ Tüm dosyaları bizim bilgisayarımıza indirir.

get index.html Þ Bu dosyaya indirir.

C:>ftp

ftp>open bt-egitim.com (Enter)

            Kullanıcı Adı     :

            Password         :

Apache Þ httpdocs

Linux  Þ public – html

Windows Þ wwwroot

cd httpdocs  (Enter)

dir (Enter)  veya  ls (Enter)

mkdir Hasan (Enter)

cd Hasan (Enter)

put index.html (Enter)

HTML DERS 6

FRAME

Frame çerçeve anlamına gelir. Amacı bir web sayfasını belli parçalara bölmek ve bu parçaların içerisinde değişik, birden fazla Web sayfası görüntülemektir.

Frame
Frame	Frame

sol.html

sag.html

Þ frameset            Þ frame.html                   

İki Sayfa aç

1-) Birine “burası sag sayfa yaz” sag.html olarak kaydet

2-) “Burası sol taraf” yaz sol.html olarak kaydet.

3-) Frame için anasayfada (frame.html )

<head>

<frameset cols=150,* border=0>

            <frame src=sol.html>

            <frame src=sag.html name=ana>

</frameset>

Sol.html’yi açıp (frame.html )

<body>

<a href=http://www.yahoo.com> Yahoo </a><br>

<a href=kayan.html target=ana> Kayan Yazı </a><br>

<a href=form2.html target=ana> Form Elemanları </a><br>

<a href=sag.html target=ana> Ana Sayfaya Dön </a>

Sayfaların sag tarafta açılması için frame sayfasında sag.html için isim verilir ve bu isim linklerden sonra

<a href=kayan.html target=ana> şeklinde belirtilir.

Ust.html

Alt.html

ÞFrame.html

ust.html

<body>

<a href=http://www.turkcell.com.tr target=ana> Turkcell </a>

<a href=http://www.telsim.com.tr target=ana> Telsim </a>

<a href=http://www.aria.com.tr target=ana> Aria </a>

frame.html

<head>

<frameset rows=100,* border=0>

            <frame src=ust.html>

<frame src=alt name=ana>

</frameset>

<frameset> Takısının Parametreleri

<frameset border=0> è Çerçeveleri birbirinden ayıran çizgilerin kalınlığını belirler.

<p> Þ Paragraf satır sonu olunca kendi alta geçiyor

<p>’nin Parametreleri

<p align=left> è Paragrafı sola hizalar. (Parametre kullanılmasa da paragraf sola hizalanmış olur.)

<p align=right> è Paragrafı sağa hizalar.

<p align=center> è Paragrafı ortalar

&nbsp (Birden fazla Boşluk vermek) è Bir karakterden daha fazla boşluk vermek için kullanılır.

Örn:  ahmet &nbsp;&nbsp;nbsp; mehmet  è ahmet    mehmet şeklinde 3 karakter araya boşluk bırakır.

<nobr></nobr> è Hiçbir zaman yeni satıra geçmiyor.

 è Üst simge işareti çıkartır. Örn: m² gibi

 è Alt simge işareti çıkartır. Örn: O₂

<p> </p> è Yeni bir paragraf açıp kapatırken kullanılır.

<pre> </pre> è Önceden düzenlenmiş metin blokları için kullanılır.

<strike> </strike> è Üzeri çizili yazı oluşturmak için kullanılır. Örn: İptal edildi.

<adress> </adress> è Adres bölümleri için kullanılır. Genelde italik olarak render edilir.

<!-- -->èHTML açıklamalrı <!-- ile başlar ve --> ile biter. Bu iki tag arasında kalan bütün yazılar browser tarafından ihmal edilir

LİSTELER

Orderlist ( Sıralı Liste ); Unorderlist ( sırasız liste )

Madde imi ve numaralandırma

<ol>                             <ul>

1. a. İ.                          ð

2. b. İi.                         ·

3. c. İi                          *

Örn:

<ol type=1>

<li> Fizik

<ol type=a>

                        <li> Statik

                        <li> Dinamik

<li> Nükleer

<li> Katıhal

</ol>

<li> Kimya

            <ol type=a>

                        <li> Organik

                        <li> İnorganik

            </ol>

<li> Matematik

            <ol type=a>

                        <li> Sayılar

                        <li> Fonksiyonlar

                        <li> Diğer

                                   <ol type=i>

                                                <li> Türev

                                               <li> İntegral

                                   </ol>

            </ol>

</ol>

Görünümü Bu Şekilde

1. Fizik
   1. Statik
   2. Dinamik
   3. Nükleer
   4. Katıhal
2. Kimya
   1. Organik
   2. İnorganik

3. Matematik
   1. Sayılar
   2. Fonksiyonlar
   3. Diğer

                                           I.      Türev

                                        II.      İntegral

Madde işaretleri için ol yerlerine ul yazılır.

<li type=disc> è İçi Dolu daire

<li type=circle> è İçi boş daire

<li type=square> è İçi Dolu Kare

<ul type=disc>

<li> Fizik

<ul type=square> Yani a yerine square yaz.

i yerine de <ul type=circle> yazılır.

SCRİPTLER

Bir olay bir etkileşim varsa javascript’dir

Sagmouse.html

<head>

<scrpit language=javascript>

            function sagmouse() {

                        if (event.button= =2) {

                                   alert(“Kodlarımı Göstermem”)

                                   alert(“Kod Çalmak Yasak”)

                                   alert(“Yapma Dedim!”)

                        }

}

document.onmousedown=sagmouse

</script>

HTML DERS 5

HTML DERS 4

SAYFANIN TÜRKÇELEŞTİRİLMESİ

<head> è Sayfa hakkında bilgi içerir. Sayfada görüntülenmez.

<html>

<head>

<meta http-equiv=content-type content=text/html;charset=windows-1254>

<meta http-equiv=content-type content=text/html;charset=iso-8859-9>

<meta name=description content=”Bir cümle ile sitenin Tanmı”>

<meta name=keywords content= “Virgülle, ayrılmış, anahtar kelimeler”>

<title> Başlık </title>

</head>

<body>

</body>

</html>

RESİM EKLEMEK

Curdir è Current Directory

*.jpg, *.png, *.gif è İnternetteki Resim formatı olarak kullanılır.

*.bmp, *.tiff, *.eps, *.psd, *.cdr è Resim formatları da internette kullanılmaz.

JPG è Kalite önemli ise jpg formatı kullanılır. Fakat resimlerin arka kısmı kare şeklinde gelir.

GIF è Hareketli ve kenarları boş gelir. Yani kafa olduğu gibi gif formatında alınabilir.

Örn:

<html>

<head>

<meta http-equiv=content-type content=text/html;charset=windows-1254>

<meta http-equiv=content-type content=text/html;charset=iso-8859-9>

<meta name=description content=”Bir cümle ile sitenin Tanmı”>

<meta name=keywords content= “Virgülle, ayrılmış, anahtar kelimeler”>

<title> Resim Eklemek </title>

</head>

<body>

<img src=x.jpg>

<img src=x.jpg width=250 heigh=300>

<img src=bilgisayar.gif alt=”Güzel bir resim”>

<img src=bilgisayar.gif alt=”Güzel bir resim” width=450>

<a href=http://www.bilgiegitim.com><img src=bilgisayar.gif border=0 alt=”Güzel Bir Resim”> </a>

</body>

</html>

<img src=*.jpg>’nin Parametreleri

<img align=middle src= bilgisayar.jpg > è Yazı resmin ortasından hizalanarak yazılmaya başlar

<img align=top src =bilgisayar.gif > è Yazı resmin üstünden hizalanarak yazılmaya başlar

<img align=left src= bilgisayar.jpg> è Yazı resmin solundan yazılmaya başlar

<img align=right src= bilgisayar.jpg> è Yazı resmin sağından hizalanarak yazılmaya başlar

<img src= bilgisayar.gif alt=”???????? ?????” è Resmin üzerine gelince çıkması istenilen yazı

<img border=0 src=bilgisayar.gif> è Resmin etrafında çerçeve çıkmasını engeller.

 

TABLOLAR

<table>

<tr><td>                                              </td></tr>

<tr><td>                                  </td></tr>

Örnek:

<table border=1 width=500 height=300 bgcolor=green>

<tr><td>Hücre 1 </td><td>Hücre 2 </td></tr>

<tr><td>Hücre 3 </td><td> Hücre 4 </td></tr>

</table>

<tr> è Satır açar     

<td> è Sütun açar   

<table> Takısının Parametreleri

<table border=1> è Bu parametre hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır.

<table width=100> è Tablonun pixel cinsinden genişliğini ayarlamak için kullanılır.

<table height=50> è Tablonun pixel cinsinden yüksekliğini ayarlamak için kullanılır.

<table cellspacing=2> è Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel olarak ayarlamak için kullanılır.

<table cellpadding=5> è Hücrelerin içerisindeki metin, resim, v.s gibi web sayfası öğelerinin hücre sınırlarından uzaklıklarını ayarlamak için kullanılır.

<table bgcolor=ffff00> è Tablonun genel arka plan rengini belirlemek için kullanılır.

<table align=left> ; <table align=right>; <table align=center>è Tablonun konumunu ayarlamayı sağlar.

<table background=tugla.gif> è  Tablonun arkasına resim konulabilir.

< table bgcolor=ffff00 > è Tablonun arka zemin rengini ayarlar.

<td> Takısının Parametreleri

Burada parametre kullanarak Tablo’nun hücrelerinin içeriğini sağa, sola veya ortaya yaslayabilir. Hücrelerin arka plan renklerini ayrı ayrı değiştirebiliriz.

<td align=left> right; center è Hücrenin içerisinde yer alan metin, resim, grafik vs. gibi web sayfası öğelerini sola, sağa veya ortaya hizalayabiliriz.

<td bgcolor=00ffff> è Hücrenin arka plan rengini, diğer hücrelerden veya tablonun genel arka planından bağımsız olarak değiştirir.

<td width=250> è Hücre genişliğini belirlemek için kullanılır.

<td colspan=2> è Bu hücrenin genişliğinin 2 sütun genişliğinde olduğunu gösterir.

<td rowspan=2> è Bu hücrenin yüksekliğinin 2 satır yüksekliğinde olduğunu gösterir.

<td background=hasan.gif> è Hücrenin arka planına bir resim yerleştirir.

Örnek:

<table bordercolor=lightblue cellspacing=4 width=500>

<tr><td> A </td><td> B </td><td> C </td></tr>

<tr><td> D </td><td> E </td><td> F </td></tr>

<tr><td> G </td><td> H </td><td> I </td></tr>

</table>

è Rowspan     è Colspan
 

<body>

<table border=1>

<tr><td>A</td><td>B</td><td rowspan=2>C</td></tr>

<tr><td>D</td><td>E</td></tr>

<tr><td colspan=3>F</td></tr>

A	B	C
D	E
F

colspan è Sütun Birleştir

rowspan è Satır Birleştirir