Membuat Halaman Web Sederhana dengan HTML ~ Roisa

Membuat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Dimana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan halaman utama dengan latar belakang gambar sembarang dapat dibuat dengan HTML.

Printscreen web sederhana berbasis HTML:

Kode HTML:

<!DOCTYPE html> <html lang="en"> <head>  <link href="belajar_html/roisa-binner.ico" rel="icon" type="image/vnd.microsoft.icon"> </head>  <body background="belajar_html/bgbinner.jpg"> <p>  <table border="0" rules="all" width="1211" frame="border" align="center" height="668">  <tr> <td><img alt="Bulletin Electrical Engineering" src="belajar_html/roisa_pti.jpg" width="1200" height="123"></td> </tr> <tr> <td>  <table border="0" rules="rows" width="1200" frame="border" align="left" height="358"> <tr>  <td valign="top" width="200" align="left"> <p align="center"> <font color="yellow">  <img src="belajar_html/pinbinner.png" width="150" height="150"><br> What is Binner?<font size="2">?</font><br> <blink>Binner Edisi 1<br><img src="belajar_html/binner_1st.jpg" width="100" height="150" border="2"><br><br> Binner Edisi 2</blink><br><img src="belajar_html/binner_2nd.jpg" width="100" height="150" border="2"></font></p> </td>  <td valign="top" width="1000" align="left"> <font color="yellow"> <p><marquee>Selamat datang di Halaman Web Sederhana<blink></marquee></p> <p> </p>  <h1 align="right">Belajar Pemrograman Berbasis Web</h1></font> <hr> <hr>  <font color="white" size="3" face="Arial"> <p><strong>Pengertian Teknologi Informasi</strong></p> <p>Kamus <i>Oxford</i> (1995): TI adalah studi atau penggunaan peralatan elektronika, terutama komputer, untuk menyimpan, menganalisis, dan mendistribusikan informasi apa saja, termasuk kata-kata, bilangan, dan gambar</p> <p>Mengapa diperlukan Teknologi Informasi, karena:</p> <ul> <li>Kompleksitas tugas manajemen</li> <li>Pengaruh globalisasi</li> <li>Perlunya response time cepat</li> <li>Tekanan persaingan bisnis</li> <li>Peningkatan layanan</li> </ul> <p>Setelah mengetahui jawaban dari diperlukannya Teknologi Informasi, berikut beberapa alasan binner:</p> <ul> <li>Pendahuluan</li> <li>Pengaruh globalisasi</li> <li>Perlunya response time cepat</li> </ul><hr><hr></font>  <a href="http://um.ac.id"><font color="#ccffcc">UM: The Learning University (officialsite)</a><br>© <a href="http://binnerrs.blogspot.com">Roisatul Azizah</a></font><br> <p><font color="white">Kritik dan saran kirim ke sini:</font>  <a href="mailto:roisaaz@gmail.com"> <font color="#ccffcc">roisaaz@gmail.com</font></a></p> <p> </p> </td> </tr> </table> </td> </tr> <tr> <td> <hr> <p align="center"><font color="white">Roisatul Azizah® | 109533414524 <br> S1 Pendidikan Teknik Informatika 2009 Offering A <br></font> <a href="http://binnerrs.co.cc" target="_blank"> <font color="#ccffcc">http://binnerrs.co.cc</font></a></p> <hr> </td> </tr> </table> </p> </body> </html>

Penjelasan Singkat:

Pada pembuat halaman web sederhana diatas, sudah menggunakan struktur penulisan HTML5 yang lebih ringkas dengan bentuk sebagai berikut:

<!DOCTYPE html> <html lang=”en”> <head> </head> <body> </body> </html> <textarea><P></P></div></P></DIV> </DIV> </BODY> </HTML>

Untuk menampilkan teks pada halaman web dapat menggunakan elemen heading, dimulai dari heading 1 <h1> sampai dengan heading 6 <h6>. Pada elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi, left, right, ataupun center.

Selanjutnya untuk menampilkan garis horizontal dapat direpresentasikan melalui tag <hr>.

Bagaimana untuk pembuatan list?

Ada 3 macam list, yaitu yang terurut <ol>, tak terurut <ul>, dan definisi <dl>. Untuk menggunakan list, setelah dibuka dengan pilihan macam list dapat dilajutkan dengan mengetik list-nya <li>

Sekarang memasukkan gambar, untuk gambar background, langsung saja ditelakkan pada bagian <body> di tambahkan missal <body background="belajar_html/bgbinner.jpg"> maka akan keluar background dengan gambar yang kita punya. Kalau ingin memasukkan gambar ke web beda lagi, yang digunakan, misal <img src="belajar_html/binner_1st.jpg" width="100" height="150" border="2">

Tidak seru jika tidak ditambahkan link dan alamat email, karena dengan menambah link ataupun email, jalinan komunikasi kita dengan link yang kita hubungkan dapat terlaksana dengan mudah alias sekali klik, misal:

Terima kasih..

Untuk review dalam bentuk word dapat di download disini: roisa_lab1-2_html.dotx

Semoga bermanfaat

Roisatul Azizah – 109533414524

Artikel Lainnya

Col

Collegians - Campus

dasar-dasar html

Categories

Blog Archive

Escape View

Membuat Halaman Web Sederhana dengan HTML

Artikel Lainnya

0 comment:

Posting Komentar

Entri Populer

Galery