You are about to embark on a journey that will transform you from a mere Internet Surfer of the Web to
an Internet Author of Multimedia!
Objectives
After this class you will be able to:
l Recognize the significance and objective of HTML labels.
l Begin up a workplace for developing new HTML records.
l Use an itemized text manager to create the primary HTML framework for any website.
l Place non-displayed feedback into your HTML details.
l Begin your papers within your web online browser to see how it is shown.
Lesson
Now that you know what HTML is, let's move on using it.
(Quick questions -- what do those characters take a position for? If you study the past class you would know!).
What are HTML tags?
When a web online browser shows a web page such as the one you are studying now, it flows from a basically published text pc file,
and looks for unique requirements or "tags" that are noticeable by the < and > symptoms. The typical framework for a
HTML tag is:
<tag_name>string of text</tag_name>
As an example, the name for this area uses a headlines tag:
<h3>What are HTML tags?</h3>
This tag informs a web online browser to show the published text What are HTML tags? in the design of headlines stage 3
(We'll discover out more about these labels later). HTML labels may tell a web online browser to strong the published text, italicize it,
make it into a headlines, or create it be a hypertext weblink to another website. It is worth noting that the
ending tag,
</tag_name>
contains the "/" reduce personality. This "/" reduce informs a web online browser to quit labeling the published text. Many HTML
tags are combined this way. If you ignore the reduce, a web online browser will proceed the tag for the relax of the
text in your papers, generating unwanted outcomes (as an try things out you may want to try this later).
NOTE: A web online browser does not health care if you use higher or reduced situation. For example,
<h3>...</h3> is no different from <H3>...</H3>
Unlike on-line, if you create a typographical mistake in HTML you will not get a "bomb" or
"crash" the system; your website will basically look, well... incorrect. It is simple and fast to go within the
HTML and create the changes.
Your online browser has a little but open vocabulary! An exciting element of HTML is that if the browser
does not know what to do with a given tag, it will neglect it! For example, in this papers you are
viewing, the headlines tag for this area really looks like this:
<wiggle><h3>What are HTML tags?</h3></wiggle>
but since your online browser probably does not assistance a <wiggle> tag (I made it up, perhaps later on it
could cause the published text to trend across the screen?), it earnings with what it knows how to do. If I were
programming a new web online browser, I might select to add the performance for the <wiggle> tag into my
software.
Opening Up Your Workspace
To finish the training in this guide, you should create a second web display (this allows you to keep
this display with the class guidelines and one display as your "workspace"), plus open your text
editor program in a third display.
NOTE: This is a great place to tell you that we will offer guidelines that are
somewhat typical as the selection titles and pc file titles can vary based on which
web online browser you are using. If our guidelines say, "Select Begin Place... from the
File Menu" and your web online browser does not have that actual option, try to discover the
closest comparative option in your own web online browser.
So you will want to be fairly relaxed getting between different programs and windows on your
computer. Another option is to create out the class guidelines (but we really do not want to market that
kind of extreme shrub carnage).
Here are the actions for establishing up your "workspace":
1. From the File selection of your web online browser, select New Window or New Web Browser (The exact
name of the selection control can be different based on what online browser you are using). A
second web display should appear. Think of the first display as your "textbook" and the second
clone display as your "workspace" for finishing the HTML training.
NOTE: The only purpose to have two windows here is so that analysis the
instructions for the training and also perspective your managing papers. It is not
mandatory to have two windows open; it just creates your perform simpler. You
could also save this website or leap returning here via your Go or History
menu.
2. Next, you need to leap out of the web online browser and open your published text manager program.
NOTE: You will need to shift returning and forth between the different windows
to finish these training. This can be a task with regards to the dimension your
monitor. You may select to re-size the three windows so that they all fit on
your display or aspect your windows so you can basically select any of them to carry it
to the top side.
If you are using a term brand program to create your HTML, be sure to
save in basically published text (or ASCII) framework.
If you are just beginning out, we most STRONGLY suggest that you use the easiest published text editor
available -- SimpleText for the Apple or the Windows NotePad. Why not use those awesome HTML
editors? It is audio educational design that you first understand the principles and THEN look for strategies or
helpers that create the perform less boring.
Also, it will help you if you first create a new directory/folder on your pc that will be your work
area. You can contact it workarea or fb or whatever you like; just create sure that you keep all of
the details you create in this one place. It will create your life simpler... well, at least while managing on this
tutorial!
Creating Your HTML Document
An HTML papers contains two unique areas, the go and our bodies. The go contains information
about the papers that is not shown on the display. The body program then contains everything else that is
displayed as aspect of the website.
The primary framework then of any HTML web page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<!-- headlines details used to contain additional details about
this papers, not shown on the site -->
</head>
<body>
<!-- all the HTML for show -->
: :
: :
: :
</body>
</html>
The very first line:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
is not officially needed, but is a value that informs the world wide web browser what edition of HTML the present web page is
written for. For more details, see the W3C Referrals Requirements.
Enclose all HTML material within <html>...</html> labels. Inside is first your
<head>...</head> and then the <body>...</body> areas.
Also observe the thoughts labels encased by <!-- blah blah blah -->. The published text between the labels is
NOT shown in the website but is for details that might be of use to you or anyone else who
might look at the HTML value behind the website. When your websites get complex (like you will
see when we get into platforms, supports, and other fun things about 20 training from now!), material will
be very beneficial when you need to upgrade a web page you may have designed lengthy ago.
Here are the actions for developing your first HTML pc file. Are you ready?
1. If it is not open already, release your published text manager program.
2. Go to the published text manager display.
3. Get into the following published text (you do not have to media RETURN at the end of each line; the web
browser will term cover all text):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Volcano Web</title>
</head>
<!-- published for the Composing HTML Tutorial
by Lorrie Lava, Feb 31, 1999 -->
<body>
In this class you will use the Internet to research
information on volcanoes and then create a review on
your outcomes.
</body>
</html>
NOTE: Look where the <title>...</title> tag is situated. It is in the
<head>...</head> section and thus will not be noticeable on the display. What
does it do? The <title> tag is used to exclusively identify each papers and is
also shown in the name bar of the world wide web browser display.
In class 3 you will understand how to add a sequence of published text for a name that will appear
directly on your website.
Also observe that we have placed a statement tag that details the name of the author
and the time frame the papers was designed. You could create anything in between
the thoughts labels but it is only noticeable when you look at the resource HTML for
a website.
4. Preserve the papers as a pc file known as "volc.html" and keep it in the "work area" folder/directory
you set up for this guide. Also, if you are using a term brand program to create your HTML,
be sure to avoid wasting in basically published text (or ASCII) framework.
NOTE: For Windows 3.1 customers, you must save all of your HTML details with
names that end in .HTM, so in this situation your pc file should be VOLC.HTM. Do not
worry! Your web online browser is sensible enough to know that a pc file that has a name
that finishes in .HTM is an HTML pc file.
You can create details with titles like VOLC.HTML if you use Windows95 or a
later Windows based pc.
By using this pc file name expansion, a web online browser will know to study these published text details as HTML and
properly show the website.
Displaying Your Document in a Web Browser
1. Come returning to the web online browser display you are using for your "work space". (If you do not have a
second online browser display open yet, select New Window or New Browser from the File display.)
2. Select Begin File... from the File selection. (Note: For customers of Internet Traveler, basically select the Browse
button to select your file)
3. Use the dialogue box to discover and open the pc file you designed, "volc.html"
4. You should now see in the name bar of the workplace display the published text "Volcano Web" and in the
web web page below, the one phrase of <body> published text you had written, "In this class..."
Check Your Work
Compare your papers with a example of how this papers should appear. After watching the example,
use the returning option on your web online browser another to this web page.
If your papers was different from the example, evaluation the published text you joined in your published text manager.
A typical mistake we listen to is, "I cannot see the title!" You shouldn't! The published text within the
<title>...</title> tag is NOT shown on the web page; you should see it in the name bar of the
web online browser display.
The most typical mistake that newbies create here is that they try using a term handling program to
type HTML and then cannot look at it in their online browser, or if it does, the site is complete of odd garbage
characters. When you are beginning out, we encourage you to use the most primary published text manager such as the
Windows NotePad or SimpleText for Apple. Look for strategies later!
If you are looking for some free/cheap substitute published text publishers, our suggestions are EditPad (for
Windows) and BBEdit En aning (for Macintosh)
Review Topics
1. What are HTML tags?
2. Where is the published text of the name tag displayed?
3. What actions are engaged in developing a simple HTML document?
4. How do you create a statement tag?
5. How can you show your HTML papers in a web browser?
Independent Practice
Think of a subject for your own website. Now create your own HTML published text pc file that has a <title>
tag and a few starting phrases. Preserve the HTML pc file and load it in your web online browser. You might
want to create a different folder/directory for this pc file so you do not get it combined with all of the
volcano webpages you will create for this guide.
Keep this pc file useful as you will add to it in later training.
Coming Next....
Your first website is done!
But, to be sincere, it is fairly brief and not very exciting! In the next class you will change and update
your HTML papers.
No comments:
Post a Comment