Materi HTML

MATERI HTML
Sebelum kita melangkah lebih jauh ada baiknya Anda tahu apa itu HTML. HTML atau Hypertext
Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari
web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Nah, HTML inilah
yang memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.
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.

VERSI HTML

HTML sekarang sudah mencapai versi 4.0 (saat artikel ini ditulis). Sebelum digunakan, HTML harus
diuji secara ketat oleh suatu badan yang bernama World Wide Web Concortium (W3C). Setiap
penambahan/peningkatan versi, terdapat beberapa tambahan-tambahan tag dan fasilitas yang tidak
dimiliki oleh versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi standar
bagi browser. Bilamana browser ini tidak mendukung versi tertentu, maka browser tersebut tidak
dapat menampilkan format HTML yang kita buat. Oleh karena itu, untuk melihat halaman web yang
diformat dengan HTML versi baru, harus memiliki browser yang sudah mendukung versi HTML
tersebut

VERSI - VERSI HTML

HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa
kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh versi 1.0 ini hanya
terbatas pada heading, paragraf, hypertext, list dan setak tebal atau miring pada teks.
HTML 2.0
Versi ini telah ditambahkan kemampuan menyisipkan form didalamnya, sehingga kita dapat
membuat halaman yang interaktif. Pengunjung dapat mengisi nama, alamat, email dan
sebagainya.
HTML 3.0
Versi ini tidak bertahan lama karena kemudian disempurnakan oleh versi 3.2
HTML 3.2
Pada versi ini telah diperkenalkan teknik peletakan teks pada sekeliling gambar, latar belakang
berupa gambar, cascading style sheet, tabel, frame dan lain sebagainya. Versi ini juga
mendukung Javascript, VBScript dan lain sebagainya.

HTML 4.0
Versi terakhir ini yang resmi dirilis ini telah menunjukkan beberapa kelebihan-kelebihan dari versi
sebelumnya. Perubahan-perubahan ini hampir mencakup semua tag-tag HTML sebelumnya. Di
samping itu pada versi ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON,
PARAM, BUTTON, TBODY, THEAD dan lain sebagainya.

KEKURANGAN DAN KELEBIHAN HTML
Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan dan Kekurangan.
Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML sehingga kita bisa
memaksimalkan pengetahuan dan wawasan kita dalam mengeksplorasi dunia browser.
Kelebihan-kelebihan HTML antara lain:
Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem
operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan
editor karakter ASCII.
Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu
halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak),
poligon (kurva tak beraturan) atau lingkaran digunakan untuk 'jump' ke halaman lain, atau link
ke halaman di luar web yang bersangkutan.
Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau
Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk
menjalankan file-file animasi ini).
Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.

Adapun kekurangan dari HTML ini adalah:
Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus
menggunakan bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi
seperti Flash atau Shockwave.
Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat
berinteraksi dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman
yang dapat menangani hal tersebut, contohnya Perl atau Tcl.

STRUKTUR DASAR HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam
pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak
di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat
tanda "/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE,
ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada
bagian paling atas browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna
teks, warna link, warna visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN &
TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF"
link="#FF0000" vlink="FFFF00" alink="#0000FF">

Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
PENGATURAN TEKS
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan
dalam pengaturan teks :

Headers: <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.
Contoh :
<H2>Tutorial Html</H2>

Hasilnya akan terlihat seperti :

Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P>
tapi juga bisa tidak diberi.

Line Break: <BR> Digunakan untuk pindah ke baris baru.

-No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis
pindah baris bawahnya bila baris pertama sudah terlalu panjang.

Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil
dan 7 merupakan ukuran terbesar.

FACE: 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: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga
langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang
berwarna merah</FONT>

Hasilnya akan terlihat seperti :

Contoh lainnya :
<FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">

>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 di atas, 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>
<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)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan)
<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.

LISTS

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan
dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>

Hasil dari kode di atas adalah:

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :
<UL COMPACT TYPE=square>

Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat
menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :

Untuk TYPE Anda dapat juga menggunakan :

1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>
Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>

Hasil dari kode di atas adalah :

IMAGES

Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh : <IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>

<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan
terdapat garis bawah.

Contoh :
<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="mailto:webmaster@klik-kanan.com">Klik di sini</A> Untuk membuat link pada
alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang
sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain
pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan
menggunakan gambar.

TABEL
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat
membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman
web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>, <TR>, dan
<TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE>
dan </TABLE>

<TABLE>
Terdiri dari atribut :
align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang (background) dari tabel.
border - ukuran lebar border tabel (dalam pixel).
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing - jarak antar cell (dalam pixel).
width - ukuran tabel dalam pixel atau percent.

Contoh :
<TABLE align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2"
width="90%">

<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal : top, middle atau bottom.
Contoh :
<TR align="right" bgcolor="#0000FF" valign=top>

<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
align - perataan
background - image yang digunakan sebagai latar belakang dari kolom.
bgcolor - warna latar belakang
colspan - lihat gambar contoh
height - ukuran tinggi cell dalam pixels.
nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
rowspan - lihat gambar contoh
valign - perataan vertikal :top, middle atau bottom.
width - ukuran kolom dalam pixel atau percen.

Contoh :
<TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200"
nowrap rowspan="2" valign="bottom" width="300">

<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>

<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0000FF"> </td>
<td bgcolor="#FFFF66"> </td>
<td rowspan="2" bgcolor="#FF3366"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#33CC66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFCC99"> </td>
</tr>
</table>

FRAMES

1
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

2
<FRAMESET cols="100,*">
</FRAMESET>

3
<FRAMESET rows="100,*">
</FRAMESET>

4
<FRAMESET rows="*,60">
</FRAMESET>

5
<FRAMESET rows="*,60">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET></FRAMESET>

6
<FRAMESET cols="*,50%">
<FRAMESET rows="15%,15%,70%">

7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">

8
<FRAMESET rows="15%,70%,15%">
<FRAMESET cols="15%,70%,15%">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">

Kumpulan Tag HTML

Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada
browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6> Ukuran font
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Bararti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan) - hanya pada MS IE
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah
http://ayomaju.com
Tutorial HTML lengkap 2

II. tag-tag HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari
document HTML. TAG selalu ditulis sebagai pembuka dan penutup setiap bagian dengan
format penulisan:
<BEGIN TAG> </END TAG> Contoh: Setiap document HTML di awali dan di akhiri dengan tag
HTML <HTML>
. . .
<HTML>
Tag tidak case sensitive, jadi anda bisa gunakan huruf besar (huruf kapital) maupun huruf
kecil atau keduanya dan akan menghasilkan output yang sama. Bentuk dari tag HTML
sebagai berikut: <ELEMENT ATTRIBUTE = value> Element: nama tag
Attribute: atribut dari tag
Value: nilai dari atribut
Contoh:
<BODY BGCOLOR="lavender">
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang
memiliki nilai(value)lavender. Untuk memulai bekerja dengan HTML anda bisa gunakan
editor Note Pad atau editor lainya.
III. Struktur HTML Document
Dokumen HTML bisa di bagi mejadi tiga bagian utama: Yaitu tag HTML, Head, dan Body.
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML> tag
HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document
HTML.
HEAD
Bagian header dari document HTML diapit oleh tag <HEAD></HEAD> di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site.
Browser menyimpan titile sebagai bookmark dan juga untuk keperluan pencarian
(searching) biasanya title di gunakan sebagai keyword.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai document HTML, anda bisa menentukan author name, keywords,
description dan lainnya pada tag META ini. Geo tag juga diletakkan dibagian ini. Contoh
penulisan meta tag seperti dibawah ini: <META name=Author contents=Albri>
Author dari document tersebut adalah Albri. Atau bisa juga memberi atribut http-
equiv yang digunakan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP
header. Contoh:
<META http-equiv="Expires" content="Wed, 7 May 2003 20:30:40 GMT"> yang akan
menciptakan HTTP header :
Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika dokumen di cached, HTTP akan mengetahui kapan untuk mengapdate
dokumen tersebut pada cache.
BODY
Dokumen BODY di gunakan untuk menampilkan text, text link, image link, flash dan semua
yang akan di tampilkan pada web page. Sehingga jika dituliskan secara sederhana dari
bagian lengkap HTML seperti dibawah ini:
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>


