Tugas_3 Pendahuluan
TUGAS PENDAHULUAN
1. Jelaskan apa yang dimaksud dengan HTML beserta fungsinya ! (
Jawaban: HTML singkatan dari Hyper-Text Markup Language yaitu bahasa (aturan) standar yang digunakan untuk menampilkan teks, gambar, video dan audio ke dalam halaman web yang disimpan dalam sebuah file dengan ekstensi *.html. Pada HTML dikenal istilah Tag yang merupakan istilah untuk elemen- elemen penyusun file teks HTML.
2. Jelaskan perbedaan antara Tag, Atribut, Value dan Element pada HTML !
Jawaban:
a. Tag HTML merupakan serangkaian instruksi dasar yang akan diterjemahkan oleh web browser dalam bentuk output yang sesuai dengan instruksi tersebut.
b. Attribute merupakan bagian dari Tag pada HTML yang tidak dapat terpisahkan. Attribute membawa informasi tambahan yang dapat mempengaruhi sebuah Tag, baik itu secara struktur, tampilan dan tingkah laku. Secara umum attribute HTML terbagi atas attribute Global dan attribute. Global attribute dapat diterapakan diseluruh Tag pada HTML, sedangkan attribute hanya dapat diterapkan pada Tag tertentu saja.
c. Value merupakan nilai dari sebuah attribute. Value memberikan nilai pada attribute yang merupakan informasi tambahan dari sebuah Tag. Struktur, tampilan dan tingkah laku pada Tag yang dipengaruhi oleh attribute sangat berpengaruh dengan nilai atau Value dari Attribute itu sendiri.
d. Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html didefinisikan oleh tag pembuka, lalu di lanjutkan oleh kontent lalu di akhiri oleh tag penutup.
3. Tuliskan Tag HTML beserta fungsinya (Minimal 30 + Wajib Table, Form & Link) !
|
Nama Tag
|
Keterangan/Kegunaan
|
|
Basic
|
|
|
<!DOCTYPE>
|
Tag untuk menentukan tipe dokumen
|
|
<html>
|
Tag untuk membuat sebuah dokumen HTML
|
|
<title>
|
Tag untuk membuat judul dari sebuah halaman
|
|
<h1> to <h6>
|
Tag untuk membuat heading
|
|
<p>
|
Tag untuk membuat paragraf
|
|
<title>
|
Tag untuk membuat judul dari sebuah halaman
|
|
<!--...-->
|
Tag untuk membuat komentar
|
|
Formatting
|
|
|
<address>
|
Tag untuk membuat kontak alamat
|
|
<b>
|
Tag untuk membuat huruf bercetak tebal
|
|
<bdi>
|
Mengisolasi bagian dari teks yang dapat diformat dalam arah
yang berbeda dari teks lain di luarnya (tag baru HTML5)
|
|
<font>
|
Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)
|
|
<big>
|
Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
|
|
<i>
|
Tag untuk membuat sebuah bagian dari teks yang disesuaikan
dengan mood
|
|
Forms
|
|
|
<form>
|
Tag untuk membuat sebuah form HTML untuk
input pengguna
|
|
<input>
|
Tag
untuk membuat sebuah kontrol input
|
|
<button>
|
Tag untuk membuat sebuah tombol yang dapat diklik
|
|
<label>
|
Tag untuk membuat sebuah label untuk sebuah elemen
<input>
|
|
<legend>
|
Tag untuk membuat sebuah caption untuk sebuah elemen
<fieldset>, < figure>, atau <details>
|
|
<datalist>
|
Menentukan daftar pilihan yang telah ditetapkan untuk
kontrol input (tag baru HTML5)
|
|
<keygen>
|
Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
|
|
<output>
|
Tag untuk membuat hasil penghitungan (tag baru HTML5)
|
|
Frames
|
|
|
<frame>
|
Tag untuk membuat sebuah window (bingkai) dalam sebuah
frameset (tidak disupport lagi di
HTML5)
|
|
<frameset>
|
Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
|
|
<noframes>
|
Tag untuk membuat sebuah konten alternatif untuk pengguna
yang tidak mendukung frame (tidak disupport lagi di
HTML5)
|
|
<iframe>
|
Tag untuk membuat sebuah bingkai
|
|
Images
|
|
|
<img>
|
Tag
untuk membuat gambar
|
|
<map>
|
Tag untuk membuat gambar-peta
|
|
<area>
|
Tag untuk membuat area dalam gambar-peta
|
|
<canvas>
|
Digunakan untuk menggambar grafik, melalui scripting
(JavaScript ) (tag baru HTML5)
|
|
<figcaption>
|
Tag untuk membuat sebuah caption untuk elemen
<figure> (tag baru HTML5)
|
|
Links
|
|
|
<a>
|
Tag untuk
membuat hyperlink
|
|
<link>
|
Tag untuk
membuat hubungan antara dokumen dan sumber daya eksternal (paling sering
digunakan untuk link ke style sheet)
|
|
<nav>
|
Tag untuk
membuat navigasi link (tag baru HTML5)
|
|
Lists
|
|
|
<ul>
|
Tag
untuk membuat daftar dengan selain nomor
|
|
<ol>
|
Tag untuk
membuat daftar dengan nomor
|
|
<li>
|
Tag untuk
membuat sebuah item daftar
|
|
<dl>
|
Tag untuk
membuat sebuah daftar definisi
|
|
<dt>
|
Tag untuk
membuat istilah (item) dalam daftar definisi
|
|
Tables
|
|
|
<table>
|
Tag untuk
membuat tabel
|
|
<th>
|
Tag untuk membuat
sebuah sel header tabel
|
|
<tr>
|
Tag untuk
membuat baris dalam sebuah tabel
|
|
<td>
|
Tag untuk
membuat sel dalam sebuah tabel
|
|
Style/Sections
|
|
|
<style>
|
Tag untuk
membuat informasi style untuk dokumen
|
|
<div>
|
Tag untuk
membuat sebuah bagian dalam dokumen
|
|
<header>
|
Tag untuk
membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
|
|
<hgroup>
|
Pengelompokan
elemen heading (<h1> sampai <h6>) (tag baru HTML5)
|
|
<dialog>
|
Tag untuk
membuat sebuah kotak dialog atau jendela (tag baru HTML5)
|
|
Meta Info
|
|
|
<meta>
|
Tag untuk
membuat metadata tentang dokumen HTML
|
|
<basefont>
|
Menentukan
standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
|
4. Tuliskan contoh penggunaan tag HTML (Minimal 5) !
Jawaban:
a. Contoh penggunaan tag html Basic
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
b. Contoh penggunaan tag html from
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
c. Contoh penggunaan tag html table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
d. Contoh penggunaan tag html daftar/list
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
e. Contoh penggunaan link
<!DOCTYPE html>
<html>
<head>
<title>belajar memubuat hyperlink</title>
</head>
<body>
ini adalah contoh alamat absolute <a href="https://www.malasngoding.com/category/html/">klik disini</a>
</body>
</html>
5. Tuliskan dan Jelaskan Atribut-Atribut yang dapat digunakan pada Nomor 3 !
Jawaban:
Tilte : untuk membuat judul dari sebuah halaman
td : untuk membuat sel dalam sebuah tabel
tr : untuk membuat baris dalam sebuah tabel
font : untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)
Align,right, left, center Rata secara horizontal valign top, middle, bottom Rata secara vertikal
bgcolor numeric, hexidecimal, RGB values Memberi warna latar elemen background URLMemberikan background gambar elemen.
id User Defined Nama khusus sebuah elemen untuk CSS
class User Defined Nama untuk pengklasifikasian CSS
6. Tuliskan dan Jelaskan Atribut yang digunakan dalam menggabungkan baris dan kolom pada table !
Jawaban:
Atribut colspan dan rowspan adalah atribut yang digunakan dalam HTML untuk menggabungkan baris dan kolom menjadi satu, sehingga baris dan kolom tersebut menjadi lebar. Colspan merupakan kependekan dari ColumnSpan yang berarti beberapa kotak kesamping, sedangkan rowspan mengartikan beberapa kotak kebawah. Jadi fungsi atribut colspan adalah untuk menggabungkan kolom satu dengan kolom lainnya, sedangkan rowspan berfungsi menggabungkan baris satu dengan baris lainnya. kedua atribut tersebut diletak didalam tag <td>.
<td>
Comments
Post a Comment