Tag dan Format Teks
description
Transcript of Tag dan Format Teks
![Page 1: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/1.jpg)
Tag dan Format Teks
Prak. Internet dan WebRusmala Santi
![Page 2: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/2.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/3.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/4.jpg)
Membuat garis horisontal
• <HR> (hosiontal) untuk membuat garis horisontal
![Page 5: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/5.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/6.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/7.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/8.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/9.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/10.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/11.jpg)
Teks Preformat
• Biasanya diterapkan ketika susunan dokumen dibuat seperti menu
• <PRE>…</PRE>
![Page 12: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/12.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/13.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/14.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/15.jpg)
Warna font dan background
• <FONT> • Atribut: • COLOR untuk tulisan• BGCOLOR untuk warna latar teks
![Page 16: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/16.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/17.jpg)
Entitas Karakter dan Numerik
• Dokumen yang berupa karakter dan numerik juga bisa dibentuk sesuai dengan simbol-simbol tertentu
![Page 18: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/18.jpg)
Contoh:charkhusus.html
<HTML><HEAD><TITLE>Karakter Khusus</TITLE></HEAD><BODY><H2>Tentang Microsoft</H2>Nama Microsoft®   terdapat versi ß</BODY></HTML>
![Page 19: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/19.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/20.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/21.jpg)
• <OL> jika menginginkan no urut • <DL>• <DT>• <DD>
![Page 22: Tag dan Format Teks](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/22.jpg)
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](https://reader033.fdocument.pub/reader033/viewer/2022061606/56816616550346895dd96453/html5/thumbnails/23.jpg)
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>