Laprak Mutiara Permata Putri 24060121140154 html

(1)

HTML

LAPORAN PRAKTIKUM

Disusun untuk Memenuhi Tugas Praktikum pada Mata Kuliah Dasar Sistem Semester Satu

Disusun Oleh:

Mutiara Permata Putri (24060121140154)

PROGRAM STUDI S-1 INFORMATIKA LAB B2 DEPARTEMEN INFORMATIKA

FAKULTAS SAINS DAN MATEMATIKA UNIVERSITAS DIPONEGORO

SEMARANG

2021

(2)

BAB I PENDAHULUAN A. Rumusan Masalah

1. Bagaimana cara menggunakan .text formatting dengan memberikan mark dan cetak miring?

2. Bagaimana hasil yang didapat ketika ditambahkan atribut target pada elemen <a>?

3. Bagaimana membuat tabel sesuai dengan contoh yang telah diberikan?

4. Bagaimana membuat list sesuai dengan contoh yang telah diberikan?

5. Bagaimana cara menggunakan atribut pattern dengan ketentuan nama minimal 3 karakter dan maksimal 50 karakter?

6. Bagaimana cara menggunakan atribut pattern pada email?

7. Bagaimana hasil yang didapat ketika diubah menjadi <input type=”text”> dan berikan beberapa predefined value?

8. Bagaimana perbedaan dari video 1, video 2, video Youtube, object, dan embed?

B. Tujuan

1. Mahasiswa mampu memahami syntax dasar HTML.

2. Mahasiswa mampu memahami elemen-elemen HTML.

3. Mahasiswa mampu memahami penerapan pada HTML C. Landasan Teori

1. Hyper Text Markup Language

Hyper Text Markup Language (HTML) merupakan bahasa pengkodean yang digunakan untuk membuat sebuah halaman website dan menampilkan berbagai informasi dalam program website browser internet.

2. Pengenalan HTML

Dokumen HTML disusun oleh elemen-elemen yang berupa Head,

Body, Table, Paragraf, dan List. Elemen-elemen tersebut ditandai

dengan Tag, yaitu tanda “<nama elemen>”. Tag biasanya selalu

(3)

berpasangan, contohnya

. Terdapat beberapa elemen yang tidak mengharuskan tag memiliki pasangan, yaitu:

a. Paragraf dengan tag

<p>

b. Ganti baris -line break dengan tag

^<br>

c. Garis datar -horizontal rule dengan tag

<hr>

d. List item dengan tag

<li>

Elemen-elemen yang dibutuhkan dalam membuat HTML dapat dinyatakan dengan

<html>

,

<head>

, dan

<body>

. Setiap HTML terdiri atas head dan body serta dua section, yaitu section head dan section body. Elemen head berisi informasi tentang HTML tersebut, sedangkan elemen body berisi tentang teks yang tersusun atas link, grafik, paragraf, dan elemen lainnya. Pola dasarnya adalah:

<html>

<body>

</body>

</html>

Berikut adalah tag-tag dasar HTML

Nama Tag Tag Awal Tag Akhir Keterangan html

Tag dasar untuk

mendefinisikan dokumen html.

head

Untuk menuliskan keterangan tentang dokumen website yang akan ditampilkan.

title

Untuk memberikan judul atau informasi pada caption website tentang topik dokumen website yang ditampilkan.

body

Section utama dalam

dokumen website.

(4)

paragraf

^<p> </p>

Membuat teks berparagraf.

line break

<br>

Memaksakan ganti baris pada dokumen website.

heading

Membentuk tulisan dengan pola heading dan

‘n’ adalah nomor tingkatan dari 1-6.

garis mendatar

<hr>

Membentuk garis

mendatar pada dokumen.

komentar

^

Membentuk tulisan menjadi komentar.

(5)

BAB II PEMBAHASAN A. Soal

1. Berikanlah marked pada teks "HTML" dan cetak miring pada teks

"Hyper Text Markup Language".

2. Membuat file 06_link.html beserta tambahan kodenya di 3.6 dan jelaskan hasilnya.

