Adi'Blue: HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheet)

HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheet)

Diposting oleh Unknown |

Pengenalan HTML

A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu

network dengan network lainya di seluruh dunia, TCP/IP menjadi

protocol penghubung antara jaringan-jaringan yang beragam di seluruh

dunia untuk dapat berkomunikasi.

World Wide Web (WWW) merupakan bagian dari internet yang paling

cepat berkembang dan paling populer.

WWW bekerja merdasarkan pada tiga mekanisme berikut:

1. Protocol

standard aturan yang di gunakan untuk berkomunikasi

pada computer networking, Hypertext Transfer Protocol (HTTP)

adalah protocol untuk WWW.

2. Address

WWW memiliki aturan penamaan alamat web yaitu

URL(Uniform Resource Locator) yang di gunakan sebagai standard

3. alamat internet.

HTML

digunakan untuk membuat document yang bisa di akses

melalui web.

B. Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di

gunakan untuk menampilkan document web, yang bisa anda lakukan

dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan document secara online sehingga bisa di akses

dari seluruh dunia.

Membuat online form yang bisa di gunakan untuk menangani

pendaftaran, transaksi secara online.

Menambahkan object-object seperti image, audi, video dan juga

java applet dalam document HTML.

C. Browser dan Editor
1. Browser

Browser merupakan software yang di install di mesin client yang

berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web.

Browser yang sering di gunakan biasanya Internet Explorer, Netscape

Navigator dan masih banyak yang lainya.

2. Editor

Program yang di gunakan untuk membuat document HTML, ada banyak

HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage,

Dreamweaver, Notepad.

Basic Tag HTML

A. Tag-tag HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk

menentukan tampilan dari document HTML.

Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.

<HTML>

. . .

<HTML>

Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>

keduanya menghasilkan output yang sama.

Bentuk dari tag HTML sebagai berikut:

Element

- nama tag

Attribute

- atribut dari tag

Value

- nilai dari atribut.

Contoh:

BODY

merupakan element,

BGCOLOR

(Background) merupakan

atribut yang memiliki nilai

lavender

Untuk memulai bekerja dengan HTML anda bisa gunakan editor Note

Pad atau editor lainya. Caranya:

1. Ketikkan tag-tag berikut di notepad.

2. Simpan dengan nama file one.htm atau one.html

3. Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini.

B. Struktur HTML Document

Document HTML bisa di bagi mejadi tiga bagian utama:

HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

tag HTML memberi tahu browser bahawa yang di dalam kedua tag

tersebut adalah document HTML.

HEAD

Bagian header dari document HTML di apit oleh tag

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, dan lainyan pada tag META.

Contoh:

Author dari document tersebut adalah “Bocah Gunung”

Atribut http-equiv dapat di gunkan 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 documents di cached, HTTP akan megetahui kapan untuk

mengapdate document tersebut pada cache.

BODY

Document body di gunakan untuk menampilkan text, image link dan

semua yang akan di tampilkan pada web page.

<html>

<head>

<title>Welcome to HTML</title>

</head>

<p>Document HTML yang Pertama</p>

</body>

</html>

C. Basic HTML Element

Block Level Element

Block level element yang sering di gunakan :

Heading (H1 sampai H6)

Contoh :

<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>

Block Level Element

Block level element yang sering di gunakan :

Heading (H1 sampai H6)

Contoh:

<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>

Paragraf (P)

Contoh:

<html>

<head>

<title>Formating Paragraf</title>

</head>

<body>

<h3>Puisi Ceria</h3>

<p>

mawar berwarna merah, bibir kamu juga merah ,

bibir kamu semerah mawar.

</p>>

<h2>puisi sedih</h2>

<p>

melati harum baunya, kalau nggak ganti percuma

namanya

</p>

</body>

</html>

List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan

(ordered list) maupun yang tida

k berurutan (unordered list).

Contoh:

Kita mau mengelompokkan data-data berikut :

Pisang

Melati

Jambu

Mawar

Anggrek

Apel

Anggur

Dapat kita kelompokkan ke dalam dua kelompok:

Buah-buahan

Ø Pisang

Ø Jambu

Ø Apel

