KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive...

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:


<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:


<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 ……………….. …………………………… ………………………….. ……………………………

KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive...

Documents

Transcript of KONSEP DASAR HTML - Catatan Kecil | Hanya sekedar … Fuchsia Gray Green Lime Maroon Navy Olive...