Laporan 6 A1g021001 Riza Miranda 1b

LAPORAN HTML
KOMPUTER DAN PEMROGRAMAN (CODING)
Disusun Oleh :
Riza Miranda (A1G021001)
Asisten Dosen :
1. Ratna Syafitri (G1F019021)

2. Pradifta Irsyad Hidayat (G1F019022)
Dosen Pengampu :
1. Dedi Hamdani,S.Si.,M.Si.
PROGRAM STUDI PENDIDIKAN GURU SEKOLAH DASAR
FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS BENGKULU
T.A 2020/2021
BAB 1
LANDASAN TEORI
1.1 Pengertian HTML
HTML (Hypertext Markup Language) merupakan gabungan dari dua

istilah: hypertext dan markup language. Hypertext yaitu dokumen berisi tautan yang
memungkinkan pengguna terhubung ke halaman lain. Sedangkan markup language
merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan
menyajikan informasi. Jadi, HTML adalah bahasa markup untuk membuat struktur halaman
website. Sebuah file HTML di di simpan dengan ekstensi .html (dot html) dan dapat di
eksekusi atau diakses menggunakan web browser (Google Chrome, Mozilla Firefox, Opera,
Safari dan lain-lain).
1.2 Kegunaan HTML
HTML berfungsi sebagai pondasi sebuah halaman website. Adapun yang dapat di
lakukan dengan HTML adalah untuk membungkus element-element tertentu sesuai
kebutuhan, membuat heading atau format judul, membuat tabel, membuat list, membuat
paragraf, membuat form, membuat tombol, membuat garis, membuat huruf tebal, membuat
huruf miring, menampilkan gambar, menampilkan video, dan lain sebagainya
1.3 Kelebihan dan Kekurangan HTML
 Kelebihan-kelebihan yang dimiliki HTML:
1. Html merupakan bahasa yang bersifat cross-platform (bisa digunakan dibanyak

platform) seperti: Linux, macOS, Windows, da lainnya. Karena HTML sendiri
memiliki karakter ASCII, sehingga cukup ditulis dalam text editor
2. Html juga bersifat open-source (gratis)
3. Merupakan bahasa markup yang rapih dan juga konsisten
4. Tidak memerlukan kopiler sehingga dijalankan secar alami disetiap web browser
5. Html sudah terintegrasi dengan bahasa lain seperti: Node.js, Php, Backend, Active
Server Pages, VBScript, Tcl, Perl dan lainnya. Dengan begitu akan memperbagus
dan juga memepercantik halaman web, standar web resmi oleh world wide web
consortium (W3C)
6. Bisa menyisipkan gambar, animasi berupa java applet, hyperlink, dan banyak lagi.
 Kekurangan-kekurangan yang dimiliki HTML
1. Halaman yang dihasilkan statis, untuk itu jika kita ingin membuat halaman web
yang dinami kita memerlukan
2. Pemrograman lain seperti: Javascript, VBScript dan lainnya,
3. Kurang cepat untuk fitur-fitur baru di beberapa browser,
4. Memiliki banyak tag yang harus dipelajari.
1
5. Halaman tidak interkaktif, untuk itu kita perlu pemrograman lain seperti: Perl atau
Tcl.
6. Perilaku web browser dalam membaca document html susah diprediksi, contohnya
browser lama yang tidak bisa merender tag-tag html yang baru
1.4 Peralatan untuk Membuat HTML
Adapun peralatan yang harus kamu persiapkan adalah:
 Teks Editor untuk Menulis HTML

Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode
program, disini khususnya untuk penulisan kode program HTML. Terdapat beberapa
text editor yang dapat digunakan seperti, sublime text, notepad ++, atom, brackest, dan
netbeans.
 Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kita dapat menggunakan
web browser apapun seperti, google, firefox, opera, mozila dan lain sebagainya.
1.7 Kerangka Inti HTML
 <!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda

akan menuliskan perintah dalam kode HTML;
 <html></html> merupakan tag yang menandakan bahwa Anda memulai dan
