Scribd
Unggah
13 tayangan3 halaman

HTML Format Teks

Dokumen ini menjelaskan penggunaan berbagai elemen HTML untuk pemformatan teks, termasuk elemen seperti BR, P, H1-H6, B, I, U, PRE, CENTER, BASEFONT, FONT, dan HR. Setiap elemen disertai dengan sintaks dan fungsinya, serta contoh latihan untuk menerapkan pemformatan tersebut. Tujuan dari materi ini adalah untuk membantu pemahaman tentang cara menampilkan teks dengan format yang diinginkan di halaman web.

Diunggah oleh

maya.natarina47
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
13 tayangan3 halaman

HTML Format Teks

Dokumen ini menjelaskan penggunaan berbagai elemen HTML untuk pemformatan teks, termasuk elemen seperti BR, P, H1-H6, B, I, U, PRE, CENTER, BASEFONT, FONT, dan HR. Setiap elemen disertai dengan sintaks dan fungsinya, serta contoh latihan untuk menerapkan pemformatan tersebut. Tujuan dari materi ini adalah untuk membantu pemahaman tentang cara menampilkan teks dengan format yang diinginkan di halaman web.

Diunggah oleh

maya.natarina47
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

<u>

HTML FORMAT TEKS ..........................


</u>
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat ELEMENT PRE (Preformated text)
memahami penggunaan element-element untuk pemformatan Element PRE berfungsi untuk menampilkan teks seperti apa
teks. adanya.
MATERI: Sintaks:
Element BR(line break), Element P(paragraph), Element <pre>
H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), ..........................
Element U(underline), Element PRE(preformated text), Element </pre>
CENTER, Element BASEFONT, Element FONT, Element
HR(horizontal rule)

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak ELEMENT CENTER
mempunyai tag penutup. Element CENTER berfungsi untuk menampilkan teks dengan
posisi horizontal ditengah.
Sintaks:
<br> Sintaks:
<center>
ELEMENT P (Paragraph) ..........................
Element P berfungsi untuk ganti paragraf yang diikuti dengan </center>
baris kosong di awal dan akhir paragraf. Tag penutup </p>
sifatnya optional jika suatu paragraf diikuti oleh paragraf ELEMENT BASEFONT
berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan Element BASEFONT berfungsi untuk merubah dasar ukuran
diikuti dengan baris kosong di akhir paragraf. huruf tampilan dari web browser. Attribute dari element ini adalah
Element P mempunyai attribute yaitu align yang bernilai "left", size yang merupakan ukuran huruf dengan nilai "1" sampai
"center", "right" yang menspesifikasikan posisi tepi horizontal dari dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default
paragraf (default: "left"). nya adalah "3" pixel. Element ini tidak mempunyai tag penutup.
Sintaks: Sintaks:
<p align="left"|"center"|"right"> <basefont size="pixel">
..........................
</p> ELEMENT FONT
Element FONT berfungsi untuk merubah jenis, ukuran dan warna
ELEMENT H1,H2,H3,H4,H5,H6 (Header) dari tampilan huruf. Element ini mempunyai attribute color untuk
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat merubah warna huruf, face untuk merubah jenis huruf (jika lebih
header dengan format 6 jenis ukuran huruf dan tercetak tebal. dari satu jenis huruf, harus dibatasi dengan koma), dan size
Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. untuk merubah ukuran huruf (pixel).
Element ini mempunyai attribute yaitu align yang bernilai "left",
"center", "right" yang menspesifikasikan posisi horizontal dari Sintaks:
header (default: "left"). <font color="warna" face="font" size="pixel">
..........................
Sintaks: </font>
<hx align="left"|"center"|"right">
.......................... ELEMENT HR (Horizontal Rule)
</hx> Element HR berfungsi untuk membuat suatu garis horizontal.
Element ini tidak mempunyai tag penutup dan mempunyai
x : 1 ... 6 attribute align untuk menempatkan posisi secara horizontal
("left", "center", "right"), size untuk ukuran ketebalan garis
ELEMENT B (Bold) ("pixel"), width untuk ukuran panjang garis ("persen"), dan
Element B berfungsi untuk membuat tampilan teks tercetak tebal noshade (garis solid).
(bold).
Sintaks:
Sintaks: <hr align="left"|"center"|"right" size="pixel" width="persen"
<b> noshade>
..........................
</b> LATIHAN
ELEMENT I (Italic) Gunakan teks editor misalkan "Notepad" untuk menyunting dan
Element I berfungsi untuk membuat tampilan teks tercetak miring menyimpan script latihan di bawah ini. Untuk melihat hasilnya
(italic). bukalah file tersebut dengan menggunakan web browser atau
gunakan editor yang telah tersedia pada modul ini dengan
Sintaks: mengklik menu Editor.
<i>
.......................... Latihan 1:
</i> Menampilkan teks dengan ganti baris (element BR):
ELEMENT U (Underline) Belajar bahasa pemrograman web. Dengan
Element U berfungsi untuk membuat tampilan teks tercetak garis materi dasar HTML. Dan JSP
bawah (underline).
Belajar bahasa pemrograman web.
Sintaks: Dengan materi dasar HTML.
Dan JSP. Ini Heading-4