Ø Anggur

Bunga

1. Melati

2. Mawar

3. Angrek

Ada tiga macam list yang bisa anda tambahkan ke document HTML:

1. Unordered List (Bullet) :

Contoh :

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<ul>

<li>Sunday</li>

<li>Monday</li>

<li>Tuesday</li>

<li>Wednesday</li>

</ul>

</body>

</html>

2. Ordered List (Numbering)

Contoh:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<P>Shedule for HTML Course</P>

<li>Sunday</li>

<li>Introduction to HTML</li>

<li>Creating List</li>

</ol>

<li>Monday</li>

<li>Creating table</li>

<li>Inserting Image</li>

</ol>

<li>Tuesday</li>

<li>Creating Link</li>

<li>Preparing Website</li>

</ol>

<li>Wednesday</li>

</ol>

</body>

</html>

Definition List

Definition List terdiri diapit oleh tag <DL> ... </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Contoh:

<html>

<head>

<title>Definition List</title>

</head>

<body>

<p><b>List of Internet Resource</b></p>

<dl>

<dt>HTML

<dd>HyperText Markup Langguage is not Language

Programming</dd>

</dt>

<dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP

Protocol</dd>

</dt>

<dt>Internet

<dd>A network of network</dd>

</dt>

<dt>TCP/IP

<dd>Internet protocol</dd>

</dt>

</dl>

</body>

</html>

D. Pemformatan Page

Break

Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.

Contoh:

<html>

<head>

<title>Break Line</title>

</head>

<body>

<h3>Buliding Dynamic Web Aplication</h3>

<p>

If you're building a dynamic web application, <br>

start by setting up an application server and <br>

connecting to a database.

</p>

</body>

</html>

Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.

Contoh:

<html>

<head>

<title>Formating Font</title>

</head>

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.

A web server is sometimes called an HTTP

server.

Common web servers include IIS,

Netscape Enterprise Server, iPlanet Web Server,

and Apache HTTP Server.

</font>

</p>

<body>

</body>

</html>

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.

</font>

</p>

<body>

</body>

</html>

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.

Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF White

Alignment

Align attribute digunakan untuk menentukan perataan object dalam

document HTML baik berupa text, object, image, paragraph, division dan

lain-lain.

Value Description

Left Rata kiri

Right Rata kanan

Center Rata tengah

JustifyRata kanan kiri

Format text

Physical Formatting

Tag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<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

<SUP> ... </SUP> Superscript text

<SUB> ... </SUB> Subscript text

<CENTER> ... </CENTER> Center document

Logical Formatting

Tag Description

<EM> ... </EM> Text miring / <I>

<STRONG> ... </STRONG>Text tebal / <B>

<DEL> ... </DEL> Mencoret text / <STRIKE>

<INS> ... </INS> Underline text / <U>

Quotes / Indenatasi

Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.

Contoh:

<html>

<head>

<title>Formating Font</title>

</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.

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 you’re 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>

Untuk membuat indentasi paragraph kita bisa menggunakan

BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.

Contoh:

<html>

<head>

<title>Formating Font</title>

</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.

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 you’re 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>

Preformatted text

Tag PRE di gunakan untuk menampil

kan text sesuai dengan format

aslinya.

Contoh:

<html>

<head>

<title>Formating Font</title>

</head>

<body>

Setting Up Web Server

</font>

<p>

<pre>

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 you’re not using a web hosting service,

choose a web server and

install it on your local computer

or on a remote computer

</pre>

</p>

</body>

</html>

Grouping element

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content.

Contoh:

<html>

<head>

</head>

<body>

<div>

Divisi 1

<p>

Div tag digunakan untuk mengelompokkan group

element

biasanya untuk block-level element.

</p>

</div>

Divisi 2

<p>

Ini didalam devisi kedua.

di tulis dengan alignment kanan.

</p>

</div>

baris ini dalam span dengan warna lavender.

</span>

</body>

</html>

<p>

Div tag digunakan untuk mengelompokkan group

element

biasanya untuk block-level element.

</p>

</div>

Divisi 2

<p>

Ini didalam devisi kedua.

di tulis dengan alignment kanan.

