2-HTML FORMAT TEKS ::

OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks.

MATERI:

Element BR (line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header),
Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated
text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal
rule)

ELEMENT BR (Line Break)

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag
penutup.
Sintaks:
<br>

ELEMENT P (Paragraph)

Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan
akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh
paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan
baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu alignyang bernilai "left", "center", "right"yang
menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").
Sintaks:
<p align="left"|"center"|"right">
..........................
</p>

ELEMENT H1,H2,H3,H4,H5,H6 (Header)

Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis
ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil
adalah H6. Element ini mempunyai attribute yaitu alignyang bernilai "left", "center",
"right"yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hxalign="left"|"center"|"right">
..........................
</hx>

ELEMENT B (Bold)

Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks:
<b>
..........................
</b>

ELEMENT I (Italic)

Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i>
..........................
</i>

ELEMENT U (Underline)

Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>
..........................
</u>

ELEMENT PRE (Preformated text)

Element PRE berfungsi untuk menampilkan teks seperti apa adanya.
Sintaks:
<pre>
..........................
</pre>

ELEMENT CENTER

Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks:
<center>
..........................
</center>

ELEMENT BASEFONT

Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web
browser. Attribute dari element ini adalah sizeyang merupakan ukuran huruf dengan
nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya
adalah "3" pixel. Element ini tidak mempunyai tag penutup.
Sintaks:
<basefont size="pixel">

ELEMENT FONT

Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf.
Element ini mempunyai attribute coloruntuk merubah warna huruf, faceuntuk merubah
jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan sizeuntuk
merubah ukuran huruf (pixel).
Sintaks:
<font color="warna" face="font" size="pixel">
..........................
</font>

ELEMENT HR (Horizontal Rule)

Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak
mempunyai tag penutup dan mempunyai attribute alignuntuk menempatkan posisi secara
horizontal ("left", "center", "right"), sizeuntuk ukuran ketebalan garis ("pixel"), width
untuk ukuran panjang garis ("persen"), dan noshade(garis solid).
Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

LATIHAN
Gunakan teks editor misalkan "Notepad"untuk menyunting dan
menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut
dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul
ini dengan mengklik menu Editor.

Latihan 1:

Menampilkan teks dengan ganti baris (element BR):
Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan
JSP
Belajar bahasa pemrograman web.
Dengan materi dasar HTML.
Dan JSP.
Nama file: latihan2_1.html

<html>

<head>

<title>Latihan2-1</title>

</head>

<body>

Belajar bahasa pemgrograman web. Dengan mater dasarHTML. Dan JSP. <br>

<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan JSP.

</body>

</html>

Latihan 2:

Menampilkan teks dalam bentuk paragraf (element P):

Tampilan teks sebelum paragraf.

Tampilan teks paragraf pertama.

Tampilan teks paragraf kedua.

Tampilan teks setelah paragraf.

Nama file: latihan2_2.html

<html>

<head>

<title>Latihan2-2</title>

</head>

<body>

Tampilan teks sebelum paragraf.

<p>Tampilan teks paragraf pertama.</p>

<p>Tampilan teks paragraf kedua.</p>

Tampilan teks setelah paragraf.

</body>

</html>

Latihan 3:

Menampilkan posisi horizontal kelurusan paragraf:
Paragraf ini pada posisirata kiri (default)

Paragraf ini pada posisi rata tengah

Paragraf ini pada posisi rata kanan

Paragraf ini pada posisirata kiri
Nama file: latihan2_3.html

<html>

<head>

<title>Latihan2-3</title>

</head>

<body>

<p>Paragraf ini pada posisi rata kiri (default)</p>

<p align="center">Paragraf ini pada posisi rata tengah</p>

<p align="right">Paragraf ini pada posisi rata kanan</p>

<p align="left">Paragraf ini pada posisi rata kiri</p>

</body>

</html>

Latihan 4:

Menampilkan teks sebagai header (element H):

Ini Heading-1

Ini Heading-2

Ini Heading-3

Ini Heading-4

Ini Heading-5

Ini Heading-6

