Transcript HTMLNotesOnlyPP (8)

Basic HTML
The Magic Of Web Pages
Create an HTML folder
Make a folder in your I drive and name
it “HTML”. We will save EVERYTHING
for this unit here.
Save your Word document as
HTMLNotes_XX (xx=your intials) in your
HTML folder.
Revised August 2008
Online PD Basic HTML
2
What is HTML?
HTML are initials that stand for HyperText
Markup Language
Hyper is the opposite of linear (linear meaning
going from place to place in some given order, like
a PowerPoint presentation)
Text is what you will use; real
English letters!
Mark up is what you will do, using real English
letters!
Language (not really a computer language)
Revised June 2008
Online PD Basic HTML
3
HTML Documents
are documents that can be interpreted by
your Web browser to display a page as you
intend it to be viewed.
(Remember, a browser is the computer
application you use to see Web pages –
Examples: Internet Explorer, Firefox, Netscape)
HTML documents are plain-text files that can
be created using any text editor like Notepad
for Windows.
 We are going to use Notepad to type in our HTML
pages.
Revised June 2008
Online PD Basic HTML
4
Required To View a Web Page
Computer
A browser:
o Graphic browsers such as Internet Explorer
(IE), Netscape or Firefox.
o There are text browsers, like Opera, but
we will not be interested in those at this
point.
Internet connection to view online
Web pages
Revised June 2008
Online PD Basic HTML
5
Required to Develop a Web Page
Computer
Text editor (we will use Notepad)
A Web browser to “view” your work
Internet connection is NOT required
to work on a web page. It will show
perfectly well in any browser with no
Internet connectivity.
Revised June 2008
Online PD Basic HTML
6
Elements of a Web Page
An element is a fundamental part of a text
document (or Web page)
Some elements are tables, paragraphs,
ordered lists (with numbers like 1,2,3,…),
unordered lists (with bullets), hyperlinks, or
images.
You use HTML tags to place elements on a
Web page.
Elements can contain plain text, other elements
like graphics, or both.
Revised June 2008
Online PD Basic HTML
7
Source Code
 “Source Code” is the HTML coding behind a Web page
or the instructions used to create a web page.
 You can view the source code used to develop a Web page.
Let’s look at a sample page to see the HTML used. There are
lots of elements here to see. You will not use all of these tags
in Basic HTML, but you might like to see how they work.
 To view the Sample Page, Open Internet Explorer and go to
www.rcsd.ms/~debra.mason/HTML
 Click on the Sample Page
 After the page has opened in your Web browser
o In the menu at the top right of the page, choose Page >
View Source
o The HTML coding should open in Notepad.
Revised June 2008
Online PD Basic HTML
8
File Naming Conventions
Choose a meaningful name. For
example, if you want to make a page
about puppies, you would not name the
page as “rabbits.htm”
You may add a suffix of either .htm
or .html – either works as well as the
other. But, we will use the file extension
.htm for our pages.
Revised June 2008
Online PD Basic HTML
9
HTML Tags
HTML Tags
HTML works in a very simple, logical format
It reads from left to right, top to bottom, just like you
do.
An HTML tag begins with the less-than sign, <,
and ends with a greater-than sign, >.
In between these two signs are the commands
HTML is written with text, and the tags are
used to highlight certain elements, like making
larger text, or smaller text, bolder or
underlined text, etc.
Revised June 2008
Online PD Basic HTML
11
Page Sections – Head and Body Elements
}
}
Head Elements
Body Elements
In Notepad
Revised June 2008
In Internet Explorer
Online PD Basic HTML
12
Exploring the Head Element
The Head element identifies the first part
of your HTML coded document that
contains the title.
This title (not to be confused with the page
title that shows on the Web page) is shown in
the blue Title Bar at the very top of your
browser’s window.
Look back at the previous slide with the image
of the practice1.html Web page to see it’s title.
Revised June 2008
Online PD Basic HTML
13
The Title
The Title element contains your
document title that is typically
displayed in the Title Bar of your
browser
The title should identify the subject
or purpose of you Web page.
It also displays in someone’s bookmark list
or on search engines like Google.
Revised June 2008
Online PD Basic HTML
14
The Body
The largest part of your HTML
document is the body. It contains
the contents of your document. It
begins with the <BODY> tag and
ends with the </BODY> tag.
This is what actually displays
within the text area of your
browser window.
Revised June 2008
Online PD Basic HTML
15
Commands
Think of tags as commands.
You put the tag exactly where you want an
action to start happening, just as in the
Sample Web Page.
For example, if you want a word to be bold,
put the tag where bold starts (at the
beginning of the word or sentence) and the
“end” tag where you want bold to stop (at
the end of the word or sentence.)
Revised June 2008
Online PD Basic HTML
16
Tag Specifications
HTML is not case sensitive. <HTML> is
read the same by the browser as <html> or
even <hTmL> But, <HTML> is easier to find
in your code than other variations!
Revised June 2008
Online PD Basic HTML
17
Remember
All tags are formatted the same.
All tags begin with an open bracket ‘<‘
have the tag command in the middle,
then close with a ‘>’ Like <H1>
Tags are usually paired. <HTML>
(called a start tag) and </HTML>
(called an end, or close, tag)
Learning HTML is simply learning which tag
performs which action!
Revised June 2008
Online PD Basic HTML
18
Adding Images to Web Pages
Saving An Image
Adding an image adds interest to a Web page. But,
your image files MUST be saved in the same
folder where your html document is saved.
Choose a meaningful name! NO SPACES in the
file name!
Go to the Blackboard, Web Design, HTML, More
Images, and choose one of the images you like.
Right click on it, choose “Save picture as…” or “Save
image as…” then save it in the same folder where
your practice10.htm file is located.
Revised June 2008
Online PD Basic HTML
20
Adding Hyperlinks to Web Pages
Adding A Hyperlink
Hyperlinks are what make the Internet the Internet!
A hyperlink is a tag used to put text on your
web page that links to other web pages.
We will use Google as an example.
Let’s add a tag before the heading sentences to link
to Google. Be sure to add some <BR> tags to make
yourself a few blank lines between text.
 <BR><BR><A href=http://www.google.com> Click Here to Go To Google! </A>
The tag is <A>, the attribute is href, the text
in between the tags is the actual link that
shows on the web page for the user to click
on, and we only close the tag, which is </A>.
Save your file as “practice12.htm” and Check It Out!
Revised June 2008
Online PD Basic HTML
22