Praktikum Modul 1 Pemrograman Web

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>
    ^superscript dan
    _Subscript
    </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>Nama</b></td>

      <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

Menu Sub menu dan Tabel Zebra

Kali ini saya akan berbagi cara mebuat menu dan sub menu, serta membuat tabel zebra dengan menggunakan css dan html, langsung saja yaaaaa :)

CSS nya dulu dengan nama menudanzebra.css

#Menu {

    background: #F9F;

    width: 600px;

    height: 35px;

    font-size: 12px;

    font-family: Arial, Tahoma, Verdana;

    color:#9F0;

    font-weight: bold;

    margin-bottom: 30px;

    padding: 2px;

} 

#box {

    width: 875px;

    float: left;

    margin: 0;

    padding: 0;

}

#fitria { 

    margin: 0;

    padding: 0;

}

#fitria ul {

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

}

#fitria li {

    list-style: none;

    margin: 0;

    padding: 0;

}

#fitria li a, 

#fitria li a:link, 

#fitria li a:visited {

    color: #9F0;

    display: block;

    font-size: 16px;

    font-family: Georgia, Times New Roman;

    font-weight: normal;

    margin: 0;

    padding: 9px 15px 8px;

}

Sejarah dan Perkembangan CSS

Awal diperoleh nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browserterbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam.
Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1.    External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut:
<link rel=”stylesheet” type=”text/css” href=”ditektori/filecss.css” />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file cssnya. Penggunaan sistem embeding css ini sangat disarankan karena memang banyak kelebihan yaitu mudah untuk melakukan pengeditan.
2.    Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus tampilannya.
3.    Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya.

Model.

Perkembangan CSS

1. CSS1
Dikembangkan berpusat pada pemformatan dokumen HTML.
2. CSS2
Dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. CSS2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.
3. CSS3
Adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object

Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal.
Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman websiteyang akan didesain.  Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.