Praktikum

HTML HYPERLINK

<h3>
<br /><b>OBJEKTIF:</b></h3>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web.</div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<b>MATERI:</b></h3>
Element A<br />
<br />
<h3>
<b>ELEMENT A</b></h3>
Element A befungsi untuk <span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span>menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute <span style="font-weight: bold;">href</span>, <span style="font-weight: bold;">name</span>, dan <span style="font-weight: bold;">target</span>.  Attribute <span style="font-weight: bold;">href</span> berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute <span style="font-weight: bold;">name</span> berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute <span style="font-weight: bold;">target</span> berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.<br />
<br />
Sintaks:<br />
<span style="color: #330099; font-weight: bold;"><a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self"><br />   ...........................<br /></a></span><br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"><br /></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;">Contoh :</span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"><br /></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"><br /></span></div>
<table border="1" cellpadding="2" cellspacing="2" style="background-color: #ccccff; height: 153px; width: 465px;"><tbody>
<tr><td><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"><html></span><br />
<span style="color: #330099; font-weight: bold;"><head></span><br />
<span style="color: #330099; font-weight: bold;"><title>Latihan Hyperlink</title></span><br />
<span style="color: #330099; font-weight: bold;"></head></span><br />
<span style="color: #330099; font-weight: bold;"><body></span><span style="color: #330099; font-weight: bold;">Link:<br /><ol><br /><li><a href="http://www.yahoo.com" target="_blank">yahoo</a></li><br /><li><a href="http://www.google.com" </span><span style="color: #330099; font-weight: bold;">target="_self"</span><span style="color: #330099; font-weight: bold;">>google</a></li></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"><li><a href="http://ums.ac.id"</span><span style="color: #330099; font-weight: bold;">>UMS </a></li></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099; font-weight: bold;"></ol><br /></body></span><br />
<span style="color: #330099; font-weight: bold;"></html></span></div>
<div>
<span style="color: #330099; font-weight: bold;"><br /></span></div>
</td></tr>
</tbody></table>
<br />
<div>
Hasil :</div>
<html>
<head>
<title>Latihan Hyperlink</title>
</head>
<body>
Link:
<ol>
<li><a href="http://www.yahoo.com/" target="_blank">yahoo</a></li>
<li><a href="http://www.google.com/" target="_self">google</a></li>
<li><a href="http://ums.ac.id/">UMS </a></li>
</ol>
</body>
</html>
<br />
<div>
<br /></div>

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web. MATERI: Element A ELEMENT A Element A befungsi untuk menghubungkan ke internal ataupun eks…

HTML IMAGE (GAMBAR)

20:52 Wahana Solo 0

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk menampilkan gambar. MATERI: Element IMG (Image) ELEMENT IMG Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penut…

HTML TABEL

20:09 Wahana Solo 0

<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWuUGezoJp98-AqkYbCsCcjMwtuhTEIcfZCzQ-oO_JOWW6USpCT-yjCKCPB8urHn0cchIgMASUyInkICDxVTJnBi-swv23na3CqDy4d3jhL0gjpF_g73vX-yl9mDV-OAylDSkt3n6bL0/s1600/tabel.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWuUGezoJp98-AqkYbCsCcjMwtuhTEIcfZCzQ-oO_JOWW6USpCT-yjCKCPB8urHn0cchIgMASUyInkICDxVTJnBi-swv23na3CqDy4d3jhL0gjpF_g73vX-yl9mDV-OAylDSkt3n6bL0/s200/tabel.jpg" width="200" /></a></div>
<h3>
<b>OBJEKTIF:</b></h3>
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan tabel.<br />
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<b>MATERI:</b></h3>
Element TABLE, Element CAPTION, Element TH(table header), Element TR(table row), Element TD(table data)<br />
<br />
<br />
<br />
<h3>
<b>ELEMENT TABLE</b></h3>
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti <span style="font-weight: bold;">align</span>, <span style="font-weight: bold;">bgcolor</span>, <span style="font-weight: bold;">border</span>, <span style="font-weight: bold;">cellpadding</span>(jarak antara tepi sel dengan isi sel), <span style="font-weight: bold;">cellspacing</span>(jarak antara sel), <span style="font-weight: bold;">width</span>(lebar tabel), <span style="font-weight: bold;">height</span>(tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD.<br />
<br />
Sintaks:<br />
<span style="color: #330099; font-weight: bold;"><table<br />   align="left"|"center"|"right" ........................<br /></table></span><br />
<br />
<br />
<b>ELEMENT CAPTION </b><br />
Element CAPTION berfungsi untuk membuat <span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span>judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute <span style="font-weight: bold;">align</span> dengan nilai <span style="font-weight: bold;">top</span>(judul terletak di atas tabel), dan <span style="font-weight: bold;">bottom</span>(judul terletak di bawah tabel).<br />
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><caption  align="top"|"bottom"></span><br style="color: #330099;" /><span style="color: #330099;">      ..........................</span><br style="color: #330099;" /><span style="color: #330099;"></caption></span></span><br />
<br />
<h3>
<b>ELEMENT TR (Table Row)</b></h3>
Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah <span style="font-weight: bold;">align</span>, <span style="font-weight: bold;">valign</span>(posisi vertikal), dan <span style="font-weight: bold;">bgcolor</span>.<span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><br />
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><tr<br />   align="left"|"center"|"right"<br />   valign="top"|"middle"|"bottom"<br />   bgcolor="color"></span><br style="color: #330099;" /><span style="color: #330099;">      ..........................</span><br style="color: #330099;" /><span style="color: #330099;"></tr<span style="color: red;"></span>></span></span><span style="color: red; font-weight: bold;"></span><br />
<br />
<br />
<h3>
<b>ELEMENT TH (Table Header) dan TD (Table Data)</b></h3>
Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR<span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><span style="font-weight: bold;">. </span>Attribute kedua element ini adalah <span style="font-weight: bold;">align</span>, <span style="font-weight: bold;">valign</span>, <span style="font-weight: bold;">bgcolor</span>, <span style="font-weight: bold;">colspan</span>, <span style="font-weight: bold;">rowspan</span><br />
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><th<br />   align="left"|"center"|"right"<br />   valign="top"|"middle"|"bottom"<br />   bgcolor="color"<br />   colspan="number"<br />   rowspan="number"></span><br style="color: #330099;" /><span style="color: #330099;">    .............Konten.............</span><br style="color: #330099;" /><span style="color: #330099;"></th<span style="color: red;"></span>></span></span><span style="color: red; font-weight: bold;"></span><br />
<span style="font-weight: bold;"><span style="color: #330099;"><br /><td<br />   align="left"|"center"|"right"<br />   valign="top"|"middle"|"bottom"<br />   bgcolor="color"<br />   colspan="number"<br />   rowspan="number"></span><br style="color: #330099;" /><span style="color: #330099;">      ............Konten..............</span><br style="color: #330099;" /><span style="color: #330099;"></td<span style="color: red;"></span>></span></span><br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span></div>

HTML Pemrogramana Web Dasar HTML TABEL

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan tabel. MATERI: Element TABLE, Element CAPTION, Element TH(table header), Element TR(table row), Element TD(table data) ELEMENT TABLE E…

HTML DAFTAR URUTAN

19:56 Wahana Solo 0

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghbJNrZ9wIAiHYSGlkMUZUwxz4bDLbEgmhtRAHo78sbncom_bxJ2ZnwXjtamrmxqEvB5eOb7YjxX-gnNu0PC4ClCcce2c5mTwfJo0KixlFmPNAtcyCRO-n-uDzhxf_utSxvs6UEv76Ft0/s1600/list.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghbJNrZ9wIAiHYSGlkMUZUwxz4bDLbEgmhtRAHo78sbncom_bxJ2ZnwXjtamrmxqEvB5eOb7YjxX-gnNu0PC4ClCcce2c5mTwfJo0KixlFmPNAtcyCRO-n-uDzhxf_utSxvs6UEv76Ft0/s200/list.jpg" width="200" /></a></div>
<h3>
<b>OBJEKTIF:</b></h3>
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.<br />
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<b>MATERI:</b></h3>
Element OL(ordered list), Element UL(unordered list), Element LI(list item).<br />
<br />
<h3>
<b>ELEMENT OL (Orderd List)</b></h3>
Element OL<span style="font-weight: bold;"></span><span style="font-style: italic;"></span> berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu <b>start</b>, dan <b>type</b>. Attribute <b>start</b> berfungsi untuk memberikan nilai awal dari daftar urutan, attribute <b>type</b> berfungsi untuk memilih bentuk daftar urutan yaitu <b>A</b> untuk abjad huruf besar, <b>a</b> untuk abjad huruf kecil, <b>I</b> untuk abjad romawi besar, <b>i</b> untuk abjad romawi kecil, <b>1</b> untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.<br />
<br />
Sintaks:<br />
<span style="color: #330099; font-weight: bold;"><ol start="number" type="A"|"a"|"I"|"i"|"1">........................</ol></span><br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br /></div>
<div>
<h3>
<b>ELEMENT UL (Unordered List)</b></h3>
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu <span style="font-weight: bold;">type</span>. Attribute<span style="font-weight: bold;"> type</span> berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" <span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span><span style="font-style: italic; font-weight: bold;"></span>. Dalam element UL harus terdapat beberapa element LI.<br />
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><ul  type="circle"|"square"|"disc"></span><span style="color: #330099;"> ..........................</span><span style="color: #330099;"></ul></span></span><br />
<br />
<h3>
<b>ELEMENT LI (List Item)</b></h3>
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute <span style="font-weight: bold;">type</span> dan <span style="font-weight: bold;">value</span>. Nilai attribute <span style="font-weight: bold;">type</span> adalah<span style="font-weight: bold;">A,a,I,i,1,circle,square,disc</span> dan attribute <span style="font-weight: bold;">value</span> berisikan nilai nomor urutan dari attribute type.<br />
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc"></span><span style="color: #330099;">..........................</span><span style="color: #330099;"></li<span style="color: red;"></span>></span></span><span style="color: red; font-weight: bold;"></span><br />
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span><span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span><span style="font-weight: bold;"><span style="color: #330099;">Contoh Penerapan :</span></span><br />
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span>Contoh 1 :<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br /></div>
<table border="0" cellpadding="2" cellspacing="2" style="background-color: #ccccff; height: 255px; width: 465px;"><tbody>
<tr><td><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin-left: 20px;">
<span style="color: #330099; font-weight: bold;"><html></span><br />
<span style="color: #330099; font-weight: bold;"><head></span><br />
<span style="color: #330099; font-weight: bold;"><title>Latihan OL</title></span><br />
<span style="color: #330099; font-weight: bold;"></head></span><br />
<span style="color: #330099; font-weight: bold;"><body></span><br />
<span style="color: #330099; font-weight: bold;">Matakuliah Semester 1:<br /><ol start="1" type="a"><br />     <li>Bahasa Inggris 1</li><br />     <li>Matematika 1</li><br />     <li>Jaringan Komputer 1</li><br />     <li>Konsep Teknologi Informasi</li><br />     <li>Perangkat Keras Komputer</li><br />     <li>Sistem Operasi</li><br /></ol></span><span style="color: #330099; font-weight: bold;"></span><span style="color: #330099; font-weight: bold;"></span><br />
<span style="color: #330099; font-weight: bold;"></body></span><br />
<span style="color: #330099; font-weight: bold;"></html></span></div>
</td></tr>
</tbody></table>
<br />
Hasil :<br />
<div>
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
       Matakuliah TKJ Semester 1:<br />
                           c. Bahasa Inggris  1<br />
                           d. Matematika 1<br />
                           e. Jaringan Komputer 1<br />
                           f. Konsep Teknologi Informasi<br />
                           g. Perangkat Keras Komputer<br />
                           h. Sistem Operasi</div>
</div>
<br />
Contoh 2 :<br />
<br />
<span style="color: black; font-family: 'Times New Roman'; font-size: small; font-style: italic; font-weight: bold;"></span><br />
<table border="0" cellpadding="2" cellspacing="2" style="background-color: #ccccff; height: 255px; width: 465px;"><tbody>
<tr><td><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; margin-left: 20px;">
<span style="color: #330099; font-weight: bold;"><html></span><br />
<span style="color: #330099; font-weight: bold;"><head></span><br />
<span style="color: #330099; font-weight: bold;"><title>Latihan3-3</title></span><br />
<span style="color: #330099; font-weight: bold;"></head></span><br />
<span style="color: #330099; font-weight: bold;"><body></span><span style="color: #330099; font-weight: bold;"><ol start="1" type="I"></span><br />
<span style="color: #330099; font-weight: bold;"><li>Matakuliah Semester 1:</li><br />     <ol start="1" type="a"><br />        <li>Bahasa Inggris 1</li><br />        <li>Matematika 1</li><br />        <li>Jaringan Komputer 1</li><br />        <li>Konsep Teknologi Informasi</li><br />        <li>Perangkat Keras Komputer</li><br />        <li>Sistem Operasi</li><br />     </ol></span><span style="color: #330099; font-weight: bold;"></span><span style="color: #330099; font-weight: bold;"></span><span style="color: #330099; font-weight: bold;"></ol></span><br />
<span style="color: #330099; font-weight: bold;"></body></span><br />
<span style="color: #330099; font-weight: bold;"></html></span></div>
</td></tr>
</tbody></table>
<br />
Hasil :<br />
<br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">I. Matakuliah TKJ Semester 1:</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           a. Bahasa Inggris  1</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           b. Matematika 1</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           c. Jaringan Komputer 1</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           d. Konsep Teknologi Informasi</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           e. Perangkat Keras Komputer</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           f. Sistem Operasi</span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">                           </span><br />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;"><br /></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;"><br /></span>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;"><br /></span></div>
<div>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;"><br /></span></div>

HTML Pemrogramana Web Dasar HTML DAFTAR URUTAN

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan. MATERI: Element OL(ordered list), Element UL(unordered list), Element LI(list item). ELEMENT OL (Orderd List) Element O…

HTML FORMAT TEKS

20:34 Wahana Solo 1

<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<h3>
<b>OBJEKTIF:</b></h3>
<div style="text-align: justify;">
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks.</div>
</div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<h3>
<b>MATERI:</b></h3>
<div style="text-align: justify;">
Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule)</div>
<div style="text-align: justify;">
<br /></div>
<h3>
<br /><b>ELEMENT BR (Line Break)</b></h3>
Element BR<span style="font-weight: bold;"></span><span style="font-style: italic;"></span> berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.<br />
<br />
Sintaks:<br />
<span style="color: #330099; font-weight: bold;"><br></span><br />
<br />
<h3>
<b>ELEMENT P (Paragraph)</b></h3>
<div style="text-align: justify;">
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.</div>
<div style="text-align: justify;">
Element P mempunyai attribute yaitu <span style="font-style: italic; font-weight: bold;">align</span> yang bernilai <span style="font-style: italic; font-weight: bold;">"left"</span>, <span style="font-style: italic; font-weight: bold;">"center"</span>, <span style="font-style: italic; font-weight: bold;">"right","justify"</span> yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").<br />
<br />
<h3>
<b>Nilai Atribut</b></h3>
<table class="reference notranslate" style="border-collapse: collapse; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; width: 600px;"><tbody>
<tr style="background-color: #f6f4f0;"><th align="left" style="background-color: #555555; border: 1px solid rgb(85, 85, 85); color: white; padding: 3px; vertical-align: top;" width="20%">Nilai</th><th align="left" style="background-color: #555555; border: 1px solid rgb(85, 85, 85); color: white; padding: 3px; vertical-align: top;" width="80%">Deskripsi</th></tr>
<tr style="background-color: white;"><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">left</td><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">Teks rata kiri</td></tr>
<tr style="background-color: #f6f4f0;"><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">right</td><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">Teks rata kanan</td></tr>
<tr style="background-color: white;"><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">center</td><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">Teks rata tengah</td></tr>
<tr style="background-color: #f6f4f0;"><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">justify</td><td style="border: 1px solid rgb(212, 212, 212); line-height: 16px; padding: 7px 5px; vertical-align: top;">Format pelebaran sama(seperti koran atau majalah)</td></tr>
</tbody></table>
</div>
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><p align="left"|"center"|"right"|"justify"></span><span style="color: #330099;">............Konten..............</span><span style="color: #330099;"></p></span></span><br />
<br />
<h3>
Element strike (Teks dicoret) :</h3>
<div>
element strike <strike>berfungsi untuk memberikan tanda coret pada suatu kalimat atau kata.</div>
<div>
Sintaks :</div>
<div>
<span style="color: #330099; font-weight: bold;"><strike></span><span style="color: #330099; font-weight: bold;">............Konten..............</span><span style="color: #330099; font-weight: bold;"></strike></span></div>
<div>
       </div>
