Lesson 1

Introduction to HTML
Lesson 1: HTML Basics
Lesson 1
HTML Basics
Lesson 1 - Basics of HTML
Copyright 1999, Pinnacle Software Solutions Inc.
Lesson Objectives
What is HTML
HTML Editors
HTML Tags
More on Tags
Elements & Attributes
Minimal HTML Document
What is HTML?
Hypertext Mark-up Language.
HTML is an SGML DTD; Standard
Generalized Markup Language and
Document Type Definition.
Language used for World Wide Web
documents; in ASCII format.
HTML was invented by Tim Berners-Lee for the Laboratory of Particle Physics
(CERN) in Geneva. Initially, the Standardized General Markup Language was
used to create Internet documents. However, researchers who wanted to share
their papers over the Internet found it quite cumbersome and complex to code in
SGML; thus, HTML was developed.
HTML is not a programming language. It is referred to as a DTD Document
Type Definition language. HTML describes how to mark up text using
formatting options. Therefore, HTML documents can be created in a simple textediting program like Windows Notepad. HTML files must be saved with a.htm
or .html extension.
HTML is interpreted for visual display by a web browser such as Netscape
Navigator or Microsoft Internet Explorer. Once an HTML file has been coded and
saved, it has to be viewed in a browser to see its fully realigned output.
HTML Editors
WYSIWYG (what you see is what you
get) editors.
Help in designing HTML documents
visually.
MS FrontPage, Claris Home Page,
Adobe Page Mill, Symantec Visual Page,
etc.
HTML editors are like helper programs. They assist designers with the coding of
web pages. However, HTML editors come in all shapes and sizes in terms of
their capabilities and the extent of their help to the designer.
For instance, a program like Allaires HomeSite allows you to do most of the
coding while providing assistance with the syntax and typing. On the other hand,
with a program like Microsoft FrontPage, even a novice can create an entire web
site with little or no knowledge of HTML.
Therefore, web site designers can decide the level of control they are
comfortable with and which features they will utilize the most often.
Elements of HTML
An element is a fundamental component
of the structure of a web page.
For example:
Head
Body
Table
Paragraph
List
The various components of an HTML document are known as elements.

Available to us when creating a web site, most of these parts are optional and
used only as needed.
HTML Tags
An HTML tag is used to mark elements
in a document for your browser to
display in a certain format.
HTML tags are denoted by a left angle
bracket: <, a tag name, and a right
angle bracket.
Tags are generally paired (e.g. <Head>
</HEAD>).
The end tag is just like the start tag
except that it has a slash preceding the
tag name.
Elements are defined with tags, which are interpreted and displayed in a web
browser window. The syntax/format for writing HTML tags is as follows:
Opening Tag: <Tag Name>
Content: The tag will apply to this text.
Closing Tag: </Tag Name>
For example:
<HTML>
Allthecontentsofthedocumentgointhisspacebeforethe
closingHTMLtag.
</HTML>
Notes on HTML Tags

HTML is not case-sensitive i.e., <HEAD>
has the same effect as <hEaD>.
Not all HTML tags are supported by all
world wide web browsers.
If a browser does not support a tag, it will
simply ignore it.
As stated above, HTML tags are not case-sensitive. So, they can be written in
either upper or lower case as preferred by the web designer. Nonetheless, the
content within the tags, file names, and path names, are all case-sensitive. This
will be covered in further detail in the next two lessons.
Whenever a browser encounters an HTML tag that it does not support, it simply
ignores it. However, any text between the tags will be displayed in the browser
window. This feature is beneficial because when the browser sees an unfamiliar
tag, it does not give an error message. It shows the content between the tags
and continues to interpret the rest of the document.
Elements & Attributes

Some elements may also have attributes.
An attribute is additional information that is
included in the start tag.
Example: The <font>tag may include font
type <font type=Arial>and font color
<font size=+2>in the start tag.
Many of these attributes are optional.
Attributes are a way to modify the appearance or functionality of an HTML tag

