Salin-Daftar Tilik (PTM) Website

STIKes PAYUNG NEGERI PEKANBARU
PRODI ILMU KESEHATAN MASYARAKAT
DAFTAR TILIK PRAKTIK PEMBUATAN WEBSITE SEDERHANA

MENGGUNAKAN HTML
Nama Mahasiswa : AIE DESTHIA VIOLA
NIM : 20401002
Tingkat :3
Dosen Penguji : Rahmi Pramulia M.Kes
Nilailah setiap kinerja dengan membubuhka tanda (√) dalam kolom penilaian kinerja setiap
langkah yang diamati dengan menggunakan skala penilaian sebagai berikut :
0. : Langkah kerja tidak dilakukan
1. : Langkah kerja tidak dilakukan dengan benar
2. : Langkah kerja dilakukan tetapi dengan bantuan
3. : Langkah kerja dilakukan sendiri dengan benar (mahir)
HTML adalah salah satu komponen inti world wide web atau www yang membentuk struktur
halaman web. Setelah halaman dibuat, Anda bisa menyimpannya sebagai dokumen HTML dan
meninjaunya melalui peramban. Pembuat halaman HTML bisa dilakukan menggunakan
program penyunting teks dasar yang tersedia pada komputer Windows dan Mac.
Praktikum
Tgl....
No Prosedur yang Dilaksanakan Score
0 1 2 3
A Persiapan Alat
1 1. Jaringan Internet
2. Laptop
3. Aplikasi html
B Cara Kerja
Menambahkan Segmen Kepala Dokumen HTML
1 Buka program penyunting teks. Jika Anda menggunakan

komputer Windows, biasanya Anda dapat memilih Notepad
atau Notepad++. Untuk para pengguna MacOS, Anda bisa
menggunakan TextEdit:
 Windows Buka menu “Start”
HYPERL
INK
"https://id.wikihow.com/Membuat-Halaman-Web-
Sederhana-Dengan-HTML" \l
"/Berkas:Windowsstart.png" INCLUDEPICTURE
"/var/folders/m0/s4szkg1j25sf53dlybz8zhvh0000gn/
T/com.microsoft.Word/
WebArchiveCopyPasteTempFiles/
Windowsstart.png" \* MERGEFORMATINET ,
tikkan n o t e p a d (atau n o t e p a d + + ), kemudian
klik “Notepad atau "Notepad++ or sublime" di
bagian atas jendela Start.
MacOS Klik ikon “Spotlight”

HYPERLINK
"https://id.wikihow.com/Membuat-Halaman-Web-
Sederhana-Dengan-HTML" \l
"/Berkas:Macspotlight.png" INCLUDEPICTURE
"/var/folders/m0/s4szkg1j25sf53dlybz8zhvh0000gn/
T/com.microsoft.Word/
WebArchiveCopyPasteTempFiles/
Macspotlight.png" \* MERGEFORMATINET ,
tikkan t e x t e d i t , dan klik dua kali “TextEdit di
bagian atas hasil pencarian.
 ChromeOS Buka launcher kemudian
klik Text (ikonnya bertuliskan Code Pad)
2 Tikkan < ! D O C T Y P E h t m l > dan tekan

tombol ↵ Enter . Perintah ini memberi tahu peramban
bahwa dokumen yang dibuka merupakan dokumen
HTML.
3 Tikkan < h t m l > dan tekan tombol ↵ Enter . Penanda

ini merupakan penanda pembuka kode HTML.
4 Tikkan < h e a d > dan tekan tombol ↵ Enter . Penanda

ini berfungsi membuka segmen kepala dokumen.
Konten atau informasi yang ditambahkan ke segmen
kepala HTML biasanya tidak ditampilkan pada
halaman web. Informasi ini mencakup judul, metadata,
lembar gaya (style sheet) CSS, dan elemen atau
bahasa skrip lainnya. [1]
5 Tikkan < t i t l e > . Penanda ini berfungsi

menambahkan judul pada halaman.
6 Masukkan judul untuk halaman. Anda bisa

memasukkan judul apa pun yang diinginkan untuk
halaman web.
7 Tikkan < / t i t l e > dan tekan

tombol ↵ Enter . Penanda ini berfungsi menutup
penanda judul.
8 Tikkan < / h e a d > dan tekan

tombol ↵ Enter . Penanda ini merupakan penutup
segmen kepala dokumen. Pada tahap ini, dokumen
HTML Anda akan tampak seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Halaman Webku</title>
</head>
Menambahkan Segmen Tubuh dan Teks ke Dokumen HTML
9 Tikkan < b o d y > di bawah penanda "Head"

