SYNTAX HTML
Syntax Pada HTML
- ukuran gambar
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>
<img border="0" src="../Materi Kuliah 2/graphic design animatiom/android.png"
width="512" height="512" ></p>
</body></html>
- Image Map
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="../Materi Kuliah 2/graphic design animatiom/alfa.png"
width="405" height="467" border="0" usemap="#map">
<map name="Map">
<area shape="rect"
coords="0,0,200,100"
href="file1.htm"
alt="kotak link">
<area shape="circle"
coords="354,41,36"
href="file2.htm"
alt="lingkaran link">
<area shape="poly" coords="58,102,97,101,110,134,119,119,117,195,69,196,47,162,62,143"
href="#">
</map></body></html>
- Link Gambar
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p><a href="../Materi Kuliah 2/graphic design animatiom/android_ice_cream_sandwich_by_fdespotovski-d4li64o.png">
<img border="0"
src="../Materi Kuliah 2/graphic design animatiom/AndroidCupcake.png"
width="300" height="300"></a></p>
<p><font face="arial">
Gambar ini menggunakan Link ke halaman lain </font></p>
</body></html>
- Membuat Aouto Thumbnail pada Gambar
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p><a href="ice.jpg">
<img border="2" src="ice_small1.jpg" xthumbnail-orig-image="ice.jpg"></a></p>
</body>
</html>
- Membuat Link1
<html>
<head>
<title>Usiing Link</title>
</head>
<body>
<center><font size="5" color=hotpink>Creatinng Link</font></center>
<br>
<a href="link2.hhtm"> Click here to view document 2</a>
</body>
</html>
- Membuat Link2
<html>
<head>
<title>Document 2</title>
</head>
<center><font size="5" color=limegreen>Creating Link</font></center>
<br>
<a href="link.htm"> back to document 1</a>
<body>
</body>
</html>
- Membuat Link3
<html>
<head>
<title>Anchor Name</title>
</head>
<body>
<pre>
<b>Setting up Web Server</b>
Windows users can get a web server up and running quickly on their local computer by installing either
PWS or IIS. The web server may already be installed. Check your folder structure to see if it contains a C:\Inetpub folder.
PWS and IIS create this folder during installation. If you want to install PWS or IIS,
<a href="#install"><A HREF="link3.htm#install" title="Halaman ini Menggunakan Keterangan Link">see installing a Web Server in Windows.</a>
To develop and test dynamic web pages, you need a functioning web server. This chapter describes how most Windows users can
install and use a Microsoft web server on their local computer.
</pre>
</body>
</html>
<A HREF="link3.htm#install" title="Halaman ini Menggunakan Keterangan Link">
- Membuat Link E-mail
<html>
<head>
<title>Kirim email ke</title>
</head>
<body>
<p>
Kirim email ke :
<a href="mailto:Sitinurpurnama26@gmail.com">Sitinurpurnama26@gmail.com</a></p>
</body>
</html>
- Membuat Link Google
<html>
<head>
<title>Favorite Links</title>
</head>
<body>
<p>
Favorite Links :
<a href="http://www.google.co.id/">Google.com</a>
| <a href="http://www.yahoo.com/">Yahoo.com</a>
| otakatikweb.com</p>
</body>
</html>
- Background Warna pada Table
<html>
<head>
<title>Warna Background Tabel</title>
</head>
<body>
<table border="1" width="48%" cellpadding="2" id="table1">
<tr>
<td width="52" heigh="40" bgcolor="#C0C0C0"><b>
<font size="4" face="Verdana">NO</font></b></td>
<td height="40" bgcolor="#C0C0C0"><b>
<font size="4" face="Verdana">NAMA</font></b></td>
</tr>
<tr>
<td width="52">1</td>
<td>Ega Syifa Fauziah</td>
</tr>
<tr>
<td width="52">2</td>
<td>Muhammad Dimaz Raditya</td>
</tr>
<tr>
<td width="52">3</td>
<td>Kumaila Hakimah</td>
</tr>
</table>
</body>
</html>
- Background Gambar pada Table
<html>
<head>
<title>Warna Background Tabel</title>
</head>
<body>
<table border="1" width="48%" cellpadding="2" id="table1" height="140">
<tr>
<td bgcolor="#C0C0C0" background="star.gif">
<p align="center">Background Tabel ini Menggunakan Gambar</td>
</tr>
</table>
</body>
</html>
- Marge Cell
<html>
<head>
<title>Using Table Colspan</title>
</head>
<body>
<table bgcolor="CCCCFF" width="62%" border="1" cellpadding="0">
<tr>
<td colspan="3" align="center">Quarter 1</td>
<td colspan="3" align="center">Quarter 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
</tr>
<tr>
<td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</table>
</body>
</html>
- Tata Letak Tabel dan Kolom
<html>
<head>
<title>NO</title>
</head>
<body>
<div align="center">
<table border="1" width="500" cellspacing="0" cellpadding="0" bordercolor="#000000" id="table1">
<tr>
<td height="38" bgcolor="#808080" alig"center"><b>
<font color="#FFFFFF" face="Verdana">No</font></b></td>
<td height="38" bgcolor="#808080" align="center"><b>
<font color="#FFFFFF" face="Verdana">Nama Lengkap</font></b></td>
</tr>
<tr>
<td align="center"><font face="Arial">1</font></td>
<td><font face="Arial">Ega Syifa Fauziah</font></td>
</tr>
<tr>
<td align="center"><font face="Arial">2</font></td>
<td><font face="Arial">Muhammad Dimaz Raditya </font></td>
</table>
</tr>
<tr>
<td align="center"><font face="Arial">3</font></td>
<td><font face="Arial">Kumaila Cahya Hakimah</font></td>
</tr>
</table>
</div>
</body>
</html>
- Cellpadding dan Cellspacing
<html>
<head>
<title>Penggunaan Cellpadding dan Cellspacing</title>
</head>
<body>
<table border="1" width="55%" cellspacing="5" cellpadding="5" id="table1">
<tr>
<td width="341"><font face="Verdana" style="font-size: 11pt">
Ini Menggunakan Cellpadding dan Cellspacing</font></td>
<td> </td>
</tr>
<tr>
<td width="341"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
