Laporan Praktikum Front End Web Developer - Tag-Tag Dasar HTML

LAPORAN PRAKTIKUM 1
TAG-TAG DASAR HTML
Oleh :
Nama : Muhammad Rizky Safdila

Nim : 2020573010044
Kelas : TI-1B
Dosen Pembimbing : Amirullah, SST.,M.Kom
PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI DAN KOMPUTER
POLITEKNIK NEGERI LHOKSEUMAWE
2021
LEMBAR PENGESAHAN
Nama Mata Kuliah : Praktikum Front End Web Developer
No. Praktikum : 01/PFEWD/TI.1B/2021
Judul Praktikum : Tag-Tag Dasar HTML
Tempat Praktikum : Lab. Rekayasa Sistem dan Software
Hari / Tanggal Praktikum : Selasa / 2 Maret 2021
Nama Mahasiswa : Muhammad Rizky Safdila
NIM : 2020573010044
Program Studi / Kelas : Teknik Informatika / TI-1B
Nilai :
Mengetahui,
Dosen Pembimbing
Amirullah, SST.,M.Kom
NIP.198908282018031001
DAFTAR ISI
LEMBAR PENGESAHAN...................................................................................................2
DAFTAR ISI..........................................................................................................................3
1.1 Capaian Praktikum......................................................................................................4
1.2 Dasar Teori..................................................................................................................4
1.3 Percobaan dan Hasil....................................................................................................5
1.4 Kesimpulan...............................................................................................................27
DAFTAR PUSTAKA..........................................................................................................28
Tag-Tag Dasar HTML
1.1 Capaian Praktikum

Setelah melakukan praktikum tag-tag dasar HTML ini, mahasiswa diharapkan mampu :
1. Memahami aturan dan struktur penulisan HTML
2. Memahami tag-tag dasar pada HTML
1.2 Dasar Teori