Nama file: latihan2_1.html Ini Heading-5

<html> Ini Heading-6


<head>
<title>Latihan2-1</title> Nama file: latihan2_4.html
</head>
<body> <html>
Belajar bahasa pemgrograman web. Dengan mater dasar HTML. <head>
Dan JSP. <br> <title>Latihan2-4</title>
<br>Belajar bahasa pemrograman web.<br>Dengan materi </head>
dasar HTML.<br>Dan JSP. <body>
</body> <h1>Ini Heading-1</h1>
</html> <h2>Ini Heading-2</h2>
<h3>Ini Heading-3</h3>
Latihan 2: <h4>Ini Heading-4</h4>
Menampilkan teks dalam bentuk paragraf (element P): <h5>Ini Heading-5</h5>
<h6>Ini Heading-6</h6>
Tampilan teks sebelum paragraf. </body>
</html>
Tampilan teks paragraf pertama.
Tugas tambahan:
Tampilan teks paragraf kedua. Tempatkanlah tampilan isi element H3 di kanan dan H5 di
tengah.
Tampilan teks setelah paragraf.
Latihan 5:
Nama file: latihan2_2.html Menampilkan teks dalam format tebal, miring dan garis bawah:

Ini normal teks


<html> Ini teks tercetak tebal (bold)
<head> Ini teks tercetak miring (italic)
<title>Latihan2-2</title> Ini teks tercetak garis bawah (underline)
</head>
<body> Nama file: latihan2_5.html
Tampilan teks sebelum paragraf.
<p>Tampilan teks paragraf pertama.</p> <html>
<p>Tampilan teks paragraf kedua.</p> <head>
Tampilan teks setelah paragraf. <title>Latihan2-5</title>
</body> </head>
</html> <body>
Ini normal teks<br>
Tugas tambahan: <b>Ini teks tercetak tebal (bold)</b><br>
Gantilah setiap tag </p> dengan element BR, dan lihat hasilnya. <i>Ini teks tercetak miring (italic)</i><br>
<u>Ini teks tercetak garis bawah (underline)</u>
Latihan 3: </body>
Menampilkan posisi horizontal kelurusan paragraf: </html>

Paragraf ini pada posisi rata kiri (default) Tugas tambahan:


Paragraf ini pada posisi rata tengah Buat teks tercetak miring dan tebal.
Paragraf ini pada posisi rata kanan Buat teks tercetak miring, tebal dan bergaris bawah.
Paragraf ini pada posisi rata kiri
Latihan 6:
Nama file: latihan2_3.html Menampilkan teks dalam bentuk apa adanya (element PRE):

<html> Ini bentuk penulisan preformated text


<head> apapun bentuknya tulisan ini akan ditampilkan pada web browser
<title>Latihan2-3</title> seperti apa adanya, alias yang ditulis
</head>
<body> Nama file: latihan2_6.html
<p>Paragraf ini pada posisi rata kiri (default)</p>
<p align="center">Paragraf ini pada posisi rata tengah</p> <html>
<p align="right">Paragraf ini pada posisi rata kanan</p> <head>
<p align="left">Paragraf ini pada posisi rata kiri</p> <title>Latihan2-6</title>
</body> </head>
</html> <body>
<pre>
Latihan 4: Ini bentuk penulisan preformated text
Menampilkan teks sebagai header (element H): apapun bentuknya tulisan ini akan ditampilkan pada web browser
Ini Heading-1 seperti apa adanya, alias yang ditulis

Ini Heading-2 </pre>


</body>
Ini Heading-3 </html>
Latihan 7: Latihan 10:
Menampilkan teks pada posisi tengah jendela web browser Menampilkan garis horizontal menggunakan elemen HR:
(element CENTER):
--------------------------------------------------------------------------------
Teks ini terletak di tengah layar web browser --------------------------------------------------------------------------------
dengan menggunakan element CENTER
Nama file: latihan2_10.html
Nama file: latihan2_7.html
<html>
<html> <head>
<head> <title>Latihan2-10</title>
<title>Latihan2-7</title> </head>
</head> <body>
<body> <hr align="left" size="6" width="30%">
<center> <hr align="left" size="6" width="30%" noshade>
Teks ini terletak di tengah layar web browser<br> </body>
dengan menggunakan element CENTER </html>
</center>
</body> Tugas tambahan:
</html> Buatlah garis horizontal di bawah ini dengan size=5, align=center
dengan urutan width 40%, 20%, 10%:
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=fuchia; size=+2; face=verdana


Teks dengan format color=gray; size=6; face=algerian
Teks dengan format color=red; size=-1; face=impact

Nama file: latihan2_9.html

<html>
<head>
<title>Latihan2-9</title>
</head>
<body>
<font color="fuchsia" size="+2" face="verdana">
Teks dengan format color=fuchsia; size=+2; face=verdana<br>
</font>
<font color="gray" size="6" face="algerian">
Teks dengan format color=gray; size=6; face=algerian<br>
</font>
<font color="red" size="-1" face="impact">
Teks dengan format color=red; size=-1; face=impact
</font>
</body>
</html>

Anda mungkin juga menyukai