Download HTML Beginning HTML - Doral Academy Preparatory

XP
New Perspectives on
Creating Web Pages
with HTML & XHTML
Developing a Basic Web Page
1
XP
Objectives
Upon completion of this lesson, you should be able to:
1.
2.
3.
4.
5.
6.
7.
8.
9.
HTML History
HTML Elements
HTML Coding Practices
HTML Versions
Review the structure of the World Wide Web
Learn the basic principles of Web documents
Create a HTML document
View an HTML file using a Web browser
Explain the basic syntax of HTML.
2
XP
Objectives (HTML & XHTML)
1.
2.
3.
4.
5.
6.
Do simple markup of a text document in HTML.
Use document tags (HTML, HEAD, BODY, and TITLE).
Use formatting tags (P, BR, and HR) with some of their
attributes.
Use text style tags (I, B, U, and FONT) with some of their
attributes.
Use heading and list tags for organizing the document.
Use the image tag (IMG) with its attributes.
3
XP
Objectives HTML (Cont.)
1.
2.
3.
4.
5.
6.
7.
Use the anchor tag (A) with its main attribute to link to
another Web page.
Test your HTML documents.
Use HTML tags for text, headings, paragraphs, and
lists
Insert character tags into an HTML document
Insert an inline graphic image into a HTML document
Add special characters to an HTML document
Insert horizontal lines into an HTML document
4
XP
Introducing the World Wide Web

In order for computers to share resources
efficiently, they can be linked together in
one of the following structured networks:
 linked
within a local area network (LAN)
 linked across a wide area network (WAN)

Networks are very useful, their use led to a
“network of networks” called the
Internet.
5
XP
The Internet

The Internet consists of millions of
interconnected computers that enable users to
communicate and share information.

The World Wide Web is a service of the Internet
that was developed to make the Internet easier
to use and give quick access to users.
6
The Development of the
World Wide Web

XP
In 1989, Timothy Berners-Lee and other researchers at
the CERN nuclear research facility, laid the foundation of
the World Wide Web, or the Web.
 created an information system that would make it
easy for researchers to locate and share data
 required minimal training and support
 developed a system of hypertext documents,
electronic files that contain elements that you can
easily select
Activity: Write a one page Biography about Timothy
Berners-Lee. (Do not copy and paste. Print it)
7
XP
Hypertext Documents




Hypertext offers a better way of locating
information.
When you read a book, you follow a linear
progression, reading one page after another.
With hypertext, you progress through pages in
whatever way is best suited to you and your
objectives.
Hypertext lets you skip from one topic to
another.
8
XP
Hypertext Documents Continued



The key to hypertext is the use of links, which you
activate to move from one topic to another.
 a link can open a document on a computer anywhere
in the world
Hypertext has become the dominate method of sharing
and retrieving information on the Internet, becoming
known as the World Wide Web, or the Web.
Documents on the Web are known as Web pages.
9
XP
HTML: The Language of the Web

Web pages are text files, written in a language called
Hypertext Markup Language or HTML.

A markup language is a language used to describe the
contact and format of documents.

HTML = HyperText Markup Language. Markup
languages tell browsers how to display text and
graphics.
10
XP
HTML is a markup language, not a programming language. Why?

Markup language is different from programming language in that instead of
making the computer act a certain way, it just makes the text and other
elements of the screen display a certain way.

Markup language allow for very little interaction with the user, while
programming languages allow the user to have a lot of interaction.

With most programming languages (such as Java, C++, and Visual Basic)
you begin with a text file, but that is then compiled into machine-readable
computer code file that is virtually impossible for a person to read. This
machine-readable file (somethimes called binary file) is the program or
application file. In the markup language, a simple text file contains both the
content and the markup, and it remains a text file, so a person can easily
read it, even after it is marked up.
11
XP
Web Pages and Web Browsers

A Web page is stored on a Web server, which makes
the page available to users of the Web.

