FITRIA DEWI: Praktikum Modul 1 Pemrograman Web

Nama	NIM	Kelas
Fitria Dewi Probowati	L200120111	C
Janaka	L200120112	A
Werkudara	L200120113	C
Nakula	L200120114	B
Sadewa	L200120115	C
Puntadewa	L200120116	A
Wanara	L200120117	C
Loro Jonggrang	L200120118	A
Brahmanta	L200120119	A

LAPORAN PRAKTIKUM

PEMOGRAMAN WEB

Modul 1

NAMA : FITRIA DEWI PROBOWATI

NIM : L200120111

KELAS : F

JURUSAN TEKNIK INFORMATIKA

FAKULTAS KOMUNIKASI DAN INFORMATIKA

UNIVERSITAS MUHAMMADIYAH SURAKARTA

2014

LANGKAH-LANGKAH PRAKTIKUM

A. Percobaan 1 (Dokumen HTML)

1. Buka aplikasi notepad

2. Ketik script berikut dalam notepad :

      <HTML>
     <HEAD><TITLE>Dokumen html</TITLE></HEAD>
     <body bgcolor ="skyblue">
       ini adalah sebuah dokumen HTML dengan judul "Dokumen Html"
      dan warna latar/background biru langit.
      terima kasih.
     </body>
     </HTML>

3.      Simpan file dengan nama dokumen.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

B. Percobaan 2 (Heading)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

        <HTML>
     <HEAD><TITLE>Heading</TITLE></HEAD>
     <BODY>
     <h1>Teks dengan ukuran Heading one</h1>
     <h2>Teks dengan ukuran Heading two</h2>
     <h3>Teks dengan ukuran Heading three</h3>
     <h4>Teks dengan ukuran Heading four</h4>
     <h5>Teks dengan ukuran Heading five</h5>
     <h6>Teks dengan ukuran Heading six</h6>
     </BODY>
     </HTML>

3.      Simpan file dengan nama heading.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

C. Percobaan 3 (Font)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

<HTML>
    <HEAD><TITLE>Font</TITLE></HEAD>
    <BODY>
    <FONT face='comic sans ms'>
     teks ini berukuran normal jenis comic sans ms dan warna hitam
    </FONT></br>
      TEKS CETAK <b>Tebal</b>
   <i>Miring</i>
      <u>Garis Bawah</u>
    <strike>Garis Tengah</strike>
    <sup>superscript</sup> dan
    <sub>Subscript</sub>
    </FONT>
    </BODY>
    </HTML>

3.      Simpan file dengan nama font.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

D. Percobaan 4 (Paragraf dan Align)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

<HTML>
    <HEAD><TITLE>Paragraf dan Align</TITLE></HEAD>
    <BODY>
    <P align="left">Format paragraf ini rata kiri</P>
    <P align="right">Format paragraf ini rata kanan</P>
    <P align="center">Format paragraf ini rata tengah</P>
    <P align="justify">Format paragraf ini rata kanan kiri.
     Format paragraf ini rata kanan kiri.Format paragraf ini rata kanan kiri.
     Format paragraf ini rata kanan kiri.Format paragraf ini rata kanan kiri. Format paragraf ini rata kanan kiri.Format paragraf ini rata kanan kiri. Format paragraf ini rata kanan kiri.Format paragraf ini rata kanan kiri. Format paragraf ini rata kanan kiri.Format paragraf ini rata kanan kiri. Format paragraf ini rata kanan kiri.</P>
    </BODY>
    </HTML>

3.      Simpan file dengan nama align.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

E. Percobaan 5 (Gambar)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

<HTML>
    <HEAD><TITLE>Gambar</TITLE></HEAD>
    <BODY>
    <p><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGcpLSMIpnwvLeEVd5YhFpcE8nI7yWvPrAIeMBrJuM7-6puPnUPVXCFaNr3U8yTkPUzfoJq32I365hvox4yUAnaD85AsP4oEUsFMmGAxsr08D9l0dPONcOEmFbUy1iLZWOBdrpPCrv5t0/s320/Kittens+wallpapers+5.jpg' height='100' width='100'>perataan teks dibawah secara default dan gambar asli dengan ukuran 100 x 100 pixel</p>
    <p><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGcpLSMIpnwvLeEVd5YhFpcE8nI7yWvPrAIeMBrJuM7-6puPnUPVXCFaNr3U8yTkPUzfoJq32I365hvox4yUAnaD85AsP4oEUsFMmGAxsr08D9l0dPONcOEmFbUy1iLZWOBdrpPCrv5t0/s320/Kittens+wallpapers+5.jpg' height='100' width='100' align='top' border='2'> perataan teks diatas dan border gambar 2 pixel</p>
    <p align='center'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGcpLSMIpnwvLeEVd5YhFpcE8nI7yWvPrAIeMBrJuM7-6puPnUPVXCFaNr3U8yTkPUzfoJq32I365hvox4yUAnaD85AsP4oEUsFMmGAxsr08D9l0dPONcOEmFbUy1iLZWOBdrpPCrv5t0/s320/Kittens+wallpapers+5.jpg' height='100' width='100' align='middle'>perataan teks ditengah</br>dan letak gambar ditengah dokumen</p>
    </BODY>
    </HTML>

