Lecture 02
HTML
WHAT IS HTML?
HTML is a markup language for describing web
documents (web pages).
Chapter 0 Introduction
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
Describes the content and structure of information on
a web page
Surrounds text content with opening and closing tags
Each tag's name is called an element
Most whitespace is insignificant in HTML
2
HTML TAGS
HTML tags are keywords (tag names) surrounded
by angle brackets.
Chapter 0 Introduction
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, but with a
slash before the tag name
3
EXAMPLE
<!DOCTYPE html>
<html>
Chapter 0 Introduction
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 4
HTML TAGS
DOCTYPE:
defines the document type to be HTML
Chapter 0 Introduction
The text between <html> and </html>:
describes an HTML document
The text between <head> and </head>:
provides information about the document
The text between <title> and </title>:
provides a title for the document
displayed in the web browser's title bar
5
HTML TAGS
The text between <body> and </body>:
describes the visible page content
Chapter 0 Introduction
The text between <h1> and </h1>:
describes a heading
The text between <p> and </p>:
describes a paragraph
placed within the body of the page
6
Chapter 0 Introduction
7
HTML PAGE STRUCTURE
ATTRIBUTES
Tags can also have attributes, which are extra bits
of information.
Chapter 0 Introduction
Attributes appear inside the opening tag and their
values sit inside quotation marks.
They look something like
<tag attribute="value">Margarine</tag>
8
PAGE TITLE: <TITLE>
Describes the title of the web page
Placed within the head of the page
Chapter 0 Introduction
Displayed in the web browser's title bar and when
bookmarking the page
<head>
<title>My first web page</title>
</head>
The head element (starts with <head> and ends with
</head>) appears before the body element (starting
with <body> and ending with </body>) and contains
9
information about the page.
PARAGRAPH: <P>
Paragraphs of text
placed within the body of the page
Chapter 0 Introduction
<body>
<p>My first web page</p>
<p>Very Cool</p>
</body>
Web browsers don’t usually take any notice of what line
your code is on. It also doesn’t take any notice of
spaces
10
HEADINGS: <H1>, <H2>, ..., <H6>
Headings to separate major areas of the page
placed within the body of the page
Chapter 0 Introduction
<h1>Kadoorie University</h1>
<h2>Computer science</h2>
<h3>Web Development</h3>
Web browsers don’t usually take any notice of what line
your code is on. It also doesn’t take any notice of
spaces
11
LINKS: <A>
Links, or "anchors", to other pages (inline)
uses the href attribute to specify the destination URL
Chapter 0 Introduction
<a href = “[Link] Kadoorie </a>
12
IMAGES: <IMG>
Inserts a graphical image into the page (inline)
The src attribute tells browser where to find the
Chapter 0 Introduction
image
Also requires an alt attribute describing the image
If placed inside an a anchor, the image will become a
link
The title attribute specifies an optional tooltip
<img src=“C:\Users\Public\Pictures\Sample Pictures\
[Link]” width=“120” height=“90” alt=“Image”
title=“My University”/>
13
NESTING TAGS
Tags must be correctly nested
A closing tag must match the most recently opened
Chapter 0 Introduction
tag
The browser may render it correctly anyway, but it is
invalid.
14
HORIZONTAL RULE: <HR>
A horizontal line to visually separate sections of a
page
Chapter 0 Introduction
Should be immediately closed with />
<p>Kadoorie University</p>
<hr/>
<p>Computer Engineering</p>
15
LINE BREAK: <BR>
Forces a line break in the middle of a block element.
br should be immediately closed with />
Chapter 0 Introduction
<p>Kadoorie university is nice, <br/> and the
Computer Engineering is cool</p>
16
UNORDERED LIST: <UL>, <LI>
ul represents a bulleted list of items
li represents a single item within the list
Chapter 0 Introduction
<ul>
<li> Computer Eng </li>
<li> Mechanical Eng </li>
<li> Telecom. Eng </li>
</ul>
17
UNORDERED LIST: <UL>, <LI>
<ul>
<li> Computer Eng:
Chapter 0 Introduction
<ul>
<li> Web Development</li>
<li> Software Engineering</li>
</ul>
</li>
<li> Mechanical Eng:
<ul>
<li> Special Topics I</li>
<li> Special Topics II</li>
</ul>
</li>
<li> Telecom. Eng:
</li> 18
</ul>
ORDERED LIST: <OL>
ol represents a numbered list of items
Chapter 0 Introduction
<ol>
<li> Computer Eng </li>
<li> Mechanical Eng </li>
<li> Telecom. Eng </li>
</ol>
19