penutup. Penanda ini berfungsi membuka segmen
tubuh/inti dokumen HTML. Apa pun yang ditambahkan
pada segmen ini akan ditampilkan di halaman web.
10 Tikkan < h 1 > . Penanda ini berfungsi menambahkan

tajuk pada dokumen HTML. Tajuk merupakan teks
tebal besar yang biasanya ditampilkan di bagian atas
dokumen HTML.
11 Masukkan tajuk halaman. Anda bisa memasukkan

judul halaman atau sapaan bagi para pengunjung
halaman.
12 Tikkan < / h 1 > setelah tajuk dan tekan

tombol ↵ Enter . Penanda tersebut berfungsi menutup
penanda pembuat tajuk.
 Tambahkan tajuk tambahan. Ada enam jenis tajuk
yang bisa dibuat menggunakan
penanda < h 1 > < / h 1 > hingga < h 6 > < / h 6 > .
Penanda-penanda tersebut berfungsi membuat tajuk
dengan beragam ukuran. Sebagai contoh, untuk
membuat tiga tajuk dengan ukuran yang berbeda
secara berturut-turut, Anda bisa menggunakan kode
seperti ini:
 <h1>Selamat Datang di Halaman Webku!</h1>
 <h2>Hai! Namaku Budi.</h2>
 <h3>Semoga kamu menyukai halaman ini.</h3>
 Tajuk menunjukkan prioritas atau tingkat

kepentingan teks. Namun, perlu diingat bahwa Anda
tidak perlu menggunakan tajuk dengan tingkat atau
ukuran terbesar jika ingin menggunakan tajuk
dengan ukuran yang lebih kecil. Biasanya,
pengguna bisa langsung menggunakan penajukan
H3 meskipun dokumen tidak memuat penajukan
H1
13 Tikkan < p > . Penanda ini berfungsi membuka paragraf.

Teks yang dimuat dalam paragraf akan ditampilkan
dalam ukuran normal.
14 Masukkan teks. Anda bisa memasukkan deskripsi

halaman web atau informasi lain yang ingin dibagikan
kepada para pengunjung halaman.
15 Tikkan < / p > setelah teks dan tekan

tombol ↵ Enter . Penanda ini berfungsi menutup
paragraf. Berikut adalah contoh segmen paragraf pada
dokumen HTML:
<p>Ini paragrafku.</p>

Anda bisa menambahkan beberapa baris paragraf
secara berurutan untuk membuat rangkaian paragraf
dalam satu tajuk.

Anda bisa mengubah warna teks dengan
mengapitnya menggunakan penanda < f o n t
c o l o r = " w a r n a " > dan < / f o n t > . Pastikan Anda
mengetikkan nama warna (dalam bahasa Inggris)
yang ingin digunakan pada elemen "warna" (tetap
apit nama warna dengan tanda kutip). Dengan
penanda yang sama, Anda juga bisa mengubah
warna teks lainnya (mis. tajuk) menjadi warna lain.

Sebagai contoh, untuk mengubah warna teks pada
paragraf menjadi biru, gunakan kode
berikut: < p > < f o n t c o l o r = " b l u e " > P a u s
adalah makhluk yang sangat
besar.</font></p>

Anda bisa menebalkan, memiringkan, dan
memformat teks dengan kode HTML. Berikut
adalah beberapa contoh pemformatan teks
menggunakan penanda HTML:[2]

<b>Teks tebal</b>

<i>Teks miring</i>

<u>Teks bergaris bawah</u>

<sub>Teks subskrip</sub>

<sup>Teks superskrip</sup>

Jika Anda ingin menebalkan dan memiringkan teks
untuk menonjolkan informasi tertentu, dan bukan
sekadar menghias teks, gunakan
penanda < s t r o n g > dan < e m > sebagai pengganti
penanda < b > dan < i > . Dengan demikian, halaman
Anda lebih mudah diproses dan dipahami saat
diakses melalui teknologi atau fitur seperti pembaca
layar (screen reader) [3] atau mode pembaca pada
beberapa peramban[4] .
Menambahkan Elemen Tambahan ke Dokumen HTML
16 Tambahkan gambar ke halaman. Anda bisa

menambahkan gambar ke dokumen HTML dengan
langkah-langkah berikut:
 Tikkan < i m g s r c = untuk membuka penanda
gambar.
 Salin dan tempelkan URL gambar setelah tanda "="
(apit URL dengan tanda kutip).
 Tikkan > setelah URL untuk menutup penanda
gambar. Sebagai contoh, jika URL gambar yang
akan digunakan adalah
"http://www.mypicture.com/lake", masukkan kode
sebagai berikut:
<img src="http://www.mypicture.com/lake.jpg">
17 Tautkan teks ke halaman lain. Anda bisa

