SlideShare a Scribd company logo
1 of 6
PERTEMUAN 3
FORMAT ELEMENT TEXT PER BLOK
<P> TAG UNTUK PARAGRAPH
<P> digunakan untuk menampilkan satu blok text dalam bentuk paragraph, dimana blok text tersebut
diawali dengan <P> dan ditutup dengan </P>. Penggunaan tag </P> sebagai penutup akan
memastikan bahwa paragraph akan disertai dengan extra space (extra 1 baris kosong).
Contoh penulisan:
<PRE> TAG PRE- FORMATTED TEXT
<PRE> merupakan tag yang dapat digunakan untuk membuat satu blok tulisan yang tata letaknya
dapat kita atur sesuai keinginan kita, sesuai dengan tampilan pada saat pembuatan. Blok text tersebut
diawali dengan <PRE> dan ditutup dengan </PRE>.
<HTML>
<HEAD>
<TITLE>Tag P untuk Paragraph</TITLE>
</HEAD>
<BODY>
<P>pergunakan tag P untuk membuat paragraph. Element text yang dimulai
dengan tag Pakan dimulai pada baris baru, dan akan ditambahkan baris
kosong padanya.</P><P>ini adalah line break dengan extra baris kosong,
yang dibuat dengan tag P.<BR>Ini adalah line break yang dibuat dengan
tag BR, coba bandingkan dengan tag P.
</BODY>
</HTML>
<DIV> TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT
Tag <DIV> dapat digunakan untuk mengatur alignment satu blok text, apakah akan kita atur rata kiri
atau rata kanan atau tengah. Blok text tersebut diawali dengan <DIV> dan ditutup dengan </DIV>.
Sedangkan untuk pengaturan alignment diatur pada parameter tag <DIV> tersebut. Yaitu dengan
syntax : <DIV ALIGN="LEFT"|"CENTER"|"RIGHT">
<TITLE>Tag PRE untuk Pre-Formatted Text</TITLE>
</HEAD>
<BODY>
<PRE> To: Lee Smith From: Chris Brown Subject: Meeting schedule and agenda for
Web Site team Date: Thurs, 14 Aug 1997 22:00:05 9/20/97 8:00 a.m. Room 218
9/21/97 9:00 a.m. Room 218 9/22/97 2:00 p.m. Room 111 At the first meeting, we
should discuss how to use the &lt;STYLE&gt; tag to make our home page more
interesting. </PRE>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Tag DIV untuk Alignment Text</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=RIGHT>
<H1>Aligning a Block of Content to the Right</H1> <P>You can use a DIV tag to align a block of content to
the right.</P> <P>The content can include anything you like, including tables, images, lists, and so on. Note,
however, that right-aligned lists often do not look very neat.</P>
</DIV>
</BODY>
</HTML>
TAG – TAG UNTUK MEMFORMAT TEXT
<SPAN> TAG UNTUK MEMFORMAT TEXT DALAM BARIS
tag <SPAN> digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu
test lain dalm baris yang sama.
Syntax:
<SPAN STYLE="color:warna; font-weight:bold|Regular; font-style:italic|Normal">
<CENTER> TAG UNTUK CENTER TEXT
<HTML>
<HEAD>
<TITLE>Tag DIV untuk Alignment Text</TITLE>
</HEAD>
<BODY>
<P>Here is some normal paragraph text. It looks OK, but it would lookmuch better if it were <SPAN
STYLE="color:red; font-weight:bold; font-style:italic"> in bright, bold, italic merah. </SPAN>
</BODY>
</HTML>
<CENTER> akan menyebabkan text atau tulisan yang diapit oleh tag <CENTER> dan </CENTER>
akan diposisikan center atau ditengah – tengah secara horisontal.
</HEAD>
<BODY>
<CENTER><H1>Perguruan Tinggi Raharja</H1></CENTER>Selamat datang di
Jurusan Sistem Komputer CCIT
</BODY>
</HTML>
Latihan Berikutnya, coba anda tulis pada notepad jalankan dengan browsing
<html>
<body>
<pre>
<b>PUTUS ASA</b>
Hari ini...
Aku sedang belajar...
Belajar tentang HTML.
Sulit 'ntuk dimengerti,
Karena banyaknya teks-teks aneh.
Tapi biarlah...
Akan kucoba...
Sampai Bias eh Bisa.
</pre>
</body>
</html>
</body>
</html>

