Transcript HTML tags
I-Witness An Up-Close look at Building a Web Site Appendix B Student Learning Outcomes 1. List and define basic HTML concepts such as an HTML document and structure tags 2. Use basic formatting tags such as strong, emphasis, and underline 3. Create headings in a Web page using the heading tags 4. Adjust text size and color using the font size and color tags ©2003 The McGraw-Hill Companies Student Learning Outcomes 4. Alter the background of a Web page 5. Add three different types of links to a Web page 6. Include and alter the appearance of images in a Web page 7. Format content within a Web page as a list ©2003 The McGraw-Hill Companies Introduction Building a Web page is easy And it takes very little time You will be able to build your own Web site after reading this appendix ©2003 The McGraw-Hill Companies B.1 HTML Basic Concepts and Structure • Hypertext markup language (HTML) basic language used to create Web pages • HTML tags specify the layout and presentation of information on a Web page • HTML document file that contains HTML tags and the information you want to appear on your Web page ©2003 The McGraw-Hill Companies Structure Tags • HTML tags that set up the necessary sections and specify that the document is indeed an HTML document • <html> & </html> - start and end the HTML document • <head> & </head> - start and end the header section • <body> & </body> - start and end the body section ©2003 The McGraw-Hill Companies Structure Tags <html> <head> Add a title and meta tags here </head> <body> Add your content and HTML formatting tags here </body> </html> ©2003 The McGraw-Hill Companies HTML Document and Web Page The displayed Web page The HTML document ©2003 The McGraw-Hill Companies Working Locally • You need to post your Web page to your Web space for everyone to see it • While working on your Web page, you can do so locally • Save your HTML document to your hard disk • Start your browser and search for your Web page on your hard disk ©2003 The McGraw-Hill Companies B.2 Basic Text Formatting • <strong>This is bold</strong> produces – This is bold • <em>This is italics</em> produces – This is italics • <u>This is underline</u> produces – This is underline • <em><u>This is a combination</u></em> produces – This is a combination ©2003 The McGraw-Hill Companies Basic Text Formatting • Carriage returns are ignored in hyperspace • To create a blank line use <br> • To create a horizontal line in your Web page use <hr> ©2003 The McGraw-Hill Companies Basic Text Formatting Can you find the basic text formatting tags below that create the Web page to the left? ©2003 The McGraw-Hill Companies B.3 Creating Headings • Heading tags HTML tags that make certain information, such as titles, stand out on your Web page • <h1> &</h1> are for very large headings • <h6> &</h6> are for very small headings ©2003 The McGraw-Hill Companies Creating Headings Can you find the heading tags below that create the Web page to the left? ©2003 The McGraw-Hill Companies B.4 Adjusting Text Size • The default text size is 3 • Larger numbers create larger text • Use <font size=“number”> and </font>, where number is a positive integer, to adjust text size • <font size=“5”>A</font>djusting text size produces –Adjusting text size ©2003 The McGraw-Hill Companies Adjusting Text Size Can you find the HTML tags below that adjust the text size for the Web page to the left? ©2003 The McGraw-Hill Companies B.5 Adjusting Text Color • The default color of text is black • Use <font color=“color name”> and </font>, where color name is a logical color name such as green, to change text color • You can change colors as often as you wish ©2003 The McGraw-Hill Companies Adjusting Text Color Can you find the HTML tags below that change the text color for the Web page to the left? ©2003 The McGraw-Hill Companies B.6 Changing the Background Color • The default background color is white • Use <body bgcolor=“color name”>, where color name is a logical color name such as green, to change the background color • You can only change the background color once ©2003 The McGraw-Hill Companies Changing the Background Color What HTML tag below changes the background color to green? ©2003 The McGraw-Hill Companies B.7 Changing the Background Texture • You can add a background texture • You must specify the use of an image • A Web browser will duplicate the image down and across for your entire Web page • Use <body background=“filename.extension”>, where filename.extension is the name of file containing your image, to change the background texture ©2003 The McGraw-Hill Companies Changing the Background Texture What HTML tag below changes the background texture? ©2003 The McGraw-Hill Companies B.8 Adding Links to a Web Site • Three types of links – To other pages and sites – To downloadable files – To e-mail • All use the general format of <a href=“address or file name”>text to appear on screen</a> ©2003 The McGraw-Hill Companies Adding Links to a Web Site • Link to MTV – <a href=“www.mtv.com”>Visit MTV</a> • Link to download Sample.xls – <a href=“Sample.xls”>Download a workbook</a> • Link to e-mail – <a href=“mailto:[email protected]”>Click here to send us your comments</a> ©2003 The McGraw-Hill Companies Adding Links to a Web Site Can you identify the link tags below? ©2003 The McGraw-Hill Companies B.9 Adding Images • Use <img src=“filename.extension”>, where filename.extension is the name of the file containing an image, to insert an image into your Web page • The file must be stored in your Web space ©2003 The McGraw-Hill Companies Altering Images • For alignment – Left – default placement – Right – add align=“right” to img src tag – Center – surround img src tag with <center> and </center> • For sizing – Add height=pixel count and width=pixel count to img src tag ©2003 The McGraw-Hill Companies Images Can you identify the image tags to the right that display the photos above? ©2003 The McGraw-Hill Companies B.10 Creating and Using Lists • Two types of lists – Numbered (ordered) – Unnumbered (bulleted) • Numbered lists – start and end with <ol> and </ol> • Unnumbered lists – start and end with <ul> and </ul> • All list items start with <li> ©2003 The McGraw-Hill Companies Numbered Lists <ol> <li> first item <li> second item <li> third item </ol> Produces 1. First item 2. Second item 3. Third item ©2003 The McGraw-Hill Companies Unnumbered Lists <ul> <li> first item <li> second item <li> third item </ul> Produces • • • First item Second item Third item ©2003 The McGraw-Hill Companies