To view a Web page, the user runs a Web browser, a
software program that retrieves the page and displays it.
Name examples of Web Browsers?
Which was the first Graphic Web Browser?
12
XP
W3C

What is W3C?
The World Wide Web Consortium is an industry
consortium that seeks to promote standards for the
evolution of the Web and Web technologies.
Although no one organization dictates the rules or
standards for HTML, the W3C is regarded as the de
facto organization to govern HTML.
In addition to information about HTML standards, the
W3C Web site (w3.org) also includes information
about accessibility, privacy, internationalization, and
new Web development languages and techniques.
13
Hypertext Markup Language
(HTML)
XP

HTML allows Web authors to create documents that can
be displayed across different operating systems.

HTML code is easy to use, that even nonprogrammers
can learn to use it.

HTML describes the format of Web pages through the
use of tags.
 it’s the job of the Web browser to interpret these tags
and render the text accordingly
14
XP
Hypertext Markup
Language (HTML) Continued

HTML has a set of rules, called syntax.
 syntax are a set of standards or specifications
developed by a consortium of Web developers,
programmers, and authors called the World Wide
Web Consortium (W3C)

HTML extensions have been added to support new
features, which have been adopted in subsequent sets
of standards released by the W3C.
 these extensions have provided Web page authors
with more options
15
XP
Beginning of HTML

The first version of HTML was created using Standard Generalized
Markup Language (SGML). Introduced in the 1980’s. SGML is a
strong and highly flexible metalanguage (language used to create
other languages). SGML is device and system-independent,
meaning that it can be applied to almost any type of document
stored in almost any format. While powerful, SGML is also quite
complex; for this reason, SGML is limited to those organizations that
can afford the cost and overhead of maintaining complex SGML
environments. However, SGML can also be used to create markup
languages like HTML, which are tailored to specific task and are
simpler to use and maintain.
16
XP
Markup Languages

Hypertext Markup Language HTML:
HTML is a formatting language used to create Web pages.
HTML defines a Web page through tags, or markups,
which are codes that primarily specify how text displays
and where links lead.
You can create a Web page by inserting HTML tags into a
text file using a basic text editor such as Windows Notepad
or MACs Simple Text.
17
XP
Versions of HTML
This figure presents a history of the various versions of HTML that have been
released by the World Wide Web Consortium (W3C).
18
XP
Web Development

Web designers need to determine which browsers and browser
versions support their web pages.

In the future, Web development is focusing more on XML
(Extensible Markup Language) and XHTML (Extensible
HyperText Markup Language) for developing document content.
 XML combined with style sheets provides the same functionality
as HTML, but with greater flexibility
 XHTML was designed to overcome some of the problems with
competing HTML standards
Activity : Find information on the Internet about XML, XHTML,
DHTML, CSS, WML, and Scripting languages. Write a
paragraph about each Web technology (do not copy and paste).
Which is the most recent version of HTML? What is it new?
19
XP
Markup Languages

XML Extensible Markup Language:
XML is a metalanguage like SGML but without SGML’s
complexity and overhead. XML is a markup language that
uses tags to describe the structure and content of a
document, not the format. XML through predefined or
customized, self-defined tags offers a designer greater
freedom to arrange or present information than HTML. For
example, with XML you can create one link that links to
several URLs. With HTML, one link can point to only a
single URL.
20
XP
Markup Languages

XHTML Extensible Hypertext Markup Language: is a
reformulation of HTML so it conforms to Extensive Markup Language
(XML) rules. By incorporating HTML and XML, XHTML combines
the benefits of the display features of HTML and the stricter coding
standards required by XML.
If you create a Web page in HTML and do not follow HTML coding
standards exactly (for example, by not using an end </p> tag), the Web
browser on your computer still can interpret and display the Web
correctly. Newer types of browsers, such as those for mobile phones or
handheld computers, are not able to interpret HTML code that does not
meet the HTML standards. Because XHTML has such strict coding
standards, it helps ensure that Web pages created in XHTML will be
readable by many different types of applications.
21
XP
Markup Languages