mengakhiri dokumen dalam kode HTML;
 <head><head> diisi dengan metadata dari dokumen HTML. Seperti judul tab,
deskripsi, dan lain-lain;
 <body></body> diisi dengan konten halaman website.
Contoh struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title dari Websiteku</title>
</head>
<body>
<p>Selamat Pagi Dunia, Hello World!</p>
</body>
</html>
1.6 Mengenal Tag, Elemen, dan Atribut
 Tag, digunakan sebagai awalan instruksi atau perintah yang akan dibaca web browser.
Misalnya: tag <bold>. Tag ini akan meminta browser menampilkan teks dalam format
tebal;
2
 Element, merupakan keseluruhan kode yang terdiri dari tag pembuka (<>) hingga tag
penutup (</ >). Contohnya: <‘h1> Contoh Elemen </h1’>. Meski demikian, tidak
semua tag HTML memiliki pasangan penutup;
 Attribute, yaitu informasi atau perintah tambahan yang berada di dalam elemen.
Misalnya: <img src=”pantai.jpg” alt=”Pantai Baron.”> Elemen ini menggunakan
tag <img> dengan atribut sumber gambar (src) dan alt text (alt).
1.7 Membuat Paragraf di HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya
digunakan untuk menampilkan teks atau artikel. Kita bisa mengatur posisi paragraf dengan
attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri,
CENTER untuk rata tengah dan RIGHT untuk rata kanan. Paragraf pada HTML dibuat
dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>,
dan <pre>.
 Fungsi utama tag <br> adalah untuk membuat baris baru.

 Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara
horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa
konten atau paragraf.
 Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks
atau paragraf dalam format yang sudah kita tentukan di HTML.
 Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel.
Contoh seperti teks pada footer, header, sidebar, dll.
1.8 Membuat Heading
Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa
bagian dari artikel. Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>.
Tag <h1> biasanya dipakai pada judul artikel. Lalu tag <h2>, <h3>, <h4>, <h5>,
dan <h6> dipakai pada sub judul atau sub heading. Berikut beberapa atribut heading :
 id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan
Javascript;
 class untuk memberikan nama class yang akan dipakai oleh CSS;
 style untuk memberikan kode css secara langsung;
 title untuk menambahkan informasi tambahan;
1.9 Format Text HTML

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT
SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Jenis font menggunakan Atribut FACE yang berguna untuk mengatur jenis huruf yang
diinginkan. Atribut face harus diisi dengan string jenis font seperti Arial, Times New
Roman,Verdana, dan sebagainya.
Atribut color digunakan untuk mengatur warna font yang akan digunakan. Untuk
memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna
3
seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan
nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk
green, dan 0000FF untuk Blue.
 tag <b> (bold) dan tag <strong> untuk membuat teks tebal
 tag <i> (italic) dan juga tag <em> (emphasis) untuk membuat tulisan miring
 tag <u> (underlaine) atau juga tag <ins> (insert) untuk membuat garis bawah
 tag <s> (strikethrough) atau bisa juga dengan tag <del> (delete) untuk membuat teks
tercoret.
 tag <sup> dan <sub>. Untuk membuat pangkat di atas dan di bawah
1.10 Membuat Link
Link atau Hyperlink adalah elemen HTML yang berfungsi menghubungkan suatu
halaman web ke halaman web yang lain. Elemen ini bisa diklik dan nanti akan membuka
halaman lain sesui alamat URL yang diberikan. Link pada HTML dapa dibuat dengan
tag <a>, kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan
dari link.
 Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada HTML dibagi menjadi dua
kelompok:
1. Internal Link: adalah link yang menuju ke domain atau halaman web itu
sendiri;
2. External Link: adalah link yang menuju domain lain.
 Atribut-atribut untuk Link

Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link,
seperti: target, title, style, dan lain-lain.
1). Menggunakan Atribut target

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa
target yang biasanya digunakan:
 _blank akan membuka link pada jendela atau tab baru;

 _self akan membuka link pada halaman itu sendiri (default target);
 _top menuju bagian paling atas pada halaman;
 parent membuka link pada frame induk;
 nama-frame akan membuka link pada <iframe> dengan nama tertentu;
2). Menggunakan Atribut title

Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan
yang akan tampil saat link disentuh pointer atau saat kita menahan tap di hp.
4
 Cara Mengubah Warna Link di HTML
Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita
berikan untuk teks dan latar belakang (background). Caranya yaitu tambahkan
atribut style kemudian isi dengan style css untuk mengubah warna,
yakni color (untuk teks) dan background-color (untuk latar).
Perbedaan Link, Alink dan Vlink:
 Link adalah warna hyperlink sebelum diklik/warna standar.

 Alink adalah warna untuk hyperlink yang aktif, yang sedang kita buka namun
belum selesai prosesnya atau warna hyperlink ketika kursor berada di atasnya.
 Vlink adalah warna link ketika link tersebut telah pernah diklik/dikunjungi.
1.11 Menambahkan Gambar di HTML
Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini
memiliki atribut wajib, yakni src.
 Atribut untuk Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:
 alt untuk teks alternatif untuk gambar;

 width untuk menentukan lebar gambar;
 height untuk menentukan tinggi gambar;
 style untuk menentukan style CSS untuk gambar.
1.12 Menampilkan Gambar
Salah satu elemen html yang digunakan untuk mendefinisikan sebuah gambar. src
salah satu atribut html yang digunakan untuk memberikan alamat atau url gambar. width salah
satu atribut html yang digunakan untuk memberikan nilai lebar pada gambar. height salah satu
atribut html yang digunakan untuk memberikan nilai tinggi pada gambar. alt salah satu atribut
html yang digunakan untuk memberikan teks alternatif jika gambar gagal dimuat.
1.13 Margin
Margin fungsinya mengatur jarak antara satu elemen dengan elemen lainnya pada
HTML. Berikut ini properti CSS untuk menentukan margin pada setiap sisi elemen:
 margin-top
 margin-right
 margin-bottom
 margin-left
5
BAB II
SOAL DAN PEMBAHASAN

2.1 Soal
Reviewlah materi tentang HTML seperti yang telah di jelaskan oleh asisten dosen
pada pertemuan sebelumnya!
2.2 Pembahasan
1). Membuat Folder HTML
Gambar 1.1 Folder Membuat HTML
Penjelasan:
Untuk membuat html kita harus membuat folder nya terlebih dahulu. Seperti yang
terlihat pada gambar 1.1 saya menuliskan folder “Membuat html”.
2). Membuat Title
Gambar 2.1 Input Membuat Title
6
Penjelasan:
Untuk membuat kode program kita harus mencantumkan struktur dasar kode HTML
yang terdiri dari tiga bagian penting, yaitu : bagian deklarasi, bagian head dan bagian body.
Tag <title> bertujuan untuk menampilkan judul halaman web HTML. Untuk membuat title
HTML harus membuat kode<title>nama judul</title>. Seperti yang terlihat pada gambar
diatas saya membuat kode program <title>Tutorial HTML </title>. Untuk membuat body
penulisannya dimulai dari tag<body> dan ditutup dengan tag </body>. Setelah kode
program selesai dibuat, file disimpan, saya memberikan nama “Tutorial HTML.html”. Jika
tidak menggunakan ekstensi .html, maka kode program tersebut tidak akan bisa dibaca oleh
website html.
Gambar 2.2 Bentuk File HTML dari Notepad yang Telah Disimpan
Penjelasan:
Setelah kode program tersimpan dalam folder yang saya beri nama “Membuat
HTML”, maka klik kanan dan pilih open with (jenis browser yang sering dipakai)
dikarenakan saya sering menggunakan chrome, maka saya membuka file tersebut dengan
menggunakan chrome.
Gambar 2.3 Output Membuat Title
Penjelasan:
Setelah masuk website html tersebut maka akan muncul tampilan seperti pada
gambar 2.3. Pada gambar 2.3 menunjukkan adanya title yang berjudul “Tutorial HTML”
dan body HTML (isi HTML) yang bertuliskan “Selamat Menikmati Proses Belajar
HTML!”.
7
3). Membuat Background Menggunakan Gambar
Gambar 3.1 Input Background Gambar
Penjelasan:
Untuk membuat background image, kita harus menyimpan gambar backgroundnya

terlebih dahulu ke dalam folder yang sebelumnya yaitu “Membuat html”. Dalam folder
tersebut ada hasil kode program html yang telah dibuat, gambar background harus ada dalam
satu folder hasil kode program html, tujuannya agar gambar background tersebut dapat
tereksekusi dalam website html. Pada gambar diatas untuk membuat background kita harus
menuliskan nama file gambar background yang telah kita simpan tadi yaitu dengan
menuliskan “background.html “. Untuk memasukkan gambar background kita harus
menuliskan kodenya di di dalam tag body, yaitu <body background="background.jpg">..
Gambar 3.2 Output Background Gambar
Penjelasan:
Tahapan selanjutnya adalah buka website html yang tadi dan merefreshnya agar
gambar background dapat tereksekusikan atau dapat ditampilkan. Tampilan gambar
background dapat dilihat pada gambar 3.2.
8
4). Membuat Background Menggunakan Warna
Gambar 4.1 Input Warna Background
Penjelasan:
Untuk membuat warna background, kita harus B\buka notepad kembali, kemudian
ketikkan pada tag body bgcolor= ”kode warna pada html” untuk kode warna dapat dilihat
melalui google, atau browser lainnya. Karena saya ingin mengganti warna background dengan
warna Thistle maka saya mnggunakan kode #D8BFD8. Jadi bentuk penulisan pada body yaitu
<body bgcolor="#D8BFD8">. lalu save kembali.
Gambar 4.2 Output Warna Background
Penjelasan:
Kemudian buka lagi website html yang dibuat tadi lalu refresh, maka akan muncul
tampilan dengan background yang berbeda yaitu sesuai kode warna yang dipilih, seperti yang
terlihat pada gambar 4.2. Lalu jika ingin menghapus background cukup hapus kode pada body
yang berupa (bgcolor="#D8BFD8")kemudian klik save kembali maka warna background
akan kembali seperti warna default.
9
5). Memberikan Warna Teks
Gambar 5.1 Input Warna Teks
Penjelasan:
Buka notepad kembali, kemudian ketikan body text="kode warna pada html” Karena
saya ingin mengganti warna background dengan warna magenta maka saya menggunakan
kode #FF00FF. Jadi bentuk penulisan pada tag body yaitu <body text=" #FF00FF "> lalu
save.
Gambar 5.2 Output Warna Teks
Penjelasan:
Setelah menyimpan kode program HTML, buka lagi website html yang dibuat
sebelumnya . Selanjutnya refresh, maka akan muncul tampilan dengan warna teks yang
berbeda yaitu sesuai kode warna yang dipilih (warna magenta), seperti yang terlihat pada
gambar 5.2.
10
6). Membuat Link
Gambar 6.1 Input Membuat Link
Penjelasan:
Buka notepad kembali, pada tag body tuliskan kode warna link yang diinginkan,
karena saya ingin menggunakan warna biru tua maka kode warna nya adalah #00008B,
bentuk penulisannya yaitu <body link="#00008B"> kemudian letakkan kode <a href=
“#”>Silahkan klik disini!</>. Href digunakan untuk membuat link, kemudian pagar adalah
tujuannya, ke link apa yang akan kita tuju. Lalu jangan lupa save.
Gambar 6.2 Output Membuat Link
Penjelasan:
Setelah menyimpan kode program HTML ,buka lagi website html yang dibuat
sebelumnya. Selanjutnya refresh, maka akan muncul tampilan dengan link dengan warna yang
dipilih, warna biru tua. Link tersebut dapat dibuka, tetapi tidak ada tujuannya atau tujuannya
mengarah ke pagar. Pagar tersebut dapat diubah sesuai tujuan yang di inginkan.
11
Gambar 6.3 Input Link Menuju Gambar
Penjelasan:
Hal yang pertama yang harus dilakukan adalah menyimpan gambar logo unib ke
dalam folder “Membuat html”. Selanjunya untuk mengubah arah link tersebut menuju gambar
yang ada dalam file, maka kode nya adalah <a href="logo unib.jpg "> Silahkan klik disini
untuk melihat logo UNIB! </> lalu jangn lupa klik save.
Gambar 6.4 Output Link Menuju Gambar

