HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen. HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web. Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek. Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html, diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web tool. Struktur Dasar Html Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).
<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat dokumen HTML sederhana. Ikuti langkah-langkah berikut ini:
1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam direktori ini kita akan menyimpan semua file-file latihan kita.
2. Buka Browser, misalnya Internet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah Notepad.
4. Mulai baris paling atas, tuliskan:
Kode Warna
Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:
Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
2. Pengaturan Halaman Web
dan Teks Untuk mendapatkan halaman
web yang baik anda harus melakukan pengaturan terhadap halaman web dan
teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih
jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag
di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks:
a. <body>, digunakan mendefinisikan teks beserta formatnya yang
hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan
berbagai page attribute seperti bgcolor, background, text, link, vlink, alink,
leftmargin dan topmargin.
Background
= digunakan untuk mengatur latar
belakang dengan gambar/image.
Bgcolor
= digunakan untuk mengatur warna
latar belakang dokumen, dengan warna putih sebagai default-nya.
Teks
= digunakan untuk mengatur warna teks
dokumen, dengan warna hitam sebagai warna default.
Link
= Untuk mengatur warna link dokumen
dengan warna biru sebagai warna default
Vlink
= Untuk mengatur warna visited link
dokumen dengan default ungu
Alink = digunakan untuk mengatur warna active link dokumen
dengan default merah.
b. Heading:
<Hn>..</Hn> Digunakan
untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1
- 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan
ukuran terbesar dan <H6> merupakan ukuran terkecil.
contoh1_1.html
<html>
<head>
<title>::: Heading Dokumen HTML:::</title>
</head>
<body bgcolor=#ffffcc text=#003399>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h3>Headng Tingkat 3 </h3>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>
<html>
<head>
<title>::: Heading Dokumen HTML:::</title>
</head>
<body bgcolor=#ffffcc text=#003399>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h3>Headng Tingkat 3 </h3>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>
c.
Paragraph Baru: <P> Digunakan
untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran
</P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk
mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut
ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
d.
Line Break: <BR> Digunakan
untuk pindah ke baris baru.
e.
No Line Break: <NOBR> Bila
digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris
bawahnya bila baris pertama sudah terlalu panjang.
f. Font <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT
mempunyai attribut, yaitu: SIZE, FACE, COLOR.
SIZE:
Digunakan untuk mengatur ukuran font.
Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran
terkecil dan 7 merupakan ukuran terbesar.
FACE:
Digunakan untuk mengatur jenis atau
nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing
dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka
harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya
akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya
kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja
font standar. Tapi bila Anda ingin menggunakan font yang sedikit
"aneh" Anda bisa menggunakan graphic.
COLOR: Digunakan untuk mengatur warna font. Didefinisikan
dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna
(red misalnya).
Contoh :
Contoh :
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>
Contoh lainnya: <font size=2 face="times_new_roman"
color="#0066cc">
g. Base Font:
<BASEFONT> Digunakan untuk
mendefinisikan "default text". Attribut sama dengan attribut FONT.
Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh: <basefont size=2
face="arial,helvetica" color="#ff0000">
Selain tag
dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan
pengaturan teks, yaitu:
Perhatian:
Semua tag di bawah
ini membutuhkan tap penutup.
<B>
Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text
<DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text
<DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE>
Digunakan
untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
B. <HR>, digunakan untuk membuat garis horisontal. Tag ini
mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
Atribut SIZE
digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH
digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan
menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.
contoh1_3.html
<html>
<head>
<title>::: Membuat Garis Horisontal:::</title>
</head>
<body bgcolor=#ffffcc>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkn1-cirebon.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>
SELESAI
contoh1_3.html
<html>
<head>
<title>::: Membuat Garis Horisontal:::</title>
</head>
<body bgcolor=#ffffcc>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkn1-cirebon.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>
SELESAI
0 comments:
Post a Comment