Website Development
Download
Report
Transcript Website Development
Creating a Web Page Using
HTML
4.02 Develop web pages using various layouts and
technologies.
(Note to instructor: HTML tags are in red only to differentiate from regular text.)
HTML Tags
Purpose of Tags:
Define and describe text,
graphics, hypertext links,
and other multimedia
elements found on WWW
pages
Mark- up documents
Tell the browser how to
display the document
By viewing the source
code of a web page,
the user can see the
HTML tags used to
display the page.
Using HTML Tags
An HTML tag begins with a < character and ends
with a > character.
Between these characters is the actual tag name,
such as body or head. <body> is an example of a
correct tag.
Tags should appear in pairs, with an opening tag
<html> and a closing tag </html>.
The only difference between the opening and
closing tag is the / used in the closing tag.
Using HTML Tags
Text entered between
the HTML tags is
formatted with the code
specified by those tags.
Example:
<h1>Welcome to my
website!</h1>
The browser will turn on
formatting at heading
level 1 to display the
text and then turn it off
at the end of that text.
Note the source code showing the 6 levels of the heading tag.
HTML vs. XHTML
W3C created XHTML as an
extended version of HTML.
The new standard requires
some modification of the old
HTML standard.
All tags must be in lowercase.
All tags must have a closing tag.
All tags must be properly
nested.
The <html> tag must be the root
tag for every document.
While many old browsers
can display “old” HTML,
newer ones rely on the
current standard.
Remember, web pages are
accessed from desktop
computers, mobile phones
and handheld devices—all
using a variety of browser
technologies!
Nesting HTML Tags
Nesting refers to sets of tags
that are enclosed inside other
sets of tags and refer to the
same text or object.
Example
<center><h2><p>GIF files are
popular for use on the
Enter the closing tags in the reverse
World Wide Web. They
order from the opening tags to
contain up to 256 colors.
achieve proper nesting.
They are used for cartoons,
By closing the tags in a different order
logos, graphics with
than they were opened, the browser
transparent areas, and
may not be able to display the page
animations.</p></h2>
as intended by the author.
</center>
Adding Attributes to Tags
Attributes to tags specify additional preferences and
program a specific value.
Example:
The anchor tag, <a>, defines an anchor that converts text or an
image into a hyperlink.
<a href=http://www.unc.edu>University of North Carolina</a>
href is the attribute instructing the browser to set the text
between the anchor tags as a hyperlink to the specified
web address.
Using Multiple Attributes
Not all tags have multiple attributes.
If a tag has an attribute or attributes available and no
attribute is specified, the browser will use the default
attribute for that tag.
To make sure that pages are displayed as intended,
always specify the intended attribute.
Example
<img src=“image.gif” alt=“smiley face image” />
In this example the image tag instructs the
browser to display the graphic with the source
attribute of image.gif.
The alt attribute instructs the browser to display
alternative text if the image file will not load.
For a comprehensive list of tags and attributes visit www.w3schools.com/html/html_reference.asp
Creating and Saving HTML Files
Use any text editor to enter HTML code and
create a web page.
Save the file as an HTML file using .html as the
extension.
Many old browsers will display files with the .htm
extension but the latest standard requires .html
Launch a web browser and open the file to
display the page. (Check the page out with
several different browsers to see how each
browser displays the HTML file.)