Creating and Editing a Web Page
Download
Report
Transcript Creating and Editing a Web Page
Creating and Editing a Web Page
Presented by Stacy Cox
Project – Community Food Drive
• You will use Notepad to enter text and HTML
tags to create a the Web page.
• Notepad is a basic text editor you can use for
simple documents or for creating Web pages
using HTML.
• You will use Internet Explorer to view the Web
page created.
Window Elements
• Title – text that appears on the title bar of the
browser; usually the first element you see
• Body – contains the information that is
displayed in the browser
• Background – a solid color, a picture, or a
graphic against which the other elements on
the web page appear
Text Elements
• Normal text – the default text format used for
the main content of a Web page
– Can be used in a standard paragraph or formatted to
appear as bold, italic, or underlined; in different
colors; and so on
• Headings – used to set off paragraphs of text or
different sections of a page
– Are a larger font size than normal text and often are
bold or italic or a different color than normal text
• Word wrap – causes text lines to break the right
edge of the window and appear on a new line
Image Elements
• Web pages use several different types of
graphics, or images, such as an icon, bullet, line,
photo, illustration, or other pictures
• Inline image – the image or graphic file is not
part of the HTML file, but is merged with the web
page when displayed in the browser
• Image map – a type of inline image that is used
to define one or more hotspots
• Hotspot – an area of an image that activates a
function when selected (example: link to another
web page/site)
Image Elements continued
• Some inline images are animated, meaning
they include motion and can change in
appearance
• Horizontal rules are lines that are displayed
across a web page to separate different
sections of the page
Hyperlink Elements
• One of the most important elements of a web
page is a hyperlink, or link.
• A link is text, an image, or another web page
element that you click to instruct the browser
to go to a location in a file or to request a file
from a server.
Defining the HTML Document
• <html> and </html> indicate the beginning
and ending of an HTML document
• <head> and </head> contain the web page
title and other document header information
• <title> and </title> indicate the title of the
web page
• <body> and </body> contain the main
content of the web page
Using Lists to Present Content
• Unordered list, also called bulleted list, formats
information using small images called bullets
– <ul> and </ul>
• Ordered list, also called numbered list, formats
information in a series using numbers or letters
– <ol> and </ol>
• After the <ul> or <ol> tag is entered to define the
type of list, the <li> and </li> tags are used to
define a list item
Using Lists to Present Content –
Unordered or Bulleted List Example
Using Lists to Present Content –
Ordered or Numbered List Example
More About List Formats
• If you use the <ul> or <ol> tags without
attributes you get the default bullet (disc) or
number style (Arabic numerals)
• To change the default bullet or number type,
the type attribute is added within the <ol> or
<ul> tags
Unordered List Types
Ordered List Types
Saving HTML Files
• Before you can view your web page in a
browser you must save it
• HTML files must end with the extension .htm
or .html
Using a Browser to View a Web Page
• After your file has been save you can now
view what it would look like on the web
• Locate the file in My Documents or whatever
location you saved it in and double-click the
Internet Explorer icon
Improving the Appearance of Your
Web Page
• One goal in web page development is to create a
web page that is visually appealing and maintains
the interest of the visitors
• Images are used to enhance the look of a web
page and make it more interesting and colorful
– To add background color, to help organize a web page,
to help clarify a point being made in the text, or to
serve as links
– Can also be used to break up sections by using a
horizontal rule
Image Types
• Web pages use three types of files
– Graphics Interchange Format (GIF) – uses
compression technique called LZW to make it smaller
for download; file extension is .gif
– Joint Photographic Experts Group (JPEG) – graphic
image saved using compression technique other than
LZW; often more complex, such as photos; file
extension is .jpg, .jpe, or .jpeg
– Portable Network Graphics (PNG) – also a
compressed file format that supports multiple colors
and resolutions; file extension is .png or .ping
Image Attributes
• Attributes are additional characteristics that
can be added to the <img> tag
Other Visual Enhancements
• To change the background color of a web
page the bgcolor attribute must be added in
the <body> tag
• A horizontal rule can be added to separate
sections of the web page using the <hr /> tag
Other terms
• Source code is the code or instructions used
to create a web page or program
• When the browser opens, it displays a home
page, or start page, which is a web page that
appears each time Internet Explorer starts
• A printed version of a file, web page, or other
document is called a hard copy, or printout