MODUL HTML

COCONUT
Computer Club Oriented Network, Utility
and Technology
 PENDAHULUAN

Apa itu Website ?

Website adalah kumpulan halaman yang berisi informasi tertentu dan dapat
diakses dengan mudah oleh siapapun, kapanpun, dan di manapun melalui internet. Anda
bisa mengakses website dengan menuliskan URL di alamat website di browser.
Misalnya, ketika Anda mengetikkan URL https://www.youtube,com maka Anda akan
masuk ke situs youtube

Nah apa itu URL, Seperti halnya gedung dan rumah yang memiliki alamat jalan,
laman web juga memiliki alamat unik untuk membantu orang-orang menemukannya. Di
Internet, alamat ini disebut URL (Uniform Resource Locators).

Sejarah Web ( WWW )

Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya
WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang
pelayannya tersebar di lima benua termasuk Indonesia yang terhubung menjadi
satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau
dibuat dengan format HTML (Hypertext Markup Language).

Suatu halaman dokumen informasi dapat terdiri atas teks yang saling terkait dengan
teks lainnya atau bahkan dengan dokumen lain. Keterkaitan halaman lewat teks ini
disebut pranala. Dokumen informasi ini tidak hanya terdiri dari teks tetapi dapat
juga berupa gambar, mengandung suara bahkan klip video. Kaitan antar-dokumen
yang seperti itu biasa disebut hypermedia.

Jadi dapat disimpulkan bahwa WWW adalah sekelompok dokumen multimedia

yang saling bertautan dengan menggunakan tautan hiperteks. Dengan mengeklik
pranala (hyperlink), maka para pengguna bisa berpindah dari satu dokumen ke
dokumen lainnya.

WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun
1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-
arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan
pribadi. Sistem itu adalah program peranti lunak yang diberi nama Enquire. Dengan
program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai
arsip sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang
kelak menjadi dasar dari sebuah perkembangan pesat yang dikenal sebagai WWW.
WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN:
Organisation Européenne pour la Recherche Nucléaire), Jenewa, Swiss. Pada tahun
1989 Berners-lee membuat pengajuan untuk proyek pembuatan hypertext global,
kemudian pada bulan Oktober 1990, ‘World Wide Web’ sudah dapat dijalankan
dalam lingkungan CERN. Pada musim panas tahun 1991, WWW secara resmi
digunakan secara luas pada jaringan Internet.

Web versi 1.0

Merupakan generasi pertama dari layanan internet berbasis web. Pengguna hanya
bisa membaca dan mencari, serta melihat-lihat informasi yang ada dalam sebuah
web tanpa bisa melakukan interaksi lainnya.

Web versi 2.0

Merupakan generasi lanjutan dari web 1.0 yang dikenal dengan istilah Web Sosial.
Web 2.0 mengacu pada situs web yang menekankan konten yang dibuat pengguna
, kemudahan penggunaan , budaya partisipatif , dan interoperabilitas (yaitu,
kompatibel dengan produk, sistem, dan perangkat) untuk pengguna akhir.

Web versi 3.0

Merupakan generasi ketiga dari layanan internet berbasis web, web 3.0 pertama kali
diperkenalkan pada tahun 2001 ketika Tim menulis sebuah artikel ilmiah yang
menggambarkan web 3.0 sebagai sebuah sarana bagi mesin untuk membaca
halaman-halaman web.

Web versi 4.0

Dapat digunakan untuk membantu kita dalam pencarian informasi,

penyimpanan history pencarian, ataupun mempertemukan orang-orang yang
mencari informasi serupa. Web 4.0 sendiri merupakan private secretary dalam
bentuk organisme buatan.

Mengenal HTML

HTML adalah singkatan dari Hypertext Markup Language yang memiliki pengertian
bahasa markup standar untuk membuat dan menyusun halaman pada aplikasi website. Jika kamu
sedang mengembangkan website, kamu bisa menggunakan HTML atau bahasa markup ini untuk
membuat paragraf, heading, maupun link pada suatu web page.
 Bahasa kode standar yang digunakan untuk membuat halaman website, yang