3.      Simpan file dengan nama gambar.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

F. Percobaan 6 (Daftar Menggunakan Bullets dan Numbering)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

<HTML>
     <HEAD><TITLE>Bullets dan Numbering</TITLE></HEAD>
     <BODY>
     <p>Daftar Menggunakan Bullets</p>
     <ul type='circle'>
     <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
     </ul>
      <p>Daftar Menggunakan Numbering (angka)</p>
     <ol type='1'>
     <li>Sunday</li>
     <li>Monday</li>
     <li>Tuesday</li>
     </ol>
      <p>Daftar Menggunakan Numbering (huruf)</p>
      <ol type='a'>
     <li>Sunday</li>
     <li>Monday</li>
     <li>Tuesday</li>
      </ol>
      <p>Daftar Menggunakan Numbering (huruf romawi)</p>
      <ol type='I'>
      <li>Sunday</li>
      <li>Monday</li>
      <li>Tuesday</li>
      </ol>
      </BODY>
      </HTML>

3.      Simpan file dengan nama daftar.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

G. Percobaan 7 (Daftar menggunakan Multilevel List)

1.      Buka aplikasi notepad
2.      Ketik script berikut dalam notepad :

<HTML>
    <HEAD><TITLE>Germanic Languanges</TITLE></HEAD>
    <BODY>
    <ul>
    <li>west Germanic Languanges</li>
    <ul><li>English</li>
    <ul><li>British</li>
    <ul><li>BBC</li>
    <li>Cockney</li>
    <li>Dubliner</li>
    </ul>
    <li>american</li>
    <ul><li>Newscaster</li>
    <li>Drawl</li>
    <li>Jive</li>
    </ul></ul>

    <li>Ducth</li>
    <ul><li>Holander</li>
    <li>Flemish</li>
    <li>Afrikaans</li>
    </ul></ul</ul>
    </BODY>
    </HTML>

3.      Simpan file dengan nama multilevel.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

H. Percobaan 8 (Table)

1. Buka aplikasi notepad
2. Ketik script berikut dalam notepad :

<HTML>
<HEAD><TITLE>Table</TITLE></HEAD>
<BODY>
Tabel Biasa
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>

<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
</table>

Colspan
<table border="1">
<tr>
<td colspan="3" align="center">Quarter 1</td>
</tr>

<tr align="center">
<td>jan</td>
<td>Feb</td>
<td>Mar</td>
</tr>
</table>

rowspan
<table border="1">
<tr>
<td rowspan="3" align="center">Quarter 1</td>
<td>jan</td>
</tr>

<tr>
<td>Feb</td>
</tr>

<tr>
<td>Maret</td>
</tr>
</table>

</BODY>
</HTML>

3.      Simpan file dengan nama table.html
4.      Buka file yang disimpan menggunakan browser
5.      Hasil

TUGAS

1. Tulis script untuk membuat isi seperti gambar dibawah ini

<HTML>

<body background='Tulips.jpg'>
<HEAD><TITLE>Tugas 1</TITLE></HEAD>
<h1>BIODATA DIRI:</h1>
<table border=0><tr>

<td><b>:</b></td>
<td><b>Fitria Dewi P</b></td>
</tr>

<tr>
<td><b>NIM</b></td>
<td><b>:</b></td>
<td><b>L200120111</b></td>
</tr>

<tr>
<td><b>Kelas</b></td>
<td><b>:</b></td>
<td><b>F</b></td>
</tr>
</table>

</BODY>
</HTML>

hasil

2. Fungsi dari tag atauatribut 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
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>	membuattable
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. Buat multilevel list dengan kombinasi number (angka) dan huruf

<HTML>
<HEAD><TITLE>Tugas 3</TITLE></HEAD>
<BODY>
<ul type='I'>
<li>west Germanic Languanges</li>
<ol type='A'>
<li>English</li>
<ol type='1'><li>British</li>

hasil

FITRIA DEWI

Rabu, 24 September 2014

Praktikum Modul 1 Pemrograman Web

Tidak ada komentar:

Posting Komentar