Membuat Halaman WEB

Membuat halaman WEB
Pada laporan ini terdapat beberapa dasar teori yang dipergunakan yaitu : 1. Perintah <img src> Digunakan untuk menampilkan gambar atau image kedalam halaman web. Contoh penulisannya yaitu : <img src="logo.jpg" width="45" height="45">. 2. Perintah <table border> Digunakan untuk membuat sebuah tabel. Selanjutnya untuk memasukkan kolom dan row kita harus menuliskan <tr> kemudian diikuti <td> sebanyak yang kita inginkan kemudian keduanya kita tutup. Maka akan terbentuk kolom dan row sebanyak yang telah kita tulis tadi. Kemudian jika kita ingin melakukan merge cell, kita dapat menggunakan perintah colspan dan rowspan. Colspan digunakan untuk menggabungkan 2 atau lebih kolom, sedangkan rowspan digunakan untuk menggabungkan 2 atau lebih baris. Contoh penulisannya yaitu :
<table border=1> <tr> <th rowspan="2">NIM</th> <th rowspan="2">Nama</th> <th colspan="3">Nilai</th> <tr> <td>Lap1</td><td>Lap2</td><td>Lap3</td> </tr> </table>
3. Perintah Cellpadding dan Cellspacing. Perintah Cellpadding digunakan untuk menginputkan jarak yang diperbolehkan untuk data yang dimasukkan terhadap tepian tabel. Sedangkan perintah
Cellspacing digunakan untuk membuat tepian tabel tampak lebih lebar. Berikut adalah contohnya :
<table border=2 Cellpadding="8" Cellspacing="5">
4. Perintah Border. Digunakan untuk membuat pigura untuk image yang kita masukkan. Semakin besar nilai border yang kita masukkan maka semakin tebal pigura yang kita buat. Selain itu kita juga dapat menentukan warna border dari suatu tabel dengan menggunakan perintah bordercolor. Berikut adalah contoh penulisan untuk kedua perintah tersebut :
<img src="Final Fantasy.jpg" border="4" width="150" height="70"> <table border="2" bordercolor="black">
5. Perintah <a href="#nama_tabel">Turun</a><a name="nama_tabel"></a> Digunakan sebagai sebuah scroll dengan menuliskan perintah awalan yang dapat kita gunakan untuk menuju kesuatu halaman yang kita inginkan dengan menuliskan perintah akhiran di tempat yang ingin dituju.
<a href="#tabelku" ALIGN="CENTER" >go to bottom</a> ..... ..... <a name="tabelku"></a>
nb : Dalam perintah ini penulisan besar kecil huruf sangat berpengaruh maka dalam penulisannya nama tabel harus ditulis sama persis Kemudian contoh perintah ini dalam web page adalah pada ketiga halaman yang akan dibuat yaitu apabila kita mengklik home maka yang akan keluar adalah index.html lalu bila kita mengklik about me maka yang akan keluar adalah about.html sedangkan bila kita mengklik materi maka yang akan keluar adalah materi.html. Menu link tersebut dapat dijalankan dari masing-masing dari ketiga halaman web page tersebut.
6. Perintah Width dan Height Perintah width digunakan untuk mengatur lebar dari suatu tabel atau image yang ada di dalam halaman web. Sedangkan perintah Height digunakan untuk mengatur tinggi dari suatu tabel atau image. Untuk contoh penulisannya sebagai berikut :
<table border="4" height="201" width="804">
B. Tujuan. Tujuan dari laporan ini adalah untuk memenuhi tugas kerja lab pemrograman WEB serta untuk menambah pengetahuan tentang cara membuat serta memanipulasi halaman WEB. Pada Materi kali ini akan diberikan contoh dalam membuat tiga halaman WEB yang saling berhubungan dengan menggunakan menu link serta membuat tabel didalam tabel. Berikut adalah contoh halaman WEB yang dimaksud : Ini adalah contoh tampilan index.html Gambar Home. About me. Materi. Judul Welcome ..................... Ini adalah contoh tampilan about.html
Gambar
Judul
Home. About me. Materi. Data Pribadi
Nama NIM
Logo
MIPA Mata Kuliah MK SKS
Kode
Ini adalah contoh tampilan materi.html Gambar Home. About me. Materi. Judul Materi Daftar Isi BAB I BAB II .. .
BAB I _______________________________ _______________________________
BAB II _______________________________ _____________________________ __ Dibawah ini adalah listing program untuk index.html :
<html>
<head> <title> Index </title> </head>
<body> <table border="4" bordercolor="black" cellpadding="6" cellspacing="1" width="441"> <tr> <td width="140"> <p align="center"> <img src="ff8_6.jpg" border="5" width="100" height="50" align="middle"></td> <td align="center" width="278"><font face="Arial black" size="6">INDEX</td> </tr> <tr> <td valign="top" width="140"> <ul> <li><font face="Comic Sans MS" size="5"> <A HREF=index.html>Home</A></font></li> <li><font face="Comic Sans MS" size="5"> <A HREF=about_me.html>about me</A></font></li> <li><font face="Comic Sans MS" size="5">
<A HREF=materi.html>materi</A></font></li>
</ul> </td> <td width="278" align="center" valign="top"><u><i><b>WELCOME</b></i></u> </td> <br> <p align="justify"> Selamat datang pada halaman web ini. Halaman ini digunakan sebagai halaman awal untuk dua halaman web selanjutnya. Pada sebelah kiri dapat kita lihat ada link yang akan meuju ke halaman yang lain. Untuk menu home maka link tetap akan tersambung ke halaman ini yaitu halaman web index.html, kemudian untuk menu about me maka akan tersambung ke halaman about.html, sedangkan untuk menu materi akan tersambung ke halaman materi.html </p> </tr> </table> </body> </html>
Kemudian setelah perintah selesai kita masukkan kedalam notepad lalu notepad tersebut kita save kedalam ekstensi html. Selanjutnya apabila file tersebut kita jalankan maka akan keluar tampilan berikut :
Berikutnya adalah perintah untuk about.html. Perintahnya sebagai berikut :

