HTML
Sub Pokok Bahasan 2
HTML?
Istilah-istilah dalam HTML
Tag Utama dalam struktur dokumen HTML
Contoh HTML sederhana
Penggunaan komentar
Tag-tag dalam <body>
HTML? 3
Contoh:
Windows: Notepad
Linux: gEdit, mcedit, pico, dan vi.
Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Google Chrome, Opera dan Firefox
Linux: Firefox dan Conqueror.
Istilah-istilah dalam HTML: 4
dokumen HTML:
<html>
<!– untuk menyatakan suatu dokumen HTML -->
<head>
<!-- memberikan informasi mengenai dokumen HTML >
<!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META >
</head>
<body>
<!-- menyimpan informasi atau data yang akan ditampilkan dalam
dokumen HTML >
</body>
</html>
Contoh HTML sederhana: 6
<html>
<head>
<title> HTML </title>
</head>
<body>
Kami sedang mulai belajar HTML
</body>
</html>
Penggunaan komentar: 7
Format:
<! -- >
Fungsi:
Memberi nama aplikasi
Mendeskripsikan tujuan pengkodean tertentu di
dalam file
Memberi nama pengarang
Memberi tanggal pembuatan
Memberi nomer versi
Memberi informasi hak cipta
Tag-tag dalam <body>: 8
Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
Tampilan:
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
10
Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Tampilan:
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Gambar </title>
</head>
<body background="../gambar/picture01.jpg">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
Relative Path 11
.
Tampilan:
<h6 [align=”left”|”center”|”right”]> . . . </h6>
Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
<h2 align="center"> Heading 2: Materi HTML </h2>
<h3 align="center"> Heading 3: Materi HTML </h3>
<h4 align="center"> Heading 4: Materi HTML </h4>
<h5 align="center"> Heading 5: Materi HTML </h5>
<h6 align="center"> Heading 6: Materi HTML </h6>
</body>
</html>
Paragraf: 13
Paragraf yang bisa diatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Untuk Tulisan awal paragraph Gunakan :   sesuai yang diinginkan
Script: Tampilan:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center"> Materi HTML </h2>
<p align="right">Kami sedang mulai
belajar Pemrograman Basis Data Berbasis
Web. Pada awal materi kami diperkenalkan
pada konsep dasar Web </p>
<p align="left">Saat ini masuk ke
materi Dasar-dasar HTML </p>
</body>
</html>
Preformatted Text: 14
Ukuran font
<font size=“n”> . . . </font>
Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>
Format dokumen: 18
Bold:
<b> . . .</b>
Emphasized:
<em> . . . </em>
Italic:
<i> . . . </i>
Superscript:
<sup> . . .</sup>
Subscripted:
<sub> . . . </sub>
Struck trough:
<del> . . . </del>
Garis pemisah horisontal: 19
Tampilan:
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Hypertext Link: 22
Format:
<a href=”address” > . . . </a>