Modul Web New

PERTEMUAN 1
Pengantar HTML
PENGENALAN HTML
HTML ( HyperText Markup Language ) yaitu bahasa pemrograman untuk membangun
sebuah website. Untuk membangun sebuah website dan mengakses sebuah website
dibutuhkan beberapa aplikasi yaitu :
1. Editor Program, digunakan untuk menulis kode program ( source code ) HTML. Editor
Program yang banyak digunakan adalah, Textpad, Notepad++, Netbeans, Eclips,
DreamWeaver, dll.
2. Web Server, sebaga server untuk melayani permintaan client. Biasanya menggunakan
Apache AppServ, Xampp, Xintami, IIS.
3. Web Browser, berfungsi untuk mengakses halaman web.
Struktur dasar HTML

<html> Tag <html> sebagai tanda bahwa kode program yang
<head> digunakan adalah HTML.
<title>…………….</title>
Tag <head> berfungsi sebagai kepala pada HTML yang di
</head>
dalamnya nanti akan berisi judul halaman web.
<body>
……………. Tag <title> terletak di dalam tag <head> untuk menuliskan
</body> judul dari halamn web.
</html>
Tag <body> berfungsi untuk menulis content dalam sebuah
web.
Catatan :
1. Setiap penulisan kode program harus dibuka dengan Tag <….…> dan di akhiri dengan tag
</…….>
2. Untuk penulisan source code menggunakan huruf kecil semua.
3. Setiap program HTML harus di simpan dengan extensi.html
PRAKTIKUM 1
Tulislah source code dibawah ini dan simpan dengan praktikum1.html
<html>
<head>
<title> PRAKTIKUM 1 </title>
</head>
<body>
Ini PRAKTIKUM 1
</body>
</html>
Simpan Source code di C:\xampp\htdocs\praktikum\
1 Modul HTML DASAR copyright@ardyne2016 | Rev.001

title
Hasil :
nama berkas
Body (isi halamn web)
PRAKTIKUM 2
Ubahlah source code PRKTIKUM 1 menjadi seperti berikut :
<html>
<head>
<title>PRAKTIKUM 2</title>
</head>
<body>
<p>
<h1>Ini PRAKTIKUM 2</h1>
Perbedaan Web statis dan Web dinamis :
- Web statis adalah website yang berisi informasi yang bersifat statis
(tetap)
- Web dinamis adalah website yang berisi informasi yang bersifat
dinamis (berubah-ubah) dan mengandung interaksi manusia dan
komputer
</p>
</body>
</html>
Catatan :
1. Tambahkan Tag <br /> di setiap akhir kalimat.
2. Ubahlah Tag <h1> menjadi <h5>.
3. Tambahkan Tag <hr /> di belakang </h1>

TUGAS PERTEMUAN 1
1. Buatlah sebuah halaman html seperti dibawah ini, dan simpan dengan nama
tugas1.html
2. Berikan title Tugas 1 / NAMA ANDA :

PERTEMUAN 2
Bekerja dengan Text

MENAMPILKAN TEXT PADA HTML
Seperti yang sudah di jelaskan pada halaman sebelumnya, penulisan teks pada halaman
HTML diletakkan dalam Tag <body> …… </body>. Namun untuk pengaturan teks membutuhkan
beberapa Tag yang lainnya.
Berikut adalah beberapa Tag yang sering digunakan dalam pengaturan teks pada
halaman HTML :
No. Tag Fungsi
1 <font> Mengatur jenis, ukuran, dan juga warna font. Dalam Tag ini bisa
mengandung banyak atribut.
2 <div> Mengatur teks yang memiliki karakteristik yang sama.
3 <center> Mengatur posisi teks agar berada pada posisi di tengah.
4 <i> Menampilkan teks dalam bentuk miring (italic).
5 <b> Menampilkan teks dalam bentuk tebal (bold).
6 <u> Menampilkan teks dalam bentuk garis bawah (underline).
7 <small> Menampilkan teks lebih kecil dari pada ukuran normal.
8 <big> Menampilkan teks lebih besar dari pada ukuran normal.
9 <tt> Menampilkan teks dalam jenis teks seperti tulisan mesin ketik.
PRAKTIKUM 1
Ketiklah source code berikut :

