HTML
HTML
HTML (Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang
dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser.
Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap
kepada pengguna.
Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti
b, i, u dan sebagainya.
Fungsi HTML
HTML telah mengubah dunia internet, kurang lebih berikut adalah fungsi utama :
Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman Web) dan isinya.
Mempublikasikan document secara online sehingga bisa diakses, dilihat dari keseluruh dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
Menambahkan object – object seperti image, audio, video dan juga java applet (aplikasi java
seperti java game dll) dalam document HTML.
Sebelum kita mengakhiri semua teori ini, ada 2 tools (alat) yang dibutuhkan :
1. Browser
Browser merupakan software yang di install di mesin client (komputer kita sebagai pengguna
website) yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Contoh
browser Internet Explorer, Mozila, opera dan masih banyak yang lainya.
2. Editor
Editor adalah program yang bisa digunakan untuk membuat document HTML (Web
page/Halaman Web), ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms
FrontPage, Dreamweaver, Notepad, dll.
STRUKTUR DOKUMEN HTML
[Link]
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo Word!
</body>
</html>
Title (Judul Halaman Web)
<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> : merupakan tag head dokumen html.
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin ditampilkan
di dokumen html disimpan dalam tag body ini.
HTML
Dari struktur dasar html di atas dapat dijelaskan sebagai berikut:
a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah
tag dengan nama body.
Tag harus ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup
(ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka
isi dokumen html, dan </body> ini adalah tag penutup isi dokumen html.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh
untuk menampilkan judul dokumen html pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen html Judul Dokumen html ini adalah isi judul
dari dokumen html </title> ini adalah tag penutup judul dokumen html.
Tag‐tag yang ditulis secara berpasangan pada suatu element html, tidak boleh saling tumpang
tindih dengan pasangan tag‐tag lainnya. Contoh penulisan tag‐tag yang benar
<p>
<b>
</b>
</p>
Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna ( Error ) sehingga
dapat mengganggu penampilan dan dinamika web itu sendiri.
c. Attribute
Attribute mendefinisikan property dari suatu element html, yang terdiri atas nama dan nilai.
Penulisannya adalah sebagai berikut: penulisannya adalah <body bgcolor="black"
text="yellow">
MEMULAI HTML
[Link]
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<!-- Ini merupakan suatu komentar -->
<BODY>
Selamat Belajar HTML<BR> Semoga Sukses !
</BODY>
</HTML>
MEMBUAT TEKS FORMAT JUDUL
Teks format judul biasa digunakan untuk judul postingan/artikel dalam halaman web.
<h1> </h1> s/d <h6> </h6>
HTML
[Link]
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
MEMBUAT PARAGRAF
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web.
[Link]
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p align="right"> Lorem Ipsum adalah contoh teks atau dummy </p>
<p align="center"> Tidak seperti anggapan banyak orang </p>
<p align="left"> Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah.</p>
</body>
</html>
MENAMBAH BARIS
Tag untuk menambah baris adalah <br />
HTML
[Link]
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
MEMBUAT GARIS
Tag <hr /> digunakan untuk membuat garis pada dokumen html.
[Link]
<html>
<head>
<title>Membuat Garis</title>
</head>
<body>
<h1 align="right">Ini adalah garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3">
</body>
</html>
MEMBUAT TEXT BOLD, ITALIC, UNDERLINE, STRIKETRUE, SUPERSRIPT DAN
SUBSCRIPT
[Link]
<html>
<head>
<title>Edit Text</title>
</head>
<body >
<b>Ini Text Bold</b><br>
<i>Ini Text Italic</i><br>
<u>Ini Text Underline</u><br>
HTML
<s>Ini Text Striketrue</s></br>
Text Superscript: X<sup>2</sup><br>
Text Subscript: H<sub>2</sub>O
</body>
</html>
LATIHAN 1
1. Buatlah halaman web seperti tampilan dibawah ini dengan menggunakan tag-tag sebagai
berikut.
Tag <h>.....</h>
Tag <p>.....</p>
Tag <br />
Tag <hr />
Tag <b>.....</b>
Tag <i>.....</i>
Tag <u>....</u>
Tag <s>....</s>
Tag <sup>....</sup>
Tag <sub>....</sub>
HTML TUTORIAL
LINK
Anda tentu sering mengklik suatu tulisan atau gambar pada website yang menuju ke halaman
lainnya. Yang anda klik itu adalah link. Link merupakan teks atau gambar yang membuka
halaman website lainnya. Untuk membuat link kita dapat menggunakan tag <a></a>.
Atribut : Href, target
[Link]
<html>
<head>
<title>Link</title>
</head>
<body>
Pemain-pemain AC Milan menurut abjad <br />
<a href="[Link]">Klik Disini</a>
</body>
</html>
MEMBUAT GAMBAR DENGAN Tag <img>
Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu anda tentu ingin
menambahkan gambar didalam website anda. Untuk menampilkan gambar pada halaman dapat
digunakan tag <img>. Format file yang dapat didukung oleh tag img bermacam-macam mulai
BMP, JPG, GIF, TGA dan [Link] img memiliki beberapa atribut yaitu
‐ src : letak file gambar yang akan ditampilkan
‐ border: tebal bingkai gambar
HTML
‐ height: menentukan tinggi image/gambar
‐ width: menentukan lebar image/gambar
Atribut : Src, alt, name, border, height, width
[Link]
<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<img src="../gambar/[Link]" border="1" height="300" width="200">
</body>
</html>
LATIHAN 2
Buatlah halaman web seperti tampilan dibawah ini dengan menggunakan tag-tag sebagai
berikut.
Tag <h>.....</h>
Tag <p>.....</p>
Tag <br />
Tag <hr />
Tag <b>.....</b>
Tag <img />
Tag <a>....</a>
HTML
PENGGUNAAN TABEL
Tag-tag yang digunakan :
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
Atribut : Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background,
align, valign
<CAPTION> menentukan judul tabel
<TR> membuat baris dalam tabel
Atribut : Height, bgcolor, background, align, valign
<TH> membuat judul kolom
Atribut : Height, width, bgcolor, background, align, valign, title, colspan, rowspan
<TD> membuat sebuah sel data
Atribut : Height, width, bgcolor, background, align, valign, title,
colspan, rowspan
[Link]
<html>
<head>
<title>tabel dengan garis</title>
</head>
<body>
<table border = "1">
<caption>daftar harga keladi</caption>
<tr><th>nama</th><th>harga</th></tr>
<tr><td>red flash</td><td>35.000</td></tr>
<tr><td>red fire</td><td>60.000</td></tr>
<tr><td>fannie munson</td><td>60.000</td></tr>
</table>
</body>
</html>
HTML
PENGGABUNGAN SEL DENGAN ATRIBUT ROWSPAN dan COLSPAN
Rowspan berfungsi untuk menggabungkan beberapa baris sedangkan Colspan berfungsi untuk
menggabungkan beberapa kolom, Atribut ROWSPAN ditempatkan pada tag <TD> dan Atribut
COLSPAN bisa ditempatkan pada tag <TD> atau <TH>.
[Link]
<html>
<head>
<title>penggunaan rowspan</title>
</head>
<body>
<table border = "1">
<caption>daftar wilayah dan kota</caption>
<tr>
<td rowspan = "3">jawa tengah</td>
<td>semarang</td>
</tr>
<tr><td>kudus</td></tr>
<tr><td>solo</td></tr>
</table>
</body>
</html>
[Link]
<html>
<head>
<title>penggunaan colspan</title>
</head>
<body>
<table border = "1">
<caption>daftar target</caption>
<tr>
<th colspan = "2">area: jawa tengah</th>
</tr>
<tr><td>semarang</td><td>15.000</td></tr>
<tr><td>kudus</td><td>11.000</td></tr>
</table>
</body>
</html>
HTML
HTML
PENGATURAN JARAK DALAM TABEL :
CELLSPACING mengatur jarak bagian sel th tepi dalam bingkai tabel. CELLPADDING
mengatur jarak teks terhadap tepi kiri.
[Link]
<html>
<head>
<title>tombol dengan tabel</title>
</head>
<body>
<table border = "5" cellspacing = "5" cellpadding = "5" bgcolor = "green">
<tr><td>
<font color = "red"><b>e-mail</b></font>
</td></tr>
</table>
</body>
</html>
LATIHAN 3
1. Buatlah halaman web seperti tampilan dibawah ini dengan menggunakan tag-tag sebagai
berikut.
Tag <table>.....</table>
HTML TUTORIAL
MEMBUAT LIST
Ada 3 jenis list dalam dokumen html yaitu:
1. Ordered List “<ol>”
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan. list yang
ditampilkan nanti oleh tag ini akan menampilkan nomor disebelah kiri dari detail.
[Link]
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
HTML TUTORIAL
Pada Ordered List “<ol>” secara default pengurutan akan diurutkan dengan angka. Jika anda
ingin mengurutkan dengan huruf/romawi maka anda tinggal menambahkan atribut type pada tag
<ol> contoh:
[Link]
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol type="A">
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ol>
</body>
</html>
Unordered List <ul>
Unordered List merupakan pengurutan list dengan menggunakan symbol/bullet. Cara
membuatnya sama dengan Ordered List hanya saja tag <ol> diganti dengan tag <ul>. Contoh:
[Link]
<html>
<head>
<title>web saya</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ul>
<li>Memasak</li>
<li>cuci piring</li>
<li>cuci baju</li>
<li>mandi</li>
<li>sarapan</li>
<li>berangkat sekolah</li>
</ul>
</body>
</html>
HTML TUTORIAL
MENGATUR FONT
Untuk mengatur huruf dokumen html digunakan tag <font size>. Tag <font size> memiliki
beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Atribut : Color, size, face
[Link]
<html>
<head>
<title>Ukuran font</title>
</head>
<body>
<font size=1>Ukuran font 1</font><br>
<font size=2>Ukuran font 2</font><br>
<font size=3>Ukuran font 3</font><br>
<font size=4>Ukuran font 4</font><br>
<font size=5>Ukuran font 5</font><br>
<font size=6>Ukuran font 6</font><br>
<font size=7>Ukuran font 7</font>
</body>
</html>
FORM
Seperti namanya form yang berarti isian atau formulir.
Setiap type juga memiliki attribut sendiri-sendiri. Tapi setiap type pasti memiliki attribut name.
Berikut ini beberapa tipe type yang dapat anda gunakan:
HTML TUTORIAL
Text – tipe ini seperti yang terlihat di gambar yaitu berupa textbox. Text memiliki tiga
attribut diantaranya:
o Size – yang merupakan ukuran panjang dari textbox.
o Maxlength – merupakan karakter maksimal yang dapat ditampung oleh textbox.
o Value – merupukan isi dari textbox yang telah ditetapkan. User dapat
menggantinya dengan langsung mengetikkan pada textbox.
Password – hampir sama dengan text hanya saja karakter yang diketikkan akan
berupa asterik (*).
Hidden – input ini tidak dimunculkan di layar browser. Dapat digunakan untuk
menyimpan nilai atau variabel yang digunakan untuk halaman berikutnya.
Submit – tipe ini akan menampilkan tombol submit(pengiriman). Nama tombol diambil
dari nilai attribut value. Jika tidak ada maka namanya Submit Query.
Reset – tipe ini digunakan untuk membersihkan segala isian pada form. Attributnya
hampit sama dengan submit.
File – tipe ini digunakan untuk proses peng-upload-an file. Tampilannya hampir sama
dengan tipe text tapi disebelahnya ada tombol “browse”. Ketika user menekan browse
akan muncul kotak dialog untuk memilih file yang diupload.
Checkbox – tipe ini akan memunculkan tampilan checkbox. Biasanya checkbox
digunakan untuk memilih lebih dari satu pilihan. Jika pada tag ini terdapat kata “checked” maka
checkbox tersebut akan ditandai.
Radio – tipe ini akan menampilkan tampilan radio button. Tipe ini digunakan jika kita
harus memilih hanya satu pilihan. Jika ada kata “checked” maka radio tersebut akan
ditandai(default).
Textarea – tipe ini Digunakan sebagai input kontrol form untuk memasukan teks lebih
dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.
HTML
Select – tipe ini Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down
list.
[Link]
<html>
<head>
<title>Contoh pembuatan Form</title>
</head>
<body>
<form action="#" method="#">
<p> Nama lengkap : <input type="text" name="nama" /></p>
<p> Password : <input type="password" name="password"></p>
<p> Jenis kelamin : <input type ="radio" name="jk"> Pria
<input type ="radio" name="jk"> Wanita</p>
<p> Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>
<p> Hobi : <input type="checkbox" name="hobi" value="Membaca">Baca Buku
<input type="checkbox" name="hobi" value="Kesenian">kesenian
<input type="checkbox" name="hobi" value="olahraga">Olahraga
<input type="checkbox" name="hobi" value="Traveling">Jalan Jalan</p>
<p> Pekerjaan : <select name="Pekerjaan">
<option value="Pelajar">Pelajar/Mahasiswa</option>
<option value="PNS">Pegawai Negeri Sipil</option>
<option value="Karyawan">Karyawan</option>
<option value="Wiraswasta">Wiraswasta</option>
</select></p>
<p>Komentar : <textarea name="komentar" cols="25" rows="4"></textarea></p>
<p>Upload Foto :<input type="file" /></p>
<p><input type="submit" value="kirim data"/><input type="reset" value="ulang"></p>
</form>
</body>
</html>
HTML TUTORIAL
LATIHAN 4
1. Buatlah halaman web seperti tampilan dibawah ini dengan menggunakan tag-tag sebagai
berikut.
Tag <table>.....</table>
Tag <font>.....</font>
Tag <form>....</form>
Tag <ol>.....</ol>
HTML
Membuat Animasi Teks Bergerak
Tag Marquee digunakan untuk membuat animasi teks jalan pada dokumen html.
[Link]
<html>
<head>
<title>membuat animasi marquee</title>
</head>
<body>
<marquee behavior="alternate"
bgcolor="#0099ff">animasi
marquee(alternate)</marquee><br><br>
<marquee behavior="scroll" bgcolor="#0099ff"
direction="left">animasi marquee(scroll)</marquee><br><br>
<marquee behavior="slide" bgcolor="#0099ff" >animasi
marquee(slide)</marquee><br><br>
</body>
</html>
TAG AUDIO
[Link]
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML
TAG VIDEO
[Link]
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
<a href="[Link] target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
HTML
MEMBUAT WEBSITE SEDERHANA DENGAN HTML
1. Siapkan wireframe website yang akan kita buat, contoh wireframe seperti gambar
dibawah ini.
Keterangan gambar :
Wireframe terdiri dari :
1. Header : untuk meletakkan gambar/logo website.
2. Menu Navbar : untuk meletakkan menu navigasi website.
3. Menu left sidebar : untuk meletakkan menu/isi website yang berada sebelah di kiri.
4. Content : untuk meletakkan isi daripada website.
5. Link information : untuk meletakkan link informasi website.
6. Footer : untuk meletakkan nama pencipta website.
Skrip [Link]
<!DOCTYPE html>
<html>
<head>
<title>Selamat datang di Website kami</title>
</head>
<body>
<table width="900px" border="1px" align="center">
<tr height="150px">
<td colspan="3" align="center"><!--ini tempat mengisi logo/gambar (header)-->
Gambar/Logo <br/>Header <!--akhir logo/gambar--></td>
</tr>
<tr>
HTML
<td colspan="3" align="center"><!--ini tempat mengisi menu navbar-->Menu
Navbar<!--akhir menu navbar--></td>
</tr>
<tr height="450px">
<td width="25%" valign="top"><!--ini tempat mengisi menu left sidebar-->Menu
Left Sidebar<!--akhir menu left sidebar--></td>
<td width="50%" valign="top"><!--ini tempat mengisi Content-->Content <!--
akhir Content--></td>
<td width="25%" valign="top"><!--ini tempat mengisi link information-->Link
Information<!--akhir link information--></td>
</tr>
<tr>
<td colspan="3" align="center"><!--ini tempat mengisi footer-->Footer<!--akhir
footer--></td>
</tr>
</table>
</body>
</html>
2. Setelah wireframe dibuat maka kita akan meletakkan isi daripada website yang akan kita
buat seperti gambar dibawah ini.
3. Kita akan mengisi header terlebih dahulu, kemudian carilah code html seperti dibawah ini
(code ini terdapat di komentar header).
HTML
<!--ini tempat mengisi logo/gambar (header)--> Gambar/Logo <br/>Header <!--akhir
logo/gambar-->
Kemudian Ganti menjadi
<!--ini tempat mengisi logo/gambar (header)--> <img src="[Link]"> <!--akhir
logo/gambar-->
Hasil header website
Kemudian kita akan mengisi menu navbar, kemudian carilah code html seperti dibawah ini
(code ini terdapat di komentar menu navbar).
<td colspan="3" align="center"><!--ini tempat mengisi menu navbar-->Menu Navbar<!--akhir
menu navbar--></td>
Kemudian Ganti menjadi
<td colspan="3" align="right"><!--ini tempat mengisi menu navbar-->
<a href="#">Beranda </a> |
<a href="#">Profil </a> |
<a href="#">Visi Misi </a> |
<a href="#">Gallery </a> |
<a href="#">Hubungi Kami </a>
<!--akhir menu navbar--></td>
HTML
Hasil menu navbar website
5. Setelah itu kita akan mengisi menu left sidebar, kemudian carilah code html seperti
dibawah ini (code ini terdapat di komentar menu left sidebar).
<td width="25%" valign="top"><!--ini tempat mengisi menu left sidebar-->Menu Left
Sidebar<!--akhir menu left sidebar--></td>
Kemudian Ganti menjadi
<td width="25%" valign="top" align="center"><!--ini tempat mengisi menu left sidebar-->
<h2>ARTIKEL</h2>
<a href="#"><h3>Judul Artikel 1</h3> </a>
<a href="#"><h3>Judul Artikel 2</h3> </a>
<a href="#"><h3>Judul Artikel 3</h3> </a>
<a href="#"><h3>Judul Artikel 4</h3> </a>
<h2>link Download</h2>
<a href="#"><h3>link Download 1</h3> </a>
<a href="#"><h3>link Download 2</h3> </a>
<a href="#"><h3>link Download 3</h3> </a>
<a href="#"><h3>link Download 4</h3> </a>
<!--akhir menu left sidebar--></td>
HTML
Hasil menu left sidebar.
6. Kemudian isi content website, kemudian carilah code html seperti dibawah ini (code ini
terdapat di komentar content).
<!--ini tempat mengisi Content-->Content <!--akhir Content-->
Kemudian Ganti menjadi
<!--ini tempat mengisi Content--><h2>Selamat Datang di Website Kami</h2>
<img src="[Link]" width="150px" height="150px" align="left" />
<h3>Judul</h3>
<p>Berisi tentang Informasi Berisi tentang Informasi Berisi tentang Informasi
Berisi tentang Informasi Berisi tentang Informasi Berisi tentang Informasi Berisi tentang
Informasi</p>
<br />
<img src="[Link]" width="150px" height="150px" align="left" />
<h3>Judul</h3>
<p>Berisi tentang Informasi Berisi tentang Informasi Berisi tentang Informasi
Berisi tentang Informasi Berisi tentang Informasi Berisi tentang Informasi Berisi tentang
Informasi</p>
<!--akhir Content-->
HTML
Hasil content website.
7. Setelah itu kita akan mengisi link information, kemudian carilah code html seperti
dibawah ini (code ini terdapat di komentar link information).
<td width="25%" valign="top"><!--ini tempat mengisi link information-->Link Information<!--
akhir link information--></td>
Kemudian Ganti menjadi
<td width="25%" valign="top" align="center"><!--ini tempat mengisi link information-->
<h2>AGENDA</h2>
<ul align="left">
<li>Judul Agenda</li>
<li>Judul Agenda</li>
<li>Judul Agenda</li>
<li>Judul Agenda</li>
</ul>
<h2>link Infomasi</h2>
<a href="#"><h3>link Infomasi 1</h3> </a>
<a href="#"><h3>link Infomasi 2</h3> </a>
<a href="#"><h3>link Infomasi 3</h3> </a>
<a href="#"><h3>link Infomasi 4</h3> </a>
<a href="#"><h3>link Infomasi 5</h3> </a>
<!--akhir link information--></td>
HTML
Hasil link information website.
8. Pada tahap terakhir kita akan mengisi footer website, kemudian carilah code html seperti
dibawah ini (code ini terdapat di komentar footer).
<!--ini tempat mengisi footer-->Footer<!--akhir footer-->
Kemudian Ganti menjadi
<!--ini tempat mengisi footer-->Design created by : Hery Prasetyawan<!--akhir footer-->
Hasil footer website dan sekaligus menjadikan website sederhana dengan menggunakan HTML.
HTML
LATIHAN 5
1. Buatlah website sederhana seperti tampilan dibawah ini.
Wireframe
LOGO/GAMBAR
(Header)
PENCARIAN
HOME Selamat Datang di Website
PROFIL
BERITA
FOTO
LOGIN
Username
Password
Fasilitas dan Keunggulan
Fasilitas dan keunggulan pertama
Kirim
Fasilitas dan keunggulan kedua
Fasilitas dan keunggulan ketiga
Design Created By : Hery Prasetyawan
Hasil Tampilan
SEKIAN & TERIMA KASIH