INTRO TO HTML

LINK DOWNLOAD MIỄN PHÍ TÀI LIỆU "INTRO TO HTML ": http://123doc.vn/document/559335-intro-to-html.htm

Table of Contents
ii
OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net

Summary 38

Chapter 5 - Lists
39

List Elements 40

Unordered List 40

Ordered List 41

Definition List 42

Nesting Lists 42

Exercise – Ordered List 43

Optional Exercises 44

Review Questions 45

Summary 46

Chapter 6 - Images
47

Supported Image Formats 48

GIF 48

GIF Interlacing 48

GIF Transparency 48

GIF Animated 48

JPEG 49

Limited Support or Non-Supported Image Formats 49

Inserting Images <IMG> 50

Additional Image Attributes 50

Horizontal Space HSPACE 50

Vertical Space VSPACE 50

HTML Tip: Images 50

Exercise 1 51

Optional Exercise 51

Review Questions 52

Summary 53

Chapter 7 - Anchors, URLs and Image Maps
54

Link Elements <A Href=> </A> 55

Link Types 55

Internal Links 55

Local Links 55

External Links 55

URLs – Uniform Resourced Locators 56

HTTP – HyperText Transport Protocol 56

FTP – File Transfer Protocol 56

News – News Groups 56

Gopher 57

E-mail 57

Telnet – Remote Terminal Emulation 57

Internal Links 58

HTML Tip: Links
58

Image Maps 59

Server-side Image Maps
59

Client-side Image Maps 60

Exercise – Mailto and HTTP Link 61

Review Questions 62

Summary 63

Chapter 8 - Tables
64

Tables <TABLE> </TABLE> 65

Table Attributes 66

Table Captions 67

Table Header 67

HTML Tip: Centering Tables 69

Exercise – Add and customize a table 70

Review Questions 71

Summary 72

Table of Contents


HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com
iii

Chapter 9 - Frames
73

Frames 74

Frames Architecture 75

Creating a Frames Page 76

Frameset 76

Other Attributes of the FRAMESET Element 77

Frame 78

Noframes 79

Targets 81

Special Targets 82

Exercise – Using a Framed page 83

Exercise – Creating a link in a framed environment 83

Review Questions 84

Summary 85

Chapter 10 - Forms
86

Forms <FORM> </FORM> 87

Form Attributes 88

HTML Tip: Forms 88

Form Elements 89

Textboxes 89

Password boxes 90

Check boxes 91

Radio/Option Button 91

File Upload 92

Push button 92

Submit button 93

Image submit button 93

Reset Button 93

Text area 94

Select 95

Drop down list 95

List box 95

Options 95

Common Gateway Interface - CGI 96

CGI Scripts 96

Section 3.2.a: Simple CGI Program 97

Section 3.2.b: Three-Tier Web Application Development 98

Section 3.2.c: Four-Tier Web Application Development 99

Exercise – Creating an Order Form 100

Review Questions 113

Summary 114

Chapter 11 - JAVA and JAVAScript Introduction
115

JAVA 116

Applet 116

Applet Attributes 116

<PARAM> Element 116

JAVAScript 118

Exercise – Inserting a JAVA Applet 120

Optional Exercise 121

Review Questions 122

Summary 123

Chapter 13 - ActiveX Objects and VBScript introduction
124

ActiveX Support 125

<OBJECT> 125

VBScript 128

Exercise – Adding an ActiveX Object to a page 129

Optional Exercise – Adding VBScript to a page 130

Review Questions 131

Table of Contents
iv
OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net

Summary 132

Chapter 14 - Special Elements
133

Uses of the Meta Element 134

Client Pull, Server Push 134

Description 134

Keywords 134

Author 134

Company 135

Copyright 135

Adding sound to an HTML page 136

Embed 136

BGSound 136

Marquee 137

Blink 137

Exercise – Adding Client Pull, Server Push 138

Optional Exercise 139

Review Questions 140

Summary 141

Chapter 15 - Page Layout and Design Considerations
142

Technical Design Considerations 143

Screen Resolution 143

Color Depth 143

Document Size vs. Download Time 144

Page Loading – HTTP 1.0 vs. HTTP 1.1 145

Browser Compatibility & Quirks 145

Page layout 146

Page Layout Guidelines 146

Site Design Factors and Criteria 148

Site Layout and Navigation 148

Review Questions 149

Summary 150

Chapter 16 - Cascading Style Sheets
151

Introduction to Cascading Style Sheets 152

Inline Styles 153

Embedded Style Sheets 154

Linked Style sheets 156

Classes 157

IDs 158

DIV and SPAN 159

Cascading and Inheritance 160

Exercise – Inline Styles 162

Exercise – Embedded Styles 163

Exercise – Linking in a Cascading Style Sheet 164

Exercise – Editing a Cascading Style Sheet 165

Review Questions 166

Summary 167



HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com

1


1
HTML I
ntroduction



In this chapter you will be introduced to the concepts of linear media and
hypermedia. You will learn about HTML and the basics of document
structure.

Objectives

Upon completing this section, you should be able to

1. Explain hypermedia vs. linear media

2. Define HTML

3. Describe the Basic Document Structure

4. Identify the sub-elements of the header






2
OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net


Linear Media

Linear media is a term used to describe any media where there is a
defined beginning and a linear progression to the end. Forms of linear
media such as movies, audio and videotapes, and most books are
organized with this expectation. The World Wide Web, however, is
organized very differently.


Hypermedia


Hypermedia is where the user simply selects the next item of interest and
is immediately transported to that new location. A good example is an
audio CD where you can choose song 5 and listen to it almost
immediately. Contrast this with an audiotape where you would have to
scan through from your current location on the tape to the beginning of the
song.

When this concept is applied to text you get
hypertext
, where by
{Clicking}
on a link or hotspot (hyperlink) you are immediately transported
to a new location within the same page or to a new page altogether.

When you interlink a large number of pages of text on different computers
all over the world, you get a spider web-like system of links and pages.
This is known as the World Wide Web – a system whereby pages stored
on many different web servers, connected to the Internet, are linked
together.

The system is useful because all of the pages are created in the same
format. This format or “language” is called HTML, (Hypertext Markup
Language) a subset of an international standard for electronic document
exchanged called SGML (Standard Generalized Markup Language).

In this class you will be introduced to the format of an HTML page, you will
learn about the components that make up HTML, and how to create pages
that can be published on the World Wide Web.



HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com

3

What is HTML Markup?

HTML is a set of logical codes (markup) in parentheses that constitute the
appearance of a web document and the information it contains.

E.g.
<B>
This text would appear bold in the browser
</B>


The codes are enclosed by less than “
<
”, and greater than “
>
” brackets.
These bracketed codes of the markup are commonly referred to as tags.
HTML codes are always enclosed between brackets and are not case-
sensitive; meaning, it does not matter whether you type them in upper
case or lower case. However, tags are easier to recognize in a web
document if they are capitalized.

Most elements have an opening element (tag) and a closing element (tag)
distinguished by the “
/
” inside the “
<
” opening bracket.

The first word or character that appears inside the “
<
” opening bracket is
called the
element
. An element is a command that tells the browser to do
something, such as
<FONT>
.

Words that follow the element and are contained inside the “
>
” bracket of
the opening tag are called
attributes
. Attributes are not repeated or
contained in the closing element (tag).

Confused? Attributes are another
way of describing the element’s properties. For instance, a t-shirt can have
several properties or “attributes” – the t-shirt’s color, size, material etc. are
all attributes.


Attributes that appear to the right of the element are separated by a
space, and followed by an equal sign. The
value
of the attribute is
contained in quotes. In the following example the element is FONT, the
attribute is COLOR, and the value of that attribute is BLUE.

E.g.
<FONT COLOR="BLUE">
This text would be blue
</FONT>


Most HTML elements have more than one attribute.
E.g.
<FONT COLOR="BLUE" SIZE="+1">
This text would be blue and
one size larger than normal
</FONT>




4
OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net


Document Structure

The way a document is marked up with elements and their attributes is
according to a Document Type Definition (DTD). These are the rules that
govern the way in which a document can be marked up.

The authoritative source for information about HTML and the HTML DTD
is the World Wide Web Consortium (W3C) at http://www.w3.org. The
World Wide Web Consortium is a not-for-profit organization that
coordinates the evolution of the Web. It includes the Internet Engineering
Task Force, the group of people who make recommendations for new
markup.


A Basic Document

An element called
HTML
surrounds the whole document. This element
contains two sub-elements,
HEAD
and
BODY
. These elements are
required to form any HTML document.




HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com

5

<HTML>
<HEAD>
has sub-elements that define header material:

<TITLE>
document title. The title of your document is what appears
in a web browser’s Favorite or Bookmark list. Your document’s title
should be as descriptive as possible. Search engines on the
Internet use the document’s title for indexing purposes.
</TITLE>


<BASE>
can be used to record the document's location in the form
of a URL. The URL recorded here may be used to resolve a relative
URL (necessary if the document is not accessed in its original
location).
</BASE>


<ISINDEX>
indicates to the browser that the document is an index
document. This is used only if the document is on a server that
does indexing.
</ISINDEX>


<LINK>
indicates a relationship between this document and some
other object on the Web.
</LINK>


<META>
provides information such as the page’s keywords and
description that appears in HTTP headers.
</META>

<SCRIPT>
contains either JAVA Script or VB Script
</SCRIPT>

<STYLE>
contains information used by cascading style sheets
</STYLE>

</HEAD>


<BODY>
the remaining HTML elements are contained within these tags.
</BODY>
</HTML>



Note:
a framed document is formatted differently than a basic document and is
discussed in the advanced section of this course.


6
OLM World Class Web Hosting E-commerce and Custom Internet Solutions hosting.olm.net


Review Questions


1. What does HTML stand for?



2. What is an Element?



3. What are the Attributes of an Element?



4. What are the three basic elements of an HTML document?



5. What are the elements that can be contained in the header of the
document?








HoTMetaL PRO 6.0 the ultimate web development tool www.hotmetalpro.com

7


Summary


As a result of this chapter, you should be able to

•
Explain hypermedia vs. linear media

•
Define HTML

•
Describe the Basic Document Structure

•
Identify the sub-elements of the header