Aiya Aiya Wae

Modul
Pemrograman Internet
HYPERTEXT MARKUP LANGUAGE

(HTML )
Virdyra Tasril, S.Kom, M.Kom

- HTML digunakan untuk membuat
document yang bisa di akses melalui web.
- Mengontrol tampilan dari web page dan
contentnya.
- Mempublikasikan document secara online
sehingga bisa di akses dari seluruh dunia.
- Membuat online form yang bisa di gunakan
untuk menangani pendaftaran, transaksi
secara online.
- Menambahkan object-object seperti image,
audio, video dan juga java applet dalam
document
Virdyra Tasril, HTML.
S.Kom, M.Kom Pertemuan 3
Struktur HTML Document
• HTML
Merupakan tag dasar yang mendefenisikan bahwa
dokumen adalah dokumen html.
<html>
..........................
</html>

• HEAD
Merupakan tag berikutnya setelah tag html,
digunakan untuk menuliskan keterangan
tentang dokumen web yang akan ditampilkan
<html>
<head>
.....................
</head>
.....................
</html>

• TITLE
Merupakan tag di dalam head yang digunakan
untuk menuliskan judul dari dokumen html,
yang akan muncul pada caption halaman
browser
<html> jika halaman tersebut diakses.
<head>
<title>Judul Dokumen</title>
</head>
.....................
</html>

• BODY
Merupakan section utama dalam dokumen
web. Pada section ini semua isi dokumen yang
akan ditampilkan di dalam browser harus
dituliskan.
<html>
<head>
</head>
<body>
............Isi Dokumen..........
</body>
</html>

• HEADING
Tag heading (hx) digunakan untuk memformat
heading (judul dan sub judul) dari suatu
halaman web. Hanya ada 6 buah heading yang
<html> html, yaitu (h1) sampai dengan (h6).
dikenal
<head>
</head>
<body>
<h1> Judul 1 </h1>
<h2> Sub Judul 1 </h2>
</body>
</html>
• BREAK
Tag break <br> berfungsi untuk memberikan
baris baru suatu paragraf dalam halaman web.
Tag <br> tidak memerlukan tag penutup break.
<html>
<head>
<title>Break</title>
</head>
<body>
<h1> E-Commerce Book </h1>
<h4> Buku terbaru yang dirilis</h4>
<p>Cerita nya Sukses dikalangan
mahasiswa<br>Buku Cerita Musuh<br>Alasannya
tanya kenapa<br>The walking Dead Volume 14: No
Way Out<br>Lainnya</p>
</body>
</html>
LIST
List item merupakan perintah yang digunakan
dalam HTML untuk membuat daftar atau
mengelompokan kata (list).
• Ordered List (Numbering)
Digunakan untuk membuat daftar dimana
setiap bagiannya memiliki nomor secara
terurut.
Ordered List dimulai dengan tag <ol> dan
diakhiri </ol>. Dan untuk menyatakan
bagiannya digunkan tag <li> dan tidak
• Unordered List (Bullet)
Pada Unordered List tidak dijumpai urutan
dalam suatu daftar. Setiap bagian dari
unordered list ditandai dengan tanda bullet.
Untuk membuat daftar menggunakan
Unordered List digunakan tag awal <ul> dan
tag penutup </ul>. Dan untuk tiap bagiannya
digunakan tag <li> tanpa tag penutup.
Type = default adalah disc

Syntax Ordered List (Numbering) Syntax
Unordered
<html> List (Bullet) <html>
<head> <head>
<title>Order List</title> <title>Order List</title>
</head> </head>
<body> <body>
<h2> Kategori Buku </h2> <h2> Kategori Buku </h2>
<ol> <ul>
<li>Multimedia <li>Multimedia
<li>Database <li>Database
<li>Pemrograman Web <li>Pemrograman Web
<li>Ekonomi <li>Ekonomi
</ol> </ul>
</body> </body>
</html> </html>

• Horizontal Rules(HR)
Horizontal Rule <hr> berfungsi untuk
menampilkan garis horizontal tiga dimensi di
dalam halaman web.
TagAttribut
horizontal Rule tidakDescription
memerlukan elemen
penutup.
Position menetukan posisi dari HR, dengan value : center |
right | left.
Width Untuk menentukan panjang HR default 100%
Size Untuk menentukan tebal dari HR dalam pixel
Noshad Efek bayangan.

Contoh syntax <hr>
<HTML>
<HEAD>
<TITLE>Atribut NOSHADE pada Tag
HR</TITLE>
</HEAD>
<BODY>
<H1>KEBUN PESONA</H1>
<HR SIZE = “10” NOSHADE >
Jl. Solo Km 14<BR>
Surabaya <BR>
Indonesia<BR>
</BODY>
</HTML>

FONT
Dengan tag <font> kita bisa menentukan format
tampilan font dalam dokumen html seperti color, size,
style dan lainnya.
• Ukuran Font
Atribut SIZE digunakan untuk mengatur ukuran font.
Nilai font dimulai dengan nilai 1 untuk ukuran huruf
terkecil dan nilai 7 untuk ukuran paling besar.
• Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf
yang diinginkan. Bisa di isi dengan string jenis Font
yang kita inginkan.
Virdyra Tasril, S.Kom, M.Kom Pertemuan 4

• Warna Font
Atribut COLOR digunakan untuk mengatur
warna font
<HTML>
yang diinginkan.
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Tulisan Normal 123456789<BR>
<FONT COLOR="blue" FACE = "Harrington">Jenis
tulisan Harrington dan warna tulisan
biru</FONT><BR>
<FONT COLOR="green" FACE = "Tahoma"
SIZE="5">Jenis tulisan tahoma warna tulisan hijau
dan ukuran huruf 5</FONT>
</BODY>
</HTML>
• Menambahkan Attribut HTML Images
- Untuk menambahkan Beground Bergambar
<body
background=“nama_gambar.jpg”>
- Untuk menambahkan Gambar di Beground