HTML (Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag
yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada
web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web
dengan lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML
seperti b, i, u dan sebagainya.
Sebuah halaman website akan diapit oleh tag <html>……</html>. Setiap file HTML
selalu berakhiran ekstensi *.htm atau *.html. Jadi jika menemukan file dengan ekstensi
*.html berarti file tersebut adalah berformat HTML(Haviluddin et al., 2016).
PIKSI-ITS (2002) memaparkan ketika pertama kali WWW dipopulerkan, HTML

merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman
web. Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan
teks, gambar, frame juga multimedia. Dokumen HTML merupakan sebuah file teks.
Karena hanya berisi teks, maka dokumen HTML menjadi sangat sederhana, sehingga
mudah untuk ditransfer ke sebuah jarungan internet. Namun karena sederhana, HTML
memiliki kelemahan, salah satunya adalah Anda harus mengetikkan sendiri semua kode
HTML jika ingin membuat sebuah halaman web. Memang sekarang telah banyak beredar
HTML editor yang dapat membantu Anda dalam membuat sebuah halaman web tanpa
menyentuh kode HTML sama sekali., namun dalam pengembangan halaman web dengan
menggunakan bahasa script seperti VBScript dan Java Script, pengetahuan mengenai
HTML harus mutlak diperlukan, karena Anda harus tahu dengan pasti di mana harus
menyisipkan script yang diinginkan dalam HTML. Untuk menuliskan HTML VBScript
dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau
EditPad(Sudiatmika, 2012).
Struktur HTML
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena
merupakan file teks, maka HTML bisa dibuat menggunakan teks editor sederhana,
misalnya Notepad. Dapat juga menggunakan HTML editor bersifat visual, misalnya
Dreamweaver. Berikut struktur dasar HTML:
<HTML>
<HEAD>
………………………………
</HEAD>
<BODY>
…………………………………
</BODY>
</HTML>
1.3 Percobaan dan Hasil

1. Sintaks dasar dari bahasa HTML
Script :
Hasil :
Analisa :
Penulisan script html dimulai dengan menuliskan <!DOCTYPE html>, lalu diikuti tag
<html>, <head>, didalam tag <head> teradapat tag <title>, baru kemudian disusul
dengan tag <body>, dimana segala sesuatu yang ingin ditampilkan pada halaman
website ditulis di dalam tag <body> tersebut. Setiap penulisan tag html sebaiknya
langsung ditutup, untuk menghindari kesilapan dalam penulisan tag.
2. Paragraf HTML
Script :
Hasil :
Analisa :
Tag berfungsi untuk menampilkan tulisan dalam format paragraf, jika melihat
script pada baris 9 dan 10 terdapat spasi pada awal kalimat dan pada hasilnya tidak ada
spasi di awal kalimat tersebut. Spasi pada awal kalimat tersebut tidak akan beperngaruh
jika kita menggunakan tag .
3. Line Break
Script :
Hasil :
Analisa :
Tag digunakan untuk membuat baris baru dalam penulisan kalimat di dalam
paragraf, tag tidak perlu ditutup.
4. Heading
Script :
Hasil :
Analisa :
Tag <h1> sampai <h6> digunakan untuk membuat judul atau sub judul pada halaman
website dengan variasi ukuran yang berbeda-beda.
5. Horizontal Rule
Script :
Hasil :
Analisa :
Tag <hr> digunakan untuk membuat garis horizontal pada halaman website, dapat
digunakan sebagai pembatas suatu teks/gambar dengan teks/gambar lainnya.
6. Komentar
Script :
Hasil :
Analisa :
Komentar digunakan untuk membuat catatan-catatan kecil di dalam script HTML
misalnya menandai baris kode untuk bagian navbar, form login, dsb. Tag komentar
dibuka dengan “<!—" dan ditutup dengan “-->”, semua yang ditulis dalam tag
komentar tidak akan dieksekusi.
7. Mewarnai Latar Belakang Halaman Web

Script :
Hasil :
Analisa :
Kita dapat menambahkan atribut bgcolor=”nama_warna/kode_warna” untuk
mengganti latar belakang dari suatu halaman website.
8. Latar Belakang Halaman Web Berisi Gambar

Script :
Hasil :
Analisa :
Untuk membuat latar halaman website berisi gambar, terlebih dahulu kita harus
membuat sebuah folder gambar, misalkan nama folder tersebut images, baru
selanjutnya kita dapat menyimpan gambar yang ingin dijadikan sebagai latar belakang
halaman website. Agar gambar tersebut dapat kita gunakan sebagai latar belakang kita
dapat menambahkan atribut background=”folder/nama_file_gambar.format file”,
misalnya <body background=”images/background.jpg>. Pastikan nama file harus
sama dengan yang dituliskan pada script, jika tidak maka gambar tidak akan muncul.
9. Pemformatan Teks
Script :
Hasil :
Analisa :
Tag digunakan untuk mempertebal tulisan, tag digunakan untuk
menajamkan tulisan, tag digunakan untuk penekanan pada sebuah kata atau
kalimat, tag digunakan untuk membuat tulisan menjadi miring. Tulisan tebal atau
miring yang dihasilkan memang terlihat sama. Tapi web browser dan search engine
akan menganggapnya berbeda. Jika kita menggunakan tag dan hanya akan
dianggap web browser dan search engine sebagai tulisa tebal dan miring biasa, namun
jika kita menggunakan tag dan akan dianggap sebagai teks yang benar-
benar penting bagi pengunjung, sehingga akan berbeda pengaruhnya pada search
engine. Lalu ada tag <big> yang digunakan untuk memperbesar tulisan, selanjutnya
ada tag yang digunakan untuk mengecilkan tulisan, tag digunakan
untuk membuat tulisan dibawah seperti angka 2 pada contoh berikut (0011)2, dan tag
 digunakan untuk membuat pangkat, contoh 43.
10. Format Teks yang ditampilkan apa adanya (Preformatted Text)

Script :
Hasil :
Analisa :
Tag <pre> digunakan untuk menampilkan teks apa adanya sama seperti yang kita
tuliskan pada code editor. Tag <pre> cocok digunakan untuk menampilkan kode
bahasa pemrograman.
11. Tanda Kutip (Quotation)

Script :
Hasil :
Analisa :
Jika kita menggunakan tag <blockqoute> maka tulisan yang didalam tag tersebut akan
ditampilkan sedikit masuk ke dalam seperti pada gambar hasil, sedangkan tag <q>
digunakan untuk tanda kutip pendek dan akan menampilkan tanda petik dua di awal
dan akhir kalimatnya.
12. Unordered List (UL)

Script :
Hasil :
Analisa :
Tag <ul> digunakan untuk membuat list yang tak berurutan, biasa penulisannya
diawali dengan tanda lingkaran hitam, kotak-kotak, dll.
13. Ordered List (OL)

Script :
Hasil :
Analisa :
Tag <ol> digunakan untuk membuat list yang berurutan, biasa penulisannya diawali
dengan angka, angka romawi, atau huruf.
14. Ragam Tag Ordered List

Script :
Hasil :
Analisa :
Terdapat 5 macam tag ordered list, yaitu berupa angka, huruf besar, huruf kecil, angka
romawi besar dan angka romawi kecil. Untuk menggunakannya kita dapat
menggunakan atribut type. Contohnya type=”A”, maka ordered list nya menggunakan
huruf besar/kapital sebagai penanda urutannya.
15. Ragam Tag Unordered List

Script :
Hasil :
Analisa :
Terdapat 4 macam tag unordered list, yaitu berupa lingkaran hitam, lingkaran putih,
dan bentuk kotak. Untuk menggunakannya kita juga menggunakan atribut type.
Contohnya type=”disc”, maka unordered list tersebut menggunakan lingkaran hitam
sebagai penanda urutannya.
16. List Bertingkat (Nested List)

Script :
Hasil :
Analisa :
Nested list biasa digunakan untuk membuat sub list atau list di dalam list. Contoh
membuat nested list kita dapat membuka tag <ul> didalam tag <ol>. Sehingga output
yang dihasilkan adalah lingkaran hitam sebagai list utamanya dan angka sebagai
penanda sub list nya.
17. Definition List

Script :
Hasil :
Analisa :
Definition list biasa digunakan untuk menjelaskan istilah dari suatu kata. Kita dapat
menggunakan tag <dt> untuk istilahnya dan tag <dd> untuk menjelaskan arti dari
istilah tersebut.
18. Hyperlink Lewat Teks
Script :
Hasil :
Analisa :
Untuk membuat hyperlink kita menggunakan tag <a> dengan menambahkan atribut
pada tag tersebut. <a href=”nama_file.hmtl”. Kita juga dapat memasukkan link
eksternal jika ingin mengalihkan ke halaman website lain.
19. Hyperlink Lewat Gambar

Script :
Hasil :
Analisa :
Untuk menggunakan hyperlink lewat gambar kita dapat membuka tag <img> didalam
tag <a>. Contohnya seperti pada script percobaan nomor 19. Nantinya ketika gambar
di klik maka akan beralih ke halaman website yang lain.
20. Hyperlink dengan Membuka Window Baru

Script :
Hasil :
Analisa :
Jika kita menambahkan atribut target=”_blank” pada sebuah hyperlink maka link
yang dituju otomatis akan terbuka pada window baru.
21. Hyperlink dengan melompat ke bagian lain dalam satu halaman web
Script :
Hasil :
Analisa :
Untuk membuat hyperlink untuk mengalihkan ke bagian lain tetapi masih di halaman
yang sama, kita harus menambahkan atribut name terlebih dahulu pada bagian yang
ingin dialihkan. Lalu pada tombol hyperlink tersebut kita masukkan value yang sudah
kita berikan pada bagian yang akan dialihkan.
1.4 Kesimpulan
HTML adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file
yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi
memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada
pengguna.
Dalam penulisan tag html sebaiknya langsung ditutup setelah tag tersebut dibuka, untuk
menghindari kesilapan dalam penulisan tag html.
Dokumen HTML harus memiliki struktur dasar yang terdiri dari 4 bagian utama yaitu: tag
<!DOCTYPE>, tag <html>, tag <head>, dan tag <body>.
DAFTAR PUSTAKA
Haviluddin, Haryono, A. T., & Rahmawati, D. (2016). Aplikasi Program PHP & MySQL
(Kiswanto & T. Fitriastuti (eds.); Des 2016). Mulawarman University Press.
https://doi.org/10.1088/1751-8113/44/8/085201
Sudiatmika, I. W. (2012). Aplikasi Interactive Distance Learning Berbasis Web Untuk
Pembelajaran HTML (Hypertext Markup Language). Kumpulan Artikel Mahasiswa
Pendidikan Teknik Informatika (KARMAPATI), 3(1), 350–361.
https://ejournal.undiksha.ac.id/index.php/KP/article/view/19538

Laporan Praktikum Front End Web Developer - Tag-Tag Dasar HTML

Diunggah oleh

Informasi Dokumen

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

Laporan Praktikum Front End Web Developer - Tag-Tag Dasar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM 1

TAG-TAG DASAR HTML

Nama : Muhammad Rizky Safdila

PROGRAM STUDI TEKNIK INFORMATIKA

Nama Mata Kuliah : Praktikum Front End Web Developer

No. Praktikum : 01/PFEWD/TI.1B/2021

Judul Praktikum : Tag-Tag Dasar HTML

Tempat Praktikum : Lab. Rekayasa Sistem dan Software

Hari / Tanggal Praktikum : Selasa / 2 Maret 2021

Nama Mahasiswa : Muhammad Rizky Safdila

Program Studi / Kelas : Teknik Informatika / TI-1B

1.1 Capaian Praktikum

1.2 Dasar Teori

PIKSI-ITS (2002) memaparkan ketika pertama kali WWW dipopulerkan, HTML

1.3 Percobaan dan Hasil

7. Mewarnai Latar Belakang Halaman Web

8. Latar Belakang Halaman Web Berisi Gambar

10. Format Teks yang ditampilkan apa adanya (Preformatted Text)

11. Tanda Kutip (Quotation)

12. Unordered List (UL)

13. Ordered List (OL)

14. Ragam Tag Ordered List

15. Ragam Tag Unordered List

16. List Bertingkat (Nested List)

17. Definition List

19. Hyperlink Lewat Gambar

20. Hyperlink dengan Membuka Window Baru

Anda mungkin juga menyukai