IV.Basic HTML Element
Elemen yang pertama kita pelajari adalah Block Level Element. Elemen ini untuk menandai
tingkatan elemen HTML, Block level element yang sering di gunakan :
Heading (H1 sampai dengan H6)
Agar langsung mengerti silahkan copy kode-kode berikut ini dan paste di notepad.
Kemudiansave as dengan nama latihan1.html. Ingat ketikkan .html setelah nama latihan1.
Maksudnya adalah membuat penyimpanan file dalam format HTML.
<html>
<head>
<title>Heading Elements</title>
</head>
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
</html>
Sudah dilihat hasilnya? kalau mau tahu langsung hasilnya silahkan klik DISINI.
Paragraf (P)
Paragraf selalu diapit oleh kode <p></p>. Artikel-artikel saya di blog ini selalu menggunakan
elemen kode ini untuk setiap paragrafnya. Sebenarnya blogger.com tidak menggunakan ini di
editor textnya, tapi saya gunakan karena lebih rapi hasilnya. Karena saya mengetik artikel
dengan frontpage. Agar lebih mengerti tentang element ini silahkan copy kode-kode berikut
ini kemudian paste di notepad, save as seperti sebelumnya, terserah nama filenya apa saja.
<html>
<head>
<title>Formating Paragraf</title>
</head>
<body>
<h3>Tips berjabat tangan</h3>
<p>Berjabat tangan telah menjadi suatu bagian dari
ritual dunia usaha dan bisnis utamanya bisnis didunia nyata.
Kalau bisnis online sepertinya memang tidak perlu
acara jabat tangan segala. Mungkin anda berpikir tidak perlu
dipikirkan, tetapi tidak bagi orang yang sedang berjabat tangan
dengan anda. Sikapnya dalam berjabat tangan menampilkan
sebagian besar kesannya terhadap anda.</p>
<h2>Hati-hati dengan template gratisan</h2>
<p>Para blogger pemula dalam memilih template
seringkali hanya berdasarkan tampilan. Ini sebenarnya
wajar karena template dipilih tentu karena tampilannya
yang menarik dan disukai. Sayangnya ternyata dengan
hanya memperhatikan tampilan tanpa meneliti lebih rinci bisa
menimbulkan masalah dalam SEO. Masalahnya biasanya adalah ada
kesalahan dalam pengaturan CSS. Atau ada pula yang salah
dalam pengurutan load halaman.
</p>
</body>
</html>
Hasilnya seperti ini.


List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang
tidak berurutan (unordered list). List item berurutan menggunakan
kode <ol></ol> sedangkan list item tidak berurutan menggunakan kode <ul></ul>.
Sedangkan rincian datanya menggunakan kode <li></li>. Agar lebih jelas seperti dibawah
ini:
Ordered List (Numbering)
Macam-macam kode dan atributnya seperti dibawah ini:
Tag Atribut Value Description
<ol> type tanpa value
I

i

A

a
angka biasa

upper Roman

lower Roman

uppercase

lowercase
<ol> start n begin number
Agar lebih jelas silahkan copy kode dibawah ini pada notepad kemudian silahkan disimpan
dalam
format HTML.
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
<ol start="1" type="I">
<li>Sunday</li>
<ol type="a">
<li>Introduction to HTML</li>
<li>Creating List</li>
</ol>
<li>Monday</li>
<ol type="A">
<li>Creating table</li>
<li>Inserting Image</li>
</ol>
<li>Tuesday</li>
<ol type="I">
<li>Creating Link</li>
<li>Preparing Website</li>
</ol>
<li>Wednesday</li>
</ol>
</body>
</html>
Nah hasil dari kode diatas seperti dibawah ini:
Shedule for HTML Course
I. Sunday
a. Introduction to HTML
b. Creating List
II. Monday
A. Creating table
B. Inserting Image
Tuesday
. Creating Link
I. Preparing Website
Wednesday
Untuk macam kombinasi atau macam atribut silahkan dicoba-coba sendiri. Sebagai referensi
sebaiknya simpan tabel diatas.


Unordered list
Kode yang digunakan adalah kode <UL></UL>, dan untuk itemnya sama yaitu
kode <LI></LI>. Agar tidak berbelit perhatikan kode-kode dibawah ini:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>
Copy kode diatas dan paste notepad, setelah itu simpan dengan nama unorderedlist.html,
jangan lupa harus diberi .html agar file bukannya disimpan sebagai text biasa tapi disimpan
sebagai file HTML. Kalau sudah maka file yang didapatkan akan seperti dibawah ini:
Sunday
Monday
Tuesday
Wednesday
Sudah tahu kan maksudnya? list item diatas adalah list item standart, biasanya
menggunakan bullet bundar. Jika ingin model lainnya silahkan lihat tabel dibawah ini:
Tag Atribut Value Description
<ul> type square bullet kotak
disk bullet titik
circle bullet lingkaran
Cara penggunaan tabel diatas seperti dibawah ini:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul type="square">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>
Hasilnya akan seperti dibawah ini:
Sunday
Monday
Tuesday
Wednesday

V. Pemformatan Page
Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML. Kodde br sendiri
kepanjangan dari break row, tag ini fungsinya mirip dengan carriage return. Penulisannya bisa
dengan <br>, tapi di blogger biasanya ada masalah dan meminta penulisan kode <br />, jadi
ditutup dengan tanda slash. Bahkan di blogger setiap ganti baris selalu menggunakan kode ini
secara otomatis, khususnya apabila di pengaturannya diatur seperti itu. Kode ini saya pikir mudah
dan sederhana jadi tidak perlu disertai contoh.
Font
Kode ini untuk pemformatan text, dengan tag <FONT> anda bisa menentukan format tampilan font
dalam document HTML seperti color, size, style dan lainya. Perhatikan contoh berikut:
<html>
<head>
<title>Formating Font</title>
</head>
<body>
<font color="#9966FF" size="3">
</font>
<p>
<font face="Courier New, Courier, mono">
Bingung sebenarnya mau saya beri judul apa postingan ini, akhirnya setelah
meditasi dan semedi saya putuskan memberi judul "tutorial HTML lengkap".
Selengkap apa? Insyallah lengkap menurut saya hehehe... Tidak ada yang lengkap
didunia ini, karena memang diciptakan serba banyak kekurangan, tapi postingan
tutorial HTML ini saya buat bertahap dari pengertian dasar sampai contoh-contoh
kode dan pengaplikasiannya.
</font>
</p>
</body>
</html>
Silahkan coba buat halaman seperti diatas dalam format HTML. Kalau tidak tahu caranya baca seri
tutorial ini seri sebelumnya. Hasilnya kira-kira seperti dibawah ini, tapi tidak akan sama persis,
karena hasil dibawah dipengaruhi kode CSS blog ini.