menambahkan tautan ke dokumen HTML dengan
langkah-langkah berikut:
 Tikkan < a h r e f = untuk membuka penanda
tautan.
 Salin dan tempelkan URL setelah tanda "=" (apit
URL dengan tanda kutip).
 Tikkan > setelah URL untuk menutup perintah
tautan HTML.
 Masukkan teks yang ingin ditambahi tautan setelah
tanda kurung penutup.
 Tikkan < / a > setelah teks untuk menutup penanda
tautan HTML.[5] Berikut adalah contoh kode HTML
untuk tautan ke situs Facebook.
<a
href="https://www.facebook.com">Facebook</a>
18 Tambahkan baris baru ke dokumen HTML. Anda

bisa menambahkan baris baru dengan mengetikkan
penanda <br> pada dokumen. Penanda ini berfungsi
membuat baris kosong yang dapat digunakan untuk
memisahkan beragam segmen halaman.
Mengubah Warna
19 Pelajari daftar nama dan kode warna HTML

resmi. Organisasi "World Wide Web Consortium"
(W3C) mengelola daftar warna resmi yang bisa
ditemukan
di https://www.w3.org/wiki/CSS/Properties/color/keywo
rds. Masing-masing warna memiliki nama resmi, enam
digit kode heksadesimal, dan angka desimal. Anda
bisa menggunakan salah satunya untuk
menambahkan elemen warna ke halaman web.
Sebagai contoh, di sini kami akan menggunakan nama
resmi warna.
20 Atur warna latar dengan

penanda < b o d y > . Sekarang, tambahkan
atribut style ke penanda tersebut. Katakan Anda
ingin mengubah warna latar seluruh halaman
menjadi lavender :
 <body style="background-
color:lavender;">
21 Atur warna teks penanda lain. Anda juga bisa

menggunakan atribut s t y l e untuk menentukan warna
teks yang Anda inginkan dalam penanda tertentu.
Misalnya, katakan Anda ingin membuat teks dalam
salah satu penanda < p > menjadi m i d n i g h t b l u e :
 <p style="color:midnightblue;">
 Perubahan warna ini hanya akan terjadi pada teks
dalam penanda < p > . Setelah itu, jika Anda
membuat penanda baru < p > , dan ingin warnanya
juga m i d n i g h t b l u e , Anda harus membuat
memasukkan atribut s t y l e juga di sana.
22 Atur warna latar pada kepala paragraf. Sama seperti

mengatur warna latar pada penanda di tubuh
dokumen, Anda juga bisa mengatur warna pada
penanda lain. Katakan Anda ingin membuat warna
latar < p > menjadi l i g h t g r e y , dan warna latar pada
kepala H1 menjadi l i g h t s k y b l u e , Anda bisa
menggunakan:
 <p style="background-
color:lightgrey;">
 <h1 style="background-
color:lightskyblue;">
Menutup Dokumen HTML
23 Tikkan < / b o d y > untuk menutup segmen tubuh

atau inti dokumen. Setelah selesai menambahkan
semua teks, gambar, atau elemen lain ke bagian tubuh
dokumen, tambahkan penanda ini di akhir dokumen
HTML untuk menutup bagian tersebut.
24
Tikkan < / h t m l > untuk menutup dokumen
HTML. Tambahkan penanda ini di bawah penanda
penutup bagian tubuh, di akhir dokumen HTML.
Penanda ini memberi tahu peramban bahwa tidak ada
lagi kode HTML setelah penanda tersebut. Secara
keseluruhan, dokumen HTML Anda akan tampak
seperti ini:
Menyimpan dan Membuka Halaman Web
25 Ubah format dokumen menjadi dokumen teks

polos atau plain text (untuk pengguna Mac saja). Klik
menu “Format di atas layar, kemudian pilih “Make
Plain Text pada menu drop-down.
 Langkah ini tidak perlu (atau tidak bisa) dilakukan
pada komputer Windows.
26 Klik File . Opsi ini berada pada bilah menu di atas

layar.
27 Klik Save as . Tombol ini berada pada menu drop-

down di bawah opsi "File".
 Sebagai alternatif, Anda bisa menggunakan
pintasan Ctrl + S (Windows)
atau ⌘ Command + S (Mac).
28
Masukkan nama dokumen HTML. Tikkan nama yang

Anda inginkan untuk dokumen pada kolom "File name"
(Windows) atau "Name" (Mac).
29 Ganti jenis berkas dokumen. Anda perlu mengubah

format dokumen dari berkas teks menjadi berkas
HTML. Ikuti langkah-langkah berikut untuk
mengubahnya:
 Windows Klik kotak drop-down "Save as type",
pilih “All Files, dan tikkan . h t m l di ujung nama
berkas.
 Mac Ganti ekstensi . t x t di ujung nama berkas
