Bài giảng Web technologies and e-Services - Bài 2: HTML - Trường Đại học Bách khoa Hà Nội

IT4409: Web Technologies

and e-Services

Lec 2: HTML

1

Objectives

v Describe hypertext and HTML standards

v Understand HTML elements and markup tags

v Create the basic structure of an HTML file

v Insert an HTML comment

v Work with block-level elements

v Create lists, tables, hyperlinks and insert images

v Learn HTML5 tags

v Work with forms and inputs

2

Outline

1. Basic HTML

§ hypertext

§ tags & elements

§ text formatting

§ lists, hyperlinks, images

§ tables, frames

2. Advanced HTML

3

Hypertext & HTML

• HyperText Markup Language (HTML) is the language

for specifying the static content of Web pages (based

on SGML, the Standard Generalized Markup Language)

§ hypertext refers to the fact that Web pages are

more than just text

• can contain multimedia, provide links for

jumping within the same document & to other

documents

§ markup refers to the fact that it works by

augmenting text with special symbols (tags) that

identify the document structure and content type

Hypertext & HTML (cont.)

• HTML is an evolving standard (as new technology/tools are added)

§ HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia

in 1993, Mosaic added many new features (e.g., integrated images)

§ HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late

in 1994-96, Netscape & IE added many new, divergent features

§ HTML 3.2 (W3C, 1996): attempted to unify into a single standard

but didn't address newer technologies like Java applets & streaming video

§ HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML)

attempted to map out future directions for HTML, not just react to vendors

§ XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards

§ XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0

§ HTML 5 (Web Hypertext Application Technology Working Group, W3C, 2006):

New

version of HTML4, XHTML 1.0, and DOM 2 (still a work in progress), no longer based on

SGML, but “backward compatible” with parsing of older versions of HTML

5

Web Development Tools

• Many high-level tools exist for creating Web pages

e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill,

Macromedia DreamWeaver, HotDog, …

also, many applications have "save to HTML" options (e.g., Word)

Don’t use these tools!!

for most users who want to develop basic, static Web pages, these are fine (but many

of these programs produce very poorly structured HTML code)

why are we learning low-level HTML using a basic text editor?

§ may want low-level control

§ may care about size/readability of pages

§ may want to “steal" components from other pages and integrate into existing pages

§ may want dynamic features such as scripts or applets

§ remote editing of web pages may only be possible using a basic text editor

§ sticking to (internationally and industrially) agreed upon standards will help ensure your

web documents are rendered as you intend them to look and operate as you desire

6

Tags and Elements

• HTML specifies a set of tags that identify structure of

the document and the content type

§ tags are enclosed in < >

• <img src="image.gif" /> specifies an image

§ most tags come in pairs, marking a beginning and ending

• <title> and </title> enclose the title of a page

• An HTML element is an object enclosed by a pair (in

most cases) of tags

§ <title>My Home Page</title> is a TITLE element

§ <b>This text appears bold.</b> is a BOLD element

§ <p>Part of this text is<b>bold</b>. </p>

is a PARAGRAPH element that contains a BOLD element

An HTML document is a collection of elements (text/media with

context).

7

Structural Elements

• an HTML document has two main structural elements

§ HEAD contains setup information for the browser & the Web

page

• e.g., the title for the browser window, style definitions, JavaScript code, …

§ BODY contains the actual content to be displayed in the Web

page

<html>

HTML documents begin and end with

<html>and </html>tags

<!–- Version information --

-- File: page01.html --

-- Author: CS443--

Comments appear between

-- Creation: 22.09.09 --

-- Description: introductory page --

-- Copyright: U.Liverpool --

-->

<head>

HEAD section enclosed between <head>

and </head> tags

<title>My first HTML document</title>

</head>

<body>

<p> Hello world! </p>

</body>

</html>

BODY section enclosed between <body>

and </body>

* Find more info on HTML docs!

view page

8

<head> and <body> elements

§ The <head> element is where you include a <title> element (that appears in the

title bar of the browser).

§ You can also include lots of other type of information in the <head> element.

o Cascading Style sheet information, or a link to an external style sheet (or several)

o “Meta” data, such as who authored the page, the type of content, and clues that

search engines may (or may not) use to help categorize your page

o JavaScript code

§ The <body> element contains the main bulk of the material to be displayed on the

webpage.

o Paragraphs

o Tables and lists

o Images

o JavaScript code

o PHP code can be included here too (if passed through a PHP parser before being

served to the client’s browser)

o Other embedded objects

9

Text Layout

<html>

vfor the most part, layout of the

