Ini adalah materi dari mata kuliah "Perancangan Web HTML".
Pertemuan 1.
coding bisa dibuat di notepad atau notepad++
ketikkan coding berikut :
<html>
This is my first web page
</html>
lalu save menggunakan format html, contohnya Pert1a.html
seperti ini juga sama.
<!DOCTYPE html PUBLIC "-//W3C//dtd XHTML. 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<body>
<p> This is my first web page </p>
</body>
</html>
-----------------------------------------------------------------------------------------
jika ingin menggunakan title yang muncul di tab, contohnya seperti ini
<html>
<head>
<title>perancangan html</title>
</head>
<body>
This is my first web page
</body>
</html>
-----------------------------------------------------------------------------------------
lalu penggunaan <p> dan </p> untuk berpindah paragraf
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
<p>This is my first web page</p>
<p>how exciting</p>
</body>
</html>
-----------------------------------------------------------------------------------------
penggunaan bold dan italic
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
<p>This is my first web page</p>
<p>how exciting</p>
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>
</body>
</html>
bold menggunakan <strong> dan italic menggunakan <em>
-----------------------------------------------------------------------------------------
lalu mengatur besar huruf
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
</body>
</html>
menggunakan <h1> sampai <h6>
<h1> merupakan yang terbesar dan <h6> merupakan yang terkecil
----------------------------------------------------------------------------------------
menggunakan bullet and numbering
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
</body>
</html>
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
-----------------------------------------------------------------------------------------
memasukkan gambar ke dalam html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h6>Why this is</h6>
<p>To learn HTML</p>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com">HTML Dog</a></p>
<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" />
</body>
</html>
-------------------------------------------------------------------------------------------
contoh membuat table
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
----------------------------------------------------------------------------------------
membuat form
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>
-----------------------------------------------------------------------------------------
setelah semua langkah di lakukan, kita gabungkan semua menjadi satu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<!-- By the way, this is a comment -->
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>
<h3>Some random table</h3>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing</p>
<form action="somescript.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p>
<p><input type="reset" /></p>
</form>
</body>
</html>
=========================================================================
Pertemuan 2
<html>
<head>
<title> html pertemuan 2a </title>
</head>
<ul type = "circle">
<li> 5 PTI 1 </li>
<ul type = "square">
<li> HTML </li>
<ol>
<li> Kevin </li>
<li> Hadi </li>
<li> Rina </li>
</ol>
<li> VB </li>
<ol>
<li> Budi </li>
<li> Junior </li>
<li> Theresia </li>
</ol>
</ul>
<li> 5 PTI 2 </li>
</html>
----------------------------------------------------------------------------------
<html>
<head>
<title> html pertemuan 2b </title>
</head>
<body>
<dl>
<dt> HTML </dt>
<dd> - apa itu HTML </dd>
<dt> CSS </dt>
<dd> - apa itu CSS </dd>
<dt> XML </dt>
<dd> - apa itu XML </dd>
<dt> XHTML </dt>
<dd> - apa itu XHTML </dd>
</dl>
</body>
</html>
--------------------------------------------------------------------------------
<html>
<head>
<title> html pertemuan 2c </title>
</head>
<body>
<table border="1">
<th> abc </th>
<th> akj </th>
<tr>
<td> 1 </td>
<td> 2 </td>
<
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------------------
<html>
<head>
<title> Universitas Bunda Mulia </title>
</head>
<center>
<font Face="Calibri">
<span style="color:darkblue">
<h1> Universitas Bunda Mulia </h1>
</span>
<span style="color:purple">
<h3>
JL. Lodan Raya No.2, Ancol - Jakarta Utara <br />
Telp. (021) 692-9090 - Fax (021) 690-9712 <br />
Call Center : (021) 690 9090
</h3>
</span>
<hr size="5" color="darkblue">
</center>
<span style="color:lightblue">
<font size="5">
<p>
NIM : 32100054 <br />
Nama : Iwan Hartono <br />
Tempat/Tgl Lahir : Jakarta , 14 November 1992 <br />
ALamat : JL. Jaya Bakti RT 005/006 no. 5.
</p>
<p align="right">
<strong>
Fakultas Teknologi dan Desain <br />
Teknik Informatika <br />
2010
</strong>
</P>
</font>
</span>
</font>
</html>
========================================================================
Pertemuan 3
<html>
<head>
<title> Pert3a </title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td colspan = "3" align = "center" height = "30">
header
</td>
</tr>
<tr>
<td align = "center" width = "50"> home </td>
<td align = "center" width = "50">
<p><a href="file:///C:/Users/ASUS/Documents/semester%205/HTML/pert3/leo.html"> Leo </a></p>
</td>
<td align = "center" width = "50"> about us </td>
</tr>
<tr>
<td colspan = "3" align = "center" height = "550">
body
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
footer
</td>
</tr>
</table>
</body>
</html>
========================================================================
Pertemuan 4
<html>
<head>
<title> login </title>
</head>
<body>
<form>
<center>
<p> <strong> Login </strong> </p>
<form action="somescript.php" method="post">
<p>Username: <input type="text" name="name"/></p>
<p>Password: <input type="text" name="password" /></p>
<p> <input type="submit" /> </p>
</center>
</form>
</body>
</html>
-----------------------------------------------------
<html>
<head>
<title> home </title>
</head>
<body>
<table border = "1">
<tr>
<td width=150 align = center> <p><a href=""> nilai </a></p> </td>
</tr>
<tr>
<td align = center> <p><a href=""> profile </a></p> </td>
</tr>
<tr>
<td align = center> <p><a href=""> contact us </a></p> </td>
</tr>
<tr>
<td align = center> <p><a href=""> home </a></p> </td>
</tr>
<tr>
<td align = center> <p><a href=""> logout </a></p> </td>
</tr>
</table>
</body>
-------------------------------------------------
<html>
<head>
<title> nilai </title>
</head>
<body>
<table border=3 width="100%">
<tr>
<td colspan=2 bgcolor="lightblue" width="100%" height=100 align=center> <h1>Portal Mahasiswa UBM<h1> </td>
</tr>
<tr >
<td width="20%">
<table border = "1"
<tr>
<td width=20% height=50 align = center> <p><a href=""> nilai </a></p> </td>
</tr>
<tr>
<td height=50 align = center> <p><a href=""> profile </a></p> </td>
</tr>
<tr>
<td height=50 align = center> <p><a href=""> contact us </a></p> </td>
</tr>
<tr>
<td height=50 align = center> <p><a href=""> home </a></p> </td>
</tr>
<tr>
<td height=50 align = center> <p><a href=""> logout </a></p> </td>
</tr>
</table>
</td>
<td align=center width="70%">
<table border = "2">
<tr>
<td width=150 align = center> <strong> NIM </strong> </td>
<td width=150 align = center> <strong> NAMA </strong> </td>
<td width=150 align = center> <strong> IPS </strong> </td>
<td width=150 align = center> <strong> IPK </strong> </td>
</tr>
<tr>
<td> 11010407 </td>
<td> marta </td>
<td> 3.56 </td>
<td> 3.25 </td>
</tr>
<tr>
<td> 11010408 </td>
<td> heron </td>
<td> 3.27 </td>
<td> 3.00 </td>
</tr>
<tr>
<td> 11010409 </td>
<td> lenah </td>
<td> 2.75 </td>
<td> 3.50 </td>
</tr>
<tr>
<td> 11010410 </td>
<td> halim </td>
<td> 3.00 </td>
<td> 3.00 </td>
</tr>
<tr>
<td> 11010411 </td>
<td> niko </td>
<td> 4.00 </td>
<td> 4.00 </td>
</tr>
<tr>
<td> 11010412 </td>
<td> yanti </td>
<td> 3.85 </td>
<td> 3.60 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=80> </td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment