Jumat, 19 September 2014

Laporan 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 berbasis web.

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.
Struktur dasar HTML adalah sebagai berikut:

Beberapa unsur penting HTML:
1.      Tag
2.      Element
3.      Atribut
4.      Komentar

     C.   Alat dan Bahan
      Alat dan bahan yang digunakan dalam praktikum adalah: 
      1.      PC (Personal Komputer) atau Laptop 
      2.      Sistem Operasi Windows 
      3.      Browser (Mozilla Firefox) 
      4.      Notepad++ 
      5.      File gambar ber-ekstensi .jpg 
      6.      Microsoft Word

     D.   Langkah-langkah Percobaan
      Percobaan 1: Dokumen HTML 
      1.      Membuka Notepad++ 
      2.      Mengetik Script berikut:
      3.      Menyimpan file dengan nama dokumen.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil           

      Percobaan 2: Heading 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:
      3.      Menyimpan file dengan nama heading.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil            

      Percobaan 3: Font 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:  
      3.      Menyimpan file dengan nama font.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil            

      Percobaan 4: Paragraf dan Align 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:
      3.      Menyimpan file dengan nama align.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil

      Percobaan 5: Gambar 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:
      3.      Menyimpan file dengan nama gambar.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil

      Percobaan 6: Daftar menggunakan Bullets  dan Numbering 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:
      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:
      3.      Menyimpan file dengan nama multilevel.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil


      Percobaan 8: Tabel 
      1.      Membuka Notepad++ 
      2.      Mengetik Srcipt berikut:
      3.      Menyimpan file dengan nama tabel.html 
      4.      Membuka file menggunakan browser. 
      5.      Hasil


     E.   Tugas 
      1.      Membuat tampilan HTML dengan background gambar yang memenuhi halaman HTML.
 
       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
       Hasil
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)