Materi Kuliah Web Design
1. DASAR-DASAR HTML
a. Struktur dasar HTML
Secara sederhana sebuah dokumen HTML haru memiliki 2 tag dasar, yaitu :
<html> dan <body>.
Kedua tag diatas merupakn tag tertutup, artinya tag tersebut memiliki pasangan sebagai tag close.
Jika tag hanya memiliki tag open saja, maka tag tersebut dapat dikatakan sebagai tag terbuka.
Akan tetapi sebaiknya jika Anda menuliskan sebuah tag selalu diberikan tag close sebagai penutup tag tersebut. Sehingga semua tag yang digunakan adalah tag tertutup.
Jika disajikan dalam sebuah dokumen HTML maka akan ditulis seperti berikut ini :
<html>
<body>
. . .
</body>
</html>
Tag-tag lain yang melengkapi tag diatas adalah :
§ head
§ title
§ body
b. Head
Merupakan tag kedua setelah <html>. Tag ini digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.
Contoh :
<html>
<head> Halaman HTML
</head>
</html>
c. Title
Merupakan tag di dalam head yang harus dituliskan untuk memberikan judul/informasi pada caption web broser, tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.
Contoh :
<html>
<head> Halaman HTML
<title>First HTML</title>
</head>
</html>
d. Body
Merupakan section (bagian) utama dalam dokumen web. Pada bagian ini semua isi dokumen yang akan ditampilkan di dalam browser harus di tuliskan.
Contoh :
<html>
<head> Halaman HTML
<title>First HTML</title>
</head>
<body>
My First HTML
</body>
</html>
Tag body ini mengandung informasi yang berhubungan dengan properti dasar pada keseluruhan isi dokumen HTML.
Text, Link, Link yang telah dikunjungi, Link yang aktif dan warna latar belakang (background) dokumen serta image yang akan menjadi background didefinisikan pada bagian ini.
Secara lengkap, tag body beserta atribut yang ada di dalamnya disajikan seperti di bawah ini.
<body text="white" link="red" vlink="orange" alink="gray"
bgcolor="black" background="white-tile.gif"></body>
Atribut
|
Keterangan
|
Text
|
warna dari keselurhan teks pada dokumen
|
Link
|
warna teks yang berupa Link
|
alink
|
warna teks yang sedang di klik oleh user
|
vlink
|
warna teks link yang pernah dikunjungi oleh user
|
bgcolor
|
warna latar belakang dokumen
|
background
|
path (jalur relatif atau absolut) menuju ke image yang akan menjadi latar belakang dari dokumen anda yang akan muncul lebih dahulu dari bgcolor.
|
2. MANIPULASI TEKS
Sejauh ini kita telah membahas hal-hal mendasar yang dibutuhkan untuk menciptakan sebuah halaman html kosong dengan kode-kode dasar HTML.
Yang paling mendasar dari melakukan format teks adalah tag Heading (berbeda dengan Tag HEAD - tidak ada kesamaan mendasar di antara keduanya). Selain itu terdapat juga beberapa tag yang lain, yaitu :
§ paragraf
§ bold, italic, underline, superscipt, blink dan subscript
§ line break
§ horizontal line
§ blockquote
§ comment
e. Heading
Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen HTML judul ini disebut heading. Heding tulisan akan ditampilkan dengan huruf yang lebih besar dan tebal. Heading juga dimanfaatkan untuk menunjukkan tingkatan keberartian dari teks yang akan dituliskan.
Terdapat 6 tingkatan heading dalam HTML, dinomori dari 1 sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Dan nomor 6 merupakan heading yang terkecil. Setiap heading dalam dokumen harus diberi tag. Tag yang digunakan adalalh sebagai berikut :
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Atribut yang ada pada tag heading adalah align, yang digunakan untuk mengatur posisi dari heading. Nilai align adalah left, center dan right.
Contoh :
<h1 align=center>Heading 1 di tengah</h1>
<h2 align=right>Heading 2 di kanan</h2>
<h3 align=left>Heading 3 di kiri</h3>
f. Paragraph
Tag ini digunakan untuk memberikan format pada paragraf dalam informasi yang disampaikan. Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraf.
Tag yang digunakan untuk membuat paragraf adalah <p> dan diakhiri dengan </p> (meskipun hal ini tidak harus diberikan – akan tetapi sebaiknya digunakan).
Setiap pergantian paragraf harus dimulai dengan tag <p> ini.
Contoh :
<html>
<title>Paragraf</title>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Pada web browser diperlihatkan setiap paragraf akan ditampilkan dengan meloncat satu baris. Jika teks yang akan ditampilkan melebihi lebar window web browser, maka secara otomatis teks tersebut akan ditampilkan di bawahnya (tanpa meloncati satu baris).
Atribut yang ada pada pargraf adalah align dengan nilai adalah right atau center atau justify.
Contoh :
<html>
<title>Paragraf</title>
</head>
<body>
<p align=center>
Paragraf dapat digunakan dalam HTML ;
Dengan tag paragraph kita dapat mengatur
pembagian alinea dalam dokumen.</p>
</body>
</html>
g. Bold, Italic, Underline, Superscript, Blink Dan Subscript
§ Bold
Digunakan untuk membuat teks dalam dokumen HTML tercetak tebal.
Tag yang digunakan adalah <b> . . . </b>.
§ Italic
Digunakan untuk membuat teks dalam dokumen HTML tercetak miring.
Tag yang digunakan adalah <i> . . . </i>.
§ Underline
Digunakan untuk membuat teks dalam dokumen HTML tercetak dengan garis di bawahnya.
Tag yang digunakan adalah <u> . . . </u>.
§ Contoh Bold, Italic, dan Underline
<html>
<body>
<b>
<h1>
<u>
<i>
<right> Halaman HTML</right>
</i>
</u>
</h1>
</b>
</body>
</html>
§ Blink
Berfungsi untuk membuat teks tampil berkedip-kedip.
Perhatian!, jika anda mengedipkan keseluruhan teks, maka teks akan menjadi susah untuk dibaca!.
Disamping itu, tag blink ini hanya akan berfungsi dengan baik pada web browser Netscape Navigator saja.
Contoh :
<html>
<body>
<blink>
Percobaan
</blink>
</body>
</html>
§ Superscript
Digunakan untuk membuat teks dalam dokumen HTML tercetak lebih kecil dari teks normal dan terletak lebih di atas dari teks yang lain.
Tag yang digunakan adalah <sup> . . . </sup>.
Contoh :
<html>
<head>
<title>Superscript</title>
</head>
<body>
Contoh Penggunaan superscript : X<sup>y</sup>
</body>
</html>
§ Subscript
Digunakan untuk membuat teks dalam dokumen HTML tercetak lebih kecil dari teks normal dan terletak lebih di bawah dari teks yang lain.
Tag yang digunakan adalah <sub> . . . </sub>.
Contoh :
<html>
<head>
<title>Contoh Subscript</title>
</head>
<body>
Contoh Teks yang berisi subscript : X<sub>n+1</sub>
</body>
</html>
h. Line Break
Line break adalah bentuk format dimana penulisan dilakukan untuk menganti baris (bukan mengganti paragraf).
Tag yang digunakan adalah tag <br>. Tag ini merupakan tag terbuka.
Contoh :
<htm>
<head>
<title>Line Break</title>
</head>
<body>
<p>Mengganti <br>baris<br>dalam satu<br>paragraf</p>
</body>
</html>
i. Horizontal Line
Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf.
Tag yang digunakan adalah <hr>. Tag ini merupakan tag terbuka.
Contoh :
<htm>
<head>
<title>Horizontal Line</title>
</head>
<body>
<hr> </hr>
<p>PERPUSTAKAAN</p>
<hr> </HR>
</body>
</html>
j. Blockquote
Tag blockquote umum-nya digunakan untuk teks dalam baris panjang berupa material yang dikutip dan ditujukan untuk memperjelas serta memberi penekanan pada sesuatu point.
Tag blockquote terlihat sebagai berikut :
<blockquote> . . . </blockquote>
Contoh :
<html>
<head>
<title>Contoh Tag Blockquote</title>
</head>
<body>
<blockquote>
<p>
Selama beberapa tahun, Internet dikenal sebagai
sesuatu yang sulit untuk dipelajari. Tetapi dengan kemunculan <i>World Wide Web
(WWW)</i> atau biasa disebut Web, semua pandangan ini menjadi berubah. World
Wide Web menjadikan internet sebagai suatu sistem berbasiskan <i>Graphical User
Interface (GUI)</i> yang semula berbasis text.
</P>
</blockquote>
<P>
Pada awal perkembangannya Internet sebenarnya digunakan oleh pihak militer
Amerika Serikat untuk kepentingannya. Akan tetapi kemudian pada perkembangannya
tidak hanya untuk digunakan oleh pihak militer saja tapi juga oleh umum.
WWW sebenarnya merupakan suatu kumpulan informasi pada beberapa server
komputer yang terhubung satu sama lain dalam jaringan internet.
</P>
</body>
</html>
k. Comment
Tag comment digunakan untuk memberikan komentar terhadap dokumen HTML yang sedang di susun.
Tag comment adalah sebagai berikut:
<!-- . . . -->
Tanda . . . di isikan dengan kalimat komentar.
Browser akan mengabaikan isi apapun yang berada dalam area tag komentar ini. Tag ini berguna untuk memberi kemudahan pada saat anda melakukan perubahan struktur halaman anda.
by: Materi kuliah Web Design (IBU.SARI)
Komentar
Posting Komentar