tag dan format teks
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 PresentationTRANSCRIPT
Tag dan Format Teks
Prak. Internet dan WebRusmala Santi
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
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>
Membuat garis horisontal
• <HR> (hosiontal) untuk membuat garis horisontal
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>
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>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>
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
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>
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
Teks Preformat
• Biasanya diterapkan ketika susunan dokumen dibuat seperti menu
• <PRE>…</PRE>
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>
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
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>
Warna font dan background
• <FONT> • Atribut: • COLOR untuk tulisan• BGCOLOR untuk warna latar 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>
Entitas Karakter dan Numerik
• Dokumen yang berupa karakter dan numerik juga bisa dibentuk sesuai dengan simbol-simbol tertentu
Contoh:charkhusus.html
<HTML><HEAD><TITLE>Karakter Khusus</TITLE></HEAD><BODY><H2>Tentang Microsoft</H2>Nama Microsoft®   terdapat versi ß</BODY></HTML>
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
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>
• <OL> jika menginginkan 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 juga menerima pesanan Jus Campur</BODY></HTML>
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>