Introduction to (X)HTML
Download
Report
Transcript Introduction to (X)HTML
Essentials of HTML
Instructor: Jeanne Hart
I have been designing web sites for
almost 20 years.
I worked as a part of a Web Team for
the State of NJ Judiciary.
I’m a stickler for proper HTML code!
I have a BA in Art History and a
Masters in Education in Adult and
Distance Learning.
I can be reached by email at:
[email protected]
I will be here on time
I will teach all 4 classes
Hopefully I will make
learning HTML a fun
experience
I will always be available for
help
to be on time to class
to attend all 4 classes
to ask for help if you need it
not to be afraid to offer help
not to be afraid of HTML
code
have fun learning
In this class you will
learn why HTML is so
important to the internet.
You will also learn the
basic tags to create your
first HTML page and learn
how to use HTML to add
text and headings in your
Web page and how to
format your text.
Does anyone know?
Can’t anyone write for the web?
Languages such as HTML,
serve an important
purpose when it comes to
sharing information over
long distances.”
Your computer has a Web
browser, such as Internet
Explorer or FireFox, or Chrome
installed on it. First, your browser
has to find the computer that is
storing that information and it
does this using the HTTP.
The storage computer, or server,
sends the new web page (as a
plain text file) back to your
computer using the same HTTP.
Finally, and this is what you need
to know, the browser sees the
new Web page and interprets
the text and HTML tags to show
you the formatting, graphics, and
text that appear on the page.
As great as Web
browsers are, you should
be aware that they have
limitations!
Some older browsers do not
understand the newer HTML
commands and might produce
errors rather than text.
What's more, some of the
newest browsers enable
viewers to determine which
window display sizes, fonts,
and colors they prefer when
viewing Web pages (even if
those settings are different
from what you, the Web
author, want them to see)
You can create Web page files in any
plain text editor and view them in any
browser but, you have to decide how
you are going to store the files.
You already know that you can't surf the
Net without having an Internet Service
Provider (ISP).
In the same way, you need a Web
Presence Provider (WPP) or an ISP or
your own Web server to store your pages
before they can be viewed from the Web.
Tonight, you will create a template
for yourself that already includes the
tags that you need to create your
first web page.
Then, when ever you want to create
a new Web page you will be able to
open your template file, add your
new text, and save the new file.
The next thing you have
to do is give the page a
DOCTYPE, which by the
way is the only tag in
HTML that uses all caps!
Why, you ask, must I do
this?
Adding a DOCTYPE is
what the browser is
going to look at first!”
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1
/DTD/xhtml1transitional.dtd"><html
xmlns="http://www.w3.org/199
9/xhtml">
The <!DOCTYPE> tag
has three variations:
Strict
Transitional
Frameset
You declare which one
you are using in the top
of the file.
HTML isn ‘t as difficult as
you might think. It’s a
language that just includes
an opening tag like this,
<p> and a closing tag like
one</p>
Any guess what the <p>
stands for?
You can create Web pages using
some WYSIWYG programs, for
now you’ll concentrate on
learning HTML and use Note Pad
for all your labs.
After the DOCTYPE,
every HTML document
must begin with the
<html> tag and end with
its compliment, the
</html> tag.
All HTML documents are
separated into two parts:
the head and the body.
Because the title
contains information
about the document, the
<title> and closing
</title> tags are placed
within the opening
<head> and closing
</head> tags.
1.
The opening <head>
tag and the closing
</head> tags are used to
indicate any information
about the document
itself. You'll learn how to
add some of this
information in later
lessons.
2. The <title> and </title>
tags are used to add a title
to your browser's Title
bar. The Title bar is the
colored band at the top of
any browser that gives the
name of the html page.
3. The opening
<body> tag and the
closing </body> tags
are used to surround
any and all content that
appears in the HTML
page.
And, there is only,
ever, one opening
body tag and one
closing!
If you were to create a simple HTML page, you
would see that the four tags we just discussed
are present in this document
Doctype – (the doctype always come first in any
html document)
<html>
<head>
<title> My First Web Page
</title>
</head>
<body>
<p> This is my First Web page </p>
</body>
</html>
For now, almost all HTML tags
come in pairs.
You use the first tag in the pair
(for example, <html>) to tell the
computer to start applying
the format.
You use the second tag (for
example, </html>) requires a
slash in front of the tag name
that tells the computer to
stop applying that format.
The first tag is usually
referred to by the name
within the bracket, for
example, opening html
tag.
You can refer to the
second tag as the the
closing tag, for
example, closing html
tag.
To view your own page in a
browser, you must first save
it. Because you've created
an HTML document, you
want to save your file with
an .htm extension
(first.htm, for example) so
that you recognize it quickly.
You should also be aware of
difference between html
and htm
Some people prefer to
name their HTML files
with an .html extension
(for example,
first.html). Some older
computer systems,
however, still require
the file extension to be
three characters or
fewer and might have
trouble reading (or
storing) a file with a
longer extension.
You can preview any HTML file in
your browser, even when that file
is stored on your computer rather
than on a Web server.
In Internet Explorer, you can view
your new file by selecting Open
from the File menu and finding
the page you created to view.
In HTML, a paragraph is created
whenever you insert text between the
<p> tags.
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/199
9/xhtml">
<head><title>My HTML Page</title></head>
<body>
<p>This is my first HTML page.</p>
</body>
</html>
Web browsers see that
you want a paragraph
and they display it.
Web browsers don't pay
any attention to how
many blank lines you put
in your text; they only
pay attention to the
HTML tags.
In the following HTML
code, you see several lines
of text and even a blank
line, but the browser only
recognizes paragraphs
surrounded by the <p>
and </p> tags (or
paragraph tags). The <p>
tag tells the browser to
add a blank line before
displaying any text that
follows it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head><title>Typing Paragraphs in HTML</title>
</head>
<body>
<p>This is the first paragraph. But is this the second?</p>
<p>No, this is.</p>
</body>
</html>
Web browsers do something else with
paragraph text that you should be aware of:
They wrap the text at the end of the browser
window. In other words, when the text in your
Web page reaches the edge of the browser
window, it automatically continues on the next
line regardless of where the <p> is located.
The <p> tag always adds a blank line, but you
might not always want a blank line between
lines of text. Sometimes you just want your text
to appear on the next line (such as the lines of
an address or a poem). You can use a new tag
for this: the line break, or <br /> tag
You will occasionally want to
add emphasis to your text to
make it stand out.
HTML enables you to quickly
apply some standard formats,
such as boldface and italic,
using a predefined set of tags.
<em> </em> for italics and
<strong> </strong> for bold
Other formatting tags exist in
HTML, but their use is discouraged
in HTML in favor of style sheets.
Deprecated Tags - Some
older HTML tags,
specifically related to
formatting, have been
replaced by the
formatting capabilities of
style sheets.
Style Sheets - Web
developers use style
sheets to specify
formatting instructions for
a single document or a
group of documents.
Separating your text into
paragraphs isn't the only
way to format your Web
pages.
HTML enables you to add
six different heading tags
to your pages by using the
tags <h1> through<h6>.
These tags are very simple
to use. Let’s look at them:
<h1>This is Heading 1</h1>
The closing heading tags also
create an automatic paragraph
break. In other words, all
headings automatically include
a blank line to separate them
from the text. Heading 1, the
<h1> tag, has the largest font of
the heading tags and
Heading 6, the <h6> tag, has
the smallest. In fact, you usually
only see Web page authors use
the <h1><h2><h3> tags
because the remaining tags,
<h4><h5><h6>, are actually
smaller than normal text.
Unless you or the
people viewing your
pages have adjusted
the browser's default
settings, normal
HTML body text
appears in 12 point
Times New Roman
font on most
computer systems.
Here's a special character that
you should remember:
The symbol stands for
nonbreaking space and is used
to insert a space inside an
HTML document.
HTML ignores extra spaces
between words and tags so
you'll need to have a way of
including extra spaces.
You can do that with the
character.
A great tag to remember
is the comment tag
It looks like this: <!- text goes in here - ->
And where the text goes
can be any text but it
will not be seen by the
browser.
If you have a page that you
update several times a day and
you want to make sure that
people always see the most
recent version, you can enter
the page's own URL in the
refresh tag. When the browser
sees the refresh tag, it presents
the requested URL in the
specified time.<meta http-equiv="refresh"
content="time in seconds, URL for this page" />
Why might that be helpful on a
web and on what type of page?
Tonight you learned
about:
1. The DOCTYPE
2. the 4 basic tags to
create a web page
3.
how to format the text
on your pages
4.
how to add comments
to your web page
You also learned about:
•
•
•
•
Web browsers
•
Tags to format the text for your web pages
the DOCTYPE
4 basic tags needed to create web pages
the html tag, the head tag, the body tag and
all their closing tags
Take 15 minutes and when
you come back you’ll be
doing the labs for tonight