Bingung sebenarnya mau saya beri judul apa
postingan ini, akhirnya setelah meditasi dan
semedi saya putuskan memberi judul tutorial
HTML lengkap. Selengkap apa? Insyallah lengkap
menurut saya hehehe Tidak ada yang lengkap
didunia ini, karena memang diciptakan serba
banyak kekurangan, tapi postingan tutorial HTML
ini saya buat bertahap dari pengertian dasar
sampai contoh-contoh kode dan pengaplikasiannya.
Sudah mengerti penggunaan kode <font>?
Sebagai referensi lihat tabel berikut ini:
Attribute Description
color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal
(#000000 #ffffff)
size Untuk menentukan ukuran dari font 1 7
face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di
baca mulai dari yang paling kiri


Warna dasar (color)
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body,
font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal
number. Perhatikan tabel warna dibawah ini:
Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
Kode hexadecimal diatas adalah warna dasar. Warna-warna lain adalah kombinasi dari kode
diatas. Kalau mau mencari sebuah warna gunakan macromedia dreamweaver agar lebih
mudah.
Align atau perataan
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik
berupa text, object, image, paragraph, division dan lain-lain. Dibawah ini tabel untuk align
atribut.
Value Description
left Rata kiri
right Rata kanan
center Rata tengah
justify Rata kanan maupun kiri
Penggunaa bisa untuk paragraf, span, dll misalnya untuk paragraf maka kodenya seperti
ini:<p align="justify"></p>kode diatas membuat paragraf menjadi rata kanan dan kiri.
Format text
Format text ini mempunya dua jenis kode yaitu Physical Formatting dan Logical Formatting.
Kode kode untuk keduanya berbeda tapi ada yang fungsinya sama.
Physical Formatting
Tag Description
<B> </B> Bold text (tulisan tebal)
<I> </I> Italic text (tulisan miring)
<U> </U> Underline Text (garis bawah)
<BIG> </BIG> Untuk ukuran yang lebih besar dari normal
<SMALL> </SMALL> Untuk ukuran yang lebih kecil dari normal
<STRIKE> </STRIKE> Untuk memberi garis di tengah text (tercoret)
<SUP> </SUP> Superscript text (tulisan lebih keatas)
<SUB> </SUB> Subscript text (tulisan lebih kebawah)
<CENTER> </CENTER> Center document (rata tengah)
Saya pikir anda akan mengerti bagaimana penggunaan dari kode diatas, jika belum silahkan
membaca serial tutorial ini pada edisi sebelumnya.
Logical Formatting
Tag Description
<EM> </EM> Text miring / <I>
<STRONG> </STRONG> Text tebal / <B>
<DEL> </DEL> Mencoret text / <STRIKE>
<INS> </INS> Underline text / <U>
Penggunaan logical formating diatas sama hasillnya dengan Physical Formatting. Silahkan
pilih yang mana.
Quotes / Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi
pendek anda bisa gunakan element Q. Contoh silahkan praktekkan kode-kode dibawah ini:
simpan sebagai file HTML.
<html>
<head>
</head>
<body>
Setting Up Web Server
</font>
<p>
To run web applications,you need a web server.
A web server is software that serves files in response
to requests from web browsers.
<blockquote>
A web server is sometimes called an HTTP server.
Common web servers include IIS,
Netscape Enterprise Server, iPlanet Web Server,
and Apache HTTP Server.
</blockquote>
If youre not using a web hosting service,
choose a web server and install it on your local computer
or on a remote computer
</p>
</body>
</html>Hasilnya akan seperti dibawah ini:

Setting Up Web Server
To run web applications,you need a web
server.
A web server is software that serves files in
response
to requests from web browsers.
A web server is sometimes called an HTTP server.
Common web servers include IIS,
Netscape Enterprise Server, iPlanet Web Server,
and Apache HTTP Server.
If youre not using a web hosting
service,
choose a web server and
install it on your local computer
or on a remote computer
Nah kode blockquote berfungsi membuat paragraf menjorok kedalam.


Preformatted text
Tag preformatted text <PRE> digunakan untuk menampilkan text sesuai dengan format
aslinya. Agar langsung dimengerti dengan mudah maka sebaiknya langsung praktek dengan
contoh dibawah ini:
<html>
<head>
</head>
<body>
Coba fungsi tag PRE
</font>
<p>
<pre>
Mepet kiri
Agak menjorok
Lebih menjorok lagi
Sangat menjorok
</pre>
</p>
</body>
</html>
Hasilnya silahkan dilihat. Eh iya buat saja filenya dengan notepad. Agar langsung mengerti
silahkan copy kode-kode diatas dan paste di notepad. Kemudian save as dengan
namalatihan9.html. Ingat ketikkan .html setelah nama latihan9. Maksudnya adalah membuat
penyimpanan file dalam format HTML. Lalu buka dengan browser (firefox atau IE, atau lainnya).
Agar mengerti perbedaan antara diberi kode <PRE> dan tidak, maka buat dua file HTML dan yang
satunya buang kode <PRE> yang saya warnai orange diatas.
Untuk apa penggunaan yang tepat untuk kode ini? adalah untuk menulis kode-kode agar terlihat
seperti penulisan kode, aduh kok mbulet ya? pokoknya biasanya saya menggunakan kode ini jika
menuliskan kode HTMT. Jika penasaran lihat source halaman ini. Karena kode-kode diatas juga
diapit oleh kode <PRE>.
Grouping element
Grouping element adalah mengelompokkan sebuah elemen HTML. Kode yang digunakan biasanya
Tag DIV dan SPAN. Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element
HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-
level content.
Agar lebih mengerti silahkan buat file HTML dengan notepad dari kode dibawah ini:
<html>
<head>
<title>Div dan Span</title>
</head>
<body>
<div>
Divisi 1
<p>
Tag DIV digunakan untuk mengelompokkan group
element biasanya untuk block-level element.
</p>
</div>
<div align="right">
Divisi 2
<p>
Ini didalam divisi kedua.
di tulis dengan alignment kanan.
</p>
</div>
<span style="font-size:18px; color:#FF0000">
baris ini dalam span dengan warna merah.
</span>
</body>
</html>
Hasilnya kira-kira seperti dibawah ini, tapi bisa beda karena tampilan dibawah telah
dipengaruhi CSS blog ini.
Divisi 1
Tag DIV digunakan untuk mengelompokkan group
element biasanya untuk block-level element.
Divisi 2
Ini didalam divisi kedua.
di tulis dengan alignment kanan.

baris ini dalam span dengan warna merah.


Tag <TABLE> digunakan untuk membuat tabel dalam document HTML,bagian pokok dari tabel
adalah cell (ingat cell di microsoft excel?) yang didefinisikan dengan menggunakan tag <TD>.
Langsung saja pada contoh halaman HTML untuk tabel sederhana sekali:
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table border="1">
<td>Tabel dengan single cell</td>
</table>
</body>
</html>
Hasil dari kode diatas seperti ini:
Tabel dengan single cell
Anda juga bisa menambahkan beberapa cell untuk membuat satu baris cell.
<html>
<head>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
cell 1 cell 2 cell 3 cell 4
Berikutnya jika anda ingin membuat beberapa baris cell dalam tabel gunakan tag <TR>.
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>
cell 1a cell 1b cell 1c
Anda juga bisa memberi caption (judul tabel) pada table dengan menambahkan tag berikut:
<caption>Judul tabel</caption>
Jika diterapkan pada kode diatas maka kode diletakkan sebagai berikut:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>
Dan hasilnya seperti ini:
Judul tabel
Menambahkan Heading cell
Untuk menambahkan heading pada tabel tambahkan tag (warna orange) berikut pada table
yang sudah di buat.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>
Hasilnya seperti dibawah ini:
Judul tabel
Header 1 Header 2 Header 3
Pemformatan tabel
Untuk memformat perataan text di dalam tabel anda bisa gunakan attribute Align dan Valign
(vertical Alignment). Dibawah ini atribut dan value-nya.
Atribute Value
Align Center | justify | left | right
Valign BASELINE | TOP | BOTTOM | MIDDLE
Contoh:
<table border="1">
<tr align="center" valign="baseline">
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr align="center" valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
Hasilnya seperti dibawah ini:
Anda juga bisa menambahkan attribute cellspacing untuk memberi spasi antar sel
dancellpadding untuk spasi dari border ke text dalam cell.
Merge cell
Merge cell adalah menggabungkan dua atau lebih kolom atau baris menjadi satu. Belum
ngerti? OK teruskan saja semoga nanti juga akan mengerti sendiri. Tag <TD> memiliki
atributcolspan untuk merge column dan rowspan untuk merge baris. Agar lebih jelas
langsung saja ke contoh:
Contoh Merge Column:
<html>
<head>
</head>
<body>
<table bgcolor="#F5F5F5" width="62%" border="1" cellpadding="0">
<tr>
<td colspan="3" align="center">Kuartal 1</td>
<td colspan="3" align="center">Kuartal 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>Mei</td>
<td>Jun</td>
</tr>
<tr>
<td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</tr>
<tr>
<td>290</td>
<td>5050</td>
<td>2300</td>
<td>100</td>
<td>270</td>
<td>300</td>
</tr>
</table>
</body>
</html>
Dibawah ini hasil dari kode diatas.
Kuartal 1 Kuartal 2
Jan Feb Mar Apr Mei Jun
100 5000 200 1500 2500 1750
290 5050 2300 100 270 300
Contoh Merge Row (baris):
<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table bgcolor="#F5F5F5" width="75%" border="1"
cellpadding="0">
<tr>
<td></td>
<td></td>
<td>Divisi A</td>
<td>Divisi B</td>
</tr>
<tr>
<td rowspan="3">Kuartal 1</td>
<td>Jan</td>
<td>1000</td>
<td>12000</td>
</tr>
<tr>
<td>Feb</td>
<td>12500</td>
<td>1345</td>
</tr>
<tr>
<td>Mar</td>
<td>78090</td>
<td>71080</td>
</tr>
</table>
</body>
</html>
Dibawah ini hasil dari kode diatas.
cellpadding="0">

Divisi A Divisi B
Kuartal 1
Jan 1000 12000
Feb 12500 1345
Mar 78090 71080


Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan dalam
dokumen HTML yaitu:
GIF (Graphical Interchange Format) (.GIF)
JPEG (Joint Photographic Expert Image) (.JPG)
PNG (Portable Network Graphics) (.PNG)
Insert Image ke Dokumen
Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya:
<IMG SRC="URL" />
URL bisa diisi dengan alamat absolute maupun alamat relatif (untuk penjelasan alamat
silahkan baca artikel tutorial HTML lengkap 10). Untuk ngeblog di blogspot, maka biasanya
menggunakan alamat absolute. Contoh memasukkan gambar logo tutorial HTML
lengkapseperti kode dibawah ini:
<img src="http://ateon.fs.googlepages.com/Tutorial_HTML_Lengkap.gif" />hasil
gambarnya seperti dibawah ini:

Saya rasa semua sudah tahu masalah ini, saya akan tuliskan atribute berkaitan dengan align
untuk image, lihat tabel dibawah ini:
Attribute Value Description
Align
top | bottom | middle digunakan untuk menentukan posisi image terhadap text
center | left | right untuk menentukan posisi image di dokumen
Silahkan mencoba sendiri untuk masing-masing attribute diatas.
Image Map
Anda bisa gunakan image yang ada pada website untuk membuat image map. Image
mapyaitu suatu area pada image yang bisa kita beri hyperlink, area ini biasanya disebut hot
spots. Coordinat dari hotspot ditentukan menggunakan bidang geometry seperti rectangle,
polygon dan lainya.
Shape Description
Default Semua area image
Rect Area kotak tertentu
Circle Area lingkaran tertentu
Poly Area polygon
Koordinat dari object relatif terhadap pojok kiri atas image seperti dibawah ini:
Coordinate Value
Rect Left-x, top-y, right-x, bottom-y
Circle CENTER-X, CENTER-Y, RADIUS
Poly X1, Y1, X2, Y2, XN, YN
Agar lebih jelas saya contohkan pemakaian untuk shape rect pada gambar dibawah ini:

Perhatikan gambar diatas, coba anda klik dibagian logo, kemudian anda klik pada
tulisanTutorial HTML Lengkap, terakhir coba klik pada tulisan ateonsoft.com. Walaupun 1
gambar tapi bisa digunakan untuk link-link yang berbeda. Ini bisa digunakan untuk
memberikan link pada sebuah gambar yang memiliki bagian-bagian gambar yang unik. Atau
jika anda memiliki gambar kotak menu, anda bisa memberi link pada masing-masing kotak.
Kode untuk membuat gambar diatas seperti dibawah ini:
<img src="http://ateon.fs.googlepages.com/Tutorial_HTML_Lengkap.gif" border="0"
width="216" height="53" usemap="#albri" />
<map name="albri">
<area shape="rect" coords="0,0,43,43" href="http://www.ateonsoft.com/search"
target="_blank" alt="kotak link">
<area shape="rect" coords="47,30,159,44" href="http://www.ateonsoft.com/"
target="_blank" alt="kotak link">
<area shape="rect" coords="47,6,216,25"
href="http://www.ateonsoft.com/search/label/HTML" target="_blank" alt="kotak
link">
</map>
Contoh penggunaan shape circle pada menu gambar seperti dibawah ini:

Coba anda klik masing-masing lingkaran menu diatas, meski satu gambar tapi bisa
menampung banyak link, dan bidang link-nya juga berbentuk lingkaran, coba saja anda sorot
diluar area lingkaran memutar, tidak ada link-nya kan? Dengan design gambar yang bagus
maka menu akan semakin bagus. Gambar diatas jelek jadi kurang bagus hehe..
Kode untuk membuat menu diatas seperti dibawah ini:
<img src="http://ateon.fs.googlepages.com/MenuGambarMap.png" border="0"
width="400" height="200" usemap="#albri2" />
<map name="albri2">
<area shape="circle" coords="58,59,36"
href="http://www.ateonsoft.com/2008/11/jurus-seo-bangkit-dari-kubur.html"
target="_blank" alt="jurus SEO bangkit dari kubur">
href="http://www.ateonsoft.com/2008/10/pasang-widget-google-translate.html"
target="_blank" alt="Widget google translate">
href="http://www.ateonsoft.com/2008/10/pasang-widget-top-artikel.html"
target="_blank" alt="Widget Top Artikel">
href="http://www.ateonsoft.com/2008/10/pasang-widget-top-komentator.html"
target="_blank" alt="Widget Top Comenters">
<area shape="rect" coords="262,174,374,188" href="http://www.ateonsoft.com/"
target="_blank" alt="ateonsoft.com">
</map>
Membuat menu seperti diatas tentu sulit tanpa sebuah tools. Saya membuatnya
menggunakan adobe photoshop untuk membuat design gambarnya dan
menggunakanmacromedia dreamweaver untuk membuat kode. Pembuatan kode akan
menjadi mudah jika dalam mode visual. Tampilan pembuatan kode dalam mode visual di
macromedia dreamweaver seperti dibawah ini:

Sampai sini dulu tutorialnya, disambung lagi pada tutorial HTML lengkap selanjutnya
insyaAllah. selamat mencoba kode-kode diatas.

<! >
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan
terlihat pada browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
<embed> Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1>
<h6>
Ukuran font
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Bararti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau an animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol>
and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan) hanya pada MS IE
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah

Css
Artikel CSS (Cascading Stylesheet)
Home
o CSS (Cascading Stylesheet)
Belajar CSS, bagaimana CSS dapat merubah tampilan website
Belajar CSS, bagaimana CSS dapat merubah tampilan website
Oct 09 2007
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 69293 kali
Langsung lihat komentar
Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin
mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu,
tetapi jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat
dilakukan dengan mudah.
Pertama-tama kita kenalan dulu dengan CSS. CSS merupakan kependekan dari Cascading
Style Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama
HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya
(CSS). Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika
kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file
CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium).
CSS dapat dipasang pada dikumen HTML yang telah jadi.
Memasang CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file
CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head
HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak
direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena
lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS.
Langsung saja kita coba kode berikut ini:
Tanpa CSS:

<html>

<head>

<title>Belajar CSS</title>

</head>

<body>

<h1><font face="Verdana">Belajar CSS</font></h1>

</body>

</html>
Jika kita menggunakan Internal CSS, maka kodenya akan menjadi:

<html>

<head>


<style type="text/css">

h1 { font-family: verdana; }

</style>

</head>

<body>

<h1>Belajar CSS</h1>

</body>

</html>
Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat
file dan simpan dengan nama style.css dan isikan kode berikut:

h1 { font-family: verdana; }
Sekarang untuk kode HTML tulislah kode berikut ini dan simpan dengan nama coba.html:
<html>

<head>


<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Belajar CSS</h1>

</body>

</html>
Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang
diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik
external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah
isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada
bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.
Apapun yang terjadi, berusahalah untuk selalu menggunakan External CSS dengan memisahkan file CSS
dengan file HTML nya
CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan deklarasi yang
berada diantara kurung kurawal {font-family: verdana}. Didalam deklarasi juga
terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value dalam
hal ini verdana. Dalam contoh diatas hanya mengubah sebuah tag yaitu
tag <h1> menjadi teks dimana jenis hurufnya menjadi verdana. Kita dapat
mengkombinasikan berbagai macam style menjadi satu. Kita akan segera mempelajarinya.
Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan
simpan dengan nama style.css:

.title {

font-size: 13px;

color: #6095d0;

font-family: Arial, Helvetica, sans-serif;

font-weight:bold;

}

.thank {

font-size: 11px;

color: #000000;

font-family: Georgia, "Times New Roman", Times, serif;

}
p {

font-size: 12px;

color: #000000;

font-family: verdana;

}
Sekarang tulis kode HTML ini dan simpan dengan nama coba.html:

<html>

<head>


<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<font class="title">Halo dunia</font>

<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>

<font class="thank">Terimakasih</font>

</body>

</html>
Hasil:

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk
memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan
demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti
font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda
sudah paham kegunaan CSS.
CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan
semuanya, saya hanya akan menerangkan yang penting-penting saja.
Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS.
Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis
huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip
dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan
hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling
spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser
akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif
font</h1>
Jika anda ingin menampilkan jenis huruf sans-serif gunakan kode berikut:

body {Arial, Verdana, Geneva, Helvetica, sans-serif}
Jika ingin menggunakan jenis huruf serif, gunakan kode berikut:

body {Times New Roman, Times, Georgia, serif}
Untuk jenis huruf untuk kode program dapat anda gunakan kode berikut:

body {Courier New, Courier, monospace}
Scrollbar
Dengan menggunakan CSS anda juga dapat mengubah warna pada scrollbar yang terdapat
dikanan browser. CSS memiliki 8 properties untuk mengubah warna pada scrollbar
yaitu:scrollbar-arrow-color, scrollbar-basecolor, scrollbar-face-
color,scrollbar-shadow-color, scrollbar-darkshadow-
color, scrollbar-3dlight-color, scrollbar-highlight-
color dan scrollbartrack-color. Properties-properties ini mengatur warna untuk
setiap bagian dari scrollbar.

Coba kode berikut ini:

body {

scrollbar-face-color: #ffffff;

scrollbar-highlight-color: #8b98b7;

scrollbar-shadow-color: #8b98b7;

scrollbar-3dlight-color: #8b98b7;

scrollbar-arrow-color: #8b98b7;

scrollbar-track-color: #ffffff;

scrollbar-darkshadow-color: #8b98b7;

scrollbar-base-color: #ffffff;

}
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link,
menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna
biru tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:

a.link1:link {

font-weight: bold;

font-size: 12px;

color: #C87C28;

font-family: Times New Roman;

text-decoration: none;

}

a.link1:visited {

font-weight: bold;

font-size: 12px;

color: #CC6600;



}

a.link1:hover {

font-weight: bold;

font-size: 12px;

color: #C87C28;


text-decoration: underline

}

a.link1:active {

font-weight: bold;

font-size: 12px;

color: #C87C28;



}

a.link2:link {

font-weight: bold;

font-size: 12px;

color: #663300;


text-decoration: underline;

}

a.link2:visited {

font-weight: bold;

font-size: 12px;

color: #800000;



}

a.link2:hover {

font-weight: bold;

font-size: 12px;

color: #ff6600;


text-decoration: underline overline;

}

a.link2:active {

font-weight: bold;

font-size: 12px;

color: #ff6600;


text-decoration: underline;

}
Sekarang untuk kode HTML nya cobalah seperti ini:

Kunjungi <a href="http://www.dhimasronggobramantyo.com"
class="link1">dhimasronggobramantyo.com</a> atau

<a href="http://www.google.com" class="link2">google.com </a>
Maka akan menghasilkan:
Kunjungi dhimasronggobramantyo.com atau google.com
Pada umumnya warna link untuk halaman web yang telah dikunjungi berbeda dengan yang
belum dikunjungi. CSS dapat membedakannya dengan yang disebut pseudo-
class ':link',':hover', ':active' dan ':visited' untuk membedakannya:
:link pseudo-class merupakan link yang belum dikunjungi.
:visited pseudo-class merupakan link yang telah dikunjungi.
:hover pseudo-class applies merupakan link apabila pointer mouse melewati sebuah link.
Itulah semua dasar CSS, semakin dalam anda mempelajari CSS maka anda akan
menemukan hal-hal menarik lainnya. Selamat mencoba.
4 Browser utama Internet Explorer, Firefox, Safari dan Opera memiliki cara sendiri dalam
merepresentasikan CSS. Karena itu pastikan tampilan CSS website anda terlihat sama disemua browser
tersebut. Bahkan antara IE 5, 6 dan 7 sudah berbeda-beda. Jadi tantangan bagi anda adalah membuat
halaman website anda tampak sama disemua browser tanpa terkecuali.

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property,
1 value.
Format penulisan kalimat CSS:
s e l e c t o r { p r o p e r t y : v a l u e }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h 1 { c o l o r : r e d }
Contoh di atas menunjukkan
S e l e c t o r : h 1
P r o p e r t y : c o l o r
V a l u e : r e d
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke
warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma.
Misalkan anda mau mengatur agar tag h1, h2 dan h3semua menggunakan warna merah, maka kode CSS
nya menjadi:
h 1 , h 2 , h 3 { c o l o r : r e d }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h 1 , h 2 , h 3 { c o l o r : r e d ; f o n t - f a mi l y : a r i a l ; f o n t - s i z e : 1 5 0 % ; }
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warnamerah, dengan type font arial,
dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan
values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h 1 , h 2 , h 3 {
c o l o r : r e d ;
f o n t - f a mi l y : a r i a l ;
f o n t - s i z e : 1 5 0 % ;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan
mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan
pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang
berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri
anda.
/ * T u l i s k o m e n t a r a n d a d i s i n i * /
p
{
t e x t - a l i g n : j u s t i f y ;
/ * T u l i s k o m e n t a r a n d a d i s i n i * /
c o l o r : b l u e ;
f o n t - f a m i l y : a r i a l ;
}

Macam-macam syntax HTML
Kali ini saya kembali posting tentang Blogger, yaitu dasar-dasar HLML. Jadi, buat yang nyarimacam
atau jenis syntax HTML (tag HTML), nih saya kasih. Ini diambil langsung dari websiteHTML Tags /
Codes / Web Page Design.

HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it
into your web page.

Tag Name Code Example Browser View

Nothing will show (Tip)
<a - anchor
<a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
<body>
body of
HTML
document
<body>The content of your HTML page</body>
Contents of your web
page (Tip)
<br> line break
The contents of your page<br>The contents of
your page
The contents of your
web page
The contents of your
web page
<center> center <center>This will center your contents</center>
This will center your
contents
<dd>
definition
descriptio
n
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dl>
definition
list
<dl>
</dl>

Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dt>
definition
term
<dl>
</dl>

Definition Term
Definition of the
term
Definition Term
Definition of the
term
<em> emphasis
This is an <em>Example</em> of using
the emphasis tag
This is an Example of
using the emphasis tag
<embed>
embed
object
<embed src="yourfile.mid" width="100%"
height="60" align="center">

(Tip)
<embed>
embed
object
<embed src="yourfile.mid" autostart="true"
hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"

Music will begin playing
loop="1"></noembed> when your page is
loaded and will only play
one time. A control
panel will be displayed
to enable your visitors to
stop the music.
<font> font <font face="Times New Roman">Example</font> Example (Tip)
<font> font
<font face="Times New Roman"
size="4">Example</font>
Example (Tip)
<font> font
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
Example (Tip)
<form> form
<form action="mailto:you@yourdomain.com">
Name: <input name="Name" value=""
size="10"><br>
Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>
Name: (Tip)
Email:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
heading 1
heading 2
heading 3
heading 4
heading 5
heading 6
<h1>Heading 1 Example</h1>

<head>
heading of
HTML
document
<head>Contains elements describing the
document</head>
Nothing will show
<hr>
horizontal
rule
<hr />

page (Tip)

page
<hr>
horizontal
<hr width="50%" size="3" />
rule page

page
<hr>
horizontal
rule
<hr width="50%" size="3" noshade />
page

page
<hr>
(Internet
Explorer)
horizontal
rule
<hr width="75%" color="#ff0000" size="4" />
page

page
<hr>
(Internet
Explorer)
horizontal
rule
<hr width="25%" color="#6699ff" size="6" />
page

page
<html>
hypertext
markup
language
<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>
page
<i> italic <i>Example</i> Example
<img> image
<img src="Earth.gif" width="41" height="41"
border="0" alt="text describing the image" />
(Tip)
<input> input field
Example 1:

Example 1: (Tip)

<form method=post action="/cgi-
bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

<input>
(Internet
Explorer)
input field
Example 2:

bin/example.cgi">
<input type="text" style="color: #ffffff; font-
family: Verdana; font-weight: bold; font-size:
12px; background-color: #72a4d2;" size="10"
maxlength="30">
</form>
Example 2: (Tip)

<input> input field
Example 3:

bin/example.cgi">
<table border="0" cellspacing="0"
cellpadding="2"><tr><td
bgcolor="#8463ff"><input type="text" size="10"
maxlength="30"></td><td bgcolor="#8463ff"
valign="Middle"> <input type="image"
name="submit" src="yourimage.gif"></td></tr>
</table>
</form>
Example 3: (Tip)

<input> input field
Example 4:

bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments"
rows=3 cols=20 maxlength=100></textarea><br>
<input type="Reset" value="Clear">
</form>
Example 4: (Tip)

<input> input field
Example 5:


bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>

Example 5: Tip)

Select an option:

<input> input field
Example 6:

bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked>
Option 2
<input type="radio" name="option"> Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox" name="selection">
Selection 1
<input type="checkbox" name="selection"
checked> Selection 2
<input type="checkbox"
name="selection">Selection 3
</form>
Example 6: (Tip)

Select an option:
Option 1
Option 2
Option 3

Select an option:
Selection 1
Selection 2
Selection 3

<li> list item
Example 1:

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>

Example 2:
Example 1: (Tip)

List item 1
o List item 2
List item 3

Example 2:
i.List item 1

<ol type="i">
<li>List item 1</li>
</ol>
ii.List item 2
iii.List item 3
iv.List item 4
<link> link
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<marquee
>
(Internet
Explorer)
scrolling
text
<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">Example
Marquee</marquee>
Example Marquee (Tip)
<menu> menu
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
List item 1
o List item 2
List item 3
<meta> meta
<meta name="Description" content="Description
of your site">
<meta name="keywords" content="keywords
describing your site">
<meta> meta
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/
">
<meta> meta
<meta http-equiv="Pragma" content="no-
cache">
<meta> meta <meta name="rating" content="General"> Nothing will show (Tip)
<meta> meta <meta name="robots" content="all"> Nothing will show (Tip)
<meta> meta
<meta name="robots"
content="noindex,follow">
<ol>
ordered Numbered
Numbered
list
<ol>
</ol>

Numbered Special Start

<ol start="5">
</ol>

Lowercase Letters <ol type="a">
</ol>

Capital Letters
<ol type="A">
</ol>

Capital Letters Special Start
<ol type="A" start="3">
</ol>

Lowercase Roman Numerals
<ol type="i">
1. List item
1
2. List item
2
3. List item
3
4. List item
4
Numbered Special Start
5. List item
1
6. List item
2
7. List item
3
8. List item
4
Lowercase Letters
a. List item
1
b. List item
2
c. List item
3
d. List item
4
Capital Letters
A. List item
1
B. List item
2
C. List item
3
D. List item
4
Capital Letters Special
Start
C. List item
1
D. List item
2
E. List item
</ol>

Capital Roman Numerals
<ol type="I">
</ol>

Capital Roman Numerals Special Start
<ol type="I" start="7">
</ol>
3
F. List item
4
Lowercase Roman
Numerals
i.List item 1
ii.List item 2
iii.List item 3
iv.List item 4
Capital Roman
Numerals
I.List item 1
II.List item 2
III.List item 3
IV.List item 4
Capital Roman
Numerals Special Start
VII.List item 1
VIII.List item 2
IX.List item 3
X.List item 4
<option>
listbox
option
bin/example.cgi">
<center>
Select an option:
<select>
<option selected>option 2</option>
</select><br>
</center>
</form>

Select an option: (Tip)

<p> paragraph
This is an example displaying the use of the
paragraph tag. <p> This will create a line break
and a space between lines.

Attributes:
This is an example
displaying the use of the
paragraph tag.
This will create a line

<p align="left">
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
<p align="center">
Example 3:<br>
<br>
break and a space
between lines.

Attributes:
Example 1:

This is an example
displaying the use
of the paragraph tag.
Example 2:

This is an example
displaying the use
Example 3:

This is an example
displaying the use
<small>
small
(text)
<small>Example</small> Example (Tip)
<strike>
deleted
text
<strike>Example</strike> Example
<strong>
strong
emphasis
<strong>Example</strong> Example
<table> table
Example 1:

<table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699"
Example 1: (Tip)
Column 1 Column 2

Example 2: (Tip)
Column 1 Column 2

Example 3: (Tip)
cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
Column 1 Column 2
Row 2 Row 2

<td> table data
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1 Column 2

<th>
table
header
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
Colum
n 1
Colum
n 2
Colum
n 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4

<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
<title>
document
title
<title>Title of your HTML page</title>
Title of your web page
will be viewable in the
title bar. (Tip)
<tr> table row
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1 Column 2

<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
<ul>
unordered
list
Example 1:<br>
<br>
<ul>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<ul type="circle">
</ul>
</ul>
Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2
List item
3
List item
4

PELAJARAN CSS
MENGAWALI DENGAN HTML + CSS
1. HTML
2. Menambahkan warna
3. Menambahkan huruf/fonta
4. Sebuah batang navigasi
5. Memberi style pada link
6. Garis horizontal
7. CSS Eksternal
Bacaan lebih lanjut
Pelanjaran singkat ini ditujukan untuk orang yang ingin mulai
menggunakan CSS dan sebelumnya tidak pernah menulis sebuat syle sheet.
Pelajaran ini tidak menjelaskan benyak mengenai CSS. Hal ini hanya
menjelaskan bagaimana membuat sebuah file HTML, sebuah file CSS dan
bagaimana membuat keduanya berkerja sama. Setelah itu, anda dapat
membaca beberapa pelajaran lain untuk menambah lebih banyak lagi fitur
kedalam file HTML dan CSS. Atau anda dapat beralih menggunakan
sebuah editor HTML atau CSS khusus yang dapat membantu anda
membuat situs situs yang kompleks.
Di akhir pelajaran ini, anda akan selesai membuat sebuah file HTML yang
terlihat sebagai berikut:
Hasil halaman HTML, dengan warna dan tata letak, seluruhnya menggunakan CSS.
Sebagai catatan saya tidak menganggap HTML ini indah
Bagian bagian yang tampak seperti ini adalah tidak wajib. Hal tersebut mengandung penjelasan
lebih lanjut mengenai kode-kode HTML dan CSS yang terdapat dalam contoh. Tanda perhatian!
diawal menandakan bahwa ini adalah materi yang lebih sulit dari teks yang lain.
LANGKAH 1: MENULIS HTML
Untuk pelajaran, saya menyarankan anda untuk menggunakan alat yang
sangat sederhana. Seperti, Notepad (bila menggunakan Windows), TextEdit
(untuk Mac) atau KEdit (bila menggunakan KDE) dapat berkerja dengan
baik. Setelah anda mengerti prinsipnya, anda dapat beralih ke peralatan
yang lebih canggih, atau bahkan ke program-program komersil, seprti Style
Master, Dreamweaver atau GoLive. Tetapi untuk CSS file anda yang
pertama, adalah sesuatu hal yang baik untuk bila perhatian anda tidak
teralihkan dengan banyak fitur yang terlalu canggih bagi.
Jangan menggunakan pengolah kata, seperti Microsoft Word atau
OpenOffice. Mereka pada umumnya akan membuat file-file yang tidak
dapat dibaca oleh browser web. Untuk HTML dan CSS, kita menginginkan
file teks, yang sederhana.
Langkah 1 ialah dengan membuka editor teks anda (Notepad, TextEdit,
KEdit, atau apa pun favorit anda), mulai dengan file yang kosong dan ketik
berikut ini kedalamnya:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Halaman dengan style saya yang pertama</title>
</head>

<body>


<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="renungan.html">Renungan</a>
<li><a href="kota.html">Kotaku</a>
<li><a href="links.html">Link-link</a>
</ul>


<h1>Halaman dengan style saya yang pertama</h1>

<p>Selamat datang ke halaman dengan style saya!

<p>Halaman ini tidak ada gambar, tatapi paling tidak memiliki style.
Dan juga memiliki link, meskipun mereka tidak pergi kemana-mana

<p>Disini seharusnya ada lebih banyak lagi, tetapi saya belum tahu apa.


<address>Dibuat 5 April 2004<br>
oleh diriku sendiri.</address>

</body>
</html>
Malah anda tidak harus mengetiknya: anda dapat melakukan copy dan
paste dari halaman ini ke dalam editor.
(Bila anda menggunakan TextEdit pada Mac, jangan lupa memberi tahu
TextEdit bahwa teksnya benar-benar teks sederhana (plain text), dengan
pergi ke menu Format dan memilih Make plain teks.)
Baris pertama dari file HTML diatas memberi tahu browser apa tipe HTML-nya
(DOCTYPE berarti DOCument TYPE). Dan dalam hal ini, adalah HTML versi 4.01.
Kata-kata yang tertulis diantara < dan > dinamakan tag, dan seperti yang ada
lihat, dokumen ini terdapat di antara tag <html> dan </html>. Antara <head> dan
</head> ada tempat untuk berbagai informasi yang tidak ditampilkan di layar. Saat
ini pada tempat tersebut terdapat judul dari dokumen, tetapi kita akan
menambahkan juga style sheet CSS disana.
Bagian <body> adalah tempat aktual dari isi dokumen. Secara garis besar, segala
sesuatu yang ditempatkan disitu akan ditampilkan, kecuali teks yang terdapat
diantara , yang berfungsi sebagai komentar bagi diri kita sendiri. Hal ini
akan diabaikan oleh browser.
Dalam contoh, tag <ul> memperkenalkan kita pada Unordered List (daftar tak
beraturan), dalam artian, sebuah daftar yang isinya tidak bernomor. Tag <li> adalah
awal dari List Item (Item dari daftar). Tag <p> adalah untuk Paragraph
(alinea/paragraf). Dan <a> adalah untuk jangkar Anchor (jangkar), yang
merupakan hal yang membuat sebuah hyperlink.

Editor Notepad menunjukan sumber HTML.
Bila anda ingin mengetahui apa arti dari nama yang berada diantara <>, salah
satu tempat yang baik untuk memulai adalahGetting started with HTML. Tapi sedikit
penjelasan mengenai struktur dari halaman HTML contoh milik kita.
Tag ul adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita
pergunakan sebagai menu navigasi situs, yang me-link ke halaman-halaman lain dari
halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu
yang serupa.
Elemen-elemen h1 dan p adalah elemen elemen yang membentuk konten yang unik
dari halaman ini, sedangkan tanda tangan (signature) dibagian bawah (address) akan
tampil serupa di seluruh halaman situs.
Perhatikan bahwa saya tidak menutup elemen lidan p. Dalam HTML (tapi bukan
dalam XHTML), tidak menuliskan tag penutup </li> dan </p> adalah sesuatu yang
diperbolehkan, seperti apa yang saya lakukan disini, untuk membuat teks lebih
mudah dibaca. Tetapi jika anda inginkan, anda bisa menambahkannya sendiri.
Mari kita asumsikan bahwa halaman ini akan menjadi sebuah halaman dari
situs Web dengan halaman-halaman yang serupa. Sesuatu yang umum
untuk halaman-halaman website saat ini, yang ini memiliki menu yang me-
link ke halaman-halaman lain di situs ini, beberapa konten yang unik dan
sebuah tanda tangan (signature).
Sekarang pilih Save As dari menu File, arahkan ke ke direktori tempat
anda ingin menaruhnya (Desktop pilihan yang baik) dan simpan file
tersebut sebagai halamanku.html. Jangan tutup dulu editor tersebut, kita
akan menggunakannya lagi.
(Bila anda menggunakan TextEdit di Mac OS X sebelum versi 10.4, anda
akan melihat opsi untuk tidak menambahkan extension .txt pada tampilan
Save as. Pilih opsi tersebut, karena nama halamanku.html sudah memiliki
sebuah extension. Versi TextEdit yang lebih baru akan memperhatikan
extension .html secara otomatis.)
Sekarang, buka file tersebut di sebuah browser. Anda dapat
melakukannya dengan cara berikut: cari file tersebut dengan file manager
(Windows Explorer, Finder atau Konqueror) dan mengklik atau menkliknya
dua kali. File tersebut seharusnya terbuka di default Web browser anda.
(Bila tidak, buka browser anda dan seret (drag) file tersebut kedalamnya)
Seperti yang anda lihat, halaman tersebut tampak membosankan
LANGKAH 2: MENAMBAHKAN BEBERAPA WARNA
Anda mungkin melihat beberapa teks hitam dengan latar belakang putih,
tetapi tergantung dari bagaimana brorser tersebut dikonfigurasi. Jadi salah
satu hal mudah yang dapat kita lakukan untuk membuat halaman tersebut
menjadi lebih gaya adalah dengan menambahkan beberapa warna. (Biarkan
browser tetap terbuka, akan kita gunakan kembali nanti.)
Kita akan mulai dengan sebuah style sheet yang dibuat di dalam file
HTML. Kemudian, kita akan menaruh HTML dan CSS pada file yang
terpisah. File terpisah merupakan hal yang baik, karena akan lebih mudah
menggunakan style sheet yang sama untuk beberapa file HTML: anda
hanya perlu menuliskan style sheet tersebut sekali. Tetapi untuk langkah ini,
kita akan menaruhnya di sebuah file.
Kita perlu menambahkan sebuah elemen <style> pada file HTML. Style
sheet tersebut akan berada didalam elemen itu. Jadi kembali ke jendela
editor dan tambahkan lima baris berikut dibagian head dari file HTML.
Baris-baris yang di tambahkan tampil dengan warna merah.
<html>
<head>
body {
color: purple;
background-color: #d8da3d }
</style>
</head>

<body>
[dsb.]
Baris pertama menjelaskan bahwa ini adalah sebuah style sheet dan ditulis
dalam CSS (text/css). Baris kedua mengatakan bahwa kita menambahkan
style ke dalam elemen body. Yang ketiga menjadikan teks berwarna ungu
dan baris berikutnya menjadikan latar belakang jadi kuning kehijauan.
Style sheet dalam CSS terbuat dari aturan-aturan. Tiap aturan memiliki tiga
bagian:
1. Selector (dalam contoh: body), memberi tahu browser bagian dokumen (elemen HTML)
yang mana yang terkena dampak aturan tersebut;
2. property (dalam contoh, 'color' dan 'background-color' keduanya adalah property), yang
menentukan aspek dari elemen yang sedang di atur;
3. dan value ('purple' dan '#d8da3d'), yang memberikan nilai pada property dari style.
Contoh tersebut memperlihatkan bahwa aturan-aturan tersebut bisa dikombinasikan.
Kita memiliki dua set property, jadi kita juga bisa membuat dua aturan yang berbeda:
body { color: purple }
body { background-color: #d8da3d }
tetapi karena kedua atauran tersebut hanya berdampak pada body, kita hanya
menulis body setu kali dan menulis kedua property dan value bersama. Untuk
mengetahui lebih lanjut mengenai selectors, baca bab 2 dari Lie & Bos.
Latar belakang dari elemen body juga akan menjadi latar belakang dari
seluruh dokumen. Kita belum memberi elemen-elemen lain (p, li, address)
latar belakang apapun secara eksplisit, jadi secara normal mereka tidak
mempunyainya (atau: akan menjadi transparan). Property 'color'
menetapkan warna teks dari elemen body, tetapi elemen elemen lain dalam
body akan turut mewarisi warna tersebut, kecuali bila secara eksplisit di
kesampingkan . (Kita akan menambahkan beberapa warna lain nanti.)
Sekarang simpan file ini (gunakan Save dari menu File) dan balik ke
jendela browser. Bila anda menekan tombol Reload, tampilan seharusnya
berubah dari halaman menbosankan menjadi sebuah halaman yang
berwarna (tetapi masih agak membosankan). Selain dari daftar link diatas,
seluruh teks sekarang seharusnya berwarna ungu dengan latar belakang
kuning kehijauan.

Bagaimana sebuah browser menampilkan halaman tersebut setelah ditambahkan
warna.
Warna dapat ditetapkan dengan beberapa cara. Contoh menunjukkan
dua diantaranya: menggunakan nama (purple) dan dengan kode hexadesimal
(#d8da3d). Ada sekitar 140 nama warna dan kode hexadesimal memungkinkan
lebih dari 16 juta warna. Adding a touch of style menjelaskan lebih lanjut menganai
kode-kode ini.
STEP 3: MENAMBAHKAN FONTA
Hal lain yang mudah dilakukan adalah dengan membuat perbedaan dalam
fonta untuk berbagai elemen di halaman. Jadi marilah kita jadikan teks
dengan fonta Georgia, kecuali untuk heading h1, yang mana akan kita
beri fonta Helvetica.
Di Web, anda tidak pernah dapat memastikan fonta apa yang dimiliki
oleh para pembaca di dalam komputer-komputer mereka, jadi kita
tambahkan juga beberapa alternatif: bila Georgia tidak tersedia, Times New
Roman atau Times juga merupakan pilihan yang baik, bila semua itu tidak
ada, browser bisa menggunakan fonta denganserifs. Bila Helvetica tidak
ada, Geneva, Arial dan SunSans-Regular juga serupa dalam bentuk, dan bila
tak ada satupun hal tersebut yang jalan, browser dapat memilih fonta lain
tanpa serif.
Dalam teks editor tambahkan baris-baris berikut:
<html>
<head>
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>

<body>
[dsb.]
Jika anda menyaimpan file tersebut lagi dan menekan Reload di browser,
seharusnya ada fonta-fonta yang berbeda untuk heading dan teks lainnya.

Sekarang teks utama telah memiliki fonta yang berbeda dari heading.
STEP 4: MENAMBAHKAN BATANG NAVIGASI
Daftar yang terletak di bagian atas halaman HTML dimaksudkan sebagai
menu navigasi. Banyak situs Web memiliki sejenis menu di daerah atas atau
di daerah samping halaman dan halaman ini juga harus memilikinya. Kita
akan menaruhnya di sisi kiri, karena hal tersebut lebih menarik dari pada
diatas
Menu sudah ada di halaman HTML. Daftar <ul> diatas adalah menu
tersebut. Link-linknya belum bekerja, karena situs Web kita hingga saat ini
hanya terdiri dari satu halaman, tetapi saat ini hal tersebut bukan
merupakan masalah. Di situs Web sesungguhnya, tentunya tidak boleh ada
link-link yang tidak berfungsi.
Jadi kita perlu memindahkan daftar tersebut ke kiri dan memindahkan
sisa textnya sedikit ke kanan, untuk memberikan tempat untuk daftar
tersebut. Property CSS yang kita gunakan untuk itu adalah 'padding-left'
(untuk memindahkan teks body) dan 'position', 'left' dan 'top' (untuk
memindahakan menu).
Ada cara-cara lain untuk melakukan hal tersebut. Bila anda mencari
column atau layout di halaman Learning CSS, anda akan menemukan
pola yang siap di pakai. Tetapi ini dapat kita gunakan untuk tujuan kita.
Dalam jendela editor, tambahkan baris baris berikut pada file HTML:
<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
</style>
</head>

<body>
[dsb.]
Bila anda menyimpan file tersebut lagi dan menekan tombol reload di
browser, anda sekarang seharusnya mempunyai daftar link disebelah kiri
teks utama. Sekarang terlihat lebih menarik bukan?

Teks utama dipindah ke sebelah kanan dan daftar link sekarang ada di sebelah
kirinya, dan bukan diatas.
'position: absolute' menandakan bahwa elemen ul diposisikan tersendiri terpisah
dari teks lain baik yang ada sebelum maupun sesudahnya di dokumen tersebut serta
'left' dan 'top' mengindikasikan apa posisi tersebut. Dalam kasus ini, 2em dari atas
dan 1em dari sebelah kiri jendela.
'2em' berarti 2 kali ukuran font yang sekarang. Contoh, bila menu ditampilkan
dengan sebuah fonta berukuran 12 point, maka '2em' adalah 24 point. Unit 'em'
sangatlah berguna pada CSS, karena hal tersebut bisa beradaptasi secara otomaris
pada fonta yang digunakan oleh pembaca. Kebanyakan browser memiliki menu
untuk memperbesar atau memperkecil ukuran fonta: anda bisa mencarinya dan
melihat bahwa menu bertambah besar seiring dengan membesarnya fonta, dimana
hal tersebut tidak akan terjadi bila anda menggunakan ukuran dalam pixel.
LANGKAH 5: MEMBERI STYLE PADA LINK
Menu navigasi masih terlihat seperti daftar, dan bukan seperti menu. Mari
menambahkan style padanya. Kita akan menghilangkan bullet pada daftar
tersebut dan memindahkan item-item ke kiri, ketempat dimana bullet
tersebut tadi berada. Kita juga akan memberi setiap item latar belakang
berwarna putih dengan kotak hitam diluar. (Mengapa? Tidak ada alasan
khusus, hanya kerena kita bisa melakukannya.)
Kita juga menentukan warna apa yang akan diberikan pada link, jadi
mari kita juga tambahkan hal tersebut: biru untuk link yang belum di lihat
dan ungu untuk yang sudah dikunjunginya:
<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>

<body>
[dsb.]
Secara tradisi, browser memperlihatkan hyperlink dengan garis bawah dan
dengan warna. Biasanya, warnanya mirip dengan apa yang kita tentukan disini: biru
untuk link yang belum anda kunjungi (atau sudah lama sekali dikunjungi), ungu
untuk halaman-halaman yang anda sudah pernah lihat.
Pada HTML, hyperlink dibuat dengan elemen <a>, sehingga untuk menentukan
warna, kita perlu menambah sebuah aturan style untuk a. Untuk membedakan
antara link yang sudah dikunjungi dan yang belum, CSS menyediakan dua pseudo-
classes (:link dan :visited). Mereka dinamakan pseudo-classes untuk membedakan
mereka dari attribute class, yang ada dalam HTML, e.g., Dalam contoh
kita class="navbar".
STEP 6: MENAMBAHKAN GARIS HORIZONTAL
Tambahan terakhir pada style sheet adalah sebuah garis horizontal untuk
memisahkan teks dengan signature yang berada dibawah. Kita akan
menggunakan 'border-top', untuk menambahkan garis yang terdiri dari
titik-titik diatas elemen <address>:
<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>

<body>
[dsb.]
Sekarang style kita sudah lengkap. Selanjutnya mari kita lihat bagaimana
kita dapat menaruh style sheet di file yang terpisah, sehingga halaman-
halaman lain dapat menggunakan style yang sama.
STEP 7: MENARUH STYLE SHEET DI SEBUAH FILE TERPISAH
Kita sekarang mempunyai sebuah HTML file dengan sebuah style sheet
yang dibuat di dalamnya. Tetapi bila situs milik kita berkembang,
kemungkinan kita menginginkan banyak halaman menggunakan style yang
sama. Ada cara yang lebih baik daripada meng-copy style sheet ke setiap
halaman: bila kita menaruh style sheet di sebuah style terpisah, semua
halaman dapat mengarah padanya.
Untuk membuat sebuah file style sheet, kita harus membuat sebuah teks
file kosong yang lain. Anda bisa memilih New dari menu File di editor,
untuk membuat sebuah jendala kosong. (Bila anda menggunakan TextEdit,
jangan lupa untuk membuatnya menjadi file teks lagi, menggunakan menu
Format.)
Lalu cut dan paste segala sesuatu yang terdapat dalam elemen <style>
dari file HTML ke dalam jendela baru. Jangan copy <style> dan </style>.
Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam
jendela editor yang baru, anda sekarang sudah memiliki style sheet yang
lengkap:
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Pilih Save As dari menu File, pastikan bahwa anda berada di
directory/folder yang sama dengan file halamanku.html, dan simpan style
sheet tersebut dengan nama styleku.css.
Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai
dari tag <style> hingga dan termasuk tag </style> dan gantikan dengan
sebuah elemen <link> element, seperti berikut:
<html>
<head>
<link rel="stylesheet" href="styleku.css">
</head>

<body>
[dsb.]
Ini akan mangatakan pada browser bahwa style sheet dapat ditemukan di
sebuah file bernama styleku.css dan karena tidak ada disebutkan nama
direktori, browser akan akan mencarinya di direktori dimana file HTML
ditemukan.
Bila anda menyimpan file HTML dan menekan tombol reload di browser,
anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi
style yang sama, tetapi sytle tersebut datang dari sebuah file external.

Hasil akhir
Langkah berikutnya adalah menaruh kedua file, halamanku.html dan
styleku.css di situs Web anda. (Anda mungkin ingin merubahnya sedikit
terlebih dahulu, ) Tetapi bagaimana melakukannya tergantung pada
Internet provider anda.

Pemrograman InternetOleh : Suprayogi,S.Kom
9
Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman webBody
{Margin-top : 4cm;Margin-right : 3cm;Margin-bottom :3cm;Margin-left :
4cm;}Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan
content.Pd css.kotak {Padding-top : 25px;Padding-right : 25px;Padding-bottom
: 25px;Padding-left: 25px;border-top-style: solid;border-right-
style: solid;border-bottom-style: solid;border-left-style: solid;}Pada file
HTML<html><head><link rel=stylesheet
type=text/css href=cssku.css></style></head><body><p class=kotak >
teks1 <p></body></html>

10
LatihanMembuat layout halaman web menggunakan CSSFile cssku.css#header
{position:static;height:90px;width:800px;background-color:#666666;padding-
top:4%;padding-right:2%padding-bottom:2%;padding-left:4%;line-
height:0.5px;left:50px;right:50px;}.judul1 {font-family:verdana,helvetica,sans-
serif;font-size:1em;color:#ffffff;letter-spacing:1em;}.judul2 {font-
family:verdana,helvetica,sans-serif;font-size:1.5em;color:#ffff00;letter-
spacing:1em;text-decoration:line-underline;}.judul3 {font-
family:verdana,helvetica,sans-serif;font-size:1.5em;color:#ffff00;letter-
spacing:0.25em;text-decoration:line-underline;}#nav_left{background-
color:#999999;height:40px;width:170px;line-height:0.1;padding:0.5em;border-
bottom-width:1px;border-bottom-style:solid;border-bottom-
color:#ffffff;}#nav_left_link {font-size:10px;background-
color:#666666;height:415px;width:170px;padding:0.5em;border-bottom-
width:1px;border-bottom-style:solid;border-bottom-
color:#ffffff;}#nav_left_menu_caption {background-
color:#666666;height:20px;width:170px;line-height:0.1;padding:0.5em;border-
bottom-width:1px;border-bottom-style:solid;border-bottom-
width:#ffffff;}.menu_caption {font-family:verdana,arial,helvetica,sans-
serif;font-size:1em;color:#ffff00;text-align:center;vertical-
align:middle;}#stylelink a:link, #stylelink a:visited {display:block;border-
top:1px solid #ffffff;border-bottom:1px solid #cccccc;background-
color:#666666;font-weight:bold;color:#ffff00;width:100px;padding-
top:3px;padding-right:0px;padding-bottom:3px;padding-left:10px;text-
decoration:none;}#stylelink a:hover {border-top:1px solid #cccccc;background-
color:#0000hh;background-image:none;font-weight:bold;text-
decoration:none;color:#ffffff;}#bawah{background-
color:#999999;height:30px;width:800px;padding-right:2em;padding-
left:4em;padding-top:1em;padding-bottom:1em;}
.
copyright_bawah{font-family:verdana,arial,helvetica,sans-serif;font-size:10px;

11
color:#ffffff;text-align:center;width:800px;}#box_isi {position :
absolute;height:auto;width:615px;left:204px;top:100px;padding:1em;border-
left-width:1px;border-left-style:dotted;border-left-color:#666666;border-right-
width:1px;border-right-style:dotted;border-right-color:#666666;}.isi {font-
family:verdana,arial,helvetica,sans-serif;font-size:1.2em;color:#666666;line-
height:2em;text-align:justify;vertical-align:none;}body {font-
family:verdana,arial,helvetica,sans-serif;background-
color:#cccccc;margin:auto;padding:0.2em;}p {font-
family:verdana,arial,helvetica,sans-serif;font-size:10px

Aturan Penulisan CSS
Selector
Terdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan value
Contoh:
H1
{
Color : #0000FF;
}
Keterangan :
Selector : H1
Properti : Color
Value : #0000FF
Macam-macam Selector
Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector
Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
contoh :
.font{
Font-family : ComicSans;
}
ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer
dalam desain web krn didefiniskan denga ID berbeda. Contoh :
#font{
Font-family : ComicSans;
}
*) CSS Background
Property background
1. Background-color
Contoh:
Body {
Background-color : green;
}
2. Background-Image
Contoh:
Body {
Background-image : url(gambar1.jpg);
}
3. Background-attachment
Body {
Background-attachment : scroll;
}
4. Background-Repeat
Body {
Background-repeat : repeat;
Background-image : url(image/gambar1.jpg);
}
5. Background-position
Body {
Background-repeat : no-repeat;
Background-image : url(image/gambar1.jpg);
Background-position : bottom center
}
*) CSS Font
Property Font
1. Font-family
P {
Font-family : Arial,Helvetica;
}
2. Font-size (satuan em,pt,px,mm,cm,%)
P {
Font-size : 24em;
}
3. Font-style (nilai : oblique,italic,normal)
P {
Font-style : oblique;
}
4. Font-variant (nilai : normal,small-caps)
P {
Font-family : Arial,Helvetica;
}
5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)
P {
Font-weight : bolder;
}
*) CSS Teks
Property teks
1. color
P {
color :red;
}
2. teks-align (nilai left,right,center,justify)
P {
Text-align :justify;
}
3. text-decoration (nilai : none,underline,overline,line-through,blink)
P {
Text-decoration :overline;
}
4. text-transform (nilai : none,capitalize,uppercase,lowercase)
P {
Text-transform : capitalize;
}
5. Letter-spacing
P {
letter-spacing : 20px;
}
6. Teks-indent
P {
Text-indent : 50px;
}
*) CSS List
Property list
1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,loweralpha,
upper-alpha)
Ul {
List-style-type : disc ;
}
2. List-style-image (nilai : url,none)
Ul {
List-style-image : url(gambar1.jpg) ;
}
3. List-style-position (nilai : inside,outside)
Ul {
List-style-position : inside;
}
*) CSS Border
Property Border
1. border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-style-type : groove ;
}
2. border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset)
.b1 {
Border-bottom-style : groove ;
}
3. border-bottom-width ()
.b1 {
border-bottom-width :10px;
}
4. border-bottom-color ()
.b1 {
border-bottom-color :red;
}
*) Margin dan Padding
Margin : pengaturan batas atas,bawah,kanan,kiri pada halaman web
Body {
Margin-top : 4cm;
Margin-right : 3cm;
Margin-bottom :3cm;
Margin-left : 4cm;
}
Margin : pengaturan batas atas,bawah,kanan,kiri antara border dengan content.
pada css
.kotak {
Padding-top : 25px;
Padding-right : 25px;
Padding-bottom : 25px;
Padding-left: 25px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
*) Link
#font a:link, #font a:visited{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#6699FF;
padding-left:9px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
text-decoration:none;
}
#font a:hover{
font-family:Geneva, Arial, Helvetica, sans-serif;
size:12px;
color:#36ce76;
padding-left:3px;
padding-bottom:0px;
padding-right:3px;
font-weight:bold;
}

Materi HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

MATERI HTML

Anda mungkin juga menyukai