3. Buatlah tabel seperti berikut dan simpan dengan nama 07f_table.html

Mata Kuliah

Jam Ruang Ruang Pengampu Kode Kapasitas

Senin 08.00- 10.00

Struktur Data A103 90 Ragil Saputra, M.Cs Rismiyati, M.Cs 10.00-

12.00 Pengembangan Berbasis Platform

B102 80 Khadijah, M.Cs Panji Wisnu Wirawan, M.T Selasa 08.00-

10.00 Struktur Data A103 90 Ragil Saputra, M.Cs Rismiyati, M.Cs 4. Buatlah list dengan HTML seperti berikut:

1. Drinks a. Ice

- Ice Tea

(6)

- Orange Squash b. Hot

- Black Coffee - Chocolate 2. Foods

a. Pizza b. burger

5. Tambahkan validasi untuk nama menggunakan atribut pattern dengan ketentuan nama hanya boleh berisi karakter alphabet atau spasi. Tambahkan pula validasi min 3 karakter, maksimal 50 karakter.

6. Ubahlah validasi untuk email menggunakan atribut pattern.

7. Ubahlah isian untuk city menjadi <input type=”text”> dan berikan beberapa predefined value (sesuai yang ada di elemen

<option> menggunakan elemen <datalist>).

8. Menganalisis 12_multimedia.html dan jelaskan perbedaan Video Pertama, Video Kedua, Video Youtube. Object, dan Embed.

B. Source Code 1.

<!DOCTYPE html>

<html>

<body>

<p><mark>HTML</mark> <i>(Hyper Text Markup Language)</i> adalah bahasa markup untuk mendeskripsikan dokumen atau halaman web.</p>

<p>HTML tag <b> digunakan untuk menjadikan teks

<b>tebal</b>. <br />©w3school</p>

</body>

(7)

</html>

2.

<!DOCTYPE html>

<html>

<head>

<title>HTML Links</title>

</head>

<body>

<a href="http://www.w3schools.com"

target="_blank">Klik Di sini</a><br /><br />

target="_self">Klik Di sini</a><br /><br />

target="_parent">Klik Di sini</a><br /><br />

target="_top">Klik Di sini</a><br /><br />

target="framename">Klik Di sini</a><br /><br />

<a href="#heading">Heading</a>

<a href="#hr">Horizontal rule</a>

<a href="#paragraf">Paragraf</a>

<a href="#br">Break line</a>

<h2 id="heading">HTML heading</h2>

<p>HTML heading digunakan untuk mendeskripsikan heading (judul). HTML heading ditampilkan dengan ukuran huruf yang lebih besar dibanding teks biasa, dimulai dari h1 untuk ukuran huruf terbesar sampai dengan h6 untuk ukuran huruf heading terkecil.</p>

<h2 id="hr">HTML horizontal rule</h2>

(8)

<p>Elemen ini digunakan untuk mwmbweikan garis horizontal lurus pada halaman web, didefinisikan dengan tag hr.</p>

<h2 id="paragraf">HTML paragraf</h2>

<p>Elemen ini digunakan untuk mendeskripsikan sebuah paragraf, didefinisikan dengan pasangan tag p.</p>

<h2 id="br">HTML line break</h2>

<p>Elemen ini digunakan untuk membuat baris baru (line break), didefinisikan dengan tag br. Dalam dokumen HTML spasi lebih maupun baris kosong akan dianggap sebagai spasi tunggal, sehingga untuk memberikan line break dapat digunakan elemen break line.</p>

</body>

</html>

3.

<!DOCTYPE html>

<html>

<head>

<title>HTML Table</title>

</head>

<body>

<table border="1" width="43%" cellpadding="15"

cellspacing="0">

<tr>

<td width="3%" rowspan="2"

align="center">Mata Kuliah</td>

align="center">Jam</td>

align="center">Ruang</td>

(9)

<td width="8%" colspan="2"

align="center">Ruang</td>

align="center">Pengampu</td>

</tr>

<tr>

<td width="5%">Kapasitas</td>

</tr>

<tr>

<td rowspan="2"

align="left">Senin</td>

<td>Struktur Data</td>

<td width="23%">Ragil Saputra, M.Cs<br>Rismiyati M.Cs</td>

</tr>

<tr>

<td>Pengembangan Berbasis Platform</td>

<td>Khadijah, M.Cs<br>Panji Wisnu Wirawan, M.T</td>

</tr>

<tr>

<td>Selasa</td>

<td>Struktur Data</td>

<td>Ragil Saputra, M.Cs<br>Rismiyati, M.Cs</td>

</tr>

</table>

</body>

(10)

</html>

4.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li>Drinks</li>

</ol>

</ol>

<ul>

<dt>- Orange Squash</dt>

</ul>

</ol>

<li>Foods</li>

<li>Pizza</li>

<li>Burger</li>

</ol>

</body>

</html>

5.

<!DOCTYPE html>

<head>

(11)

</head>

<body>

<h2>User Input</h2>

<table>

<tr>

<td><input type="text" name="name"

pattern="[A-Z]{3-50}"

title="Hanya boleh berisi karakter alphabet atau spasi, min 3 karakter,

maks 50 karakter" size="30"></td>

</tr>

<tr>

<td>Address</td>

<td><textarea name="address"

rows="5" cols="30"

placeholder="Address (max100 characters)"></textarea></td>

</tr>

<tr>

<td>Gender</td>

<td>

<input type="radio"

name="gender" value"male">Male<br />

<input type="radio"

name="gender" value="female">Female

</td>

</tr>

<tr>

<td>Email</td>

<td><input type="text" name="email"

size="30"></td>

</tr>

<tr>

(12)

<option value="none">--Select a city--</option>

<option

value="airport_west">Airport West</option>

<option

value="yarraville">Yarraville</option>

</select>

</td>

</tr>

<tr>

<td>Hobby</td>

<td>

<input type="checkbox"

name="hobby[]" value="travelling">Travelling<br />

name="hobby[]" value="reading">Reading<br />

name="hobby[]" value="swimming">Swimming<br />

name="hobby[]" value="painting">Painting<br />

</td>

</tr>

<tr>

<input type="reset" name="reset"

value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>

6.

<!DOCTYPE html>

(13)

<head>

</head>

<body>

<h2>User Input</h2>

<table>

<tr>

size "30" minlength ="3"maxlength="50"

placeholder="Name (min 3 characters, max 50 characters)"></td>

</tr>

<tr>

<td>Address</td>

rows="5" cols="30"

</tr>

<tr>

<td>Gender</td>

<td>

<input type="radio"

</td>

</tr>

<tr>

<td>Email</td>

pattern="\w+\.+\w+@\w+\.+info" size="30"></td>

</tr>

(14)

<tr>

<option value="none">--Select a city--</option>

<option

</select>

</td>

</tr>

<tr>

<td>Hobby</td>

<td>

</td>

</tr>

<tr>

value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>

7.

<!DOCTYPE html>

(15)

<head>

</head>

<body>

<h2>User Input</h2>

<table>

<tr>

size "30" minlength ="3"maxlength="50"

placeholder="Name (min 3 characters, max 50 characters)"></td>

</tr>

<tr>

<td>Address</td>

rows="5" cols="30"

</tr>

<tr>

<td>Gender</td>

<td>

<input type="radio"

</td>

</tr>

<tr>

<td>Email</td>

size="30"></td>

(16)

</tr>

<tr>

<td><input list="cities" type="text"

id="city" name="city">

<option value="auckland">Auckland</option>

<option

<option value="tuban">Tuban</option>

<option value="surabaya">Surabaya</option>

<option

</td>

</tr>

<tr>

<td>Hobby</td>

<td>

</td>

</tr>

<tr>

(17)

value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>

8.

<!DOCTYPE html>

<html>

<head>

<title>HTML Multimedia</title>

</head>

<body>

<h2>Video</h2>

<source src="images/learn_html.mp4"