Penjelasan:
Selanjunya buka lagi website html yang dibuat tadi lalu refresh, maka ketika link
diklik akan menuju pada gambar logo unib.
Gambar 6.5 Tampilan Hasil Link Menuju Gambar

Penjelasan:
Gambar 6.5 merupakan hasil dari tampilan gambar logo unib setelah mengklik link
“Silahkan klik disini untuk melihat logo UNIB!”.
12
7). Membuat Margin
Gambar 7.1 Input Membuat Margin
Penjelasan:
Jika ingin merubah posisi link maka kode nya adalah <body topmargin="ukuran">
karena saya ingin menjadikan ukurannya 50 pixel maka kode nya adalah <body
topmargin="50px"> (gambar). Lalu jangan lupa save.
Gambar 7.2 Output Membuat Margin
Penjelasan:
Selanjutnya buka lagi website html yang dibuat sebelumnya dan refresh, maka akan
muncul tampilan link dengan posisi sedikit turun ke bawah, semakin besar jumlah pixel maka
posisi link akan semakin turun(gambar)
13
8). Membuat Paragraf
Gambar 8.1 Input Membuat Paragraf
Penjelasan:
Untuk membuat paragraf pada html maka gunakan <p>isi kalimat paragraf 1</p>
kemudian membuat hal yang sama untuk baris kedua yaitu <p>isi kalimat paragraf 2 </p>,
Kemudian klik save agar membentuk dua paragraf. jika tidak menggunakan kode tersebut
walaupun letak antar 2 kalimat beda baris maka akan tetap menjadi satu baris yang sama.
Gambar 8.2 Output Membuat Paragraf
Penjelasan:
Selanjunya buka lagi website html yang dibuat sebelumnya dan refresh, maka akan
muncul tampilan 2 buah paragraf dan terdapat jarak antara kedua paragraf tersebut
14
Gambar 8.3 Input Membuat Paragraf Tanpa Jarak
Penjelasan:
Jika kita ingin membuat dua buah paragraf tanpa jarak maka gunakan br di antara dua
kalimat tersebut, contohnya adalah seperti ini “Nama saya Riza Miranda <br> Saya kuliah di
Universitas Bengkulu”. Lalu jangan lupa klik save.
Gambar 8.4 Output Membuat Paragraf Tanpa Jarak
Penjelasan:
Kemudian buka lagi website html yang dibuat tadi dan refresh, maka akan muncul
tampilan dua buah paragraf tanpa jarak seperti yang terlihat pada gambar diatas.
15
9). Memiringkan Tulisan (Italic) dan Menebalkan (Bold)
Gambar 9.1 Input Memiringkan Tulisan (Italic) dan Menebalkan (Bold)
Penjelasan:
Untuk memiringkan tulisan maka mnggunakan <em> misalnya ingin memiringkan

tulisan “Riza Miranda”, maka letakkan <em> sebelum kata “Riza Miranda” dan </em>
setelah kata “Riza Miranda”. Kemudian jika kita ingin mempertebal maka gunakan strong ,
misalnya untuk menebalkan tulisan “Universitas Bengkulu” bentuknya adalah strong
Universitas Bengkulu </strong> kemudian save.
Gambar 9.2 Output Memiringkan Tulisan (Italic) dan Menebalkan (Bold)
Penjelasan:
Selanjutnya buka lagi website html yang dibuat tadi dan refresh, maka akan muncul
tampilan tulisan bercetak miring dan bercetak tebal seperti yang tampak pada gambar diatas.
16
10). Mengubah Ukuran Huruf
Gambar 10.1 Input Mengubah Ukuran Huruf
Penjelasan:
Untuk mengubah ukuran huruf menggunakan h1, h2 dan seterusnya, semakin besar
angka maka semakin kecil huruf. Setelah menuliskan kode program jangan lupa di save.
Gambar 10.2 Output Mengubah Ukuran Huruf
Penjelasan:
Kemudian buka lagi website html yang dibuat tadi dan refresh, maka akan terlihat
Ukuran kata di baris awal lebih besar dari baris di bawahnya, begitu juga seterusnya.
17
11). Menampilkan Gambar
Gambar 11.1 Input Menampilkan Gambar
Penjelasan:
Untuk menampilkan gambar pada html,, saya memasukkan kode <img src="logo
pgsd.jpeg" alt="Ini logo pgsd"> . Jika kita salah kode, maka gambar tidak akan ditampilkan
dan hanya ada tulisan “ini logo pgsd” saja.
Gambar 11.2 Output Menampilkan Gambar
Penjelasan:
tampilan gambar logo pgsd.
18
12). Membuat Link Menuju Suatu Website
Gambar 12.1 Input Membuat Link Menuju Suatu Website dalam Tab yang Sama
Penjelasan:
Untuk mebuat link menuju suatu website kita harus menuliskan kode nya terlebih
dahulu, kode tersebut akan membawa ke website http://www.unib.ac.id karena href berfungsi
untuk membuat link, kemudian terdapat h1 yang berarti judul. Judulnya adalah “Silahkan
Anda Klik Link Dibawah Ini!”
Gambar 12.2 Output Membuat Link Menuju Suatu Website dalam Tab yang Sama
Penjelasan:
tampilan seperti pada gambar diatas. Terdapat link dengan nama Universitas Bengkulu.
Gambar 12.3 Tampilan Link Menuju Suatu Website dalam Tab yang Sama
Penjelasan:
Seperti yang terlihat pada gambar diatas tampak bahwa ketika membuka link maka
akan terbuka pada tab yang sama.
19
Gambar 12.4 Input Membuat Link Menuju Suatu Website dalam Tab yang Berbeda
Penjelasan:
Untuk membuat link menuju suatu website dalam tab yang baru menggunakan _blank
agar ketika membuka link maka link menuju pada blank page.
Gambar 12.5 Tampilan Link Menuju Suatu Website dalam Tab yang Berbeda
Penjelasan:
Seperti yang terlihat pada gambar diatas tampak bahwa ketika membuka link maka
akan terbuka pada tab baru.
20
BAB III
PENUTUP
A. KESIMPULAN
HTML (Hypertext Markup Language) merupakan gabungan dari dua

istilah: hypertext dan markup language. Hypertext yaitu dokumen berisi tautan yang
memungkinkan pengguna terhubung ke halaman lain. Sedangkan markup language
merupakan bahasa komputer yang terdiri dari sekumpulan kode untuk mengatur struktur dan
menyajikan informasi. Jadi, HTML adalah bahasa markup untuk membuat struktur halaman
website. Sebuah file HTML di di simpan dengan ekstensi .html (dot html) dan dapat di
eksekusi atau diakses menggunakan web browser (Google Chrome, Mozilla Firefox, Opera,
Safari dan lain-lain). Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala
(head) dan bagian tubuh (body). Pembuatan proyek web/HTML sekolah dengan
menggunakan notepad ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang
kemudian untuk setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri
sesuai dengan apa yang akan kita buat.
B. SARAN
Bagi pemula yang ingin membuat HTML yang baik, sebaiknya sebelum membuat
HTML harus mengetahui definisi, strukntur dasar, komponen-komponen HTML dan elemen-
elemen dasarnya. Serta harus menguasai langkah-langkah membuat HTML beserta
tampilannya yang menarik yang akan diberikan kepada pengguna nantinya.
21
DAFTAR PUSTAKA
Ahmad Muhardian. (2021, Dec 02). Tutorial HTML untuk Pemula. Diambil dari petani kode:
https://www.petanikode.com/tutorial/html/
Andre. (2013, April 23). Cara Membuat Struktur Dasar HTML. Diambil dari:
https://www.duniailkom.com/belajar-html-mengenal-struktur-dasar-html/
Benefita. (2020, Oktober 21). Belajar HTML Lengkap untuk Pemula. Diambil dari
niagahoster: https://www.niagahoster.co.id/blog/belajar-html/
Diki Alfarabi Hadi. Tutorial HTML Lengkap. Diambil dari malas ngoding:
https://www.malasngoding.com/belajar-html-dasar-pengertian-html/
22

