Bài giảng Web technologies and e-Services - Bài 2, Phần 1: Basic HTML and CSS

IT4409: Web Technologies and e-Services

Term 2020-2

Basic HTML and CSS

Instructor: Dr. Thanh-Chung Dao

Slides by Dr. Binh Minh Nguyen

Department of Information Systems

School of Information and Communication Technology

Hanoi University of Science and Technology

1

Content

Basic HTML

§ hypertext

§ tags & elements

§ text formatting

§ lists, hyperlinks, images

§ tables, frames

§ cascading style sheets

• inline, document, external

2

1

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

3

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

4

2

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

5

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

is a PARAGRAPH element that contains a BOLD element

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

6

3

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>

<!–- Version information --

-- File: page01.html --

-- Author: CS443--

HTML documents begin and end with

<html>and </html>tags

-- Creation: 22.09.09 --

-- Description: introductory page --

-- Copyright: U.Liverpool --

Comments appear between

-->

<head>

HEAD section enclosed between <head>

and </head> tags

<title>My first HTML document</title>

</head>

<body>

<p> Hello world! </p>

</body>

BODY section enclosed between <body>

and </body>

</html>

* Find more info on HTML docs!

view page

7

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

“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

Tables and lists

Images

JavaScript code

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

8

4

Text Layout

<html>

for the most part, layout of the text

is left to the browser

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

<head>

<title>Text Layout</title>

§ (almost) every sequence of whitespace

</head>

is interpreted as a single space

<body>

<p>

§ browser automatically wraps the text to

This is a paragraph of text<br/>

made up of two lines.

</p>

fit the window size

<p>

This is another paragraph with a

can override some text layout

§ can specify a new paragraph (starts on

a new line, preceded by a blank line)

using <p>…</p>

  GAP   between

some of the words.

</p>

<p>

   This paragraph is<br/>

indented on the first line<br/>

but not on subsequent lines.

</p>

§ can cause a line break using the <br/>

tag (“self-closing” tag)

</body>

§ can force a space character using the

symbol for a “non-breaking space”:

</html>

view page

9

Separating Blocks of Text

<html>

can specify headings for

paragraphs or blocks of text

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

<head>

<title>Blocks of Text</title>

</head>

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

bold heading

<body>

<h1>Major heading 1</h1>

<p>

Here is some text.

</p>

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

smaller heading

. . .

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

<h2>Subheading</h2>

<p>

heading

Here is some subtext.

</p>

can insert a horizontal rule to divide

sections

<hr/>

<h1>Major heading 2</h1>

<p>

§ <hr/>draws line across window

Here is some more text.

</p>

</body>

</html>

view page

10

5

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

11

Text Appearance

<html>

can 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

<title>Text Variations and Escape

Sequences</title>

</head>

<body>

<h1>Text Variations</h1>

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

§ <big>…</big>increase the

size of the font

<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

§ <small>…</small>decrease

the size of the font

§ <em>…</em>put emphasis

§ <strong>…</strong>put

even more emphasis

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

<h1>Text Escape Sequences</h1>

<p>

& < > " ©

§ <sub>…</sub>specify a

subscript

§ <sup>…</sup>a superscript

</p>

<h1>Preformatted text</h1>

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

<pre>

formatted text

University of Liverpool

Department of Computer Science

Ashton Building, Ashton Street

Liverpool, L69 3BX, UK

</pre>

§ & &al; > " ©

escape characters used in HTML

control

</body>

view page

</html>

•

Find more info on text tags!

12

6

Lists

<html>

<!–- CS443page07.html 23.09.08 -->

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

there are 3 different types

of list elements

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

counter-increment: list;

</style> </head>

<body>

}

§ <ol>…</ol>specifies an

ordered 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>

§ <ul>…</ul>specifies

unordered list (using a

bullet for each)

<li>identifies each list item

</dl>

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

§ <dl>…</dl>specifies a

definition list <dt>identifies

each term

counter-reset: list 29;" >

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

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

31.</li>

</ol>

<dd>identifies its definition

* We will learn more about the

“style” attributes soon enough.

</body>

</html>

view page

13

Hyperlinks

perhaps the most important

HTML element is the hyperlink,

or ANCHOR

<html>

<!–- CS443page08.html 17.10.14 -->

<head>

<title>Hyperlinks</title>

</head>

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

<body>

