Lecture 02 HTML Basics

Introduction to HTML
Outline
Introduction
Markup Languages
Editing HTML
Common Tags
Headers
Text Styling
Linking
Images
Formatting Text With 
Special Characters, Horizontal Rules and More Line Breaks
1 Introduction
HTML
HyperText Markup Language

Not a procedural programming language like C, Fortran, Cobol
or Pascal
Markup language
Identify elements of a page so that a browser can render that page

on your computer screen
Presentation of a document vs. structure
Markup Languages
Markup language
Used to format text and information
HTML
Marked up with elements, delineated by tags

Tags: keywords contained in pairs of angle brackets
HTML tags
Not case sensitive

Good practice to keep all the letters in one case
Forgetting to close tags is a syntax error
3.3 Editing HTML

HTML files or documents
Written in source-code form using text editor
HTML files
.htm or .html extensions

Name your files to describe their functionality
File name of your home page should be index.html
Errors in HTML
Usually not fatal
Common Tags
Always include the <HTML></HTML> tags
Comments placed inside 
4 
5
6 <HEAD>
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>
8 </HEAD>
9
10<BODY>
11<H1 ALIGN = "center">Welcome to Our Web Site!</H1>
12
13We have designed this site to teach
14about the wonders of HTML. We have been using
15HTML since version 2.0,
16and we enjoy the features that have been added recently.
17seems only a short time ago that we read our first
It
18book. Soon you will know about many of the great new
HTML
19of HTML 4.0.
features
20
21<H2 ALIGN = "center">Have Fun With the Site!</H2>
22
23</BODY>
24</HTML>
Stylizing text on Web pages
Stylizing text on Web pages

Tag
Description

Defines bold text

Defines emphasized text

Defines a part of text in italic

Defines smaller text

Defines important text

Defines subscripted text

Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text

Defines marked/highlighted text
Linking
Links inserted using the A (anchor) element
Requires HREF attribute
HREF specifies the URL you would like to link to

<A HREF = address></A>
Can link to email addresses, using
<A HREF = mailto: emailaddress></A>
Note quotation mark placement
Linking
A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another

document.
When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
By default, links will appear as follows in all
browsers:
An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
<html>
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
Click a name to go to that page.

<a href = "http://www.deitel.com">Deitel</a>
<a href = "http://www.prenhall.com">Prentice Hall</a>
<a href = "http://www.yahoo.com">Yahoo!</a>
<a href = "http://www.usatoday.com">USA Today</a>
</body>
</html>
Linking to other Web pages
<html>
<head>
<title>Hyper Linking </title>
</head>
<body>
My email address is
<a href = "mailto:lokesh.sharma@jaipur.manipal.edu">
lokesh.sharma@jaipur.manipal.edu
</a>
. Click the address and your browser will
open an e-mail message and address it to me.

</body>
</html>
The HTML <head> Element

The <head> element is a container for all the head
elements. Elements inside <head> can include

scripts, instruct the browser where to find style
sheets, provide meta information, and more.
The following tags can be added to the head section:
<title>, <style>, <meta>, <link>, <script>,

<noscript>, and <base>.
The HTML <title> Element

The <title> tag defines the title of the document.
The <title> element is required in all
HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favourites
displays a title for the page in search-engine results
The HTML <base> Element

The <base> tag specifies the base URL/target for all
relative URLs in a page:
The HTML <link> Element

The <link> tag defines the relationship between a
document and an external resource.

The <link> tag is most used to link to style sheets:
The HTML <style> Element

The <style> tag is used to define style information
for an HTML document.

Inside the <style> element you specify how HTML
elements should render in a browser:
The HTML <meta> Element

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine

parsable.
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other

metadata.
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
<meta> Tags - Examples of Use
Images
Images as anchors
Background color
Preset colors (white, black, blue, red, etc.)

Hexadecimal code
First two characters for amount of red

Second two characters for amount of green
Last two characters for amount of blue
00 is the weakest a color can get
FF is the strongest a color can get
Ex. black = #000000
Images
Image background
<BODY BACKGROUND = background>
Image does not need to be large as browser tiles image across and down the
screen
Pixel
Stands for picture element
Each pixel represents one addressable dot of color on the screen
Insert image into page
Use <IMG> tag
Attributes:
SRC = location
HEIGHT (in pixels)
WIDTH (in pixels)
BORDER (black by default)
ALT (text description for browsers that have images turned off or cannot view
images)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>


<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY BACKGROUND = "background.gif">
<CENTER>

<IMG SRC = "deitel.gif" BORDER = "1" HEIGHT = "144"
WIDTH = "200" ALT = "Harvey and Paul Deitel">
</CENTER>
</BODY>
</HTML>
<html>
<head>
<title>Internet and WWW How to Program - Navigation Bar </title>
</head>
<body>

<a href = "links.html"><img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a> 
<a href = "list.html"><img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a> 
<a href = "contact.html"><img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" />
</a> 
<a href = "header.html"> <img src = "buttons/header.jpg" width = "65"

height = "50" alt = "Header Page" />
</a> 
<a href = "table.html"><img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" />
</a> 
<a href = "form.html"><img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" />
</a> 

