230 likes | 372 Views
Tag dan Format Teks. Prak . Internet dan Web Rusmala Santi. Penggunaan Tag Dasar. <P> (Page), berguna untuk membuat paragraf baru atau pindah alenia <BR> (Line Break), digunakan untuk pindah ke baris baru
E N D
Tag dan Format Teks Prak. Internet dan Web RusmalaSanti
Penggunaan Tag Dasar • <P> (Page), bergunauntukmembuatparagrafbaruataupindahalenia • <BR> (Line Break), digunakanuntukpindahkebarisbaru • <NOBR> (No line Break), teks yang ditulissangatpanjangtidaksecaraotomatispindahpadabarisdibawahnya
Contoh: gantibaris.html <HTML> <HEAD> <TITLE>Perbedaangantibarisdanparagraf</TITLE> </HEAD> <BODY> Belajar HTML<P> Sangatmenyenangkanbelajar HTML dan <BR> Kita akanmenjadimahirjikabelajardengan <BR> Sungguh-sungguhdanmencobamencintainya<P> SelamatmencobadanSukses.<BR> </BODY> </HTML>
Membuatgarishorisontal • <HR> (hosiontal) untukmembuatgarishorisontal
Contoh:garis.html <HTML> <HEAD> <TITLE>Perbedaangantibarisdanparagraf</TITLE> </HEAD> <BODY> Belajar HTML<P><HR> Sangatmenyenangkanbelajar HTML dan <BR> Kita akanmenjadimahirjikabelajardengan <BR> Sungguh-sungguhdanmencobamencintainya<P><HR> SelamatmencobadanSukses.<BR><HR> </BODY> </HTML>
Tag Judul (Heading) • Terdapat 6 buah tag: • <H1>…</H1> • <H2>…</H2> • <H3>…</H3> • <H4>…</H4> • <H5>…</H5> • <H6>…</H6>
Contoh: judul.html <HTML> <HEAD> <TITLE>Perbedaangantibarisdanparagraf</TITLE> </HEAD> <BODY> <H1>Belajar HTML</H1> <H2>Sangatmenyenangkanbelajar HTML dan </H2> <H3>Kita akanmenjadimahirjikabelajardengan</H3> <H4>Sungguh-sungguhdanmencobamencintainya</H4> <H5>SelamatmencobadanSukses</H5> <H6>Salam darikuuntuk mu </H6> </BODY> </HTML>
Perataan (Align) • <center> bergunauntukmenempatkandokumentepat di tengahlayar • Atribut ALIGN berfungsiuntukperataandokumen • ALIGN akandiikuti: • “center” untuktengah • “left” untuk rata kiri • “right” untuk rata kanan • WIDTH untukmembuatgarishorixontaldenganpanjangberbeda • SIZE untuktebaltipisnyagaris • NOSHADE garistanpabayangan
Contoh: perataan.html <HTML> <HEAD> <TITLE>Posisiperataandokumen<TITLE> </HEAD> <BODY> <CENTER><H2>PosisiNetral</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>ditengahtanpa heading</CENTER> <HR SIZE=4 NOSHADE> </BODY> </HTML>
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> ukuranteksakanlebihbesarsatuukuran • <SMALL>ukuranteksakanlebihkecilsatuukuran • <SUP> superscript • <SUB> subscript • <ABBREV> Abbreviations • <ACRONYM>akronim • <PERSON> indexing • <Q> short inline quotation • <VAR>variabel name, italics
Teks Preformat • Biasanyaditerapkanketikasusunandokumendibuatseperti menu • <PRE>…</PRE>
Contoh:preformat.html <HTML> <HEAD> <TITLE>membuat preformat</TITLE> </HEAD> <BODY> <H2>Daftar Menu:</H2> <PRE> Jus Jeruk……………… Rp. 6.000 Jus Tomat……………… Rp. 7.000 Jus Sirsak…………… Rp. 7.000 Jus Mangga…………… Rp. 7.000 Air Es……………………… Rp. 500 ------------------------------------ </PRE> Kami jugamenerimapesanan Jus Campur </BODY> </HTML>
Mengatur Font • <FONT>…</FONT> untukhuruf • Atribut: • SIZE ukuran 1-7 • FACE jenisataunama font • COLOR warna font dengannilai RGB/HEX ataunamawarna
Contoh:jenisfont.html <HTML> <HEAD> <TITLE>Jenis Font</TITLE> </HEAD> <BODY> Iniadalahcontoh font aslidanukuran normal <BR> <FONT FACE=“monotype corsiva”>Ini font Monotype Corsiva</FONT><BR> <FONT FACE=“Arial”>Iniadalah 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>
Warna font dan background • <FONT> • Atribut: • COLOR untuktulisan • BGCOLOR untukwarnalatarteks
Contoh:jeniswarna.html <HTML> <HEAD> <TITLE>JenisWarna</TITLE> </HEAD> <BODY BGCOLOR=“black” TEXT=“white”> Warnaputih<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>
EntitasKarakterdanNumerik • Dokumen yang berupakarakterdannumerikjugabisadibentuksesuaidengansimbol-simboltertentu
Contoh:charkhusus.html <HTML> <HEAD> <TITLE>KarakterKhusus</TITLE> </HEAD> <BODY> <H2>Tentang Microsoft</H2> NamaMicrosoft®   terdapatversi ß </BODY> </HTML>
Mengaturdaftar item • <UL> jikatanpaadatambahan tag lain makafungsinyahampirseperti tag <PRE> • Jikaditambah <LI> akanadatambahantandabulatan (bullet) • Atribut TYPE untukmendefinisikanbentuk 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 romawibesar, I, II, III • i: hurufromawikecil, i, ii, iii
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 jugamenerimapesanan Jus Campur </BODY> </HTML>
<OL> jikamenginginkan no urut • <DL> • <DT> • <DD>
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 jugamenerimapesanan Jus Campur </BODY> </HTML>
Contoh:zigzag.html <HTML> <HEAD> <TITLE>Membuatdaftarsecara zigzag</TITLE> </HEAD> <BODY> <DL> <DT>item pertama. <DD>penjelasantentang item pertama. <DT>item kedua. <DD>penjelasantentang item kedua. </DL> </BODY> </HTML>