type="video.mp4">

Your browser does not support the video tag.

</video>

<h2>Video</h2>

<source src="images/learn_html.mp4"

type="video.mp4">

Your browser does not support the video tag.

</video>

<h2>Video Youtube</h2>

src="https://www/youtube.com/embed/btdGIuyQhkg"

frameborder="0"

allowfullscreen></iframe>

<h2>Object</h2>

data="images/learn_html.pdf"></object>

(18)

<h2>Embed</h2>

src="images/learn_html,pdf">

</body>

</html>

C. Screenshot 1.

2.

(19)

3.

4.

5.

(20)

6.

7.

8.

(21)

D. Pembahasan 1.

Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <p>, <mark>, <i>, <b>, dan <br>. Dalam setiap komponen juga terdapat berbagai macam style, seperti tulisan akan menggunakan mark, tulisan bercetak miring, tulisan bercetak tebal, dan tulisan akan berbeda baris dengan kalimat lainnya.

Hasilnya pada tulisan HTML terdapat mark dengan warna kuning, tulisan Hyper Text Markup Language bercetak miring, dan tulisan selanjutnya normal.

2.

(22)

Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <a>, <h2>, dan <p>. Dalam setiap komponen juga terdapat berbagai macam style, seperti href=””, target=””, dan id=””.

Hasil yang dikeluarkan adalah menu Klik Di sini, Header, Horizontal rule, Paragraf, Break Line, penjelasan HTML Heading, penjelasan HTML horizontal rule, penjelasan HTML paragraph, dan penjelasan HTML line break. Untuk menu Klik Di sini, Header, Horizontal rule, Paragraf, dan Break Line menggunakan link. Pada tampilan awal akan berwarna biru, tampilan saat kursor diarahkan pada link tidak menghasilkan warna apapun atau warna tetap sama dengan tampilan awal, tampilan saat link diklik akan berwarna merah, dan tampilan setelah di klik akan berwarna ungu.

3. Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <br>, <table>, <tr>, dan <td>. Dalam

setiap komponen juga terdapat berbagai macam style, seperti

border=””, width=””, cellpadding=””, cellspacing=””, rowspan=””,

dan align=””.

(23)

4. Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <h1>, <ol>, <li>, <ul>, dan <dt>. Dalam setiap komponen juga terdapat berbagai macam style, seperti type=””

dan start=””.

5. Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <form>, <h2>, <table>, <tr>, <td>,

<input>, <textarea>, <select>, <option>, dan <br> Dalam setiap

komponen juga terdapat berbagai macam style, seperti method=””,

(24)

autocomplete=””, lang=””. action=””, type=””, name=””, pattern=””, size=””, rows=””, cols=””, placeholder=””, dan value=“”.

6. Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <form>, <h2>, <table>, <tr>, <td>,

<input>, <textarea>, <select>, <option>, dan <br> Dalam setiap komponen juga terdapat berbagai macam style, seperti method=””, autocomplete=””, lang=””. action=””, type=””, name=””,

maxlength=””, pattern=””, size=””, rows=””, cols=””, placeholder=””, dan value=“”.

7.

(25)

Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <form>, <h2>, <table>, <tr>, <td>,

<input>, <textarea>, <option>, <datalist>, dan <br>. Dalam setiap komponen juga terdapat berbagai macam style, seperti method=””, autocomplete=””, lang=””. action=””, type=””, name=””, pattern=””, size=””, rows=””, cols=””, placeholder=””, list=””, id=””, dan value=“”.

8. Pada source code diatas menggunakan tag <body></body> untuk memuat syntax kode html yang terdiri dari berbagai macam

komponen, seperti <title>, <video>, <h2>, <source>, <iframe>,

<object>, dan <embed>. Dalam setiap komponen juga terdapat berbagai macam style, seperti width=””, height=””, src=””, type=””, frameborder=””, dan data=””.

Perbedaan dari hasil tersebut adalah:

Pemb eda

Jenis Video 1 Video 2 Video

Youtube

Object Embed

Width 320 320 640 400 400

(26)