Page 1
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 merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen
Page 2
contoh
FORMAT PENULISAN HTML
<html>
<head>
</head>
<body>
</body></html>
<html>
<head> <title>
Contoh HTML</title>
</head><body>
Belajar Desain Web</body>
</html>
Page 3
PENGATURAN BACKGROUND
<html><body bgcolor = “...“ background = “...“ ></body></html>
Background warna Background gambar
Page 4
AquaBlackBlueFuchsia
GrayGreenLimeMaroon
NavyOlivePurpleRed
SilverTealWhiteYellow
PENGATURAN BACKGROUND WARNA
Warna Dasar
<html>
<body bgcolor="green">Belajar Desain Web
</body>
</html>
Contoh:
Page 5
PENGATURAN BACKGROUND WARNAKombinasi 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>
</html>
Contoh:
Page 6
PENGATURAN GAMBAR
Keterangan GIF JPEGDukungan 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- PCX
Page 7
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">
<IMG SRC=“judul-2.Gif”> </BODY></HTML>
Page 8
PENGATURAN BARIS DAN PARAGRAPH
<HTML><BODY>
Belajar <BR> Desain Web
</BODY></HTML>
<HTML><BODY>
Belajar <P> Desain Web </P>
</BODY></HTML>
Pengaturan barisPengaturan paragraph
Page 9
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>
</BODY></HTML>
Pengaturan Paragraph : <P ALIGN = “ … “ > . . . . . </P>
Left Right Center
Page 10
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>
Contoh 1: Contoh 2:
Page 11
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</BODY></HTML>
Contoh:
Page 12
<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
Font cetak besar
Page 13
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>O2<sup>4</sup><small>small</small><big>big</big>
</pre>
</body></html>
Page 14
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></body></html>
Contoh:
Page 15
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>
Contoh:
Page 16
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,…
Contoh:
Page 17
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></body></html>
Contoh:
Page 18
<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)
Contoh:
Page 19
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></body></html>
Type: - Disc- Circle- Square
Contoh:
Page 20
HYPERLINKFormat Penulisan:
<A HREF = “…” TARGET=“…” > ……………. </A>
File yang akan dijadikan linkMenentukan obyek window yang akan dijadikan link ( _blank, _parent )
Page 21
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>
Page 22
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
Matakuliah : Web Desain
Page 23
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
Page 24
PENGATURAN UKURAN TABELFormat Penulisan:
<TABLE WIDTH = “…” HEIGHT = “…” ><TR>
<TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD>
</TR></TABLE>
Page 25
PENGATURAN BACKGROUND PADA TABELFormat Penulisan:
<TABLE BGCOLOR = “…” BACKGROUND = “…” ><TR>
<TD BGCOLOR = “…” BACKGROUND = “…” > … </TD><TD BGCOLOR = “…” BACKGROUND = “…” > … </TD><TD BGCOLOR = “…” BACKGROUND = “…” > … </TD>
</TR></TABLE>
Page 26
PENGATURAN DATA PADA TABEL
Format Penulisan:
<TABLE ><TR>
<TD ALIGN = “…” VALIGN = “…” > … </TD><TD ALIGN = “…” VALIGN = “…” > … </TD><TD ALIGN = “…” VALIGN = “…” > … </TD>
</TR></TABLE>
RightCenterLeft
TopMiddleBottom
ALIGN VALIGN
Page 27
MENGGABUNGKAN KOLOM PADA TABEL
A
B C D
A
B C D
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>
</TABLE>
</BODY></HTML>
Page 28
MENGGABUNGKAN BARIS PADA TABEL
A
B
C
D
A
B
C
D
1
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>
</TABLE>
</BODY></HTML>
Page 29
CONTOH APLIKASI PEMAKAIAN TABEL
30%
25%
30%
25%
<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>
</TR>
</TABLE>
</BODY></HTML>
Page 30
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:
MENU 1
MENU 2
MENU 3
MENU 4
MENU 5
Selamat datang di web site tabloid on-line yang telah di launching pada tanggal ……………….. …………………………… ………………………….. ……………………………