Scribd
Upload
9 views

Chap 02 - Intro To HTML

The document provides an overview of HTML including HTML tags, elements, attributes, comments, and date/time formats. It describes the basic structure of an HTML page including the head and body sections.

Uploaded by

2022616874
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Chap 02 - Intro To HTML

The document provides an overview of HTML including HTML tags, elements, attributes, comments, and date/time formats. It describes the basic structure of an HTML page including the head and body sections.

Uploaded by

2022616874
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

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:
 &lt; represents the sign <
 &gt; represents the sign >
 &copy; represents the copyright symbol ©

You might also like