(element). Attributes must be used with their respective elements. For instance,
the TYPE attribute can be used with the FONT tag but not with the HTML tag.
If attributes are not included in the tag, the browser simply uses its default
settings.
The Minimal
HTMLTags
Document
Main HTML
Each
HTML
- Alerts
the browser
that the
HTML
document
should contain
atfile
contains
HTML-coded
information.
least the tags
listed below:
<HTML>
HEAD -, <
Identifies
the
first, part
of your
HEAD>, <
TITLE>
<BODY>
that
contains the title.
indocument
the following
order:
<HTML>
TITLE - Contains your document title &
is displayed in the title bar at the top of
<HEAD><TITLE></TITLE></HEAD>
the browser.
<BODY></BODY>
BODY - Contains the displayed content
</HTML>
of your document.
Lesson
Lesson 11 -- Basics
Basics of
of HTML
HTML
Copyright
Copyright1999,
1999,Pinnacle
PinnacleSoftware
SoftwareSolutions
SolutionsInc.
Inc.
Practice Exercise
Create a minimal HTML document, which is also referred to as a template:
Before we start on our first page, create a folder in which to organize all these
files. Go to Windows Explorer and in the My Documents folder, create a folder
as yourname-html.
1. Open Notepad (or another text-editor)
2. Type in the following:
<HTML>
<HEAD>
<TITLE>MyFirstPage</TITLE>
</HEAD>
<BODY>
Hi...Welcometomywebsite!!
</BODY>
</HTML>
3. Save the document as default.htm in your folder.
4. Open your web browser (Netscape Navigator or Internet Explorer.)
5. Open default.htm in the browser.
-In IE, go to the File Menu, select Open, click on Browse, locate your folder,
and double-click on the file default.htm to open it.
-In Netscape, go to the File Menu, select Open, click on Choose File, locate
your folder, and double-click on the default.htm to open it.
The main HTML tags are required on all HTML documents (with just one
exception which will be covered later). It is a wise practice to create a document
as you have just done in the previous exercise including all of these tags and
then to save the file as template.html. The template can then be opened and
saved as a new document whenever you choose.
Summary
Not a programming language, HTML stands for Hypertext Mark-up Language.
It is used for creating documents for the World Wide Web.
HTML editors are generally WYSIWYG editors. Some examples are MS

FrontPage, Claris Home Page, Adobe Page Mill, and Symantec Visual Page.
HTML tags are used to mark elements in a document for browsers to display
in a certain format. The popular web browsers support most HTML tags.
Elements are the fundamental components of an HTML document. Examples

include Head, Body, Table, Paragraph, and List.
Attributes can be assigned and changed to modify the appearance or

functionality of an HTML tag (element).
All HTML documents should include at a minimum the following tags:

<HTML>
<HEAD>
<TITLE>
<TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Exercises
1. Why is HTML Called Formatting Language?

2. Surf some popular sites like Amazon.com, Yahoo.com, Microsoft.com and
i.
Examine the web pages
ii.
View the source code (At this moment, the code of the html pages may
seem strange, but will give you an idea, how HTML is useful in making
attractive web pages).
3. What are HTML Tags?

Lesson 1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lesson 1

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to HTML

Lesson 1: HTML Basics

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Copyright 1999, Pinnacle Software Solutions Inc.

The various components of an HTML document are known as elements.

Lesson 1: HTML Basics

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Notes on HTML Tags

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Lesson 1: HTML Basics

Elements & Attributes

Lesson 1 - Basics of HTML

Copyright 1999, Pinnacle Software Solutions Inc.

Attributes are a way to modify the appearance or functionality of an HTML tag

Lesson 1: HTML Basics

Lesson 1: HTML Basics

Lesson 1: HTML Basics

HTML editors are generally WYSIWYG editors. Some examples are MS

Elements are the fundamental components of an HTML document. Examples

Attributes can be assigned and changed to modify the appearance or

All HTML documents should include at a minimum the following tags:

Lesson 1: HTML Basics

1. Why is HTML Called Formatting Language?

Das könnte Ihnen auch gefallen