dengan . h t m l .
 ChromeOS Klik tombol "Save as". Beri nama
berkas sesuai keinginan kemudian akhiri
dengan . h t m l .
30 Klik Save . Tombol ini berada di bagian bawah jendela.

Setelah itu, berkas HTML akan dibuat.
 Berkas HTML biasanya dibuka menggunakan
peramban web utama komputer.
31
Tutup jendela penyunting teks. Pada tahap ini, Anda

sudah bisa membuka berkas HTML pada peramban
untuk meninjau halaman web yang dibuat.
32 Buka dokumen HTML pada peramban. Anda

biasanya dapat mengeklik dua kali dokumen untuk
membukanya. Jika galat muncul saat Anda mencoba
membukanya, ikuti langkah-langkah berikut:
 Windows Klik kanan dokumen, pilih “Open with,
dan klik peramban yang ingin digunakan.
 Mac Klik dokumen satu kali, klik menu “File,
pilih “Open With, dan pilih peramban yang ingin
digunakan.
33 Sunting dokumen jika perlu. Anda mungkin melihat

galat pada halaman. Untuk mengubah atau
menanganinya, Anda bisa menyunting teks dokumen:
 Pada komputer Windows, klik kanan dokumen dan
pilih “Edit pada menu drop-down (jika Anda
memasang Notepad++ pada komputer, opsi tersebut
berlabel “Edit with Notepad++).
 Pada komputer Mac, klik dokumen untuk
memilihnya, pilih “File, pilih “Open With, dan
klik “TextEdit. Anda juga dapat menyeret
dokumen HTML ke jendela TextEdit secara
langsung.
 Di Chromebook, tutup aplikasi "Text", buka "Files",
cari berkas kemudian klik
Jumlah
Nilai = jmlh /99 x 100
Paraf Dosen

Salin-Daftar Tilik (PTM) Website

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Salin-Daftar Tilik (PTM) Website

Diunggah oleh

Hak Cipta:

Format Tersedia

STIKes PAYUNG NEGERI PEKANBARU

PRODI ILMU KESEHATAN MASYARAKAT

DAFTAR TILIK PRAKTIK PEMBUATAN WEBSITE SEDERHANA

1 Buka program penyunting teks. Jika Anda menggunakan

2 Tikkan < ! D O C T Y P E h t m l > dan tekan

3 Tikkan < h t m l > dan tekan tombol ↵ Enter . Penanda

4 Tikkan < h e a d > dan tekan tombol ↵ Enter . Penanda

5 Tikkan < t i t l e > . Penanda ini berfungsi

6 Masukkan judul untuk halaman. Anda bisa

7 Tikkan < / t i t l e > dan tekan

8 Tikkan < / h e a d > dan tekan

Menambahkan Segmen Tubuh dan Teks ke Dokumen HTML

9 Tikkan < b o d y > di bawah penanda "Head"

10 Tikkan < h 1 > . Penanda ini berfungsi menambahkan

11 Masukkan tajuk halaman. Anda bisa memasukkan

12 Tikkan < / h 1 > setelah tajuk dan tekan

 Tajuk menunjukkan prioritas atau tingkat

13 Tikkan < p > . Penanda ini berfungsi membuka paragraf.

14 Masukkan teks. Anda bisa memasukkan deskripsi

15 Tikkan < / p > setelah teks dan tekan

warna teks lainnya (mis. tajuk) menjadi warna lain.

Menambahkan Elemen Tambahan ke Dokumen HTML

16 Tambahkan gambar ke halaman. Anda bisa

17 Tautkan teks ke halaman lain. Anda bisa

18 Tambahkan baris baru ke dokumen HTML. Anda

19 Pelajari daftar nama dan kode warna HTML

20 Atur warna latar dengan

21 Atur warna teks penanda lain. Anda juga bisa

22 Atur warna latar pada kepala paragraf. Sama seperti

Menutup Dokumen HTML

23 Tikkan < / b o d y > untuk menutup segmen tubuh

Menyimpan dan Membuka Halaman Web

25 Ubah format dokumen menjadi dokumen teks

26 Klik File . Opsi ini berada pada bilah menu di atas

27 Klik Save as . Tombol ini berada pada menu drop-

Masukkan nama dokumen HTML. Tikkan nama yang

29 Ganti jenis berkas dokumen. Anda perlu mengubah

30 Klik Save . Tombol ini berada di bagian bawah jendela.

Tutup jendela penyunting teks. Pada tahap ini, Anda

32 Buka dokumen HTML pada peramban. Anda

33 Sunting dokumen jika perlu. Anda mungkin melihat

Anda mungkin juga menyukai