Chap 01b - Intro To HTML

CHAPTER 1:
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 File type

.zip (compact)
.png (picture)
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:
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 HTML 2.0 1995
declare the HTML
document HTML 3.2 1997
HTML 4.01 1999
Syntax used:
< !DOCTYPE > XHTML 2000
HTML5 2014
HTML5:
HTML
4.01:
XHT
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
 HTML tags are NOT case of text
sensitive
To display a
<body> = <BODY> = <Body> 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:
 Most HTML elements consists of 3 The body element of a web
parts: page is 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
Br- Break line
elements can
Hl – horizontal line
have attributes
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
content
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 <h1> , <h2> , <h3> , <h4> , <h5> , Lower

Level <h6> 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
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
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
Horizontal Tag:
 The syntax for horizontal tag (NO end
tag):
<hr> content
 Will create a line across the page Can also

 Usually used to separate sections of a include
attributes
document
HTML PAGE STRUCTURE: EXAMPLE
<html> Your page

<head>
title is
<title>This is a Page Title</title> displayed
</head> here
<body>
Only the <body> area
<h1>This is a heading</h1> is displayed by the
<p>This is a paragraph</p>
browser: Here is where
you place all of the
<p>This is another paragraph</p> tags,words,and graphics
that comprise your page
</body>
</html>
HTML ATTRIBUTES
HTML Attributes:
 Some HTML elements can have attributes
 It provides 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>
Attribut value
e
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

 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
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:

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 ©
EXAM QUESTION EXAMPLES
Exam: CSC318,
January 2018
33
Exam: CSC318, June
2018
34
Exam: CSC318,
December 2018
35

Chap 01b - Intro To HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chap 01b - Intro To HTML

Uploaded by

Copyright:

Available Formats

CHAPTER 1:

In this chapter, you will learn about:

HTML (Hyper Text Markup Language):

 HTML document is written using a Text Editor

Text Editor: Notepad++, Sublime Text,

Extension: .html or .htm File type

HTML (Hyper Text Markup Language):

 HTML document is a plain text file that consists of HTML tags

What you need to build a HTML Page:

<tagname> content </tagname>

 HTML tags normally come in

 Some example of HTML elements:

HTML Elements Purpose

 Some HTML elements have empty

The Document Head:

2. Any keywords that is used for searching called “metatags”:

3. Other information that is relevant to your page such as

<body> content </body>

Higher <h1> , <h2> , <h3> , <h4> , <h5> , Lower

 Is used to describe the topic of the section that it introduces

 Will forcibly breaks/ends the current line of

 Will create a line across the page Can also

<html> Your page

<body background = “bgimg.jpg”> content </body>

Assign a title for a

When you move the mouse over

Style Attribute (CSS):

<body style = "background-color:grey;”> content </body>

CSS property value semicolon

Style Attribute (CSS):

Style Attribute (CSS):

Can also use

HTML Character References:

You might also like