<h3>
<b>ELEMENT H1,H2,H3,H4,H5,H6 (Header)</b></h3>
<div style="text-align: justify;">
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf  dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu <span style="font-style: italic; font-weight: bold;">align</span> yang bernilai <span style="font-style: italic; font-weight: bold;">"left"</span>, <span style="font-style: italic; font-weight: bold;">"center"</span>, <span style="font-style: italic; font-weight: bold;">"right",</span><span style="font-style: italic; font-weight: bold;">"justify"</span> yang menspesifikasikan posisi horizontal dari header (default: "left").</div>
<br />
Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><h<span style="color: red;">x</span> align="left"|"center"|"right"|"justify"></span><span style="color: #330099;"> .............Konten............. </span><span style="color: #330099;"></h<span style="color: red;">x</span>></span></span><br />
<br />
<span style="color: red; font-weight: bold;">x : 1 sampai  6</span><br />
<br />
<br />
<h3>
<b>ELEMENT B (Bold)</b></h3>
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><b<span style="color: red;"></span>></span><span style="color: #330099;">.............Konten.............</span><span style="color: #330099;"></b<span style="color: red;"></span>></span></span><br />
<br />
<br />
<h3>
<b>ELEMENT I (Italic)</b></h3>
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><i></span><span style="color: #330099;">............Konten..............</span><span style="color: #330099;"></i<span style="color: red;"></span>></span></span><br />
<br />
<br />
<h3>
<b>ELEMENT U (Underline)</b></h3>
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><u></span><span style="color: #330099;">.............Konten.............</span><span style="color: #330099;"></u<span style="color: red;"></span>></span></span><br />
<br />
<br />
<h3>
<b>ELEMENT PRE (Preformated text)</b></h3>
Element PRE berfungsi untuk menampilkan teks seperti apa adanya.<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><pre></span><span style="color: #330099;"> .............Konten.............</span><span style="color: #330099;"></pre></span></span><br />
<br />
<br />
<h3>
<b>ELEMENT CENTER </b></h3>
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><center></span><span style="color: #330099;">............Konten..............</span><span style="color: #330099;"></center></span></span><br />
<br />
<br />
<h3>
<b>ELEMENT BASEFONT</b></h3>
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah <span style="font-weight: bold;">size</span> yang merupakan ukuran  huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup.<br />
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><basefont size="pixel"></span><br style="color: #330099;" /><span style="color: #330099;"> </span><span style="color: #330099;"></span></span><br />
<br />
<h3>
<b>ELEMENT FONT </b></h3>
<div style="text-align: justify;">
Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute <span style="font-weight: bold;">color</span> untuk merubah warna huruf, <span style="font-weight: bold;">face</span> untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan <span style="font-weight: bold;">size</span> untuk merubah ukuran huruf (pixel).</div>
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><font color="warna" face="font" size="pixel"></span><span style="color: #330099;"> .............Konten.............</span><span style="color: #330099;"></font></span></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #330099;"><b><br /></b></span>Contoh Kode warna :</div>
<br />
<center>
<iframe frameborder="0" height="400" scrolling="no" src="http://www.2createawebsite.com/build/col.swf" title="colorcode" width="400">
</iframe>
</center>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br />
<br />
<h3>
<b>ELEMENT HR (Horizontal Rule)</b></h3>
<div style="text-align: justify;">
Element HR berfungsi untuk membuat suatu garis horizontal.<span style="font-weight: bold;"></span> Element ini tidak mempunyai tag penutup dan mempunyai attribute <span style="font-weight: bold;">align</span> untuk menempatkan posisi secara horizontal ("left", "center", "right"), <span style="font-weight: bold;">size</span> untuk ukuran ketebalan garis ("pixel"), <span style="font-weight: bold;">width</span> untuk ukuran panjang garis ("persen"), dan <span style="font-weight: bold;">noshade</span> (garis solid).</div>
<br />
<span style="color: #330099; font-weight: bold;"></span>Sintaks:<br />
<span style="font-weight: bold;"><span style="color: #330099;"><hr align="left"|"center"|"right" size="pixel" width="persen" noshade></span></span><br />
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span>
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span>
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span>
<span style="font-weight: bold;"><span style="color: #330099;"><br /></span></span></div>

HTML Pemrogramana Web Dasar HTML FORMAT TEKS

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pemformatan teks. MATERI: Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), E…

Tugas Pertemuan 2 [ HTML]

21:25 Wahana Solo 141

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfLVz9-T4C9CVXSEustuuxlfUDPXKY43rN-5hyphenhyphenyllxPNTmCQgjQahOmWvDlxjM4YzZFyA6JUdGnCcYqh4wAxB92fGG4v8d1aCeXkRikPOTPudJAJ1d2GOH040rDQ-75lDowAMZJWSruY/s1600/pr.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 2em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfLVz9-T4C9CVXSEustuuxlfUDPXKY43rN-5hyphenhyphenyllxPNTmCQgjQahOmWvDlxjM4YzZFyA6JUdGnCcYqh4wAxB92fGG4v8d1aCeXkRikPOTPudJAJ1d2GOH040rDQ-75lDowAMZJWSruY/s320/pr.jpg" width="250" /></a></div>
<b>B </b>uatlah sebuah Artikel Tentang Sejarah dan perkembangan HTML. Mulai dari versi :<br />
<ul>
<li>HTML</li>
<li>HTML +</li>
<li>HTML 2.0</li>
<li>HTML 3.2</li>
<li>HTML 4.01</li>
<li>HTML 5</li>
</ul>
<div>
<br />
<br />
Beserta feature yang ada didalam setiap versi. </div>
<div>
<br /></div>
<div>
Untuk Kelas <b><span style="font-size: large;">E, F,G & H</span></b></div>
<div>
<br /></div>
<div>
NB : - Bahasa sama persis, Nilai juga sama Jeleknya. :)</div>
<div>
        - Komentarkan di Posting ini dengan format : Nim <spasi> Kelas <spasi> Alamat Blog.</div>
<div>
           Contoh : L200130026 A http://blogku.blogspot.com</div>
<div>
<br /></div>
<div>
<br /></div>

HTML Pemrogramana Web Dasar Tugas Tugas Pertemuan 2 [ HTML]

B uatlah sebuah Artikel Tentang Sejarah dan perkembangan HTML. Mulai dari versi : HTML HTML + HTML 2.0 HTML 3.2 HTML 4.01 HTML 5 Beserta feature yang ada didalam setiap versi. Untuk Kelas E, F,G & H NB : - Bahasa sama persis, Nilai juga sama Jelekn…

HTML Dasar

16:55 Wahana Solo 0

<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<b>OBJEKTIF:</b></h3>
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.<br />
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<b>MATERI:</b></h3>
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY.<br />
<br />
<h3>
STRUKTUR DASAR DOKUMEN HTML</h3>
HTML merupakan singkatan dari <span style="font-weight: bold;">HyperText Markup Language</span> adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung <span style="font-style: italic;">tag-tag</span> yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.<br />
<br />
Struktur dasar dokumen HTML adalah sebagai berikut:<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br /></div>
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; height: 116px; width: 277px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><html></span><br />
<span style="font-weight: bold;"><head></span><br />
<span style="font-weight: bold;"><title></span>Disini Judul Dokumen HTML<span style="font-weight: bold;"></title></span><br />
<span style="font-weight: bold;"></head></span><br />
<span style="font-weight: bold;"><body></span><br />
<span style="font-weight: bold;">        </span>Disini penulisan informasi Web<br />
<span style="font-weight: bold;"></body></span><br />
<span style="font-weight: bold;"></html></span></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"></span>Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:</div>
<h3>
<span style="font-weight: bold;">a. Tag</span></h3>
Adalah teks khusus (<span style="font-style: italic;">markup</span>) berupa dua karakter "<span style="font-weight: bold;"><</span>" dan "<span style="font-weight: bold;">></span>",  sebagai contoh <span style="font-weight: bold;"><body></span> adalah tag dengan nama body.<br />
Secara umum tag ditulis secara berpasangan, yang terdiri atas <span style="font-weight: bold;">tag pembuka</span> dan <span style="font-weight: bold;">tag penutup</span> (ditambahkan karakter "<span style="font-weight: bold;">/</span>" setelah karakter "<span style="font-weight: bold;"><</span>"), sebagai contoh <span style="font-weight: bold;"><body> </span>ini adalah tag pembuka isi dokumen HTML, dan <span style="font-weight: bold;"></body></span> ini adalah tag penutup isi dokumen HTML.<br />
<br />
<h3>
<span style="font-weight: bold;">b. Element</span></h3>
Element terdiri atas tiga bagian, yaitu <span style="font-weight: bold;">tag pembuka</span>, <span style="font-weight: bold;">isi</span>, dan <span style="font-weight: bold;">tag penutup</span>. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan <span style="font-weight: bold;">element title</span>, dimana:<br />
<span style="font-weight: bold;"><br /><title></span> ini adalah tag pembuka judul dokumen HTML<br />
<span style="font-weight: bold;">Disini Judul Dokumen HTML</span> ini adalah isi judul dokumen HTML<br />
<span style="font-weight: bold;"></title></span> ini adalah tag penutup judul dokumen HTML<br />
<br />
Tag-tag yang ditulis secara berpasangan pada suatu element HTML,  tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.<br />
Contoh penulisan tag-tag yang benar<br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; height: 77px; width: 161px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><p></span><span style="font-weight: bold;"></span><br />
<span style="font-weight: bold;"></span><span style="font-weight: bold;">    <b></span><br />
<span style="font-weight: bold;">        </span>................<br />
<span style="font-weight: bold;">    </b></span><br />
<span style="font-weight: bold;"></p></span></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br />
Contoh penulisan tag-tag yang salah</div>
<table border="1" cellpadding="2" cellspacing="2" style="height: 77px; width: 162px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="color: #000066; font-weight: bold;"><p></span><br />
<span style="color: #000066; font-weight: bold;">    <b></span><br />
<span style="color: #000066; font-weight: bold;">        </span><span style="color: #000066;">................</span><br />
<span style="font-weight: bold;">   <span style="color: red;"> </p></span></span><br />
<span style="color: red; font-weight: bold;"></b></span></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br /></div>
<h3>
<span style="font-weight: bold;">c. Attribute</span></h3>
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:<br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; height: 116px; width: 229px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><TAG</span><br />
<span style="font-weight: bold;">   nama-attr="nilai-attr"</span><br />
<span style="font-weight: bold;">   nama-attr="nilai-attr"</span><br />
<span style="font-weight: bold;">   .................</span><br />
<span style="font-weight: bold;">></span><br />
   .................<br />
<br />
<span style="font-weight: bold;"></TAG></span></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <span style="font-weight: bold;"><body bgcolor="black" text="yellow"></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<span style="font-weight: bold;">d. Element HTML</span></h3>
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.<br />
<br />
Sintaks:<br />
<span style="color: #000066; font-weight: bold;"><html></span><br />
<span style="color: #000066; font-weight: bold;">..........</span><br />
<span style="color: #000066; font-weight: bold;"></html></span><br />
<br />
<h4>
<span style="font-weight: bold;">      d.1. Element HEAD</span></h4>
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.<br />
<br />
Sintaks:<br />
<span style="color: #000066; font-weight: bold;"><head></span><br />
<span style="color: #000066; font-weight: bold;">...........</span><br />
<span style="color: #000066; font-weight: bold;"></head></span><br />
<br />
<h4>
<span style="font-weight: bold;">      d.2. Element TITLE</span></h4>
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.<br />
<br />
Sintaks:<br />
<span style="color: #000066; font-weight: bold;"><title></span><br />
<span style="color: #000066; font-weight: bold;">.........</span><br />
<span style="color: #000066; font-weight: bold;"></title></span><br />
<br />
<h4>
<span style="font-weight: bold;">      d.3. Element BODY</span></h4>
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.<br />
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.<br />
<br />
Sintaks:<br />
<span style="color: #000066; font-weight: bold;"><body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"></span><br />
<span style="color: #000066; font-weight: bold;">..............</span><br />
<span style="font-weight: bold;"><span style="color: #000066;"></body></span></span><br />
Attribute<span style="font-weight: bold;"> text </span>memberikan warna pada teks, <span style="font-weight: bold;">bgcolor</span> memberikan warna pada latarbelakang dokumen HTML, <span style="font-weight: bold;">background</span> memberikan latarbelakang dokumen HTML dalam bentuk gambar,<span style="font-weight: bold;">link </span>memberikan nilai warna untuk link, <span style="font-weight: bold;">alink</span> memberikan warna untuk link yang sedang aktif, <span style="font-weight: bold;">vlink</span> memberikan warna untuk link yang telah dikunjungi.<br />
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"></span><br /></div>
<h3>
<span style="color: red; font-weight: bold;">LATIHAN</span></h3>
<div style="text-align: center;">
<span style="font-weight: bold;"></span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"></span><span style="font-style: italic;">Gunakan teks editor misalkan <span style="font-weight: bold;">"Notepad"</span> untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik <span style="font-weight: bold;">menu Editor</span>.</span></div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<span style="color: #6666cc; font-weight: bold;">Latihan 1:</span></h3>
Menampilkan teks:<br />
<br />
         Belajar bahasa pemrograman web ternyata mudah juga :)<br />
<br />
<span style="font-style: italic; font-weight: bold;">Nama file: latihan1_1.html</span><br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; font-weight: bold; height: 138px; width: 473px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<html><br />
<head><br />
<title>Latihan1-1</title><br />
</head><br />
<body><br />
        Belajar bahasa pemrograman web ternyata mudah juga :)<br />
</body><br />
</html></div>
</td></tr>
</tbody></table>
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
</div>
<h3>
<span style="font-weight: bold;">Tugas tambahan: </span></h3>
Gantilah teks tersebut dengan teks lainnya.<br />
<br />
<br />
<h3>
<span style="color: #6666cc; font-weight: bold;">Latihan 2:</span></h3>
Merubah warna teks menjadi merah:<br />
<br />
         <span style="color: red;">Belajar bahasa pemrograman web ternyata mudah juga :)</span><br />
<br />
<span style="font-style: italic; font-weight: bold;">Nama file: latihan1_2.html</span><br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; font-weight: bold; height: 137px; width: 477px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<html><br />
<head><br />
<title>Latihan1-2</title><br />
</head><br />
<body text="red"><br />
        Belajar bahasa pemrograman web ternyata mudah juga :)<br />
</body><br />
</html></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><br /></span></div>
<h3>
<span style="font-weight: bold;">Tugas tambahan:</span></h3>
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.<br />
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><br /></span></div>
<h4>
<span style="font-weight: bold;"><span style="color: #6666cc;">Latihan 3:</span></span></h4>
Merubah warna background menjadi hitam.<br />
                        <span style="color: red;"></span><br />
<span style="font-style: italic; font-weight: bold;">Nama file: latihan1_3.html</span><br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; font-weight: bold; height: 135px; width: 478px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<html><br />
<head><br />
<title>Latihan1-3</title><br />
</head><br />
<body text="red" bgcolor="black"><br />
        Belajar bahasa pemrograman web ternyata mudah juga :)<br />
</body><br />
</html></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><br /></span></div>
<h3>
<span style="font-weight: bold;">Tugas tambahan:</span></h3>
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.<br />
<br />
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<br /></div>
<h3>
<span style="color: #6666cc; font-weight: bold;">Latihan 4:</span></h3>
Merubah background dengan suatu gambar.<br />
<br />
<span style="font-style: italic; font-weight: bold;">Nama file: latihan1_4.html</span><br />
<br />
<table border="1" cellpadding="2" cellspacing="2" style="color: #000066; font-weight: bold; height: 129px; width: 528px;"><tbody>
<tr><td style="background-color: #ccccff;"><div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<html><br />
<head><br />
<title>Latihan1-4</title><br />
</head><br />
<body text="red" bgcolor="aqua" background="./images/image027.jpg"><br />
        Belajar bahasa pemrograman web ternyata mudah juga :)<br />
</body><br />
</html></div>
</td></tr>
</tbody></table>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<span style="font-weight: bold;"><span style="text-decoration: underline;">catatan:</span><br /><span style="color: red;">./images/</span> = nama direktori file gambar disimpan<br /><span style="color: red;">image027.jpg</span> = nama file gambar</span></div>
<h3>
<span style="font-weight: bold;">Tugas tambahan:</span></h3>
Cobalah untuk file gambar: image050.jpg, image052.jpg, image058.jpg dan image060.jpg.

HTML Pemrogramana Web Dasar HTML Dasar

OBJEKTIF: Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML. MATERI: Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY. STRUKTUR DASAR DOKUMEN H…

Silabi Pembelajaran HTML

16:42 Wahana Solo 0

<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<b>OBJEKTIF:</b><br />
Memahami teknik dasar pemrograman web HTML</div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<b>MATERI:</b><br />
<br />
  <b>1. HTML DASAR</b><br />
