Scribd
Upload
12 views

Tutorial HTML Coding (NHT)

The document provides instructions on how to create a basic HTML website including defining HTML, identifying tags, coding HTML, and creating a group website. It covers topics like inserting text with different fonts, sizes, and colors, adding images, tables, hyperlinks, and color codes. The document aims to teach students HTML skills through examples and exercises.

Uploaded by

kinaco8907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Tutorial HTML Coding (NHT)

The document provides instructions on how to create a basic HTML website including defining HTML, identifying tags, coding HTML, and creating a group website. It covers topics like inserting text with different fonts, sizes, and colors, adding images, tables, hyperlinks, and color codes. The document aims to teach students HTML skills through examples and exercises.

Uploaded by

kinaco8907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Skill Enhancement for Student

Prepared By
NORULHUDA TAJUDDIN
UNIVERSITI TEKNOLOGI MARA CAWANGAN PAHANG

Alhudatajuddin © 2011
Learning Objective
1 • Definition of HTML.

2 • Identification of HTML tags.

3 • Coding the HTML.

4 • Create a group website

Alhudatajuddin © 2011
What is HTML?
 HTML, which stands for HyperText Markup Language,
is the predominant markup language for web pages. HTML
is the basic building-blocks of WebPages.
 HTML is written in the form of HTML elements consisting
of tags, enclosed in angle brackets (like <html>), within
the web page content.
 HTML tags normally come in pairs like <h1> and </h1>.
The first tag in a pair is the start tag, the second tag is the
end tag (they are also called opening tags and closing tags).
In between these tags web designers can add text, tables,
images, etc.
Source: en.wikipedia

Alhudatajuddin © 2011
Basic HTML Document Code
Structure
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
This area will contain everything that will be visible through a
web browser, such as text and graphics. All of the information
will be HTML coded.
For a complete list of HTML codes, tags and examples, see the
HTML chart below.
</body>
</html>

Alhudatajuddin © 2011
Description for basic HTML code
<html> - Begins your HTML document.
<head> - Contains information about the page such as the TITLE, META tags
for proper Search Engine indexing, STYLE tags, which determine the page
layout, and JavaScript coding for special effects.
<title> - The TITLE of your page. This will be visible in the title bar of the
viewers’ browser.
</title> - Closes the HTML <title> tag.
</head> - Closes the HTML <head> tag.
<body> - This is where you will begin writing your document and placing your
HTML codes.
</body> - Closes the HTML <body> tag.
</html> - Closes the <html> tag.

Alhudatajuddin © 2011
1. How to start?
1. Create a new Folder – keep all related file in the same
folder
2. Write your HTML code at NOTEPAD.
3. Save as your document --> .html (extension)

Alhudatajuddin © 2011
Coding your HTML
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<dd>your word here</dd>
<p>

</body>
</html>

Alhudatajuddin © 2011
2. Now you may view your page..
 Go to Internet explorer
 File > open > browse your FILE and click open!

Alhudatajuddin © 2011
<title>
<dd>

Alhudatajuddin © 2011
3. All about FONT & TEXT
Name Tag example
Font type <font face="Times New Roman">Example</font>

Font size <font face="Times New Roman” size="4">Example</font>

Font color <font face="Times New Roman" size="+3"


color="#ff0000">Example</font>
Underline <u>Example</u>
Strong / bold <strong>Example</strong>
Italic <i>Example</i>

COLOR Codes
Theory
Alhudatajuddin © 2011
4. Insert Animation Image
1. Save as your image use .gif extension  file.gif
2. Coding
<img src=“file.gif" width=“100" height=“100" border="0" alt="text
describing the image" />

Tips
 Change your size of image @ height and width.

Alhudatajuddin © 2011
Alhudatajuddin © 2011
5. Insert Table
 Coding for table
<table cellpadding="4" cellspacing="2" width="50%">
<tr>
<td bgcolor="#c0c0c0">Name</td>
<td bgcolor="#c0c0c0"><center>Phone No.</center></td>
</tr>
<tr>
<td>Mohd Ikmal Shah Abdullah</td>
<td><center>6019-5672 323</center></td>
</tr>
</table>

Alhudatajuddin © 2011
Alhudatajuddin © 2011
Basic coding

6. Insert HyperLink
 Coding Font style added

<a href="http://www.domain.com/">Visit Our Site</a>


<a href="http://education4love.blogspot.com//"><font face="Times New
Roman" size="4"color="#ff00ff">Visit Our Site</a>

Alhudatajuddin © 2011
7. Link to a location on the same
page
 Coding
<h2><a name="top1">Introduction To MGT300</h2>
<h3>Chapter 1</h3>
<h3>Chapter 2</h3>
<h3>Chapter 3</h3>
<h3>Chapter 4</h3>
<h3>Chapter 5</h3>

<p>
<a href="#top1">Go to top</a>
</p>

Alhudatajuddin © 2011
Alhudatajuddin © 2011
Alhudatajuddin © 2011
Example of Colour Codes

Alhudatajuddin © 2011
Alhudatajuddin © 2011
PREPARE YOUR OWN WEBSITE
1. Pay attention to TITLE and HEADER of the website
2. Introduction to your self.
1. Use variety: font size, font style, underlined, font color,
italic and bold.
3. At least 1 still image and 1 animated image.
4. At least 1 hyperlink to your own website.
5. Table 3x3

Alhudatajuddin © 2011
References
 http://www.web-source.net/html_codes_chart.htm
 http://en.wikipedia.org/wiki/HTML
 http://html-color-codes.info/
 http://www.computerhope.com/htmcolor.htm
 http://www.w3schools.com/default.asp

Learn More
about HTML
coding, visit
this website!

Alhudatajuddin © 2011
Thank You
“Give a man a
fish; you have
fed him for
today.
Teach a man to
fish; and you
have fed him
for a lifetime.
Teach a man to
sell fish and he
eats steak.”
Author unknown

Alhudatajuddin © 2011

You might also like