Modul 1 - Penggunaan HTML

In // Maret 21, 2017 // Leave a Comment

LAPORAN PRAKTIKUM PEMROGRAMAN WEB 1
MODUL 1 - PENGENALAN HTML 

 




Dosen Pengampu : Delia, S.Kom.

Disusun Oleh :
2015091009
Agrian Dwi Lesmana
Sistem Informasi 2015 B

 SISTEM INFORMASI
FAKULTAS ILMU KOMPUTER
UNIBERSITAS KUNINGAN
2016/2017

Jl. Cut Nyak Dien, No.36A Cijoho Kuningan Telp/Faks : 0232-974824
 

1. TEORI
HTML ( Hypertext Markup Language ) adalah bahasa dasar untuk web scripting bersifat Client Side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, serta multimedia dan juga untuk menghubungkan antar tampilan web page atau yang lebih dikenal dengan Hyperlink.
Tidak diperlukan suatu program editor khusus untuk menggunakan kode perintah-perintah HTML, kita dapat menggunakan Notepad, Edit Plus ataupun editor lainnya yang berbasis GUI ( Graphical User Interface ) seperti Microsoft Front Page, Dreamweaver CS3, Adobe Golive dan sebagainya,namun dengan program-program ini kita tidak perlu mengetik kode HTMLnya, semua perintah diwujudkan secara Icon Base. Sebagai seorang pengembang aplikasi web maka kemampuan penguasaan kode-kode HTML sangat diperlukan, dengan demikian kita mampu menguasai program-program editor lainnya. Untuk dapat menguasai kode-kode HTML sangat disarankan menggunakan editor teks misalnya Notepad .
Aturan penulisan HTML adalah sebagai berikut : 
a. Memilki struktur minimal dari dokumen HTML.
 
<HTML>
<head>
<title>Judul Web Page</title>
</head>
<body> 

Isi artikel anda di sini
</body>
</HTML>

b. Bentuk tulisan pada point 1 disebut TAG. Tag memiliki pembuka <TAG>, tetapi tidak semua Tag mempunyai penutup </TAG>. Tag memberi instruksi interpreter kepada browser.

c. Di dalam Tag HTML terdapat atribut Tag, yang mana atribut tersebut berbeda-beda antar tag yang satu dengan tag yang lainnya.

d.Penulisan Tag bersifat Non Case Sensitive, ini berarti bahwa penulisan tag huruf besar dan atau huruf kecil akan dianggap sama. Sebagai contoh <HTML> akan sama dengan <html> atau <HtmL>.

e. Setelah tanda "<" harus langsung diikuti oleh nama Tag dan ditutup tanda ">", tidak boleh ada spasi, angka, tanda baca dan nama Tag tidak dapat dibuat sendiri dan harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web.

f. Dalam dokumen HMTL diperlukan tag <HEAD></HEAD>, dalam tag ini diletakkan judul web page dengan menggunakan tag <TITLE>judul Web</TITLE>, sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page kita. Untuk ekstensi dari file HTML perlu ditambahkan .html atau .html dibelakang nama filenya. Misalnya Uji Coba.html

g. Penulisan tag-tag HTML tidak akan terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi, sehingga diperbolehkan menyusun tag-tag HTML secara countinue horizontal seperti berikut ini :
<HTML><HEAD><TITLE>Judul</TITLE></HEAD>..... dan seterusnya.

2. PRETEST


<html>
<head>
<title> free tes </title>

<body>

<table border = 4 align="center" >
<tr>
<td>1</td>
<td> Nama </td>
<td> : </td>
<td> Agrian Dwi Lesmana </td>
</tr>

<tr>
<td>2</td>
<td> Kelas </td>
<td> : </td>
<td> SI 2015 B</td>
</tr>


<tr>
<td>3</td>
<td> NIM </td>
<td> : </td>
<td> 2015091009 </td>
</tr>
</table>
</head>
</html>
Hasil : 


3. PRAKTIKUM
  • Praktikum 1 
Ketikan tag di bawah menggunakan notepad atau notepad++ kemudian simpan dengan menggunakan (.html).
<html>
<head>
<title>ea</title>
</head>
<body>
isi dari halaman web
<h1>Tag Heading 1</h1>
<h2>Tag Heading 2</h2>
<p>Tag Paragraf><p>
<a href = "google.com">Jangan di Klik!</a><br>
<img src="meong.jpg" height="200" width="100"> Tag Image


