Pengenalan HTML
HTML (Hyper Text Markup Language) merupakan
bahasa standar pemrograman untuk membuat suatu halaman web yang terdiri dari
kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan
Web browser untuk menampilkan halaman Web yang terdiri dari berbagai macam
format tampilan seperti texs, grafik, animasi link maupun audio-video.
Berikut cara membuat web di html:
1. Cara membuat frame
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="25%,*">
<frame name="atas" src="atas.html"></frame>
<frameset cols="20%,*">
<frame name="menu" scrolling="no" src="samping.html"></frame>
<frame name="isi" src="home.htm"></frame>
</frameset>
</frameset>>
</html>
2. Cara membuat menu pada tepi frame set
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body background="33.jpg">
<h1>Menu </h1>
<h2>
<a target="_blank" href="index.html"><font color="black"> <LI>Home</LI></a>
<br><a href="Biodata.html" target="isi"> <font color="black"> <LI>Biodata</LI></a>
<br><a href="video.html" target="isi"> <font color="black"> <li>Video</li></a>
<br><a href="krs.html" target="isi"> <font color="black"> <li>Krs</li></a>
<br><a href="materi.html" target="isi"> <font color="black"> <li>materi</li></a>
</h2>
<br><marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="alternate"><img src="yuu.gif" width="180pt"></marquee>
</body>
</html>
3. Cara membuat frame bagian atas
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body background="original.jpg">
<br></br>
<h1><marquee behavior="alternative"> <center>WELCOME TO MY BLOG</h1>
<audio src="Red Velvet - Ice Cream Cake.mp3" type="audio/mp3" autoplay="">
</audio>
</body>
</html>
4. Cara membuat beranda pada menu home
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head><body background="88.gif">
<center>
<b>
<p><font size="5" color="black" face="times new roman">NAMA: MAMIK UTAMI
</font></p><p><font size="5" color="black" face="times new roman">NIM: H12116507
</font></p><p><font size="5" color="black" face="times new roman">KELOMPOK: MOUSE
</font></p><p><font size="5" color="black" face="times new roman">ID: 0075
</font></p><p><font size="5" color="black" face="times new roman"> <img src="logo.jpg">
</font></p><p><font size="5" color="black" face="times new roman">ASISTEN:
</font></p><p><font size="5" color="black" face="times new roman">1. ANDI FAHRUDDIN AKAS
</font></p><p><font size="5" color="black" face="times new roman">2. ANDI SAYUDI
</font></p><p><font size="5" color="black" face="times new roman">3. SETIAWAN ACHMAD
</font></p><p><font size="5" color="black" face="times new roman">4. HEDI KUSWANTO
</font></p><p><font size="5" color="black" face="times new roman">5. RACHMAT DARMAWAN
</font></p><p><font size="5" color="black" face="times new roman">6. IRWAN BUDIANSYAH
</font></p><p><font size="5" color="black" face="times new roman">7. RUSNI SAMSIR
</font></p><p><font size="5" color="black" face="times new roman">8. NIRMALASARI
</font></p><p><font size="5" color="black" face="times new roman">LABORATORIUM REKAYASA PERANGKAT LUNAK
JURUSAN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS HASANUDDIN
MAKASSAR
2016 </font></p></b><p><b>
</b>
</p></center></body></html>
5. Cara membuat biodata
<!DOCTYPE html>
<html>
<head>
<title>biodata</title>
</head>
<body background="flower.jpg">
<p>
<center> <font color="purple">
<p> <h1> Biodata saya </h1>
<img src="pic.jpg" align="center" width="200" height="210"> </center>
</p>
<center>
<h1> A. Biodata Pribadi </h1><br>
<h3> <font face="comic sans ms">
<p>Nama Lengkap: Mamik Utami
<p>Tempat tgl lahir: Ujung Pandang, 04 April 1998
<p>Alamat:Jl.Borong Raya Makassar
<p>Agama: Islam
<p>Jenis Kelamin: Perempuan
<p>Hobi: Membaca,menonton
<p>Pendidikan: Mahasiswa</p>
<h2> B. Biodata Pendidikan </h2><br>
<p>Sekolah
<p>SD Inp.Batua 1
<p>2010
<p>SMP Negeri 8 Makassar
<p>2013
<p>SMA Negeri 1 Makassar
<p>2016
<p>Univeristas Hasanuddin
<p>Semester 1</p>
</center>
</p>
</pre>
</body>
</html>
6. Cara menambahkan video
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body background="pic3.png">
<table align="center">
<tr>
<h2 align="center" style="color: red"></h2>
</tr>
<tr>
<td>
<video controls="autoplay" src="mamik.mp4" autoplay="" height="500" width="700"></video>
</td>
</tr>
</table>
</body>
</html>
7. Cara menambahkan KRS
<!DOCTYPE html>
<html>
<head>
<title>KRS</title>
</head>
<body background="grey.jpg">
<table>
<tr>
<td rowspan="2">
<img src="unhas_logo.png">
</td>
<td>
<font size="10">Universitas Hassanudin</font>
</td>
</tr>
<tr>
<td align="top">
<b>Fakultas Matematika dan Ilmu Peng. Alam</b>
</td>
</tr>
</table>
<table>
<caption>
<h2>KARTU RENCANA STUDI</h2>
<h3>Semester : Ganjil 2016 / 2017</h3>
</caption>
<tr>
<td width="125">
NAMA
</td>
<td>
:
</td>
<td width="1028">
Mamik Utami
</td>
<td rowspan="4" align="right">
<img src="_DSC8756.jpg" width="75" height="100" border="1px solid #000">
</td>
</tr>
<tr>
<td>
NIM
</td>
<td>
:
</td>
<td>
H12116507
</td>
</tr>
<tr>
<td>
Program Studi
</td>
<td>
:
</td>
<td>
Statistika - S1 Regular
</td>
</tr>
<tr>
<td>
Dosen PA
</td>
<td>
:
</td>
<td>
Dr. Erna Herdiani, S.Si., M.Si
</td>
</tr>
</table>
<table class="table-common" border="1">
<caption></caption>
<tr>
<th rowspan="2" bgcolor="cyan">No.</th>
<th rowspan="2" bgcolor="cyan">Kelas</th>
<th colspan="2" bgcolor="cyan">Mata Kuliah</th>
<th rowspan="2" bgcolor="cyan">SKS</th>
<th rowspan="2" bgcolor="cyan">Ke</th>
<th colspan="7" bgcolor="cyan">Jadwal</th>
</tr>
<tr>
<th bgcolor="cyan">Kode</th>
<th bgcolor="cyan">Nama</th>
<th bgcolor="cyan" width="7.5%">Sn</th>
<th bgcolor="cyan" width="7.5%">Sl</th>
<th bgcolor="cyan" width="7.5%">Rb</th>
<th bgcolor="cyan" width="7.5%">Km</th>
<th bgcolor="cyan" width="7.5%">Jm</th>
<th bgcolor="cyan" width="7.5%">Sb</th>
<th bgcolor="cyan" width="7.5%">Mg</th>
</tr>
<tr>
<td align="center">
1
</td>
<td>
Pengantar Ilmu Komputer C
</td>
<td>
101H1313
</td>
<td>
Pengantar Ilmu Komputer
</td>
<td align="center">
3
</td>
<td align="center">
1
</td>
<td>
</td>
<td></td>
<td>07:30-09:10</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
2
</td>
<td>
STATISTIKA + MHS LAMA
</td>
<td>
021U0032
</td>
<td>
Fisika Dasar 1
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td></td>
<td></td>
<td></td>
<td>
07:30-09:10
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
3
</td>
<td>
statistika + mh lama
</td>
<td>
03U0032
</td>
<td>
Biologi Dasar
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td>
07:30-09:10
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
4
</td>
<td>
Statistika + Mala
</td>
<td>
025U0032
</td>
<td>
Kimia Dasar
</td>
<td align="center">
3
</td>
<td align="center">
1
</td>
<td></td>
<td>
07:30-09:10
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
5
</td>
<td>
Statistik B + Mah. lama FMIPA
</td>
<td>
016U0033
</td>
<td>
Matematika Dasar 1
</td>
<td align="center">
3
</td>
<td align="center">
1
</td>
<td></td>
<td></td>
<td></td>
<td>
09:20-11:50
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
6
</td>
<td>
B.INA14
</td>
<td>
009U0032
</td>
<td>
Bahasa Indonesia
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td></td>
<td>
15:45-17:25
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
7
</td>
<td>
PEND. AGAMA ISLAM
</td>
<td>
007U0032
</td>
<td>
Pendidikan Agama Islam
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
15.45-17.20
</td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
8
</td>
<td>
WSBM 18
</td>
<td>
007U0032
</td>
<td>
Wawasan Sosial Budaya Maritim
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td></td>
<td></td>
<td>
13:30-15:10
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">
9
</td>
<td>
PAN 20
</td>
<td>
012U0032
</td>
<td>
Pancasila
</td>
<td align="center">
2
</td>
<td align="center">
1
</td>
<td></td>
<td></td>
<td></td>
<td>
15:30-17:25
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">
<b>JUMLAH KREDIT</b>
</td>
<td align="cente"r>
<b>21</b>
</td>
<td colspan="8"></td>
</tr>
</table>
</body>
</html>
Berikut hasilnya yang ada di gambar berikut