Your
Second Web Page
Now that you have
created your first webpage, let us examine the different segments of your "index.html"
file.
You have probably
noticed a pattern of various words that are surrounded with < and >.
These items are called
HTML
tags.
An example of an html
tag is <body>. The Body tag tells the browser where the page's
content begins. Body is also an example of one of the required HTML tags
that every web page must have.
Basic
HTML Tag Information
Let's learn more
about these tags. A basic web page is composed of 2 main tags. If you create a
web page without these tags you will be in trouble!
HTML
Code:
<html>
<body>
Your site's content goes here
</body>
</html>
The first HTML tag,
which conveniently is labeled <html> tells the browser that your HTML code
is starting. The second HTML tag, <body> tells the browser that the
visible part of the webpage ( your content ) is going to start.
Closing
Tags - </tag>
You might be
wondering what is the deal with the two tags at the end, </body> and
</html>. These tags are telling the browser that certain tags are ending.
The </body> lets the browser know that your content is ending,while the
</html> tells the browser that your HTML file is finished. The
"/" that is placed before the tag's name informs the browser that you
would like to stop using the specified tag.<tag> is used to begin a
tag and </tag> is used to end a tag.
HTML
Tag Order - Important!
The order that
opening tags appear and ending tags appear follows an important rule. If an
HTML tag is opened within another, for example the body tag is opened
inside the html tag, then that tag(body) must close before
the outter(html) tag is closed.
We ended the body tag
first because it was opened most recently. This rule of "closing
the most recent tag before closing older tags" applies to all HTML tags.
Continue
Along
These ideas might
take a while to sink in, so how about you create your second web page? Copy
this code into notepad/DW, like you did before, following the same directions.
<html>
<head>
<title>My Own
Webpage!</title>
</head>
<body>
<h2>Welcome to my webpage</h2>
<p>Coming soon will be my
completed webpage that will wow and impress you!</p>
</body>
</html>
After you are sure
that your HTML code inside notepad/DW is exactly the same as our provided HTML
code,go ahead and save your file. You should be saving this file as
"index.html". You may be prompted that you will be saving over a file,
that is OK, you do not need your 1st web page anymore. When you are done,
please continue.
Words
to Know
Tag -
Used to specify ("mark-up") regions of HTML documents for the web
browser tom interpret. Tags look like this: <tag>
Element - A
complete tag, having an opening <tag> and a closing </tag>.
Attribute -
Used to modify the value of the HTML element. Elements will often have multiple
attributes.
For now just know
that a tag is a command the web browser interprets, an element is
a complete tag, and an attribute customizes or modifies HTML elements.
HTML
Elements
An element consists
of three basic parts: an opening tag, the element's content, and finally, a
closing tag.
1.<p> -
opening paragraph tag
2.Element Content
- paragraph words
3.</p> -
closing tag
Every (web) page
requires four critical elements: the html, head, title,
and body elements.
The
<html> Element...</html>
<html> begins
and ends each and every web page. Its sole purpose is to encapsulate all the
HTML code and describe the HTML document to the web browser. Remember to close
your HTML documents with the corresponding </html> tag at the bottom of
the document.
If you haven't
already, open up Notepad or DW and have a new, blank document ready to
go. Copy the following HTML code into your text editor.
<html>
</html>
Now save your file by
Selecting Menu and then Save. Click on the "Save as Type" drop down
box and select the option "All Files". When asked to name your file,
name it "index.html", without the quotes. Double check that you did
everything correctly and then press save. Now open your file in a new web
browser so that you have the ability to refresh your page and see your
changes.
If you opened up your
index.html document, you should be starring at your very first blank (white)
web page!
The
<head> Element
The <head>
element is "next" as they say. As long as it falls somewhere between
your <html> tag and your webpage content (<body>), you're golden.
The head functions "behind the scenes." Tags placed within the
head element are not directly displayed by web browsers. We will be
placing the <title> element here and we'll talk about the other possible
elements in later lessons.
Other elements used
for scripting (Javascript) and formatting (CSS) will eventually be introduced
and you will have to place them within your head element. For now, your head
element will continue to lay empty except for the title element that will
be introduced next.
Here's a sample of
the initial set up.
<html>
<head>
</head>
</html>
As of yet, we still
have nothing happening on the web page. All we have so far is a couple of
necessaryelements that describe our document to the web browser. Content (stuff
you can see) will come later.
The
<title> Element
Place the
<title> tag within the <head> element to title your page. The words
you write between the openingand closing <title></title> tags will
be displayed at the top of a viewer's browser.
Here's the html code:
<html>
<head>
<title>My
WebPage!</title>
</head>
</html>
Save the file and
open it in your browser. You should see "My WebPage!" in the
upper-left, as the window's title.
Name your webpage as
you please, just keep in mind, the best titles are brief and descriptive.
The
<body> Element
The <body>
element is where all content is placed. (Paragraphs, pictures, tables,
etc). As the menu on the left suggests, we will be looking at each of these
elements in greater detail as the tutorial progresses. For now, it is only
important to understand that the body element will encapsulate all of your
webpage's viewable content.
<html>
<head>
<title>My
WebPage!</title>
</head>
<body>
Hello World! All my content goes
here!
</body>
</html>
