KBM

Senin, 25 Juli 2016

Modul  Praktikum Kls-8
Pert-1

Materi  :          

1.        Menjelaskan pengertian dari HTML.

  1. Memahami penggunaan Tag pada HTML.
3.       Memahami daftar-daftar Tag  di HTML.


Pengantar HTML
HTML adalah sebuah bahasa pemrograman yang digunakan untuk membuat sebuah halaman Web. Untuk menulis kode HTML digunakan editor teks seperti NotePad
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML, tampilan web kita akan terasa hambar. Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Namun sebelum anda belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
Defenisi WEB
Secara terminologi, website adalah kumpulan dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalam World Wide Web (WWW) di Internet. Sebuah halaman web adalah dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser.

Macam-macam web
-          Website statik
Sebuah Website statik, adalah salah satu bentuk website yang isi di dalam website tersebut tidak dimaksudkan untuk di update secara berkala, dan biasanya di maintain secara manual oleh beberapa orang yang menggunakan software editor.
-          website dynamic
Sebuah website dynamic adalah website yang secara berkala, informasi di dalamnya berubah, atau website ini bisa berhubungan dengan user dengan berbagai macam cara atau metode (HTTP cookies atau Variabel Database, sejarah kunjungan, variabel sesi dan lain-lain) bisa juga dengan cara interaksi langsung menggunakan form dan pergerakan mouse.

Struktruk program HTML
Struktur dasar HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/"). Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

Sebagai tanda awal dokumen HTML. Pasangan tag dan menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML

> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser a (pada title bar).</span></span><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-ansi-language: EN-US"><o:p></o:p></span></p> <p style="margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:42.55pt; margin-bottom:.0001pt;text-align:justify;text-indent:-42.55pt"> <span class="postbody"><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif""><body> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.</span></span><span class="postbody"><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-ansi-language:EN-US"><o:p></o:p></span></span></p> <p class="MsoNormal" style="margin-top:.25in;text-align:justify;mso-pagination: none;text-autospace:none"> <b><span lang="IN" style="font-size:10.0pt;font-family: "Century Gothic","sans-serif";mso-bidi-font-family:Tahoma">Cara Menuliskan Tag</span></b><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"> <b><o:p></o:p></b></span></p> <p class="MsoNormal" style="margin-top:9.0pt;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:.2pt">Nama tag ditulis di dalam tanda < dan >. Antara nama tag dan tanda < ditulis tanpa </span><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">spasi sama sekali. Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain, penulisan :<o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:12.6pt;margin-right:4.95in;margin-bottom: 0in;margin-left:.5in;margin-bottom:.0001pt;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma"><html> <html><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:.5in;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma"><html><o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:.15in;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:.1pt">dianggap sama. Namun umumnya nama tag ditulis dengan huruf kecil saja atau huruf kapital </span><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">saja.<o:p></o:p></span></p> <p class="MsoNormal"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-ansi-language:EN-US;mso-fareast-language:IN"> </span></p> <p class="MsoNormal" style="text-align:justify"> <b><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"">Tag-Tag Pada HTML<o:p></o:p></span></b></p> <p style="margin:0in;margin-bottom:.0001pt;text-align:justify"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-ansi-language: EN-US"> </span></p> <p class="MsoBodyText" style="margin-bottom:6.0pt"> <u><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Arial;mso-bidi-font-weight:bold">Tag HTML dasar</span></u><u><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Arial;mso-ansi-language:EN-US;mso-bidi-font-weight:bold"><o:p></o:p></span></u></p> <p class="MsoBodyText" style="margin-bottom:6.0pt"> <u><span style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Arial; mso-ansi-language:EN-US;mso-bidi-font-weight:bold">Latihan :  </span></u><span style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Arial; mso-ansi-language:EN-US;mso-bidi-font-weight:bold">Coba lah ketik scrip dibawah ini pada notepad :<o:p></o:p></span></p> <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="margin-left:.45pt;border-collapse:collapse;mso-table-layout-alt:fixed; mso-padding-alt:0in 0in 0in 0in"> <tbody> <tr style="mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes; height:92.45pt;mso-height-rule:exactly"> <td width="454" valign="top" style="width:340.2pt;border:solid black 1.0pt; padding:0in 0in 0in 0in;height:92.45pt;mso-height-rule:exactly"> <p class="MsoNormal" style="margin-top:.05in;margin-right:2.0in;margin-bottom: 0in;margin-left:.1in;margin-bottom:.0001pt;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: "Courier New";letter-spacing:-.3pt"><HTML</span><span style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:"Courier New"; letter-spacing:-.3pt;mso-ansi-language:EN-US">></span><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: "Courier New";letter-spacing:-.3pt"> </span><span style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:"Courier New"; letter-spacing:-.3pt;mso-ansi-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:.05in;margin-right:2.0in;margin-bottom: 0in;margin-left:.1in;margin-bottom:.0001pt;text-align:justify"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: "Courier New";letter-spacing:-1.0pt"><head><o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:0in;margin-right:.15in;margin-bottom: 0in;margin-left:.1in;margin-bottom:.0001pt;text-align:justify;tab-stops:200.7pt"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:"Courier New";letter-spacing:-1.0pt"><title>Latihan Pertama
Selamat Belajar HTML

   
Pert-2
Materi :
  1. Memahami cara penggunaan Tag dan atributnya.
  2. Memahami fungsi Tag untuk membuat paragraph.
  3. Memahami fungsi Tag untuk memanipulasi Font.

Atribut dalam Tag
Beberapa tag mengandung atribut di dalamnya.

Komentar
Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode HTML adalah sebagai keterangan. Sebuah komentar diawali dengan . Contoh :
<!— File komentar.htm
Dibuat pada tanggal 4 Juli 2016-->
Komentar< /TITLE><o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:0in;margin-right:3.0in;margin-bottom: 0in;margin-left:.05in;margin-bottom:.0001pt"> <span lang="IN" style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:"Courier New""></HEAD> <body><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:.05in"> <span lang="IN" style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:"Courier New""><!-- Ini juga komentar --><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:.05in"> <span lang="IN" style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:"Courier New"">Selamat Belajar HTML<o:p></o:p></span></p> <p class="MsoNormal" style="margin-top:0in;margin-right:3.0in;margin-bottom: .15in;margin-left:.05in"> <span lang="IN" style="font-size:10.0pt;font-family: "Century Gothic","sans-serif";mso-bidi-font-family:"Courier New""></BODY> </HTML><o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal" style="margin-top:27.0pt;line-height:131%"> <b><span lang="IN" style="font-size:10.0pt;line-height:131%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">Tag <br><o:p></o:p></span></b></p> <p class="MsoNormal" style="margin-top:.1in;margin-right:0in;margin-bottom:.15in; margin-left:0in;line-height:135%"> <span lang="IN" style="font-size:10.0pt; line-height:135%;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">Fungsi tag <br> adalah untuk membuat baris baru atau berpindah baris. </span><span style="font-size:10.0pt;line-height:135%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><o:p></o:p></span></p> <p class="separator" style="text-align: center; clear: both;"> </p> <p class="separator" style="text-align: center; clear: both;"> <a imageanchor="1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUIv0GjQlgq5GTZw0AUPBAli_NtWcw-1oponJougaiv8HVaHXHvbJMMWxG13pwrsXgbKJbQG8U5DTOafDHbbs9zK0o9w5Plqci2LyWa8OIjJYgQKHlwGZ_8AZxi7WPJ5O7yPOFZC94Bk/s1600/1A.jpg" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUIv0GjQlgq5GTZw0AUPBAli_NtWcw-1oponJougaiv8HVaHXHvbJMMWxG13pwrsXgbKJbQG8U5DTOafDHbbs9zK0o9w5Plqci2LyWa8OIjJYgQKHlwGZ_8AZxi7WPJ5O7yPOFZC94Bk/s640/1A.jpg" border="0" width="640" height="150"></a></p> <p class="MsoNormal" style="margin-top:.1in;margin-right:0in;margin-bottom:.15in; margin-left:0in;line-height:135%"> <br></p> <p class="MsoNormal" style="margin-top:.1in;margin-right:0in;margin-bottom:.15in; margin-left:0in;line-height:135%"> <span style="font-size:10.0pt;line-height: 135%;font-family:"Century Gothic","sans-serif";mso-ansi-language:EN-US; mso-fareast-language:IN">Buatlah tampilan dibawah in<o:p></o:p></span></p> <p class="separator" style="text-align: center; clear: both;"> </p> <p>  </p> <p class="separator" style="text-align: center; clear: both;"> </p> <p> <a imageanchor="1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii8vNeJmMWdhbStMPHKexeqEvfXZBsU2ut2eb2sRO77euIyTRZISpeBk-K8wcfpipJ7HOqqg2E7gkM_WkHRscaKCDBXGRVdQ3BiFi7tE9nyTj5L8X9MnG-j3-qjf8-oQtREgyDUJVeKzc/s1600/2A.jpg" style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii8vNeJmMWdhbStMPHKexeqEvfXZBsU2ut2eb2sRO77euIyTRZISpeBk-K8wcfpipJ7HOqqg2E7gkM_WkHRscaKCDBXGRVdQ3BiFi7tE9nyTj5L8X9MnG-j3-qjf8-oQtREgyDUJVeKzc/s640/2A.jpg" border="0" width="640" height="260"></a> <b><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"> </span></b></p> <p class="MsoNormal"> <b><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">Tag <p> </span></b><b><span style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma; mso-ansi-language:EN-US"><o:p></o:p></span></b></p> <p class="MsoNormal"> <b><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"> </span></b></p> <p class="MsoNormal"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">Tag <p> digunakan untuk membuat paragraf. </span><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;mso-ansi-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify"> <span lang="IN" style="font-size: 10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma; letter-spacing:-.15pt">dalam tag <p> bisa disertakan atribut ALIGN yang berguna untuk mengatur peletakan </span><span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma; letter-spacing:-.05pt">teks di dalam masing-masing baris. </span><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">yang dapat diisikan pada ALIGN yaitu :<o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:0in;text-indent:0in;mso-pagination:none; mso-list:l0 level1 lfo3;tab-stops:list .25in;text-autospace:none"> <!--[if !supportLists]--><span lang="IN" style="font-size:10.0pt;font-family:Symbol;mso-fareast-font-family: Symbol;mso-bidi-font-family:Symbol">·<span style="font-stretch: normal; font-size: 7pt; font-family: "Times New Roman";">         </span></span><!--[endif]--><span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma">LEFT, mengatur teks rata kiri terhadap halaman<o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:0in;text-indent:0in;mso-pagination:none; mso-list:l0 level1 lfo3;tab-stops:list .25in;text-autospace:none"> <!--[if !supportLists]--><span lang="IN" style="font-size:10.0pt;font-family:Symbol;mso-fareast-font-family: Symbol;mso-bidi-font-family:Symbol">·<span style="font-stretch: normal; font-size: 7pt; font-family: "Times New Roman";">         </span></span><!--[endif]--><span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma">RIGHT, mengatur teks rata kanan terhadap halaman<o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:.25in;text-indent:-.25in;mso-pagination: none;mso-list:l0 level1 lfo3;tab-stops:list .25in;text-autospace:none"> <!--[if !supportLists]--><span style="font-size:10.0pt;font-family:Symbol;mso-fareast-font-family:Symbol; mso-bidi-font-family:Symbol;mso-ansi-language:EN-US">·<span style="font-stretch: normal; font-size: 7pt; font-family: "Times New Roman";">         </span></span><!--[endif]--><span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma; letter-spacing:.1pt">JUSTIFY, mengatur teks rata kiri dan rata kanan. </span><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;mso-ansi-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:.25in;mso-pagination:none;text-autospace: none"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"> </span></p> <p class="MsoNormal"> <b><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">Tag Judul<o:p></o:p></span></b></p> <p class="MsoNormal" style="margin-top:.1in"> <span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma; letter-spacing:.3pt">HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang </span><span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :<o:p></o:p></span></p> <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;mso-table-layout-alt:fixed;mso-padding-alt: 0in 0in 0in 0in"> <tbody> <tr style="mso-yfti-irow:0;mso-yfti-firstrow:yes;height:11.05pt;mso-height-rule: exactly"> <td width="17" style="width:12.95pt;padding:0in 0in 0in 0in;height:11.05pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:11.05pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h1> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:11.05pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H1><o:p></o:p></span></p> </td> </tr> <tr style="mso-yfti-irow:1;height:12.0pt;mso-height-rule:exactly"> <td width="17" style="width:12.95pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h2> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H2><o:p></o:p></span></p> </td> </tr> <tr style="mso-yfti-irow:2;height:12.0pt;mso-height-rule:exactly"> <td width="17" style="width:12.95pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h3> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H3><o:p></o:p></span></p> </td> </tr> <tr style="mso-yfti-irow:3;height:12.0pt;mso-height-rule:exactly"> <td width="17" style="width:12.95pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h4> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:12.0pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H4><o:p></o:p></span></p> </td> </tr> <tr style="mso-yfti-irow:4;height:12.25pt;mso-height-rule:exactly"> <td width="17" style="width:12.95pt;padding:0in 0in 0in 0in;height:12.25pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:12.25pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h5> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:12.25pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H5><o:p></o:p></span></p> </td> </tr> <tr style="mso-yfti-irow:5;mso-yfti-lastrow:yes;height:14.9pt;mso-height-rule: exactly"> <td width="17" valign="top" style="width:12.95pt;padding:0in 0in 0in 0in; height:14.9pt;mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">•<o:p></o:p></span></p> </td> <td width="55" style="width:41.05pt;padding:0in 0in 0in 0in;height:14.9pt; mso-height-rule:exactly"> <p class="MsoNormal" align="center" style="text-align:center"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;letter-spacing:-.8pt"><h6> ...<o:p></o:p></span></p> </td> <td width="508" style="width:381.1pt;padding:0in 0in 0in 0in;height:14.9pt; mso-height-rule:exactly"> <p class="MsoNormal" align="right" style="margin-right:341.9pt;text-align:right"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma"></H6><o:p></o:p></span></p> </td> </tr> </tbody></table> <p class="MsoNormal" style="margin-bottom:6.2pt;line-height:1.0pt;mso-line-height-rule: exactly"> <span lang="IN" style="font-size:10.0pt;font-family:"Century Gothic","sans-serif""> </span></p> <p class="MsoNormal" style="margin-top:.35in;line-height:130%"> <b><span lang="IN" style="font-size:10.0pt;line-height:130%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma">Tag <</span></b><b><span style="font-size:10.0pt; line-height:130%;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;mso-ansi-language:EN-US">H</span></b><b><span lang="IN" style="font-size: 10.0pt;line-height:130%;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma">R><o:p></o:p></span></b></p> <p class="MsoNormal" style="margin-top:.1in;margin-right:0in;margin-bottom:.25in; margin-left:0in;text-align:justify"> <span lang="IN" style="font-size:10.0pt; font-family:"Century Gothic","sans-serif";mso-bidi-font-family:Tahoma">Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis <span style="letter-spacing:.15pt">horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag </span><hr> . </span><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif";mso-bidi-font-family: Tahoma;mso-ansi-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US;mso-bidi-font-weight:bold">Latihan :<o:p></o:p></span></p> <p class="MsoNormal"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US;mso-bidi-font-weight:bold"> </span></p> <p class="MsoNormal"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US;mso-bidi-font-weight:bold"> </span></p> <p class="MsoNormal"> <span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US;mso-bidi-font-weight:bold">Ketik skrip dibawah ini pada notepad atau notepad++ dan simpan dengan nama latihan2.html<o:p></o:p></span></p> <p class="MsoNormal"> <br></p> <p class="separator" style="text-align: center; clear: both;"> <a imageanchor="1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_lunRiEGGvJKtVypP8ONHGwEIaAJMl1C23y-PpYvcygscQmB4j8MU-mewE3xkEn7-m7e3Kvd0qkILWAua6Bz9IoixmbjzpmT-hpp9uKSATsX-tRd7EGC0BZ6qAq_3aUkm-w340Lp0YQ/s1600/3A.jpg" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_lunRiEGGvJKtVypP8ONHGwEIaAJMl1C23y-PpYvcygscQmB4j8MU-mewE3xkEn7-m7e3Kvd0qkILWAua6Bz9IoixmbjzpmT-hpp9uKSATsX-tRd7EGC0BZ6qAq_3aUkm-w340Lp0YQ/s640/3A.jpg" border="0" width="640" height="226"></a></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"> </span></b><b style="line-height: 125%;"><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US">Tampilannya :</span></b></p> <p class="MsoNormal"> <a imageanchor="1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhagoUNrtIwUtK-IRn9-b0E_QHeMxglRoSJguOOyXu5msAhKwdb6U5Wp_8KOQl8gHK7ZXBIYHFKegcgUbBuV3tM5ydOJdKG0-Wf1Np66wdpCOYiO86hGvVG7ayOBvN-1GhxzPAxG4vXi2s/s1600/4A.jpg" style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhagoUNrtIwUtK-IRn9-b0E_QHeMxglRoSJguOOyXu5msAhKwdb6U5Wp_8KOQl8gHK7ZXBIYHFKegcgUbBuV3tM5ydOJdKG0-Wf1Np66wdpCOYiO86hGvVG7ayOBvN-1GhxzPAxG4vXi2s/s640/4A.jpg" border="0" width="640" height="184"></a><span style="font-size:10.0pt;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US;mso-bidi-font-weight:bold"> </span></p> <p class="MsoNormal"> <br></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b>Tag <<span lang="IN"> B</span></b><b>> </b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.0pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold). <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Sintaks: <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:13.3pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"><b> </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN">            .......................... </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:12.65pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"></b></span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN"> </span></b></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b>Tag </b><b><<span lang="IN">I</span></b><b>></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.0pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Element I berfungsi untuk membuat tampilan teks tercetak miring (italic). <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Sintaks: <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:13.3pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"><i> </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN">            .......................... </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:12.65pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"></i></span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN"> </span></b></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b>Tag </b><b><<span lang="IN">U</span></b><b>></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.0pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline). <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:10.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN" style="font-size: 9pt;"> </span></p> <p class="MsoNormal" style="margin-left:23.3pt;line-height:14.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Sintaks: <o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:23.3pt;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN"><u> </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:23.3pt;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN">      .......................... </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="margin-left:23.3pt;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN"></u></span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b>Tag <<span lang="IN"> FONT</span></b><b>> </b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.0pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute <b>color</b> untuk merubah warna huruf, <b>face</b> untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan <b>size</b> untuk merubah ukuran huruf (pixel). <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <span lang="IN">Sintaks: <o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:13.3pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"><font color="warna" face="font" size="pixel"> </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;line-height:12.65pt;mso-line-height-rule: exactly;mso-pagination:none;mso-layout-grid-align:none;text-autospace:none"> <b><span lang="IN">            .......................... </span></b><span lang="IN"><o:p></o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-indent:.5in;line-height:12.0pt; mso-line-height-rule:exactly;mso-pagination:none;mso-layout-grid-align:none; text-autospace:none"> <b><span lang="IN"></font></span></b><span lang="IN"><o:p></o:p></span></p> <p> </p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US">Buatlah tampilan seperti di bawah ini<o:p></o:p></span></b></p> <p class="separator" style="text-align: center; clear: both;"> <a imageanchor="1" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTJ48SeA2IDwiku8sIIwVT-m9zovpBJt8WxECUO9hEaCDlKu21LWFqK8L3T57XnrB5g5AyMd1iIGs6sV6qQnL-MFAZJ-aJM8wgiWSZZPAOfuWhZsUVn-cJLSmO7FMGKyVIcDK5ctLuvw/s1600/5A.jpg" style="margin-left: 1em; margin-right: 1em;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggTJ48SeA2IDwiku8sIIwVT-m9zovpBJt8WxECUO9hEaCDlKu21LWFqK8L3T57XnrB5g5AyMd1iIGs6sV6qQnL-MFAZJ-aJM8wgiWSZZPAOfuWhZsUVn-cJLSmO7FMGKyVIcDK5ctLuvw/s640/5A.jpg" border="0" width="640" height="416"></a></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p> <p class="MsoNormal" style="margin-top:.3in;line-height:125%"> <b><span style="font-size:10.0pt;line-height:125%;font-family:"Century Gothic","sans-serif"; mso-bidi-font-family:Tahoma;mso-ansi-language:EN-US"><br></span></b></p>