By : Ni Kadek Ariasih,S.Kom INTERNET DAN INFRASTRUKTUR-WEEKS 7 (DESAIN WEB DENGAN HTML) By : Ni Kadek Ariasih,S.Kom
MATERI TAG-TAG HTML KODE WARNA HEADING, PARAGRAPH DAN BREAK PEMFORMATAN KARAKTER LISTING MENEMPELKAN IMAGE MEMBUAT LINK MEMBUAT TABLE
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 : 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 membuat fasilitas seperti Google