Pertemuan 6(Pemograman Website)

Quis kedua

Cara Membuat Frame Pada website HTML

                 Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian ataupun membuat bingkai pada website html. Setiap bagian kita isi dengan sebuah halaman web yang kita inginkan .
Frame dapat digunakan untuk Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya

Langkah-langkah Membuat Frame

1. Membuat Frame Masternya

2.Membuat Web Isi Frame kedua

3.Membuat web yang apabila kita mengklik item di frame kedua akan muncul pada frame ketiga

-Pertama, Buka Notepad atau notepad++

-Kedua, Membuat Web Frame 

 

Tampilan Script Web Frame Utama

 

Tampilan Script Frame 1

 

Tampilan Script Frame 2

 

Tampilan Script Frame 3 

 

Tampilan Hasil Dari Script-Script Diatas

-Ketiga, Membuat Isi Menu Frame 2 yang terdiri dari Halaman Biodata,Jadwal, Dan Absen

 

Tampilan Script Halaman Biodata

 

 Tampilan Hasil Script Halaman Biodata

 

Tampilan Script Halaman Jadwal  

 

Tampilan Hasil Script Halaman Jadwal

 

Tampilan Script Halaman Absen

Note : Script yang saya minimize sama seperti script yang diatas hanya beda namanya saja tetapi formatnya sama 

 

Tampilan Hasil Script Halaman Absen

Pertemuan 5(pemograman website)

Cara Memasukkan Gambar Pada Html

-Pertama,Masukkan Kode Script berikut pada notepad atau notepad ++

 

Gambar 5.1.1 Tampilan Script latihan tag gambar

-Kedua,Save file dengan format .html

-Ketiga,Buka browser dan bukalah file anda

-Keempat,Hasilnya Akan tampil seperti ini

 Gambar 5.1.2 Tampilan Hasil Dari script tag gambar 

Cara Memasukkan Gambar dengan perintah <ALT>

               Atribut alt ( alternative description ) merupakan atribut yang berfungsi sebagai keterangan atau deskripsi dari gambar jika gambar tersebut gagal ditampilkan oleh web browser. Atribut alt juga berperan penting untuk search engine seperti Google yang meng-index seluruh isi situs dengan cara memproses tulisan yang ada. Pentingnya atribut alt untuk sebuah gambar karena google tidak mengerti bentuk dari gambar tanpa menambahkan deskripsi pada sebuah gambar.

-Pertama, Masukkan Script Kode berikut pada notepad atau notepad ++

Gambar 5.2.1 Tampilan Script Tag gambar menggunakan alt

-Kedua,Simpan File dengan Format .html

-Ketiga,Buka browser anda dan buka file anda

-Keempat, hasilnya akan tampil seperti ini

Gambar 5.2.2 Tampilan Hasil Tag gambar menggunakan alt

note : Perintah ALT sebagai keterangan  gambar apabila gambar tidak di deteksi oleh web. Hal ini memang saya sengajai agar kita bisa mengetahui fungsi perintah ALT

Cara Membuat Tabel Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.3.1 Tampilan Script pembuatan tabel pada html

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.3.2 Tampilan Hasil Pembuatan tabel pada html

Cara Membuat Tabel Dengan Perintah Align&Valign Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.4.1 Tampilan Script Tabel Align&Valign

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.4.2 Tampilan Hasil Tabel Align&Valign

Cara Membuat Tabel Dengan Perintah Cellpadding dan Cellspacing Pada HTML

  

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.5.1 Tampilan Script Tabel dengan Cellpadding&Cellspacing

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.5.2 Tampilan Hasil Tabel dengan Cellpadding&cellspacing

Cara Membuat Tabel Dengan Perintah Rowspan dan Colspan Pada HTML

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.6.1 Tampilan Script Pembuatan tabel dengan rowspan&colspan

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.6.2 Tampilan Hasil Pembuatan tabel dengan rowspan&colspan

Cara Membuat Frame Dengan tambahan hyperlink tulisan berjalan (marquee) dan kedap-kedip (blink)

-Pertama, Masukkan Kode Script berikut pada notepad atau notepad++

Gambar 5.7.1 Tampilan Script

-Kedua, Save file anda dengan format .html

-Ketiga, Buka browser anda dan buka file anda

-keempat, Hasilnya akan tampil seperti ini

Gambar 5.7.2 Tampilan Hasil Dari Script diatas

Pertemuan 4(pemograman website)

Quis Pemograman website

Soal
 Buatlah tampilan menu utama dengan melakukan link ke beberapa file, dengan ketentuan sebagai berikut:
          Buatlah Folder dengan Nama Nim Anda
          Contoh:21615012, kemudian isi File Terdiri dari
          A. File Master MEREK
          B. File TELEVISI
          C. File KOMPUTER
          D. File AC.
 
Jawab
  
A. Membuat Website File Master Merek

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html

Gambar 4.1 Tampilan Script Menu Utama(file master merek)

          Output(Hasil) Akan tampil seperti ini

 

Gambar 4.2 Tampilan Hasil File Master Merek 

B. Membuat Website Televisi

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

Gambar 4.3 Tampilan Script Website televisi

          Output(Hasil) Akan tampil seperti ini

Gambar 4.4 Tampilan Hasil Script website televisi

C. Membuat Website Komputer

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

 

Gambar 4.5 Tampilan Script website komputer 

          Output(Hasil) Akan tampil seperti ini

 

Gambar 4.6 Tampilan Hasil Script website komputer

 

 D. Membuat Website AC

         Input(masukkan) Script Berikut pada notepad atau notepad ++ kemudian save dalam format .html 

.

 

Gambar 4.7 Tampilan Script website AC

 

          Output(Hasil) Akan tampil seperti ini

 

  

Gambar 4.8 Tampilan Hasil Script website AC