FORMAT TEKS PADA HTML

Ini merupakan lanjutan dari posting saya yang sebelumnya mengenai belajar HTML, bagi yang masih kurang memahami tulisan saya ini atau ingin mengetahui saja mengenai struktur dasar penulisan HTML ada baiknya melihat tulisan sebelumnya.

Adapun format teks yang digunakan dalam HTML antara lain :

Line Break / Page Break

Berfungsi sebagai pengganti baris dan tidak memiliki element penutup

Sintaks:

<br>

Paragraph

Berguna sebagai pengganti paragraf yang diikuti dengan baris kosong pada awal dan akhir paragraph. Memiliki panutup </p> yang bersifat optional, maksudnya dapat tidak digunakan dengan kompensasi paragraf tidak akan diikuti baris kosong pertanda akhir paragraf. Memiliki attribute “align” yang bernilai “left”,”center” dan “right”.

Sintaks:
<p align=”left”|”center”|”right”>
……………………..
</p>

Block Level Element (Header)

Element H terdiri dari H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbersar adalah H1 seterusnya sampai yang terkecil adalah H6. Element ini memiliki attribute “align” yang bernilai “left”,”center” dan “right” yang menspesifikasikan posisi horizontal dari header dengan defaultnya adalah left.

Sintaks:
<hx align=”left”|”center”|”right”>
……………………..
</h
x>

x merupakan ukuran dari 1 sampai 6

Ini Heading-1

Ini Heading-2

Ini Heading-3

Ini Heading-4

Ini Heading-5

Preformated text

Element ini akan menampilkan teks seperti apa adanya, maksudnya akan tampilk seperti apa yang kita tulis.

Sintaks:
<pre>
……………………..
</pre>

Center

Berfungsi untuk menampilkan teks dalam posisi horizontal ditengah.

Sintaks:
<center>
……………………..
</center>

Basefont

Element ini berfungsi untuk mengubah dasar ukuran tampilan dari web browser. Attribute dari element ini adalah “size” yang merupakan ukuran huruf, bernilai dari “1” sampai dengan “7” pixel, atau berupa ukuran relative (+ atau -), default dari basefont adalah “3” pixel dan element ini tidak memerlukan penutup.

Sintaks:
<basefont size=”pixel”>

Horizontal Rule

Berfungsi untuk membuat satu garis horizontal tidak memiliki penutup dan memiliki attribute align, size(ukuran), width (lebar) dan noshade (garis solid)

Sintaks:
<hr align=”left”|”center”|”right” size=”pixel” width=”persen” noshade>

Attribute

Description

Position

Menentukan posisi dari HR, dengan value : center | right | left

Width

Untuk menentukan panjang HR default 100%

Size

Untuk menentukan tebal dari HR dalam pixel

Noshand

Efek bayangan

Hyperlink

Link Address

1. Absolute Link Address merupakan alamat pada internet (URL) yang meliputi protocol, network location dan patch dan nama file.

Contoh:

http://sevli024.wordpress.com

2. Relatif Address, URL yang tidak menyebutkan protocol dan network location atau hanya patch dan nama file

Anchor

Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut

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

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

Daftar Urutan

Daftar Urutan digunakan untuk mengelompokkan data baik yang berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ada dua macam list pada HTML

1. Unordered List (Bullet)

Sintaks ordered list:
<ol start=”number” type=”A”|”a”|”I”|”i”|”1″>
……………………
</ol>

2. Ordered List (Numbering)

Sintaks:
<ul type=”circle”|”square”|”disc”>
……………………..
</ul>

Tag

Attribute

Value

Description

<UL>

TYPE

SQUARE DISC CIRCLE

Bullet Kotak

Bullet Titik

Bullet Lingkaran

Tag

Attribute

Value

Description

<OL>

TYPE

I i

A a

Upper Roman Lower Roman

Uppercase Lowercase

<OL>

START

N

Begin Number

ELEMENT LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute valueberisikan nilai nomor urutan dari attribute type.

Sintaks list item:
<li type=”A”|”a”|”I”|”i”|”1″|”circle”|”square”|”disc”>
……………………..
</li>

Definition List

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition

term serta <DD> tag menentukan definition itu sendiri.

Font

Elemen font berfungsi mengubah tampilan dari font yang digunakan seperti warna, jenis, ukuran dan jenisnya.

Sintaks:

<font color=”warna” face=”font” size=”pixel”>
……………………..
</font>

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

Attribute penting yang dapat digunakan untuk berbagai keperluan pada HTML

Color

Color merupakan attribute yang dapat ditambahkan pada element body, font, link dan lainnya. Color diwakili dua digit hexadecimal number.

Hexadecimal

Color

#FF0000

Red

#00FF00

Green

#0000FF

Blue

#000000

Black

#FFFFFF

White

Alignment

Align attribute digunakan untuk menentukan perataan object pada document HTML baik berupa teks, object, image, paragraph, division dan lain lain.

Value

Description

Left

Rata Kiri

Right

Rata Kanan

Center

Rata Tengah

Justify

Rata kanan kiri

Format Text

Physical Formating

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 member garis di tengah text

<SUP> … </SUP>

Superscript text

<SUB> … </SUB>

Subscript text

<CENTER> … </CENTER>

Center document

Logical Formating

Tag

Description

<EM> … </EM>

Text miring / <I>

<STRONG> … </STRONG>

Text tebal

<DEL> … </DEL>

Mencoret text / <STRIKE>

<INS> … </INS>

Underline text / <U>

Posted in Uncategorized

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: