html_1

Download Report

Transcript html_1 

HTML Overview
Basic Structure
How The Web Works



When people want to see your web site
the connect to it with their browsers,
typing in your URL.
The browser connects with a server
that contains your page.
The browser sends a command to the
server, asking for the page.
How the Web Works




The server sends the page, actually a file,
containing code in a language called HTML
The browser reads the HTML and finds
references to all other objects on that page
The browser retrieves each object from the
server
The browser assembles the page according to
the instructions in the HTML and displays it
for the viewer
World Wide Web Consortium




Organization that recommends Web
standards
NOT a governing board!
Comprised of industry leaders
URL:
http://www.w3c.org/
What is HTML?





Hypertext Markup Language
Made up of tags (instructions)
Tags tell the browser how to display the
content of the document.
HTML is NOT a programming language
HTML IS a markup language
Why Should I Know HTML?

There are a lot of good web editors out there






Dreamweaver
FrontPage
PageMill
But, no web editor will give you absolute
control over how your pages will look.
Knowing HTML will let you make changes in
these editors
Usually you will find that it is easier to create
pages to your liking using straight HTML.
HTML Tags



The control characters that separate
HTML from ordinary text are “<“(left
bracket) and “>”(right bracket).
These brackets enclose the HTML tag.
The generic form of a tag is:
<tag_name>.
HTML Tags



HTML tags are NOT case sensitive.
<IMG> is the same as <img>
Spaces are never allowed between the
initial “<“ and the name of the tag.
There can be spaces at the end of the
tag.
Legal: <br > not legal: < br>
Types of Tags in HTML

Two Types:

Tag Containers



beginning tag <tag>
ending tag </tag>
EXAMPLE:
I feel like <b>screaming</b> today.
(Makes the word “screaming bold)

Stand-Alone tags


Single tag that works by itself
EXAMPLE:
<br>
(Inserts a line break)
Attributes




Attributes are added within a tag to extend or
modify the tag’s action
You can add several attributes within a single
tag.
Tag attributes, if any, belong after the tag
name, each separated by one or more space.
Example:
<body bgcolor =“#ffccff”
text =“#336699”>
HTML Document Structure
Basic Structure:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>
Code writing:

Commenting!
<!-- This is a comment -->




Non-executable lines used to clarify coding
Ignored by the browser
Indentation and white space help to
give structure & clarity to the code.
File names are case-sensitive!
Document Structure Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>

<!DOCTYPE> is a stand-alone tag that tells the
browser how to interpret your tags (via a
document type definition).
Document Structure Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>

<HTML>…</HTML> is a container tag that
encloses the entire HTML document – lets the
browser know the document is composed in HTML.
Document Structure Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>

<HEAD>…</HEAD> is a tag container that
contains tags for the page title, JavaScript, CSS
and other information about the web page.
Document Structure Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>

<TITLE>..</TITLE> The document title is
crucial to its accessing and indexing by
search engines.
Document Structure Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3c.org/TR/HTML4.01/strict.dtd>
<html>
<head>
<title>Document Name</title>
</head>
<body>
Document Contents
</body>
</html>

<BODY>…</BODY> The body tag encloses
all other tags that create the content of the
web page.
Other Document Structure Tags




<base> - Stand-alone tag used to
establish the page’s base location
<link> - Stand-alone tag used to define
a relationship between the current page
<script> - Stand-alone tag used to
include JavaScript or VBScript
<style> - Stand-alone tag used to
include an embedded stylesheet
The Meta Tag


Stand-alone tag
Provides information about a page:




Two types:



author
copyright
description
name
http-equiv
Both types MUST have a CONTENT attribute!
<meta> Tag Example: Refresh
<meta
http-equiv=“refresh”
content=“15; URL=http://…html”>
This use of the <meta> tag will re-direct
a browser to a new page in a specified
amount of seconds.
<meta> Tag Example: Language
<meta
http-equiv=“content-language”
content=“en”>
This use of the <meta> tag will
specifies which language is used in the
document.
<meta> Tag Example: Author
<meta
name=“author”
content=“Mark Twain”>
This use of the <meta> tag will identify
the author of the document.
<meta> Tag Example: Description
<meta
name=“description”
content=“This web page is about
the cryptozoology. It is focused
on the continuing search for the
elusive Yeti.”>
This use of the <meta> tag will give a
brief description of the contents of the
page. Useful for search engines.
<meta> Tag Example: Keywords
<meta
name=“keywords”
content=“Yeti, cryptozoology,
Nepal, Himalayas, Buddhist Monks,
abominable snowman”>
This use of the <meta> tag will provide
keywords describing the web page.
Useful for search engines.
<meta> Tag Example: Robots
<meta
name=“robots”
content=“index, nofollow”>
This use of the <meta> tag will instruct
search engines how to index the site.
Useful for search engines.
Values:
index – add page to engine index
noindex – don’t add page to engine index
follow – follow links contained in page
nofollow – don’t follow links contained in page
<meta> Tag Example: Transition
<meta
http-equiv=“Page-Enter”
content=“revealTrans(Duration=2.0,
Transition=12”>
This <meta> tag will show “special
effect” transitions from one page to
another. Not supported by all browsers!
See the following for info:
http://www.sternbergh.com/Meta.html
Nesting Tags




An HTML document is made up of a sets of
“nested” tags.
“Nesting tags” are HTML tags placed inside
other container tags.
An entire HTML document is nested within
the <html>…</html> tags.
Both beginning and ending tags of the
enclosed tag must be completely contained
inside the applied tag.
Nesting Tags

Example:
HTML is <b><i> FUN</i></b>

A common mistake is to overlap the
tags:
HTML is <b><i>FUN</b></i>

This will cause problems with the way your
text is displayed
Carriage Returns in HTML


Browsers will not make distinctions between
end of line (return) and spaces within your
HTML code.
Text will wrap until it encounters something
to format the page:




<p>..</ p> (Paragraph)
<br> (Line Break)
<hr> (Horizontal Rule)
<h1>..</h1> (Heading)
Headings


Heading tags are useful in adding interest
and helping to make text more easily read.
Heading always include a number 1-5 which
identifies the size of the text.


<h1>…</h1> is the largest
<h5>…</h5> is the smallest
Example:
<h3>Welcome to N241</h3>

Horizontal Rule


Inserts a horizontal line across the page
Two Attributes



Size: How thick will the rule be?
Width: How far will the rule stretch across
the screen?
Syntax:
<hr size=“4” width=“85%”>
Lists




An excellent way to organize
information on a web page is through
lists.
Two types: ordered and unordered
Ordered lists are numbered
Unordered lists are bulleted.
Ordered Lists
Example:
Things to do today:
<ol>
<li>call mom</li>
<li>pay gas bill</li>
<li>pick up laundry</li>
</ol>
Ordered Lists



The <ol>…</ol> are the tags used to enclose the list
<li>…</li> is used to specify list items.
You can start the list at any number


<ol start = 25>
There are 5 possible type attribute values:





1- numbers
A – upper case letters
a – lower case letters
I- upper case roman
i- lower case Roman
Unordered Lists



The <ul>…</ul> encloses the list
<li>…</li> specify the list items
Example:
I have 2 cats named
<ul>
<li>Jasper</li>
<li>Lilly</li>
</ul>
Unordered Lists

<ul>’s have 3 type attributes



<ul type = “disc”>
<ul type = “circle”>
<ul type = “square”>
Formatting Text


<p>…</p> Tags are used to create
paragraphs. These tags will start a new
line, separated from the previous text
with a blank line.
<br> creates a line break, similar to
hitting the carriage return on a
typewriter.
Two Methods of Aligning Text

Use the align attribute of <p> tag:
<p align=‘center’> … </p>


Deprecated
Use the align attribute of the <div> tag:
<div align=‘center’> … </div>


Preferred
Similar to <p>, <div> is also a block-level
tag; it will show a blank line above and below
any text enclosed in it.
The Font Tag
Contains attributes to specify text size
and color.
<font color =“#ff0000”
size = 5>


Size attribute can range from 1-7
3 is the default.
Other Tags



<b> …</b> bolds text
<center>…</center> centers text
<hr> creates a horizontal line


Attributes: align, color, size, width
<i>…</i> italicizes text
Horizontal Rules



Adds a graphic line to a page
Tag: <hr> (stand-alone tag)
Attributes:





align – Alignment of the rule
noshade – Rule is displayed as a solid color line
size – Thickness of rule (in pixels)
width – Number or percentage representing how
far the rule will stretch across the page
Example:
<hr width = ’85%’>
Displaying Images


Images are separately loaded files which are
displayed in a web page via the <img> tag
Ways images are used:





As
As
As
As
simple graphics
links
imagemaps
spacing tools
Accepted image formats:



.GIF
.JPG
.PNG
The <img> Tag


Stand-alone tag
Attributes:


src
align





alt
left
middle
right
top






border
height
width
longdesc=url
name
usemap=url
<img> Tag Example

Example:
<img src=“images/globe.gif”
border=0
width=65
height=65
alt=“Picture of the earth”>
Creating Links



“A link is a connection from one web resource to
another.” – HTML 4.01 Specification
Created using the anchor tag <a>
Types of links:






Other HTML pages
Images & other media files
E-mail addresses
Fragments of web pages
FTP servers
Telnet sessions
The <a> Tag


Tag container - <a> … </a>
Attributes:




href=url – identifies the Web page destination to
which the link is made
name=text – identifies a fragment in a Web page
to which other <a> tags will link
id – gives the anchor a unique name in the
document
target – specifies window or frame where the link
should be opened
Creating a Simple Link

To create a simple link with text:
My favorite search engine is
<a href=‘http://www.yahoo.com’>
Yahoo!</a>.

Do NOT put spaces or line breaks between
the end of the text and the </a> closing tag.
Doing so with extend the link.
Using an Image as a Link

To use an image as a link:
<a href=‘http://www.yahoo.com’>
<img src=‘images/yahoo.gif’
border=0></a>

Do NOT put spaces or line breaks between
the end of the <img> tag and the </a>
closing tag. Doing so with unnecessarily
extend the link.
To Open a Link in a New Window

To open a link in a new window:
My favorite search engine is
<a href=‘http://www.yahoo.com’
target=‘_blank’>
Yahoo!</a>.

Use this syntax sparingly – it can get
annoying for your users.
Linking Page Fragments

To create a page fragment:
<a name=‘bio’></a>
I was born near Chicago in …

To link to an internal fragment:
<a href=‘#bio’>
My Biography</a>

To link to a fragment on another page:
<a
href=‘http://www.si.com/index.html#ski’>
Tips for Skiing the Midwest</a>
Debugging HTML


You can use any one of several online
HTML validators
Dr. Watson is highly recommended:
http://watson.addy.com/
Naming Files & Editors to Use:




Any text editor can be used, e.g.
Emacs.
Save your file with .html extension, e.g.
Index.html
Save it in straight ASCII format!
To test the file locally, use a browser
(File – Open – Browse)
Sources:




Web Design in a Nutshell by Jennifer
Niedherst.
Lecture notes by Andy Harris
Creative HTML Design by Linda
Weinman
The HTML Web Classroom by Paul F.
Meyers