dapat diakses melalui internet.Jadi HTML ini digunakan untuk membuat struktur dan
menyusun halaman dari suatu web. Semua halaman web yang sering anda buka, seperti
facebook.com, twitter.com, google.com dan lain sebagainya ditampilkan dengan
menggunakan HTML. Jadi bisa dikatakan HTML adalah bahasa dasar untuk
menampilkan halaman web pada web browser. HTML disusun berdasar kode dan simbol
tertentu, yang dimasukkan dalam sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar
komputer. Dan bisa dipahami oleh para pengguna internet.

Sejarah & Asal Usul HTML

Cerita awal kemunculan HTML dimulai dari tahun
1980. Ketika sebuah lembaga bernama CERN (Conseil
Européen Pour La Recherche Nucléaire) yang artinya
Komisi Eropa untuk Penelitian Fisika Nuklir. CERN
sendiri bukan perusahan yang berkaitan dengan teknologi
maupun internet yang ada adalah mereka peneliti fisika
nuklir. Lalu, timbullah sebuah permasalahan yaitu :

Para peneliti di CERN berjumlah sekitar 10.000 orang dan mereka bekerja sama dengan
software dan hardware yang berbeda-beda. Banyak pekerjaan yang dilakukan melalui Email
seperti pengiriman dokumen penelitian, dokumentasi teknis, dan lain-lain. Tapi karena pada saat
itu belum ada yang namanya Hyperlink, tentu akan kesulitan saat membuat rujukan ke dokumen
yang lain. Berdasarkan permasalahan ini, Tim Bernes-Lee memutuskan untuk mengembagkan
software bernama Enquire. Ia pun memulai proyek Enquire pada 23 Juni 1980. Enquire adalah
program hypertext yang dibuat dengan bahasa pemrograman pascal.
Program Enquire berjalan di terminal
atau berbasis teks. Contoh tampilan di atas
adalah contoh konsep saja. Tapi proyek
Enquire gagal dan dihentikan, karena
menurut Tim ia sulit melakukan koordinasi
dan menjaga agar informasi tetap terupdate.
Sepertinya permasalahan di CERN belum
bisa diselesaikan dengan Enquire.
 Tim kemudian memutuskan untuk membuat proposal tentang sistem hypertext berbasis
internet (1989).Ada dokumen Hiperteks yang disimpan di server dan ada program di sisi client
(Hypertext browser) yang digunakan untuk membuka dokumen HTML. Selain itu, ada juga
Hyperlink yang menghubungkan dokumen yang satu dengan yang lainnya.
Lalu pada akhir tahun 1991, Tim Berners-Lee menerbitkan dokumen yang berjudul:
“HTML Tags”. Dokumen ini berisi penjelasan tentang 18 tag awal yang menjadi konsep dasar
HTML. HTML sebenarnya dirancang berdasarkan pada konsep bahasa markup yang dikenal
dengan SGML (Standard Generalized Markup Language). SGML adalah sebuah standar
internasional untuk membuat dokumen dengan tanda (markup).
Bisa dibilang.. HTML adalah implementasi dari SGML. Kalau kita lihat, beberapa tag
seperti <title>, <p>, <li>, dan <h1> sampai <h6> berasal dari SGML. Namun, tidak semua yang
ada di HTML berasal dari SGML. Salah satunya adalah Hyperlink, yang murni hasil pemikiran
Tim Berners-Lee. Ide tentang HTML ini kemudian disebarkan ke dalam sebuah mailing list dan
segera menjadi perhatian berbagai ilmuwan komputer di seluruh dunia. Begitulah asal usul
HTML. HTML kemudian diterapkan di CERN dan ini menjadi website yang pertama kali dibuat
di dunia.
Setelah memahami pengertian dari HTML mari kita memahami kata demi kata dari
Hypertext Markup Language.
• Hypertext sendiri dimaksudkan sebagai metode yang digunakan untuk berpindah laman web
ke laman lain. Usai mengklik tulisan atau simbol yang muncul di halaman website.
• Markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks didalamnya.
Contoh jika mengetik suatu teks dengan tanda tag<b>, Maka teks tersebut akan muncul
dengan huruf tebal atau bold di laman website.
• Language berarti bahasa kode atau script. Disusun dari tag-tag tertentu yang akan
diterjemahkan dalam teks atau visual yang bisa dilihat di website.

HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext,
list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung meletakkan
image pada dokumennya tanpa memperbolehkan meletakkan teks di sekelilingnya
(wrapping).

HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat
memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir
dari adanya homepage interaktif.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang
disebut juga sebagai HTML tidak bertahan lama dan segera digantikan HTML versi
3.2.

HTML versi 3.2

Versi 3.2 ini pada awalnya disebut dengan Wilbur sebelum dikenal dengan nama
HTML versi 3.2. Fitur yang ada di versi ini diantaranya adalah gambar untuk
background, tabel, style, frame, hingga teks di sekeliling gambar.

HTML versi 4.0

Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2.
Beberapa diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.

HTML versi 4.01

Di versi ini, ada perbaikan kesalahan minor (kecil). Dari struktur pada HTML yang
ada di versi ini, membuat HTML v4.01 menjadi standarisasi elemen serta atribut
script XHTML 1.0.

HTML versi 5.0

Versi HTML ini adalah menjadi dasar untuk pembuatan tampilan website dengan
penggabungan HTML, CSS dan Javascript. Jika dibandingkan dengan versi 4 dan
XHTML, HTML4 ini adalah best practice dari kedua versi tersebut.

Persiapan
Sebelum mempelajari HTML ada beberapa persiapan yang perlu dilakukan. Seperti
penginstalan aplikasi-aplikasi yang dibutuhkan dan pendukung dalam mempelajari HTML.
1. Web Browser
Web browser adalah suatu perangkat lunak yang digunakan untuk menampilkan halaman
web yang pada dasarnya terbuat dari HTML dan CSS. Berikut ini beberapa contoh browser:
● Firefox
● Google Chrome
● Safari
 ● Internet eksplorer
2. Text Editor
Untuk membuat halaman web dibutuhkan teks editor. Teks editor yang akan kita gunakan
adalah text editor ringan namun penuh dengan fitur yang sangat membantu dalam proses
coding atau penulisan kode HTML. Berikut ini beberapa aplikasi text editor yang kami
rekomendasikan yaitu:
● Visual Studio Code
● Sublime
● Notepad++
● Atom,dll

Dari beberapa pilihan text editor tersebut kami sangat merekomendasikan visual studio
code sebagai text editor yang akan kita gunakan dalam pembelajaran kali ini.

Visual Studio Code (VSCode) adalah text editor yang populer dikalangan programer, karena
memberikan kebebasan kepada pengguna fitur-fitur tambahan yang dapat memerlukan
kemampuan editor sesuai dengan kebutuhan penggunanya. Fitur tambahan atau extensions, yang
dapat di download dan install secara langsung di editor VSCode tanpa harus mencari di web
browser atau situs pencarian lainnya.

KelebihanVisual Studio Code

● Editor teks gratis
● Mudah untuk mengelolah eksistensi
● Ada banyak eksistensi
● Dukungan bahasa
● Terintegrasi dengan GIT
● Tersedia untuk semua OS (Windows, Linux, dan Mac)
Cara menggunakan VSCode
1. Bukalah File eksplorer.
2. Bukalah folder di salah satu disk yang anda pilih beri nama “Belajar HTML”

3. Buka Visual Studio Code anda

4. Klik menu file lalu tambah folder

5. Pilih folder yang sudah diberi nama “Belajar HTML” tadi

6. Klik ikon new file pada tanda panah dan beri nama “index.html”
 Pengenalan HTML

Struktur file
HTML
Dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang
harus anda tuliskan dan sudah menjadi ketentuan. Berikut Struktur dari HTML.

Kode di atas adalah struktur dasar HTML berisi beberapa informasi seperti :
1. Tag <!DOCTYPE> adalah tag yang menyatakan bahwa kode dibawah adalah dokumen
html. Berfungsi untuk memberitahu akan dokumen yang akan dijalankan pada browser.
2. Tag <html> adalah tag pembuka dan penutup dari keseluruhan sebuah dokumen html.
3. Tag <title>menetapkan judul dari dokumen HTML yang akan muncul pada tab browser.
4. Tag <head> berisi informasi tentang dokumen, maksudnya kita bisa menambahkan tag- tag
yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata
kunci pada dokumen dan lain-lain.
5. Tag <body> tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan
oleh web browsernya.