<!–- CS443 page02.html 17.09.14 -->

<head>

<title>Text Layout</title>

</head>

text is left to the browser

§ (almost) every sequence of whitespace is

interpreted as a single space

<body>

<p>

§ browser automatically wraps the text to fit

This is a paragraph of text<br/>

made up of two lines.

</p>

the window size

<p>

This is another paragraph with a

  GAP   between

some of the words.

</p>

vcan override some text layout

§ can specify a new paragraph (starts on a

new line, preceded by a blank line) using

<p>

§ can cause a line break using the <br/> tag (“self-

   This paragraph is<br/>

indented on the first line<br/>

but not on subsequent lines.

</p>

closing” tag)

§ can force a space character using the

symbol for a “non-breaking space”:

</body>

</html>

view page

10

Separating Blocks of Text

<html>

vcan specify headings for

<!–- CS443 page03.html 15/08/06 -->

<head>

<title>Blocks of Text</title>

</head>

paragraphs or blocks of text

§ <h1>…</h1> tags produce a large,

<body>

<h1>Major heading 1</h1>

<p>

bold heading

§ <h2>…</h2> tags produce a

slightly smaller heading

. . .

Here is some text.

</p>

<h2>Subheading</h2>

<p>

Here is some subtext.

</p>

§ <h6>…</h6> tags produce a tiny

heading

<hr/>

<h1>Major heading 2</h1>

<p>

Here is some more text.

</p>

vcan insert a horizontal

rule to divide sections

</body>

§ <hr/> draws line across window

</html>

view page

11

The Basic Web page – A Worked Example

<html>

<!–- CS443 page22.html 17.10.14 -->

<head>

<title> Bill Smiggins Inc. </title>

</head>

<body>

<h1>Bill Smiggins Inc.</h1>

<h2>About our Company...</h2>

<p>This Web site provides clients, customers,

interested parties and our staff with all of

the information that they could want on

our products, services, success and failures.

</p>

<hr/>

<h3> Products </h3>

<p> We are probably the largest

supplier of custom widgets, thingummybobs, and bits

and pieces in North America. </p>

<hr/>

</body>

</html>

view page

12

Text Appearance

<html>

vcan specify styles for fonts

<!–- CS443 page25.html 15.08.06 -->

<head>

§ <b>…</b>specify bold

§ <i>…</i>specify italics

§ <tt>…</tt>specify typewriter-like

(fixed-width) font

§ <big>…</big>increase the size of

the font

§ <small>…</small>decrease the

size of the font

§ <em>…</em>put emphasis

§ <strong>…</strong>put even

more emphasis

§ <sub>…</sub>specify a subscript

§ <sup>…</sup>a superscript

§ <pre>…</pre>include ready-

formatted text

§ & &al; > " ©

escape characters used in HTML control

<title>Text Variations and Escape

Sequences</title>

</head>

<body>

<h1>Text Variations</h1>

<p>We can use <b>simple</b> tags to

<i>change</i> the appearance of

<strong>text</strong> within

<tt>Web pages</tt>.

Even super<sup>script</sup>

and sub<sub>scripts</sub> are

<em>supported</em>.</p>

<h1>Text Escape Sequences</h1>

<p>

& < > " ©

</p>

<h1>Preformatted text</h1>

<pre>

University of Liverpool

Department of Computer Science

Ashton Building, Ashton Street

Liverpool, L69 3BX, UK

</pre>

§ Find more info on text tags!

</body>

</html>

view page

13

Lists

<html>

<!–- CS443page07.html 23.09.08 -->

<head> <title>(Sort of) Simple Lists</title>

vthere are 3 different

types of list elements

.my_li:before { content: counter(list) ": ";

counter-increment: list;

}

§ <ol>…</ol> specifies an ordered

</style> </head>

<body>

list (using numbers or letters to

label each list item)

<li> ... first list item... </li>

<li> ... second list item... ... </li>

</ul>

•<li>identifies each list item

•can set type of ordering, start index

<dl>

<dt> Dweeb </dt>

<dd> young excitable person who may

mature into a <em>Nerd</em> </dd>

<dt> Hacker </dt>

<dd> a clever programmer </dd>

<dt> Nerd </dt> <dd> technically bright but

socially inept person </dd>

</dl>

§ <ul>…</ul> specifies unordered

list (using a bullet for each)

•<li>identifies each list item

§ <dl>…</dl> specifies a definition

<ol style="list-style-type: none;

counter-reset: list 29;" >

<li class="my_li">Makes first item number 30.</li>

<li class="my_li">Next item continues to number

list

• <dt>identifies each term

• <dd>identifies its definition

31.</li>

</ol>

* We will learn more about the “style”

</body>

</html>

attributes soon enough.

view page

14

Hyperlinks

<html>

vperhaps the most important

<!–- CS443page08.html 17.10.14 -->

HTML element is the hyperlink, or

<head>

<title>Hyperlinks</title>

</head>

ANCHOR

§ <a href="URL">…</a>

•where URL is the Web address of the page

to be displayed when the user clicks on the

link

<body>

<p>

The University of Liverpool</a>

<br/>

•if the page is accessed over the Web, must

start with http://

•if not there, the browser will assume it is

the name of a local file

<a href="page07.html"

target="_blank">

Open page07 in a new window</a>

</p>

</body>

§ <a href="URL"

</html>

target="_blank">…</a>

•causes the page to be loaded in a new

Window

view page

* Find more info on attribute TARGET

15

Hyperlinks (cont.)

<html>

vfor long documents, you can even

have links to other locations in that

same document

<!–- CS443 page09.html 21.09.12 -->

<head>

<title>Internal Links in a Page</title>

</head>

<body>

§ <xxxx id="ident">…</xxxx>

•where ident is a variable for

<p>

[ <a href="#HTML">HTML</a> |

<a href="#HTTP">HTTP</a> |

<a href="#IP">IP</a> |

<a href="#TCP">TCP</a> ]

</p>

identifying this location, where "xxxx"

can, in principle, be any HTML element

•(this is actually an HTML5 language

specification, but seems to work in

most browsers)

<p>

Computer acronyms:

<dl>

<dd>HyperText Markup Language

<dd>HyperText Transfer Protocol…</dd>

<dd>Internet Protocol…</dd>

<dd>Transfer Control Protocol…</dd>

</dl>

§ <a href="#ident">…</a>

•will then jump to that location within

the file

§ <a href="URL#ident">…</a>

•can jump into the middle of another

file just as easily

</p>

</body>

</html>

view page

16

Images

vcan include images using img

§ by default, browsers can display GIF and JPEG files, more modern browsers can also

typically support PNG files and SVG graphics (of course, use at your own risk)

§ other image formats may require plug-in applications for display

•<img src="URL (or filename)" height="n" width="n"

alt="text" title= "text" />

•again, if file is to be accessed over the Web, must start with http:// (if not, will

assume local file)

• Find more info on <img/>

<html>

<!–- CS443 page10.html 18.09.13 -->

<head>

<title>Image example</title>

</head>

<body>

<img

src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/HTML/Cathedral.jpg"

title="Liverpool's Anglican cathedral"

alt="image of Liverpool's Anglican Cathedral" width="400" />

<p>The Anglican Cathedral of Liverpool</p> </body>

</html>

view page

17

Images (cont.)

§ src - specifies the file name (and can include a URL)

§ width and/or height - dimensions in pixels (often only need to

specify one of them and the other is automatically scaled to match,

where possible pictures should be resized using other programs to

save on bandwidth and problems that some (older) browsers

might have with resizing images)

§ title - displayed when the mouse is “hovered” over the picture

§ alt - text that is displayed when the image is missing, can’t be

loaded (e.g. if file permissions aren’t set correctly), or if the client

has disabled loading images in his/her browser

18

Tables

• tables are common tools for arranging complex layout on a Web page

§ a table divides contents into rows and columns

§ by default, column entries are left-justified, so you must provide for your own

alignment when needed (using Cascading Style Sheets, for example)

<html>

<!–- CS443 page11.html 17.10.14 -->

<head>

<title>Tables</title>

</head>

<body>

<table>…</table>specify a table

element

<h2>A Simple Table</h2>

<table>

<tr>

<tr>…</tr>specify a row in the

table

<td> Left Column </td>

<td> Right Column </td>

</tr>

<tr>

<td> Some other data </td>

</tr>

</table>

</body>

<td>…</td>specify table data (i.e.,

each column entry in the table)

</html>

view page

19

Layout in a Table

<html>

vcan have a border on tables using

the “style” attribute

<head>

<table style= "border: 1px

solid;">

<title>Table Layout</title>

</head>

increasing the number makes the border thicker

<body>

Left<br/>Column</td>

<td style="border: 1px solid;

vertical-align: top;">

Right Column</td>

</tr>

vcan control the horizontal &

vertical layout within cells

vcan apply layout to an entire row

<tr>

Some data</td>

Some data</td>

</tr>

</table>

</body>

</html>

We will explore this more with

Cascading Style Sheets (CSS).

view page

20