WML (Wireless Markup Language):
WML is a subset of XML. WML is used to design Web
pages specifically for micro browsers such as handheld
computers, PDAs, cellular telephone, and pagers. WML
allows for the displays of the text portion of Web pages.
WML uses Wireless Application Protocol (WAP) to allow
Internet access by wireless devices. Almost all mobile
telephone browsers globally support WML.
22
XP
Markup Languages

DHTML Dynamic HTML:
HTML can be used with other Web technologies to provide
additional Web page functionality. For example, Dynamic
HTML (DHTML) is a term that describes a combination of
HTML tags, cascading style sheets (CSS), and a scripting
language such as JavaScript. DHTML allows users to
create interactive, animated Web pages.
23
XP
Markup Languages

CSS Cascading Style Sheets:
The primary purpose of Cascading Style Sheets is to
control the presentation of the content by applying styles to
such elements as type, margins, positioning, color, and
more. Cascading refers to the order in which the different
styles are applied.
24
XP
Programming Languages

Scripting Languages: are advanced programming languages,
which are utilized to write scripts. Scripts are short programs that
your visitors’ Web browsers run. These programs, when added to
basic HTML documents, make your Web pages dynamic and
interactive, with such features as multimedia, animation, forms that
allow you and your visitors to communicate, and scrolling text. A
programmer would utilize scripting language more often that would
the typical Web designer: Designers, however, can purchase readymade script on CDs or download them from specific Web sites.
25
XP
Programming Languages

JavaScript, Active Server Pages (ASP), Hypertext
Preprocessor (PHP) and MySql are widely used
scripting languages. JavaScript is inserted into an
HTML document to create such elements as date and
time information, forms, animations, messages, and
more. ASP and PHP frequently are utilized for
interactive elements such as forms and dynamically
drawn content from a database. MySql, which is
database server software, often is used for small to
medium sized database-driven Web sites. MySql is
very powerful when utilized with PHP to develop
dynamic Web sites.
26
XP
Guidelines for a Web page author:



Become well-versed in the history of HTML. Unlike other
languages, HTML history impacts how to write your code.
Know your market. Do you have to support older browsers, or have
your clients standardized on a particular browser or browser version?
The answer affects how you write the code for your Web pages.
Become familiar with what different browsers can and can’t do.
Test. If you have to support several types of browsers and several
types of devices, get them and use them to view your documents.
Don’t assume that if your page works in one browser, it will work in
an older version of that same browser. In addition, a given browser
version might even perform differently under different operating
systems.
27
Tools for Creating
HTML Documents

XP
HTML documents are text files, which a text editor such as Windows
NotePad can be used to create.
You can also use an HTML converter or an HTML editor.
HTML converter allows you to create Web pages easily as they have a
Save as Web Page features that converts a document like Microsoft
Word doc, Power Point doc, or Excel doc into an HTML file by
automatically adding the HTML tags into the document. takes text in
one format and converts it to HTML code. Each of these applications
also provides the capability of inserting hyperlinks, drop-down boxes,
option buttons, or scrolling text to the Web page.

28
Tools for Creating
HTML Documents
XP
HTML editor like Macromedia HomeSite or BBEdit. It Is a program
that provides basic text-editing functions, as well as more advanced
features such as color-coding for various HTML tags, menus to
insert HTML tags, and spell checkers.
 WYSIWYG (What you see Is What you get) is a program that
provides a graphical user interface that allows a developer to
preview the Web page during its development. It creates the HTML
code for you as you add elements to the Web page.
 Microsoft FrontPage, Macromedia Dreamweaver , WYSIWYG
editor, and Software HotDog ; software application for creating web
pages.
Activity : Find information on the Internet about HTML converters
HTML editors and WYSIWYG editor. Name 2 or 3 examples of each
one.(Write one page paper do not copy and paste).

