tag dan format teks

23
Tag dan Format Teks Prak. Internet dan Web Rusmala Santi

Upload: kalin

Post on 24-Feb-2016

74 views

Category:

Documents


0 download

DESCRIPTION

Tag dan Format Teks. Prak . Internet dan Web Rusmala Santi. Penggunaan Tag Dasar. (Page), berguna untuk membuat paragraf baru atau pindah alenia (Line Break), digunakan untuk pindah ke baris baru - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Tag  dan  Format  Teks

Tag dan Format Teks

Prak. Internet dan WebRusmala Santi

Page 2: Tag  dan  Format  Teks

Penggunaan Tag Dasar

• <P> (Page), berguna untuk membuat paragraf baru atau pindah alenia

• <BR> (Line Break), digunakan untuk pindah ke baris baru

• <NOBR> (No line Break), teks yang ditulis sangat panjang tidak secara otomatis pindah pada baris dibawahnya

Page 3: Tag  dan  Format  Teks

Contoh: gantibaris.html<HTML><HEAD><TITLE>Perbedaan ganti baris dan paragraf</TITLE></HEAD><BODY>Belajar HTML<P>Sangat menyenangkan belajar HTML dan <BR>Kita akan menjadi mahir jika belajar dengan <BR>Sungguh-sungguh dan mencoba mencintainya<P>Selamat mencoba dan Sukses.<BR></BODY></HTML>

Page 4: Tag  dan  Format  Teks

Membuat garis horisontal

• <HR> (hosiontal) untuk membuat garis horisontal

Page 5: Tag  dan  Format  Teks

Contoh:garis.html<HTML><HEAD><TITLE>Perbedaan ganti baris dan paragraf</TITLE></HEAD><BODY>Belajar HTML<P><HR>Sangat menyenangkan belajar HTML dan <BR>Kita akan menjadi mahir jika belajar dengan <BR>Sungguh-sungguh dan mencoba mencintainya<P><HR>Selamat mencoba dan Sukses.<BR><HR></BODY></HTML>

Page 6: Tag  dan  Format  Teks

Tag Judul (Heading)

• Terdapat 6 buah tag:• <H1>…</H1>• <H2>…</H2>• <H3>…</H3>• <H4>…</H4>• <H5>…</H5>• <H6>…</H6>

Page 7: Tag  dan  Format  Teks

Contoh: judul.html<HTML><HEAD><TITLE>Perbedaan ganti baris dan paragraf</TITLE></HEAD><BODY><H1>Belajar HTML</H1><H2>Sangat menyenangkan belajar HTML dan </H2><H3>Kita akan menjadi mahir jika belajar dengan</H3><H4>Sungguh-sungguh dan mencoba mencintainya</H4><H5>Selamat mencoba dan Sukses</H5><H6>Salam dari ku untuk mu </H6></BODY></HTML>

Page 8: Tag  dan  Format  Teks

Perataan (Align)• <center> berguna untuk menempatkan dokumen tepat di

tengah layar• Atribut ALIGN berfungsi untuk perataan dokumen• ALIGN akan diikuti:• “center” untuk tengah• “left” untuk rata kiri• “right” untuk rata kanan• WIDTH untuk membuat garis horixontal dengan panjang

berbeda• SIZE untuk tebal tipisnya garis• NOSHADE garis tanpa bayangan

Page 9: Tag  dan  Format  Teks

Contoh: perataan.html<HTML><HEAD><TITLE>Posisi perataan dokumen<TITLE></HEAD><BODY><CENTER><H2>Posisi Netral</H2></CENTER><HR SIZE=5 WIDTH=150><H4 ALIGN=“left”>Posisi di kiri</H4><HR SIZE=1 WIDTH=80 ALIGN=“left”><H3 ALIGN=“center”>Posisi di tengah</H3><HR SIZE=3 WIDTH=350><H6 ALIGN=“right”>Posisi di kanan</H6><HR SIZE=1 WIDTH=80 ALIGN=“right”><CENTER>ditengah tanpa heading</CENTER><HR SIZE=4 NOSHADE></BODY></HTML>

Page 10: Tag  dan  Format  Teks

Format Teks• <B> Bold Text• <I> Italic Text• <U> Underline• <TT> Typewriter• <S> Strikeout• <PRE>Preformatted Text<DFN>Definition• <BLINK>Text berkedip• <STRONG> strong• <CITE> quoting text• <CODE> monospace font• <SAMP> monospace font• <KBD>monospace font• <BIG> ukuran teks akan lebih besar satu ukuran• <SMALL>ukuran teks akan lebih kecil satu ukuran• <SUP> superscript• <SUB> subscript• <ABBREV> Abbreviations• <ACRONYM>akronim• <PERSON> indexing• <Q> short inline quotation• <VAR>variabel name, italics

Page 11: Tag  dan  Format  Teks

Teks Preformat

• Biasanya diterapkan ketika susunan dokumen dibuat seperti menu

• <PRE>…</PRE>

Page 12: Tag  dan  Format  Teks

