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 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 browsers 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 Preparing a Web Page Writing vehicle Browser Programming in HTML Authoring software Test the code locally Test the code on the server Server Test links to other sites Store your published site Programming in HTML Type tags into a text file Notepad HTML editor HTML code must be saved with html extension Authoring Software WYSIWYG What You See Is What You Get Create web page visually HTML code is generated automatically 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 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 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 HTML Basic Tags HTML HEAD HEAD BODY BODY HTML If you view this from the browser you will see a blank page HTML Basic Tags TITLE TITLE Causes the page title to be displayed in the title bar Place in the heading section between HEAD HEAD HTML Basic Tags Add content between BODY BODY Text Structure Tags Headings Paragraphs Lists Images 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 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 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 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 HTML Text Tags Heading Tags H1 H1 H2 H2 H3 H3 H4 H4 H5 H5 H6 H6 Largest heading 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 Lists HTML 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 optional List contents are indented HTML Formatting Tags Make page more attractive Make page more functional Style Tags Logical Physical HTML Formatting Tags Logical Style Tags Browser dependent Emphasis Tag EM EM Usually displays italics Strong emphasis Tag STRONG STRONG Usually displays boldface Physical Style Tags Tell browser how to display the text Italics 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 page 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 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 HTML Image Tag Inline image Loaded with HTML code IMG Attributes SRC ALT HEIGHT WIDTH ALIGN HSPACE VSPACE IMG SRC abcpict jpg IMG SRC abcpict jpg ALIGN right HSPACE 10 HTML Link Tag Link to Other 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 johnsmith practice com John s mail A 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 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 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 Navigation View Shows structure of web site Visual clue showing how the subpages relate to the main page Other Views Folders Reports Provides information of interest to site manager Hyperlinks Lists the files in detail Graphics picture of link relationships Tasks List of items that need to be completed and who is responsible Useful for collaboration Page Tabs Normal tab HTML tab Viewing the page in WYSIWYG 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 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 Themes Unified set of design elements and color schemes that you can apply to a page to give it a consistent and attractive appearance Background Fonts Banners Bullets Link buttons