Assalamualaikum..
Every tuesday we are having a computer in science class at Orchid Lab.And today we are going to share about what we learn on that class.The title is HTML.
HTML
Do you know what is HTML?Where is HTML look like?And what it benefit us as a user?Where we can learn more about HTML?
So let we share with you..
But before that.......
Smile like this.....hahahaha
Okay,lets talk about HTML...
What is html?
HTML is a markup language for describing web documents (web pages).
- HTML stands for Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML tags
- Each HTML tag describes different document content
What is HTML look like?
By the way,we forgot to tell you that HTML creates by using notepad application.Here we attached some example of the code and outcome.
The code..
The outcome..
What it benefits us as a user?
- We can make a list
- We can attach an image and a moving image
- We can make a table whether it fit or not fit to the word
- We can paste the URL and user can click the URL to go to the related page
LIST
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building nested HTML lists</title>
</head>
<body>
<h1>Example on building nested HTML lists</h1>
<ul>
<li>List Item 1</li>
<li>List Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
</ul>
</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
</body>
</html>
IMAGE AND MOVING IMAGE
<html>
<body>
<p>
An image:
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="http://i789.photobucket.com/albums/yy180/countfifty/hackanm.gif" alt="Computer man"width="48" height="48" />
</p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image
</p>
</body>
</html>
An image: 
A moving image:
Note that the syntax of inserting a moving image is no different from a non-moving image
TABLE
<html>
<body>
<h4>KULIYYAH OF SCIENCE<h/4>
<table border="1">
<tr>
<td>No</td>
<td>Department</td>
<td>HOD</td>
<td>Image</td>
<td>Url</td>
</tr>
<tr>
<td>1</td>
<td>MARINE</td>
<td>DR. NORMAWATY</td>
<td><img src="http://wwwsst.ums.edu.my/data/image/marine%20science/Norma.jpg" alt="DR. NORMAWATY" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/marine-science/about-marine-science">MARINE</a></td>
</tr>
<tr>
<td>2</td>
<td>PHYSICS</td>
<td>JESNI BIN SHAMSUL SHAARI</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/3844.jpg" alt="JESNI BIN SHAMSUL SHAARI" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-1">PHYSICS</a></td></td>
</tr>
<tr>
<td>3</td>
<td>CHEMISTRY</td>
<td>WAN KHARTINI BINTI WAN ABDUL KHODIR</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/6822.jpg" alt="WAN KHARTINI BINTI WAN ABDUL KHODIR" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-0">CHEMISTRY</a></td>
</tr>
<tr>
<td>4</td>
<td>CTS</td>
<td>DR PAH CHIN HEE</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/5826.jpg" alt="CTS" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/about-cts">CTS</a></td>
</tr>
<tr>
<td>5</td>
<td>BIOTECH</td>
<td>TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/4261.jpg" alt="TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/about-biotechnology">BIOTECH</a></td>
</tr>
<tr>
<td>6</td>
<td>PLANTSCIENCE</td>
<td>MOHD SHUKOR BIN NORDIN</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/6887.jpg" alt="MOHD SHUKOR BIN NORDIN" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-2">PLANT SCIENCE</a></td>
</tr>
</table>
</body>
</html>
A moving image:
Note that the syntax of inserting a moving image is no different from a non-moving image
TABLE
<html>
<body>
<h4>KULIYYAH OF SCIENCE<h/4>
<table border="1">
<tr>
<td>No</td>
<td>Department</td>
<td>HOD</td>
<td>Image</td>
<td>Url</td>
</tr>
<tr>
<td>1</td>
<td>MARINE</td>
<td>DR. NORMAWATY</td>
<td><img src="http://wwwsst.ums.edu.my/data/image/marine%20science/Norma.jpg" alt="DR. NORMAWATY" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/marine-science/about-marine-science">MARINE</a></td>
</tr>
<tr>
<td>2</td>
<td>PHYSICS</td>
<td>JESNI BIN SHAMSUL SHAARI</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/3844.jpg" alt="JESNI BIN SHAMSUL SHAARI" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-1">PHYSICS</a></td></td>
</tr>
<tr>
<td>3</td>
<td>CHEMISTRY</td>
<td>WAN KHARTINI BINTI WAN ABDUL KHODIR</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/6822.jpg" alt="WAN KHARTINI BINTI WAN ABDUL KHODIR" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-0">CHEMISTRY</a></td>
</tr>
<tr>
<td>4</td>
<td>CTS</td>
<td>DR PAH CHIN HEE</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/5826.jpg" alt="CTS" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/about-cts">CTS</a></td>
</tr>
<tr>
<td>5</td>
<td>BIOTECH</td>
<td>TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/4261.jpg" alt="TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments/about-biotechnology">BIOTECH</a></td>
</tr>
<tr>
<td>6</td>
<td>PLANTSCIENCE</td>
<td>MOHD SHUKOR BIN NORDIN</td>
<td><img src="http://www.iium.edu.my/sites/default/files/staff_img/6887.jpg" alt="MOHD SHUKOR BIN NORDIN" width="32" height="32" /></td>
<td><a href="http://www.iium.edu.my/science/departments-2">PLANT SCIENCE</a></td>
</tr>
</table>
</body>
</html>
KULIYYAH OF SCIENCE
No Department HOD Image Url 1 MARINE DR. NORMAWATY 
MARINE 2 PHYSICS JESNI BIN SHAMSUL SHAARI 
PHYSICS 3 CHEMISTRY WAN KHARTINI BINTI WAN ABDUL KHODIR 
CHEMISTRY 4 CTS DR PAH CHIN HEE 
CTS 5 BIOTECH TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID 
BIOTECH 6 PLANTSCIENCE MOHD SHUKOR BIN NORDIN 
PLANT SCIENCE
| No | Department | HOD | Image | Url |
| 1 | MARINE | DR. NORMAWATY | | MARINE |
| 2 | PHYSICS | JESNI BIN SHAMSUL SHAARI | | PHYSICS |
| 3 | CHEMISTRY | WAN KHARTINI BINTI WAN ABDUL KHODIR | | CHEMISTRY |
| 4 | CTS | DR PAH CHIN HEE | | CTS |
| 5 | BIOTECH | TENGKU HAZIYAMIN BIN TENGKU ABDUL HAMID | | BIOTECH |
| 6 | PLANTSCIENCE | MOHD SHUKOR BIN NORDIN | | PLANT SCIENCE |
What is the structure of HTML?
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
</html>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
Where we can learn more about HTML?
Just click this URL
Okay,that is all about HTML..We hope you all get better understanding about it..
So,time to we take a nap...zzzzzzzz
ehhhh....byeeee bloggerzzz....
No comments:
Post a Comment