Komputer Aplikasi IT I (HTML)

(1)

Dasar-Dasar HTML

Membuat Dokumen HTML <html>

Web Pertamaku </title>

</head> <body>

Selamat Datang di Web Pertamaku </boby>

</html>

Menambahkan Body Text

</head> <body>

<h1>Tentang Diri Saya</h1>

Web ini akan menceritakan tentang diri saya </body>

</html>

Membuat Halaman Web Sederhana <html>

</head> <body>

<h1>Tentang Diri Saya</h1>

Web ini akan menceritakan tentang diri saya mengenai hal-hal sebagai berikut:

<br>

(2)

Materi 2 Menambahkan Warna pada Halaman Web

<font color=”warna”>teks yang akan diberi warna</font>. Contoh: “red”, “blue”, “green”, “yellow” dan “black”

<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>

<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>

(3)

Menambahkan Background Gambar pada Halaman Web

Menambahkan background pada halaman web dengan melakukan perintah <body background=” “>

Halaman Web Sederhana </title>

</head>

<body background=”fotoku.jpg”> <h1>Tentang Diri Saya</h1>

<br>

Sejarah Hidup <br>

Membuat Home Page Sederhana <html>

Halaman Muka Web Saya </title>

</head>

<body background=”fotoku.jpg”> <h1>tentang diri saya</h1>

<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>

(5)

Table

/ Tabel

Membuat Tabel

Dengan perintah <table> </table> <html>

Cellpadding </title> </head> <body>

<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>

(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>

Ini adalah header table </th>

</tr> <tr>

<td rowspan=2> Kolom 1

(7)

Membuat Daftar

Bentuk Bullet

<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>

(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>

(9)

Nested List (Sub daftar)

<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

<body>

<h2>Daftar Jenis Mobil</h2> <MENU>

(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

(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:

<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>

(12)

Materi 9

Menempatkan Gambar / Image pada Web

Langkah-langkahnya: <html>

<head>

<title>Penempatan Gambar</title> <head>

<body>

<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>

</body> </html>

Mengatur Peletakan Teks dan Gambar

Langkah-langkah: <html>

<head>

<title>Mengatur Penempatan Teks dan Gambar</title> <head>

<body>

<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>

(13)

Membuat Gambar sebagai Link

<head>

<title>Penempatan Gambar</title> <head>

<body>

<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>

<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>

(15)

Membuat Buku Tamu

<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>

<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

<h4>Terima Kasih atas kunjungan anda</h4> </form> <body bgcolor=”lightcoral”>

(16)

Materi 13

Membuat Frame

Frameset Rows (Baris)

<html>

Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>

</html>

Frameset Cols (Kolom)

<html>

Maaf hanya bias tampil dalam browser yang mendukung frame</noframes>

</html>

Frameset Rows and Cols

Maaf hanya bisa tampil pada browser yang mendukung frame</noframes>

(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.