Hasil :
Atribut adalah sebuah Tag yang hanya bisa digunakan dalam sebuah Tag utama. Berikut
adalah beberapa contoh atribut :
No. Atribut Fungsi
1 size Atribut yang digunakan untuk menentukan ukuran huruf biasanya dituliskan
dalam tag <font> dengan bentuk ( px atau pt ).
2 align Atribut ini digunakan untuk mengatur posisi teks rata kiri (left), tengah
(center), kanan (right), atau rata kiri kanan (justify).
3 noshade Atribut ini berfungsi untuk menghilangkan bayangan pada garis
4 width Atribut ini berfungsi untuk mengatur lebar garis, table, atau frame.
5 height Atribut ini berfungsi untuk mengatur tinggi garis, table, atau frame.
6 bgcolor Atribut ini digunakan untuk memberikan warna pada background.
7 color Atribut ini berfungsi untuk memberikan warna pada teks atau garis.
Catatan : Masih banyak atribut yang belum saya sertakan dalam table di atas.
PRAKTIKUM 2
Ketiklah source code berikut :

Hasil :
Berikut Tag item list (bullet) dalam HTML :

No. Tag Fungsi
1 <ul> Menampilkan item list tapa penomoran.
2 <li> Menambahkan bullet pada masung-masung list.
3 <ol> Menampilkan item list dengan nomor terurut.
4 <dir> Menampilkan daftar tanpa penomora untuk mengetahui direktori.
5 <menu> Menampilkan menu pilihan tanpa penomoran.
Atribut untuk membuat bullet :

No. Type Bullet
1 circle
2 disk
3 square
PRAKTIKUM 3
Ketiklah source code berikut dan lihatlah hasilnya :
Catatan :
1. Ubahlah “Soto Ceker Ayam” menjadi teks tebal.
2. Berilah garis bawah dan warna merah pada teks “Nasi Goreng Hitam”
3. Gntilah tag <li> dengan tag <ol> dengan tipe list dimulai dari A

TUGAS PERTEMUAN 2
1. Buatlah sebuah halaman html seperti dibawah ini, dan simpan dengan nama
tugas2.html
3. Jenis font Calibri, ukuran font 4px

PERTEMUAN 3
PERTEMUAN 2
Membuat Link, Menyisipkan
Gambar & Multimedia
Membuat Link
Secara umum link digunakan untuk menghubungkan halaman web stu dengan halaman
web yang lainnya.
Penulisan link mengggunakan tag <a href=”(alamat yang di tuju)”> ………. </a>.
Penulisan link bisa absolute (link yang dibuat untuk menghubungkan dengan alamat web lain di
internet) dan relative (link yang dibuat untuk menghubungkan dengan halaman web lain dalam
folder yang sama).
Berikut adalah beberapa atribut yang bisa digunakan dalam penulisan link :
No. Atribut Fungsi
1 link Menentukan warna link.
2 alink Menentukan warna link ketika di klik dan halaman link sebelum di buka.
3 vlink Menentukan warna link jika link tersebut sudah pernah dibuka.
4 tabindex Menentukan urutan link pada halaman web dengan memanfaatkan tombol
tab.
5 target Menampilkan halaman link dengan membuaka jendela browser yang baru.
Nilai yang ada untuk target yaitu blank, parent, top, self.
PRAKTIKUM 1
Ketiklah source code berikut dan simpan dengan nama ( datapribadi.html ):
Kemudian ketik juga source code berikut dan simpan dengan nama ( dataorangtua.html ):

Terakhir ketik source code berikut dan simpan dengan nama ( link.html ):
Catatan : Pastikan ke-3 source code diatas disimpan dalam satu folder.
1. Tambahkan atribut alink dan vlink pada link DATA PRIBADI
2. Tambahkan atribut target blank pada link DATA ORANG TUA
Menyisipkan Gambar
Tag yang digunakan adalah <img> dan atributnya SRC, contoh : <img
src=”nama_gambar.exstention”/>. Alamat SRC bisa absolute dan relative.
No. Atribut Fungsi

1 src Mengatur source gambar yang akan ditampilkan
2 alt Alternative description digunakan untuk menampilkan judul gambar
3 width Digunakan untuk mengatur lebar gambar. Stuannya adalah pixel (px)
4 height Digunakan untuk mengatur tinggi gambar. Stuannya adalah pixel (px)
5 border Menampilkan garis tepi gambar.
6 align Mengatur posisi gambar di kiri, kanan, atau tengah halaman website
7 style Menambahkan style css kedalam gambar
PRAKTIKUM 2
Buatlah folder images dan copy-kan gambar yang akan anda sisipkan pada folder images.
Ketiklah Source Code berikut dan lihat hasilnya :
Catatan :
1. Ubah ukuran gambar dengan lebar 20pixel dan tinggi 50pixel
2. Berilah garis tepi pada gambar

Menyisipkan Audio
Tag yang digunakan adalah <img> dan atributnya SRC, contoh : <audio
src=”nama_audio.exstention”/>. Alamat SRC bisa absolute dan relative.
No. Atribut Fungsi

1 src Mengatur source audio yang akan ditampilkan
2 autoplay Menentukan bahwa audio akan diputar secara otomatis
3 controls Menampilkan control audio, seperti tombol play/pause, stop, dll.
4 loop Memutar audio berulang-ulang secara otomatis
5 muted Digunakan untuk membisukan audio
6 preload Menunjukkan seberapa penting audio harus diload ketika halaman web di
muat
PRAKTIKUM 3
Buatlah folder audio dan copy-kan audio yang akan anda sisipkan pada folder audio.
Catatan :
1. Tampilkan tombol control pada audio
2. Aturlah audio sound dengan default-nya bisu
Menyisipkan Video
Tag yang digunakan adalah <video> dan atributnya SRC, contoh : <video
src=”nama_video.exstention”>. Alamat SRC bisa absolute dan relative.
No. Atribut Fungsi

1 src Mengatur source video yang akan ditampilkan
2 autoplay Menentukan bahwa video akan diputar secara otomatis
3 controls Menampilkan control video, seperti tombol play/pause, stop, dll.
4 loop Memutar video berulang-ulang secara otomatis
5 muted Digunakan untuk membisukan video
6 preload Menunjukkan seberapa penting video harus diload ketika halaman web di
muat

7 width Digunakan untuk mengatur lebar pemutar video. Stuannya adalah pixel (px)
8 height Digunakan untuk mengatur tinggi pemutar video. Stuannya adalah pixel (px)
9 poster Merujuk gambar yang akan dijadikan poster frame sebelum video diputar
PRAKTIKUM 4
Buatlah folder video dan copy-kan video yang akan anda sisipkan pada folder video.
Catatan :
1. Tampilkan tombol control pada video
2. Aturlah video sound dengan default-nya bisu
3. Ubahlah ukuran pemutar video dengan lebar 80pixel dan tinggi 45pixel
TUGAS PERTEMUAN 3
1. Buatlah sebuah halaman web dengan 2 link gambar yaitu link untuk memutar audio dan
link untuk memutar video, dan simpan dengan nama tugas3.html berikut hasilnya

3. Jika gambar audio di klik, maka akan menuju sebuah halaman web yang berisikan
pemutar music, seperti berikut (simpan dengan nama file link1.html)
4. Jika gambar video di klik, maka akan menuju sebuah halaman web yang berisikan
pemutar video dengan ukuran tinggi 200 pixel, dan lebar 300 pixel, seperti berikut
(simpan dengan nama file link2.html)
5. File gambar, video, dan audio bisa di download di URL berikut

PERTEMUAN 4
PERTEMUAN 2
Mengenal Tabel Pada HTML
Membuat Tabel
Dalam Website, table biasanya digunakan untuk mengatur content informasi agar
terlihat rapi. Berikut Struktur pembuatan table pada HTML :
sel kolom
baris sel
sel
sel sel
sel sel sel
Catatan : Karena table terdiri dari baris dan kolom, maka sebelum membuat bentuk table
disarankan untuk menggambar manual dahulu.
Adapun atribut yang bisa ditulikan dalam Tag <table> antara lain :
No. Atribut Fungsi
1 border Menampilkan garis table dengan memberikan nilai pada border.
2 bgcolor Membuat warna pada background.
3 height Mengatur tinggi table (sel)
4 width Mengatur Panjang table (sel)
5 cellspacing Megatur jarak pada bagian sel terhadap tepi dalam bingkai table
6 cellpadding Mengatur jarak teks terhadap tepi kiri
Adapun atribut yang bisa ditulikan dalam Tag <tr>, <td> antara lain :
No. Atribut Fungsi
1 rowspan Digunakan dalam <td> untuk menggabungkan baris
2 colspan Digunakan dalam <th> atau <td> untuk menggabungkan kolom
3 align Mengatur peletakan teks dengan member nilai left, right, atau center.
4 valign Mengatur posisi teks secara vertical dengan memberikan nilai top, middle,
atau bottom