<p>

where URL is the Web address of the

page to be displayed when the user

clicks on the link

The University of Liverpool</a>

<br/>

if the page is accessed over the Web,

must start with http://

Open page07 in a new window</a>

</p>

</body>

if not there, the browser will assume it

is the name of a local file

</html>

§ <a href="URL"

target="_blank">…</a>

view page

causes the page to be loaded in a new

Window

* Find more info on attribute TARGET

14

7

Hyperlinks (cont.)

<html>

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

for long documents, you can even

have links to other locations in that

same document

<head>

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

</head>

<body>

<p>

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

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

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

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

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

</p>

where ident is a variable for 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>

view page

</body>

</html>

15

Images

can 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>

view page

</html>

16

8

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

17

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>

<h2>A Simple Table</h2>

<table>…</table>specify a table

element

<table>

<tr>

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

<td> Left Column </td>

<td> Right Column </td>

</tr>

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

<tr>

<td> Some other data </td>

</tr>

column entry in the table)

</table>

</body>

</html>

view page

18

9

Layout in a Table

can have a border on tables using

the “style” attribute

<html>

<head>

<title>Table Layout</title>

</head>

increasing the number makes the border thicker

<body>

can control the horizontal & vertical

layout within cells

Left<br/>Column</td>

<td style="border: 1px solid;

vertical-align: top;">

<td style= "vertical-align:

bottom">

Right Column</td>

</tr>

<tr>

Some data</td>

can apply layout to an entire row

Some data</td>

<tr style="vertical-align:

top">

</tr>

</table>

</body>

view page

</html>

We will explore this more with

Cascading Style Sheets (CSS).

19

Table Width

<html>

by default, the table is sized to fit

the data

<head>

<title>Table Width</title>

</head>

can override & specify the width of

a table relative to the page

<body>

<tr>

right-most</td>

For example

</tr>

</table>

</body>

</html>

view page

20

10

Other Table Attributes

<html>

can control the space between cells &

<head>

margins within cells

<title>Table Formatting</title>

This is the “padding” attribute in the table

and

th,td style sheet declarations

(more on this with Cascading Style

Sheets).

table { border: 1px solid; padding: 1px;}

th, td { border: 1px solid; padding: 10px;

text-align: center; }

</style>

</head>

can add headings

<th> is similar to <td> but

<body>

<table>

displays heading centered in bold

<tr>

can have data that spans more than

one column

</tr>

<tr>

<td>one</td> <td>two</td> <td>three</td>

</tr>

<tr>

</tr>

similarly, can span more than one row

<tr>

(This example uses CSS style sheet

commands in the page

<header>.)

<td> six </td> <td> seven </td>

</tr>

</table>

</body>

view page

</html>

21

Frames

• frames provide the ability to split the screen into independent parts

Frames are going out of fashion, partly because they interact poorly with

web search engines (i.e. search engines cannot generally access the data

stored in the inset frame objects).

Frames can also “break” the regular behaviour of browsers, most notably

the “Back” button on the browser can behave in unexpected ways.

Because of these drawbacks to frames, I will not be discussing them in this

course.

If you wish to design websites using frames (why would you??), I would

encourage you to use the XHTML XFrames specifications (see the W3C

website for more details), but this specification isn’t fully supported by all

browsers at this time.

Frames are also not supported by the HTML 5 specification.

22

11

Content vs. Presentation

•

Most HTML tags define content type, independent of presentation.

§

exceptions? (e.g. <b> …… </b> for bold text and <i> ….. </i> for italicized text)

Style sheets associate presentation formats with HTML elements.

§

CSS1: developed in 1996 by W3C

CSS2: released in 1998, but still not fully supported by all browsers

CSS3: specification still under development by the W3C, “completely backwards

compatible with CSS2” (according to the W3C)

•

The trend has been towards an increasing separation of the content of

webpages from the presentation of them.

Style sheets allow us to maintain this separation, which allows for easier

maintenance of webpages, and for a consistent look across a collection of

webpages.

23

Content vs. Presentation (cont.)

§ Style sheets can be used to specify how tables should be rendered,

how lists should be presented, what colors should be used on the

webpage, what fonts should be used and how big/small they are, etc.

§ HTML style sheets are known as Cascading Style Sheets, since can

be defined at three different levels

1. inline style sheets apply to the content of a single HTML element

2. document style sheets apply to the whole BODY of a document

3. external style sheets can be linked and applied to numerous documents,

might also specify how things should be presented on screen or in print

lower-level style sheets can override higher-level style sheets

§ User-defined style sheets can also be used to override the

specifications of the webpage designer. These might be used, say,

to make text larger (e.g. for visually-impaired users).

24

12

Inline Style Sheets

Using the style attribute, you

<html>

can specify presentation style

for a single HTML element

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

<head>

<title>Inline Style Sheets</title>

</head>

§ within tag, list sequence of

property:value pairs separated by

semi-colons

<body>

<p style="font-family:Arial,sans-serif;

text-align:right">This is a

right-justified paragraph in a sans serif

font (preferably Arial), with some

<span style="color:green">green text</span>.

</p>

font-family:Courier,monospace

font-style:italic

font-weight:bold

font-size:12pt font-size:large font-size:larger

<p>And <a style="color:red;

text-decoration:none;

color:red color:#000080

background-color:white

font-size:larger;"

href="page01.html">here</a>

is a formatted link.

text-decoration:underline

text-decoration:none

</p>

</body>

</html>

text-align:left

text-align:right

text-align:center

text-align:justify

vertical-align:top vertical-align:middle

vertical-align:bottom

view page

text-indent:5em text-indent:0.2in

25

Inline Style Sheets (cont.)

<html>

<!–- CS443 page18.html 17.09.09 -->

<head>

more style properties & values

<title>Inline Style Sheets</title>

</head>

margin-left:0.1in

margin:3em

padding-top:0.1in

padding:3em

margin-right:5%

<body>

<p>Here is an image

padding-bottom:5%

<img src="VictoriaBldg.jpeg"

alt="image of Victoria Building"

style="margin-left:0.3in;

margin-right:0.3in;

border-width:thin

border-width:5

border-color:red

border-style:dashed border-style:dotted

border-style:double border-style:none

border-width:thick

vertical-align:middle;

border-style:double;

border-color:blue" />

embedded in text.

</p>

<li> one thing</li>

whitespace:pre

<li> or another</li>

<ul style="list-style-type:square;

whitespace:pre">

list-style-type:square

list-style-type:decimal

list-style-type:lower-alpha

list-style-type:upper-roman

<li> or

</ul>

</ol>

that</li>

</body>

</html>

view page

26

13

Inline Style Sheets (cont.)

<html>

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

style sheets can be applied to

tables for interesting effects

<head>

<title> Inline Style Sheets </title>

</head>

<body>

<caption style="color:red;

font-style:italic;

text-decoration:underline">

Student data. </caption>

</tr>

<tr>

<td> Chris Smith </td> <td> 19 </td>

</tr>

<tr>

<td> Pat Jones </td> <td> 20 </td>

</tr>

<tr>

<td> Doogie Howser </td> <td> 9 </td>

</tr>

</table>

</body>

view page

</html>

27

Document Style Sheets

• Inline style sheets apply to individual elements in the page.

§ using inline style directives can lead to inconsistencies, as similar elements are formatted

differently

e.g., we might like for all <h1> elements to be centered

§ inline definitions mix content & presentation

èviolates the general philosophy of HTML

• As a general rule, inline style sheet directives should be used as sparingly as

possible.

• Alternatively, document style sheets allow for a cleaner separation of content

and presentation.

§ style definitions are placed in the <head> of the page (within STYLE tags)

§ can apply to all elements, or a subclass of elements, throughout the page

28

14

Document Style Sheets

<html>

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

document style sheets ensure

that similar elements are

<head>

<title>Document Style Sheets</title>

h1 {color:blue;

text-align:center}

p.indented {text-indent:0.2in}

</style>

</head>

formatted similarly

§ can even define subclasses of

elements and specify formatting

p.indenteddefines subclass of

paragraphs

<body>

• inherits all defaults of <p>

• adds new features

<h1> Centered Title </h1>

<p class="indented">This paragraph will

have the first line indented, but

subsequent lines will be flush. </p>

to specify this newly defined class,

place class="ID" attribute in tag

<p>This paragraph will not be indented.

</p>

note how "clean" the <body>

element is

</body>

</html>

view page

29

Document Style Sheets (cont.)

<html>

document style sheets are

especially useful in

formatting tables

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

<head>

<title> Inline Style Sheets </title>

table {font-family:Arial,sans-serif}

caption {color:red;

font-style:italic;

text-decoration:underline}

th {background-color:red}

</style>

effectively separates content

from presentation

</head>

<body>

<table>

what if you wanted to right-

justify the column of

numbers?

<caption> Student data. </caption>

<tr><td> Chris Smith </td>

<tr><td> Pat Jones </td>

<tr><td> Doogie Howser </td> <td> 9 </td></tr>

</table>

</body>

</html>

what if you changed your

mind?

view page

30

15

Pseudo-Elements

<html>

pseudo-elements are used to

address sub-parts of elements

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

<head>

<title>Title for Page</title>

§ can specify appearance of link in

various states

a {color : red;

:visited

:active

:hover

text-decoration : none;

font-size : larger}

a:visited {color : black}

a:active {color : orange}

§ can specify format of first line in page

or paragraph

:first-line

a:hover {color : blue}

p:first-letter {font-size : large;

color : white;

§ can specify format of first letter in

page or paragraph

:first-letter

background-color : darkblue}

</style>

</head>

Danger : changing the look of

familiar elements is confusing

<body>

<p> Welcome to my Web page. I am so

happy you are here.

</p>

Careful : current browsers do not

support all CSS2 features

<p> Be sure to visit

for late-breaking news.

</p>

</body>

</html>

view page

31

External Style Sheets

• modularity is key to the development and reuse of software

§ design/implement/test useful routines and classes

§ package and make available for reuse

§ saves in development cost & time

§ central libraries make it possible to make a single change and propagate the changes

• external style sheets place the style definitions in separate files

§ multiple pages can link to the same style sheet, consistent look across a site

§ possible to make a single change and propagate automatically

§ represents the ultimate in content/representation separation

32

16

Modularity & Style Sheets

<html>

/* myStyle.css CS443 02.09.05 */

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

h1 {color : blue; text-align : center}

p.indented {text-indent:0.2in}

<head>

<title>Title for Page</title>

type="text/css"

Ideally, the developer(s) of a Web site

would place all formatting options in

an external style sheet.

href="myStyle.css"

title="myStyle“ />

</head>

<body>

<h1>Centered Title</h1>

All Web pages link to that same style

sheet for a uniform look.

<p class="indented">This paragraph will

have the first line indented, but

subsequent lines will be flush.</p>

§ simplifies Web pages since only need to

<p>This paragraph will not be indented.

</p>

specify structure/content tags

§ Note: no <style> tags are used in the

external style sheet

</body>

</html>

view page

33

<div> and <span> Tags

• Problem: font properties apply to whole elements, which are often too large

§ Solution: a new tag to define an element in the content of a larger element - <span>

§ The default meaning of <span>is to leave the content as it is (i.e. unchanged)

§ Use <span>to apply a document style sheet definition to its content

§ The <span>tag is

similar to other HTML tags,

they can be nested and

they have id and class

attributes

.bigred {font-size: 24pt;

font-family: Ariel; color: red}

</style>

... ...

best time </span> ever!

</p>

view page

§ Another tag that is useful for style specifications: <div>

Used to create document sections (or divisions) for which style can be specified

e.g., a section of five paragraphs for which you want some particular style

34

17

Web rules of thumb (ok, my rules of thumb…)

• HTML and CSS provide lots of neat features,

but just because you can add a feature doesn't mean you should!

don't add features that distract from the content of the page

Ø use color & fonts sparingly and be careful how elements fit together

e.g, no purple text on a pink background, no weird fonts

e.g. I find bright white text on a black background difficult to read

Consider the needs of visually impaired users of your website!!

Ø use images only where appropriate

e.g., bright background images can make text hard to read

e.g., the use of clickable images instead of standard HTML buttons or links can slow access

Ø don't rely on window or font size for layout

e.g., font size may be adjusted by viewer, window constrained

Ø don’t be annoying

e.g., lots of pop-up windows, excessive advertising, silly music

Ø break a large document into several smaller ones or provide a menu for navigation

Ø stick to standard features and test as many browsers as possible (and versions of the

same browser)

Ø utilize style sheets to make changes easy & ensure consistency

35

email: [email protected]du.vn

Q&A

36

18

Bài giảng Web technologies and e-Services - Bài 2, Phần 1: Basic HTML and CSS - Nguyễn Bình Minh