Unformatted text preview:

Computers:Tools for an Information AgeObjectivesWorld Wide WebHTML: HyperText Markup LanguagePreparing a Web PageProgramming in HTMLAuthoring SoftwarePreparing a Web Page: ProcessHTML: Basic TagsHTML: Document TagsHTML: Basic TagsHTML: Basic TagsHTML: Basic TagsHTML: Creating and TestingOpen BrowserAdding a title to the title barAdding contentHTML Text Tags: Heading TagsHTML Text Tags: Paragraph TagHTML Text Tags: Line Break TagListsHTML Formatting TagsHTML Formatting Tags: Logical Style TagsPhysical Style TagsImagesObtaining ImagesImage File FormatsHTML Image TagHTML Link TagHTML Tags: Background Color / GraphicsAuthoring Software: MicroSoft FrontPageGetting Started in FrontPageNavigation ViewOther ViewsPage TabsEstimated Loading TimeThemesExamples of ThemesPage TemplatesPage Templates ExamplesFramesProcess of building with framesComputers:Tools for an Information AgeWriting Your Own Web Page: Using HTML and Web Authoring ToolsObjectives 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.World Wide Web Provides multimedia communication over the Internet HTML drives the web HyperText Markup Language The language of browsersHTML: 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 pagePreparing 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 siteProgramming in HTML Type tags into a text file (Notepad) HTML editor HTML code must be saved with .html extensionAuthoring Software WYSIWYG “What You See Is What You Get” Create web page visually HTML code is generated automaticallyPreparing 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 serverHTML: 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 overlapHTML: 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 tagsHTML: Basic Tags<HTML><HEAD></HEAD><BODY></BODY></HTML>If you view this from the browser, you will see a blank pageHTML: Basic Tags<TITLE> … </TITLE>Causes the page title to be displayed in the title barPlace in the heading section between<HEAD> … </HEAD>HTML: Basic TagsAdd content between <BODY> … </BODY>Text Structure TagsHeadingsParagraphsListsImagesHTML: 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 editorOpen 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 browserAdding 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)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 correctHTML Text Tags: Heading Tags<H1> … </H1> Largest heading<H2> … </H2><H3> … </H3><H4> … </H4><H5> … </H5><H6> … </H6> Smallest heading<H1>Theatre Schedule</H1>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>HTML Text Tags: Line Break Tag<BR>Forces a new line<P>Learning HTML is a lot of <BR>fun!</P>ListsHTML List Tags<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 optionalList contents are indentedHTML Formatting Tags Make page more attractive Make page more functional Style Tags Logical PhysicalHTML Formatting Tags: Logical Style TagsBrowser dependentEmphasis Tag<EM> … </EM>Usually displays italicsStrong emphasis Tag<STRONG> … </STRONG>Usually displays boldfacePhysical Style TagsTell browser how to display the textItalics<I> … </I>Boldface<B> … </B>Center<CENTER> … </CENTER>Images Use images that are appropriate and attractive Use sparingly since they effect download time If possible reduce actual size of image to fit pageObtaining 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 softwareImage 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 GIFHTML Image TagInline imageLoaded with HTML code<IMG>Attributes:SRCALTHEIGHTWIDTHALIGNHSPACEVSPACE<IMG SRC=”abcpict.jpg”><IMG SRC=”abcpict.jpg” ALIGN=”right” HSPACE=”10”>HTML Link TagLink toOther sitesBetween your own pagesTo 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>HTML Tags: Background Color / GraphicsAttributes of <BODY>BGCOLOR=”code”Specify color for background of the screenBACKGROUND=”path/file”Tiles the graphic in the file


View Full Document

UCSC CMPE 003 - Tools for an Information Age

Download Tools for an Information Age
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Tools for an Information Age and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Tools for an Information Age 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?