More Related Content

Viewers also liked

Viewers also liked (16)

Pertemuan11
Pertemuan11Pertemuan11
Pertemuan11
 
Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Tecnologia
TecnologiaTecnologia
Tecnologia
 
Pertemuan7
Pertemuan7Pertemuan7
Pertemuan7
 
Psychologie voor de management assistent
Psychologie voor de management assistentPsychologie voor de management assistent
Psychologie voor de management assistent
 
Redes Sociales
Redes Sociales
Redes Sociales
Redes Sociales
 
nơi nào dịch vụ giúp việc văn phòng chất lượng cao tphcm
nơi nào dịch vụ giúp việc văn phòng chất lượng cao tphcmnơi nào dịch vụ giúp việc văn phòng chất lượng cao tphcm
nơi nào dịch vụ giúp việc văn phòng chất lượng cao tphcm
 
CMT0010 Oct 2013 Better than Google
CMT0010 Oct 2013 Better than GoogleCMT0010 Oct 2013 Better than Google
CMT0010 Oct 2013 Better than Google
 
міс великобританія
міс великобританіяміс великобританія
міс великобританія
 
Pertemuan5
Pertemuan5Pertemuan5
Pertemuan5
 
6 sinif gormeengel
6 sinif gormeengel6 sinif gormeengel
6 sinif gormeengel
 
Pertemuan4
Pertemuan4Pertemuan4
Pertemuan4
 
nơi nào dịch vụ giúp việc văn phòng có kinh nghiệm tại tphcm
nơi nào dịch vụ giúp việc văn phòng có kinh nghiệm tại tphcmnơi nào dịch vụ giúp việc văn phòng có kinh nghiệm tại tphcm
nơi nào dịch vụ giúp việc văn phòng có kinh nghiệm tại tphcm
 
Rrrrrr
RrrrrrRrrrrr
Rrrrrr
 
Pertemuan8
Pertemuan8Pertemuan8
Pertemuan8
 
Around the world
Around the worldAround the world
Around the world
 

Similar to Pertemuan3

Materi_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.pptMateri_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.pptReynaldiAzhar1
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptcharismacholilia1
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptcigugurfree
 
Html link list
Html link listHtml link list
Html link listagung sy
 
materi html xii mm.ppt
materi html xii mm.pptmateri html xii mm.ppt
materi html xii mm.pptwafiilyas2
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahzakianadalina97
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2Nadya Olivia
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBTeukuMahawira
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno
 
04 materi table
04 materi table04 materi table
04 materi tableMenny SN
 

Similar to Pertemuan3 (20)

Rangkuman html
Rangkuman htmlRangkuman html
Rangkuman html
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
 
Materi_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.pptMateri_Pengenalan_HTML_Revisi.ppt
Materi_Pengenalan_HTML_Revisi.ppt
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.pptMateri_8_-_Pengenalan_HTML_-_Revisi.ppt
Materi_8_-_Pengenalan_HTML_-_Revisi.ppt
 
Modul HTML
Modul HTMLModul HTML
Modul HTML
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Html dasar 123
Html dasar 123Html dasar 123
Html dasar 123
 
3.modul css
3.modul css3.modul css
3.modul css
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
Html link list
Html link listHtml link list
Html link list
 
Modul css
Modul cssModul css
Modul css
 
materi html xii mm.ppt
materi html xii mm.pptmateri html xii mm.ppt
materi html xii mm.ppt
 
Modul web affif
Modul web affifModul web affif
Modul web affif
 
Tugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifahTugas laporan aplikasi web nova muhdalifah
Tugas laporan aplikasi web nova muhdalifah
 
Web html
Web htmlWeb html
Web html
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2
 
BAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEBBAB III - FORMAT TEXT DAN HALAMAN WEB
BAB III - FORMAT TEXT DAN HALAMAN WEB
 
Andino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web ProgrammingAndino Maseleno - Modul Web Programming
Andino Maseleno - Modul Web Programming
 
04 materi table
04 materi table04 materi table
04 materi table
 

