Desain WEB
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer karena kemampuan grafiknya. Dan HTML merupakan program yang dipakai untuk membuat document WWW yang bisa di akses melalui web.
Pengenalan HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan document web, yang bisa dipakai untuk : Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML
Browser dan Editor Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya. Editor merupakan Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
Tag-tag HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. Setiap document HTML di awali dan di akhiri dengan tag HTML
Tag-tag HTML <HTML> <HEAD> <TITLE> berisi text yang akan muncul pada title bar browser </TITLE> </HEAD> <BODY> berisi tentang text, gambar, atau apapun yang ingin ditampilkan </BODY> </HTML> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.
Tag-tag HTML Dalam tag HTML di dalamnya kita bisa memberikan element dan atribut yang melekat di dalamnya. Sintaxnya adalah sbb : <ELEMENT ATTRIBUTE = value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut.
Program 1 <HTML> <HEAD> <TITLE> text title </TITLE> </HEAD> <BODY> <BODY BGCOLOR=lavender> </BODY> </HTML> BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender, yang artinya body html kita warna backgroundnya kita beri warna lavender. Untuk memulai bekerja dengan HTML anda bisa gunakan editor NotePad atau editor lainya. Caranya: 1. Ketikkan teks yang ada dalam box tersebut di notepad. 2. Simpan dengan nama file satu.htm atau satu.html 3. Buka dengan browser internet explorer atau yang lain file satu.htm
Kode Warna Pengaturan warna di halaman HTML menggunakan mode kombinasi RGB. Yang mana setiap warna ditampilkan dalam dua digit nilai heksadesimal(0,1,2..F). Setiap bagian dua digit menunjukkan intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna ,dst. Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, background, bgcolor, text, link, vlink, alink, font dan lainya.
Tabel warna
Heading, Paragraph dan Break Tag Heading <hx> digunakan untuk memformat heading (judul dan sub judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal di HTML, yaitu <h1> </h1>sampai <h6></h6>. Tag paragraph <p> </p> berfungsi layaknya untuk pengaturan antar paragraph dalam halaman web anda. Dalam elemen paragraph terdapat atribut align=[left|center|right] yang berfungsi pengaturan perataan paragraph. Tag Break <br> berfungsi untuk memberikan baris baru suatu paragraph dalam halaman web anda. Tag break ini tidak memerlukan tag penutup break. Tag Horizontal ruler <hr> berfungsi untuk menampilkan garis horisontal tiga dimensi di dalam halaman web. Tag ini juga tidak memerlukan penutup.
Program 2 <HTML> <HEAD> <TITLE> paragrap, break dan hr </TITLE> </HEAD> <BODY BGCOLOR=#990066 text=#FFCCFF > <h1>TOKO BUKU SERBA MURAH</h1> <hr width=50% align=left> <h2>Toko kami menyediakan</h2> <h3>Alat Tulis</h3> <p> Pensil <br>ballpoint<br>penggaris<br>dll</p> <h3>Buku buku Pelajaran</h3> <p> Ilmu Pasti <br>Ilmu Bumi<br>Sejarah<br>dll</p> <h3>Alat Kantor</h3> <p>Meja <br>Kursi<br>File Management<br>dll</p> </BODY> </HTML>
Pemformatan Karakter Karakter/kalimat pada halaman HTML bisa diformat sesuai design yang kita butuhkan, baik ukuran , jenis maupun warna dengan menggunakan tag <font> </font>. Atribut elemen font sbb : Size=angka (ukuran huruf, default 3) color=warna(warna huruf, default black) face=jenis huruf (default Times New Roman) Elemen ragam karakter : <b> teks disini </b> menghasilkan huruf tebal <i> teks disini </i> menghasilkan huruf miring <u>teks disini</u> menghasilkan huruf bergaris bawah
Program 3 <HTML> <HEAD> <TITLE> format karakter</TITLE> </HEAD> <BODY BGCOLOR=#000000 text=#FFFFFF > <h1 align =center><font color=#FFFF00 face=Arial>TOKO BUKU SERBA MURAH</font></h1> <hr width=360 align=center> <h2>Toko kami menyediakan</h2> <h3><font color=red>Alat Tulis</font></h3> <p align=center> Pensil <br>ballpoint<br>penggaris<br>dll</p> <h3 font color=red>Buku buku Pelajaran</h3> <p align=right> Ilmu Pasti <br>Ilmu Bumi<br>Sejarah<br>dll</p> <h3>Alat Kantor</h3> <p align=left>Meja <br>Kursi<br>File Management<br>dll</p> </BODY> </HTML>
Listing Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar/list. Ada dua jenis daftar yang dikenal di HTML, yaitu : <ul> daftar dalam format bullet/unordered list type=[disc|square|circle|] default disc <ol> daftar dalma format ordered list type=[1|a|A|i|I] default 1
Program 4 <html> <head> <title>Ordered List</title> </head> <body> <P>Shedule for HTML Course</P> <ol start="1" type="I"> <li>Sunday</li> <ol type="a"> <li>Introduction to HTML</li> <li>Creating List</li> </ol> <li>Monday</li> <ol type="A"> <li>Creating table</li> <li>Inserting Image</li> <li>Tuesday</li> <ol type="I"> <li>Creating Link</li> <li>Preparing Website</li> <li>Wednesday</li> </body> </html>
Menempelkan Image Kita dapat menempelkan gambar dalam html dengan format file JPG atau GIF. Untuk menampilkannya digunakan tag IMG : <IMG SRC=namafilegambar> atribut elemen gambar : SRC = lokasi dan nama gambar Alt = teks (teks alternatif) Width = lebar gambar dalam pixel Height = tinggi gambar dalm pixel Align =[top|middle|bottom|left|right] perataan gambar Border = pixel (tebal garis tepi gambar)
Membuat Link Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman yang lain, atau ke URL lain, bahkan dalam satu halaman berpindah ke sub judul yang lain. Format tag link adalah sbb : <a href = URL_tujuan>hypertext</a> URL_tujuan bernilai lokasi dan nama file yang akan dituju Hypertext nilainya akan ditampilkan dibrowser sbg text link atau tombol penghubung.
Membuat Table Tag <table> </table>digunakan untuk membuat table dalam document HTML. Elemen tabel berisi property : <tr> … </tr> untuk menentukan baris (table row) <td> .. </td> untuk menampilkan data pada sel tabel (table data) Sedangkan atribut elemen tabel adalah : Width = dalam satuan panjang (dipakai untuk lebar table ukuran bisa dalam pixel atau persen) Height = dalam satuan panjang (dipakai untuk tinggi tabel, ukuran bbisa dalam pixel atau persen) Border = dalam satuan pixel (dipakai tebal garis tepi) Cellspacing = dalam satuan pixel (dipakai untuk spasi antar sel) Cellpading = dalam satuan pixel (dipakai untuk spasi di dalam sel) Align = [left|center|right] (dipakai untuk perataan tabel) Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang tabel)
Membuat Table Atribut table row : Atribut tabel data : Align = [left|center|right] (dipakai untuk perataan dalam satu baris sel secara horizontal) Valign = [top|middle|bottom] (dipakai untuk perataan dalam satu baris sel secara vertikal) Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang baris) Atribut tabel data : Rowspan = penggabungan baris Colspan = penggabungan kolom Align = [left|center|right] (dipakai untuk perataan sel secara horisontal) Valign = [top|middle|bottom] (dipakai untuk perataan sel secara vertikal) Width = dalam satuan panjang (dipakai untuk lebar sel ukuran bisa dalam pixel atau persen) Height = dalam satuan panjang (dipakai untuk tinggi sel, ukuran bbisa dalam pixel atau persen) Bgcolor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang sel)
Program 5 <html> <head> <title>Using Table</title> </head> <body> <table bgcolor=”CCCCFF” width="62%" border="1" cellpadding="0"> <tr> <td colspan="3" align="center">Quarter 1</td> <td colspan="3" align="center">Quarter 2</td> </tr> <tr align="center"> <td>Jan</td> <td>Feb</td> <td>Mar</td> <td>Apr</td> <td>May</td> <td>Jun</td> <td>100</td> <td>5000</td> <td>200</td> <td>1500</td> <td>2500</td> <td>1750</td> <td>290</td> <td>5050</td> <td>2300</td> <td>270</td> <td>300</td> </table> </body> </html>
Tugas Membuat Halaman Web untuk Jurusan Teknik Elektro