CHAPTER 2:
Introduction to HTML
Prepared for:
CSC264 – Introduction to Web and Mobile Application
OVERVIEW OF THIS CHAPTER
In this chapter, you will learn about:
The overview of HTML
HTML page and Version Information
HTML Structures
Elements, Attributes,Character References and Comments
Lengths, Dates and Time
INTRODUCTION TO HTML
HTML (Hyper Text Markup Language):
Is a markup language used to write web pages (web documents)
Uses markup tags (a.k.a HTML tags)
HTML document is written using a Text Editor
Text Editor: Notepad++, Sublime Text, Dreamweaver
Extension: .html or .htm
INTRODUCTION TO HTML
HTML (Hyper Text Markup Language):
HTML document is a plain text file that consists of HTML tags which can
be displayed by the web browsers
A HTML document may also include:
• Cascading style sheets (CSS):
Used for adding style to optimize the layout or look of web pages
• Javascript:
Used for on-page actions (will make web pages look dynamic)
• PHP:
Allows you to retrieve and display information from server
INTRODUCTION TO HTML
What you need to build a HTML Page:
1. Text Editor:
To write your HTML
2. Web Browser:
To test your HTML tags
HTML VERSIONS
HTML Versions:
Since the early days of the web, there have been many versions of HTML:
To display a document correctly, the browser Version Year
must know the version of HTML used
HTML 1991
To do this, you need to declare the HTML 2.0 1995
HTML document HTML 3.2 1997
Syntax used: HTML 4.01 1999
< !DOCTYPE > XHTML 2000
HTML5 2014
HTML5:
HTML 4.01:
XHTML:
HTML TAGS
HTML Tags:
Are keywords (tag names) surrounded by angle brackets < >
The tag names tell the browser how to display the content
<tagname> content </tagname>
HTML tags normally come in pairs, where:
The 1st tag (Start Tag):
Is the start tag/opening tags
The 2nd tag (End Tag): For example:
Is the end tag/closing tags
To display a paragraph of text
HTML tags are NOT case sensitive
<body> = <BODY> = <Body> To display a heading
HTML ELEMENTS
HTML Elements:
HTML documents are described by HTML elements
A HTML element is everything from the
start tag to the end tag
Some example of HTML elements:
HTML Elements Purpose
<html> ... </html> Describes a HTML document
<head> ... </head> Provides information about the document
<title> ... </title> Provides a title for the document
<body> ...</body> Describes the page content
<h1> ... </h1> Describes a heading
<p> ... </p> Describes a paragraph
HTML ELEMENTS
HTML Elements: For example:
The body element of a web page is
Most HTML elements consists of 3 parts:
declared as follows:
1. Start tag
2. Content
3. End tag
Some HTML elements have empty content
For example: For example:
<br> <br> element is used for a line break
<hr>
<img>
Some HTML elements can have attributes
(will be explained later)
HTML PAGE STRUCTURE
HTML Page Structure:
All normal web pages consist of:
1. Head:
Is used for text and tags that do not show directly on the web page
2. Body:
Is used for text and tags that are shown directly on the web page
HTML PAGE STRUCTURE: HEAD
The Document Head:
The HTML element for a document head is:
<head> content </head>
Inside it, you can put any information regarding your web page such as:
1. Title of your web page:
It is shown at the top of your browser window when the page is loaded
HTML PAGE STRUCTURE: HEAD
The Document Head:
Inside it, you can put any information regarding your web page such as:
2. Any keywords that is used for searching called “metatags”:
Which is used to improve the rankings in search engines
For example:
3. Other information that is relevant to your page such as the use of:
CSS, PHP,or Javascript
HTML PAGE STRUCTURE: BODY
The Document Body:
The HTML element for a document body is:
<body> content </body>
It contains all that can be seen when the user loads the page:
HTML STRUCTURE: BODY
Heading Tags:
There are 6 levels of heading in HTML:
Higher Level <h1> , <h2> , <h3> , <h4> , <h5> , <h6> Lower Level
The syntax for a heading:
<h1> content </h1>
Is used to describe the topic of the section that it introduces
Will cause the font size to be larger:
The higher the level of heading,
the bigger the font size
HTML STRUCTURE: BODY
Paragraph Tag:
The syntax for paragraph tag:
<p> content </p>
Will create a space between any text or images preceding the enclosed text
Creates a
space
HTML STRUCTURE: BODY
Line Break Tag:
The syntax for line break tag (NO end tag):
<br> content
Will forcibly breaks/ends the current line of text
Will end the
current line
AND
bring the text
after it onto
the next line
HTML STRUCTURE: BODY
Horizontal Tag:
The syntax for horizontal tag (NO end tag):
<hr> content
Will create a line across the page Can also include
Usually used to separate sections of a document attributes
HTML PAGE STRUCTURE: EXAMPLE
<html> Your page title
<head>
is displayed
<title>This is a Page Title</title> here
</head>
<body>
Only the <body> area is
<h1>This is a heading</h1> displayed by the browser:
<p>This is a paragraph</p>
Here is where you place
all of the tags, words, and
<p>This is another paragraph</p> graphics that comprise
</body> your page
</html>
HTML ATTRIBUTES
HTML Attributes:
Some HTML elements can have attributes
It provide additional information about an element
Are always specified in the start tag
Has the following syntax:
attributename = “value”
start tag
<body background = “bgimg.jpg”> content </body>
Attribute value
name
EXAMPLE
Assign a title for a paragraph:
When you move the mouse over the element.
The title will be displayed
HTML ATTRIBUTES
Style Attribute (CSS):
All HTML element has a default style:
Background colour: White
Text colour: Black
Text-size: 12px
Style attribute:
Can be used to change the default style of an HTML element
Has the following syntax:
style = “property:value;”
<body style = "background-color:grey;”> content </body>
CSS property value semicolon
HTML ATTRIBUTES
Style Attribute (CSS):
The following style attributes can be used to change the appearance of the
HTML elements:
Property Purpose
background-color Used for background colour
color Used for text colour
font-family Used for text fonts
font-size Used for text sizes
text-align Used for text alignment
HTML ATTRIBUTES
Style Attribute (CSS):
Can also use
color code
(e.g. #808080 – grey)
Can also be
left or right
HTML ATTRIBUTES
Style Attribute (CSS):
HTML COMMENTS
HTML Comments:
Are text that will be ignored and not displayed by the browser
A comment has the following syntax:
<!-- comment -->
For example:
HTML DATE AND TIME
HTML Date and Time:
Uses the <time> element in HTML:
Represents a machine-readable date, time, or duration
Useful for creating event scheduling, archiving,and other time-based
functions
HTML DATE AND TIME
HTML Date and Time:
For example:
<time> element
datetime attribute
HTML DATE AND TIME
HTML Date and Time:
The time element and datetime attribute have the following syntax:
<time datetime = "YYYY-MM-DD hh:mm:ss TZD”>
HTML DATE AND TIME
HTML Date and Time:
The datetime attribute can be used for the following formats:
HTML LENGTHS
HTML Lengths:
To specify length values for attributes, you can use:
1. Pixels:
Represents the number of pixels
Used especially for setting up images and tables
HTML LENGTHS
HTML Lengths:
To specify length values for attributes, you can use:
2. Percentage:
Represents the percentage of the total length of the available space
HTML CHARACTER REFERENCES
HTML Character References:
Are numeric representations of characters that may be used in a
HTML document
Are useful for referring to rarely used characters or special characters
A character reference:
Begins with a symbol ampersand & and end with a semi-colon ;
For example:
< represents the sign <
> represents the sign >
© represents the copyright symbol ©