Element adalah isi dari tag yang berada di antara tag pembuka dan tag penutup, termasuk tag
itu sendiri dan atribut yang ditarik (jika ada). Sebagai contoh perhatikan kode HTML berikut ini:

Element
 Elemen tidak hanya berisi teks, namun juga bisa memberi tag lain. Contoh:

<p> Ini adalah sebuah <em>paragraf</em></p>

Dari contoh diatas,( <p> Ini adalah sebuah <em>paragraf</em></p>) <em>merupakan

elemen p karna dia terkandung di dalam tag <p> . Dalam pembahasan atau tutorial tentang
HTML, tidak jarang istilah “tag” dan “elemen” saling dipertukarkan.

Tag

Tag adalah sebagai penanda awalan dan akhiran dari sebuah elemen di HTML.
Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga
ditambahkan dengan atribut. Contoh: <p> , <a> ,<body>,<head>, dan sebagainya. Tag selalu
ditulis berpasangan terdiri dari tag pembuka ( <…> ) dan tag penutup ( </…>).
Element pada tag <head>

Element <head> adalah elemen HTML yang berfungsi sebagai tempat untuk meletakkan
metadata yaitu informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut.
Elemen ini sangat penting dan menjadi salah satu syarat minimal dalam struktur global HTML.

Element-element pada tag <head> yaitu :

● Element <title>

● Element <meta> ( tittle, description, keyword, viewport )

● Element <link>
Atribut

