Anda di halaman 1dari 7

HYPERTEXT MARKUP LANGUAGE (HTML)

Rita Hendriani

A. Pengenalan HTML
HTML merupakan bahasa yang digunakan untuk menulis halaman web. Biasanya
mempunyai ekstensi .htm, .html atau .shtml. HTML tersusun atas tag - tag, digunakan
untuk menentukan tampilan dari document HTML yang diterjemahkan oleh browser.
Tag tidak case sensitive, jadi bisa gunakan <HTML> atau <html> keduanya
menghasilkan output yang sama.
Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator,
Opera dan masih banyak yang lainya. Sedangkan Program yang di gunakan untuk
membuat document HTML diantaranya: Ms FrontPage, Dreamweaver, Notepad.
Kerangka dasar dokumen HTML, yang diatur oleh W3 (World Wide Web)
Consurtium, yaitu:
<HTML>
<HEAD>
Deskripsi Dokumen
</HEAD>
<BODY>
Isi Dokumen
</BODY>
</HTML>
Keterangan :
HTML
Setiap document HTML biasanya di awali dan di tutup dengan tag HTML,
yang memberi tahu browser bahwa yang berada di dalam kedua tag tersebut
adalah document HTML.
HEAD
Bagian header dari document HTML berada di antara tag HEAD, di dalam
bagian ini biasanya memuat tag TITLE yang menampilkan judul dari
halaman pada titlenya browser. Header juga memuat tag META yang
biasanya di gunakan untuk menentukan informasi tertentu mengenai
document HTML.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua
yang akan di tampilkan pada web page.
B. Heading
Heading merupakan sekumpulan kata yang menjadi judul atau subjudul dalam
suatu dokumen HTML. Ada enam tingkatan heading.
Latihan : heading.htm

<html>
<head>
<title>Tingkatan Heading</title>
</head>
<body>
<h1>heading tingkat pertama</h1>
<h2>heading tingkat kedua</h2>
<h3>heading tingkat ketiga</h3>
<h4>heading tingkat keempat</h4>
<h5>heading tingkat kelima</h5>
<h6>heading tingkat keenam</h6>
</body>
</html>

C. Paragraf
Untuk membuat paragraf diawali tag <p> dan diakhiri </p>. Atribut ALIGN
digunakan untuk mengatur posisi paragraf. Left untuk meratakan paragraf di kiri, center
untuk meratakan paragraf di posisi tengah horizontal dan right untuk meratakan paragraf di
kanan.
Latihan : paragraf.htm
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p align="right">
Istilah internet merupakan singkatan dari interconnection Networking.
Dan internet bisa diartikan sebagai sebuah jaringan
komputer yang
sangat besar yang terdiri dari jaringan jaringan kecil yang saling
terhubung yang menjangkau seluruh dunia.
</p>
<p align="center">
Internet mempunyai beberapa fasilitas/ kemampuan pokok seperti
World Wide Web,Electronic Mail disingkat e-mail,Telnet,File Transfer

Copyright 2004 www.asep-hs.web.ugm.ac.id

Protocol disingkat FTP, Gopher,Chat Groups/Internet Relay Chat


(IRC),Newsgroup,Mailling List, Melalui fasilitas-fasilitas internet
tersebut dapat dan sering digunakan untuk keperluan riset atau
melakukan hal yang akan menambah pengetahuan dan wawasan kita.
</p>
<p align="left">
Pendorong perkembangan internet adalah daya tarik internet yang
meliputi communication, information retrieval dan information search
(Laudon & Laudon, 2000). Dalam hal daya tarik komunikasi, internet
menawarkan berkomunikasi secara elektronik yang relatif mudah dan
murah. Internet juga memberikan kemungkinan dan kemudahan
untuk mencari dan mengakses berbagai macam informasi khususnya
pemanfaatan internet sebagai media riset.
</p>
</body>
</html>

