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