Atribut informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk
warna dari teks, besar huruf dari teks, dll. Setiap atribut memiliki pasangan nama dan nilai
(value) yang ditulis dengan name="value" . Nilai diapit tanda kutip, boleh menggunakan tanda
kutip satu (') atau dua (“) tapi kami lebih merekomendasikan menggunakan kutip dua.

.
Komentar

Komentar / comment pada HTML adalah sebuah kode yang berfungsi untuk memberikan
petunjuk atau keterangan.Selain itu komentar juga dapat digunakan untuk menonaktifkan sebuah
codingan. Perilaku dari komentar tidak akan dibaca sebagai sebuah perintah di browser.Untuk
menggunakan komentar dapat menekan shortcut pada code editor ctrl + /.

Elemen-elemen HTML

1. Heading

Elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen
headings ada 6 jenis, yakni <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. Tag Heading,
digunakan untuk memberikan penjudulan pada suatu dokumen HTML. Di tag ini berisi
penulisan untuk judul dan sub sub judul dari sebuah website yang akan ditampilkan. Untuk
memformat penjudulan dalam HTML, kita gunakan tag<h1>untuk judul utama dan untuk
subjudulnya anda dapat menggunakan tag<h2>sampai dengan<h6>. Setiap level judul
memiliki ukuran huruf yang berbeda - beda. Contoh penulisan tag heading :

<!DOCTYPE HTML>
<HTML lang=‚en-US‛>
<head>
<title>Heading</title>
</head>
<body>
<h1>Judul Utama</h1>
<h2>Sub judul</h2>
<h3>Subsub judul</h3>
<h4>Subsub judul</h4>
<h5>Subsub judul</h5>
<h6>Subsub judul</h6>
</body>

Berikut tampilan penggunaan Tag Heading pada tampilan website.

 Adanya penjudulan dimaksudkan agar suatu dokumen HTML lebih terstruktur layaknya
sebuah dokumen resmi seperti skripsi/paper yang mengharuskan adanya perbedaan antara Bab
utama dan sub-babnya. Perhatikan contoh penggunaan Heading dalam suatu website di halaman
selanjutnya.
2. Paragraph

Tag ini dituliskan dengan <p> digunakan untuk membuat sebuah paragraf atau teks
dan terletak di dalam Tag <body>.

1. <!DOCTYPE HTML>
2. <HTML lang=‚en-US‛>
3. <head>
4. <title>Heading</title>
5. </head>
6. <body>
7. <h1>Judul Utama</h1>
8. <p>ini adalah element paragraf</p>
8. <h2>Sub judul</h2>
<p>ini adalah element paragraf</p>
10. <h3>Sub Sub judul</h3>
<p>ini adalah element paragraf</p>
14. </body>
15. </HTML>

Berikut tampilan pada browser :

<h1
<h2 >
>
<p>
<h3
>
<p>
3. Text Formatting
Element pemformatan dirancang untuk menampilkan jenis
teks khusus Element HTML Tag <b> dan Tag <strong>
Element HTML <b>mendefinisikan teks tebal, tanpa kepentingan ekstra. Contoh :

<b>...</b>

Element HTML Tag <i> dan Tag <em> Element HTML <i> mendefinisikan bagian
teks dalam suara atau suasana hati alternatif. Konten di dalamnya biasanya
ditampilkan dalam huruf miring.
Contoh : <i>...</i>, <em>.../em> Element HTML <del>

Element HTML <del> mendefinisikan teks yang telah dihapus dari dokumen.Browser
biasanya akan menempatkan garis melalui teks yang dihapus.

Contoh : <del>...</del>

Element HTML Tag <mark>

Elemen HTML <mark>mendefinisikan teks yang harus ditandai atau
disorot menjadi berwarna.
Contoh : <mark>.../mark> Element HTML Tag <ins>

Element HTML <ins> mendefinisikan teks yang telah dimasukkan ke dalam dokumen.
Browser biasanya akan menggaris bawahi teks yang disisipkan.
Contoh : <ins>…</ins>
 4. Anchor Link

Anchor text adalah potongan teks berisi tautan yang dapat diklik. Bentuknya cukup
berbeda dari teks biasa. Di mesin pencarian umumnya, anchor text berwarna biru atau berupa
teks yang digarisbawahi. Teks ini berguna sebagai informasi bagi pengguna dan mesin pencari
mengenai tautan website yang dilampirkan.

Link pada HTML dapat dibuat dengan tag <a>, kemudian tag ini harus memiliki atribut
href untuk menentukan alamat URL tujuan dari link.

Penulisan element Link:

<a href=”https://www.google.com”>kunjungi kami</a> Struktur element link :

1. <!DOCTYPE HTML>
2. <HTML lang=‚en-US‛>
3. <head>
4. <title>Heading</title>
5. <a href=HTTPS://google.com>to my website</a>
5. </head>
6. <body>
7. <h1>Judul Utama</h1>
8. <p>ini adalah element paragraf</p>
8. <h2>Sub judul</h2>
<p>ini adalah element paragraf</p>
10. <h3>Sub Sub judul</h3>
<p>ini adalah element paragraf</p>
14. </body>
15. </HTML>

5. Image
Kita dapat menampilkan gambar menggunakan element <img>. Elemen ini tidak
memiliki konten, hanya menggunakan atribut saja dan tidak memiliki tag penutup.
Tag img memiliki dua atribut yaitu:
Attribute <src> : digunakan untuk memanggil gambar dari sumbernya.
Atribut <alt> : digunakan untuk menampilkan alternatif teks
jika gambar gagal di munculkan.

Contoh penulisan element <img>

<img src="" alt=”">

 Contoh Penulisan kode dalam HTML :

Dan saat ditampilkan di browser maka tampilannya seperti di bawah ini :

LIST

list atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam¬ HTML yang
digunakan untuk menampilkan data secara berurutan . Dalam HTML penulisan list
menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list
yang bisa di gunakan yaitu ordered list dan unordered list.

• Ordered List berfungsi untuk menampilkan daftar list dalam bentuk

huruf atau angka. Tag yang digunakan dalam ordered list ini adalah
<ol>.
 <ol>
<li>Jeruk</li>

<li>Durian</li> Penulisan element <li>

<li>Pisang</li>

<li>Pepaya</li>
</ol>

<!DOCTYPE html>

<html lang="en">

<head>

<title>Membuat Ordered List</title>

</head>

<body>

<h1>Buah Favoritku:</h1>

<ol>

<li>Jeruk</li>

<li>Durian</li>

<li>Pisang</li>

<li>Pepaya</li>

<li>Mangga</li>

</ol>

</body>

</html>
 TAMPILANNYA SEPERTI DI BAWAH INI

1. Unordered List berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak. Tag
yang digunakan dalam unordered list adalah <ul>.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat Unordered List</title>
</head>

<body>
<h1>Makanan Favorit:</h1>
<ul>
<li>ikan</li>
<li>ayam</li>
<li>daging</li>
<li>sayur</li>
<li>Nasi</li>
</ul>
</body>
</html>
TAMPILANNYA SEPERTI DI BAWAH INI

TABEL

Struktur Table

Element <table> digunakan untuk membuat table di dalam sebuah website, paling
tidak ada 4 tag yang akan kita gunakan yaitu tag <table>, <tr>, <th>, <td>. Struktur
penulisan element table adalah sbb :

TAMPILANNYA SBB:
 COLSPAN DAN ROWSPAN

Colspan dan Rowspan merupakan atribut dari tag <table> yang berfungsi untuk
menggabungkan kolom dan cell dalam sebuah tabel.

a. Colspan
Atribut colspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1
secara horizontal. colspan, jika diistilah mudahkan adalah 'berapa kolom ke samping
yang akan digabungkan'.

<!DOCTYPE html>
<html>
<head>
<title>Menggabungkan sel tabel dengan rowspan</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3">Ini baris pertama, cuma 1 kolom</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 3</td>
<td>baris 2, kolom 3</td>
</tr>
</table>

</body>
</html>
Berikut tampilannya :

b. Rowspan
Rowspan digunakan untuk menggabungkan beberapa sel tabel menjadi 1 secara
vertikal. rowspan, jika diistilahkan mudahnya adalah 'berapa baris ke bawah yang akan
digabungkan'.

<!DOCTYPE html>
<html>
<head>
<title>Menggabungkan sel tabel dengan rowspan</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td rowspan="4">Ini cuma 1 baris</td>
<td>Ini baris 1 di kolom sebelahnya</td>
</tr>
<tr>
<td>Ini baris 2 di kolom sebelahnya</td>
<tr>
<tr>
<td>Ini baris 3 di kolom sebelahnya</td>
<tr>
</table>
</body>
</html>
 Berikut tampilan dari kode di atas.

FORM

a. Tag form

Tag form digunakan untuk Penggunaan form hanya menggunakan HTML saja tidak akan
terlalu berguna. Tag <form> ini bisa diibaratkan Formulir di dunia nyata, namun dalam
web biasanya hanya berupa antarmuka yang disediakan untuk mengumpulkan data dari
pengguna, dan akan menggunakan bahasa pemrograman web. Didalam kotak merah di
bawah ini adalah tampilan dari element tag <form>
 Berikut penulisan struktur kode dari elemen <form> beserta tampilanya.

b. Atribut tag form

Element Form yang biasa digunakan :

<Input>
Elemen <input> pada HTML forms menjadi elemen yang sering digunakan. Adapun tag
<input> memiliki beberapa tipe atribute seperti text, radio, checkbox.
<textarea>
Elemen <textarea> untuk memberikan input secara multi-line
<select>
Elemen <select> untuk memberikan input secara dropdown
<label>
Elemen <select> untuk memberikan input secara dropdown
<button>
Elemen <select> untuk memberikan tombol yang bisa diklik
.
ATRIBUT TAG & INPUT

● <input type="text"> akan berupa textfields yang nantinya kita dapat memberikan

input berupa text klik.

● <input type="radio"> akan berupa pilihan yang berbentuk bulat yang nantinya
kita dapat memberikan input dengan memilih salah satu pilihan yang tersedia.
klik
● <input type="checkbox"> akan berupa pilihan yang berbentuk kotak yang
nantinya kita dapat memberikan input dengan memilih lebih dari satu pilihan
yang tersedia. klik
● <input type=”email”>

● <input type=”password”>
● <input type=”date”>

<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTM
L">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS"
>
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" valu
e="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
25 | Modul HTML (Hypertext Markup Language)