29
XP
Creating an HTML Document
It’s always a
good idea to
plan the
appearance of
your Web page
before you start
writing code.
heading 1
image
paragraph
horizontal line
list
heading 3
bold and italic
text
30
XP
HTML Syntax
Document content is what the users sees
on the page, such as headings and
images.
 Tags are the HTML codes that control the
appearance of the document content.

 tag
is the name of the HTML tag
 attributes are properties of the tag
 document content is actual content that
appears in the Web page
31
XP
What Is HTML? (Cont.)

HTML = HyperText Markup Language.
Markup languages tell browsers how to
display text and graphics.

HTML uses tags surrounded by <angle
brackets> to pass commands to the
browser.



<B> To Bold Text </B>
The first set of tags will bold text.
The second set of tags will italicize
text.
Tags usually appear in pairs, with an
opening tag <B> and a closing tag
</B>.
<I> To Italicize Text </I>
32
XP
HTML Tags

To insert comment:
<!-- comments -->
Is use to add notes to your HTML code.
Comments are not required and are not
displayed or used by the Web browser, they
are useful in documenting your HTML code
for yourself and others.
33
XP
HTML Tags

Tags can be one-sided or two-sided.
 two-sided tags contain an opening tag <b> that tells
the browser to turn on a feature and apply it to the
contact that follows, and a closing tag </b> that turns
off the feature
 one-sided
tags are used to insert noncharacter data
into the Web page, such as a graphic image or video
clip <tag attribute>

Earlier versions of HTML allowed designers to omit
some closing tags but this practice is no longer
recommended. XHTML requires both an opening
and closing tag.
34
XP
HTML Tags

HTML allows you to enter element names in
either uppercase or lowercase letters. Thus you
can type either <p> or <P> to indicate
paragraph. However, since XHTML strictly
requires lowercase tag names, we will follow
that convention, and strongly recommend
that you do likewise so that your Web pages
will be consistent with current and future
standards.
35
XP
HTML Tags
One-sided tag contains no content.
HTML general syntax is: <element>
However XHTM does not support this form, so
this is the new syntax including the space and
the closing slash at all times.
<element />
Elements that employ one-sided tags are called
empty elements since they contain no content.

36
XP
Deprecated tag/attribute

What's a deprecated tag / attribute?
Older HTML tags and attributes that have been superseded
by other more functional or flexible alternatives (whether as
HTML or as CSS) are declared as deprecated by the W3C
- the consortium that sets the HTML standards.
Browsers should continue to support deprecated tags and
attributes, but eventually these tags are likely to become
obsolete and so future support cannot be guaranteed.
37
XP
Deprecated Tags
38
XP
Nesting Tags and Attributes

Tags should be nested when more than
one tag is used to mark a set of text, as
in this example.
<B> <I> Properly Nested Tags </I></B>

Attributes add information to tell the
browser exactly how to implement a tag.
This attribute changes the width of a
horizontal line.
<HR size=“7” />
Tag
Attribute
39
Step-by-Steps 8.1 & 8.2
XP
Document Tags

HTML Document:






Tell the browser which
HTML or XHTML version
and type of document uses.
Starts a Web page.
Places information in title
bar.
Any text or graphics placed
between the BODY tags will
display in a Web browser.
A few tags, like <hr>, do not
need a closing tag.
These tags end the Web
page.
<!DOCTYPE>
<html>
<head>
<title>Your Web Page’s Title </title>
</head>
<body>
<b> To Bold Text </b>
<i> To Italicize Text </i>
<b> <i> Properly Nested Tags </i>
</b>
<hr /> Creates Horizontal Line
</body>
</html>
40
XP
HTML Tags
To create an HTML document, you begin by inserting a
<!DOCTYPE> tag. It is used to tell the browser which
HTML or XHTML version and type the document uses.
The W3C supports three document types for HTML or
XHTML: strict, transitional, and frameset.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>

