KONSEP DASAR HTML
HTML
( HyperText Mark up Language )
hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah 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
contoh
FORMAT PENULISAN HTML
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
<title>
Contoh HTML
</title>
</head>
<body>
Belajar Desain Web
</body>
PENGATURAN BACKGROUND
<html>
<body bgcolor = “...“ background = “...“ >
</body>
</html>
Background warna
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
PENGATURAN BACKGROUND WARNA
Warna Dasar
<html>
<body bgcolor="green"> Belajar Desain Web </body>
</html>
PENGATURAN BACKGROUND WARNA
Kombinasi Warna#_ _ _ _ _ _
R G B
0 1 2 3 4 5 6 7 8 9 A B C D E F
terang
gelap
contoh
#FFFFFF = putih
#000000 = hitam
<html>
<body bgcolor="#5A9B55"> Belajar Desain Web </body>
PENGATURAN GAMBAR
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 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
MENAMPILKAN GAMBAR
Format Penulisan:
< IMG SRC = ”…” WIDTH = ”…” HEIGHT = ”…” ALT = ”…” BORDER = ”…” >
menampilkan file gambar Mengatur lebar gambar
Mengatur tinggi gambar
menampilkan teks pada saat mouse didekatkan pada gambar
menampilkan frame pada gambar
Contoh: <HTML>
<BODY Background=“bg-01.jpg”>
<IMG SRC=“judul-1.Gif" ALT="Contoh File Gambar">
PENGATURAN BARIS
DAN PARAGRAPH
<HTML>
<BODY>
Belajar
<BR>
Desain Web
</BODY>
</HTML>
<HTML>
<BODY>
Belajar
<P>
Desain Web
</P>
</BODY>
</HTML>
Pengaturan baris
PENGATURAN PARAGRAPH
<HTML>
<BODY>
<P ALIGN="RIGHT">
Belajar Desain Web
</P>
<P ALIGN="CENTER">
Belajar Desain Web
</P>
<P ALIGN="LEFT">
Belajar Desain Web
</P>
Pengaturan Paragraph :
<P ALIGN = “ … “ > . . . </P>
PREFORMAT TEKS
Preformat teks digunakan untuk menampilkan teks sesuai dengan yang ditulis pada editor teks
<HTML> <BODY>
<PRE> Belajar
Desain
Web </PRE>
</BODY> </HTML> <HTML>
<BODY>
Belajar
Desain
Web
</BODY> </HTML>
PENGATURAN FONT
<FONT SIZE=“…” FACE=“…” COLOR=“…”> ……….</FONT>
Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7) Digunakan untuk mengatur jenis huruf,
misal: Arial, Times New Roman, Courier, dll
Digunakan untuk mengatur warna font, misal: Red, Yellow, #00FF00, dll
<HTML> <BODY>
<FONT COLOR="green" FACE="ARIAL" SIZE="6"> BELAJAR DESAIN WEB
<b>
….. </b>
<u>
…..
</u>
<i>
…..
</i>
<strike>
…..
</strike>
<sub>
…..
</sub>
<sup>
…..
</sup>
<small>
…..
</small>
<big>
…..
</big>
MODIFIKASI FONT
Cetak tebal font Garis bawah
Cetak miring font Garis tengah Subscript Superscript
Font cetak kecil
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>
MEMBUAT JUDUL (HEADING)
<h1>
…..
</h1>
<h2>
…..
</h2>
<h3>
…..
</h3>
<h4>
…..
</h4>
<h5>
…..
</h5>
<h6>
…..
</h6>
<h1 ALIGN = “ ….. “> ….. </h1>
left right center
<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>
NUMBERING (ORDERED LIST)
<ol>
<li>
...</li>
<li>
...</li>
<li>
...</li>
</ol>
Format Penulisan:
<html> <body>
Daftar Matakuliah: <ol>
<li>Kalkulus</li> <li>Desain Web</li>
<li>Bahasa Inggris </li> </ol>
</body> </html>
NUMBERING (ORDERED LIST)
<ol type=“…”>
<li>
...</li>
<li>
...</li>
<li>
...</li>
</ol>
Format Penulisan:
<html> <body>
Daftar Matakuliah: <ol type=“a”>
<li>Kalkulus</li> <li>Desain Web</li>
<li>Bahasa Inggris </li> </ol>
</body> </html>
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,…
NUMBERING (ORDERED LIST)
<ol type=“…” start=“…”>
<li>
...</li>
<li>
...</li>
<li>
...</li>
</ol>
Format Penulisan:
<html> <body>
Daftar Matakuliah:
<ol type=“a” start=“4”> <li>Kalkulus</li>
<li>Desain Web</li>
<li>Bahasa Inggris </li> </ol>
<ul>
<li>
...</li>
<li>
...</li>
<li>
...</li>
</ul>
Format Penulisan:
<html> <body>
Daftar Matakuliah: <ul>
<li>Kalkulus</li> <li>Desain Web</li>
<li>Bahasa Inggris </li> </ul>
</body> </html>
BULLETS (UN-ORDERED LIST)
BULLETS (UN-ORDERED LIST)
<ul type=“…”>
<li>
...</li>
<li>
...</li>
<li>
...</li>
</ul>
Format Penulisan:
<html> <body>
Daftar Matakuliah: <ul type=“circle”>
<li>Kalkulus</li> <li>Desain Web</li>
<li>Bahasa Inggris </li> </ul>
Type: - Disc - Circle - Square
HYPERLINK
Format Penulisan:
<A HREF = “…” TARGET=“…” > ………. </A>
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>
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>
PENGATURAN UKURAN TABEL
Format Penulisan:
<TABLE WIDTH = “…” HEIGHT = “…” > <TR>
<TD WIDTH = “…” HEIGHT = “…” > … </TD> <TD WIDTH = “…” HEIGHT = “…” > … </TD> <TD WIDTH = “…” HEIGHT = “…” > … </TD>
PENGATURAN BACKGROUND PADA TABEL
Format Penulisan:
<TABLE BGCOLOR = “…” BACKGROUND = “…” > <TR>
<TD BGCOLOR = “…” BACKGROUND = “…” > … </TD> <TD BGCOLOR = “…” BACKGROUND = “…” > … </TD> <TD BGCOLOR = “…” BACKGROUND = “…” > … </TD>
PENGATURAN DATA PADA TABEL
Format Penulisan:
<TABLE > <TR>
<TD ALIGN = “…” VALIGN = “…” > … </TD> <TD ALIGN = “…” VALIGN = “…” > … </TD> <TD ALIGN = “…” VALIGN = “…” > … </TD>
</TR> </TABLE>
Right Center Left
Top Middle Bottom
MENGGABUNGKAN
KOLOM
PADA TABEL
A
B C D
A
1
2
3
<HTML> <BODY>
<TABLE BORDER="1"> <TR>
<TD COLSPAN="3"> A </TD> </TR>
<TR>
<TD> B </TD> <TD> C </TD> <TD> D </TD> </TR>
MENGGABUNGKAN
BARIS
PADA TABEL
A B C D A B C D1
2
3
<HTML> <BODY><TABLE BORDER="3" > <TR>
<TD ROWSPAN="3" > A </TD> <TD> B </TD>
</TR> <TR>
<TD> C </TD> </TR>
<TR>
<TD> D </TD> </TR>
CONTOH APLIKASI PEMAKAIAN TABEL
30%
25%
30%
<HTML> <BODY>
<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>
TUGAS 1
• Buatlah desain web minimal terdiri dari 5 halaman, dengan ketentuan masing-masing 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:
