HTML 1: Hypertext Markup Language

HTML 1
HyperText Markup
Language
An Introduction
Basic HTML
 What is HTML? How make a HTML document?

 Basic layout
– Titles
– Comments
– Headings
– Paragraphs
– Line Breaks
 Text formatting
 Horizontal Rule
What is an HTML File?
 HTML stands for Hyper Text Markup Language

 Hypertext is Textual data which is "linked" across
multiple documents or locations
 A markup language is a set of standards that define
how text is displayed.
 HTML uses markup tags to tell the Web browser
how to display the page
 An HTML file must have an htm or html file
extension.
How can I make a web page
 An HTML file can be created using a simple

text editor like notepad.
 Note: The default name for main page of a
web site is index.htm or index.html
HTML Tags
 HTML tags are used to mark-up HTML elements

 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like and 
 The first tag in a pair is the start tag, the second tag is the
end tag
 The text between the start and end tags is the element
content
 HTML tags are not case sensitive, means the same
as (but latest standards require lowercase and in the
future upper case may not be supported)
Tag Attributes
 Tags can have attributes. Attributes provide additional
information about the HTML elements on your page.
 Example <body bgcolor=“beige">
– The <body> tag defines the start of the “body” element of a
web page
– bgcolor=“beige” tells the browse to set the background color to
beige
 Attributes always come in the format of name="value".
 Attributes are always added to the start tag of an HTML
element.
 Note: the word beige is in quotes (“beige”), you can

use double or single so ‘beige’ also is ok
Example of basic HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
My first Web page
</body>
</html>
Note: indenting makes page easier to read
The very first line
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

3.2//EN">
The first line is not technically required, but is a code

that tells the browser what version of HTML the
current page is written for. For more information, see
the W3C Reference Specification.
http://www.w3.org/pub/WWW/TR/WD-html32#html
Basic Tags
<html></html>
- defines the document as HTML
<head></head>
- defines start/end heading information
<title>My First Web Page</title>
This defines the information that will go in the browser’s caption
<body> </body>
What is here is displayed on the web page
What it looks likes
Body Attributes
 BACKGROUND="location_of_image" - Background image for
web page.
– <body background="kitten.jpg">
 BGCOLOR=“color”
– <body bgcolor=“red"> (later we will discuss hexadecimal color code)
 LINK=“color" - Color for Links
– Most browsers default to blue
– Only change if have really good reason, confuses/annoys people
 VLINK=“color" - Color for Links the User has Already Visited
– Most browsers default to purple.)
– Only change if have really good reason, confuses/annoys people
 TEXT=“color" - Text Color
Comment Tags
The comment tag is used to insert a comment in the HTML source

code.
Comments are ignored by browsers.
Use comments to explain coding
Format:

Note that you insert an exclamation point after the opening bracket,
but not before the closing bracket.
Example:
<html>
<body>
This text is visible

This text is visible
</body>
</html>
Required Comments for Homework

Headings
Headings are defined with the <h1> to <h6> tags. <h1>

is the biggest and <h6> is the smallest.
<h1>This is a heading</h1>
HTML automatically adds an extra blank line before
and after a heading.
Headings
(Note: It isn’t a good idea to use heading h4 to h6

Text is too small for most displays)
Paragraphs
Paragraphs are defined with the tag.


Roses are red
Violets are blue
Sugar is sweet
and so are you
Note: formatting is ignored, so the above code looks like this:
Note: HTML automatically adds an extra blank line before and after a
paragraph.
Line Breaks
The tag inserts a line break and doesn’t insert any empty lines
before or after. (notice no ending tag)
 Roses are red Violets are
blue Sugar is sweet and so are you.
Note: I didn’t use formatting to show that the put in the line
breaks, HTML usually should be formatted for readability
Preformatted Text
 <pre>
 This is preformatted text.
 Whatever is typed here
 is displayed as
 it was typed,
 spaces & line breaks
 are preserved
 </pre>
 <pre>
 for i = 1 to 10
 print i
 next i
 </pre>
Text Formatting Codes
bold
 italic
<big>big</big>
<tt>teletype</tt>
small
underline
Normalsubscript
Normalsuperscript
Deleted and Inserted Text
Most browsers will overstrike deleted text and underline

inserted text.

I will love
<del> Betty </del><ins> Susan </ins>
forever

Nesting Tags
Tags can be nested for multiple effects
text
text
Note: I ordered the closing tags in reverse order of opening tags

Horizontal Rule
 Adds a horizontal line across the page

 <hr> (full size of page)
 <hr width="50%"> (50% of the page size)

Practice (save as “Rose.html”)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<html>
<head>

<title>Poetry: Roses are Red</title>
</head>
Practice (cont)(save as “Rose.html”)
<body>
<


Vietnamese-German University 
Foundation Year 
English for Computer Science


<hr>


<h1 align=“center”>Roses are Red </h1>
<hr>
 
Roses are red 
Violets are blue 
Sugar is sweet 
And so are you.
<address>

Created by, <a href="mailto:kimnguyen@vgu.edu.vn "> Kim Thi Nguyen
</a> 
<a href="http://www.vgu.edu.vn/">The Vietnamese-German
University</a> 
<tt>last modified:18 Oct 2010</tt>

</address>
</body>
</html>
Rose Web Page

Exercise
 Recreate the Poem web page

 Rose Web Page
References
 “Writing HTML, A Tutorial for Creating Web

Pages.” (June 2000) version 4.5.2 , Maricopa
Center for Learning and Instruction (mcli)
<http://www.mcli.dist.maricopa.edu/tut/index.
html>
 Raggett D. “HTML 3.2 Reference
Specification.” W3C Recommendation” 14-
Jan-1997. <http://www.w3.org/TR/REC-
html32>

HTML 1: Hypertext Markup Language

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 1: Hypertext Markup Language

Uploaded by

Copyright:

Available Formats

HTML 1

 What is HTML? How make a HTML document?

 HTML stands for Hyper Text Markup Language

 An HTML file can be created using a simple

 HTML tags are used to mark-up HTML elements

 Note: the word beige is in quotes (“beige”), you can

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

The first line is not technically required, but is a code

The comment tag is used to insert a comment in the HTML source

<!-- Class: English for Computer Science

Headings are defined with the <h1> to <h6> tags. <h1>

(Note: It isn’t a good idea to use heading h4 to h6

Paragraphs are defined with the <p> tag.

Most browsers will overstrike deleted text and underline

Tags can be nested for multiple effects

Note: I ordered the closing tags in reverse order of opening tags

 Adds a horizontal line across the page

 <hr width="50%"> (50% of the page size)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Rose Web Page

 Recreate the Poem web page

 “Writing HTML, A Tutorial for Creating Web

You might also like