Pertemuan ke-6
LAPORAN PRAKTIKUM
GRAFIKA KOMPUTER
“Pengenalan HTML”
Disusun oleh:
Khynant Fadil Muhamad
18/428716/TK/47218
GRAFIKA KOMPUTER KELAS B
PROGRAM STUDI SARJANA TEKNIK GEODESI
DEPARTEMEN TEKNIK GEODESI
FAKULTAS TEKNIK
UNIVERSITAS GADJAH MADA
2019
Grafika Komputer
1. Mata Acara Praktikum
Pengenalan HTML
2. Tujuan Praktikum
Mahasiswa mampu mengetahui dasar – dasar pemrograman HTML
3. Pelaksanaan
Tempat : Laboratorium Komputasi
Tanggal : 17 September 2019
Waktu : 13.00 – 15.30 WIB
4. Alat dan bahan
A. Laptop/Komputer
B. Notepad++
C. Internet
5. Landasan Teori
HTML adalah bahasa dipakai untuk menampilkan informasi pada halaman Web
karena HTML menampilkan informasi dalam bentuk hypertext dan juga mendukung
sekumpulan perintah yang dapat digunakan untuk mengatur tampilnya informasi tersebut.
Sesuai dengan namanya, bahasa ini menggunakan tanda (markup) untuk menandai perintah-
perintahnya.
HTML
Dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini
sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan
TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti:
TAMPIL TEBAL, maka penulisannya dilakukan dengan cara:
<b>
TAMPIL TEBAL
</b>.
Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan
yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal
tersebut.
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
1|Halaman
Grafika Komputer
• HTML: menandai awal dan akhir dokumen HTML
• HEAD: menandai bagian header dokumen HTML
• TITLE: memberi judul pada dokumen HTML
• BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
Saat sudah save file as HTML maka tampilan yang akan keluar sebagai berikut:
Berikut adalah sebagian kecil contoh TAG HTML:
• Judul HTML
<hn>Judul paragraf</hn>
n = 1,2,3,4,5,6 (tingkat judul). Untuk menuliskan judul suatu paragraf
<body background="[Link]">
<body bgcolor=“red">
• TAG Paragraph
<p>paragraf</p>
Untuk menandai suatu paragraf.
Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan
sesudahnya.
• TAG Atribut (Bold, Italic, Underline)
<b>Kalimat yang dicetak tebal</b>
<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digarisbawahi</u>
Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau
digarisbawahi.
• TAG Ganti Baris (Break Line)
<br>
Untuk pindah ke baris berikutnya.
• TAG Font
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna
tertentu.
Tag : font Parameter : size, face, color
<font size="n"> kalimat </font>
2|Halaman
Grafika Komputer
<font face="nama font"> kalimat </font>
<font color="#RRGGBB"> kalimat </font>
• TAG Gambar dan Link
<img src="NamaFileGambar">
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau
.PNG.
Untuk menampilkan sebuah file gambar.
Bentuk penulisan lain yang dianjurkan (XML style) :
<img src="NamaFileGambar"/ > Link
<a href="url">link element</a>
• Tabel Data
<table> definisi tabel </table>
Menampilkan data dalam bentuk tabel
Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.
Tag untuk penanda baris adalah <tr> definisi baris </tr>
Tag untuk penanda kolom adalah <td>data</td>
6. Langkah Kerja
Buka aplikasi notepad++ untuk menuliskan script HTML.
7. Hasil dan Pembahasan
1. Buat Script di Notepad++
2. Buat heading untuk link tersebut
3|Halaman
Grafika Komputer
3. Sisipkan tulisan agar lebih menarik perhatian pembaca serta ganti warna body
agar lebih eye-catching
4. Tambahkan gambar ataupun gif juga
5. Buat Tabel yang berisi rekomendasi film yang dipilih dengan tambahan umum
nya seperti ; tanggal rilis. Durasi waktu, dan Diproduksi oleh.
6. Jangan lupa untuk menyisipkan link dari setiap masing-masing film yang
direkomendasi agar para pembaca lebih mengetahui tentang film yang akan di
tonton.
7. Simpan script dalam bentuk “.HTML” agar bisa terbuka di web Browser
4|Halaman
Grafika Komputer
8. Buka Link yang telah disimpan
8. Kesimpulan
HyperText Markup Language (HTML) adalah bahasa inti dari hampir semua konten
Web. Sebagian besar dari apa yang dilihat pada layar browser adalah sebuah deskripsi, secara
mendasar, menggunakan HTML. Lebih tepatnya, HTML adalah bahasa yang
menggambarkan struktur dan isi semantik dari sebuah dokumen Web.
Pada praktikum kali ini, pengenalan dasar – dasar html untuk pembuatan web terlihat
cukup mudah. Namun, untuk menghasilkan kreasi web yang baik dan artistic perlu belajar
lebih dalam mengenai html lebih lanjut, walaupun sebenarnya ada template CSS yang akan
memperindah tampilan html. Pembuatan web dengan menggunakan HTML juga perlu
bantuan software yang mampu mengatasi kesalahan yang kita perlukan. Untuk yang
sederhana bisa menggunakan notepad++ dan untuk yang lebih baik bisa menggunakan adobe
dreamweaver.
9. Daftar Pustaka
[Link] (diakses 21 September 2019 jam 22.14
WIB)
[Link] (diakses 21 September 2019 jam 22.31 WIB )
5|Halaman