Contoh:preformat.html<HTML><HEAD><TITLE>membuat preformat</TITLE></HEAD><BODY><H2>Daftar Menu:</H2><PRE>Jus Jeruk……………… Rp. 6.000Jus Tomat……………… Rp. 7.000Jus Sirsak…………… Rp. 7.000Jus Mangga…………… Rp. 7.000Air Es……………………… Rp. 500------------------------------------</PRE>Kami juga menerima pesanan Jus Campur</BODY></HTML>

Page 13: Tag  dan  Format  Teks

Mengatur Font

• <FONT>…</FONT> untuk huruf• Atribut:• SIZE ukuran 1-7• FACE jenis atau nama font• COLOR warna font dengan nilai RGB/HEX atau

nama warna

Page 14: Tag  dan  Format  Teks

Contoh:jenisfont.html<HTML><HEAD><TITLE>Jenis Font</TITLE></HEAD><BODY>Ini adalah contoh font asli dan ukuran normal <BR><FONT FACE=“monotype corsiva”>Ini font Monotype Corsiva</FONT><BR><FONT FACE=“Arial”>Ini adalah Font Arial</FONT><BR><FONT FACE=“monotype corsiva” SIZE=“6”>Ini font monotype corsiva size 6</FONT><BR><FONT FACE=“Arial” SIZE=“5”>ini font arial size 5</FONT><BR></BODY></HTML>

Page 15: Tag  dan  Format  Teks

Warna font dan background

• <FONT> • Atribut: • COLOR untuk tulisan• BGCOLOR untuk warna latar teks

Page 16: Tag  dan  Format  Teks

Contoh:jeniswarna.html<HTML><HEAD><TITLE>Jenis Warna</TITLE></HEAD><BODY BGCOLOR=“black” TEXT=“white”>Warna putih<BR><FONT COLOR=“gray”>warna gray</FONT><BR><FONT SIZE=“1” COLOR=“blue”>warna blue</FONT><BR><FONT SIZE=“2” COLOR=“maroon”>warna maroon</FONT><BR><FONT SIZE=“3” COLOR=“red”>warna red</FONT><BR><FONT SIZE=“4” COLOR=“green”>warna green</FONT><BR><FONT SIZE=“5” COLOR=“#FFFF00”>warna yellow</FONT><BR><FONT SIZE=“6” COLOR=“#FF00FF”>warna Fuchsia</FONT><BR></BODY></HTML>

Page 17: Tag  dan  Format  Teks

Entitas Karakter dan Numerik

• Dokumen yang berupa karakter dan numerik juga bisa dibentuk sesuai dengan simbol-simbol tertentu

Page 18: Tag  dan  Format  Teks

Contoh:charkhusus.html

<HTML><HEAD><TITLE>Karakter Khusus</TITLE></HEAD><BODY><H2>Tentang Microsoft</H2>Nama Microsoft&reg&nbsp&nbsp&nbsp;terdapat versi&nbsp;&szlig;</BODY></HTML>

Page 19: Tag  dan  Format  Teks

Mengatur daftar item• <UL> jika tanpa ada tambahan tag lain maka fungsinya

hampir seperti tag <PRE>• Jika ditambah <LI> akan ada tambahan tanda bulatan (bullet)• Atribut TYPE untuk mendefinisikan bentuk bullet <UL

COMPACT TYPE=square>• 1: default number, 1, 2, 3• A:Huruf besar,A,B,C• a:huruf kecil,a,b,c• I:huruf romawi besar, I, II, III• i: huruf romawi kecil, i, ii, iii

Page 20: Tag  dan  Format  Teks

Contoh:bullet.html<HTML><HEAD><TITLE>membuat bullet</TITLE></HEAD><BODY><H2>Daftar Menu:</H2><UL><LI>Jus Jeruk……………… Rp. 6.000<BR><LI>Jus Tomat……………… Rp. 7.000<BR><LI>Jus Sirsak…………… Rp. 7.000<BR><LI>Jus Mangga…………… Rp. 7.000<BR><LI>Air Es……………………… Rp. 500<BR>------------------------------------</UL>Kami juga menerima pesanan Jus Campur</BODY></HTML>

Page 21: Tag  dan  Format  Teks

• <OL> jika menginginkan no urut • <DL>• <DT>• <DD>

Page 22: Tag  dan  Format  Teks

Contoh:nourut.html<HTML><HEAD><TITLE>membuat bullet</TITLE></HEAD><BODY><H2>Daftar Menu:</H2><OL><LI>Jus Jeruk……………… Rp. 6.000<BR><LI>Jus Tomat……………… Rp. 7.000<BR><LI>Jus Sirsak…………… Rp. 7.000<BR><LI>Jus Mangga…………… Rp. 7.000<BR><LI>Air Es……………………… Rp. 500<BR>------------------------------------</OL>Kami juga menerima pesanan Jus Campur</BODY></HTML>

Page 23: Tag  dan  Format  Teks

Contoh:zigzag.html<HTML><HEAD><TITLE>Membuat daftar secara zigzag</TITLE></HEAD><BODY><DL><DT>item pertama.<DD>penjelasan tentang item pertama.<DT>item kedua.<DD>penjelasan tentang item kedua.</DL></BODY></HTML>