Nama file: latihan2_4.html

<html>

<head>

<title>Latihan2-4</title>

</head>

<body>

<h1>Ini Heading-1</h1>

<h2>Ini Heading-2</h2>

<h3>Ini Heading-3</h3>

<h4>Ini Heading-4</h4>

<h5>Ini Heading-5</h5>

<h6>Ini Heading-6</h6>

</body>

</html>

Latihan 5:

Menampilkan teks dalam format tebal, miring dan garis bawah:

Ini normal teks

Ini teks tercetak tebal (bold)

Ini teks tercetak miring (italic)

Ini teks tercetak garis bawah (underline)

Nama file: latihan2_5.html

<html>

<head>

<title>Latihan2-5</title>

</head>

<body>

Ini normal teks<br>

<b>Ini teks tercetak tebal (bold)</b><br>

<i>Ini teks tercetak miring (italic)</i><br>

<u>Ini teks tercetak garis bawah (underline)</u>

</body>

</html>

Latihan 6:

Menampilkan teks dalam bentuk apa adanya (element PRE):

Ini bentuk penulisan preformated text

apapun bentuknya tulisan ini akan ditampilkan

pada web browser

seperti apa adanya, alias yang ditulis

Nama file: latihan2_6.html

<html>
<head>
<title>Latihan2-6</title>
</head>
<body>
<pre>
Ini bentuk penulisan preformated text
apapun bentuknya tulisan ini akan ditampilkan
pada web browser
seperti apa adanya, alias yang ditulis
</pre>
</body>
</html>

Latihan 7:

Menampilkan teks pada posisi tengah jendela web browser (element CENTER):

Teks ini terletak di tengah layar web browser

dengan menggunakan element CENTER

Nama file: latihan2_7.html

<html>
<head>
<title>Latihan2-7</title>
</head>
<body>
<center>
Teks ini terletak di tengah layar web browser<br>
dengan menggunakan element CENTER
</center>
</body>
</html>

Latihan 8:

Menampilkan teks berdasarkan element BASEFONT:

Teks ini mempunyai size =1

Teks ini mempunyai size =2

Teks ini mempunyai size =3

Teks ini mempunyai size =4

Teks ini mempunyai size =5

Teks ini mempunyai size =6

Teks ini mempunyai size =7

Nama file: latihan2_8.html

<html>

<head>

<title>Latihan2-8</title>

</head>

<body>

<basefont size="1">Teks ini mempunyai size=1<br>

<basefont size="2">Teks ini mempunyai size=2<br>

<basefont size="3">Teks ini mempunyai size=3<br>

<basefont size="4">Teks ini mempunyai size=4<br>

<basefont size="5">Teks ini mempunyai size=5<br>

<basefont size="6">Teks ini mempunyai size=6<br>

<basefont size="7">Teks ini mempunyai size=7

</body>

</html>

Latihan 9:

Menampilkan teks dengan menggunakan element FONT:

Teks dengan format color=green; size=+2; face=verdana

Teks dengan format color=blue; size=6; face=georgia

Teks dengan format color=red; size=-1; face=courier

Nama file: latihan2_9.html

<html>

<head>

<title>Latihan2-9</title>

</head>

<body>

Teks dengan format color=green; size=+2; face=verdana<br>

</font>

Teks dengan format color=blue; size=6; face=georgia<br>

</font>

Teks dengan format color=red; size=-1; face=courier

</font>

</body>

</html>

Latihan 10

Menampilkan garis horizontal menggunakan elemen HR:

Nama file: latihan2_10.html

<html>

<head>

<title>Latihan2-10</title>

</head>

<body>

</body>

</html>

sekian tulisan dari saya
salam silaturahmi

bersambung ke belajar html 3-HTML Table ::

Laman

Selasa, 09 Oktober 2012

Belajar html 2 HTML FORMAT TEKS ::

Ini Heading-1

Ini Heading-2

Ini Heading-3

Ini Heading-4

Ini Heading-6

Tidak ada komentar:

Posting Komentar

joe film indonesia: