Praktik PWL Modul 1

MODUL 1

“HTML (Hyper Text Markup Language) Dasar”

     A.   Tujuan

       Dapat mengetahui dan memahami dasar-dasar bahasa HTML (Hyper Text Markup Language) sebagai bahasa pemrograman untuk membuat halaman web statis.

B.   Landasan Teori

      HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

     C.   Alat dan Bahan

      Alat dan bahan yang digunakan dalam praktikum adalah:
      1.      PC atau Laptop
      2.      Browser (Mozilla Firefox)
      3.      Notepad++
      4.      Microsoft Word

     D.   Langkah-langkah Percobaan

       Percobaan 1: Dokumen HTML
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 

               http://pastebin.com/9FVHSpSN

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil

 

      Percobaan 2: Heading
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/vKNnRLk8

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil   
        

      Percobaan 3: Font
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/ASPACwbd 

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
       

      Percobaan 4: Paragraf dan Align
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/HBAt3zpg

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
       

      Percobaan 5: Gambar
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/XWsadjk5

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
      

      Percobaan 6: Daftar menggunakan Bullets  dan Numbering
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/EVFCRvVH

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
        

      Percobaan 7: Daftar menggunakan Multilevel List
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/3wCmtaL1

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
      

      Percobaan 8: Tabel
      1.      Membuka Notepad++
      2.      Mengetik Srcipt berikut: 
               http://pastebin.com/2MHuSuAa

      3.      Menyimpan file dengan nama daftar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
      

E.   Tugas
1.      Membuat tampilan HTML dengan background gambar yang memenuhi halaman HTML.

              http://pastebin.com/MJ7EX7zu 
               Hasil:
               

             2.      Menjelaskan fungsi dari tag atau attribut berikut:

No	Tag/atribut	Fungsi
1	bgcolor=’blue’	warna latar / background dari dokumen web adalah biru
2	<h1> - <h6>	h1 : teks dengan ukuran Heading one h2 : teks dengan ukuran Heading two h3 : teks dengan ukuran Heading three h4 : teks dengan ukuran Heading four h5 : teks dengan ukuran Heading five h6 : teks dengan ukuran Heading six (untuk lebih jelas lihat percobaan 2)
3	<font> ... </font>	mendefinisikan jenis font
4	face=’verdana’	jenis font yaitu verdana
5	size=’10’	ukuran font 10
6	color=’blue’	untuk pemberian warna pada teks/font yaitu biru.
7	<b>. . .</b>	membuat Teks tebal
8	<i>. . .</i>	membuat Teks miring
9	<u>. . .<u>	membuat Teks garis bawah
10	<strike> ...</strike>	membuat Teks garis tengah
11	<sup>. . .</sup>	membuat superscrpit
12	<sub>. . .</sub>	membuat subscript
13	<p>. . .</p>	untuk membuat paragraf
14	align=’center’	paragraf rata tengah
15	<img>	menampilkan sebuah gambar
16	src=’gambar.jpg’	lokasi direktori gambar.jpg
17	width=’100’	ukuran lebar 100
18	height=’100’	ukuran tinggi 100
19	alt=’alt’	untuk menentukan keterangan gambar jika gambar gagal  tampil.
20	<ul> . . . </ul>	untuk membuat daftar dengan penanda simbol
21	<ol> . . .</ol>	penomeran
22	<li>. . .</li>	untuk menambah daftar/isi dari tag <ul></ul>
23	type=’circle’	untuk menentukan jenis input, nilai yang dapat dipasangkan dengan bulatan
24	<table>. . .</table>	membuat tabel
25	<tr>. . .</tr>	membuat baris
26	<td>. . .</td>	membuat colom
27	border=’2px’	mengatur ketebalan garis tepi tabel sebesar 2 pixel
28	colspan=’2’	menggabungkan 2 kolom dalam 1 baris
29	rowspan=’2’	mengabungkan 2 baris dalam 1 kolom
30	</BR>	pindah baris

       3.      Membuat multilevel dengan kombinasi numer (angka) dan huruf

                http://pastebin.com/fcSw9iDT