Post on 12-Jan-2016
transcript
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 1
Creating and Editinga Web Page
Review for Monday’s Test
September 17, 2009
2
Web Page Elementstitle
heading
body
image
paragraph
horizontal rule
links
animated image
bulleted list
3
Starting Notepad
Click Start
Point to Programs
Point to Accessories
Click Notepad
5
Wrapping Text in NotepadThe text you type will scroll
continuously to the right unless the WordWrap feature is turned on
Select Word Wrap in the Edit menu
6
Entering HTML Tags and Text Four tags define the overall structure of standard
Web pages:– <HTML> and </HTML>
• Indicates file is an HTML document
– <HEAD> and </HEAD>• Introduction to the rest of the file• Indicates the area where the title will be placed
– <TITLE> and </TITLE>• Indicates the title that will display in the title bar
– <BODY> and </BODY>• Indicates the boundaries of the Web page
8
Entering Initial HTML Tags
initial tags
insertion point
It is good form to be consistentwhen you type tags, adhering
to a standard practice
9
Entering Initial HTML Tags
ending BODY and HTML tags
all Web page content will be placed here
If you notice an error in the text, use the BACKSPACE key to
erase all the characters back to and including the one that is
incorrect
10
Headings
Used to separate text and introduce new topics
Vary in size, from <H1> through <H6>Use the same sized heading for the
same level of topic
12
Entering Headings
main heading
Since the Chiaravalle Pizzaheading is the first line afterthe BODY tag, it will be thefirst thing displayed on the
Web page
13
Paragraphs
Most text on Web pages is in paragraph format
The <P> tag has an optional ending tag
When a browser finds a <P> tag, it starts a new line and adds a paragraph break
Try not to type large sections of text without having paragraph breaks
14
Entering Paragraphs
paragraph tag and text
The <BR> (break) tag breaks aline of text and starts a new
line, but does not add verticalspacing like a <P> tag
15
Creating a List
Lists structure your text in outline format– Unordered (bulleted) lists
• <UL> and </UL> marks the beginning and end of unordered lists
– Ordered (numbered) lists• <OL> and </OL> marks the beginning and end of
ordered lists
The <LI> and </LI> tags define list itemsThe TYPE attribute defines the default bullet
or number type
16
Unordered Lists
<H3>Unordered Lists</H3><UL TYPE=“disc”><LI>First item – type disc</LI><LI>Second item – type disc</LI></UL>
<UL TYPE=“square”><LI>First item – type square</LI><LI>Second item – type square</LI><UL>
<UL TYPE=“circle”><LI>First item – type circle</LI><LI>Second item – type circle</LI></UL>
17
Ordered Lists <H3>Ordered Lists</H3> <OL TYPE=“1”> <LI>First item – type 1</LI> <LI>Second item – type 1</LI> </OL>
<OL TYPE=“A”> <LI>First item – type A</LI> <LI>Second item – type A</LI> </OL>
<OL TYPE=“a”> <LI>First item – type a</LI> <LI>Second item – type a</LI> </OL>
<OL TYPE=“I”> <LI>First item – type I</LI> <LI>Second item – type I</LI> </OL>
<OL TYPE=“i”> <LI>First item – type i</LI> <LI>Second item – type i</LI> </OL>
19
Saving the HTML File
You must save the file before you can view it in your browser
HTML files must end with an extension of .htm or .html
.html extensions only work on Web servers running an operating system that supports long filenames
20
Saving the HTML File
With a floppy disk in drive A, select Save As from the File menu
22
Saving the HTML File
Type page1.htm in the File name text box
Click the Save in box arrow
23
Saving the HTML File
Point to and click 3½ Floppy (A:) in the Save in drop-down list
26
Using a Browser to View a Web PageAfter you save your HTML file, you
may view your Web page in a browserThe HTML file displays in your browser
just as it would on the WebWindows allows you to view the page
in your browser while keeping Notepad open
27
Starting Your Browser
Locate and click on the iconin your Start menu that
identifies your Web browser
This varies on eachcomputer
28
Your Browser maximizebutton
standardbuttonstoolbar
status bar
defaultstartup page
address bar
menu bar
Internet Explorer Window
30
Opening a Web Page in Your Browser
Type a:\page1.htmin the Address text box,
then press ENTER
31
Your Web Pagetitle
body ofWeb page
main heading
H2 heading
bulleted list
paragraph
33
Adding Background Color
Locate the6-character codeof the color you
wish to use
34
Adding Background Color
Background color code goesat the end of the BODY tag
35
Centering the Heading
Text can be aligned differently on the page– ALIGN = “LEFT”– ALIGN = “RIGHT”– ALIGN = “CENTER”
The default alignment for headings is left-alignment
37
Adding a Horizontal RuleHorizontal Rules are graphical images
that act as dividersThe tag used to insert a Horizontal
Rule is <HR>Horizontal Rules are easy to insert
38
Adding a Horizontal Rule
<HTML><HEAD><TITLE>Horizontal Rules</TITLE></HEAD><BODY BGCOLOR=#94D6E7>
<P>Default HR</P><HR>
<P>HR with size=1</P><HR SIZE=1>
<P>HR with size=5</P><HR SIZE=5>
<P>HR with size=10</P><HR SIZE=10>
<P>HR with size=10 and noshade</P><HR SIZE=10 NOSHADE>
</BODY></HTML>
40
Viewing Your Web Page SourceYou can view the HTML code on any
Web page from within your browserThis allows you to see how others
created their Web pages
43
1. Ready the printer
Printing a Copy
2. Select Print from the File menu
3. Click the OK button in the Print dialog box
4. Retrieve the printout
44
Printing the HTML
From the Notepad window, select Print from the File menu
Definitions:
Internet
The Internet is a global system of interconnected computer networks that use the standardized Internet Protocol Suite (TCP/IP), serving billions of users worldwide.
-or-
Is a worldwide collection of computer networks that links together millions of computer used by business, the government, educational instutions, organizations, and indiviuals and other communication devices and media.
45
Network: Is composed of a group of computers (from two to many) that are connected together to share information.
Internet Service Provider (ISP):
An Internet service provider (ISP, also called Internet access provider, or IAP) is a company that offers its customers access to the Internet. The ISP connects to its customers using a data transmission technology appropriate for delivering Internet Protocol datagrams, such as dial-up, DSL, cable modem, wireless or dedicated high-speed interconnects.
Examples: E-mail Accounts!
46
World Wide Web or Web:
is the part of the Internet that supports multimedia and consists of a collection of linked documents.
-or-
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view Web pages that may contain text, images, videos, and other multimedia and navigate between them using hyperlinks.
47
Web site:Is a related collection of Web pages that is
created and maintained by an individual, company, educational institutions, or other organization.
48
Home Page:Is the first document users see when they
access the web site.
Web Server:Store web pages. Any computer that has
server software installed and is connected to the Internet can act as a Web Server. Every Web site is stored on and runs from one or more Web servers.
49
Internet Site:
Is a web site that generally is available to the public. Also, referred to as Web Sites.
E-commerce (Electronic commerce):
Is the buying and selling of goods on the Internet.
50
Intranet:
Is a private network that uses standard Internet technologies to share company information among employees. It is contained within the company or organization network. They are usually password protected. Used for Policy and procedure manuals, forms and documents such as employee directories, newsletter, catalogs, etc.
51
Extranet:
Is a private network that uses Internet technologies to share business information with select corporated partners or key customers. They are also password restricted and provide access to specific suppliers, vendors, partners, or customers. Used to share training manuals, training modules, inventory status, and order information.
52
Web Browser:
Is a program that interprets and displays Web pages and enables you to view and interact with a Web page.
Examples: Internet Expolrer or Netscape Navigator.
53
Uniform Resource Locator (URL):
Is the address of a document or other file accessible on the Internet.
Example: www.prosseracademy.org
Hyperlink or Link:
Is an element used to connect one Web page to another Web page on the same, or different, Web server located anywhere in the world.
54
Hypertext Markup Language (HTML):
Is used to create Web pages. Is the authoring language used to created documents on the World Wide Web.
Tags:
Are a set ot special instructions that defines the structure and layout of a Web document and specify how the page is displayed in a browser.
55
New Tags:
<img src= ‘’ ‘’> is used to insert pictures.
< a href = ‘’ ‘’> Home Page </A> is used for hyperlinks!
<B>...</B> specifies text to be displayed in bold.
<I>....</I> Sets enclosed text to display in italics.
56
Today’s Assignment:
Worksheet!– Define Vocabulary Words– Example of hyperlinks! (2 programs)– Study for test on Monday!
57