Jumaat, 23 September 2016

Lab 2: Develope Basic Website Using HTML


Last Tuesday, we are learning how to develop a website using HTML, Hypertext Markup Language. Alrite let's begin.

First, you have to know that HTML is written in plain text. That means you can use any simple text editor to create a HTML document. Even if you're using a program to create websites, such as Dreamweaver, a basic knowledge of HTML can help you design and modify your website better. In the lab we use Notepad++ or any notepad you can use in your desktop or laptop. I'm using notepad++ is much easier because this one is closer like IDE and you can know what is wrong with your code and so on. (of course u have to save it in .html extension first).

HTML is divided by 2 part: head and body.

<html>
<head>
THE HEAD
<title></title>

</head>

<body>
THE BODY
</body>
</html>
 
basically the head is where title show on browser tab.
and the body is where what we want to show on the document or our page site.
this one i just did for fun. P/S BLIZ is one of my fav band

okay i really don't want to make a long explanation so let's this simple step:

1) create a new folder.
2) open notepad++.
3) made a template like shown above.
4) come out with idea of your website.

hahahaha simple right??

<html>
<head>
<title>Silat Cekak Homepage Mock</title>
<head>

<body bgcolor="#ffcc99">
<table border="0" width="100%">
<tr>
<td>
<center><img src="source/banner.png"></center>
</td>
</tr>
</table>

<table border="0" width="100%">
<tr bgcolor="#336600">
<td></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="index.html">Home</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="pengenalan.html">PENGENALAN</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="misi.html">MISI & VISI</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="index.html">BUKU TAMU</a></b></font></td>
</tr>
</table>

<table border="0" width="100%">
<tr>
<td>
<marquee behavior="alternate" witdh="60%"><center><font face="monotype corsiva" color="blue"><h2>WELCOME TO SILAT CEKAK WEBSITE
</h2></font></center></marquee>

<p><center>
<a href="http://www.silatcekak.org.my" target="_blank"><img src="source/silatcekak.jpg" alt="imej silat cekak" border="3"></a></center>

<p><center>
<a href="mailto:silatcekak@gmail.com"><img src="source/email.png" height="50" width="50"></a></center>
</td>
</tr>
</table>

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr bgcolor="#336600">
<td></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="index.html">Home</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="pengenalan.html">PENGENALAN</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="misi.html">MISI & VISI</a></b></font></td>
<td align="right" width="15%"><font face="arial" color="white"><b><a href="index.html">BUKU TAMU</a></b></font></td>
</tr>
</table>

</body>

</html>




 this is example of code i use in lab. easy right?? 
html is considered lil bit easy compared to css. hehe.

See ya


Tiada ulasan:

Catat Ulasan