Silabi Pembelajaran HTML

<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), ...

Read more »

Menampilkan Script HTML/PHP/Javascript Pada Posting Blog

<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 :
<p> Konten disini</p> <br>Konten disini</br> <b>Konten disini</b>

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	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
§	section	&sect;	&#167;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Contoh saya akan menampikan script  berikut :

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

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 :

<!-- Syntax Highlighter 3.0.83 START --> <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> <!-- Syntax Highlighter 3.0.83 END -->

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

<pre class="brush: html"> untuk script html <pre class="brush: css"> untuk kode css <pre class="brush: java"> untuk coding java <pre class="brush: php"> untuk coding php

Untuk melihat dukungan bahasa lainnya klik disini

<pre class="brush: html"> <!----Awal isi konten-----> <table border="1"> <tbody> <tr> <td>Progdi :</td> <td>Teknik Informatika</td> </tr> </tbody></table> <!----Akhir isi konten-----> </pre>

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...

Read more »

Merubah Localhost mejadi Domain Anda

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSYvWYPmOCUj5DVev0og5cBxDgQRbwthUrgE2nN031BpFDWbbLi6lA5mjDou4AHnG05YGaEzNIvNRoFKMjgf154Px0IA1qRTw0eAqjVohQp51CbEvpigC9ZcMn5lRWWhG8S-DOrB5Zmo/s1600/localhost-pr4ktik.blogspot.com.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSYvWYPmOCUj5DVev0og5cBxDgQRbwthUrgE2nN031BpFDWbbLi6lA5mjDou4AHnG05YGaEzNIvNRoFKMjgf154Px0IA1qRTw0eAqjVohQp51CbEvpigC9ZcMn5lRWWhG8S-DOrB5Zmo/s320/localhost-pr4ktik.blogspot.com.jpg" width="320" /></a><br /> <div style="text-align: justify;"> Disini saya akan memberikan sedikit trik untuk merubah server local anda (localhost) menjadi alamat domain sesuai keinginan anda. sebenarnya cara ini cukup sederhana, walaupun tidak terlalu bermanfaat tapi trik ini juga bisa di manfaatkan untuk presentasi project anda. oop ya, saya sedikit jelaskan disini nantinya saya menggunakan windows dan server apache.</div> <br /> <div style="text-align: justify;"> satu lagi saya mingingatkan, hasil domain anda nantinya hanya berlaku di komputer anda.....:)</div> <div style="text-align: justify;"> oke, langsung ke TKP ja.</div> <h4> <b>Berikut langkah -langkanya :</b></h4> <br /> <ol> <li>Buka direktori C:/windows/system32/drivers/etc</li> <li>Buka file "host" pada direktori (etc) menggunakan Teks editor (notepad,dll)</li> <li>Didalam file host tadi anda akan jumpai alamat IP #127.0.0.1 localhost</li> <li>Dibawah alamat IP tersebut buatlah IP yang sama dan ganti localhost menjadi domain yg anda inginkan, tapi tanpa tanda pagar(#). misal : 127.0.0.1 facebook.com</li> <li>Kemudian simpan.</li> <li>selesai deh, silahkan cek hasilnya.</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtbfTnu3KR7oaRYFG_jZkaw7gMe_3n9Pa57y6T7U8uKjlsAJ26W4uZWAJSgVbUsrwJ8b7kLRJksVhz9C4LnP4vT99t7TvNna15JxdXu_7Y4OfqLYHKDX0ZxR4r0_1kyQ_jbAH9hIKVXk/s1600/face1-pr4ktik.blogspot.com.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtbfTnu3KR7oaRYFG_jZkaw7gMe_3n9Pa57y6T7U8uKjlsAJ26W4uZWAJSgVbUsrwJ8b7kLRJksVhz9C4LnP4vT99t7TvNna15JxdXu_7Y4OfqLYHKDX0ZxR4r0_1kyQ_jbAH9hIKVXk/s1600/face1-pr4ktik.blogspot.com.jpg" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-EB1q1vLe6wxyk-BkK1CZs6PwTaHWASHfR3z__-PZGKPidWRcPH5YEyGvLUEFUU53QhH7ar1_YxjuVjVcjEZA0TStPJRZMhJeSPsvAzFmNIOTeUi11dByyIgZ_T_UhCNL-zQkKa5xfkk/s1600/face2-pr4ktik.blogspot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-EB1q1vLe6wxyk-BkK1CZs6PwTaHWASHfR3z__-PZGKPidWRcPH5YEyGvLUEFUU53QhH7ar1_YxjuVjVcjEZA0TStPJRZMhJeSPsvAzFmNIOTeUi11dByyIgZ_T_UhCNL-zQkKa5xfkk/s1600/face2-pr4ktik.blogspot.jpg" /></a></div> <div> <br /></div>

Tip & Trik Tutorial Merubah Localhost mejadi Domain Anda

Disini saya akan memberikan sedikit trik untuk merubah server local anda (localhost) menjadi alamat domain sesuai keinginan anda. sebenarn...

Read more »