Bab 2
Struktur HTML & Tag-Tag Dasar
Praktikum 1
<html>
<head>
<title>Contoh</title>
</head>
<body>
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>
Praktikum 2
Menambahkan warna background, dan
pemformatan tampilan teks.
<html>
<head>
<title>Contoh2</title>
</head>
<body bgcolor=”#0000ff” text=”#ff0000” >
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>
Praktikum 3
(Paragraf)
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>SELAMAT DATANG</p>
<p>Di Dunia HTML</p>
<p>Elemen paragraf ditandai dengan tag P
dan setiap paragraf baru di tampilkan pada baris
baru</p>
<p align=”left”> rata kiri</p>
<p align=”right”>rata kanan</p>
<p align=”center”> rata tengah</p>
<p align=”justiyf”> rata kiri kanan</p>
</body>
</html>
Praktikum 4
(Line Break)
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Elemen paragraf <BR>ditandai dengan tag P <BR> dan
setiap paragraf baru <BR> di tampilkan pada baris
baru</p>
</body>
</html>
Praktikum 5
(Heading)
<html> <head>
<title>Heading</title>
</head> <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Praktikum 6
(Membuat Garis)
<html> <body color="silver">
Garis Lebar 80%, rata kiri<hr width="80%" align="left">
Garis Lebar 80%, rata kanan<hr width="80%" align="right">
Garis normal rata tengah<hr align="center">
Garis ukuran "10", rata tengah, lebar "70%"<hr size="10"
align="center" width="70%">
Garis lebar "65%", rata Kiri, ukuran "15" noshade <hr
width="65%" align="left" size="15" noshade>
<p><hr>
<i>Copyright © nama anda</i>
</body>
</html>
Bab 3
Formating Teks HTML
Praktikum 1
(Format Font)
<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<s>ini di coret</s>
<BR>
X<sup>3</sup> + 2X<sup>2</sup> - 5
<BR>
H<sub>2</sub>O
</BODY></HTML>
Praktikum 2
(Karakter-karakter khusus)
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
Yen ¥ <br>
Euro €<br>
</BODY>
</HTML>
Praktikum 3
(Indentasi)
<html>
<head>
<title>Ceritaku Ceritamu</title>
</head>
<body>
<DD>Engkau datang membawa sejarah_
dari kota kecil menuju kota besar_
Indonesia rindu pemimpin sepertimu_
semoga ada tempat bagimu untuk dipilih_</DD>
<BLOCKQUOTE>Memimpin negeri ini bukanlah surga_
meyambung warisan panasnya neraka_
Tak semudah balikkan punggung tangganmu_
mesti seirama beresolusi_</BLOCKQUOTE>
<DL>
<DT>kami gantung harapan kami_
di bahu pemimpin kami</DT>
</DL>
</body>
</html>
BAB 4
List dan Link
Praktikum 1
(List)
Praktikum 1a
<HTML>
<BODY>
<B>SISTEM KOMPUTER</B>
<OL TYPE="I">
<B><LI>BRAIN WARE</B>
<B><LI>HARDWARE</B>
<OL Type="A" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</OL>
<B><LI>SOFTWARE</B>
<OL Type="a">
<LI>Sistem Operasi
<OL Type="i">
<LI>Windows
<LI>Linux
</OL>
<LI>Aplikasi
<OL >
<LI>MS. Word
<LI>CorelDraw
</OL></OL></OL>
</BODY>
</HTML>
Praktikum 1b
<HTML><BODY>
<B>SISTEM KOMPUTER</B>
<UL TYPE="Disc">
<B><LI>HARDWARE</B>
<UL Type="Circle" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</UL>
<B><LI>SOFTWARE</B>
<UL Type="square">
<LI><U>Sistem Operasi </U>
<LI><U>Aplikasi</U>
</UL></UL></BODY></HTML>
Praktikum 2a
(Link)
Latihan1
<html>
<head>
<title>Latihan1</title>
</head>
<body bgcolor="red">
<p>Latihan Satu</p>
<body>
</html>
Latihan2
<html>
<head>
<title>Latihan2</title>
</head>
<body bgcolor="blue">
<p>Latihan Dua</p>
<body>
</html>
Latihan3
<html>
<head>
<title>Latihan3</title>
</head>
<body bgcolor="yellow">
<p>Latihan Tiga</p>
<body>
</html>
Link_Menu
<html>
<head>
<title>Latihan Link</title>
</head>
<body link="red">
Selamat Belajar :
<UL Type="A">
<LI> <a href="Latihan1.html">Latihan 1</a></LI>
<LI> <a href="Latihan2.html">Latihan 2</a></LI>
<LI> <a href="Latihan3.html">Latihan 3</a></LI>
</UL>
<body>
</html>
Pratikum 2b
Jenis_Link
<HTML>
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP">
<BR>
<H1>Link secara relatif, lihat contoh di bawah
ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini </A> jika mau ke
halaman berikutnya
</P>
<H1>Link secara absolut, lihat contoh di bawah
ini:</H1>
<P>
Klik <A HREF="http://www.facebook.com">facebook</A>
menuju ke facebook
</P>
<P>
<H1>Membuat window baru untuk link:</H1>
Open <A HREF="http://www.mangosoft.com"
TARGET="_blank"> my home page</A>
with new window.
</P><H1>Membuat link tanpa garis bawah:</H1><P>
<A HREF="http://www.mangosoft.com" style=" textdecoration:none">Klik
This Link </A> , Looks it's not use underline.
</P></P>
<H1>Membuat link pada suatu pesan mail:</H1>
<BR> kirim email ke <a
href="mailto:syafriadi82@gmail.com">
syafriadi82@gmail.com</a>
</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A HREF="#TOP">
kembali ke atas</A>
</BODY>
</HTML>