D. Blockquote
Perintah tag <blockquote> biasa digunakan untuk menulis kutipan teks.
Browser akan menampilkan teks menjorok ke dalam atau menampilkan teks dalam
bentuk huruf miring.
Latihan : blockquote.htm
<html>
<head>
<title>blockquote</title>
</head>
<body>
<h3>Peran Mahasiswa dalam Pemilu 2004</h3>
<blockquote>
Pemilu 2004 adalah salah satu isu yang berada di papan atas saat ini.
Sebagian besar media massa membicarakanya, mulai dari polling
calon presiden sampai manufer manufer para elite politik beserta
janji- janjinya. Tetapi dimanakah keberadaan mahasiswa sebagai
pendobrak itu.

</blockquote>
</body>
</html>

E. Preformatted Text
Preformatted text (PRE) digunakan untuk menampilkan teks sama seperti yang
diketikan dalam dokumen HTML.
Latihan : pre.htm
<html>
<head>
<title> Preformatted Text</title>
</head>
<body>
<pre>
KELOMPOK STUDI MAHASISWA
UNIVERSITAS GADJAH MADA
UNIT KEGIATAN MAHASISWA PENALARAN ILMIAH

DIVISI - DIVISI :
Humas
Teknologi Informasi
Kewirausahaan
PengKajian dan Penelitian
PSDM
</pre>
</body>
</html>

F. Line Break (BR)


Tag line break (BR) digunakan untuk menulis teks pada baris berikutnya. Tag
<BR> mempunyai baris baru tanpa memberi baris kosong.
Latihan : br.htm
<html>
<head>
<title>line Break</title>
</head>
<body>
<p><b>kebiasaan hidup yang bisa mengasah kemampuan menguasai
rasa takut sukses dalam kondisi hidup normal baik di kantor atau di
mana saja, yaitu:</b>
<br>Membiasakan diri dengan keberanian berinisitif
<br>Membiasakan diri dengan berpegang teguh pada pendirian hidup
(to persist) ketika inisiatif bertindak telah kita cetuskan
<br>Membiasakan diri dengan keberanian menaklukkan tantangan
hidup (to conquer challenge) atau memiliki mentalitas I CAN.
<br>Membiasakan diri untuk memperkecil "zona unknown" di
wilayah hidup kita dengan mempelajari pengetahuan (knowledge),
meningkatkan kemampuan (ability) dan menambah keahlian (skill).
<br>Membiasakan diri dengan menambah dukungan eksterna
</body>
</html>

G. Font
Tag <font> digunakan untuk mengatur huruf dokumen HTML. Beberapa atribut
untuk mengatur ukuran huruf, jenis huruf yang digunakan dan warna huruf, yaitu :
1. Ukuran Font
Attribut SIZE digunakan untuk mengatur ukuran font. Nilai dimulai dari 1
untuk ukuran terkecil dan nilai 7 untuk ukuran paling besar.
2. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Dengan
cara mengisi jenis font seperti Arial, Times New Roman, dan sebagainya.
3. Warna Font
Atribut COLOR digunakan untuk mengatur warna font yang diinginkan. Cara
pertama dengan menyebutkan nama warna seperti red, green, dan blue.
Sedangkan cara yang kedua adalah dengan menggunakan nilai RGB (Red
Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk
green, dan 0000FF untuk blue.
Latihan : font.htm
<html>
<head>
<title>font</title>
</head>
<body>
<font size=1>ukuran font yang bernilai 1</font><br>
<font size=2>ukuran font yang bernilai 2</font><br>
<font size=3>ukuran font yang bernilai 3</font><br>
<font size=4>ukuran font yang bernilai 4</font><br>
<font size=5>ukuran font yang bernilai 5</font><br>
<font size=6>ukuran font yang bernilai 6</font><br>
<font size=7>ukuran font yang bernilai 7</font><p>
<font face="arial"> jenis font ini arial<br>
<font face="verdana"> jenis font ini verdana<br>

<font face="Times New Roman"> jenis font ini Times New


Roman<br>
<font face="tahoma">jenis font ini tahoma<p>
<font color="red"> warna teks ini merah<br>
<font color="#00FF00"> warna teks ini hijau<br>
<font color="#0000FF"> warna teks ini biru
</body>
</html>

Anda mungkin juga menyukai