Creating and Editing a Web Page - Webdesign
Download
Report
Transcript Creating and Editing a Web Page - Webdesign
HTML Project 02
HTML files must end with an extension of
.htm or .html
HTML files with an extension of .html can be
viewed on Web servers running an operating
system that allows long file names
(Windows). For Web servers that run an
operating system that does not accept long
file names, you need the .htm extension.
In this book, all files are saved using the .htm
extension.
When saving an HTML file, do NOT include
any spaces in the file name. Although
allowed in both Windows and Macintosh, it is
NOT allowed on a UNIX Web server—and
most Web servers run UNIX
The home page of a Web site should always
be saved as index.htm.
Save Notepad files with .htm extension
(.html is also acceptable but not to be used
for classroom exercises)
.html Used for Web servers that run an
operating system that allows long file names
(Windows/Macintosh do allow)
.htm Used for Web servers that run an
operating system that does not accept long
file names
Open My Computer
Navigate to the appropriate folder
G:\Web Design\HTML\Data Templates\Proj
ect02\AYK
Double Click the icon—Apply2-1
Open the View Menu
Click on Source
Make changes?
Save the HTML file
Refresh the browser
Add your Name to Every Title Tag!!!
Project 2
<title> Your Name Campus Tutoring Service
Home Page </title>
Save the Notepad file to the appropriate
folder:
Open the File Menu and select Save
Navigate to the appropriate folder
Projects
Saved in ProjectFiles folder
Apply your Knowledge
Saved in the AYK folder
In the Lab
IntheLab folder
Remember to use the .htm extension and no
spaces
Save as:
project2.htm
in the
ProjectFiles folder
<title> Your Name Apply Your
Knowledge</title>
Open: apply2-1.htm
Save as: apply2-1solution.htm
G:\Web Design\HTML\Data Templates\Projec
t02\AYK
<title>Your Name LAB 2-1</title>
Save as: lab2-1.htm
G:\Web Design\HTML\Data Templates\Projec
t02\InTheLab
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Campus Tutoring</title>
</head>
<body>
</body>
</html>
<!DOCTYPE>
indicates the version and type
of HTML used
<html> </html>
Indicates the start and end of an
HTML document
<title> </title>
Indicates the start and end of a title which
does not appear in the Web page but appears
on the Title Bar of the browser
(Always include your name
and Project name)
<body> </body>
Indicates the start and end of the
Web page body
Most HTML tags have corresponding end
tags—not all!
For tags that do not have end tags, such as
<hr /> and <br />, the tag is closed using a
space and a forward slash
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<!DOCTYPE> tag is used to tell the browser
which HTML or XHTML version and type the
document uses. The W3C supports three
document types:
strict (prohibits the use of deprecated tags--tags
that the W3C has named for eventual removal
because newer, more functional tags are
replacing them)
transitional (allows the use of deprecated tags)
frameset (used to support frames on a Web
page and also allows the use of deprecated tags)
Notice that we are using a transitional
document type
The <!DOCTYPE> tag also includes a URL that
references a Document Type Definition (DTD) found
on the W3C Web site. This is a file containing
definitions of tags and how they should be used in a
Web page.
To create an HTML document, you begin by inserting
a <!DOCTYPE> tag and four sets of tags which define
the overall structure of a standard Web page and
divide the HTML file into its basic sections—such as
the header information and the body of the page that
contains text and graphics
Serve to separate text and introduce new
topics
Tags = <h6> to <h1> (smallest to largest)
Heading size 1 = 24 point (usually only one <h1> tag per
page)
Heading size 2 = 18 point
Heading size 3 = 16 point
Heading size 4 = 14 point
Heading size 5 = 13 point
Heading size 6 = 11 point
Normal text = 12 point
Used to indicate the start of a new paragraph;
the browser starts a new line and inserts a
blank line above the new paragraph
Lists structure text into an itemized format—either bulleted or numbered
Ordered
<ol> </ol>
Also known as a numbered list formats information in a series using numbers
or letters
Default type = Arabic numbers
Unordered
<ul> </ul>
Also known as a bulleted list formats information using small images called
bullets
Default type = disc bullet
To change the defaults, the type attribute is entered within the <ol> or
<ul> tags.
<ol type=”A”>
or
<ul type=”square”>
After the <ol> or <ul> tag is entered to define the type of list, the <li>
and </li> tags are used to define a list item in an ordered or unordered
list.
Web pages use three types of files as images:
Graphics Interchange Format (GIF), Joint
Photographic Experts Group (JPEG), and
Portable Network Graphics (PNG)
Attributes used with the <img> tag:
src attribute = used to define the URL of the
image to load
alt attribute = used to provide alternative text if
the image does not load
It is important to include the height and width
attributes so the browser will know the size of
the image without having to calculate it.
Adding these attributes will be expected
every time you insert an image tag!
<img src=”cts_clip8.gif” width=”484”
height=”62” alt=”Student Services logo” />
Use a six-digit number code or a color name
(predefined)
Must be added in the <body> tag (pg. 55)
Right: align=”right”
Center: align=”center”
Left: align=”left”
By default, headings (and text) are leftaligned
Does not have an end tag
Tag is closed using a space and a forward slash
Visual divider of sections on a Web page
Can use an inline image or the horizontal rule
tag
Dimension is added to the default horizontal
rule by increasing the number of
pixels that are displayed
Can also turn off shading using the noshade
option