</body>
</html>
Using images as link anchors
Formatting Text With 

FONT element
Add color and formatting to text

FONT attributes:
COLOR
Preset or hex color code
Value in quotation marks
Note: you can set font color for whole document using TEXT
attribute in BODY element
Formatting Text With (II)
SIZE
To make text larger, set SIZE = +x
To make text smaller, set SIZE = -x
x is the number of font point sizes
FACE
Font of the text you are formatting
Be careful to use common fonts like Times, Arial, Courier and
Helvetica
Browser will display default if unable to display specified font
Example


1<HTML>
2
3
4
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Welcome</TITLE>
8</HEAD>
9
10<BODY>
11
12<H1 ALIGN = "center">Welcome to Our Web Site!</H1>
13
14
15We have
16designed this site to teach about the wonders of
17HTML.
18
19We have been
20using HTML since version 2.0,
21and we enjoy the features that have been added recently.
22
23It
24seems only a short time ago that we read our first HTML
25book.
26
27Soon you will
28know about many of the great new feature of HTML 4.0.
29
30<H2 ALIGN = "center">Have Fun With the Site!</H2>
31
32</BODY>
33</HTML>
Using the FONT element to format text
Special Characters, Horizontal Rules and More Line Breaks

Special characters
Inserted in code form

Format always &code;
Ex. &
Insert an ampersand
Codes often abbreviated forms of the character

Codes can be in hex form
Ex. & to insert an ampersand
Strikethrough with DEL element

Superscript: SUP element
Subscript: SUB element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<HTML>


<HEAD>
<TITLE>Internet and WWW How to Program - Contact Page</TITLE>
</HEAD>
<BODY>

My email address is <A HREF = "mailto:deitel@deitel.com">
deitel@deitel.com</A>. Click on the address and your browser
will automatically open an email message and address it to my
address.
All information on this site is ©
Deitel & Associates, 1999.



<DEL>You may copy up to 3.14 x 102 characters
worth of information from this site.</DEL> Just make sure
you do not copy more information than is allowable.
No permission is needed if you only need to use 
< ¼ of the information presented here.
</BODY>
</HTML>
Inserting special characters into HTML
Special Characters, Horizontal Rules and More Line Breaks (II)

Horizontal rule
<HR> tag
Inserts a line break directly below it
HR attributes:
WIDTH
Adjusts the width of the rule
Either a number (in pixels) or a percentage
SIZE
Determines the height of the horizontal rule
In pixels
ALIGN
Either left, right or center
NOSHADE
Eliminates default shading effect and displays horizontal rule as a solidcolor bar
1<HTML>
2
3
4
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Horizontal
Rule</TITLE>
8</HEAD>
9
10<BODY>
11
12
13<HR WIDTH = "25%" SIZE = 1>
14<HR WIDTH = "25%" SIZE = 2>
15<HR WIDTH = "25%" SIZE = 3>
16
17Size:4
18Width:75%
19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left">
20
21Size:12
23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right">
24
25Size:8
27No shade...
28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center">
29
30</BODY>
31</HTML>
Using horizontal rules

Lecture 02 HTML Basics

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lecture 02 HTML Basics

Enviado por

Direitos autorais:

Formatos disponíveis

Introduction to HTML

HyperText Markup Language

Identify elements of a page so that a browser can render that page

Presentation of a document vs. structure

Used to format text and information

Marked up with elements, delineated by tags

Not case sensitive

Forgetting to close tags is a syntax error

3.3 Editing HTML

Written in source-code form using text editor

.htm or .html extensions

Usually not fatal

Info about the document

Common Tags (cont.)

Simple form of text formatting

Centers material horizontally

Header elements H1 through H6

Align elements with ALIGN attribute

Strong (bold) style

<B> and <I> tags deprecated

Overstep boundary between content and presentation

Stylizing text on Web pages

Stylizing text on Web pages

Defines bold text

Defines emphasized text

Defines a part of text in italic

Defines smaller text

Defines important text

Defines subscripted text

Defines superscripted text

Defines inserted text

Defines deleted text

Defines marked/highlighted text

Requires HREF attribute

HREF specifies the URL you would like to link to

image that you can click on to jump to another

An unvisited link is underlined and blue

Linking to other Web pages

The HTML <head> Element

elements. Elements inside <head> can include

<title>, <style>, <meta>, <link>, <script>,

The HTML <title> Element

The HTML <base> Element

relative URLs in a page:

The HTML <link> Element

document and an external resource.

The HTML <style> Element

for an HTML document.

elements should render in a browser:

The HTML <meta> Element

Metadata will not be displayed on the page, but will be machine

keywords, author of the document, last modified, and other

reload page), search engines (keywords), or other web services.

<meta> Tags - Examples of Use

Preset colors (white, black, blue, red, etc.)

First two characters for amount of red

<a href = "header.html"> <img src = "buttons/header.jpg" width = "65"

Using images as link anchors

Formatting Text With <FONT>

Add color and formatting to text

Formatting Text With <FONT> (II)

Using the FONT element to format text

Ex. & to insert an ampersand