To make our HTML files compliant with XHTML standards, always enter tags in
lowercase (with exception of the <!DOCTYPE> tag, which is always
uppercase).
41
XP
HTML Tags



The strict document type is specified when you want to prohibit the
use of deprecated tags. (Deprecated tags are tags that the W3C
has earmarked for eventual removal from their specifications,
because they have replaced those tags with newer, more functional
tags.)
The transitional document type allows the use of deprecated tags.
The frameset document type, which is used to support frames on a
Web page, also allows the use of deprecated tags.
The <!DOCTYPE> tag includes a URL that references a Document
Type Definition found on the W3C Web site. A Document Type
Definition (DTD) is a file containing definitions of tags and how they
should be used in a Web page.
42
XP
Initial HTML Tags in Notepad
Your text editor may not display the file extension
in the title bar. This is okay.
<html> tag
indicates that
this file is
written in
HTML
<head> tag
contains
information about
the Web page
<title> tag contains
the Web page title
Page content will
go between the
<body> tags
43
XP
Document Tags
<head> and <body> tags are used to separate the
document into two parts, a head and a body.

The head (that material inside the <head> tags)
will not be visible to the user, except for the title.
However, this space can be used to insert
information about the Web pages that will help
users find your page, such as indexing words
called metadata. When search engines are
classifying pages, they often use metadata to help
them recognize what the Web page is about.
44
XP
Meta Tags
Meta elements are placed in the document’s
head and contain information about the
document that may be of use to programs that
run on Web servers.
<meta name=“text” content=“text” scheme=“text”
http-equiv=“text” />

Where the name attribute specifies the name of a property for the page,
the content attribute provides a property value, the scheme attribute
provides the format of the property value, and the http-equiv attribute
takes place of the name attribute for some Web servers.
45
XP
Meta Tags

Some Web sites, like Google, use search engines to create list of
Web pages devoted to particular topics. You can give extra weight
to your Web page by including a description of the page and a list of
keywords in <meta /> tags at the top of the document.
<meta name=“description” content=“Chemistry Class Web page” />
<meta name=“keywords” content=“Chemistry, school, Edmonton,
science” />
Note that a document’s head can contain several meta elements.
46
The Initial HTML File in
Internet Explorer
XP
the title you
entered between
the <title>
tags
address box
indicates the
name and
location of the
HTML file
page content will
appear here
You should occasionally
view the formatted page
with different Web
browsers to check
compatibility, verify
that there are no syntax
errors, or other
problems.
47
XP

The <body> tags surround the part of your Web page that is
visible to the public in the browser window. Most of the
content of your Web pages will be inside the <body> tags.
Attributes:
To change background color
<body bgcolor=“blue”>
To set up an image to be the background image
<body background=“mybackgroundImage.jpg”>

48
XP
Formatting Tags

These tags work to format
text in interesting ways:
 The paragraph tag adds a
double space between
paragraphs.
 The break tag adds a
single space between
paragraphs.
 The width and size
attributes make the
Horizontal Rule tag
change size and shape.
<p> The Paragraph Tag </p>
<br /> The Break Tag
<hr width=“50%” size=“5” />
49
XP
My name is Mrs. Hernandez
Attributes for formatting tags:
<p style=“text-align: center”>My name is Mrs.
Hernandez</p>
To center the text.

To get the text
Like this
<p style=“text-align: center”>To get the text<br />like
this</p>
To center the text and break it in two lines.
50
XP
Text Style Tags

These tags, like
formatting tags, modify
the look of words on a
Web page:
 The Italics Tag
 The Bold Tag
 The Underline Tag
 The FONT Tag
with attributes
<i> Italics </i>
<b> Bold </b>
<u> Underline </u> Deprecated Tag
<ins> Underline </ins>
<font face=“Arial, Helvetica”> </font>
<font face=“Arial” color=“green”>Sample
Text </font>
Sample Text
51
XP
Creating Heading Tags
To define a heading, use the syntax
<hy>content</hy>
Where y is a heading number 1 through 6, and
content is the content of the heading.