PRAKTIKUM 1
Ketiklah source code berikut dan perhatikan hasilnya :
TUGAS PERTEMUAN 4
3. Panjang tabel 120 pixel, dan lebar tinggi tabel 40 pixel
4. Warna kolom RT, kolom Gender, dan background #FBAA17, warna kolom judul
#6AADDA, warna kolom warga #96C64D

PERTEMUAN 5
PERTEMUAN 2
Formulir
Inisialisasi Form HTML
Form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna atau
bisa dikatakan sebagai interaksi manusia dan komputer.
Pembuatan form mengggunakan tag <form> ………. </form>, dan ada beberapa elemen
penyusun form yaitu :
1. Elemen Masukan (Input), Elemen ini digunakan untuk media pengisian data dengan
cara diketik
2. Elemen Pilihan (Options), Elemen ini digunakan untuk media pilihan data, biasanya
pilihan sudah disediakan oleh website
3. Elemen Tombol (Button), Elemen ini digunakan untuk media pengiriman data
Adapun atribut yang bisa di tuliskan pada tag <form> sebagai berikut :
No. Atribut Fungsi
1 action Berfungsi untuk menjelaskan kemana data form akan dikirim. Biasanya berisi
data file php
2 method Berfungsi untuk menjelaskan bagaimana data isian form akan dikirim. Nilai
dari atribut ini bisa berupa “get” atau “post”.
“get” berfungsi untuk menerima nilai dari form lain, sedangkan “post”
berfungsi untuk mengirim nilai dari form
Elemen Masukan (Input) Jenis Text Field

Tag yang digunakan adalah <input>…..</input>. Tag ini digunakan untuk jenis masukan
Text Field, dan ada banyak sekali tipe dari jenis ini serta fungsinya pun berbeda.
Adapun atribut yang bisa di tuliskan pada tag <input> sebagai berikut :
No. Atribut Fungsi
1 type Menentukan tipe Text Field.
Dalam tag ini memiliki beberapa nilai yaitu:
1. Text (masukan berupa alphabetic)
2. Password (masukan berupa password)
3. CheckBox (masukan berupa centangan)
4. Radio (masukan berupa pilihan)
5. Submit (tombol pemroses form)
6. Reset (tombol mengembalikan form menjadi kosong)
7. Number (masukan hanya berupa angka)
8. Date (masukan berupa tanggal, bulan, tahun. Formatnya
dd/mm/yy)
9. Month (masukan berupa bulan dan tahun)
10. File (masukan berupa file dari computer), dll.
2 placeholder Pengganti label
3 name Memberi nama informasi atau nama sifat yang akan ditambahkan pada
komponen masukan, options atau button

4 value Nilai yang akan di simpan pada database, bisa bersifat statis atau dinamis
Elemen Masukan (Input) Jenis Text Area

Tag yang digunakan adalah <Textarea>…..</ Textarea >. Tag ini digunakan untuk jenis
masukan Text Area.
Adapun atribut yang bisa di tuliskan pada tag <input> sebagai berikut :
No. Atribut Fungsi
1 width Digunakan untuk mengatur lebar Textarea. Stuannya adalah pixel (px)
2 height Digunakan untuk mengatur tinggi Textarea. Stuannya adalah pixel (px)
PRAKTIKUM 1
Ketiklah source code berikut simpan dengan nama CobaFormInput.html dan perhatikan
hasilnya
Elemen Pilihan (Options) Jenis ComboBox

