konsep dasar html - catatan kecil | hanya sekedar … fuchsia gray green lime maroon navy olive...
TRANSCRIPT
![Page 1: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/1.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/2.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/3.jpg)
PENGATURAN BACKGROUND
<html><body bgcolor = “...“ background = “...“ ></body></html>
Background warna Background gambar
![Page 4: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/4.jpg)
AquaBlackBlueFuchsia
GrayGreenLimeMaroon
NavyOlivePurpleRed
SilverTealWhiteYellow
PENGATURAN BACKGROUND WARNA
Warna Dasar
<html>
<body bgcolor="green">Belajar Desain Web
</body>
</html>
Contoh:
![Page 5: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/5.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/6.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/7.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/8.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/9.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/10.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/11.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/12.jpg)
<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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/13.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/14.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/15.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/16.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/17.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/18.jpg)
<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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/19.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/20.jpg)
HYPERLINKFormat Penulisan:
<A HREF = “…” TARGET=“…” > ……………. </A>
File yang akan dijadikan linkMenentukan obyek window yang akan dijadikan link ( _blank, _parent )
![Page 21: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/21.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/22.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/23.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/24.jpg)
PENGATURAN UKURAN TABELFormat Penulisan:
<TABLE WIDTH = “…” HEIGHT = “…” ><TR>
<TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD><TD WIDTH = “…” HEIGHT = “…” > … </TD>
</TR></TABLE>
![Page 25: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/25.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/26.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/27.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/28.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/29.jpg)
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: KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow PENGATURAN BACKGROUND WARNA Warna Dasar](https://reader031.vdocuments.pub/reader031/viewer/2022022008/5adf01557f8b9a97518b6797/html5/thumbnails/30.jpg)
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 ……………….. …………………………… ………………………….. ……………………………