Google Translate
Arabic Korean Japanese Chinese Simplified Russian Portuguese English French German Spain Italian Dutch

Selasa, 09 Oktober 2012

Belajar html 2 HTML FORMAT TEKS ::


salam silaturahmi
  • 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> 
<font color="green" size="+2" face="verdana"> 
Teks dengan format color=green; size=+2; face=verdana<br> 
</font>
<font color="blue" size="6" face="georgia"> 
Teks dengan format color=blue; size=6; face=georgia<br> 
</font> 
<font color="red" size="-1" face="courier"> 
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> 
<hr align="left" size="6" width="60%"> 
<hr align="left" size="6" width="30%" noshade> 
</body> 
</html>

sekian tulisan dari saya
salam silaturahmi

bersambung ke belajar html 3-HTML Table ::

Tidak ada komentar:

Posting Komentar