View
217
Download
3
Category
Preview:
Citation preview
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
contoh
FORMAT PENULISAN HTML
<html>
<head>
</head>
<body>
</body></html>
<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
AquaBlackBlueFuchsia
GrayGreenLimeMaroon
NavyOlivePurpleRed
SilverTealWhiteYellow
PENGATURAN BACKGROUND WARNA
Warna Dasar
<html>
<body bgcolor="green">Belajar Desain Web
</body>
</html>
Contoh:
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:
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
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>
PENGATURAN BARIS DAN PARAGRAPH
<HTML><BODY>
Belajar <BR> Desain Web
</BODY></HTML>
<HTML><BODY>
Belajar <P> Desain Web </P>
</BODY></HTML>
Pengaturan barisPengaturan paragraph
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
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:
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:
<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
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>
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:
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:
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:
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:
<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:
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:
HYPERLINKFormat Penulisan:
<A HREF = “…” TARGET=“…” > ……………. </A>
File yang akan dijadikan linkMenentukan 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>
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
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
PENGATURAN UKURAN TABELFormat Penulisan:
<TABLE WIDTH = “…” HEIGHT = “…” ><TR>
<TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD>
</TR></TABLE>
PENGATURAN BACKGROUND PADA TABELFormat Penulisan:
<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>
RightCenterLeft
TopMiddleBottom
ALIGN VALIGN
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>
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>
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>
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 ……………….. …………………………… ………………………….. ……………………………
Recommended