HTML(HyperText Markup Language)?
¡ Bahasa
yang digunakan untuk menampilkan informasi
pd halaman web.
¡ bahasa
ini menggunakan tanda (markup) untuk menandai perintah-perintahnya
¡ menentukan tampilan suatu teks dan tingkat kepentingan
dari teks tersebut dalam suatu dokumen.
Software yang
diperlukan:
¡ Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit
¡ Web browser untuk
menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, dan
Firefox
Linux: Firefox dan Conqueror.
Istilah-istilah
dalam HTML:
¡ Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan
dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>”
(tag akhir).
<namatag> .....
</namatag>
¡ Element – Jenis-jenis dari tag. Element
terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag
penutup.
Contoh
:
<title>
ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
¡ Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML.
Suatu elemen biasanya akan mempunyai banyak atribut.
Tag Utama
dalam struktur dokumen HTML:
<html>
<!– untuk
menyatakan suatu dokumen HTML -->
<head>
<!-- memberikan
informasi mengenai dokumen HTML >
</head>
<body>
<!-- menyimpan
informasi atau data yang akan ditampilkan dalam dokumen HTML >
</body>
</html>
Contoh HTML
sederhana:
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
Kami sedang mulai
belajar HTML
</body>
</html>
Penggunaan
komentar:
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>:
¡ Untuk warna latar belakang
¡ Untuk heading
¡ Untuk paragraf
¡ Untuk preformatted text
¡ Untuk blockquote
¡ Untuk break
¡ Untuk font
¡ Untuk format dokumen
¡ Untuk garis pemisah horisontal
¡ Untuk list/daftar
¡ Untuk memuat gambar
¡ Untuk hypertext link
¡ Dan lain-lain
Elemen body
<body text="v"
bgcolor="w" background="uri" link="x"
alink="y" vlink="z">
..............
</body>
- Attribute text memberikan warna pada teks,
..............
</body>
- Attribute text memberikan warna pada teks,
-
bgcolor memberikan warna pada latarbelakang dokumen HTML, -
background memberikan latarbelakang dokumen HTML dalam
bentuk gambar
-
link memberikan nilai warna untuk link,
- alink
memberikan warna untuk link yang sedang aktif,
- vlink
memberikan warna untuk link yang telah dikunjungi.
Jika
attribute bgcolor dan background keduanya dispesifikasikan maka attribute
background yang akan digunakan, akan tetapi jika nilai attribute background
(gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan
digunakan.
Membuat
warna latar belakang:
¡ Menggunakan warna
<body text
= #nnnnnn bgcolor=#nnnnnn>
. . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body text="red"
bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Web
</body>
</html>
¡ Menggunakan gambar
<body
background=“nama_file_gambar”> . . . </body>
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>
Heading:
¡ Untuk judul atau sub judul dalam dokumen HTML
<h1
[align=”left”|”center”|”right”]> . . . </h1>
<h2
[align=”left”|”center”|”right”]> . . . </h2>
.
.
<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:
¡ Paragraf yang bisa diatur
perataannya (kiri, tengah, kanan):
<p
[align=”left”|”center”|”right”]> . . . </p>
Script:
<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:
¡ Untuk menampilkan teks sama seperti
yang diketikkan dalam dokumen HTML:
<pre>
. . . </pre>
Blockquote:
¡ Untuk menulis kutipan teks:
<blockquote>
. . . </ blockquote >
<HTML><BODY>
Ini adalah
paragraf normal
<BLOCKQUOTE>
<P>Ini
paragraf yang agak masuk ke dalam.
<P
align="justify">Ini juga contoh paragraf yang agak masuk ke dalam.
Dengan kalimat yang agak panjang, kita lihat bahwa <b>semua
baris</b> dalam paragraf ini letaknya agak masuk ke dalam. <i>Sama
rata sama jauhnya</i>.
</BLOCKQUOTE>
<P>Nah,
paragraf ini kembali normal, karena tag <i>blockquote</i> sudah
berlalu alias sudah ditutup di atas. Ngerti, kan?
</HTML></BODY>
Break:
¡ Untuk menulis teks pada baris
berikutnya:
<br>
Font:
¡ 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:
¡ Bold:
<b> . . .</b>
¡ Italic:
<i> . . . </i>
¡ Superscript:
<sup> . . .</sup>
¡ Subscripted:
<sub> . . . </sub>
¡ Struck trough:
<del> . . . </del>
Garis
pemisah horisontal:
¡ Garis horisontal untuk memisahkan
teks dengan teks lain.
<hr
[align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]>
</hr>
List/Daftar:
¡ Unordered lists <UL>: daftar item dengan tanda
bullet.
<ul
[type=“disc”|”square”|”circle”] > . . . </ul>
¡ Ordered Lists <OL>: untuk membuat daftar
item yang terurut.
<ol
[type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
¡ Definition Lists <DL>: untuk menjelaskan
istilah-istilah.
<dl>
. . . </dl>
<dt>
. . . </dt>
<dd>
. . . [</dd>]
¡ Menu List: menampilkan item-item yang
mempunyai link ke page lain.
<menu> . . . </menu>
¡ Directory List (DIR): untuk daftar item yang pendek
atau kurang dari 20 karakter.
<dir>
. . . </dir>
Memuat
Gambar:
¡ Memuat gambar ke dalam halaman Web
<img
src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Hypertext
Link:
Format:
<a href=”address” > . . .
</a>
¡ Link ke dokumen lain
<a
href=”nama_dokumen” > . . . </a>
¡ Link ke bagian tertentu dalam
dokumen yang sama
<a
href=”#target” > . . . </a>
<a
href=”target” > . . . </a>
¡ Link ke alamat URL atau WebSite
<a
href=”alamat_URL” > . . . </a>
¡ Link ke alamat Email
<a
href=”mailto:alamat_email” > . . . </a>
¡ Link File yang akan didownload
<a
href=”nama_file” > . . . </a>
0 komentar:
Post a Comment