SlideShare a Scribd company logo
CSS Tutorial                                                           rosihanari.net


Perataan Teks (Text Alignment)

Anda dapat mengatur perataan teks dengan menggunakan properti

text-align : jenis;

dengan value jenis dapat digantikan dengan left, center, right dan justify.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>

<style type="text/css">

#p1 {
           text-align : center;
     }

#p2 {
           text-align : justify;
     }

#p3 {
           text-align : right;
     }

</style>
</head>

<body>

<h1>Ini Judul Heading</h1>

<p id="p1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah
paragraf 1. Ini adalah paragraf 1. </p>

<p id="p2">Ini adalah paragraf 2. Ini adalah paragraf                     2. Ini adalah
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf                    2. Ini adalah
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf                    2. Ini adalah
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.                 </p>

<p id="p3">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah



Perataan Teks (Text Alignment)                                                       36
CSS Tutorial                                                      rosihanari.net


paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p>

</body>
</html>




Jenis perataan yang digunakan pada contoh di atas adalah rata tengah untuk paragraf
pertama, rata kanan kiri (justify) untuk paragraf kedua dan rata kanan untuk paragraf
ketiga.




Perataan Teks (Text Alignment)                                                    37

More Related Content

PDF
Css tutorial-13
PDF
Spirala
PDF
Frankreich Angebot ausgebaut[1].pdf
PDF
Cartillas 2009
DOC
Global hospitality industry mid term
DOC
Taller nº 4 guía de investigación guiada de los seres vivos
DOC
Resumo - Desenvolvimento comparado America Latina e Asia de carlos alonso bar...
PDF
INITIAL PL BROCHURE HD_es
Css tutorial-13
Spirala
Frankreich Angebot ausgebaut[1].pdf
Cartillas 2009
Global hospitality industry mid term
Taller nº 4 guía de investigación guiada de los seres vivos
Resumo - Desenvolvimento comparado America Latina e Asia de carlos alonso bar...
INITIAL PL BROCHURE HD_es

Viewers also liked (14)

PPT
The Kauli Projekt
PPTX
Mantenimientos de computadores bre
PDF
LiveBook and LivePlanner
PDF
Naval Hospital Camp Lejeune 2011-b.f2-corridor
PPTX
Pandas
DOC
Paintings represnt heard break
DOCX
Leyenda: La porrista
PPTX
Un amigo es con quien se puede no 001
PPT
Shinji
PPT
ganamores
PDF
practicas
PPTX
Presentacion present continuos
DOCX
Bài giải
The Kauli Projekt
Mantenimientos de computadores bre
LiveBook and LivePlanner
Naval Hospital Camp Lejeune 2011-b.f2-corridor
Pandas
Paintings represnt heard break
Leyenda: La porrista
Un amigo es con quien se puede no 001
Shinji
ganamores
practicas
Presentacion present continuos
Bài giải
Ad

Similar to Css tutorial-15 (9)

PDF
Css tutorial-11
PDF
Css tutorial-15
PDF
Css tutorial-10
PDF
Css tutorial-07
PDF
Css tutorial-09
PDF
Css tutorial-14
PDF
Css tutorial-12
PDF
Css tutorial-12 2
PDF
Css tutorial-10
Css tutorial-11
Css tutorial-15
Css tutorial-10
Css tutorial-07
Css tutorial-09
Css tutorial-14
Css tutorial-12
Css tutorial-12 2
Css tutorial-10
Ad

More from Dani Imansyah (15)

PDF
Tutorial joomla1.5.x
PDF
Tutorial lan
PDF
Css tutorial-20
PDF
Css tutorial-19
PDF
Css tutorial-18
PDF
Css tutorial-17
PDF
Css tutorial-16
PDF
Css tutorial-14
PDF
Css tutorial-08
PDF
Css tutorial-06
PDF
Css tutorial-05
PDF
Css tutorial-04
PDF
Css tutorial-03
PDF
Css tutorial-02
PDF
Css tutorial-01
Tutorial joomla1.5.x
Tutorial lan
Css tutorial-20
Css tutorial-19
Css tutorial-18
Css tutorial-17
Css tutorial-16
Css tutorial-14
Css tutorial-08
Css tutorial-06
Css tutorial-05
Css tutorial-04
Css tutorial-03
Css tutorial-02
Css tutorial-01

Recently uploaded (9)

PDF
Modul_Pemula_Merakit_Komputer untuk smppdf
PPTX
Materi_Array_Karakter_String untuk kelas XI sma.pptx
PPTX
Implementasi Microservices pada Manufaktur
PDF
Rekomendasi Riset Lanjutan : perspektif_futurologis.pdf
PPT
pengantar-sistem-informasi manajemen.ppt
DOCX
Keutuhan Aplikasi Konsep dan Praktik dalam Upaya menciptakan aplikasi Anti Vi...
PPTX
Peranan AI dalam Dunia Pendidikan dan Industri Aplikasinya
PPTX
Materi asdsa asd asd sad sa dsa dsa d sa
DOCX
Antivirus Versi.FULL.JALiN.KB.PRO Keutuhan Aplikasi Konsep dan Praktik dalam ...
Modul_Pemula_Merakit_Komputer untuk smppdf
Materi_Array_Karakter_String untuk kelas XI sma.pptx
Implementasi Microservices pada Manufaktur
Rekomendasi Riset Lanjutan : perspektif_futurologis.pdf
pengantar-sistem-informasi manajemen.ppt
Keutuhan Aplikasi Konsep dan Praktik dalam Upaya menciptakan aplikasi Anti Vi...
Peranan AI dalam Dunia Pendidikan dan Industri Aplikasinya
Materi asdsa asd asd sad sa dsa dsa d sa
Antivirus Versi.FULL.JALiN.KB.PRO Keutuhan Aplikasi Konsep dan Praktik dalam ...

Css tutorial-15

  • 1. CSS Tutorial rosihanari.net Perataan Teks (Text Alignment) Anda dapat mengatur perataan teks dengan menggunakan properti text-align : jenis; dengan value jenis dapat digantikan dengan left, center, right dan justify. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css"> #p1 { text-align : center; } #p2 { text-align : justify; } #p3 { text-align : right; } </style> </head> <body> <h1>Ini Judul Heading</h1> <p id="p1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p> <p id="p2">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> <p id="p3">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah Perataan Teks (Text Alignment) 36
  • 2. CSS Tutorial rosihanari.net paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> </body> </html> Jenis perataan yang digunakan pada contoh di atas adalah rata tengah untuk paragraf pertama, rata kanan kiri (justify) untuk paragraf kedua dan rata kanan untuk paragraf ketiga. Perataan Teks (Text Alignment) 37