Dersimiz HTML

- GALERİ ŞİFRESİ 159852x5er

- GALERİ ŞİFRESİ 155852x5er

- GALERİ ŞİFRESİ 159552x5er

- GALERİ ŞİFRESİ 159152x5er

- GALERİ ŞİFRESİ 159352x5er

< Form > Dosya Seç , Dosya Yükle Butonu

HTML De Dosya Yükleyip İşlem Yapmak İçin Kullandığımız Metotlardır

Sitede Aşağıdaki Gibi Görünecektir

HTML DOSYASINI İNDİRİN

< form > Reset Gönder Butonları

Reset

Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar.

Kullanımı:

< input type="reset" >

“Value” özelliği, düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.

Submit

Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılır.

Kullanımı:

< input type="submit" >

"Value” özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.

Örnek:

HTML DOSYASINI İNDİRİN

Aşağıdaki örnekte size özelliğine “3” değeri atanmıştır. Listede yer alan elemanlardan 3 tanesinin ekranda görüntüleneceğini göstermektedir. Size özelliği listeden yer alan elemanlardan istediğiniz kadarının ekranda görüntülenmesini ayarlamak için kullanılır. Multiple özelliği ise Ctrl tuşu kullanarak birden fazla seçim yapmamıza olanak sağlamaktadır.

ÖRNEK :

Yukarıdaki kodu kaydedip çalıştırdığımız zaman tarayıcıdaki görüntü aşağıdaki gibi olacaktır.

HTML DOSYASINI İNDİRİN

Açılır Menüler

Hazırlamakta olduğunuz formlara

HTML DOSYASINI İNDİRİN

< Form > < Textarea > Kullanımı

Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken Textarea kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz.

Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir.

Örnek:

Sitedeki Görünümü Aşağıdaki Gibidir

HTML DOSYASINI İNDİRİN

< Form > < Password > Kullanımı

Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulur.

Örnek:

Görüntü aşağıdaki gibidir

HTML DOSYASINI İNDİRİN

< Form > < Text > Kullanımı

Hazırlamakta olduğunuz forma, tek satırlık yazı yazılabilecek alan (textbox) eklemek için kullanılır. Bu alan ile birlikte size maxlength özelliklerini de kullanabilirsiniz.

Örnek:

Kodu Kaydedip Çalıştırdığımızda Aşağıda ki GÖrüntü ortaya çıkacaktır

HTML DOSYASINI İNDİRİN

< Form > < Radio > Kullanımı

Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin ayni olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.

Radio butonları işaretlemek için checked="on" Komutunu Eklememiz Yetecektir

Örnek:

Kodları Yazıdğımızda Sİtemiz de Böyle Görünür

HTML DOSYASINI İNDİRİN

< Form > < CheckBox > Kullanımı

Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar.

checkbox ları işaretlemek için checked="on" Komutunu Eklememiz Yetecektir

Örnek:

Yukarıdaki kodu yazıp tarayıcıda çalıştırdığımızda aşağıdaki görüntü elde edilecektir.

Checked özelliği ile sayfa yüklendiği zaman görüntülenmesini istediğimiz seçenekler belirlenir.

HTML DOSYASINI İNDİRİN

< Form > < İnput > Kullanımı

Aşağıda < input > etiketinin kullanımı ile ilgili örnek gösterilmiştir.

Yukarıdaki kodları kaydedip çalıştırdığımızda tarayıcıdaki görüntü aşağıdaki şekilde olacaktır.

HTML DOSYASINI İNDİRİN

FORMLAR < form >

etiketleri arasında yer alır.

Genel Kullanımı:

Örnek:

< frameset >

Çerçeve oluşturmak için kullanılan etikettir. Bu komut ile tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutlarının ne kadar olacağı belirlenir.

Kullanımı:

< frameset > Çerçeve Derteklenmiyor Uyarısı Komutu

Bazı tarayıcılar çerçeve özelliğini desteklemeyebilir. Bu tür durumlarda sayfaya etiketi kullanarak mesaj yazılması sağlanır ve kullanıcının bu komutla belirlenen mesajla karşılaşması sağlanır.

HTML DOSYASINI İNDİRİN

< frameset > İç İçe Çerçeve Oluşturma

rameset> etiketi, aynı pencere içerisinde yatay ve dikey çerçeveleri birlikte kullanmanıza olanak sağlar.

Yukarıdaki kodu yazıp kaydettiğimiz zaman tarayıcıdaki görüntüsü Aşağıdaki Resim Gibi Olacaktır

HTML DOSYASINI İNDİRİN

< frameset > Sayfada Yatay Sütunlar Açma

Rows

etiketi ile kullanılan bir diğer parametre ise rows parametresidir. Ekranı yatay olarak (satırlar halinde) tanımlanan boyutlarda bölmek için kullanılır.

Kullanımı:

Örnek:

HTML DOSYASINI İNDİRİN

< frameset > Sayfada Dikey Sütunlar Açma

Cols

Çerçeve oluşturmak için kullanılan etikettir. Bu komut ile tarayıcı penceresinin kaç parçaya bölüneceği (çerçeve sayısı) ve bu çerçevelerin boyutlarının ne kadar olacağı belirlenir.

Kullanımı :

Bu etiketle birlikte kullanılacak iki parametre vardır. Bunlar Cols ve Rows parametreleridir.

Cols :

etiketi ile kullanılan parametrelerden birisidir. Ekranı dikey olarak (sütunlar halinde) tanımlanan boyutlara bölmek için kullanılır.

Kullanımı:

Örnek 1 :

Buradaki 1.sütun sayfanın %30’u genişliğinde, 2. Sütun %40’ı genişliğinde ve 3. sütun ise %30’u genişliğinde boyutlandırılmıştır.

ÖRNEK

SİTEDE BU ŞEKİLDE GÖRÜNÜR

HTML DOSYASINI İNDİRİN

OKul da Yapılan okul web sayfası

İNDİR

Ev Ödevi-4

Kodlar:

<html>
<head>
</head>
<body>

<table>
<tr>
<td width="150"height="150"><img src="images/r1.jpg" width="150"height="150"></td>
<td><h1>Sakarya Üniversitesi Karasu Meslek Yüksekokulu</h1></td>
<td><a href="#">Web Sitemiz Hakkında</a></td>
</tr>
<tr>
<td><a href="#">Öğrenciler</a></td>
<td colspan="2">Yükesek okulumzda Bilgisayar Teknolojisi ve Programlama,Turizm ve Otel İşletmeciliği ve Muhasebe Programları bulunmaktadır.</td>
</tr>
<tr>
<td><a href="#">Okulumuz</a></td>
<td colspan="2" text color ="red"><font size="5"color="red">Karasu</font></td>
</tr>
<tr>
<td><a href="#">Personel</a></td>
<td colspan="2"><ul><li>Oteller ve Pansiyonlar<li>Tarihi Yerler<li>Deniz ve Kum</ul></td>
</tr>
<tr>
<td><a href="#">E-Mail Gönder</a></td>
<td colspan="2" > </td>

</tr>
<tr>
<td> </td>
<td colspan="2">Bu WEB sayfası Karasu MYO öğrencileri tarafından yapıştır.</td>
</tr>

</body>
</html>

Html Dosyasını İndirmek İçin Tılayınız

Ev Ödevi-3

Kodlar:
<html>
<head>
</head>
<body>

<table>
<tr>
<td valign ="top" width="350"height="50" background="images/b1.png">Modül Adı</td>
<td valign ="top" width="100"height="50" background="images/b2.png">Modül Durum</td>
<td valign ="top" width="100"height="50" background="images/b3.png">Değerlendirme Formu</td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Betik Dili(javascript)</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Betik%20Dili%20(javascript).pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseout="this.style.background='#D9D9D9'" onmouseover="this.style.background='#FFFFCC'">
<td>Etkileşimli Web Uygulamaları İçin Temel İşlemler</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Etkile%C5%9Fimli%20Web%20Uygulamalar%C4%B1%20%C4%B0%C3%A7in%20Temel%20%C4%B0%C5%9Flemler.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Etkileşimli Web Uygulamalarına Giriş </td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Etkile%C5%9Fimli%20Web%20Uygulamalar%C4%B1na%20Giri%C5%9F.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#D9D9D9'">
<td>Etkileşimli Web Uygulamalarında İşlemler</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Etkile%C5%9Fimli%20Web%20Uygulamalar%C4%B1nda%20Veri%20Taban%C4%B1%20%C4%B0%C5%9Flemleri.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Etkileşimli Web Uygulamalarında Web Formatları</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Etkile%C5%9Fimli%20Web%20Uygulamalar%C4%B1nda%20Web%20Formlar%C4%B1.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#D9D9D9'">
<td>Html İle Basit Web İşlemleri</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Html%20Ile%20Basit%20Web%20%C4%B0%C5%9Flemleri.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Html İle Gelişmiş Web İşlemleri</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Html%20Ile%20Geli%C5%9Fmi%C5%9F%20Web%20%C4%B0%C5%9Flemleri.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#D9D9D9'">
<td>Stil Şablonu</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Stil%20%C5%9Eablonu%20(css).pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Tasarımın Temel İlkeleri</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Tasar%C4%B1m%C4%B1n%20Temel%20%C4%B0lkeleri.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#D9D9D9'">
<td>Web Tasarım Editörü İle Veri Tabanı İşlemleri</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Web%20Tasar%C4%B1m%20Edit%C3%B6r%C3%BC%20Ile%20Veri%20Taban%C4%B1%20%C4%B0%C5%9Flemleri.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#CCFFCC'">
<td>Web Tasarım Editöründe İleri Uygulamalar</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Web%20Tasar%C4%B1m%20Edit%C3%B6r%C3%BCnde%20%C4%B0leri%20Uygulamalar.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
<tr onmouseover="this.style.background='#FFFFCC'" onmouseout="this.style.background='#D9D9D9'">
<td>Web Tasarım Editörüne Giriş</td>
<td><a href="http://www.megep.meb.gov.tr/mte_program_modul/moduller_pdf/Web%20Tasar%C4%B1m%20Edit%C3%B6r%C3%BCne%20Giri%C5%9F.pdf">Hazır/İndir</a></td>
<td align="center"><a href="#"><img src="images/f.png"></a></td>
</tr>
</table>

</body>
</html>

HTML Dosyasını İndirmek İçin Tıklayınız

Tabloda Yazıyı Sağa , Ortaya , Alt , Ve üste Hizalama

Tablo İçinde Yazıyı Sağa Yaslamak İçin align="right" Üst e Yaslamak İçin Valign="top" Alta Yaslamak İçin Valign="bottom" Ortaya Hizalamak İçin Valign="middle" Kullanılmalıdır

Kodlar:

<html>
<head>
</head>
<body>

<table border="1" width="120">

<tr>
<td height="20" align="right">hücre1</td>

</tr>
<tr>
<td height="40" Valign="middle" > h2 </td>

</tr>
<tr>
<td height="60" Valign="top"> h3 </td>

</tr>
<tr>
<td height="80" Valign="bottom"> h4 </td>
<center>
</tr>
</body>
</html>

Sitede Böyle Görünür

HTML DOSYASINI İNDİRİN

Tabloda Hücre Birleştirmek

Colspan

Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.

ÖRNEK :

SİTEDEKİ GÖRÜNÜMÜ

Rowspan

Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır

ÖRNEK :

SİTEDEKİ GÖRÜNÜMÜ

Kodlar:

<html>
<head>
   </head>
   <body>
       <table border="2" cellpadding="12">
          <tr>
             <td colspan="2">A</td>
             <td>C</td>
             <td rowspan="3">D</td>
          </tr>
          <tr>
              <td>E</td>
              <td>F</td>
              <td>G</td>

         </tr>
         <tr>
              <td>I</td>
              <td colspan="3">J</td>

        </tr>
       </table>
    </body>
</html>

HTML DOSYASINI İNDİRİN

Tablo Hücresine Resim Ekleme Ve Resime Bağlantı Verme

Hücre İçine Resim Eklemek Ve Resime Bağlantı Vermek İçin: <td> <a href="a.jpg" target="_blank"> </a></td> Kodlarının kullanılması Gerekmektedir.

Kodlar :

HTML DOSYASINI İNDİRİN

Dersimiz HTML

Galeri Şifresi

- GALERİ ŞİFRESİ 159852x5er

- GALERİ ŞİFRESİ 155852x5er

- GALERİ ŞİFRESİ 159552x5er

- GALERİ ŞİFRESİ 159152x5er

- GALERİ ŞİFRESİ 159352x5er

Site Arşivi

Ev Ödevi -6

< Form > Dosya Seç , Dosya Yükle Butonu

Ev Ödevi -5

< form > Reset Gönder Butonları

Açılır Menüler -2

Açılır Menüler

< Form > < Textarea > Kullanımı

< Form > < Password > Kullanımı

< Form > < Text > Kullanımı

< Form > < Radio > Kullanımı

< Form > < CheckBox > Kullanımı

< Form > < İnput > Kullanımı

FORMLAR < form >

< frameset >

< frameset > Çerçeve Derteklenmiyor Uyarısı Komutu

< frameset > İç İçe Çerçeve Oluşturma

< frameset > Sayfada Yatay Sütunlar Açma

< frameset > Sayfada Dikey Sütunlar Açma

OKul da Yapılan okul web sayfası

Ev Ödevi-4

Ev Ödevi-3

Tabloda Yazıyı Sağa , Ortaya , Alt , Ve üste Hizalama

Tabloda Hücre Birleştirmek

Tablo Hücresine Resim Ekleme Ve Resime Bağlantı Verme