<img src=“nama_gambar.jpg”>
Memberikan bingkai pada gambar:
<IMG SRC = “nama_gambar.jpg“ HEIGHT =
"150" WIDTH = "150” BORDER="2">

HYPERLINK
Dengan hyperlink ini berbagai halaman web
yang berbeda dapat saling dihubungkan. Untuk
membuat link kita dapat menggunakan perintah
anchor (a)
Untuk membuat link ke dokumen HTML lain
digunakan perintah berikut:
<a href=“nama_dokumen”>Teks pada
browser</a>

Contoh Syntax Hyperlink
<HTML>
<HEAD>
<TITLE>Halaman Utama</TITLE>
</HEAD>
<BODY>
<H1>Halaman Utama</H1>
Silakan klik pada link-link
berikut:<BR>
<A HREF =
"noshade.html">NOSHADE</A><B
R>
</BODY>
</HTML>

<HTML> Bookmark
<HEAD>
<TITLE>Bookmark</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>BUKU</H1>
<B>Daftar Isi:</B><BR>
<A HREF = "#bab1">Bab 1</A><BR>
<A HREF = "#bab2">Bab 2</A><BR>
<HR><A NAME = "#bab1"><H2>BAB
1</H2>
...<BR>
...<BR>
<HR><A NAME = "#bab2"><H2>BAB
2</H2>
...<BR>
...<BR>
</CENTER>
</BODY>
Table
Untuk membuat tabel digunakan tag awal <table> dan
diakhiri dengan tag </table>.
Table memiliki beberapa bagian penting:
1. <caption>....</caption> digunakan untuk
membentuk judul tabel. Judul tabel ini akan terletak
diluar tabel. Bisa dibagian atas atau dibagian bawah
tabel.
2. <th>...</th> digunakan untuk membuat judul kolom.
3. <tr>...</tr> dipakai untuk membentuk baris pada
suatu tabel.
4. <td>...</td> digunakan sebagai tempat menulis data
atau informasi dalam tabel.
<HTML>
Contoh
<HEAD>syntax:
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH><TH>Juml
ah</TH></TR>
<TR><TD>Red
Flash</TD><TD>35.000</TD><TD>2</TD></TR>
<TR><TD>Red
Fire</TD><TD>60.000</TD><TD>5</TD></TR>
<TR><TD>Fannie
Munson</TD><TD>60.000</TD><TD>7</TD></TR>
</TABLE>
</BODY>
Penggunaan Form
Virdyra Tasril, S.Kom, M.Kom Pertemuan 5

Penggunaan
<HTML>
Check Box
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM>
Buah yang Anda sukai:<BR>
<INPUT TYPE = "CHECKBOX" NAME = "anggur"
CHECKED>Anggur<BR>
<INPUT TYPE = "CHECKBOX" NAME =
"jeruk">Jeruk<BR>
<INPUT TYPE = "CHECKBOX" NAME =
"melon">Melon<BR>
</FORM>
</BODY>
</HTML>
Input Data
<HTML>
<HEAD>
<TITLE>Contoh Penggunaan Formulir</TITLE>
</HEAD>
<BODY>
<FORM ACTION = "info.html" METHOD = "POST">
Nama :
<INPUT TYPE = "TEXT" NAME = "nama" SIZE = "20”
MAXLENGTH = "20"><BR>
Hobby :
<INPUT TYPE = "TEXT" NAME = "hobby" SIZE = "25”
MAXLENGTH = "40"><BR>
<INPUT TYPE = "SUBMIT" VALUE = "Kirim">
<INPUT TYPE = "RESET" VALUE = "Kosongkan">
</FORM>
</BODY>
</HTML>

Pemilihan Select
<HTML>
<HEAD>
<TITLE>Contoh SELECT - Model Drop Down</TITLE>
</HEAD>
<BODY>
<FORM>
Olahraga yang paling Anda sukai:<BR>
<SELECT NAME = "olahraga">
<OPTION VALUE = "Sepakbola" SELECTED>Sepak Bola
<OPTION VALUE = "Bulutangkis">Bulutangkis
<OPTION VALUE = "Tenismeja">Tenis Meja
<OPTION VALUE = "Basket">Basket
<OPTION VALUE = "Lain-lain">Lain-lain
</SELECT><BR>
</FORM>
</BODY>
</HTML>

Penggunaan
<HTML> tombol radio dan
<HEAD>
<TITLE>Contoh
komentar
Komentar Anda:<BR>
Penggunaan
<TEXTAREA NAME =
Formulir</TITLE>
"komentar"
</HEAD>
ROWS = "5" COLS =
<BODY>
"40">
<FORM>
</TEXTAREA>
Jenis Kelamin:<BR>
<BR>
<INPUT TYPE =
</FORM>
"RADIO"
</BODY>
NAME = "sex"
</HTML>
CHECKED>Pria<BR>
<INPUT TYPE =
"RADIO"
NAME =
Virdyra "sex">Wanita<BR>
Tasril, S.Kom, M.Kom
Latihan
Buatlah tampilan seperti dibawah ini
menggunakan format HTML dengan title nya
“Latihan 1” dan “Latihan 2”
Hasil “Latihan 1” Hasil “Latihan
2”

Terimakasih

Aiya Aiya Wae

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aiya Aiya Wae

Transféré par

Droits d'auteur :

Formats disponibles

Modul

HYPERTEXT MARKUP LANGUAGE

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom Pertemuan 4

- Untuk menambahkan Gambar di Beground

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom Pertemuan 5

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Virdyra Tasril, S.Kom, M.Kom

Vous aimerez peut-être aussi