Modul Praktikum 
HTML Dasar 

 
Fery Fadly 
09​ September 2020 

 
 

Praktikum HTML Dasar Halaman 

1. Persiapan HTML Editor 

persiapkan software yang ingin digunakan. kemudian install seperti biasa.  

pada  modul  ini  software  yang  digunakan  sebagai  browser  adalah  Google  Chrome  serta 
Text Editor yaitu Sublime Text. 

2. Membuat HTML Sederhana 

● sebelum  membuat  file  HTML  silahkan  buat  folder  baru  terlebih  dahulu  sebagai 
tempat  menyimpan  semua  file  html  yang  sudah  dibuat.  hal  ini  untuk 
mempermudah dalam proses pencarian file tersebut. 
● pada  modul  ini  akan  dicontohkan  pembuatan  folder  pada  Partisi  D  folder  yaitu 
Belajar HTML 

1 
 

Praktikum HTML Dasar Halaman 

● buka  lah  Aplikasi  Text  Editor  (Sublime  Text  3).  Kemudian  Pelajari  halaman  kerja 
dari text editor tersebut.  

● perhatikan  dibagian  kanan  bawah  tertulis  “Plain  Text”.  ini menandakan bahwa file 

yang sedang dibuka dalam format tulisan biasa. 
● silahkan ketik script sebagai berikut  

2 
 

Praktikum HTML Dasar Halaman 

● Kemudian  Save pada folder yang sudah dibuat sebelumnya, simpan dengan nama 
file index.html 
● secara  otomatis  maka  keterangan  format  file  akan  berubah  menjadi  HTML  serta 
terjadi perubahan warna dari script yang ditulis. 

● silahkan  buka  folder  tempat  menyimpan  file  tersebut  kemudian  buka  dengan 
browser  yang  sudah  dipilih.  browser  akan  menampilkan  script  yang  telah  ditulis 
tadi 

3 
 

Praktikum HTML Dasar Halaman 

●  
● Voila,  pembuatan  File  Sederhana  telah  selesai. jangan lupa untuk menyimpan jika 
ada perubahan dilakukan.  

   

4 
 

Praktikum HTML Dasar Halaman 

3. HTML dengan Struktur Dasar 

● isi  dari  sebuah  file  berisi  terkait  dengan  elemen  elemen  yang cukup banyak yang 
mana setiap elemen biasanya ditandai dengan tag pembuka dan tag penutup.  
● perbedaan antara tag pembuka dan penutup adalah kurung siku dan garis miring 

● setiap  tag  pada  umumnya  akan  memiliki  konten  yang  mana  akan  di  tampilkan  di 
browser.  
● perlu  diketahui  tag  memiliki  beragam  jenis  tergantung  dari  jenisnya,  ada  tag 
paragraf, table, form, dan lain sebagainya.  
● struktur dasar sebuah web HTML terdiri dari tag html, head, title, body.  

● tag title digunakan untuk menentukan title pada web browser 

● tag body digunakan untuk mengisi dari halaman pada web browser 

5 
 

Praktikum HTML Dasar Halaman 

● silahkan simpan file tersebut dengan format HTML kemudian silahkan buka di web 
browser seperti cara pertama 

● terlihat  perbedaan  antara  kedua  file  tersebut.  yaitu  pada  file  kedua  terdapat  title 
dari  file  html  yang  dibuat  yaitu  “Pembukaan”.  lihat  di  file  pertama  hanya  tertulis 
nama dari file tersebut yaitu “index.html” 
● Voila. file html sudah dibuat sesuai dengan struktur dasar yang baku.  

   

6 
 

Praktikum HTML Dasar Halaman 

4. Tag Paragraf 
● tag paragraf ini digunakan untuk menentukan jenis letak dari paragraf yang kita 
buat. (rata kiri,kanan, tengah, rata kiri kanan) 
● biasanya tag ini digunakan untuk membuat sebuah berita dari sebuah artikel. 
● simbol tag ini adalah <p>...</p> 
● silahkan gunakan struktur dasar seperti di pembahasan sebelumnya.  
● ubah tag <h1> menjadi tag <p> 

● tentukan title dari html tersebut dan ketikan satu paragraf bebas. 

● simpan file tersebut kemudian jalankan di web browser 

7 
 

Praktikum HTML Dasar Halaman 

● tampilan dari paragraf yang ditampilkan masih terlihat berantakan jika browser 
dalam mode maximize. merapikannya bisa ditambahkan atribut “align” di tag 
paragraf.  