<div style="text-align: justify;">
      Struktur dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY</div>
<br />
  <b>2. HTML FORMAT TEKS</b><br />
<div style="text-align: justify;">
      Element BR(line break), Element P(paragraph), Element H1,H2,H3,H4,H5,H6(header), Element B(bold), Element I(italic), Element U(underline), Element PRE(preformated text), Element CENTER, Element BASEFONT, Element FONT, Element HR(horizontal rule)</div>
<br />
  <b>3. HTML DAFTAR URUTAN</b><br />
      Element OL(ordered list), Element UL(unordered list), Element LI(list item)<br />
<br />
  <b>4. HTML TABEL</b><br />
<div style="text-align: justify;">
      Element TABLE, Element CAPTION, Element TH(table header), Element TR(table row), Element TD(table data)</div>
<br />
  <b>5. HTML GAMBAR</b><br />
      Element IMG<br />
<br />
  <b>6. HTML HYPERLINK</b><br />
      Element A<br />
<br />
  <b>7. HTML FORM</b><br />
      Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA<br />
<br />
  <b>8. HTML FRAME</b><br />
      Element FRAMESET, Element FRAME, Element NOFRAMES</div>
<div class="style3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;">
<b>REFERENSI:</b><br />
1. http://www.w3schools.com</div>

HTML Pemrogramana Web Dasar Silabi Pembelajaran HTML

OBJEKTIF: Memahami teknik dasar pemrograman web HTML MATERI: 1. HTML DASAR Struktur dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY 2. HTML FORMAT TEKS Element BR(line break), Element P(…

Menampilkan Script HTML/PHP/Javascript Pada Posting Blog

04:25 Wahana Solo 0

<br />
<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQ7GZQ138epFLXAatdO9Irk_uzrn7Zo_JMQziqU1B5Y-o-izM5AUVYdTi2a_8yKRz1Mx1OHKkc_hOIMarPeQiLwUa6-hW9DT_gQFALt6P1Sq8nmW3m1lcgPN6yR6yxj03Uevbi1Trt5E/s200/script.jpg" /></div>
Menampilkan script atau kode HTML kedalam sebuah halaman web atau blog kadang menjadi masalah tersendiri. Apalagi bagi mereka yang sering memberikan tutorial yang berkaitan dengan Web atau Blog. Hal tersebut tidak bisa terlepas dari Script yang memang harus ditampilkan sebagai penjelasan dalam sebuah tutorialnya. Oleh karena itu disini saya akan sedikit menjelaskan beberapa cara menampilkan script HTML diantaranya:<br />
<br />
<br />
<br />
<br />
<h3>
1. Menggunakan Text Area</h3>
<br />
cara ini cukup mudah dilakukan, anda hanya memasukkan script html kedalam Text Area, berikut ini contoh script nya :<br />
<pre class="brush: ruby" name="code"><textarea name="txt" style="background-color: lavender; height: 80px; padding: 10px 0 0 10px; width: 600px;"><p>
Konten disini</p>
<br>Konten disini</br>
<b>Konten disini</b>

Hasilnya :

2. Menggunakan Parse

Cara ini cukup sedikit ribet karena anda harus terbiasa dengan kode parse untuk menggatikan tag HTML yang akan anda tampilkan. berikut ini table Parse yang dapat anda gunakan :

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
™	trademark	™	™

Contoh saya akan menampikan script berikut :

Kemudian ganti semua tak sesuai tabel parse diatas, jika anda kesulitan menggantinya, anda dapat memanfaatkan link Convert berikut ini : PARSE HTML
Hasilnya :

<table border="1">
<tbody>
<tr>
<td>Mata Kuliah</td>
<td>Pemrograman Web Dasar</td>
</tr>
</tbody>
</table>

3. Menggunakan High Lighter

cara ini cukup populer dan sangat banyak Blog atau Website yang menggunakanya. saya sudah menggunakanya pada penjelasan cara 1 dan 2. Oke tanpa panjang x lebar lagi saya akan menjelaskan step by step pengaplikasiannya ke dalam blogspot.

1. Login ke blog anda, kemudian masuk ke Template--> Edit HTML
2. Carilah </head>, kemudian pastekan scrip dibawah ini :

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

3. Kemudian klik Simpan Template
4. Untuk menggunakanya pada postingan anda yaitu dengan menuliskan script berikut :

Untuk melihat dukungan bahasa lainnya klik disini
5. Hasilnya :





    Progdi :
    Teknik Informatika

Terima Kasih, Semoga Bermanfaat.

Tip & Trik Tutorial Menampilkan Script HTML/PHP/Javascript Pada Posting Blog

Menampilkan script atau kode HTML kedalam sebuah halaman web atau blog kadang menjadi masalah tersendiri. Apalagi bagi mereka yang sering memberikan tutorial yang berkaitan dengan Web atau Blog. Hal tersebut tidak bisa terlepas dari Script yang mema…