computers: tools for an information age
DESCRIPTION
Computers: Tools for an Information Age. Writing Your Own Web Page: Using HTML and Web Authoring Tools. Objectives. Identify the hardware and software required to write, test, and execute a web page Describe how HTML tags are used to format Web pages - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/1.jpg)
Computers:Tools for an Information Age
Writing Your Own Web Page: Using HTML and Web Authoring Tools
![Page 2: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/2.jpg)
Objectives
Identify the hardware and software required to write, test, and execute a web page
Describe how HTML tags are used to format Web pages
Discuss the benefits of using Web page authoring software
Describe how FrontPage can be used to write a web page.
![Page 3: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/3.jpg)
World Wide Web
Provides multimedia communication over the Internet
HTML drives the web HyperText Markup Language The language of browsers
![Page 4: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/4.jpg)
HTML: HyperText Markup Language
HyperText Active text Link Clicking causes an
action Markup Language
Tags indicate formatting and document structure
Source is processed by a program that understands the tags and formats the page
![Page 5: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/5.jpg)
Preparing a Web Page
Writing vehicle Programming in HTML Authoring software
Browser Test the code locally Test the code on the server
Server Test links to other sites Store your published site
![Page 6: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/6.jpg)
Programming in HTML Type tags into a text file (Notepad) HTML editor HTML code must be saved with .html extension
![Page 7: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/7.jpg)
Authoring Software
WYSIWYG “What You See Is What You Get”
Create web page visually HTML code is generated automatically
![Page 8: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/8.jpg)
Preparing a Web Page: Process
Use writing vehicle to create web site pages Test locally using the browser Connect to Internet using your browser Test the links to other sites ‘Publish’ the site to your server Test the site by accessing from the server
![Page 9: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/9.jpg)
HTML: Basic Tags
Tag – tells browser how to display the information provided
Enclosed in angle brackets < > Generally used in pairs
Open tag Closing tag – same tag with ‘/’ in front
Can nest tags Tags cannot overlap
![Page 10: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/10.jpg)
HTML: Document Tags
<HTML> … </HTML>Beginning and end of every HTML document
<HEAD> … </HEAD>Contains information about the document including the title that is to appear in the title bar
<BODY> … </BODY>All content for the page is placed between these tags
![Page 11: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/11.jpg)
HTML: Basic Tags
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
If you view this from the browser, you will see a blank page
![Page 12: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/12.jpg)
HTML: Basic Tags
<TITLE> … </TITLE>Causes the page title to be displayed in the title bar
Place in the heading section between<HEAD> … </HEAD>
![Page 13: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/13.jpg)
HTML: Basic Tags
Add content between <BODY> … </BODY>Text Structure Tags
HeadingsParagraphsListsImages
![Page 14: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/14.jpg)
HTML: Creating and Testing
Open text editor Enter basic document tags
<HTML>
<HEAD> … </HEAD>
<BODY> … >/BODY>
</HTML> Save as .html (as .htm for older M$ systems) Do not close text editor
![Page 15: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/15.jpg)
Open Browser
Open your browser Type file path/name as the URL or use File
Open and select the file The file name should appear in the URL textbox The main window should be blank Do not close the browser
![Page 16: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/16.jpg)
Adding a title to the title bar
Return to the open file in the text editor Add a <TITLE> tag inside <HEAD> Save Return to the browser Click refresh or reload button Check the title bar (aka welcome banner)
![Page 17: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/17.jpg)
Adding content
Add one tag at a time to create content After each addition
Save the file in the text editor Refresh/reload the file in the browser Verify that your entry is correct
![Page 18: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/18.jpg)
HTML Text Tags: Heading Tags
<H1> … </H1> Largest heading
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6> Smallest heading
<H1>Theatre Schedule</H1>
![Page 19: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/19.jpg)
HTML Text Tags: Paragraph Tag
<P> … </P> Blank line inserted before the start of the paragraph One space between adjacent words regardless of the number of
spaces in the source Extra spaces and lines are ignored
<P>Learning HTML is a lot of fun!</P>
![Page 20: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/20.jpg)
HTML Text Tags: Line Break Tag
<BR>Forces a new line
<P>Learning HTML is a lot of <BR>fun!</P>
![Page 21: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/21.jpg)
Lists
<UL> … </UL>Unordered list (bulleted list)
<OL> … </OL>Ordered list (numbered list)
Every item in a list is preceded with <LI>
</LI> at end of each item is optional
List contents are indented
HTML List Tags
![Page 22: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/22.jpg)
HTML Formatting Tags
Make page more attractive Make page more functional Style Tags
Logical Physical
![Page 23: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/23.jpg)
HTML Formatting Tags: Logical Style TagsBrowser dependent
Emphasis Tag<EM> … </EM>
Usually displays italics
Strong emphasis Tag<STRONG> … </STRONG>
Usually displays boldface
![Page 24: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/24.jpg)
Physical Style Tags
Tell browser how to display the textItalics
<I> … </I>
Boldface<B> … </B>
Center<CENTER> … </CENTER>
![Page 25: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/25.jpg)
Images Use images that are appropriate and attractive Use sparingly since they effect download time
If possible reduce actual size of image to fit page
![Page 26: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/26.jpg)
Obtaining Images
Download from a site that offers free images
Pay to use an image Scan an image/document that you own or
have permission to use Digital camera Create original graphics using software
![Page 27: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/27.jpg)
Image File Formats
Acceptable image formats vary by browser Generally acceptable formats are
GIF Graphics Interchange Format Use for graphics
JPG (aka JPEG) Joint Photographic Experts Group Use for photographs
PNG Portable Network Graphics Expected to replace GIF
![Page 28: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/28.jpg)
HTML Image Tag
Inline imageLoaded with HTML code
<IMG>Attributes:
SRCALTHEIGHTWIDTHALIGNHSPACEVSPACE
<IMG SRC=”abcpict.jpg”>
<IMG SRC=”abcpict.jpg” ALIGN=”right” HSPACE=”10”>
![Page 29: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/29.jpg)
HTML Link Tag
Link toOther sites
Between your own pages
To e-mail
<A HREF=”name”>hypertext</A>
<A HREF=”http://www.kodak.com”>Kodak</A>
<A HREF=”johnpage.html”>John’s Page</A>
<A HREF=”mailto:[email protected]”>John’s mail</A>
![Page 30: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/30.jpg)
HTML Tags: Background Color / Graphics
Attributes of <BODY>
BGCOLOR=”code”Specify color for background of the screen
BACKGROUND=”path/file”Tiles the graphic in the file to fit the screen
<BODY BGCOLOR=”green”>
<BODY BGCOLOR=”#00FF00”>
<BODY BACKGROUND=”abcpict.jpg”>
![Page 31: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/31.jpg)
Authoring Software: MicroSoft FrontPage
WYSIWYG Generates HTML code Benefits
Non-technical users can create their own web pages
Technical users can insert HTML inside the generated HTML
![Page 32: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/32.jpg)
Getting Started in FrontPage
Window similar to Office 2000 Windows Process to create a web page
Select the type of page you wish to create Enter content Format content Add a title Add links and graphics View
![Page 33: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/33.jpg)
Navigation View
Shows structure of web site Visual clue showing how the subpages relate
to the main page
![Page 34: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/34.jpg)
Other Views
Folders Lists the files in detail
Reports Provides information of interest to site manager
Hyperlinks Graphics picture of link relationships
Tasks List of items that need to be completed and who is
responsible Useful for collaboration
![Page 35: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/35.jpg)
Page Tabs
Normal tab Viewing the page in WYSIWYG
HTML tab The HTML code for the page Add your own HTML code to this page
Preview Page as it will appear viewed by a browser Switch between HTML tab and Preview tab to see the
effect of changes as you make them
![Page 36: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/36.jpg)
Estimated Loading Time
Listed at the bottom of the page Try to keep loading time low Can be changed to show loading time
using different modem speeds
![Page 37: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/37.jpg)
Themes
Background Fonts Banners Bullets Link buttons
Unified set of design elements and color schemes that you can apply to a page to give it a consistent and attractive appearance
![Page 38: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/38.jpg)
Examples of Themes
![Page 39: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/39.jpg)
Page Templates
Columns
Table of contents
Searches
Guest book
Bibliography
FAQ
Forms for visitors
Forms for customers
Predesigned pages that can contain page settings, formatting, and page elements
![Page 40: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/40.jpg)
Page Templates Examples
![Page 41: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/41.jpg)
Frames
Divides the page into sections
Each section displays a different web page
Each section can be updated individually
Frameset – collection of frames displayed in a single page
![Page 42: Computers: Tools for an Information Age](https://reader035.vdocuments.us/reader035/viewer/2022070405/56813e4f550346895da83e55/html5/thumbnails/42.jpg)
Process of building with frames
Develop each page individually Create frameset page Establish links