Introduction to HTML EVALUATION COPY. (HTM101 version 3.1.5) Copyright Information. Copyright 2013 Webucator. All rights reserved.

Size: px

Start display at page:

Britton Neal
6 years ago
Views:

1 Introduction to HTML (HTM101 version 3.1.5) Copyright Information Copyright 2013 Webucator. All rights reserved. The Author Nat Dunn Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both. Nat began programming games in Basic on a TRS-80 at age 14. He has been developing websites and providing web development training since Accompanying Class Files This manual comes with accompanying class files, which your instructor or sales representative will point out to you. Most code samples and exercise and solution files found in the manual can also be found in the class files at the locations indicated at the top of the code listings. Due to space limitations, the code listings sometimes have line wrapping, where no line wrapping occurs in the actual code sample. This is indicated in the manual using three greater than signs: >>> at the beginning of each wrapped line. In other cases, the space limitations are such that we have inserted a forced line break in the middle of a word. When this occurs, we append the following symbol at the end of the line before the actual break:»»

3 Table of Contents Table of Contents 1. A Quick Overview of Web Development...1 Client-side Programming...1 HTML...1 Cascading Style Sheets...1 JavaScript...1 Dynamic HTML...1 Ajax...1 Adobe Flash...2 Server-side Programming...2 Perl...2 ColdFusion...2 Active Server Pages...3 Java EE...3 ASP.NET...3 PHP...4 Ruby on Rails Introduction to HTML...5 Getting Started...5 Exercise 1: A Simple HTML Document...6 The HTML Skeleton...9 The <head> Element...9 The <body> Element...9 Whitespace...9 HTML Elements...10 Attributes...11 Empty vs. Container Tags...11 Blocks and Inline Elements...11 Comments...12 Special Characters...12 The HTML/XHTML Version...13 DOCTYPE Declarations...13 Closing Tags...15 Case Sensitivity...15 Quotes...15 Nesting...16 Some XML Stuff...16 HTML lang and xml:lang...17 Version: Printed: i

4 Table of Contents 3. Paragraphs, Headings and Text...19 Paragraphs...19 Breaks and Horizontal Rules...23 Exercise 2: Creating an HTML Page...25 Quoted Text...28 Preformatted Text...29 Phrase Elements...31 HTML 4 Formatting Elements...32 Documenting Changes HTML Links...37 Text Links...37 Absolute vs. Relative Paths...38 Absolute Paths...38 Relative Paths...39 Default Pages...39 Targeting New Windows Links...40 Exercise 3: Adding Links...41 Anchors...44 Anchors with the name Attribute...44 Anchors with the id Attribute...46 name vs. id...46 The title Attribute HTML Images...49 Inserting Images...49 Making Images Accessible...50 Alternative Text...50 Long Descriptions...51 Height and Width Attributes...51 Image Links...52 Exercise 4: Adding Images to the Page HTML Lists...57 Unordered Lists...57 Nesting Unordered Lists...58 Ordered Lists...62 Nesting Ordered Lists...63 Start Attribute...65 Definition Lists...66 Exercise 5: Creating Lists...69 ii Copyright 2013 Webucator. All rights reserved.

5 Table of Contents 7. HTML Tables...77 Creating Tables...77 Adding a Caption...78 Attributes...79 Merging Cells...82 Exercise 6: Creating Tables HTML Forms...89 How HTML Forms Work...89 The <form> Tag...90 Get vs. Post...90 Form Elements...92 id and Name Attributes...92 Labels...92 Text Fields...93 Password Fields...93 Submit and Reset Buttons...94 Hidden Fields...94 Exercise 7: Creating a Registration Form...96 Checkboxes...99 Radio Buttons...99 Exercise 8: Adding Checkboxes and Radio Buttons Select Menus Textareas Exercise 9: Adding a Select Menu and a Textarea Version: Printed: iii

