Scribd
Upload
16 views

Chap 01b - Intro To HTML

HTML attributes provide additional information about elements and can be used to modify aspects like styles; attributes are always specified in the start tag of an element using the format attributename="value"; common attributes include title for tooltips, style for modifying colors, fonts and more via CSS, and background for images.

Uploaded by

Ain Najihah
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Chap 01b - Intro To HTML

HTML attributes provide additional information about elements and can be used to modify aspects like styles; attributes are always specified in the start tag of an element using the format attributename="value"; common attributes include title for tooltips, style for modifying colors, fonts and more via CSS, and background for images.

Uploaded by

Ain Najihah
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

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


 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

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 ©
EXAM QUESTION EXAMPLES
Exam: CSC318,
January 2018

33
EXAM QUESTION EXAMPLES
Exam: CSC318, June
2018

34
EXAM QUESTION EXAMPLES

Exam: CSC318,
December 2018

35

You might also like