Elemen ini berfungsi sama dengan Elemen Input dengan tipe “radio”, namun berbeda
bentuk pemilihannya, dan biasanya terdapat banyak opsi pemilihan. Adapun strukturnya
sebagai berikut :
<select>
<option>…….</option>
<option>…….</option>
</select>
Adapun atribut yang bisa di tuliskan pada tag <Select> sebagai berikut :
No. Atribut Fungsi
Dan atribut yang bisa di tuliskan pada tag <Option> sebagai berikut :
No. Atribut Fungsi

PRAKTIKUM 2
Ketiklah source code berikut simpan dengan nama CobaOption.html dan perhatikan hasilnya
Elemen Button (Tombol)

Elemen ini berfungsi sama dengan Elemen Input dengan tipe “submit atau reset”,
namun ada tag lain untuk membuat tombol pada form dan berdiri sendiri namun biasanya ada
tambahan menggunakan tag anchor agar bisa digunakan, tag yang digunakan adalah
<button>…</button> :
PRAKTIKUM 3
Ketiklah source code berikut simpan dengan nama CobaButton.html dan perhatikan hasilnya
Kemudian ketiklah source code berikut simpan dengan nama login.html

Organisasi Form
Organisasi form merupakan informasi tambahan untuk melengkapi elemen masukkan
pada form. Pada organisasi form ada 3 jenis elemen yaitu :
A. Label
Elemen ini berfungsi memberikan fasilitas untuk menambahkan teks pada elemen
masukan form. Elemen ini menggunakan tag <label>…</label>
No. Atribut Fungsi
1 for Memberi informasi tambahan untuk elemen masukan yang dituju
B. Fieldset
Elemen ini berfungsi untuk membungkus beberapa elemen label. Elemen ini
menggunakan tag <fieldset>…</fieldset>
C. Legend
Elemen ini berfungsi untuk memberikan judul pada fildset. Elemen ini menggunakan tag
<legend>...</legend>
PRAKTIKUM 4
Ketiklah source code berikut simpan dengan nama CobaOrganisasi.html dan perhatikan
hasilnya
Kemudian ketiklah source code berikut simpan dengan nama login.html

TUGAS PERTEMUAN 5
3. Jenis method form adalah post
4. Jenis font Calibri, dan ukuran 4 pixel
5. Ukuran font judul fildset register 8 pixel
6. Jika tombol DAFTARKAN di klik maka akan mengarah ke halaman baru seperti gambar
dibawah ini (simpan halaman dengan nama register.html)


Modul Web New

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web New

Diunggah oleh

Hak Cipta:

Format Tersedia

PERTEMUAN 1

Struktur dasar HTML

1 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Body (isi halamn web)

2 Modul HTML DASAR copyright@ardyne2016 | Rev.001

3 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Bekerja dengan Text

4 Modul HTML DASAR copyright@ardyne2016 | Rev.001

5 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Berikut Tag item list (bullet) dalam HTML :

Atribut untuk membuat bullet :

6 Modul HTML DASAR copyright@ardyne2016 | Rev.001

7 Modul HTML DASAR copyright@ardyne2016 | Rev.001

8 Modul HTML DASAR copyright@ardyne2016 | Rev.001

No. Atribut Fungsi

Ketiklah Source Code berikut dan lihat hasilnya :

9 Modul HTML DASAR copyright@ardyne2016 | Rev.001

No. Atribut Fungsi

Ketiklah Source Code berikut dan lihat hasilnya :

No. Atribut Fungsi

10 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Ketiklah Source Code berikut dan lihat hasilnya :

11 Modul HTML DASAR copyright@ardyne2016 | Rev.001

5. File gambar, video, dan audio bisa di download di URL berikut

12 Modul HTML DASAR copyright@ardyne2016 | Rev.001

13 Modul HTML DASAR copyright@ardyne2016 | Rev.001

14 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Elemen Masukan (Input) Jenis Text Field

15 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Elemen Masukan (Input) Jenis Text Area

Elemen Pilihan (Options) Jenis ComboBox

16 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Elemen Button (Tombol)

Kemudian ketiklah source code berikut simpan dengan nama login.html

Kemudian ketiklah source code berikut simpan dengan nama login.html

18 Modul HTML DASAR copyright@ardyne2016 | Rev.001

19 Modul HTML DASAR copyright@ardyne2016 | Rev.001

Anda mungkin juga menyukai