Scribd
Unggah
88 tayangan

Praktek HTML5

Modul ini membahas tentang pengenalan HTML5 dan penggunaannya untuk membuat format teks dan elemen-elemen dasar seperti heading, paragraf, list, tabel, gambar, dan form. Modul ini juga menjelaskan tag-tag dasar HTML serta contoh kode untuk mempraktekkan penggunaan tag-tag tersebut.

Diunggah oleh

vickenda
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
88 tayangan

Praktek HTML5

Modul ini membahas tentang pengenalan HTML5 dan penggunaannya untuk membuat format teks dan elemen-elemen dasar seperti heading, paragraf, list, tabel, gambar, dan form. Modul ini juga menjelaskan tag-tag dasar HTML serta contoh kode untuk mempraktekkan penggunaan tag-tag tersebut.

Diunggah oleh

vickenda
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Modul Praktikum

HTML5
1. Overview
HTML bukan bahasa pemrograman, melainkan merupakan bahasa markup atau bahasa formatting,
sehingga kita tidak akan dipusingkan dengan :
Kondisi ( id .. then ..else )
Perulangan/Looping ( Do.. While, For, Next)
Function/Procedure
Other Programming stuff
Apa yang dimaksud dengan Markup ? Markup tidak jauh berbeda dengan formatting, yaitu merubah
dokumen mentah menjadi dokumen dengan format yang benar dengan menggunakan penandaan.
Dalam HTML diunakan tag HTML untuk mem-format ( baca : me-markup ) Dokumen. Dokumen HTML
selanjutnya akan terformat ke dalam bagian bagian yang disebut dengan element.

Element dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk menandai sebuah
elemen dalam suatu dokumen HTML digunakan tag.

Struktur Element

Penggunaan Tag dan Atributnya


HTML, memiliki syarat penulisan yaitu:
Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
Tag HTML secara normal selalu berpasangan misal (<i>...</i>), beberapa ada yang tunggal misalnya
<hr> , <br>, <input>
Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag
akhir.
Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus
berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

Struktur Dasar Dokumen HTML

Latihan_01_struktur.html
<!DOCTYPE html> : deklarasi dokumen html5
<html> ... </html> :
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen html.
<head> ... </head> :
<head>
merupakan wadah untuk seluruh elemen head yang termasuk di dalamnya terdapat judul halaman web,
menyediakan meta data informasi, scripts, instruksi untuk berelasi dengan dokumen stylesheet, dan
banyak lainnya.
Tag-tag yang digunakan di bagian <head> diantaranya: <title>, <style>, <meta>, <link>, <script>,
<noscript>, dan <base>.
<title> ... </title> : tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan isi dari dokumen html. Segala sesuatu yang ingin ditampilkan di
dokumen html disimpan dalam tag body ini.

Komentar di dalam dokumen HTML


Untuk membuat komentar digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda -->.

Latihan_02_komentar.html
2. HTML FORMATTING

Membuat Heading

Heading digunakan untuk penjudulan. Tersedia 6 level penjudulan mulai <h1> s/d <h6> lebih
jelasnya lihat contoh di bawah ini:

Latihan_03_heading.html
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Heading</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

Berikut adalah hasil tampilan dari code di atas:


Hyperlink
Dalam html , link dapat digunakan untuk berbagai keperluan diantaranya menghubungkan antar
halaman, menghubungkan ke halaman website lain, bagian lain dalam satu halaman, ataupun
menghubungkan ke alamat email

Sintaks

Contoh :

A
tribut Target
Atribut target dapat mengarahkan ke mana link halaman terbuka.

E
lement / Tag <p> untuk membuat paragraph, memiliki atribut align "left", "center", "right" yang
menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").
Tag <centre> untuk membuat teks rata tengah
Tag <br> untuk membuat baris baru, tidak memerlukan penutup
Tag <hr> untuk membuat garis, tidak memerlukan penutup
Latihan_04.html
<!DOCTYPE html>
<html>
<head>
<title>Cerita Ramayana</title>
</head>
<body>
<h1><centre>Profil Proklamator</centre></h1>
<hr align=center width=80% color="#FF0000"><br>
<h2>Soekarno
<p align= "left" > Rahwana membuat geger karena menculik Dewi Sinta .
Anoman, Si Kera Putih ditugaskan Tukul Arwana untuk menjemput Sinta </p>
Tukul Arwana tidak sempat menjeputnya, karena sedang mengisi acara di
stasiun TV Swasta
<a href="">Cerita Selengkapnya</a>
</body>
</html>

Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag penutup.
Latihan_05_format_karakter.html

