Hyper Text Markup Language
✓ What is HTML?
1. Abbreviation for Hyper Text Markup Language
2. Not a programming language but a mark up language.
3. Mark up language is a set of mark up tags.
4. HTML uses mark up tags to describe web pages.
5. It can link or create forms , tables, image, frame
6. It also emphasis text in a plain English structure
7. Can be edited using Notepad in Windows, Bbedit in Macintosh
8. The files end with .html
✓ Mark up Tags
1. HTML tags are keywords surrounded by brackets like <html>
2. HTML tags normally come in pairs like <b> and </b>
3. The first tag in a pair is the start tag, the second tag is the end tag
4. Start and end tags are also called opening tags and closing tags
✓ The Good of Learning HTML
1. Can link documents to each other,
2. Can link documents to other types of files such as movies, sound clips , mail , pictures and a lot
more through the use of hyperlinks
✓ How to Begin?
1. You write the HTML document on the Word Processor, Notepad, Wordpad and save as ascii
text format with an extention .html.
2. Then you open the document in a browser (Chrome, Internet Explorer). The browser will
interpret the HTML commands and display it as a Web Page.
✓ File Naming Convention
1. Is where your file will be saved as .html.
2. The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page:
✓ HTML BASIC TAGS
• HTML TAG
a. The document must begin with <html> tag and end with a </html> tag. Example:
i. <HTML>
…..
ii. </HTML>
Hyper Text Markup Language
• Head Tag
a. The head tag means that you are going to display information or description about your
web page
b. Located on the top part of document.
c. It contains title and other related information.
d. The information is placed between the tag <HEAD> and </HEAD>
• Title Tags
a. Title tag display the information at your title bar/tab. (At the browser window). Example:
<HTML>
<HEAD>
<title>Module 3 : HTML </title>
</HEAD>
</HTML>
• Body Tags
a. The body tag is the actual structure of the HTML document
b. The information that you want will be typed here.
Example
• HTML TAGS
o Line break or a space
1. Enclose <BR> will make a line break. The text will start from the left margin of the
next line. You do need a closed tag.
2. Enclose <P> mean it will make a single space jump begin and end of a paragraph.
3. Enclose   will make a single space. (spacebar)
Hyper Text Markup Language
o Formatting Text and Paragraph
1. Font – manipulates the appearance of the text
▪ Face : to specify the font type /style
▪ Color : to specify the color of the text. The color can be represented as the name of the
color or by using hexadecimal color code.
▪ Size : To specify the font size.
Example/Format
Output
2. Alignment – to change the alignment of the text to center, left, right or justify.
▪ Alignment for text and picture can be change to “center, left, justify or right”
▪ Format <p align =“right”> …..</p> , <center></center>
3. Other formatting for texts:
▪ <B></B> - to bold the text
▪ <U></U> - to underline the text
▪ <i></i> - to change the text into italic.
Example/Format
Hyper Text Markup Language
Output
4. Horizontal line – to create a horizontal line across the page.
▪ Format <hr>
▪ You can specify the color, color=”Yellow”, size – the thickness of the line.
Example/Format
<hr color=”yellow” size=”5”>
5. Headings – to create headings. It will have the same type of font type and colour. We
can only change the font size according to the type of headings.
▪ <H1> …</H1> - the biggest font size for the heading.
▪ <H6> … </H6> - the smallest font size for the heading.
Example/Format Output
6. Background – to specify the background of the body. We can insert colour or an image
as the background of the body/content.
▪ <bgcolor> - to insert colour as the background.
▪ <background> - to insert an image as the background. The image file must be saved
in the same folder as the source code/html file.
Example/Format Output
Insert colour as the background
Hyper Text Markup Language
Insert an image as the background
** The filename and file extension must be correct