Laporan 6 A1g021001 Riza Miranda 1b

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

Laporan 6 A1g021001 Riza Miranda 1b

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN HTML

KOMPUTER DAN PEMROGRAMAN (CODING)

Riza Miranda (A1G021001)

1. Ratna Syafitri (G1F019021)

PROGRAM STUDI PENDIDIKAN GURU SEKOLAH DASAR

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN

1.1 Pengertian HTML

HTML (Hypertext Markup Language) merupakan gabungan dari dua

1.2 Kegunaan HTML

1.3 Kelebihan dan Kekurangan HTML

 Kelebihan-kelebihan yang dimiliki HTML:

1. Html merupakan bahasa yang bersifat cross-platform (bisa digunakan dibanyak

 Kekurangan-kekurangan yang dimiliki HTML

1.4 Peralatan untuk Membuat HTML

Adapun peralatan yang harus kamu persiapkan adalah:

 Teks Editor untuk Menulis HTML

 Web Browser untuk Membuka HTML

1.7 Kerangka Inti HTML

 <!DOCTYPE html> berfungsi untuk mendeklarasikan kepada komputer bahwa Anda

Contoh struktur dasar HTML:

1.6 Mengenal Tag, Elemen, dan Atribut

1.7 Membuat Paragraf di HTML

 Fungsi utama tag <br> adalah untuk membuat baris baru.

1.8 Membuat Heading

1.9 Format Text HTML

1.10 Membuat Link

 Jenis-jenis Link pada HTML

 Atribut-atribut untuk Link

1). Menggunakan Atribut target

 _blank akan membuka link pada jendela atau tab baru;

2). Menggunakan Atribut title

Perbedaan Link, Alink dan Vlink:

 Link adalah warna hyperlink sebelum diklik/warna standar.

1.11 Menambahkan Gambar di HTML

 Atribut untuk Tag <img>

 alt untuk teks alternatif untuk gambar;

1.12 Menampilkan Gambar

SOAL DAN PEMBAHASAN

1). Membuat Folder HTML

Gambar 1.1 Folder Membuat HTML

2). Membuat Title

Gambar 2.1 Input Membuat Title

Gambar 2.3 Output Membuat Title

Gambar 3.1 Input Background Gambar

Untuk membuat background image, kita harus menyimpan gambar backgroundnya

Gambar 3.2 Output Background Gambar

Gambar 4.1 Input Warna Background

Gambar 4.2 Output Warna Background

Gambar 5.1 Input Warna Teks

Gambar 5.2 Output Warna Teks

Gambar 6.1 Input Membuat Link

Gambar 6.2 Output Membuat Link

Gambar 6.4 Output Link Menuju Gambar

Gambar 6.5 Tampilan Hasil Link Menuju Gambar

Gambar 7.1 Input Membuat Margin

Gambar 7.2 Output Membuat Margin

Gambar 8.1 Input Membuat Paragraf

Gambar 8.2 Output Membuat Paragraf

Gambar 8.4 Output Membuat Paragraf Tanpa Jarak

Gambar 9.1 Input Memiringkan Tulisan (Italic) dan Menebalkan (Bold)

Untuk memiringkan tulisan maka mnggunakan <em> misalnya ingin memiringkan

Gambar 9.2 Output Memiringkan Tulisan (Italic) dan Menebalkan (Bold)

Gambar 10.1 Input Mengubah Ukuran Huruf