Bài giảng Lập trình Web - Chapter 1: Introduction to HTML

Chapter 1

Introduction to HTML

Lectured by:

Nguyễn Hữu Hiếu

What is an HTML File?

n HTML stands for HyperText Markup Language

n An HTML file is a text file containing small markup

tags

n The markup tags tell the Web browser how to

display the page

n An HTML file must have an htm or html file

extension

n An HTML file can be created using a simple text

editor

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

2

Markup languages

n Suppose we have a document containing only plain

text

n We tag certain parts of the document to indicate

what they are and how they should be formatted

n This procedure is called marking-up the document

n

Tags are usually paired:

n

e.g. <title>My Memory</title>

A pair of tags plus their content constitute an element

n

Un-paired tags are called empty tags

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

3

Markup languages

n HTML is the HyperText Markup Language

n HTML is based on SGML (Standard Generalised

Markup Language) which is more complex

n HTML has a fixed set of tags but is constantly

evolving, but newer versions are downward

compatible

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

4

A basic document

n <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

n There are three required elements, defined by the tags

n Every document should start with the following lines:

<html>

<head>

</head>

<body>

<h1>Welcome</h1>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

5

Elements

n HTML elements are written with a start tag, with an end

tag, with the content in between:

<tagname>content</tagname>

n The HTML element is everything from the start tag to the

end tag:

<p>My first HTML paragraph.</p>

n Some HTML elements do not have an end tag.

Start tag

<h1>

Element content

My First Heading

My first paragraph.

End tag

</h1>

</p>

<p>

<br>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

6

Attributes

n HTML elements can have attributes

n Attributes provide additional information about an

element

n Attributes are always specified in the start tag

n Attributes come in name/value pairs like: name="value"

n A complete list, of all legal attributes for each HTML

element, is listed at:

https://www.w3schools.com/tags/default.asp

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

7

Attributes

Attribute

Description

alt

Specifies an alternative text for an image

Specifies that an input element should be disabled

Specifies the URL (web address) for a link

Specifies a unique id for an element

Specifies the URL (web address) for an image

Specifies an inline CSS style for an element

disabled

href

id

src

style

Specifies extra information about an element

(displayed as a tool tip)

title

Specifies the value (text content) for an input

element.

value

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

8

Block elements

n Block elements define sections of text, usually

preceded by a blank line

n <p></p> - paragraph

n <h1></h1>...<h6></h6> - headings

n <pre></pre> - preserve (original format)

n

Not supported in HTML5

n <blockquote></blockquote> - indented text

n <div></div> - division

n

used to identify a section of the document that may be

subject to special formatting (for example, using

stylesheets).

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

9

Paragraphs

n Paragraphs: <p>...</p>

n

Force a break between the enclosed text and the text surrounding

n

The tagged region of text may be subject to special formatting

n <p align="center">Here is another paragraph</p>

n

align is an attribute of the paragraph tag – center is the value of

the align attribute

<p>here is a piece of text that

has been placed inside a

paragraph</p>

<p align="center">Here is

another paragraph</p>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

10

Headings

n Six levels of importance <h1>...<h6>

n Use headings to divide document into sections

<html>

<head>

<title>Headings</title>

</head>

<body>

<h2>Chapter 1</h2>

<h3>1. Introduction</h3>

This is the introduction

<h3>2. Next section</h3>

This is the next section

<h4>2.1 A subsection</h4>

This is a subsection

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

11

Element relationships

n The elements marked by tags form a hierarchy

n The root element is html (marked by <html>...</html>)

n It usually has two children: head and body

n

each of these are further subdivided

n There are rules for which elements can contain other

elements

n

e.g. headers cannot contain headers

See http://www.w3.org/ for a full list of rules

Elements must not overlap each other

We cannot have: <h1>...<a..> ... </h1>...</a>

We can have: <h1>...<a..> ... </a>...</h1>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

12

Inline descriptive elements

n Descriptive elements affect the appearance of text

depending on how the text is described

n

<em></em> emphasis, usually with italics

<strong></strong> strong, usually with bold

<cite></cite> citation, usually in italics

<code></code> usually results in monotype spacing

<body>

A <em>fascinating</em> subject

that I <strong>must</strong>

Understand

</body>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

13

Inline explicit style elements

n <boldface></boldface>

n <big></big> bigger font than surrounding text

n <small></small> smaller font than surrounding text

n <i></i> italics

n <s></s> strikethrough

n <sub></sub> subscripts

n <sup></sup> superscripts

n <span></span> delimits text for stylesheet control

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

14

Inline explicit style elements

n <font> attributes face

n name of font (must be installed)

n e.g. "arial", "times", "verdana", "helvetica"

n size - absolute size (1-7), or relative to

n color - hexadecimal RGB, or a named color – “#3399dd",

"blue", "red"

n weight - boldness from 100, 200, ..., 900 – "100", "300",

"900”

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

15

Unordered lists

n Unordered lists <ul>...</ul>

n <li>...</li> for the list elements ○ each item has a bullet

<body>

some normal text

<ul>

<li>apples</li>

<li>oranges</li>

<li>pears</li>

<li>bananas</li>

</ul>

</body>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

16

Ordered lists

n Ordered lists <ol>...</ol>

n <li>...</li> for the list elements ○ each item has a number

<body>

some normal text

<ol>

<li>apples</li>

<li>oranges</li>

<li>pears</li>

<li>bananas</li>

</ol>

</body>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

17

Definition lists

n <dl></dl> The enclosing tags

n <dt></dt> The definition term

n <dd></dd> The definition

<dl>

<dd>Multipurpose...</dd>

<dd>File transfer…</dd>

<dd>Transmission…</dd>

</dl>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

18

Nested lists

n A list may contain another list

n The inner list is nested inside the outer list

<body>

<ol>

<li>apples</li>

<ul>

<li>green</li>

</ul>

<li>oranges</li>

<li>pears</li>

<li>bananas</li>

</ol>

</body>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

19

Table

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

• An HTML table is defined with

the <table> tag.

• Each table row is defined with the <tr> tag.

• A table header is defined with the <th> tag.

By default, table headings are bold and

centered.

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

• A table data/cell is defined with

the <td> tag.

</table>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

20

Bài giảng Lập trình Web - Chapter 1: Introduction to HTML - Nguyễn Hữu Hiếu