Pertemuan3

  • 1. PERTEMUAN 3 FORMAT ELEMENT TEXT PER BLOK <P> TAG UNTUK PARAGRAPH <P> digunakan untuk menampilkan satu blok text dalam bentuk paragraph, dimana blok text tersebut diawali dengan <P> dan ditutup dengan </P>. Penggunaan tag </P> sebagai penutup akan memastikan bahwa paragraph akan disertai dengan extra space (extra 1 baris kosong). Contoh penulisan: <PRE> TAG PRE- FORMATTED TEXT <PRE> merupakan tag yang dapat digunakan untuk membuat satu blok tulisan yang tata letaknya dapat kita atur sesuai keinginan kita, sesuai dengan tampilan pada saat pembuatan. Blok text tersebut diawali dengan <PRE> dan ditutup dengan </PRE>. <HTML> <HEAD> <TITLE>Tag P untuk Paragraph</TITLE> </HEAD> <BODY> <P>pergunakan tag P untuk membuat paragraph. Element text yang dimulai dengan tag Pakan dimulai pada baris baru, dan akan ditambahkan baris kosong padanya.</P><P>ini adalah line break dengan extra baris kosong, yang dibuat dengan tag P.<BR>Ini adalah line break yang dibuat dengan tag BR, coba bandingkan dengan tag P. </BODY> </HTML>
  • 2. <DIV> TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT Tag <DIV> dapat digunakan untuk mengatur alignment satu blok text, apakah akan kita atur rata kiri atau rata kanan atau tengah. Blok text tersebut diawali dengan <DIV> dan ditutup dengan </DIV>. Sedangkan untuk pengaturan alignment diatur pada parameter tag <DIV> tersebut. Yaitu dengan syntax : <DIV ALIGN="LEFT"|"CENTER"|"RIGHT"> <TITLE>Tag PRE untuk Pre-Formatted Text</TITLE> </HEAD> <BODY> <PRE> To: Lee Smith From: Chris Brown Subject: Meeting schedule and agenda for Web Site team Date: Thurs, 14 Aug 1997 22:00:05 9/20/97 8:00 a.m. Room 218 9/21/97 9:00 a.m. Room 218 9/22/97 2:00 p.m. Room 111 At the first meeting, we should discuss how to use the &lt;STYLE&gt; tag to make our home page more interesting. </PRE> </BODY> </HTML> <HTML> <HEAD> <TITLE>Tag DIV untuk Alignment Text</TITLE> </HEAD> <BODY> <DIV ALIGN=RIGHT> <H1>Aligning a Block of Content to the Right</H1> <P>You can use a DIV tag to align a block of content to the right.</P> <P>The content can include anything you like, including tables, images, lists, and so on. Note, however, that right-aligned lists often do not look very neat.</P> </DIV> </BODY> </HTML>
  • 3. TAG – TAG UNTUK MEMFORMAT TEXT <SPAN> TAG UNTUK MEMFORMAT TEXT DALAM BARIS tag <SPAN> digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu test lain dalm baris yang sama. Syntax: <SPAN STYLE="color:warna; font-weight:bold|Regular; font-style:italic|Normal"> <CENTER> TAG UNTUK CENTER TEXT <HTML> <HEAD> <TITLE>Tag DIV untuk Alignment Text</TITLE> </HEAD> <BODY> <P>Here is some normal paragraph text. It looks OK, but it would lookmuch better if it were <SPAN STYLE="color:red; font-weight:bold; font-style:italic"> in bright, bold, italic merah. </SPAN> </BODY> </HTML>
  • 4. <CENTER> akan menyebabkan text atau tulisan yang diapit oleh tag <CENTER> dan </CENTER> akan diposisikan center atau ditengah – tengah secara horisontal. </HEAD> <BODY> <CENTER><H1>Perguruan Tinggi Raharja</H1></CENTER>Selamat datang di Jurusan Sistem Komputer CCIT </BODY> </HTML> Latihan Berikutnya, coba anda tulis pada notepad jalankan dengan browsing <html> <body> <pre> <b>PUTUS ASA</b> Hari ini... Aku sedang belajar... Belajar tentang HTML. Sulit 'ntuk dimengerti, Karena banyaknya teks-teks aneh. Tapi biarlah... Akan kucoba... Sampai Bias eh Bisa. </pre>