</body>
</html>
 
  • Hasil

  •  Praktikum 3
     Ketikan tag di bawah menggunakan notepad atau notepad++ kemudian simpan dengan menggunakan (.html)
    <html>
    <head>
        <title> PRODI UNIVERSITAS KUNINGAN </title>
    </head>
    <body bgcolor="SILVER">
    <center>
    <h1> UNIVERSITAS KUNINGAN </h1>
    <font face ="ALGERIAN, Arial, Helvatica, sans-serif">
    <h2> Fakultas Ilmu Komputer </h2></font>
    <h3> Sistem Informasi </h3></center>
    <marquee behaviour = "alternate"> Tahun 2014 </marquee>
    <hr size = "4" color = "blue">

    <OL type = "1">
    <li>Home</li>
    <li>Fakultas</li>

    <UL type = "disc">
    <a href = "google.com">FKOM</a><br>
    <li title = "Fakultas Keguruan Dan Ilmu Pendidikan">FKIP</li>
    <li title = "Fakultas Ekonomi">FE</li>
    <li title = "Fakultas Kehutanan">FHUT</li>
    <li title = "Fakultas Ilmu Hukum">FHUM</li>
    <li title = "Pendidikan Sekolah dasar">PGSD</li>
    </ul>

    <li> Fasilitas </li>
    <table border=4 align="center" bordercolor="blue">
    <tr>
    <td>1</td>
    <td>Nama</td>
    <td>:</td>
    <td>Agrian Dwi Lesmana</td>
    </tr>
    <td>2</td>
    <td>Kelas</td>
    <td>:</td>
    <td>SI2015B</td>
    </tr>
    <td>3</td>
    <td>NIM</td>
    <td>:</td>
    <td>2015091009</td>
    </tr>
    </table>
    </ol>
    </body>
    </html>
     
  • Hasil
  • Praktikum 7

Ketikan tag di bawah menggunakan notepad atau notepad++ kemudian simpan dengan menggunakan (.html).

<html>
<head>
<title> PRAKTIKUM 7</title>
</head><body>
<center><b> PRAKTIKUM </b><br></center>
<table align ="center" border="1" bordercolor="#0000CC" cellpadding="2">

<tr bgcolor="gold">
<td> Nomor </td>
<td> PRAKTIKUM </td>
<td> Link Download </td>
</tr>

<tr align="center" bgcolor="pink">
<td> 1 </td>
<td> PRAKTIKUM 1 </td>
<td><a href="praktikum1.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="pink">
<td> 2 </td>
<td> PRAKTIKUM 3 </td>
<td><a href="praktikum3.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="pink">
<td> 3 </td>
<td> POST TEST </td>
<td><a href="tabel.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="gold">
<td colspan="3">&copy;copyright : Agrian Dwi Lesmana </td>
</tr>
</table>
</body>
 

  • Hasil 

4. POST TEST


Buatlah halaman web dengan tampilan sebagai berikut :


  • Skrip 
<html>
<head>
<body bgcolor="White">
<title> POST TEST </title>
<table border="0" align="center" width="100%">
<tr>
            <td width="19%" align="center"><img src="uniku.jpeg" height="100" width="100"></td>
            <td width="81%" align="center"><h1>UNIVERSITAS KUNINGAN</h1>
            <h2>FAKULTAS ILMU KOMPUTER</h2>
            Kampus 1: jln. Raya Tjut Nyak Dien No.36 Kuningan</td>
</tr>
</table>
<hr size="3" color="metalic">

<ol type="1">
            <li> Home </li>
            <li> Fakultas </li>
            <ul type="disc">
                        <li title="Fakultas Ilmu Komputer">FKOM</li>
                        <li title="Fakultas Keguruan dan Ilmu Pendidikan">FKIP</li>
                        <li title="Fakultas Ekonomi">FE</li>
                        <li title="Fakultas Kehutanan">FHUT</li>
                        <li title="Fakultas Hukum">HUKUM</li>
                        <li title="Pendidikan Guru Sekoloah Dasar">PGSD</li>
            </ul>
            <li>Fasilitas</li>
</ol>

<center><b> PRAKTIKUM </b><br></center>
<table align ="center" border="1" bordercolor="#0000CC" cellpadding="2">

<tr bgcolor="gold">
<td> Nomor </td>
<td> PRAKTIKUM </td>
<td> Link Download </td>
</tr>

<tr align="center" bgcolor="pink">
<td> 1 </td>
<td> PRAKTIKUM 1 </td>
<td><a href="praktikum1.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="pink">
<td> 2 </td>
<td> PRAKTIKUM 3 </td>
<td><a href="praktikum3.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="pink">
<td> 3 </td>
<td> POST TEST </td>
<td><a href="tabel.html" target="_blank">Download</a></td>
</tr>

<tr align="center" bgcolor="gold">
<td colspan="3">&copy;copyright : Agrian Dwi Lesmana </td>
</tr>

</table>

</body>
</html>
 
5. TUGAS
Buat Skrip dengan tampilan seperti berikut:

  • Skrip
<html>
<head>
<title>untitled document</title>
</head>
<body>
 <table align="center" border="1" bordercolor="#0000CC" cellpadding="2">
 <tr>
            <td colspan="3" align=" center"> HEADER</td>
</tr>

<tr>
            <td width ="10" height="70" >MENU</td>
            <td bgcolor=" skyblue"  width ="150" align= "center" height="70" > UTAMA</td>
            <td width ="10" height="70" >MENU</td>
</tr>

<tr>
<td colspan="3" align ="center"> FOOTER</td>
</tr>
</table>

</body>
</html>
  

SELESAI

0 komentar:

Posting Komentar

Copyright 2013 Pemrograman Web 1

designed by Template Trackers