Creating a Web Page Using HTML 4.02 Develop web pages using various layouts and technologies. (Note to instructor: HTML tags are in red only to differentiate from regular text.)
HTML Tags Purpose of Tags: Define and describe text, graphics, hypertext links, and other multimedia elements found on WWW pages Mark- up documents Tell the browser how to display the document By viewing the source code of a web page, the user can see the HTML tags used to display the page.
Using HTML Tags An HTML tag begins with a < character and ends with a > character. Between these characters is the actual tag name, such as body or head. <body> is an example of a correct tag. Tags should appear in pairs, with an opening tag <html> and a closing tag </html>. The only difference between the opening and closing tag is the / used in the closing tag.
Using HTML Tags Text entered between the HTML tags is formatted with the code specified by those tags. Example: <h1>Welcome to my website!</h1> The browser will turn on formatting at heading level 1 to display the text and then turn it off at the end of that text. Note the source code showing the 6 levels of the heading tag.
HTML vs. XHTML W3C created XHTML as an extended version of HTML. The new standard requires some modification of the old HTML standard. All tags must be in lowercase. All tags must have a closing tag. All tags must be properly nested. The <html> tag must be the root tag for every document. While many old browsers can display “old” HTML, newer ones rely on the current standard. Remember, web pages are accessed from desktop computers, mobile phones and handheld devices—all using a variety of browser technologies!
Nesting HTML Tags Nesting refers to sets of tags that are enclosed inside other sets of tags and refer to the same text or object. Example <center><h2><p>GIF files are popular for use on the World Wide Web. They contain up to 256 colors. They are used for cartoons, logos, graphics with transparent areas, and animations.</p></h2> </center> Enter the closing tags in the reverse order from the opening tags to achieve proper nesting. By closing the tags in a different order than they were opened, the browser may not be able to display the page as intended by the author.
Adding Attributes to Tags Attributes to tags specify additional preferences and program a specific value. Example: The anchor tag, <a>, defines an anchor that converts text or an image into a hyperlink. <a href=http://www.unc.edu>University of North Carolina</a> href is the attribute instructing the browser to set the text between the anchor tags as a hyperlink to the specified web address.
Using Multiple Attributes Not all tags have multiple attributes. If a tag has an attribute or attributes available and no attribute is specified, the browser will use the default attribute for that tag. To make sure that pages are displayed as intended, always specify the intended attribute. Example <img src=“image.gif” alt=“smiley face image” /> In this example the image tag instructs the browser to display the graphic with the source attribute of image.gif. The alt attribute instructs the browser to display alternative text if the image file will not load. For a comprehensive list of tags and attributes visit www.w3schools.com/html/html_reference.asp
Creating and Saving HTML Files Use any text editor to enter HTML code and create a web page. Save the file as an HTML file using .html as the extension. Many old browsers will display files with the .htm extension but the latest standard requires .html Launch a web browser and open the file to display the page. (Check the page out with several different browsers to see how each browser displays the HTML file.)