KONSEP DASAR HTML HTML ( HyperText Mark up Language ) hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskahnaskah lainnya markup menunjukkan bahwa pada file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web Language menunjukkan bahwa HTML bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen
FORMAT PENULISAN HTML <html> <head> </head> <body> </body> </html> contoh <html> <head> <title> Contoh HTML </title> </head> <body> Belajar Desain Web </body> </html>
PENGATURAN BACKGROUND <html> <body bgcolor =... background =... > </body> </html> Background warna Background gambar
PENGATURAN BACKGROUND WARNA Warna Dasar Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow Contoh: <html> <body bgcolor="green"> Belajar Desain Web </body> </html>
Kombinasi Warna PENGATURAN BACKGROUND WARNA # R G B terang 0 1 2 3 4 5 6 7 8 9 A B C D E F gelap contoh #FFFFFF = putih #000000 = hitam Contoh: <html> <body bgcolor="#5a9b55"> Belajar Desain Web </body> </html>
PENGATURAN GAMBAR Syarat : - Ukuran file maksimal 100 Kb - Lebar : 500 pixel, Tinggi : 400 pixel Format Gambar : - GIF - JPG - Bitmap - Tiff - Targa - Windows Metafiles - Sun Raster - PostScript - PCD - PCX Keterangan GIF JPEG Dukungan Browser Sangat Bagus Bagus Jenis Warna 256 16,7 juta Interlace Image Ya Tidak Transparent Image Ya Tidak Animasi Ya Tidak Jenis Pemadatan Lossless Compression Lossy Compression Ukuran File Lebih Kecil Lebih Besar Pemadatan Gambar Logo/Icon Sangat Bagus Kurang Fotografi Jelek Sangat Bagus Waktu Menampilkan Lebih Cepat Lebih Lambat
MENAMPILKAN GAMBAR Format Penulisan: Mengatur lebar gambar menampilkan teks pada saat mouse didekatkan pada gambar < IMG SRC = WIDTH = HEIGHT = ALT = BORDER = > menampilkan file gambar menampilkan frame pada gambar Mengatur tinggi gambar Contoh: <HTML> <BODY Background= bg-01.jpg > <IMG SRC= judul-1.gif" ALT="Contoh File Gambar"> <IMG SRC= judul-2.gif > </BODY> </HTML>
PENGATURAN BARIS DAN PARAGRAPH Pengaturan baris Pengaturan paragraph <HTML> <BODY> Belajar <BR> Desain Web </BODY> </HTML> <HTML> <BODY> Belajar <P> Desain Web </P> </BODY> </HTML>
PENGATURAN PARAGRAPH Pengaturan Paragraph : <P ALIGN = >..... </P> Left Right Center <HTML> <BODY> <P ALIGN="RIGHT"> Belajar Desain Web </P> <P ALIGN="CENTER"> Belajar Desain Web </P> <P ALIGN="LEFT"> Belajar Desain Web </P> </BODY> </HTML>
PREFORMAT TEKS Preformat teks digunakan untuk menampilkan teks sesuai dengan yang ditulis pada editor teks Contoh 1: Contoh 2: <HTML> <BODY> Belajar Desain <HTML> <BODY> <PRE> Belajar Desain Web </PRE> Web </BODY> </HTML> </BODY> </HTML>
PENGATURAN FONT Digunakan untuk mengatur jenis huruf, misal: Arial, Times New Roman, Courier, dll <FONT SIZE= FACE= COLOR= >.</FONT> Digunakan untuk mengatur warna font, misal: Red, Yellow, #00FF00, dll Contoh: Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7) <HTML> <BODY> <FONT COLOR="green" FACE="ARIAL" SIZE="6"> BELAJAR DESAIN WEB </BODY> </HTML>
MODIFIKASI FONT <b>.. </b> <u>.. </u> <i>.. </i> <strike>.. </strike> <sub>.. </sub> <sup>.. </sup> <small>.. </small> <big>.. </big> Cetak tebal font Garis bawah Cetak miring font Garis tengah Subscript Superscript Font cetak kecil Font cetak besar
CONTOH MODIFIKASI FONT <html> <body> <pre> <b>teks Cetak Tebal</b> <u>garis Bawah Teks</u> <i>teks Cetak Miring</i> <strike>teks Coret Tengah</strike> H<sub>2</sub>O 2<sup>4</sup> <small>small</small> <big>big</big> </pre> </body> </html>
MEMBUAT JUDUL (HEADING) <h1>.. </h1> <h2>.. </h2> <h3>.. </h3> <h4>.. </h4> <h5>.. </h5> <h6>.. </h6> <h1 ALIGN =.. >.. </h1> left right center Contoh: <html> <body> <pre> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> </pre> </body> </html>
NUMBERING (ORDERED LIST) Format Penulisan: <ol> <li>... </li> <li>... </li> <li>... </li> </ol> Contoh: <html> <body> Daftar Matakuliah: <ol> <li>kalkulus</li> <li>desain Web</li> <li>bahasa Inggris </li> </ol> </body> </html>
NUMBERING (ORDERED LIST) Format Penulisan: <ol type= > <li>... </li> <li>... </li> <li>... </li> Type: 1 : 1,2,3, a : a,b,c,d, A : A,B,C,D,. i : i,ii,iii,iv, I : I,II,III,IV, </ol> Contoh: <html> <body> Daftar Matakuliah: <ol type= a > <li>kalkulus</li> <li>desain Web</li> <li>bahasa Inggris </li> </ol> </body> </html>
NUMBERING (ORDERED LIST) Format Penulisan: <ol type= start= > <li>... </li> <li>... </li> <li>... </li> </ol> Contoh: <html> <body> Daftar Matakuliah: <ol type= a start= 4 > <li>kalkulus</li> <li>desain Web</li> <li>bahasa Inggris </li> </ol> </body> </html>
BULLETS (UN-ORDERED LIST) Format Penulisan: <ul> <li>... </li> <li>... </li> <li>... </li> </ul> Contoh: <html> <body> Daftar Matakuliah: <ul> <li>kalkulus</li> <li>desain Web</li> <li>bahasa Inggris </li> </ul> </body> </html>
BULLETS (UN-ORDERED LIST) Format Penulisan: <ul type= > <li>... </li> <li>... </li> <li>... </li> Type: - Disc - Circle - Square </ul> Contoh: <html> <body> Daftar Matakuliah: <ul type= circle > <li>kalkulus</li> <li>desain Web</li> <li>bahasa Inggris </li> </ul> </body> </html>
Format Penulisan: HYPERLINK <A HREF = TARGET= >. </A> File yang akan dijadikan link Menentukan obyek window yang akan dijadikan link ( _blank, _parent )
CONTOH HYPERLINK <HTML> <BODY> <A HREF="materi-2a.htm"> Klik disini<p> </A> <A HREF="materi-2b.htm" TARGET="_blank"> Klik disini<p> </A> <A HREF="materi-2c.htm" TARGET="_parent"> <IMG SRC="tombol.gif" BORDER=0><P> </A> </BODY> </HTML>
Matakuliah : Web Desain Buatlah 5 halaman web desain (5 file.htm) yang berisi informasi atau tema dari sebuah tabloid on-line, dengan ketentuan sebagai berikut : Masing-masing bagian berisi background halaman yang berbeda-beda Masing-masing halaman dapat dibuat link ke halaman yang lain
TABEL Format Penulisan: <TABLE BORDER = > <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> <TR>. </TR> : untuk pindah baris baru <TD>. </TD> : untuk menampilkan data pada setiap kolom
Format Penulisan: PENGATURAN UKURAN TABEL <TABLE WIDTH = HEIGHT = > <TR> <TD WIDTH = HEIGHT = > </TD> <TD WIDTH = HEIGHT = > </TD> <TD WIDTH = HEIGHT = > </TD> </TR> </TABLE>
Format Penulisan: PENGATURAN BACKGROUND PADA TABEL <TABLE BGCOLOR = BACKGROUND = > <TR> <TD BGCOLOR = BACKGROUND = > </TD> <TD BGCOLOR = BACKGROUND = > </TD> <TD BGCOLOR = BACKGROUND = > </TD> </TR> </TABLE>
PENGATURAN DATA PADA TABEL Format Penulisan: <TABLE > <TR> <TD ALIGN = VALIGN = > </TD> <TD ALIGN = VALIGN = > </TD> <TD ALIGN = VALIGN = > </TD> </TR> </TABLE> ALIGN Right Center Left VALIGN Top Middle Bottom
MENGGABUNGKAN KOLOM PADA TABEL A <HTML> <BODY> <TABLE BORDER="1"> B C D 1 2 3 A B C D <TR> <TD COLSPAN="3"> A </TD> </TR> <TR> <TD> B </TD> <TD> C </TD> <TD> D </TD> </TR> </TABLE> </BODY> </HTML>
MENGGABUNGKAN BARIS PADA TABEL B <HTML> <BODY> 1 2 A A C D B C <TABLE BORDER="3" > <TR> <TD ROWSPAN="3" > A </TD> <TD> B </TD> </TR> <TR> <TD> C </TD> </TR> <TR> <TD> D </TD> </TR> </TABLE> 3 D </BODY> </HTML>
CONTOH APLIKASI PEMAKAIAN TABEL 30% <HTML> <BODY> 25% <TABLE BORDER= 3 WIDTH = 90% HEIGHT= 90%"> <TR> <TD COLSPAN= 2" HEIGHT="30%"> <BR> </TD> </TR> <TR> <TD WIDTH="25%"> <BR> </TD> <TD > <BR> </TD> </TR> 30% </TABLE> </BODY> </HTML> 25%
TUGAS 1 Buatlah desain web minimal terdiri dari 5 halaman, dengan ketentuan masingmasing halaman mempunyai isi, background, desain, tabel yang berbeda-beda satu sama lain. Dan setiap halaman mempunyai tombol yang dapat dibuat link ke halaman yang lain. Contoh tampilan desain: MENU 1 MENU 2 MENU 3 MENU 4 MENU 5 Selamat datang di web site tabloid on-line yang telah di launching pada tanggal....