6 Table of Contents 9. Crash Course in CSS Benefits of Cascading Style Sheets CSS Rules CSS Comments Selectors Type Selectors Descendant Selectors Child Selectors Class Selectors ID Selectors Attribute Selectors The Universal Selector Grouping Precedence of Selectors Determining a Selector's Specificity The Cascade Embedded Style Sheets Exercise 10: Creating an Embedded Style Sheet External Style Sheets Exercise 11: Creating an External Style Sheet Inline Styles Exercise 12: Adding Inline Styles Media Types <div> and <span> Exercise 13: Divs and Spans Units of Measurement Pixels (px) Points (pt) Inches (in), Centimeters (cm), and Millimeters (mm) Picas (pc) Ems (em) Exs (ex) The Inherit Appendix 1. HTML Formatting Simple Formatting Tags The <font> Tag size color face <basefont> Exercise 14: Adding Formatting to the Page Applying Colors to the Page Aligning Text The <center> Tag The align Attribute Exercise 15: Applying Color and Aligning Text iv Copyright 2013 Webucator. All rights reserved.

7 A Quick Overview of Web Development 1. A Quick Overview of Web Development 1.1 In this lesson, you will learn About client-side web development languages. 2. About server-side web development languages. Web development involves a combination of client-side programming and server-side programming. Client-side Programming Client-side programming involves writing code that is interpreted by a browser such as Internet Explorer or Mozilla Firefox or by any other web client such as a cell phone. The most common languages and technologies used in client-side programming are HTML, JavaScript, Cascading Style Sheets (CSS), and Adobe Flash. HTML HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure and format of the content on a web page. Cascading Style Sheets Cascading Style Sheets (CSS) is used in HTML pages to separate formatting and layout from content. Rules defining color, size, positioning and other display aspects of elements are defined in the HTML page or in linked CSS pages. JavaScript 1 JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms, pop up new windows, and create dynamic effects such as dropdown menus and image rollovers. Dynamic HTML Dynamic HTML is not a language in and of itself, but rather refers to code that uses JavaScript to manipulate CSS properties on the fly. 1. The word "JavaScript" is a proprietary name for Netscape's version of ECMAScript. Microsoft's version of this language is called JScript. Version: Printed: Page 1 of 159

8 A Quick Overview of Web Development Ajax The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript And XML," 2 but is now used much more broadly to cover all methods of communicating with a server using JavaScript. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. Adobe Flash At the time of this writing, according to Adobe's website, more than 97% of computers connected to the internet have Flash Player installed. The Flash Player is a plug-in to Internet Explorer and other web browsers. It enables browsers to display dynamic graphical web pages that can be visually more fluid than pages that are built with Dynamic HTML. Flash pages are called movies and they are created using special software (also called Flash). ActionScript, a language similar to JavaScript, is used to manipulate Flash objects to make movies more interactive. At the time of this writing, designers are either moving to JavaScript or converting existing Flash videos to HTML5. However, converting is a challenge because not all features of Flash can be converted. Tools to solve this issue are currently being introduced by Adobe (with Wallaby) and Google (with Swiffy) and others. 1.2 Server-side Programming Server-side programming involves writing code that connects web pages with databases, XML pages, servers, file systems and other systems and software accessible from the web server. The most common server-side languages and programming frameworks are Perl, ColdFusion, Active Server Pages, Java (in many flavors), ASP.NET and PHP. Perl Perl was the first server-side language to become popular in web development. Originally derived from C, its relative simplicity and strengths in file and text manipulation and the fact that it is open source made it a good choice for writing CGI scripts. Although Perl is still widely used, it is not as popular a choice for new web projects as some of the other server-side languages discussed below. 2. Ajax: A New Approach to Web Applications - Page 2 of 159 Copyright 2013 Webucator. All rights reserved.

9 ColdFusion ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to understand than some of the other choices. Because of the relative ease with which it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion code is compiled to Java bytecode, which means the pages run quickly. Web developers can accomplish virtually any required task using the ColdFusion Markup Language (CFML). However, as ColdFusion can easily be integrated with Java applications, developers have the choice of using Java to extend ColdFusion applications. Active Server Pages Microsoft Active Server Pages (ASP) is a framework that allows developers to write server-side pages in many scripting languages; however, VBScript and JScript are the only commonly used choices. ASP became popular quickly and sites with pages ending in.asp are now all over the web. It is not as simple as ColdFusion, but it has the huge advantage of being built in to Microsoft Internet Information Server (IIS). Although still commonly used, ASP has been replaced by Microsoft with ASP.NET, an architecture that is much more similar to Java's than to traditional ASP's. Java EE Java EE is used in large web projects. With its power and robustness comes a steep learning curve. Java EE is defined by its specification ( cle.com/javaee/) and API ( A Java Application Server (Java AS) manages servlets, JavaServer Pages (JSP), Web Services, and Enterprise JavaBeans (EJB). Java EE also includes a number of other APIs commonly linked to enterprise application development. JDBC, JPA, , JMS, and XML are some examples. But that's only part of the picture. There are a number of frameworks built on some of these technologies that streamlines the development process further. Hibernate offers most of the object/relational mapping (ORM) without an EJB Container. For this reason it's called a lightweight ORM technology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do away with scriptlets completely, relying on HTML style tags and associated JavaBeans. ASP.NET A Quick Overview of Web Development Microsoft's ASP.NET is not a language, but a framework for writing websites and software. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run faster than traditional ASP pages do. ASP.NET pages Version: Printed: Page 3 of 159

10 A Quick Overview of Web Development can be written in many languages, but the most popular are C# (pronounced C-sharp) and Visual Basic.NET (VB.NET). PHP Like Perl, PHP is open source. It has rapidly become a popular alternative to the proprietary languages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn and runs on almost all commonly used web servers. A nice feature is that it can be integrated with both Java and COM. Ruby on Rails Wikipedia describes Ruby on Rails as "a web application framework that aims to increase the speed and ease with which database-driven websites can be created and offers skeleton code frameworks (scaffolding) from the outset. Often shortened to Rails, or RoR, Ruby On Rails is an open source project written in the Ruby programming language and applications using the Rails framework are developed using the Model-View-Controller design pattern." Conclusion This lesson has provided a general overview of the different languages and frameworks commonly used in web development Page 4 of 159 Copyright 2013 Webucator. All rights reserved.

11 Introduction to HTML 2. Introduction to HTML In this lesson, you will learn To create a simple HTML page. 2. About HTML elements and attributes. 3. The difference between HTML and XHTML. 4. To create the skeleton of an HTML document. 5. About whitespace and HTML. 6. To output special characters in HTML. 7. How the introduction of HTML5 has affected HTML development. HyperText Markup Language (HTML) is the language behind most Web pages. The language is made up of elements that describe the structure and format of the content on a Web page. HTML is maintained by the World Wide Web Consortium (W3C). As of this writing, the latest versions are HTML 4.01 and XHTML 1.0. See and for the specifications. In this lesson, we will address the differences between HTML and XHTML and discuss the effect of HTML Getting Started We'll begin with a simple exercise. Version: Printed: Page 5 of 159

Introduction to HTML Exercise 1 5 to 15 minutes A Simple HTML Document In this exercise, you will create your first HTML document by simply copying the text shown below.

12 Introduction to HTML Exercise 1 5 to 15 minutes A Simple HTML Document In this exercise, you will create your first HTML document by simply copying the text shown below. The purpose is to give you some sense of the structure of an HTML document. 1. Open a simple text editor such as Notepad and create a new file. Do not use an HTML editor for this exercise. 2. Save the file as HelloWorld.html in the HTMLBasics/Exercises folder. 3. Type the following exactly as shown: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>hello world!</title> </head> <body> Hello world! </body> </html> 4. Save the file again and then open it in your browser by navigating to the file in your folder system and double-clicking on it. The page should appear as follows: Page 6 of 159 Copyright 2013 Webucator. All rights reserved.

13 Introduction to HTML Version: Printed: Page 7 of 159

14 Introduction to HTML Exercise Solution HTMLBasics/Solutions/HelloWorld.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>hello world!</title> </head> <body> Hello world! </body> </html> Page 8 of 159 Copyright 2013 Webucator. All rights reserved.

15 Introduction to HTML 2.2 The HTML Skeleton Code Sample At its simplest, an HTML page contains what can be thought of as a skeleton - the main structure of the page. It looks like this: HTMLBasics/Demos/Skeleton.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>  </body> </html> The <head> Element The <head> element contains content that is not displayed on the page itself. Some of the elements commonly found in the <head> are: Title of the page (<title>). Browsers typically show the title in the "title bar" at the top of the browser window. Meta tags, which contain descriptive information about the page (<meta>). Script blocks, which contain javascript or vbscript code for adding functionality and interactivity to a page (<script>). Style blocks, which contain Cascading Style Sheet rules (<style>). References (or links) to external style sheets (<link>). The <body> Element The <body> element contains all of the content that appears on the page itself. Body tags will be covered thoroughly throughout this manual. Whitespace Extra whitespace is ignored in HTML. This means that all hard returns, tabs and multiple spaces are condensed into a single space for display purposes. Version: Printed: Page 9 of 159

16 Introduction to HTML Code Sample HTMLBasics/Demos/Whitespace.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>whitespace Example</title> </head> <body> This is a sentence on a single line. This is a sentence with extra whitespace throughout. </body> </html> Code Explanation The two sentences in the code above will be rendered in exactly the same way. 2.3 HTML Elements HTML elements describe the structure and content of a Web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows: Page 10 of 159 Copyright 2013 Webucator. All rights reserved.

17 Introduction to HTML <tagname>element content</tagname> Attributes Tags often have attributes for further defining the element. Attributes come in name-value pairs 4 Note that attributes only appear in the open tag, like so: <tagname att1="value" att2="value">element content</tagname> The order of attributes is not important. Empty vs. Container Tags The tags shown above are called container tags because they have both an open and close tag with content contained between them. Tags that do not contain content are called empty tags. The syntax is as follows: <tagname> or <tagname att1="value" att2="value"> Blocks and Inline Elements Block-level Elements Block elements are elements that separate a block of content. For example, a paragraph (<p>) element is a block element. Other block elements include: Lists (<ul> and <ol>) Tables (<table>) Forms (<form>) Divs (<div>) 4. In HTML (without the X) some tags have attributes that don't take a value, like so: <tagname att1>element content</tagname> This is not allowed in XHTML. Version: Printed: Page 11 of 159

18 Introduction to HTML Inline Elements Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include: Links (<a>) Images (<img>) Formatting tags (<b>, <i>, <tt>, etc.) 5 Phrase elements (<em>, <strong>, <code>, etc.) Spans (<span>) Comments Comments are generally used for one of three purposes. 1. To write helpful notes about the code; for example, why something is written in a specific way. 2. To comment out some code that is not currently needed, but may be used sometime in the future. 3. To debug a page. HTML comments are enclosed in . For example:  2.4 Special Characters Special characters (i.e, characters that do not show up on your keyboard) can be added to HTML pages using entity names and numbers. For example, a copyright 5. Many formatting tags have been deprecated in HTML 4.0 and XHTML 1.0. Although the ones listed here are not deprecated, their use is discouraged as the same effect can be accomplished with CSS. Page 12 of 159 Copyright 2013 Webucator. All rights reserved.

Introduction to HTML symbol ( ) can be added using or. The following table shows some of the more common character references. 2.5 The HTML/XHTML Version XHTML 1.0 and HTML 4.

19 Introduction to HTML symbol ( ) can be added using or. The following table shows some of the more common character references. 2.5 The HTML/XHTML Version XHTML 1.0 and HTML 4.0 consist of the same sets of elements. (HTML5 introduces some new elements, but those are not covered in this course.) The only difference between HTML and XHTML is that HTML is fairly flexible; whereas, XHTML has strict rules. 6 DOCTYPE Declarations The DOCTYPE declaration goes at the beginning of the document and is used to indicate which version of (X)HTML the page uses. There are three versions of 6. HTML is a SGML-based; whereas XHTML is XML-based. XML and SGML are both meta-languages (languages for defining other languages). XML applies stricter rules than SGML does. Version: Printed: Page 13 of 159

20 Introduction to HTML (X)HTML documents: strict, frameset and transitional (loose). In HTML, the DOCTYPE declaration is optional. In XHTML, it is required. All this DOCTYPE stuff used to be really important and is explained below, but with the introduction of HTML5, there is an easy way out, which we highly recommend as it is both simpler and forward-compatible. Instead of worrying about the complicated DOCTYPEs explained below, simply use the new HTML5 DOCTYPE: <!DOCTYPE HTML> This DOCTYPE is, believe it or not, completely backward compatible and will make all browsers work in "standards mode." As many web pages will still use the old DOCTYPEs, they are worth understanding and are explained below. Strict The strict versions of HTML and XHTML do not allow use of tags and attributes that have been deprecated. 7 The strict versions do not support framesets. XHTML Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " HTML Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional (Loose) The transitional (or loose) versions of HTML and XHTML allow for the use of deprecated tags and attributes. The transitional versions also do not support framesets. 7. Deprecated tags are tags that the W3C has indicated may eventually be removed from the specification because of new and better ways of accomplishing the same thing. Most of these tags are for formatting; the W3C recommends using Cascading Style Sheets instead. See for a list of deprecated tags. Page 14 of 159 Copyright 2013 Webucator. All rights reserved.

21 Introduction to HTML XHTML Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " HTML Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset The frameset versions of HTML and XHTML are the same as the transitional versions, except that they also support frames. XHTML Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " HTML Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Closing Tags HTML 4.0 allows some closing tags to be omitted. For example, in HTML, list item (<li>) tags do not require a matching close tag (</li>). In XHTML, all tags must be closed. Empty tags are closed by adding a forward slash before the final angle bracket of the tag: <tagname att1="value" att2="value" /> Note the space before the forward slash. Though this is not required by XHTML, it may help older browsers from getting confused. In HTML 4.0, the forward slash is not required: <tagname att1="value" att2="value"> Case Sensitivity In HTML, case is not important. In XHTML, all tags and attributes must be in lowercase letters. Version: Printed: Page 15 of 159

22 Introduction to HTML Quotes In HTML, attribute values do not always have to be in quotes; whereas, in XHTML quotes are required. Either single quotes or double quotes may be used. Nesting In both HTML and XHTML, tags should be nested properly. Proper nesting requires nested tags to be closed in reverse order from which they were opened. Another way to say this is that each element must be completely contained by its parent element. For example, the following line of code uses improper nesting: <parent><child>sometext</parent></child> The corrected line looks like this: <parent><child>sometext</child></parent> Some XML Stuff The XML Declaration XHTML documents are, by definition, XML documents. This means that they follow the rules of XML. Although not required, it is good practice to include an XML declaration in your XHTML documents. If included, the XML declaration must be at the very beginning of the document. The XML declaration looks like this: <?xml version="1.0" encoding="utf-8"?> For best results, it is best to define the encoding in a meta tag as well. Note that you should include the following tag within the head tag: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> The XHTML Namespace In XHTML documents, the html tag must contain an xmlns declaration for the XHTML namespace, which indicates that the document must conform to the rules defined in the XHTML namespace. The syntax is shown below: <html xmlns=" Page 16 of 159 Copyright 2013 Webucator. All rights reserved.

23 Introduction to HTML 2.6 HTML5 Although HTML5 is not fully supported by modern browsers, there are a couple of things you can start doing right now: 1. Use the new simpler DOCTYPE: <!DOCTYPE HTML> 2. Use this simpler meta tag to specify the character set: <meta charset="utf-8"> You can also safely avoid all the XHTML stuff, including the XML declaration and the XHTML namespace. This makes the opening of your HTML page simpler: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> 2.7 lang and xml:lang The lang and xml:lang attributes are used to tell the browser (or other user agent) the language contained within an element. The W3C recommends that both lang and xml:lang be included in the html tag of all XHTML documents, like so: <html xmlns=" xml:lang="en" lang="en"> According to the W3C, these attributes may be helpful in: 8 Assisting search engines Assisting speech synthesizers Helping a user agent select glyph variants for high quality typography Helping a user agent choose a set of quotation marks Helping a user agent make decisions about hyphenation, ligatures, and spacing Assisting spell checkers and grammar checkers 2.8 Conclusion In this lesson, you have learned the basics of HTML. You should understand how an HTML page is structured, know the major differences between HTML and XHTML and understand the basic syntax of HTML tags Version: Printed: Page 17 of 159

25 HTML Images 5. HTML Images 5.1 Code Sample In this lesson, you will learn To add images to a website. 2. To create image links. 3. To make images accessible. Modern browsers generally support three types of images: GIFs, JPEGs, and PNGs. The PNG and GIF are generally used for simple images such as drawings; whereas the JPEG format is used for more complicated images such as photographs. Inserting Images Inserting images in web pages is done by placing an img tag in the HTML code. The <img> tag is an empty tag. Its src attribute is used to reference an image file using a relative or absolute path. The syntax is as follows. Syntax Images/Demos/Images.html <img src="path_to_image_file" alt="alternative text"> The following page shows how to use the <img> tag: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>images</title> </head> <body> <h1>images</h1> <p><img src=" alt="logo"></p> <hr> <p><img src="images/pooh.jpg" alt="pooh Bear"></p> <hr> <p><img src="images/runnershome.gif" alt="runners Home"></p> </body> </html> Version: Printed: Page 49 of 159

HTML Images Code Explanation The page will render as follows: Making Images Accessible Alternative Text To add alternate text for an image, use the alt attribute.

26 HTML Images Code Explanation The page will render as follows: Making Images Accessible Alternative Text To add alternate text for an image, use the alt attribute. <img src="logo.gif" alt="logo"> Alternate text is displayed... When the user's browser does not support images. Page 50 of 159 Copyright 2013 Webucator. All rights reserved.

27 HTML Images Code Sample As the image is downloading. When the user hovers over the image with the mouse (in some browsers). Alternate text can also be used by screenreaders to describe an image for the visually impaired. Long Descriptions If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page. The longdesc attribute of the <img> tag is used to point to that description. For example: Images/Demos/LongDesc.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>long Description</title> </head> <body> <h1>long Description</h1> <p><img src="images/bigmac.jpg" alt="big Mac Nutrition Information" longdesc="bigmac.html"></p> </body> </html> Code Explanation The browsers don't do anything with the longdesc value, but modern screenreaders make use of it. Freedom Scientific, the makers of Jaws, one of the most popular screenreaders, say this about their support for longdesc: JAWS now supports the "Longdesc" attribute in HTML within Internet Explorer 5.x and 6. The "Longdesc" attribute allows a long description of graphics to be provided on a separate page. The "Longdesc" attribute contains the address of the descriptive page. After reading any Alt text for the graphic, JAWS announces there is a long description and the address of the page. Just press ENTER to open the page containing the long description in a new window Version: Printed: Page 51 of 159

28 HTML Images 5.2 Height and Width Attributes The img element also takes height and width attributes that set the dimensions (in pixels) to use to display the image on the page. It is not good practice to "resize" the image using these attributes. If you use these attributes, you should set the values to the actual height and width of the image. Using the height and width attributes lets the browser know how much space to allocate for the image without having to wait for the image itself to download. This may make for a smoother initial display of the page. <img src="logo.gif" alt="logo" height="100" width="300"> Image Links Creating image links is easy. Simply put an <a> tag around your image, like so... <a href="index.html" title="link to Home Page"><img src="images/lo»» go.gif"></a> By default, most browsers will place a one-pixel border around a linked image. 18 For examples of linked images, see Images/Demos/ImageLinks.html. 18. This border can be removed with CSS. Page 52 of 159 Copyright 2013 Webucator. All rights reserved.

Exercise 4 5 to 10 minutes Adding Images to the Page HTML Images In this exercise, you will add an image to index.html. The resulting page is shown below. 1. Open Images/Exercises/index.

29 Exercise 4 5 to 10 minutes Adding Images to the Page HTML Images In this exercise, you will add an image to index.html. The resulting page is shown below. 1. Open Images/Exercises/index.html for editing. 2. Add the image called RunnersHome.gif in the Images/Exercises/Images directory, so that the page appears as shown in the screenshot above. The alternative text should be "Runners Home Logo". There is no need for a long description. Version: Printed: Page 53 of 159

30 HTML Images Exercise Solution Images/Solutions/index.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>runners Home </title> </head> <body> <div> <a href="index.html">home</a> <a href="races.html">races</a> <a href="resources.html">resources</a> <a href="calculator.html">calculator</a> <a href="runninglog.html">running Log</a> <a href="myaccount.html">my Account</a> <a href="logout.html">log out</a> </div> <p>hello, Stranger!</p> <h1>welcome to Runners Home </h1> <p> <img src="images/runnershome.gif" alt="logo"><br> Runners Home is dedicated to providing you with:<br> <a href="races.html">the most up-to-date information on running races</a>.<br> <a href="resources.html">the best resources for runners</a>. </p> <hr> <p> 2011 Runners Home. All rights reserved. For questions, send to <a shome.com</a>.</p> </body> </html> Page 54 of 159 Copyright 2013 Webucator. All rights reserved.

31 HTML Images 5.3 Conclusion In this lesson you have learned to add images to a web page, to make those images accessible, and to create image links. Version: Printed: Page 55 of 159

is Introduction to HTML

is Introduction to HTML or tri N s di IO n tio AT uc od pr re U ed AL riz ho ut na EV U n is i ib d tie PY oh pr O C io t bu Introduction to HTML (HTM101 version 4.1.0) Copyright Information Copyright 2017 Webucator. All rights