● atribut yang ditambahkan yaitu align right agar teks dalam posisi rata kanan 
(highlight. simpan file tersebut kemudian jalankan di web browser.  

8 
 

Praktikum HTML Dasar Halaman 

● pada text editor sudah dibuat 2 paragraf tetapi ketika di jalankan di web browser 
yang terjadi kedua paragraf tersebut menjadi satu paragraf. agar terlihat menjadi 
dua paragraf, harus menambahkan tag paragraf kembali di paragraf kedua. aturlah 
atribut align menjadi center.  

● simpan kemudian jalankan di browser.  

9 
 

Praktikum HTML Dasar Halaman 

● tambahkan paragraf dengan rata kiri dan rata kiri kanan sehingga ketika di 
jalankan di browser akan menjadi seperti ini  

   

10 
 

Praktikum HTML Dasar Halaman 

5. Tag Heading 
● tag heading merupakan tag yang digunakan untuk judul sebuah html (tag dari 
h1-h6) 
● buatlah file html dengan nama heading.html yang isinya sesuai dengan struktur 
dasar 
● buat title dengan judul “Judul Lorem”  

● simpan kemudian jalankan di browser. 

11 
 

Praktikum HTML Dasar Halaman 

● untuk melihat perbedaan setiap heading silahkan ketikan setiap script untuk 
masing masing heading 

12 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser 

● terlihat jelas perbedaan masing-masing setiap heading yang ditentukan 

● silahkan melakukan kreasi pada setiap jenis heading dengan menggabungkan 
dengan tag paragraf. buat sesuai dengan isi masing-masing setiap heading. 

contoh sebagai berikut  

13 
 

Praktikum HTML Dasar Halaman 

   

14 
 

Praktikum HTML Dasar Halaman 

6. Tag List 
● Tag list digunakan untuk menampilkan daftar dari suatu informasi 

● kemudian buka text editor dan buat file dengan nama list.html 
● list memiliki dua jenis, ordered list dan unordered list. ordered list <ol>, unordered 
list <ul> 
● untuk isi dari list menggunakan tag <li>. ketikan script sebagai berikut 

15 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser 

16 
 

Praktikum HTML Dasar Halaman 

● bedakan dengan ordered list <ol> hasilnya akan menjadi seperti ini  

● untuk menggunakan style lain (menggunakan angka romawi tambahkan script 

tpye=”I” 

17 
 

Praktikum HTML Dasar Halaman 

   

18 
 

Praktikum HTML Dasar Halaman 

7. Membuat Hyperlink <a> 

● tag hyperlink digunakan untuk berpindah antar tab antara halaman satu ke 
halaman yang lain 
● bisa dapat dipindah ke halaman internal maupun eksternal 
● perpindahan internal hanya pindah antara halaman yang kita miliki (dalam satu 
domain) sedangankan eksternal sebaliknya. 
● buka kembali text editor, kemudian buat file dengan nama link.html 
● ketikan script berikut sebagai contoh untuk pindah ke halaman heading 

● simpan kemudian jalankan di browser 

19 
 

Praktikum HTML Dasar Halaman 

● silahkan klik link tersebut untuk pindah ke halaman heading 

● silahkan tambahkan link untuk melakukan perpindahan eksternal. tambahkan tag 
<br> untuk menambahkan garis baru 

20 
 

Praktikum HTML Dasar Halaman 

●  
● simpan kemudian jalankan di browser 

   

21 
 

Praktikum HTML Dasar Halaman 

8. Tag Images 
● tag images berfungsi untuk menampilkan gambar yang kita miliki maupun dari luar 
● buka text editor dan buat file baru dengan nama image.html 
● tag image tidak membutuhkan tag penutup <img> 

● simpan kemudian jalankan di browser 

22 
 

Praktikum HTML Dasar Halaman 

● tambahkan attrib alt=”kode”/> agar jika saat file rusak masih ada data yang 
ditampilkan 
● untuk menambahkan file image dari sumber internal maka kita terlebih dahulu 
menyimpan file image tersebut ke dalam folder yang sudah kita buat tadi 
● kemudian lihat script berikut (nama image internal code.png) 

23 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser. kedua gambar akan tampil di halaman 

browser 

24 
 

Praktikum HTML Dasar Halaman 

● untuk mengatur ukuran dari gambar silahkan menambahkan atribut width (lebar) 
height (tinggi).  

25 
 

Praktikum HTML Dasar Halaman 

●  
● Simpan kemudian jalankan di browser 

● ukuran gambar akan berubah sesuai dengan ukuran yang sudah di atur.  

26 
 

Praktikum HTML Dasar Halaman 

9. Tag Table 
● tag table <table> digunakan untuk membuat dan menampilkan tabel pada 
halaman browser. 
● jenis tabel yang ditampilkan sama seperti yang dapat dilakukan di word maupun 
excel. jenis attrib yang digunakan adalah <caption> sebagai judul tabel, <thead> 
heading dari tabel, <th> konten dari tabel. <tbody> isi dari tabel. <tr> penanda, 
<td> data dari tabel 
● buka text editor, kemudian buat file html table.html 
● kemudian ketikan script seperti ini  

● simpan kemudian jalankan file tersebut di browser 

27 
 

Praktikum HTML Dasar Halaman 

●  
● untuk mengisi tabel tersebut maka kita akan menggunakan attrib <tbody>; <td>; 
<tr>. lanjutkan pembuatan script dengan menambahkan script berikut setelah 
</thead> 

28 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser 

29 
 

Praktikum HTML Dasar Halaman 

● silahkan melanjutkan dengan membuat data sebagai berikut  

● kemudian buat tabel dengan menampilkan border dengan menambahkan attrib 

border dengan ukuran 1  

30 
 

Praktikum HTML Dasar Halaman 

● seting 3 agar terlihat lebih tebal. simpan kemudian jalankan di browser. 

31 
 

Praktikum HTML Dasar Halaman 

● untuk memberikan warna pada table heading (No; Nama; Nilai ; Mutu), dapat 
dilakukan dengan menambahkan attrib styles background seperti contoh berikut 

32 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser 

33 
 

Praktikum HTML Dasar Halaman 

● untuk membuat baris total nilai yang menggabungkan 3 buah kolom maka kita 
akan menggunakan attrib colspan dengan nilai 3. seperti di script berikut  

●  
● simpan dan kemudian jalankan di browser 

● kemudian kita akan membuat tabel yang menggabungkan antara 2 baris pada 
satu tabel menggunakan atribut rowspan=”2” (nilai 2 karena mau menggabungkan 
2 buah baris) 

34 
 

Praktikum HTML Dasar Halaman 

● simpan kemudian jalankan di browser maka tabel akan berubah seperti beikut 

● jika attribut rowspan dihilangkan maka tampilan tabel akan seperti berikut  

35 
 

Praktikum HTML Dasar Halaman 

   

36 
 

Praktikum HTML Dasar Halaman 

10. Tag Form 

● tag form membuat fungsi seperti membuat formulir pendataan. contoh formulir 
pendaftaran. tag yang digunakan yaitu <form>, <label>, <input>, attribut yang 
digunakan type, placholder, name, checked 
● tipe form input terdiri dari name, date, radio, select, checkbox, button 
● buka text editor, buat file html dengan nama form.html 
● ketikan script seperti yang ada dibawah ini  

● Simpan dan kemudian buka di browser, maka tampilan form sederhana sudah 
dapat dilihat. 

37 
 

Praktikum HTML Dasar Halaman 

 
   

38 
 

Praktikum HTML Dasar Halaman 

11. CSS  
Css merupakan salah satu teknik dalam menghiasi sebuah halaman html. pada 
dasarnya CSS terdiri dari 3 bagian,  

● selector 
● property 
● value 

contoh penggunaan CSS pada halaman HTML Sebagai berikut :  

tampilan html jika di jalankan di web browser akan seperti ini  

jika menambahkan script CSS sebagai berikut 

39 
 

Praktikum HTML Dasar Halaman 

maka tampilan di browser akan menjadi seperti ini  

dalam CSS terdapat beberapa metode penggunaan CSS yaitu  

● inline CSS 
● Internal CSS 
● external CSS 

40 
 

Praktikum HTML Dasar Halaman 

pada praktik ini akan membuat dalam bentuk external CSS 

● persiapkan script HTML yang bebas, contoh dapat dilihat sebagai berikut :  

jika di jalankan di browser akan muncul sebagai berikut : 

● untuk menggunakan script css, maka buatlah sebuah file dengan ekstensi CSS. 
contoh yaitu external.css 

41 
 

Praktikum HTML Dasar Halaman 

● kemudian tentukan bagian mana yang ingin di hiasi pada tag html. pada contoh ini 
saya kan mengubah tampilan dari tulisan RMIK. maka tambahkan scprit beriikutr 
terlebih dahulu di bagian setelah style.  

<link rel="stylesheet" href="external.css"> 

script ini berfungsi untuk menguhubngkan antara file html dengan css 

kemudian tentukan file mana yang ingin dihias dengan css. berikan id pada tag di 
bagian tersebut. maka akan seperti berikut : 

untuk di file css maka yang harus dilakukan untuk mengubah tampilan dari tulisan 
“RMIK” maka dapat memberikan script sebagai berikut : 

42 
 

Praktikum HTML Dasar Halaman 

sehingga browser akan menampilkan sebagai berikut  

● fungsi masing script dapat di analisis atau di praktikan satu persatu (sebelum 
mengetikan semua script alangkah baiknya dapat mencoba satu persatu terlebih 
dahulu) 
● silahkan membuat sebuah box sederhana yang mengarahkan kita ke website 
tertentu saat di klik 

43 
 

Praktikum HTML Dasar Halaman 

maka browser akan menampilkan sebagai berikut : 

44 
 

Praktikum HTML Dasar Halaman 

perlu dipahami bahwa dalam suatu website biasanya terbagi 3 bagian 

- header 
- container 
- footer 

silahkan gunakan script dbawah ini  

45 
 

Praktikum HTML Dasar Halaman 

<!DOCTYPE html> 
<html> 
<head> 
<title> Website Saya</title> 
<link rel="stylesheet" href="index.css"> 
</head> 
<body > 
<header> 
<h3>Selamat Datang di Website ku</h3> 
</header> 
<br> 
 
<div class="container"> 
<div id="content"> 
<h1>sejarah HTML</h1> 
<p>HTML dibuat oleh Tim Berners-Lee, seorang ahli fisika di lembaga 
penelitian CERN yang berlokasi di Swiss. Dia memiliki ide tentang sistem 
hypertext yang berbasis internet. 
  <br> 
 
Hypertext merujuk pada teks yang memuat referensi (link) ke teks lain yang bisa 
diakses langsung oleh viewer. Tim merilis versi pertama HTML pada tahun 1991, 
dan di dalamnya terdiri atas 18 HTML tag. Sejak saat itu, setiap kali bahasa HTML 
merilis versi teranyarnya, selalu ada tag dan attribute (tag modifier) terbaru. 
<br> 
Berdasarkan HTML Element Reference milik Mozilla Developer Network, untuk 
saat ini, ada 140 HTL tag meskipun sebagiannya sudah usang (tidak lagi didukung 
oleh versi terbaru browser). 
<br> 
Berkat popularitasnya yang terus meningkat, HTML kini dianggap sebagai web 
standard yang resmi. Spesifikasi HTML di-maintain dan dikembangkan oleh World 
Wide Web Consortiumm (W3C). Cek versi terbaru dari bahasa ini di website W3C. 
<br> 
Upgrade HTML besar-besaran terjadi pada tahun 2014, dan hasilnya adalah 
pengenalan HTML5. Pada upgrade tersebut, terdapat semantic baru yang 
memberitahukan arti dari kontennya sendiri 
<br> 
</div> 
<img src="kemenkes.png" /> 
</div> 
<br> 
<footer> 
<ul> 
<li> 
Kementerian Kesehatan Republik Indonesia 
</li> 

46 
 

Praktikum HTML Dasar Halaman 

<li> 
BPPSDM Republik Indonesia 
</li> 
<li> 
Poltekkes Kemenkes Tasikmalaya 
</li> 
 
   
</ul> 
</footer> 
</body> 
</html> 

simpan kemudian buatlah sebuah file css dengan script berikut  

47 
 

Praktikum HTML Dasar Halaman 

body { 
font-family: 'Source Sans Pro'; 
text-align: justify; 
background:#c797a5; 
margin:0; 
color:white; 
display:grid; 
grid-template-columns: auto; 
grid-template-rows: 5px solid black; 
grid-template-areas:  
"header" 
"body" 
"footer"; 
} 
a { 
text-decoration:none; 
color:red; 
font-size:1.8em; 
font-weight:700; 
} 
img {  
width:150px; 
} 
header { 
background: red; 
padding: 1em; 
grid-area: header; 
text-align: center; 
font-size: 50px; 
} 
 
.container { 
padding: 4em 1em; 
grid-area: body; 
} 
 
footer { 
grid-area: footer; 
background:#571212; 
} 
 
ul { 
margin:0;padding:0; 
} 
ul li { 

48 
 

Praktikum HTML Dasar Halaman 

padding: 2em; 
color:#E98A8A; 
} 
ul li span { 
display:block; 
font-size:1.4em; 
margin-bottom:1em; 
color: white; 
} 
.container { 
display:grid; 
grid-template-columns: 66% auto; 
padding: 4em 1em; 
} 
ul { 
display:grid; 
list-style-type:none; 
margin:0;padding:0; 
grid-template-columns: repeat(3, auto); 
grid-template-rows: repeat(2, auto); 
} 
img {  
width:150px; 
justify-self:center; 
} 

simpan kemudian jalankan 

49 
 

Praktikum HTML Dasar Halaman 

50 
 

Praktikum HTML Dasar Halaman 

tampilan nya akan berubah seperti itu  

terima kasih 

51