HTML
Html adalah singkatan dari Hyper Text Markup Language adalah file
teks atau file ASCII yang berisi instruksi/script kepada web browser
untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam
file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser
dan dapat menampilkannya di layar monitor.
File HTML dapat dibuat dengan aplikasi text editor apapun
di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di
Unix atau SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi
word processor apapun asalkan saat menyimpan file tersebut disimpan dengan format
text-only.
Salah satu kelebihan file HTML adalah cross platform,
artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang
berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan
satu OS tertentu saja.
Contoh pembuatan HTML yaitu :
<html>
<head>
<body background="images/skulls.png"> <h1><marquee>SELAMAT DATANG</h1></marquee>
<h2>MAKALAH KOORDINASI TUMBUHAN</h2>
BAB I
<h3><br>PENDAHULUAN
<br>1.1. Latar belakang
<p align="justify">Salah satu ciri yang membedakan benda hidup dan tak hidup adalah : benda hidup mampu bereaksi secara aktif terhadap perubahan perubahan tertentu di alam sekitarnya. Perubahan lingkungan ini berfungsi sebagai stimulus yang memicu respon pada bagian tertentu dari organisme. Bila sekitar tanaman Mimosa pudica digelapkan, maka anak daun disepanjang setiap tulang tengah melipat sesamanya.Dan sebaliknya bila tumbuhan tersebut diterangi, maka anak daunnya membuka kembali ke posisi semula.Ini berarti bahwa stimulusnya atau rangsangan ialah ada tidaknya penyinaran, sedangkan responnya adalah gerakan anak-anak daun.</p>
<p align="justify">Tumbuhan berbeda dengan hewan karna tida mengenal komunikasi internal. Salah satu perbedaanya adalah system saraf, merupakan suatu system yang bereaksi amat cepat. Dalam dunia tumbuhan system saraf praktis tidak ada, akan tetapi beberapa tumbuhan mempunyai gerak yang cepat. Misalnya, bila anak daun Mimosa pudica disentuh, maka anak-anak daun melipat.</p>
<p align="justify">Perubahan ini terjadi sebagai akibat hilangnya turgor secara tiba-tiba dalam massa sel parenkim dipangkal setiap anak daun. Demikian pula, jika anak-anak daun Mimosa disentuh, maka akan melipat berpasang-pasangan dari ujung ke pangkal. Hal ini mungkin merupakan suatu gerakan kimiawi melalui berkas pembuluh.Walau tidak ada syaraf yang terlibat, terdapat bukti bahwa ada impuls listrik tertentu yang mengaliri ke daun.
Sebagian besar tumbuhan melaksanakan ketanggapan dan koordinasinya melalui sitem koordinator kimia, yaitu hormon tumbuhan.</p>
<b >1.2. Rumusan Masalah
<br>1. Menjelaskan definisi sistem koordinasi
<br>2. Menjelaskan mekanisme fototropisme
<br>3. Menjelaskan gerakan-gerakan pertumbuhan
<br>4. Menjelaskan hormon tumbuhan
<br>5. Menjelaskan proses pembungaan
Maka akan muncul Tampilan di browser seperti berikut :
2. Html berikut untuk membuat tabel, contohnya yaitu Tabel KRS
<!DOCTYPE html>
<html>
<head>
<title>KRS</title>
</head>
<body background="images/skulls.png">
<img src="images/unhasec.jpg" align="left"><h2>UNIVERSITAS HASANUDDIN</h2>
<h4>FAKULTAS Matematika dan Ilmu Pengetahuan Alam</h4>
<h1><p align="center">KARTU RENCANA STUDI</h1>
<h3><p align="center">Semester : ganjil 2016/2017</h3></p>
<table border="0" width="100%">
<p align="left">
<tr><td width="1550px">Nama : Irmayanti</td>
<td rowspan="4"> <img src="images/pict.jpg" align="center"></td>
</tr>
<tr><td>NIM : H12116304</td></tr>
<tr><td>Program studi : Statistika-S1 reguler<td></tr>
<tr><td>Dosen PA : Dr., Erna Tri Herdiani, S.Si., M.Si.</td></tr>
</table>
</p>
<table border="1" width="100%">
<tr>
<td rowspan="2" align="center">No.</td>
<td rowspan="2" align="center">Kelas</td>
<td colspan="2" align="center">Mata Kuliah</td>
<td rowspan="2" align="center">SKS</td>
<td rowspan="2" align="center">Ke</td>
<td colspan="7" align="center">Jadwal</td>
</tr>
<tr>
<td align="center">Kode</td>
<td align="center">Nama</td>
<td align="center">Senin</td>
<td align="center">Selasa</td>
<td align="center">Rabu</td>
<td align="center">Kamis</td>
<td align="center">Jumat</td>
<td align="center">Sabtu</td>
<td align="center">Minggu</td>
<tr>
<td align="center">1</td>
<td align="left">Pengantar Ilmu Komputer D</td>
<td align="left">101H1313</td>
<td align="left">Pengantar Ilmu Komputer</td>
<td align="center">3</td>
<td align="center">1</td>
<td align="center">13:10-15:25</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">2</td>
<td align="left">STATISTIKA + MAH. LAMA</td>
<td align="left">016U0033</td>
<td align="left">Matematika Dasar I</td>
<td align="center">3</td>
<td align="center">1</td>
<td align="center">10:10-12:40</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">3</td>
<td align="left">STATISTIKA + MAH. LAMA</td>
<td align="left">021U0032</td>
<td align="left">Fisika dasar I</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">07:30-09:10</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">4</td>
<td align="left">STATISTIKA + MAH. LAMA</td>
<td align="left">030U0032</td>
<td align="left">Biologi Dasar</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center">07:30-09:10</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">5</td>
<td align="left">STATISTIKA + MAH. LAMA</td>
<td align="left">016U0033</td>
<td align="left">Kimia Dasar</td>
<td align="center">3</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center">07:30-09:10</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">6</td>
<td align="left">B.INA14</td>
<td align="left">009U0032</td>
<td align="left">Bahasa Indonesia</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center">15:45-17:25</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">7</td>
<td align="left">PAI 56</td>
<td align="left">001U0032</td>
<td align="left"> Pendidikan Agama Islam</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">15:45-17:25 </td>
<td align="center"></td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">8</td>
<td align="left">WSBM 1</td>
<td align="left">007U0032</td>
<td align="left">Wawasan Sosial Budaya Maritim</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">13:30-15:10</td>
<td align="center"></td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td align="center">9</td>
<td align="left">PAN 20 </td>
<td align="left">012U0032</td>
<td align="left">Pancasila</td>
<td align="center">2</td>
<td align="center">1</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center">15:30-17:25</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td colspan="4" align="center">Jumlah Kredit</td>
<td align="center">21</td>
<td colspan="8" align="center"> </td>
</tr>
</table>
<p align="left">IP Semester lalu : 0.00
<br> Maks SKS : 24 SKS
</body>
</html>
Maka akan muncul tampilan di browser seperti berikut :
3. Untuk membuat HTML lain yaitu
<html>
<head>
<title>Tentang</title>
</head>
<body background="images/skulls.png">
<img src="images/well.gif">
<p align="justify"><h2>Ini adalah tugas praktikum laboratorium perangkat lunak saya yang ke 4. Tugas pertama saya berkaitan Komputer dan OS yaitu membuat video proses penginstallan Windows 7 ultimate.</p>
<p align="justify"> Tugas ke 2 saya berkaiatan dengan materi Microsoft Office yaitu membuat tugas di Microsoft Word, Excel dan Power Point. Tugas Ke 3 adalah tugas yang menggunakan Aplikasi LyX yaitu membuat Resume dengan menggunakan LyX.
<p align="justify"> Tugas saya kali ini membuat website dengan menggunakan HTML berdasarkan materi pengenalan HTML yang telah dijelaskan kak Asisten pada saat Lab.</p>
<img src="images/kampus.png" align="left"> <p><h1>Nama : Irmayanti
<br> ID : PIK_0140
<br> NIM : H12116304
<br> Prodi : Statistika</h1>
</body>
</html>
Maka akan muncul tampilan seperti berikut di browser :
4. Untuk menginput Video maka kita dapat menggunakan HTML yaitu
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body background="images/skulls.png">
<h1><p align="center">Gak Bisa Move On Masa SMA ;(</h1>
<h2><p align="center"> See you again guys, See U on top :)</h2></p>
<p align="center"><video width="700" controls autoplay>
<source src="video.mp4" type="video/mp4" >
</video></p>
</body>
</html>
Maka akan memunculkan tampilan di browser seperti berikut :
5.Menambahkan HTML lain
<!DOCTYPE html>
<html>
<head>
<title>home</title>
</head>
<body background="images/skulls.png">
<p><h1>NAMA : IRMAYANTI
<br>ID : PIK_0140
<br>NIM : H12116304</h1></p>
</body>
</html>
maka akan muncul tampilan di browser seperti berikut :
6.Untuk menambahkan menu dan audio
<html>
<head><script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
<title>TEPI WEB</title>
<base target="isi"/>
<link rel="stylesheet" href="banner.css" >
</head>
<body>
<table border="0">
<tr><td><a target="_blank" href="complete.html"><h2><font color="blue">HOME</td><br></font></h2>
<br><br><tr><td><a href="profil.html"><h2><font color="green">PROFIL</td></tr></font></h2>
<tr><td><a href="TENTANG.html"><h2><font color="midnightblue">TENTANG</td></tr></font></h2>
<tr><td><a href="video.html"><h2><font color="purple"> VIDEO</td></tr></font></h2>
<tr><td><a href="tabel.html"><h2><font color="orange"> KRS</td></font></a></h2>
</tr></h1>
</table>
<br>
<img src="images/download.png">
<br><audio controls autoplay>
<source src="Meghan trainor.mp3" type=audio/mpeg>
</audio>
</body>
</html>
Maka akan muncul tampilan berikut :
7.Untuk menambahkan Header :
<html>
<head>
<title> atas</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<br>
<font color="white" size="9"><p align ="center">WELCOME TO MY BLOG</font></p>
<h3><font color="white"><marquee>LABORATORIUM REKAYASA PERANGKAT LUNAK FAKULTAS MIPA JURUSAN MATEMATIKA UNIVERSITAS HASANUDDIN</marquee></font></h3>
<div id="header">
</div>
</body>
</html>
Maka akan muncul tampilan di browser seperti berikut :
8. Menggabungkan semua HTML mejadi sebuah kesatuan dengan frameset
<html>
<head>
<title></title>
</head>
<frameset rows="26%,*" border="0" >
<frame name="welcome" scrolling="no" src="header.html"/>
<frameset cols="16%,*">
<frame name="menu" scrolling="no" src="tepi.html"/ >
<frame name="isi" scrolling="yes" src="isi.html"/>
</frameset>
<body bgcolor="red">
</body>
</html>
Maka akan muncul tampilan seperti berikut di Browser :
fighting!!!
BalasHapusLike
BalasHapusRizki suka
BalasHapusnice... (y)
BalasHapusGood job
BalasHapusGood job
BalasHapusGood job
BalasHapusNais Pipel
BalasHapusNice xD
BalasHapusKeren.. (y)
BalasHapusMantaap
BalasHapus