Me
ngatur
Font Pada
Halaman
HTML
Tag font
digunakan untuk mengatur jenis, ukuran dan
warna font. Contoh penggunaannya:

Latihan_06_font.html
<!DOCTYPE html>
<html>
<head>
<title> Format Font </title>
</head>
<body >
<font size="5pt" face="Arial" color="red">
Bentuk Text arial berwarna merah
</font>

<br>
<font face="times new roman" size="6" color="blue">
Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6
</font>
</body>
</html>

Membuat List

Ada 2 jenis list dalam HTML yaitu:


1. Ordered List <ol>
Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara berurutan.
Ditampilkan dengan penomoran secara urut.
Pada Ordered List <ol> secara default pengurutan akan diurutkan dengan angka. Apabila ingin
mengurutkan dengan huruf/romawi, tinggal menambahkan atribut type pada tag <ol>

2. Unordered List <ul>


Unordered List merupakan pengurutan / list tidak berurut dengan menggunakan symbol/bullet.
Latihan :
latihan_07_list.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan LIST</title>
</head>
<body>
<p>Langkah-langkah Menyalakan Motor </p>
<ol>
<li>Masukkan kunci</li>
<li>Putar Kunci ke Posisi "ON"</li>
<li>Tekan Tombol Starter </li>
</ol>
<p> Merek Pasta Gigi Populer </p>
<ol type="A">
<li>Pepsodent</li>
<li>Ciptadent</li>
<li>Close Up</li>
</ol>

<p>Bahan-bahan Kue</p>
<ul>
<li>Tepung Terigu</li>
<li>Mentega</li>
<li>Air</li>
<li>Gula Pasir</li>
</ul>
</body>
</html>

Menampilkan Gambar Pada Dokumen Html

Untuk menampilkan gambar di dokumen html biasanya menggunakan tag <img>. Berikut adalah
contoh penggunaan tag <img>.

<html>
<head>
<title>Belajar nampilin gambar</title>
</head>
<body>
<img src="gambar.jpg" height="80%" width="20%" alt="Ini gambar "/>
<!-- gambar dengan link -->
<a href="">
<img src="gambar.jpg" height="80%" alt="Gambar dengan
hyperlink">
</a>
</body>
</html>

TABEL DALAM HTML

HTML menyediakan tag-tag untuk membuat tabel, yaitu:

Tag <table> : Mendefinisikan sebuah tabel


Tag <tr> : Mendefinisikan baris tabel
Tag <th> : Mendefinisikan judul kolom
Tag <td> : Mendefinisikan isi tiap kolom

Tag <thead> : Mengelompokkan bagian kepala (header ) sebuah tabel


Tag <tbody> : Mengelompokkan bagian isi ( body ) dari sebuah table
Tag <caption> : Mendefinisikan judul atau keterangan tabel

Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tabel</title>
</head>
<body>
Daftar siswa
<table border="1">
<tr>

<th>No</th>
<th>Nama</th>
<th>Jenis kelamin</th>
</tr>
<tr>

<td>1</td>
<td>Andi</td>
<td>laki-laki</td>
</tr>
<tr>

<td>2</td>
<td>Indah</td>
<td>perempuan</td>
</tr>
</table>
</body>
</html>

Menggabungkan Kolom dan Baris Pada Tabel


Untuk menggabungkan kolom dalam table html yaitu dengan menggunakan atribut colspan.

Contoh:

Sedangkan untuk menggabungan baris pada tabel html yaitu dengan menggunakan atribut rowspan.
Contoh:

FORM

Form digunakan untuk input data/entri data. Di dalam html terdapat beberapa control form yg dapat
digunakan, seperti control text box, list box, password box, text area box, radio button, check box, reset
button, submit button, hidden field, file select.

Untuk membuat form dalam html kita cukup menambahkan tag <form>...</form> diantara tag
<body>...</body>, untuk lebih jelasnya lihat kode di bawah ini:

....
<body>
<form>
Control form yg digunakan
</form>
</body>
....

Control Text Box

Untuk membuat control text box dalam html kita cukup menambahkan tag <input
/> yg disimpan di antara tag <form>...</form>. Contoh:

....
<form>
<label for="nama">Nama:</label>

<input type="text" size="20" name="nama" id="nama"/><br/>


<label for="alamat">Alamat:</label>

<input type="text size="40" name="alamat"


id="alamat"/>
</form>
...

Maka hasilnya akan terlihat seperti gambar di bawah ini:

Tampilan form dapat dibuat lebih rapih dengan menyimpan control form dalam tabel. Contoh:

....
<form>
<table>
<tr>
<td><label for="nama">Nama</label></td>
<td>:<input type="text" size="20" name="nama"/></td>
</tr>
<tr>
<td><label for="alamat">Alamat</label></td>
<td>: <input type="text" size="40" name="alamat"/></td>
</tr>
</table>
</form>
....

Ketika kode tersebut di tes maka tampilan form akan terlihat lebih rapi.

Control Text Area


Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag form.

....
<form>
<label for="msg">Message</label><br/>
<textarea name="msg" cols="20" rows="4"></textarea>
</form>
....

Berikut adalah tampilan dari control text area

Control List Box

Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih jelasnya lihatlah
kode di bawah ini

....
<form>
<label for="program">Program :</label>
<select name="program" id="program">
<option value="">Pilih Program</option>
<option value="Web Arsitektur">Web Arsitektur</option>
<option value="Mastering CMS">Mastering CMS</option>
<option value="Print Design">Print Design</option>
<option value="Multimedia dan Animasi">Multimedia
Animasi</option>
</select>
</form>
....
Berikut adalah bentuk dari control list box...
Jika kita tambahkan atribut size pada tag <select> maka bentuk list box akan berubah seperti
gambar berikut ini:

Control Radio Button

Anda dapat menggunakan tag <input> untuk membuat radio button, dengan type
=radio.
Contoh :
....
<form>
Jenis Kelamin:
<input type="radio" name="jkl" id="pria" value="Pria"/>
<label for="pria">Pria</label>
<input type="radio" name="jkl" id="wanita" value="Wanita"/>
<label for="wanita">Wanita</label>
</form>
....

Berikut adalah bentuk dari radio button.

Control Check Box

Untuk membuat check box sama seperti membuat radio button, hanya atribut type pada tag input
diganti menjadi checkbox, untuk lebih jelasnya lihat kode di bawah ini.

....
....

Jika di jalankan di browser akan tampil seperti gambar di bawah ini:

Control Password Box, Submit dan Reset Button

....

....

Hasilnya

HTML5 Input Types


HTML5 memiliki beberapa jenis type input baru untuk suatu form selain text. Fitur baru ini
memungkinkan kontrol input yang lebih baik dan penggunaan validasi, selain itu juga memudahkan
programmer. Jenis input baru tersebut antara lain :
Input Type : color
Select your favorite color : <input type= "color" name="favcolor">
Input Type : date
Birthday : <input type="date" name="bday">
Input Type : datetime
Birthday ( Tanggal dan waktu ): <input type="datetime" name="bdaytime">
Input Type: datetime-local
Birthday ( Tanggal dan waktu ):
<input type="datetime-local" name="bdaytime">
Input Type : email
Email: <input type="email" name="bdaytime">
Input Type : month
Masukkan Bulan : <input type="month" name="email">
Input Type : number
Masukkan Jumlah : <input type="number" name="jumlah" min="1" max="100">
Input Type : range
<input type="range" name="points" minlength="1" maxlength="10">
Input Type : search
Search Google: <input type="search" name="googlesearch">
Input Type : tel
Telepon : <input type="tel" name="nomortelp">
Input Type : time
Select a Time: <input type="time" name="usr_time">
Input Type : url
Add your homepage: <input type="url" name="homepage">
Input Type : week
Select a week year: <input type="week" name="week_year">

HTML5 Form Attributes


<form> / <input> autocomplete Attribute
<form action="" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form> novalidate Attribute
Data yang diinputkan tidak akan divalidasi ketika di submit
<form action="" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<input> autofocus Attribute


<form action="">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<input> formmethod Attribute
<form action="" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="" value="Submit
using POST">
</form>

<input> min and max Attributes


Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input> multiple Attribute
Select images: <input type="file" name="img" multiple>
<input> required Attribute
Username: <input type="text" name="usrname" required>
Latihan Membuat Form Input Biodata

Latihan_00_formBiodata.html
Selesai

Keep Spirit, Keep Learning

Anda mungkin juga menyukai