HTML supports six levels of headings,
numbered <h1> through <h6>, with <h1> being
the largest and most prominent.
Headings are always displayed in a bold font.
52
Headings As They Appear
in the Browser
XP
<h1>
<h2>
<h3>
53
XP
Paragraph Text in the Browser
54
XP
Six Heading Levels
This figure
illustrates the
general
appearance of the
six heading styles.
Your browser
might use slightly
different fonts and
sizes.
55
XP
Inserting an Inline Style
To use styles to control the appearance of an
element, such as text alignment, you use the
style attribute.
<element style=“style1: value1; style2: value2,
style3: value3;…”>
Where style1, style2, style3,… are the name of the
styles, and value1, value2, value3,…are the values
associated with those styles.

56
XP
Applying the Text-Align Style
The text-align style tells the browser how to horizontally
align the contents of an element. It has four values: left,
right, center, and justify; the value “justify” tells a browser
to spread the content to touch both the left and right
margin of the element.
<h1 style=“text-align: center”> Aligned to the Center</h1>

Most browser also support the align attribute but it is a
deprecated HTML tag.
<h1 align=“center” > Aligned to the Center</h1>
57
XP
Deprecated Tags
58
XP
Creating Lists

HTML supports three kinds of lists:
 an
ordered list, which is used to display
information in a numeric order
 an unordered list, which list items are not
listed in a particular order i.e. bullets
 a definition list, which is a list of terms, each
followed by a definition line that is typically
indented slightly to the right
59
XP
Creating Lists
Ordered List: The elements appear in a
particular sequential order. <ol>
<li>Math</li>
<li>Science</li>
<ol>
<li>Art</li>
</ol>
<li>item1</li>
Output
<li>item2</li>
1. Math
…
2. Science
3. Art
</ol>
 Where item1, item2, etc. are items in the list.
Every <li> tag mark the content for a single list
item.

60
XP
Creating Lists
Unordered List: The elements do not appear in
<ul>
any special order.
<li>Math</li>
<li>Science</li>
<ul>
<li>Art</li>
</ul>
<li>item1</li>
Output
<li>item2</li>
• Math
…
• Science
• Art
</ul>
 Where item1, item2, etc. are items in the list.
Every <li> tag mark the content for a single list
item.

61
XP
Applying a Style to a List

If you don’t want your list items marked with either
numbers or bullets, you can specify a different marker by
applying the following style to <ul> or <ol>.
list-style-type:type
62
XP
Applying a Style to a List

For example, to create the following list:
a. Math
b. Science
c. Art
you would enter the HTML code:
<ol style=“list-style-type: lower-alpha”>
<li>Math</li>
<li>Science</li>
<li>Art</li>
</ol>
63
XP
Applying a Style to a List
You can also substitute a graphic image for a list marker
by using the style:
list-style-image: url(file)
where file is the name of the image file containing the
marker.
you would enter the HTML code:

<ul style=“list-style-image:url(flask.jpg)”>
<li>Math</li>
<li>Science</li>
<li>Art</li>
</ul>
64
XP
Applying a Style to a List
Each list item is itself a block-level element. By default,
most browsers place each list marker outside of its
corresponding block; however you can change this by
using the following style:
list-style-position: position
where position is either “outside” (the default) or “inside”.
marker.

65
XP
Applying a Style to a List
The three previous styles can be combined in the
following single style:
list-style: type url(file) position
where type is one of the marker types, file is the location
of a graphic file that can be used for a marker, and position
is either “inside” or “outside”.
<ul style=“list-style:square url(flask.jpg) inside”>
<li>Math</li>
<li>Science</li>
<li>Art</li>
</ul>
66

XP
Deprecated Tags
67
XP
Creating a Definition List