<html> <head> <title> About Me </title> </head>
<body> <table border="4" cellpadding="3" cellspacing="0" bordercolor="black" height="201" width="804"> <tr> <td height="59" width="210"> <p align="center"> <img src="Final Fantasy X 11.jpg" bordercolor="black" border="4" width="150" height="70" align="middle"></td> <td align="center" width="563" height="59"><font face="Monotype Corsiva" size="6"><b>DATA MAHASISWA</b></td> </tr> <tr valign="top"> <td height="120" width="210"> <ul> <li><font face="Monotype Corsiva" size="7"><A HREF=index.html>Home </font></li> <li><font face="Monotype Corsiva" size="7"><A HREF=about_me.html>about me </A> </font></li> <li><font face="Monotype Corsiva" size="7"><A HREF=materi.html>materi </A> </font></li> </ul> </td> <td width="563" align="center" valign="top"> </A>
<table border="2" cellpadding="6" cellspacing="0" bordercolor="black" width="562" align="middle"> <tr> <td rowspan="2" width="320" bordercolor="black"> </td> <td width="48" align="left">NAMA</td> <td width="100" align="left"><font face="Times New Roman" size="4"><b>Ahmad Edy</b></td> <td width="161" align="center"><img src="logo.jpg" width="45" height="45"></td> </tr> <tr> <td width="48" align="left">NIM</td> <td width="44" align="left"><b>04/179611/DPA/1928</B></td> <td width="161" align="center"><b>MIPA</B></td> </tr> <tr valign="top" align="center"> <td width="364"> Data Pribadi <p>Nama : Ahmad Edy</p> <p>Jurusan : Matematika</p> <p>Prodi : D3 Komsi</p> <p>Alamat : Selokan Mataram</td> <td colspan="3" width="253"> <table border="2" cellpadding="0" cellspacing="0" bordercolor="black" width="358"> <pre><font face="Times New Roman" size="4"> <tr align="center"> Mata Kuliah </Pre>
<td width="92">kode</td> <td width="204">MK</td> <td width="45">SKS</td> </tr> <tr align="center"> <td width="92">MMD 1003</td><td width="204">Agama</td><td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1001</td><td width="204">Bahasa Inggris II</td> <td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1302</td><td width="204">KL Prog delphi</td><td width="45">1</td> </tr> <tr align="center"> <td width="92">MMD 1103</td><td width="204">Aljbr. vektor & matriks</td> <td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1102</td><td width="204">Matematika II</td><td width="45">2</td> </tr> <tr align="center">
<td width="92">MMD 1202</td><td width="210">KL Plprn-Pnyjn data</td> <td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1401</td><td width="210">Pengantar Elektronika</td> <td width="45">3</td> </tr> <tr align="center"> <td width="92">MMD 1303</td><td width="204">Program Terstruktur</td> <td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1353</td><td width="204">Prak. ProgTur</td><td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 1304</td><td width="213">KL Pemrograman WEB I</td> <td width="45">1</td> </tr> <tr align="center"> <td width="92">MMD 1403</td><td width="204">KL Sistem Operasi</td> <td width="45">1</td> </tr> <tr align="center">
<td width="92">MMD 2000</td><td width="204">Etika Profesi</td><td width="45">2</td> </tr> <tr align="center"> <td width="92">MMD 2001</td><td width="204">Manajemen Umum</td> <td width="45">2</td> </tr> </table> </td> </tr> </table> </tr> </table> </body>
</html> Selanjutnya save perintah tersebut dan bila file tersebut dieksekusi maka hasilnya akan seperti berikut :
Selanjutnya adalah halaman web yang ketiga yaitu halaman materi.html. Berikut adalah sintaks yang digunakan :
<html> <head> <title> Materi </title> </head>
<body> <table border="4" bordercolor="black" cellpadding="3" cellspacing="1" width="530" height="382"> <tr> <td height="60" width="240"> <p align="center"> <img src="54-2.jpg" border="5" width="100" height="50" align="middle"></td> <td align="center" width="263" height="60"> <p align="right"> <b><font face="Franklin Gothic Medium" size="4">MATERI LAPORAN</font></b></td> </tr> <tr> <td valign="top" height="304" width="322"> <ul> <li><font face="Monotype Corsiva" size="7"> <A HREF=index.html>Home</A></font></li> <li><font face="Monotype Corsiva" size="7"> <A HREF=about_me.html>about me</A></font></li> <li><font face="Monotype Corsiva" size="7"> <A HREF=materi.html>materi</A></font></li> </ul> </td> <td width="263" align="center" valign="top" height="304"> <p align="CENTER"><b></b><font face="cursive">PENGENALAN TUGAS WEB I</font></p> <p> <b> Daftar Isi</b></p>
<pre align="left"><a href="#materi" ALIGN="CENTER">BAB I</a><B> tugas ini.</b></Pre> <pre align="left"><a href="#materi2" ALIGN="CENTER">BAB II</a><b> diberikan.</b></Pre> <pre align="justify"><a name="materi"></a>BAB I ini permasalahan yang diketengahkan adalah membuat
Sekilas tentang
Materi yang
<font face="Comic Sans MS">Pada bab
tiga halaman WEB yang saling berhubungan dengan menu link.</font></Pre> <pre align="justify"><a name="materi2"></a>BAB II laporan ini materi - materi yang diberikan adalah tentang cara membuat tabel didalam tabel serta bagaimana cara membuat link antar webpage.</font></Pre> </tr> </table> </body> </html> <font face="Comic Sans MS">Pada
Kemudian bile file tersebut dijalankan maka akan keluar tampilan berikut :
nb : Bila kita mengklik BAB I maka tampilan web akan langsung mengarah ke isi dari BAB I sedangkan bila kita mengklik BAB II maka yang akan keluar adalah isi dari BAB II.
Berikut adalah contoh aplikasinya : Karena halaman web yang dibuat hanya satu lembar halaman maka untuk membuktikan nb diatas maka tampilan halaman tersebut dipersempit sebagai berikut :
Kemudian jika kita mengklik BAB I maka akan keluar tampilan berikut :
Lalu jika yang diklik adalah BAB II tampilan yang akan keluar adalah :
Kembali ke materi awal

Membuat Halaman WEB

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat Halaman WEB

Diunggah oleh

Hak Cipta:

Format Tersedia

Membuat halaman WEB

Home. About me. Materi. Data Pribadi

MIPA Mata Kuliah MK SKS

BAB I _ _

<head> <title> Index </title> </head>

Berikutnya adalah perintah untuk about.html. Perintahnya sebagai berikut :

<font face="Comic Sans MS">Pada bab

Kembali ke materi awal

Anda mungkin juga menyukai