Dasar dasar pemograman HTML HTML (Hyper Text Markup Language): bahasa pemograman yang digunakan untuk menampilkan dokumen web
Elemen Dokumen HTML Elemen dokumen HTML : komponen-komponen dasar pembentuk dokumen HTML <Tuliskan Program anda pada Notepad> <html> <head> <tittle>……</tittle> </head> <body>…….</body> </html> Cara menyimpan : Klik file – save as – Praktikum1.HTML-Save Setelah disimpan buka file di Internet Explorer dengan cara : klik File-Browse-cari file anda
Tag HTML Tag HTML : Kode HTML yang digunakan untuk menunjukkan jenis teks, link, grafik atau elemen HTML lainnya <b>……………</b> <i>…………….</i> <u>…………….</>
Buka Notepad lalu tuliskan kode program di bawah ini: <!--Latihan 1--> <html> <head> <title>Latihan 1</title> </head> <body> Selamat Datang di Sma Negeri 9 Malang </body> </html> Simpan di My Document, buat folder kelas anda, simpan dengan nama Latihan1.html
Membuat paragraf sederhana <!--Latihan 2--> <html> <head> <title> Latihan 2-</title> </head> <body> Selamat Datang di Sma Negeri 9 Malang <p>Saya sekarang lagi berada di Laborotorium Komputer </p> <p>Saya sekarang belajar HTML</p> </body> </html> Simpan di My Document, buat folder kelas anda, simpan dengan nama Latihan2.html
<!--LAtihan 3--> <html> <head> <title> LAtihan 3</title> </head> <body> Saat ini, hampir semua kegiatan sudah menggunakan Teknologi Informasi <p>Seringkali kita menjumpai program-program <br> yang tidak diproteksi sehingga mudah di bongkar oleh orang lain. Tidak diproteknya software-software tertentu <br>dimaksudkan untuk dapat dipelajari orang lain,</p> <p>Apabila kita menjumpai hal-hal semacam itu sebaiknya kita menghindarinya,</p> <br>untuk mengubah isi, baik sebagian maupun seluruhnya <br>Maka jangan berbuat demikian, karena hal tersebut tidak terpuji </body></html>
<!--Latihan 4--> <html> <head> </head> <body> <h1> Ini adalah Heading 1 </h1> <h2> Ini adalah Heading 2</h2> <h3> Ini adalah Heading 3</h3> <h4> Ini adalah Heading 4</h4> <h5> Ini adalah Heading 5</h5> <h6> Ini adalah Heading 6</h6> <p>Sebaiknya gunakan tag heading hanya untuk heading. Jangan gunakan tag heading untuk membuat suatu teks menjadi lebih besar</p> </body> </html>
<h1> Ini adalah Heading 1 </h1> <!--Praktikum2--> <html> <head></head> <body> <hr size=“10” color=“green”> <h1> Ini adalah Heading 1 </h1> <h2> Ini adalah Heading 2</h2> <h3> Ini adalah Heading 3</h3> <h4> Ini adalah Heading 4</h4> <h5> Ini adalah Heading 5</h5> <h6> Ini adalah Heading 6</h6> <hr> <h1 align="center">Heading 1 ini berada di tengah</h1> <p>Sekarang saya menggunakan atribut tengah maka letaknya heading berada di tengah</p> <h2 align="right">Heading ini berada di kanan</h2> <p>Sekarang saya berada pada heading di sebelah kanan. mudah bukan belajar dasar HTML ini</p></body></html>
<!-- Latihan 6--> <html> <head> </head> <body> Sekarang Saya akan mencoba membuat garis horisontal <br>Garis horisontal menggunakan tag hr <hr> Horee.... Saya dapat membuat tiga garis horisontal, mudah bukan </body> </html>
<!--Latihan 7--> <html> <head> </head> <body bgcolor=“red”><hr> <b>Smanawa adalah SMAN 9 Malang</b><br> <i>Smanawa is the best</i><br> <u>Smanawa adalah SMAN 9 Malang</u><br> <big>Smanawa adalah SMAN 9 Malang</big><br> <small>Smanawa adalah SMAN 9 Malang</small><br> <em>Smanawa adalah SMAN 9 Malang</em><br> Smanawa adalah<sub> SMAN 9 Malang</sub><br> Smanawa adalah<sup> SMAN 9 Malang</sup><hr> </body> </html>
<!--Latihan 8--> <html> <head></head> <body bgcolor=“pink”> <h1 align=“center”><font color=“blue”>PANTUN NASIHAT</font></h1> <marquee><hr size=“10” color=“red” width=“50%”></marquee> <pre> Kurang pikir kurang siasat, Tentu dirimu kelak tersesat Apabila banyak berkata-kata, di situlah jalan masuknya dusta Kalau mulut tajam dan kasar, Dapat ditimpa bahaya besar </pre> <hr size=“10” color=“green”></body></html>
<!--Latihan 1--> <html> <head></head> <body bgcolor=“pink”><hr> <h1 align=“center”>Belajar membuat akronim</h1> <hr color=“red” size=“10” > <address>SMA Negeri 9 Malang<br> Jl. Puncak Borobudur No. 1 Malang<br> Jawa Timur - Indonesia </address> <marquee><hr color=“blue” size=“10” width=“60%”></marquee> <acronym title=“Halo Ini website smanawa”>WWW.smanawa.com</acronym> </body></html> *simpan file dengan nama:”namasiswa.HTML”,lalu buka di Internet eksplorer melalui file-open-browse
<html> <body> <h3><i><u>Hypnobeauty:</u></i></h3> <blockquote> Kecantikan dari luar, gampang, tinggal menggunakan make up yang cocok dengan kulit kita. Lalu, kecantikan dari dalam atau lebih dikenal sebagai inner beauty, sebagai pilihan, agar kecantikan alami bisa bertahan lebih lama. Untuk membangkitkan kecantikan dari dalam, kini berkembang fenomena anyar, Hypnobeauty. </blockquote> <p> <q> </q> Yakni, penggunaan terapi hypnotis Sebenarnya, terapi ini berasal dari dalam diri sendiri. Artinya, kita yang menentukan untuk bisa tampil cantik </body> </html>
<html><body bgcolor=“pink”><p> <h1 align=“center”>Lesson 2: Programming HTML with a href and acronym</h1> <hr size=“10” color=“green” width=“50%”> <h3>Go to <a href="http://www.google.com/"> google</a> click here.</p><p> <a href="http://www.friendster.com/"> friendster</a> click here please</p> And here is <a href="http://Download-software-ICT.blogspot.com/" target="_blank">Our Blog !</a> <p>Want to send e-Mail? <a href="mailto:smanawamalang@yahoo.com"> Click here</a> <hr size=“10” color=“blue” width=“50%”> <acronym title=“Hi Ini Smanawa”> SMAN 9 MALANG</acronym></p></body></html>
<li>Jeruk</li> <li>Mangga</li></ol> <html><body bg color=“yellow”> <h1 align=“center”><font color=“blue”> Bullet and Numbering</font></h1> <hr size=“10” color=“green”> <marquee><font color=“blue” size=“3” face=“verdana”>Ini HTML tentang bulletting</font></marquee> <h4>Daftar Minuman:</h4> <ul> <li>Kopi</li> <li>Teh</li> <li>Susu</li> </ul> <h4><acronym title=“Minuman sehat”> Daftar Minuman:</acronym></h4> <ol> <li>Susu</li></ol> <h4>Daftar Buah-buahan:</h4> <ol type="A"> <li>Apel</li> <li>Pisang</li> <li>Jeruk</li> <li>Mangga</li></ol> <h4>Fruits :</h4> <ul type="circle"> <li>Anggur</li> <li>Duren</li> <li>Lemon</li> <li>Salak</li> </ul> <h4>Daftar Bercabang:</h4> <ul> <li>Coffee</li> <li>Tea <li>Black tea</li> <li>Green tea</li> <li>Teh 99</li> </li> <li>Milk</li> </body></html>
<html> <body bgcolor=“yellow”> <h1 align=“center”><font face=“verdana”><acronym title=“Ini tentang table”> Lesson 1 : Table</acronym></font> </h1> <hr color=“blue” size=“10” width=“75%”> <h4>Tabel satu kolom:</h4> <table border="1"> <tr> <td>Smanawa</td> </tr> </table> <hr color=“red” size=“10” width=“75%> <h4>satu baris tiga kolom:</h4> <table border="6"> <tr><td>SMA Negeri 9</td> <td>MALANG</td> <td>Jawa Timur</td></tr> <hr color=“green” size=“10” width=“75%> <h4>dua baris tiga kolom:</h4> <table border="15"> <tr><td>100</td> <td>200</td> <td>300</td></tr> <tr><td>400</td> <td>500</td> <td>600</td></tr> </table> <h4>Tabel Tanpa Border</h4> <hr color=“red” size=“10” width=“75%> <table> Link ke <a href=“http://www.google.com”> Google</a> </body></html>
<html> <body bgcolor=“pink”> <h1 align=“center”><font color=“blue” face=“verdana”> Chapter 1 : Learn to build any cells</font></h1> <hr size=“10” color=“green”> <h3><marquee><font color=“blue” face=“verdana”>Ini program membuat tabel</font></marquee></h3> <h4>Table 1 : Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table> <table border="1"> <h4>Table 2 : Cell that spans two rows:</h4> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <th rowspan="2"> Telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </table> </body> </html>
<!—Praktikum2--> <html> <head></head> <body bgcolor=“yellow”> <h1 align=“center”><font color=“blue”>Bintang-Bintang</font></h1> <marquee><hr size=“10” color=“red” width=“50%”></marquee> <center>* <center>*** <center>***** <center>******* <hr size=“10” color=“blue”></body></html>
<html> <body bgcolor="pink"> <p><h1><center><a href="http://www.google.com/">google</a> and <a href="http://www.yahoo.com/">yahoo</a> </center></h1></P> <marquee><hr size="10" width="50%" color="blue"></marquee> <h1> <center>* <center>* * * <center>* * * * * <center>* * * * * * * <center>* * * * </h1> <hr size="10" width="50%" color="red"></body></html>
<html><body bgcolor=“pink”><p> <h1 align=“center”>Lesson 2: Programming HTML with a href</h1> <hr size=“10” color=“green” width=“50%”> <h3>Go to <a href="http://www.yahoo.com/"> yahoo</a> click here.</p> <p> <a href="http://www.friendster.com/"> friendster</a> click here please</p> And here is <a href="http://Download-software-ICT.blogspot.com/" target="_blank">Our Blog !</a></body></html>
<h2 align="center"> Jln. Puncak Borobudur No. 1 Malang Ketik program HTML di bawah ini pada notepad. <html><head><head/><body bgcolor=“cyan"> <h1 align="center"><font color="green">Sekolah Menengah Atas Negeri 9 Malang</font> <h2 align="center"> Jln. Puncak Borobudur No. 1 Malang <hr> <h2 align ="left"><font color="blue"><marquee>selamat datang di SMA Negeri 9 malang</font></marquee></h2> <h2 align ="left"><font color="black">Malang, 1 Desember 2008 <p>Saat ini saya duduk di bangku SMA, tepatnya saya sekarang di SMA Negeri 9 Malang. Di sinilah kami belajar bersama demi kemajuan bangsa dan negara. <hr size="10" color="green"> <h3>Link ke MS Word tentang Prinsip K3 <a href=“C:\Documents and Settings\my documents\namafile di ms word.doc">klik di sini</a></body></html> 3. Simpan file notepad anda di drive C atau D-folder nama file :nama siswa.HTML - Buka di Internet Explorer
<html> <body bgcolor=“cyan"> <h1 align="center"><font color="green"><acronym title=“Electronic Mail”> <b>Materi UAS TIK</b></acronym></font> <h2 align="center"><font color=“green” face=”verdana”>E-Mail berbasis WEb</font><hr> <h4 align ="left"><font color="blue“ face=“verdana”> <marquee>E Mail berbasis POP</font></marquee></h4> <h2 align ="left"><font color="black">Kelebihannya : <p><center>Biasanya tidak gratis<br>Tidakdapat diakses secara online</font>.<hr> <hr size="10" color =“red"> <h3><acronym title=“hyperlink”>Link ke situs ICT</acronym> <a href=“www.download-software-ict.blogspot.com">klik di sini</a> <p><h2>Nama Anggota Kelompok : </h2> <br><font color=“blue” size=“3”>Agus (absen : 007)</font> <br><font color=“green” size=“3”>Syamsul (absen : 02)</font> </body></html>
HTML Tabel bersarang <html><body bgcolor=“cyan”> <hr size="10" width="50%" color="magenta"> <h1 align="center"><u><i>Membuat Table bersarang</i></u></h1> <marquee><font color=“blue” size=“2” face=“verdana”>Ini program membuat Tabel dari kelas X-5</font></marquee> <center><table border=“1"> <tr><td bgcolor="yellow"><hr size="10" color=“red"> <h2><center>@@@@@<br> $$$$$<br>*****</center></h2> <hr size="10" color=“red"></td></tr> <tr><td bgcolor="seablue"><hr size="10" color="blue"> <h1>Daftar Bersarang:</h1><ul><h2> <li>Coffee</li> <li>Tea <ul><li>Black tea</li> <li>Green tea</li> </ul></li> <li>Milk</li></h2> </ul><hr size="10" color="blue"></td></tr></table></body></html>
<html><body bgcolor=“cyan”> <hr size="10" width="50%" color="magenta"> <h1 align="center"> <u><i>Prinsip K3</i></u></h1> <hr size="10" width="50%" color=“red"> <center><table border=“1"> <tr><td bgcolor="yellow"> <hr size="10" color=“blue"> <h2><center> Kesehatan<br> dan<br> Keselamatan Kerja</center></h2> <hr size="10" color="green"></td> <td bgcolor=“cyan"> <hr size="10" color="blue"> <h1>Memilih monitor sesuai K3</h1> <ul><h2><li>Beli LCD jika mampu</li> <li>Pilih monitor dengan : <ul><li>radiasi rendah</li> <li>power off jika tak dipakai</li></ul> </li><li>atur jarak pandang</li> </h2></ul><hr size="10" color="blue"> </td></tr><tr> <td bgcolor=“orange"><hr size="10" color=“blue"><p><h2><center> <a href="http://www.google.com/"> click GOOGLE here</a>please</p> <p><a href="http://www.yahoo.com/"> Klik di sini </a> jika ingin ke Yahoo</p> <a href= "http://www. ict-tutorial.blogspot.com/"> ICT Blog !</a> </center></h2> <hr size="15" color="green"></td> <td bgcolor="yellow"><hr size="10" color="blue"><center><table border=“3"> <tr><td bgcolor="red"> <h2><acronym title=“European Best Club”>AC Milan</acronym></h2></td> <td bgcolor="yellow"><h2>Ajax AFC</h2> </td><td bgcolor=“blue"><h2> FC Barcelona</h2></td></tr></table> </center><hr size="10" color=“purple"></td> </tr></table></center><marquee><font color=“blue” size=“3” face=“verdana”> X-7</font></marquee></body></html>
XI S1</font></marquee></b></body></html> <td bgcolor=“orange"><hr size="10“ color=“blue"><p><h2><center> <a href="http://www.google.com/"> click GOOGLE here</a>please</p> <p><a href= "http://www. ict-tutorial.blogspot.com/"> ICT Blog !</a> </center></h2> <hr size="15" color="green"></td> <td bgcolor="yellow"><hr size="10" color="blue"><center><table border=“3"> <tr><td bgcolor="red"> <h2><acronym title=“Best Defender”> Alessandro Nesta</acronym></h2></td> <td bgcolor="yellow"><h2>AC Milan</h2></td> <td bgcolor=“yellow"> <h2>Italiano</h2> </td></tr></table> </center><hr size="10" color=“purple"></td> </tr></table></center><b><marquee direction=“up” scrollamount=“10”><font color=“blue” size=“5” face=“verdana”> XI S1</font></marquee></b></body></html> <html><body bgcolor=“yellow”> <hr size="10" width="50%"color="magenta"> <h1 align="center"> <u><i>materi UAS 2008</i></u></h1> <hr size="10" width="50%" color=“red"> <center><table border=“1"> <tr><td bgcolor=“pink"> <hr size="10" color=“blue"> <h2><center>Kelebihan Mail berbasis web: <br>Dapat dibaca secara online <br>gratis <br>butuh browser untuk membukanya <br>dapat diakses dimana saja </center></h2> <hr size="10" color="green"></td> <td bgcolor=“cyan"> <hr size="10" color="blue"> <h1>Peralatan Jaringan Internet</h1> <ul><h2><li>Network Interface Card</li> <li>Modem merubah sinyal : <ul><li>analog</li> <li>ke digital</li></ul> </li><li>digital ke analog</li> </h2></ul> <hr size="10" color="blue"> </td></tr><tr>