DASAR DASAR HTML Laboratorium Internet Dasar Lembaga Pengembangan
DASAR - DASAR HTML Laboratorium Internet Dasar Lembaga Pengembangan Komputerisasi 1 Universitas Gunadarma @2012
WEBSITE Layanan World Wide Web (WWW) adalah layanan yang mampu menampilkan dokumen dalam bentuk teks, grafis dan dapat bersifat interaktif. Pembuatan website ini menggunakan sebuah bahasa yang dinamakan Hyper Text Markup Language (HTML). 2
PENGENALAN HTML Dengan menggunakan HTML, kita dapat : § § § 3 Mendesain tampilan website beserta isinya. Membuat form interaktif untuk formulir pendaftaran, belanja online, dan lain-lain. Menambahkan gambar, suara maupun video ke dalam tampilan website.
PENULISAN HTML 4 § Memerlukan sebuah editor sebagai media penulisan dokumen HTML. Editor yang dapat digunakan antara lain Notepad, Macromedia Dreamweaver, Frontpage. § Hasil penulisan sebuah dokumen HTML ditampilkan dalam Browser berfungsi untuk menterjemahkan tag-tag HTML menjadi sebuah halaman web.
TAG (PERINTAH) HTML Bentuk dasar : <BEGIN TAG>…. </END TAG> Bentuk lengkap : <ELEMEN ATTRIBUTE=VALUE> elemen attribute value Contoh : 5 nama tag attribute dari tag nilai suatu attribute <BODY BGCOLOR=green>
STRUKTUR DOKUMEN HTML 6 § Tag HTML : <HTML>. . . . </HTML> § Tag HEAD : <HEAD>. . . . </HEAD> § Tag TITLE : <TITLE>. . </TITLE> § Tag BODY : <BODY>. . . . </BODY>
STRUKTUR DOKUMEN HTML <HTML> <HEAD> <TITLE>. . . . judul. . . . </TITLE> </HEAD> <BODY>. . . . isi. . . </BODY> </HTML> 7
ELEMEN DASAR HTML (1) 8 § Blok Level Elemen tag : <h 1>. . </h 1> § Paragraf tag : <p>. . . </p> § Huruf : tag : <font atribut>. . . </font> § Format Teks
ELEMEN DASAR HTML (2) Beberapa contoh tag untuk memformat teks : <B>. . . </B> <U>. . . </U> <SUP>. . . </SUP> Memformat teks untuk dicetak tebal Memformat teks dengan garis bawah Memformat teks menjadi supescript <STRIKE>. . . </STRIKE> Memformat teks seperti di coret <BLINK>…</BLINK> 9 Teks berkedip
LINKS § Digunakan untuk membuat link ke halaman lain. § Tag : <A HREF>. . . </A> 10 § Tulisan yang terletak antara <A HREF> dan </A> akan terdapat garis bawah. § Contoh : <A HREF="halaman 2. html">Klik di sini</A>
LISTS 11 § Unordered Lists Membuat daftar item dengan tanda bullet § Ordered Lists membuat daftar item, yang memiliki nomor secara urut. § Definition Lists mendefinisikan/menjelaskan istilah-istilah
CONTOH LISTS (1) <HTML> <BODY> <H 4>An Unordered List: </H 4> <UL> <LI>Coffee</LI> <LI>Tea</LI> <LI>Milk</LI> </UL> </BODY> </HTML> 12 An Unordered List • Coffee • Tea • Milk
CONTOH LISTS (2) <HTML> <BODY> <H 4>An Ordered List : </H 4> <OL> <LI>Coffee</LI> <LI>Tea</LI> <LI>Milk</LI> </OL> </BODY> </HTML> 13 An Ordered List : 1. Coffee 2. Tea 3. Milk
CONTOH LISTS (3) <HTML> <BODY> <H 4>A Definition List : </H 4> <DL> <DT>Coffee</DT> <DD>Black hot drink</DD> <DT>Milk</DT> <DD>White cold drink</DD> </DL> </BODY> </HTML> 14 A Definition List : Coffee Black hot drink Milk White cold drink
IMAGES Digunakan untuk menampilkan gambar atau animasi pada halaman web. Format gambar yang dapat digunakan : PICT, GIF, JPEG, BMP, dan lain-lain Tag : <IMG> disertai dengan atribut : SRC menentukan sumber gambar yang akan ditampilkan ALT alternatif bila browser berbasis teks ALIGN mengatur perataan teks (LEFT/CENTER/RIGHT) Contoh : 15 <IMG SRC=”logo. gif” ALT=”Ini adalah gambar logo” ALIGN=right>
HTML LANJUT Laboratorium Internet Dasar Lembaga Pengembangan Komputerisasi 16 Universitas Gunadarma @2012
TABLES Berguna untuk membuat halaman web “terbagi” pada beberapa kolom/baris. Tag : <TABLE>. . . </TABLE> Elemen utama dalam pembuatan table : <TR>. . </TR> table row : membuat baris baru pada tabel <TD>. . </TD> table data : membuat kolom baru pada tabel 17 Tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>.
CONTOH TABLE <TABLE border=2> <TR> <TH>Nama Lab. </TH> <TH>Lokasi</TH> </TR> <TD>Lab. Internet Dasar</TD> <TD>Gd 3 Lt 2 Depok</TD> </TR> </TABLE> 18 Nama Lab. Internet Dasar Lokasi Gd 3 Lt 2 Depok
FRAMES Digunakan untuk membagi-bagi window browser menjadi beberapa bagian sehingga berbagai informasi ditampilkan pada satu saat. Tag : untuk membentuk baris frame <FRAMESET ROWS=”val 1, val 2, …”> untuk membentuk kolom frame 19 <FRAMESET COLS=”val 1, val 2, …. ”> dapat
CONTOH FRAMES (1) <html> <frameset rows="25%, 50%, 25%"> <frame src="frame_a. htm" /> <frame src="frame_b. htm" /> <frame src="frame_c. htm" /> </frameset> </html> 20 Frame a Frame b Frame c
CONTOH FRAMES (2) <html> <frameset cols="25%, 50%, 25%"> <frame src="frame_a. htm" /> <frame src="frame_b. htm" /> <frame src="frame_c. htm" /> </frameset> </html> 21 Frame a b c
CONTOH FRAMES (3) <html> <frameset rows="50%, 50%"> Frame a <frame src="frame_a. htm" /> <frameset cols="25%, 75%"> <frame src="frame_b. htm" /> <frame src="frame_c. htm" /> </frameset> </html> 22 Frame b Frame c
- Slides: 22