</p>

</div>

baris ini dalam span dengan warna lavender.

</span>

</body>

</html>

Hyperlink

Link Address

Absolute Address

- merupakan full internet address (URL) yang

meliputi protocol, network location dan path dan nama file.

Contoh:

http ://www.yahoo.com/index.html

Relatif Address

- URL yang tidak menyebutkan protocol dan network

locationya (hanya path dan nama filenya).

Anchor

Anchor tag <A> untuk menentukan hyperlink dalam document HTML.

HREF property digunakan untuk menentukan tujuan dari hyperlink

tersebut.

<A HREF=”URL”> Hypertext </A>

HREF=”protocol://host.domain:port/path/filename”>

Hypertext </A>

Link ke Document Lain

Misalkan ada dua document html link1.htm dan link2.htm untuk

membuat link dari link1

.htm ke link2.htm :

Link1.htm

<html>

<head>

<title>Using Link</title>

</head>

<body>

<center><font size="5" color=hotpink>Creating Link

</font></center>

<br>

<a href="link2.htm"> Click here to view document

2</a>

</body>

</html>

Link2.htm

<html>

<head>

<title>Document 2</title>

</head>

<center><font size="5" color=limegreen>Creating

Link </font></center>

<br>

<a href="link1.htm"> back to document 1</a>

<body>

</body>

</html>

Link ke Section tertentu dalam Document

Untuk membuat link ke section tertentu dalam satu document gunakan property name untuk membuat nama tujuan dari link.

Syntax name anchor:

<A NAME =”nama”>Topic name</A>

untuk membuat link ke name :

<A HREF=”#nama”>menuju ke Topic name</A>

contoh:

link3.htm

<html>

<head>

<title>Anchor Name</title>

</head>

<body>

<pre>

<b>setting up web server</b>

Windows users can get a web server up

and running quickly on their local computer

by installing either PWS or IIS.

The web server may already be installed.

Check your folder structure to see if it contains

a C:\Inetpub or D:\Inetpub folder.

PWS and IIS create this folder during

installation.

If you want to install PWS or IIS,

<a href="#install">see Installing a Web Server in

Windows.</a>

ASP.NET pages only work with one web server:

Microsoft IIS 5 or higher.

PWS is not supported.

Also, because IIS 5 is a service

of the Windows 2000 and Windows XP

Professional operating systems,

you can only use these two versions of Windows

to run ASP.NET applications.

<b>

<a name="install">Installing a Web Server in

Windows </a>

</b>

To develop and test dynamic web pages,

you need a functioning web server.

This chapter describes how most Windows

users can install and use

a Microsoft web server on their local computer.

</pre>

</body>

</html>

Table dan Image

A. Table

Membuat table

Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari

table adalah cell yang didefinisikan dengan menggunakan tag <TD>

<html>

<head>

<title>Using Table</title>

</head>

<body>

<td>Table dengan sigle cell</td>

</table>

</body>

</html>

anda bisa menambahkan beberapa cell untuk membuat satu baris cell.

<html>

<head>

<title>Using Table</title>

</head>

<body>

</table>

</body>

</html>

berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>

<html>

<head>

<title>Using Table</title>

</head>

<body>

<tr>

<tr>

</tr>

</table>

</body>

</html>

Image

A. Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan :

GIF (Graphical Interchange Format) (.GIF)

JPEG (Joint Photographic Expert Image) (.JPG)

PNG (Portable Network Graphics)

B. Insert Image ke Document

Tag IMG di gunakan untuk menginsertkan image ke document HTML.

Syntax nya:

<html>

<head>

<title>Working with Image</title>

</head>

<body>

</body>

</html>

C. Image Map

Anda bisa gunakan image yang ada pada website anda untuk membuat image map. Image map yaitu 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.

Contoh:

<html>

<head>

<title>Creating Hotspot</title>

</head>

<body>

<img src="Starry.gif" width="400" height="200"

border="0" usemap="#Map">

<area shape="rect"

coords="0,0,200,100"

href="file1.htm"

alt="kotak link">

<area shape="circle"

coords="354,41,36"

href="file2.htm"

alt="lingkaran link">

<area shape="poly"

coords="58,102,97,101,110,134,

119,119,177,195,69,196,

47,162,62,143" href="#">

</map>

</body>

</html>

Form

A. Pengenalan Form

Kegunaan Form

Berikut ini beberapa contoh kegunaan Form dalam web:

Ø memperoleh data-data user baik nama, alamat dan data lainnya

Ø untuk mendaftar pada service yang di sediakan.

Ø memperoleh informasi pe

Ø mbelian secara online

Ø memperoleh feedback dari user mengenai website anda.

B. HTML Input Element

Pada saat membuat form anda bisa meletakkan control-control pada form untuk memperbolehkan inputan dari user . semua control biasanya di letakkan di antara tag

<FORM></FORM>tapi anda juga bisa meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>

Berikut macam-macam component input:

1. Butoon

2. Text

3. Radio

4. Text Area

C. Creating Form

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<h2 align="center"><font color="#9966FF">Free

Registration</font></h2>

<form action="proses.asp" method="post"

name="form">

<table width="68%" border="0" align="center"

cellpadding="0">

<tr>

<td width="64%"><input name="txtNama"

type="text" id="txtNama"></td>

</tr>

<tr>

<td >Tgl Lahir</td>

<td><input name="txtTgl" type="text"

id="txtTgl" size="4" maxlength="2">

<input name="txtBulan" type="text"

id="txtBulan" size="4" maxlength="2">

<input name="txtTahun" type="text"

id="txtTahun" size="8" maxlength="4"></td>

</tr>

<tr>

<td>Alamat</td>

<td><textarea name="txtAlamat" cols="40"

rows="2" id="txtAlamat"></textarea></td>

</tr>

<tr>

<td><input name="txtKota" type="text"

id="txtKota"></td>

</tr>

<tr>

<td>Pekerjaan</td>

<option>Nelayan</option>

<option>Karyawan</option>

</select></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td><input name="radJk" type="radio"

value="1" checked>

Laki-Laki

<input type="radio" name="radJk"

value="2">

Perempuan</td>

</tr>

<tr>

<td>Hobby</td>

<td><input name="cekReading" type="checkbox"

id="cekReading" value="1">

Reading </td>

</tr>

<tr>

<td><input name="cekSport" type="checkbox"

id="cekSport" value="2">

Sport</td>

</tr>

<tr>

<td><input name="cekSing" type="checkbox"

id="cekSing" value="3">

Singing </td>

</tr>

<tr>

<td><input name="cekTravel" type="checkbox"

id="cekTravel" value="4">

Traveling</td>

</tr>

<tr>

<td><input name="btnKirim" type="submit"

id="btnKirim" value="Kirim">

<input name="btnCancel" type="reset"

id="btnCancel" value="Cancel"></td>

</tr>

</table>

</form>

</body>

</html>

Pengenalan Style Sheet

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar.Anda juga bias menyebutnya sebagai template dari documents HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan ditampilkan dengan warna kuning dan menggunakan fontverdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

A. Inline Styles

Ada dua cara untuk merubah style dari web page anda yaitu dengan :

Merubah inline style Menulis script untuk merubah style anda.

Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harusmenambahkan script ke web anda. Inline styles merupakan style yang bisa kita pasang pada element web tertentu saja.

Contoh:

‰

‰Jika anda ingin menambahkan style pada <H1> dengan warna merah, anda harus mengesetattribut STYLE dari tag <H1>.

jika anda ingin menggunakan script untuk memodifikasi inline style, anda dapat menggunakan Style Object. Style Object mensupport semua property yang di support CSS untuk style. Untuk menggunakan property pada script :

1. Hilangkan tanda hubung “-” dari property CSS Style

2. Ganti huruf setelah tanda hubung menjadi Capital.

Contoh:

font-weight

menjadi

fontWeight

text-align

menjadi

textAlign

B. Istilah-istilah dalam Style Sheet

Style rule

Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Style sheet

Style sheet dapat dapat di embedded ke HTML document. Atau disebut embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web page. Sebagai contoh anda bisa menentukan

paragraph tertentu di tampilkan dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector

selector { property1: value; property2:value, . . .}

H1{ color:green; background-color:orange}

Style sheets terdiri dari dua bagian:

1.Selector Bagian pertama sebelum tanda “{}” disebut selector 2.

DeclarationTerdiri dari property dan nilainya.

C. Komentar dalam Style Sheets

Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:

/* isi Comments */

Contoh:

H1 { color:blue;} /* H1 elements akan menjadi

biru */

Tags.H1.color = “blue”; /* H1 elements akan

menjadi biru */

D. Pemakaian elemen style

Mari kita mulai dengan mengatur

warna huruf dan latar belakang

. Anda dapat mengerjakan ini dengan menggunakan elemen styleuntuk mengatur karakter kode tag dokumen anda.

body { color: black; background: white; }

</style>

Pernyataan yang ditulis antara kode tag <style> dan </style> menunjukkan perintah pengaturan style.

E. Mengatur Format Font.

Model huruf

Model yang umum dipakai adalah teks miring (italik) atau tebal (bold). Umumnya program browser mempergunakan tag emuntuk huruf italik dan tag stronguntuk huruf tebal. Misalnya anda ingin menuliskan kode em agar huruf tampil berbentuk italik dan tebal dan menuliskan kode strong untuk huruf tebal uppercase, perintahnya dituliskan sebagai berikut :

em { font-style: italic; font-weight: bold; }

strong { text-transform: uppercase; font-weight:

bold; }

bila gagal dapat ditambahkan perintah ini :

h2 { text-transform: lowercase; }

Mengatur ukuran huruf

Kebanyakan program browser mempergunakan huruf yang lebih besar untuk heading yang penting sifatnya. Bila anda menimpa ukuran defaultnya, anda menempuh resiko yaitu huruf menjadi tampak lebih kecil khususnya bila anda mempergunakan ukuran yang anda tambahkan tersebut dengan ukuran titik (point). Karenanya anda disarankan untuk melakukan pengaturan ukuran huruf dengan ukuran yang sama.

Contoh berikut mengatur ukuran heading dalam persen relatif terhadap

ukuran teks normal.

h1 { font-size: 200%; }

h2 { font-size: 150%; }

h3 { font-size: 100%; }

Mengatur jenis huruf

Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis browser. Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf yang tidak dapat ditampilkan oleh hampir semua browser. Ada beberapa jenis huruf generik yang dijamin cocok, sehingga anda kami sarankan untuk mengakhiri daftar perintah HTML anda dengan salah satu jenis huruf berikut :

serif, sans-serif, curs

ive, fantasy, atau

monospace

F. Menambahkan border dan latar belakang.

Anda dapat dengan mudah menambahkan border disekitar heading,

daftar (list), atau paragraf atau se

kelompok heading, list dan paragraf

secara tertutup dengan mempergunakan elemen

div

G. Mengatur warna

Contoh berikut adalah perintah pengaturan warna.

body {

color: black;

background: white;

}

strong { color: red }

Model pengaturan diatas memberikan warna hitam teks (default) dan latar belakang putih, tetapimemiliki elemen strong pada warna merah. Ada 16 buah nama warna standar yang dijelaskan dalam uraian berikut. Selain itu anda dapat juga mempergunakan nilai desimal untuk warna merah, hijau dan biru, dan masing-masing memiliki interval antara 0 sampai 255. Misalnya rgb(255, 0, 0) akan memberikan warna merah di layar monitor. Anda juga dapat mempergunakan angka hexadesimal yang dimulai karakter # yang diikuti enam angka hexadesimal sebagai pengaturan warna. Sebuah pengubah juga diberikan dibawah ini agar

anda dapat melakukan pengubahan nilai dari RGB ke nilai hexadesimal.

Mengatur warna link

Anda dapat mempergunakan CSS untuk mengatur warna hypertex link, dengan warna yang berbeda untuk link yang belum pernah anda akses, link yang pernah anda akses dan link yang akan kemudian anda akses serta link yang aktif. Anda bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah yang akan di link.

Adi'Blue

Laman

HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheet)

0 komentar:

Posting Komentar

Traffic Cound

Populer Post

Mengenai Saya