Komputer Aplikasi IT I (HTML)
Dasar-Dasar HTML
Membuat Dokumen HTML <html><head> <title>
Web Pertamaku </title>
</head> <body>
Selamat Datang di Web Pertamaku </boby>
</html>
Menambahkan Body Text
<html> <head> <title>
Web Pertamaku </title>
</head> <body>
<h1>Tentang Diri Saya</h1>
Web ini akan menceritakan tentang diri saya </body>
</html>
Membuat Halaman Web Sederhana <html>
<head> <title>
Web Pertamaku </title>
</head> <body>
<h1>Tentang Diri Saya</h1>
Web ini akan menceritakan tentang diri saya mengenai hal-hal sebagai berikut:
<br>
Sejarah Hidup <br>
Studi <br> Keluarga <br> Cita-Cita </body> </html>
(2)
Materi 2 Menambahkan Warna pada Halaman Web
<font color=”warna”>teks yang akan diberi warna</font>. Contoh: “red”, “blue”, “green”, “yellow” dan “black”
<html> <center> <body>
<font color=”blue”> Selamat Datang </font>
</body> </html>
Membuat Warna pada Hypertext Link
Perintahnya: LINK, ALINK, dan VLINK yang ditempatkan pada bagian <body> sebagai berikut: <body link=”purple”alink=”yellow”vlink=”almond>
<html>
<head> </head>
<title>link/hubungan 1</title>
<body link=”purple” alink=”yellow” vlink=”almond”> Ini bagian pertama dari halaman-halaman web saya <br>
Silahkan membaca halaman berikutnya:<br> <center>
<a href=”link2.html”>ke Halaman Dua</a> </center>
</boby> </html>
(3)
Menambahkan Background Gambar pada Halaman Web
Menambahkan background pada halaman web dengan melakukan perintah <body background=” “>
<html> <head> <title>
Halaman Web Sederhana </title>
</head>
<body background=”fotoku.jpg”> <h1>Tentang Diri Saya</h1>
Web ini akan menceritakan tentang diri saya mengenai hal-hal sebagai berikut:
<br>
Sejarah Hidup <br>
Studi <br> Keluarga <br> Cita-cita </body> </html>
Membuat Home Page Sederhana <html>
<head> <title>
Halaman Muka Web Saya </title>
</head>
<body background=”fotoku.jpg”> <h1>tentang diri saya</h1>
Web ini akan menceritakan tentang diri saya mengenai hal-hal sebagai berikut:
<br>
<a href=”sejarah.html”>sejarah hidup</a> <br>
<a href=”studi.html”>studi</a> <br>
<a href=”keluarga.html”>keluarga</a> <br>
(4)
</body> </html>
Untuk melihat hasil halaman muka yang sudah dibuat dapat dilakukan dengan dua cara sebagai berikut: pertama, cari lokasi dokumen tersebut, misalnya hp1.html di mydocument. Setelah diketemukan lakukan klik kanan pada dokumen tersebut dan pilih perintah OPEN; kedua, buka internet explorer kemudian pilih file, open, browse cari lokasi file, kemudian jika sudah diketemukan klik pada file tersebut atau dengan menekan perintah open. Maka file tersebut akan terbuka.
(5)
Table
/ Tabel
Membuat Tabel
Dengan perintah <table> </table> <html>
<head> <title>
Cellpadding </title> </head> <body>
<table border=1 cellspacing=5 cellpadding=5> <tr>
<td>
Ini adalah table 1 baris, 1 kolom </td>
</tr> </table> </body> </html>
Colspan atribut yang menentukan jumlah kolom pada tabel <html>
<head>
<title>colspan</title> </head>
<body>
<table border=1> <tr>
<th colspan=2>
Ini adalah header table </th>
</tr> <tr> <td> Sel 1,1 </td> <td> Sel 1,2 </td> </tr> <tr> <td> Sel 2,1
(6)
</td> <td> Sel 2,2 </td> </tr> </table> </body> </html>
Rowspan atribut yang menentukan jumlah baris pada table <html>
<head>
<title>colspan</title> </head>
<body>
<table border=1> <tr>
<th colspan=2>
Ini adalah header table </th>
</tr> <tr>
<td rowspan=2> Kolom 1
</td> <td> Sel 1,2 </td> </tr> <tr> <td> Sel 2,2 </td> </tr> </table> </body> </html>
(7)
Membuat Daftar
Bentuk Bullet<html> <head>
<title>List dalam Html</title> <head>
<body>
HTML Mendukung Penggunaan List <br>
<br>
Nama Jalan di Bandung <hr>
<ul>
<li>Jl.Ir.H.Juanda <li>Jl.Dr.Setiabudi <li>Jl.Diponegoro <li>Jl.Dipatiukur </ul>
</body> </html>
Ordered List (Angka) <html>
<title>List dalam Html</title> </head>
<body>
HTML Mendukung Penggunaan List <br>
<br>
Daftar Prodi Fisip di Unikom <hr>
<ol>
<li>Ilmu Pemerintahan
<li>Ilmu Komunikasi dan Public Relation <li>Ilmu Hubungan Internasional
<li>Sekretaris Eksekutif </ul>
</body> </html>
(8)
Contoh model lain atribut type <ol> pada atribut tersebut tambahkan sesuai dengan keinginan misalkan <ol type=I,a,A,i> <html>
<title>List dalam Html</title> </head>
<body>
Contoh Bagaimana merubah type Ordered list <br>
<br>
<b>Daftar Fakultas</b> <ol type=I>
<li>Fakultas Teknik dan Ilmu Komputer <li>Fakultas Ilmu Sosial dan Ilmu Politik <li>Fakultas Ekonomi
<li>Fakultas Desain <li>Fakultas Sastra <li>Fakultas Hukum </ol>
<b>Daftar Prodi</b> <ol type=a>
<li>Teknik Informatika <li>Teknik Komputer <li>Teknik Industri <li>Teknik Elektro </ol>
</body> </html>
(9)
Nested List (Sub daftar)
<html> <head>
<title>Nested List</title> </head>
<body>
<h2>Contoh Nested Bullted List</h2> <ul>
<li>Point 1 <ul>
<li>Subsubpoint 1 <li>Subsubpoint 2 <li>Subsubpoint 3 </ul>
<li>Subpoint 2 <li>Subpoint 3 </ul>
<li>Point 2 <ul>
<li>Subpoint 1 <li>Subpoint 2 </ul>
<li>Point 3 </ul> </body> </html>
Daftar Menu / Menu List
<html> <head>
<title>Menu List</title> </head>
<body>
<h2>Daftar Jenis Mobil</h2> <MENU>
<li>Sedan <li>Kijang <li>APV <li>Pick Up <li>Mini Bis </MENU> </body> </html>
(10)
Materi 7
Latihan / Quiz
Buatlah contoh halaman web dengan menggunakan daftar dengan model ordered list dan unordered list (bullet) untuk menampilkan informasi sebagai berikut:
SILSILAH KELUARGA A. BUDIMAN
1. FAHRA BUDI DEWI B. ANITA
C. RIDWAN 1. RATNA
INUL CINTA 2. ASEP D. ILHAM
(11)
Hyperlink / Link
Membuat Link
<html>
<title>Link / Hubungan 1</title> <body bgcolor=”blue”>
Ini bagian pertama dari halaman-halaman web saya <br>
Silahkan membaca halaman berikutnya:<br> <center>
<a href=”link2.html”>ke halaman dua</a> </center>
</body> </html>
Contoh lain:
<html> <h1> <center>
<body bgcolor=pink> <font color=blue>
<marquee direction=right>Selamat Datang</marquee> <br>
Di <br>
Website yang Keren ini
<hr border color=purple size=5 width=1000> < a href=”biodata.html”>biodata</a>
< a href=”profil.html”>profil</a> < a href=”photo.html”>photo</a> </center>
</body> <html>
(12)
Materi 9
Menempatkan Gambar / Image pada Web
Langkah-langkahnya: <html>
<head>
<title>Penempatan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Memasukan Gambar</h1><p>
Untuk memasukan gambar ke dalam halaman web kita dapat melakukan dengan menggunakan perintah sebagai berikut:<br> <h1>Sydney Harbour Bridge</h1>
<img src=”HarbourBridge.jpg”width=”300”height=”280”><br> </div>
</body> </html>
Mengatur Peletakan Teks dan Gambar
Langkah-langkah: <html>
<head>
<title>Mengatur Penempatan Teks dan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Mengatur penempatan teks dan gambar dapat dilakukan dengan perintah seperti ini:
<br>
<img src=”beach.jpg” width=”150” height=”150” align=”bottom”>Text Dibawah:<b>Sydney Harbour Bridge</b><br>
<img src=”beach.jpg” width=”150” height=”150” align=”middle”>Text Ditengah:<b>Sydney Harbour Bridge</b><br>
<img src=”beach.jpg” width=”150” height=”150” align=”top”>Text Diatas:<b>Sydney Harbour Bridge</b><br>
</div> </body> <html>
(13)
Membuat Gambar sebagai Link
Langkah-langkah: <html>
<head>
<title>Penempatan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Memasukan Gambar</h1><p>
Untuk membaca informasi mengenai Sydney Harbour Bridge silahkan klik gambarnya:<br>
<h1>Sydney Harbour Bridge</h1>
<a href=”link2.html”> img src=”HarbourBridge.jpg” width=”300“ ”height= ”280”></a>Sydney Harbour Bridge <br>
</div> </body> </html>
Menempatkan Gambar sebagai Background Langkah-langkah:
<html>
<head>,</head>
<title>background – gambar</title> <body background=”bola.jpg”>
<h1 align=”center”> Web Site Saya</h1> <font color=”almond” size=2 face=”arial”> <b>Hallo</b><i>apa<i>kabar?<i></font> <br>
<font color=”almond” size=4 face=”sanserif”> Hallo apa kabar?</font>
<br>
<font color=”almond”>Silahkan</font> <font color=”red”>membaca</font>
<font color=”rose”>website saya yang pertama</font> </body>
(14)
Materi 11
Membuat Formulir Html
Membuat Form Langkah-langkah: <html>
<head>
<title>form data mahasiswa</title> </head>
<body>
<b>Form Data Mahasiswa<br> Universitas Komputer Indonesia</b> </font>
</center> <hr> <table>
<tr>td>Nama anda<td>:<input type=text name=”nama” size=20> <tr>td>Alamat<td>:<input type=text name=”alamat” size=30> <tr>td>Kota<td>:<input type=text name=”kota” size=22>
<tr>td>Kodepos<td>:<input type=text name=”kodepos” size=6> <tr>td>Telp<td>:<input type=text name=”telp” size=15>
<tr>td>Jenis Kelamin<td>:<input type=”radio”
name=”kelamin”>pria<input type=”radio” name=”kelamin>wanita <tr>td>Hoby<td>:<input type=”checkbox” name=”jalan”>musik <tr>td><td>:<input type=”checkbox” name=”jalan”>jalan
<tr>td><td>:<input type=”checkbox” name=”baca”>baca <tr>td>Agama<td>:<select size=”1” name=”agama”> <option>islam</option>
<option>kristen</option> <option>hindu</option> <option>budha</option> </select>
<tr><td>Asal Sekolah<td>:<input type=”text” name=”asalsma” size=”35”>
<tr><td>Program Studi<td>:<input type=”text” name=”programstudi” size=”20”>
</table> <hr>
<input type=submit value=kirim><input type=reset> </form>
</body> </html>
(15)
Membuat Buku Tamu
Langkah-langkah: <html>
<head><head>
<title>Membuat Buku Tamu></title> <body bgcolor=”lightcoral”>
<<h1>Buku Tamu</h1>
<p>Pengunjung Yth, kami sangat senang jika anda mau mengisi buku tamu ini</p>
<hr size=5>
<form method=”post” action=”thank.html”> <h2>Tentang Anda</h2>
<table>
<tr><td>Nama Anda:<td input type=”text” name=”nama” size=30> <tr><td>Email Anda:<td input type=”text” name=”mail” size=30> <tr><td>Lokasi Anda:<td input type=”text” name=”lok” size=30> <tr><td>HomepageAnda:<td input=”text” name=”url” size=30> </table>
<hr>
<h3>Opini Anda</h3>
<p>Bagaimana pendapat anda mengenai website kami?</p> <p>
<input type=”radio” name=”choice” value=4>Hot Link,br> <input type=”radio” name=”choice” value=3 checked>Sangat Baik<br>
<input type=”radio” name=”choice” value=2>Baik,br> <input type=”radio” name=”choice” value=1>Cukup<br> </p>
Pilih Salah Satu Tombol
<input type=”Submit” value=”kirim”><input type=”reset” value=”batal”></p>
<h4>Terima Kasih atas kunjungan anda</h4> </form>
</body> </html> Thank.html <html>
<head><head>
<title>terimakasih</title> <body bgcolor=”lightcoral”>
(16)
Materi 13
Membuat Frame
Frameset Rows (Baris)
<html>
<frameset rows=100,*> <noframes>
Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frame src=”dua.html”> </framset>
</html>
Frameset Cols (Kolom)
<html>
<frameset cols=100,*> <noframes>
Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frame src=”dua.html”> </framset>
</html>
Frameset Rows and Cols
<frameset rows=30%,*> <noframes>
Maaf hanya bisa tampil pada browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frameset cols=30%,*> <frame src=”dua.html”> <frame src=”tiga.html”> </frameset>
(17)
Quiz / Latihan
1. Buatlah halaman web dengan menggunakan perintah frameset rows(2), frameset cols(2), frameset gabungan rows and cols.
2. Buatlah halaman menggunakan frameset untuk navigasi beberapa menu, misalnya: Home, Biodata, Hoby, Pendidikan, Gallery Photo dan Formulir.
(1)
Menempatkan Gambar / Image pada Web
Langkah-langkahnya:<html> <head>
<title>Penempatan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Memasukan Gambar</h1><p>
Untuk memasukan gambar ke dalam halaman web kita dapat melakukan dengan menggunakan perintah sebagai berikut:<br> <h1>Sydney Harbour Bridge</h1>
<img src=”HarbourBridge.jpg”width=”300”height=”280”><br> </div>
</body> </html>
Mengatur Peletakan Teks dan Gambar
Langkah-langkah: <html>
<head>
<title>Mengatur Penempatan Teks dan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Mengatur penempatan teks dan gambar dapat dilakukan dengan perintah seperti ini:
<br>
<img src=”beach.jpg” width=”150” height=”150” align=”bottom”>Text Dibawah:<b>Sydney Harbour Bridge</b><br>
<img src=”beach.jpg” width=”150” height=”150” align=”middle”>Text Ditengah:<b>Sydney Harbour Bridge</b><br>
<img src=”beach.jpg” width=”150” height=”150” align=”top”>Text Diatas:<b>Sydney Harbour Bridge</b><br>
</div> </body> <html>
(2)
Membuat Gambar sebagai Link Langkah-langkah:
<html> <head>
<title>Penempatan Gambar</title> <head>
<body>
<div align=”center”>
<h1>Memasukan Gambar</h1><p>
Untuk membaca informasi mengenai Sydney Harbour Bridge silahkan klik gambarnya:<br>
<h1>Sydney Harbour Bridge</h1>
<a href=”link2.html”> img src=”HarbourBridge.jpg” width=”300“ ”height= ”280”></a>Sydney Harbour Bridge <br>
</div> </body> </html>
Menempatkan Gambar sebagai Background Langkah-langkah:
<html>
<head>,</head>
<title>background – gambar</title> <body background=”bola.jpg”>
<h1 align=”center”> Web Site Saya</h1> <font color=”almond” size=2 face=”arial”> <b>Hallo</b><i>apa<i>kabar?<i></font> <br>
<font color=”almond” size=4 face=”sanserif”> Hallo apa kabar?</font>
<br>
<font color=”almond”>Silahkan</font> <font color=”red”>membaca</font>
<font color=”rose”>website saya yang pertama</font> </body>
(3)
Membuat Formulir Html
Membuat Form
Langkah-langkah: <html>
<head>
<title>form data mahasiswa</title> </head>
<body>
<b>Form Data Mahasiswa<br> Universitas Komputer Indonesia</b> </font>
</center> <hr> <table>
<tr>td>Nama anda<td>:<input type=text name=”nama” size=20> <tr>td>Alamat<td>:<input type=text name=”alamat” size=30> <tr>td>Kota<td>:<input type=text name=”kota” size=22>
<tr>td>Kodepos<td>:<input type=text name=”kodepos” size=6> <tr>td>Telp<td>:<input type=text name=”telp” size=15>
<tr>td>Jenis Kelamin<td>:<input type=”radio”
name=”kelamin”>pria<input type=”radio” name=”kelamin>wanita <tr>td>Hoby<td>:<input type=”checkbox” name=”jalan”>musik <tr>td><td>:<input type=”checkbox” name=”jalan”>jalan
<tr>td><td>:<input type=”checkbox” name=”baca”>baca <tr>td>Agama<td>:<select size=”1” name=”agama”> <option>islam</option>
<option>kristen</option> <option>hindu</option> <option>budha</option> </select>
<tr><td>Asal Sekolah<td>:<input type=”text” name=”asalsma” size=”35”>
<tr><td>Program Studi<td>:<input type=”text” name=”programstudi” size=”20”>
</table> <hr>
<input type=submit value=kirim><input type=reset> </form>
</body> </html>
(4)
Membuat Buku Tamu
Langkah-langkah:<html>
<head><head>
<title>Membuat Buku Tamu></title> <body bgcolor=”lightcoral”>
<<h1>Buku Tamu</h1>
<p>Pengunjung Yth, kami sangat senang jika anda mau mengisi buku tamu ini</p>
<hr size=5>
<form method=”post” action=”thank.html”> <h2>Tentang Anda</h2>
<table>
<tr><td>Nama Anda:<td input type=”text” name=”nama” size=30> <tr><td>Email Anda:<td input type=”text” name=”mail” size=30> <tr><td>Lokasi Anda:<td input type=”text” name=”lok” size=30> <tr><td>HomepageAnda:<td input=”text” name=”url” size=30> </table>
<hr>
<h3>Opini Anda</h3>
<p>Bagaimana pendapat anda mengenai website kami?</p> <p>
<input type=”radio” name=”choice” value=4>Hot Link,br> <input type=”radio” name=”choice” value=3 checked>Sangat Baik<br>
<input type=”radio” name=”choice” value=2>Baik,br> <input type=”radio” name=”choice” value=1>Cukup<br> </p>
Pilih Salah Satu Tombol
<input type=”Submit” value=”kirim”><input type=”reset” value=”batal”></p>
<h4>Terima Kasih atas kunjungan anda</h4> </form>
</body> </html> Thank.html <html>
<head><head>
(5)
Membuat Frame
Frameset Rows (Baris)
<html>
<frameset rows=100,*> <noframes>
Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frame src=”dua.html”> </framset>
</html>
Frameset Cols (Kolom)
<html>
<frameset cols=100,*> <noframes>
Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frame src=”dua.html”> </framset>
</html>
Frameset Rows and Cols <frameset rows=30%,*> <noframes>
Maaf hanya bisa tampil pada browser yang mendukung frame</noframes>
<frame src=”satu.html”> <frameset cols=30%,*> <frame src=”dua.html”> <frame src=”tiga.html”> </frameset>
(6)
Quiz / Latihan
1. Buatlah halaman web dengan menggunakan perintah frameset rows(2), frameset cols(2), frameset gabungan rows and cols. 2. Buatlah halaman menggunakan frameset untuk navigasi beberapa
menu, misalnya: Home, Biodata, Hoby, Pendidikan, Gallery Photo dan Formulir.