HTML supports a third list element, the definition list, which contains
a list of definition terms, each followed by a definition description.
The syntax is:
<dl>
<dt>term1</dt>
<dd>definition1</dd>
<dt>term2</dt>
<dd>definition2</dd>
…
</dl>
where term1, term2 etc. are the terms, and definition1,etc. are the
definitions of the terms.
68
XP
Entering Heading Tags and Text

A block-level element contains content
displayed in a separate section within the page,
setting it off from other blocks. Paragraph and
headings are examples of block-level elements.

An inline element is part of the same block as
its surrounding content-for example, individual
words or phrases within a paragraph.
69
XP
Inserting an Inline Style
By default, the content of a heading are aligned with the
left margin of the page. To use styles to control the
appearance of an element, such as text alignment, you
use the style attribute.
<element style=“style: value1; style2: value2; style3:
value3;…”>
Where element is the element’s name, style 1, style2,
style3 and so forth are the name of styles, and value1,
value2, value3 and so on are the values associated with
those styles. Styles specified as attributes in a tag are also
referred to as inline styles.

70
XP
Heading with an Inline Style

<h1 style=“text-align: center”>Chemistry Class</h1>
71
XP
Formatting your Text
<body>
<h1 style="text-align: center">Mr. Dube's chemistry classes</h1>
<h2 style="text-align: center">at Robert service High school</h2>
<p>welcome to the Robert Service High school Chemistry web page.
Here you'll learn more about our chemistry classes and our
pol ci es . </p>
<h2>Chemistry classes</h2>
<ul style="list-style-type: square")
<li>conceptual chemistry: An introductory course, requiring basic
math but no algebra</li>
<li>Chemistry I: An introductory course, requiring solid algebra
skills</li>
<li>Advanced Placement chemistry: An advanced course requiring a
grade of A or e in Chemistry I</li>
</ul>
72
XP
Output
Mr. Dube's Chemistry Classes
at Robert Service High School
Welcome to the Robert Service High School Chemistry Web page. Here you'll learn more about our chemistry
classes and our policies.
Chemistry Classes
•
•
•
Conceptual Chemistry: An introductory course, requiring basic math but no algebra
Chemistry I An introductory course, requiring solid algebra skills
Advanced Placement Chemistry: An advanced course requiring a grade of A or B in Chemistry I
73
The Paragraphs Displayed
by the Browser
XP
Remember:
HTML formats
text only through
the use of tags
and ignores such
things as extra
blank spaces,
blank lines, or
tabs.
four grading
paragraphs
are not
separated
74
The Grading Text Separated
into Paragraphs
XP
To add space
between
paragraphs,
you use the
paragraph tag
<p>…</p>.
text is now
separated
into four
paragraphs
75
Using Other Block-LevelXP
Elements
HTML supports several other block-level elements that
you may find useful in your Web pages. For example
HTML supports the address element to indicate
contact information.
Most browsers display an address element in an
italicized font. You can indicate long quoted passages
by applying the blockquote element. A browser
encountering this element typically indents the quoted
text. Next Figure describes additional block-level
elements and shows how they look in most browsers.
76
XP
Block Level Elements
77
XP
Creating Character Tags
HTML also lets you format individual
characters.
 A tag that you apply to an individual
character is called a character tag. There
are two types of character tags:

 logical
character tag
 physical character tag
78
XP
Inline Elements
79
XP
Common Logical Character Tags
80
XP
Inserting a Graphic

Images can be displayed in two ways: as inline images
or as external images.
 an inline image displays directly on the Web page and
is displayed when the page is accessed by a user
 an inline image can be placed on a separate line in
your HTML code, or it can be placed directly within a
line of text
 inline images should be in one of two file formats: GIF
(Graphics Interchange Format) or JPEG (Joint
Photographic Experts Group)
81
XP
Inserting a Graphic Continued
 an
external image is not displayed with the
Web page, the browser must have a file
viewer, which is a separate program that the
browser launches when it encounters an
external image file
 external images are represented by an icon
that a user clicks to view the image
 external images are not limited to GIF or
JPEG formats
82
The Image File as it Appears
in the Browser
XP
<p style=“text-align: center”>
<img src=“dube.jpg”>
…
83
XP
Tags to Insert Images

The IMaGe tag requires the
use of attributes:


<p style=“text-align: right”>
<IMG src=“sign.jpg”>
Src= searches for the
image.
sign.jpg is the name of
this file, which is then
searched and displayed in
the Web browser.
84
XP
Special Characters


Occasionally you will want to include entities or special
characters in your Web page that do not appear on your
keyboard. For example:
 registered trademark symbol ®
 copyright symbol ©
HTML supports the use of character symbols that are
identified by a code number or name.
85
XP
Special Characters in the Browser
This figure shows an example of the code “Welcome to Mr. Dub&#233’s
Web site”, which accented the é in his last name..
accented é added
to last name
86
XP
Inserting Horizontal Lines
A horizontal line can improve the
appearance of a Web page.
 The syntax for creating a horizontal line is:

<hr align=“align” size=“size”
width=“width” color=“color”
noshade>
87
XP
Inserting Horizontal Lines

The HTML horizontal syntax includes the following:
 align specifies the horizontal alignment of the line on
the page (center, left, or right)
 size specifies the height of the line in pixels or
percentage of the screen width
 width indicates the width of the line in pixels or
percentage of the screen width
 color indicates the color of the line
 noshade specifies that the browser display a solid
line
88
XP
Different Line Styles
size=12
width-100%
size=6
width-50%
size=3
width-25%
size=1
width-10%
<hr align=“center” size=“12” width=“100%”>
<hr align=“center” size=“6” width=“50%”>
<hr align=“center” size=“3” width=“25%”>
<hr align=“center” size=“1” width=“10%”>
You can use line styles
to improve the
appearance of your
Web page.
89
XP
Horizontal Line Added to the Page
horizontal line
90
XP
Tags for HyperLinks

The Anchor tag <A> creates
hyperlinks and also requires
attributes.
 This hyperlink searches
for Disney on the Web.
<A href=“www.disney.com”>Disney</A>
The second example
loads a page from the
local computer’s hard
drive.
 href= searches for the
<A href=“Friends.html”>Friends</A>
Web page online.
 The closed </A> tag stops
underlining hyperlinks.
 Disney and Friends is
what the user clicks.
91
XP
Testing Your HTML

Stop and evaluate your HTML
formatting and hyperlinking
tags:
 Alpha testing is the first
series of tests that
programmers usually do
themselves to find obvious
mistakes.
 Beta testing requires a
team of testers who try to
“break” the software.
92
Tips for Good HTML
Code
XP
• Use line breaks and indented text to make your HTML file easier
to read.
• Insert comments into your HTML file to document your work.
• Enter all tag and attribute names in lowercase.
• Place all attribute values in quotes.
• Close all two-sided tags.
• Make sure that nested elements do not cross.
• Use styles in place of presentational attributes whenever
possible.
• Use logical elements to describe an element’s content. Use
physical elements to describe the element’s appearance.
93
XP
Summary
Learned about the history and structure of
the World Wide Web.
 Introduced the basic principles of Web
documents and about the HTML language.
 Learned how to create a Web page using
basic layout tags.
 Learned how to create paragraphs,
headings and lists (both ordered and
unordered).

94
XP
Summary Continued











Worked with character tags and special characters.
Introduced to working with graphics by creating a horizontal line and
an inline graphic image.
To explain the basic syntax of HTML.
How to do simple markup of a text document in HTML.
To use document tags (HTML, HEAD, BODY, and TITLE).
To use formatting tags (P, BR, and HR) with some of their attributes.
To use text styles tags (I, B, U, and FONT) with some of their
attributes.
To use heading and listing tags for organizing the document.
To use the image tag (IMG) with its attributes.
To use the anchor tag (A) with its main attribute to link to another
Web page.
How to test your HTML documents.
95