Introduction to HTML - ITCourseware · 3. Paragraphs, Headings and Text.....19 Paragraphs.....19

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 developmentwith his business expertise and to help companies benefit from both. Nat beganprogramming games in Basic on a TRS-80 at age 14. He has been developingwebsites and providing web development training since 1998.

Accompanying Class Files

This manual comes with accompanying class files, which your instructor or salesrepresentative will point out to you. Most code samples and exercise and solutionfiles found in the manual can also be found in the class files at the locations indicatedat the top of the code listings.

Due to space limitations, the code listings sometimes have line wrapping, whereno line wrapping occurs in the actual code sample. This is indicated in the manualusing 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 linebreak in the middle of a word. When this occurs, we append the following symbolat the end of the line before the actual break: »»

EVALUATION COPY

Unauthorized reproduction or distribution is prohibited.

EVALUATION COPY


Table of Contents1. A Quick Overview of Web Development..............................................1

Client-side Programming..................................................................................1HTML........................................................................................................1Cascading Style Sheets............................................................................1JavaScript ................................................................................................1Dynamic HTML.........................................................................................1Ajax...........................................................................................................1Adobe Flash..............................................................................................2

Server-side Programming.................................................................................2Perl............................................................................................................2ColdFusion................................................................................................2Active Server Pages..................................................................................3Java EE.....................................................................................................3ASP.NET...................................................................................................3PHP...........................................................................................................4Ruby on Rails............................................................................................4

2. Introduction to HTML............................................................................5

Getting Started.................................................................................................5Exercise 1: A Simple HTML Document.............................................................6The HTML Skeleton..........................................................................................9

The <head> Element................................................................................9The <body> Element.................................................................................9Whitespace...............................................................................................9

HTML Elements..............................................................................................10Attributes.................................................................................................11Empty vs. Container Tags........................................................................11Blocks and Inline Elements.....................................................................11Comments...............................................................................................12

Special Characters.........................................................................................12The HTML/XHTML Version.............................................................................13

DOCTYPE Declarations..........................................................................13Closing Tags............................................................................................15Case Sensitivity......................................................................................15Quotes....................................................................................................15Nesting....................................................................................................16Some XML Stuff......................................................................................16

HTML5............................................................................................................17lang and xml:lang............................................................................................17

iVersion: 3.1.5. Printed: 2013-11-01.

Table of Contents

EVALUATION COPY


3. Paragraphs, Headings and Text.........................................................19

Paragraphs.....................................................................................................19Breaks and Horizontal Rules..........................................................................23Exercise 2: Creating an HTML Page...............................................................25Quoted Text.....................................................................................................28Preformatted Text............................................................................................29Phrase Elements............................................................................................31HTML 4 Formatting Elements.........................................................................32Documenting Changes...................................................................................34

4. HTML Links..........................................................................................37

Text Links........................................................................................................37Absolute vs. Relative Paths.............................................................................38

Absolute Paths........................................................................................38Relative Paths.........................................................................................39Default Pages..........................................................................................39

Targeting New Windows..................................................................................40Email Links.....................................................................................................40Exercise 3: Adding Links.................................................................................41Anchors...........................................................................................................44

Anchors with the name Attribute.............................................................44Anchors with the id Attribute...................................................................46name vs. id..............................................................................................46

The title Attribute.............................................................................................47

5. HTML Images.......................................................................................49

Inserting Images.............................................................................................49Making Images Accessible......................................................................50Alternative Text........................................................................................50Long Descriptions...................................................................................51Height and Width Attributes....................................................................51

Image Links....................................................................................................52Exercise 4: Adding Images to the Page..........................................................53

6. HTML Lists...........................................................................................57

Unordered Lists..............................................................................................57Nesting Unordered Lists.........................................................................58

Ordered Lists..................................................................................................62Nesting Ordered Lists.............................................................................63Start Attribute .........................................................................................65

Definition Lists................................................................................................66Exercise 5: Creating Lists...............................................................................69

© Copyright 2013 Webucator. All rights reserved.ii

Table of Contents

EVALUATION COPY


7. HTML Tables.........................................................................................77

Creating Tables...............................................................................................77Adding a Caption....................................................................................78

Attributes.........................................................................................................79Merging Cells..................................................................................................82Exercise 6: Creating Tables.............................................................................84

8. HTML Forms........................................................................................89

How HTML Forms Work..................................................................................89The <form> Tag...............................................................................................90

Get vs. Post.............................................................................................90Form Elements...............................................................................................92

id and Name Attributes...........................................................................92Labels.....................................................................................................92Text Fields...............................................................................................93Password Fields......................................................................................93Submit and Reset Buttons......................................................................94Hidden Fields..........................................................................................94

Exercise 7: Creating a Registration Form.......................................................96Checkboxes.............................................................................................99Radio Buttons.........................................................................................99

Exercise 8: Adding Checkboxes and Radio Buttons.....................................102Select Menus........................................................................................105Textareas...............................................................................................107

Exercise 9: Adding a Select Menu and a Textarea........................................109

iiiVersion: 3.1.5. Printed: 2013-11-01.

Table of Contents

EVALUATION COPY


9. Crash Course in CSS........................................................................113

Benefits of Cascading Style Sheets..............................................................113CSS Rules....................................................................................................114

CSS Comments....................................................................................114Selectors.......................................................................................................114

Type Selectors......................................................................................115Descendant Selectors...........................................................................115Child Selectors......................................................................................115Class Selectors.....................................................................................116ID Selectors..........................................................................................117Attribute Selectors.................................................................................117The Universal Selector..........................................................................118Grouping...............................................................................................118

Precedence of Selectors...............................................................................118Determining a Selector's Specificity......................................................118

The Cascade................................................................................................120Embedded Style Sheets.......................................................................120

Exercise 10: Creating an Embedded Style Sheet.........................................122External Style Sheets............................................................................129

Exercise 11: Creating an External Style Sheet.............................................130Inline Styles...........................................................................................136

Exercise 12: Adding Inline Styles..................................................................137Media Types..................................................................................................138<div> and <span>.........................................................................................140Exercise 13: Divs and Spans........................................................................142Units of Measurement...................................................................................146

Pixels (px).............................................................................................146Points (pt)..............................................................................................146Inches (in), Centimeters (cm), and Millimeters (mm)............................146Picas (pc)..............................................................................................146Ems (em)..............................................................................................146Exs (ex).................................................................................................147

The Inherit Value...........................................................................................147@import........................................................................................................148

Appendix 1. HTML Formatting.............................................................149

Simple Formatting Tags................................................................................150The <font> Tag..............................................................................................150

size........................................................................................................150color......................................................................................................151face.......................................................................................................151<basefont>............................................................................................151

Exercise 14: Adding Formatting to the Page.................................................153Applying Colors to the Page..................................................................155

Aligning Text..................................................................................................155The <center> Tag..................................................................................155The align Attribute.................................................................................156

Exercise 15: Applying Color and Aligning Text..............................................157

© Copyright 2013 Webucator. All rights reserved.iv

Table of Contents

EVALUATION COPY


A Quick Overview of Web Development1.

In this lesson, you will learn...

1. About client-side web development languages.2. About server-side web development languages.

Web development involves a combination of client-side programming and server-sideprogramming.

Client-side Programming1.1

Client-side programming involves writing code that is interpreted by a browser suchas Internet Explorer or Mozilla Firefox or by any other web client such as a cellphone. The most common languages and technologies used in client-sideprogramming are HTML, JavaScript, Cascading Style Sheets (CSS), and AdobeFlash.

HTML

HyperText Markup Language (HTML) is the language behind most web pages. Thelanguage is made up of elements that describe the structure and format of the contenton a web page.

Cascading Style Sheets

Cascading Style Sheets (CSS) is used in HTML pages to separate formatting andlayout from content. Rules defining color, size, positioning and other display aspectsof 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 beused to validate forms, pop up new windows, and create dynamic effects such asdropdown menus and image rollovers.

Dynamic HTML

Dynamic HTML is not a language in and of itself, but rather refers to code that usesJavaScript 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 iscalled JScript.

Page 1 of 159Version: 3.1.5. Printed: 2013-11-01.

A Quick Overview of Web Development

EVALUATION COPY


Ajax

The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript AndXML," 2 but is now used much more broadly to cover all methods of communicatingwith a server using JavaScript.

The main purpose of Ajax is to provide a simple and standard means for a web pageto 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% ofcomputers connected to the internet have Flash Player installed. The Flash Playeris a plug-in to Internet Explorer and other web browsers. It enables browsers todisplay dynamic graphical web pages that can be visually more fluid than pages thatare built with Dynamic HTML. Flash pages are called movies and they are createdusing special software (also called Flash). ActionScript, a language similar toJavaScript, is used to manipulate Flash objects to make movies more interactive.

At the time of this writing, designers are either moving to JavaScript or convertingexisting Flash videos to HTML5. However, converting is a challenge because notall features of Flash can be converted. Tools to solve this issue are currently beingintroduced by Adobe (with Wallaby) and Google (with Swiffy) and others.

Server-side Programming1.2

Server-side programming involves writing code that connects web pages withdatabases, XML pages, email servers, file systems and other systems and softwareaccessible from the web server. The most common server-side languages andprogramming frameworks are Perl, ColdFusion, Active Server Pages, Java (in manyflavors), 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 textmanipulation and the fact that it is open source made it a good choice for writingCGI scripts. Although Perl is still widely used, it is not as popular a choice for newweb projects as some of the other server-side languages discussed below.

2. Ajax: A New Approach to Web Applications - http://www.adaptivepath.com/publications/essays/archives/000385.php

© Copyright 2013 Webucator. All rights reserved.Page 2 of 159


EVALUATION COPY


http://www.adaptivepath.com/publications/essays/archives/000385.php

ColdFusion

ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest ofall server-side languages. It is tag-based, which makes it look a lot like HTML andeasier for client-side programmers to understand than some of the other choices.Because of the relative ease with which it is written, ColdFusion is sometimesassumed 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 anyrequired task using the ColdFusion Markup Language (CFML). However, asColdFusion can easily be integrated with Java applications, developers have thechoice of using Java to extend ColdFusion applications.

Active Server Pages

Microsoft Active Server Pages (ASP) is a framework that allows developers to writeserver-side pages in many scripting languages; however, VBScript and JScript arethe only commonly used choices. ASP became popular quickly and sites with pagesending in .asp are now all over the web. It is not as simple as ColdFusion, but it hasthe 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 steeplearning curve. Java EE is defined by its specification (http://download.oracle.com/javaee/) and API (http://download.oracle.com/javaee/5/api/). A JavaApplication Server (Java AS) manages servlets, JavaServer Pages (JSP), WebServices, and Enterprise JavaBeans (EJB). Java EE also includes a number of otherAPIs commonly linked to enterprise application development. JDBC, JPA, e-mail,JMS, and XML are some examples. But that's only part of the picture. There are anumber of frameworks built on some of these technologies that streamlines thedevelopment process further. Hibernate offers most of the object/relational mapping(ORM) without an EJB Container. For this reason it's called a lightweight ORMtechnology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do awaywith scriptlets completely, relying on HTML style tags and associated JavaBeans.

ASP.NET

Microsoft's ASP.NET is not a language, but a framework for writing websites andsoftware. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pagesare precompiled, so they run faster than traditional ASP pages do. ASP.NET pages



EVALUATION COPY


http://download.oracle.com/javaee/

http://download.oracle.com/javaee/

http://download.oracle.com/javaee/5/api/

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 theproprietary languages such as ColdFusion and ASP.NET. PHP is lightweight,relatively simple to learn and runs on almost all commonly used web servers. A nicefeature 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 toincrease the speed and ease with which database-driven websites can be created andoffers skeleton code frameworks (scaffolding) from the outset. Often shortened toRails, or RoR, Ruby On Rails is an open source project written in the Rubyprogramming language and applications using the Rails framework are developedusing the Model-View-Controller design pattern." 3

Conclusion1.3This lesson has provided a general overview of the different languages andframeworks commonly used in web development.

3. http://en.wikipedia.org/wiki/Ruby_on_Rails



EVALUATION COPY


http://en.wikipedia.org/wiki/Ruby_on_Rails

Introduction to HTML2.


1. 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 thecontent 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. Seehttp://www.w3.org/TR/html4/ and http://www.w3.org/TR/xhtml1/ for thespecifications. In this lesson, we will address the differences between HTML andXHTML and discuss the effect of HTML5.

Getting Started2.1

We'll begin with a simple exercise.



EVALUATION COPY


http://www.w3.org/TR/html4/

http://www.w3.org/TR/xhtml1/

A Simple HTML DocumentExercise 15 to 15 minutes

In this exercise, you will create your first HTML document by simply copying thetext shown below. The purpose is to give you some sense of the structure of anHTML document.

1. Open a simple text editor such as Notepad and create a new file. Do not usean 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 filein your folder system and double-clicking on it. The page should appear asfollows:



EVALUATION COPY


of 159Version: 3.1.5. Printed: 2013-11-01.


EVALUATION COPY


Exercise Solution

HTMLBasics/Solutions/HelloWorld.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Hello world!</title> 5.</head> 6.<body> 7. Hello world! 8.</body> 9.</html>10.



EVALUATION COPY


The HTML Skeleton2.2

At its simplest, an HTML page contains what can be thought of as a skeleton - themain structure of the page. It looks like this:

Code Sample

HTMLBasics/Demos/Skeleton.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title></title> 5.</head> 6.<body> 7.  8.</body> 9.</html>10.

The <head> Element

The <head> element contains content that is not displayed on the page itself. Someof the elements commonly found in the <head> are:

• Title of the page (<title>). Browsers typically show the title in the "titlebar" 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 andmultiple spaces are condensed into a single space for display purposes.



EVALUATION COPY

Code Sample

HTMLBasics/Demos/Whitespace.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Whitespace Example</title> 5.</head> 6.<body> 7.This is a sentence on a single line.8.

9. This 10. is 11. a 12. sentence with 13. extra whitespace 14. throughout. 15.

16.</body> 17.</html>18.

Code Explanation

The two sentences in the code above will be rendered in exactly the same way.

HTML Elements2.3

HTML elements describe the structure and content of a Web page. Tags are usedto indicate the beginning and end of elements. The syntax is as follows:



EVALUATION COPY


<tagname>Element content</tagname>

Attributes

Tags often have attributes for further defining the element. Attributes come inname-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 andclose tag with content contained between them. Tags that do not contain content arecalled 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, aparagraph (<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>Elementcontent</tagname>This is not allowed in XHTML.



EVALUATION COPY


Inline Elements

Inline elements are elements that affect only snippets of content and do not blockoff 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 writtenin a specific way.

2. To comment out some code that is not currently needed, but may be usedsometime in the future.

3. To debug a page.

HTML comments are enclosed in . For example:



Special Characters2.4

Special characters (i.e, characters that do not show up on your keyboard) can beadded 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.



EVALUATION COPY

symbol (©) can be added using © or ©. The following table showssome of the more common character references.

The HTML/XHTML Version2.5

XHTML 1.0 and HTML 4.0 consist of the same sets of elements. (HTML5 introducessome new elements, but those are not covered in this course.) The only differencebetween HTML and XHTML is that HTML is fairly flexible; whereas, XHTMLhas strict rules. 6

DOCTYPE Declarations

The DOCTYPE declaration goes at the beginning of the document and is used toindicate 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 definingother languages). XML applies stricter rules than SGML does.



EVALUATION COPY


(X)HTML documents: strict, frameset and transitional (loose). In HTML, theDOCTYPE declaration is optional. In XHTML, it is required.

All this DOCTYPE stuff used to be really important and is explained below, butwith the introduction of HTML5, there is an easy way out, which we highlyrecommend as it is both simpler and forward-compatible. Instead of worrying aboutthe complicated DOCTYPEs explained below, simply use the new HTML5DOCTYPE:

<!DOCTYPE HTML>

This DOCTYPE is, believe it or not, completely backward compatible and will makeall browsers work in "standards mode."

As many web pages will still use the old DOCTYPEs, they are worth understandingand are explained below.

Strict

The strict versions of HTML and XHTML do not allow use of tags and attributesthat have been deprecated. 7 The strict versions do not support framesets.

XHTML Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional (Loose)

The transitional (or loose) versions of HTML and XHTML allow for the use ofdeprecated 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 andbetter ways of accomplishing the same thing. Most of these tags are for formatting; the W3C recommends using CascadingStyle Sheets instead. See http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2 for a list of deprecated tags.



EVALUATION COPY


http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2

XHTML Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

The frameset versions of HTML and XHTML are the same as the transitionalversions, except that they also support frames.

XHTML Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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 forwardslash 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, itmay 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 inlowercase letters.



EVALUATION COPY


Quotes

In HTML, attribute values do not always have to be in quotes; whereas, in XHTMLquotes are required. Either single quotes or double quotes may be used.

Nesting

In both HTML and XHTML, tags should be nested properly. Proper nesting requiresnested tags to be closed in reverse order from which they were opened. Anotherway to say this is that each element must be completely contained by its parentelement. 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 followthe rules of XML. Although not required, it is good practice to include an XMLdeclaration in your XHTML documents. If included, the XML declaration must beat 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 thatyou 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 theXHTML namespace, which indicates that the document must conform to the rulesdefined in the XHTML namespace. The syntax is shown below:

<html xmlns="http://www.w3.org/1999/xhtml">



EVALUATION COPY


HTML52.6

Although HTML5 is not fully supported by modern browsers, there are a couple ofthings 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 andthe XHTML namespace.

This makes the opening of your HTML page simpler:

<!DOCTYPE HTML><html><head><meta charset="UTF-8">

lang and xml:lang2.7

The lang and xml:lang attributes are used to tell the browser (or other useragent) the language contained within an element. The W3C recommends that bothlang and xml:lang be included in the html tag of all XHTML documents, likeso:

<html xmlns="http://www.w3.org/1999/xhtml" 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

Conclusion2.8In this lesson, you have learned the basics of HTML. You should understand howan HTML page is structured, know the major differences between HTML andXHTML and understand the basic syntax of HTML tags.

8. http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1



EVALUATION COPY




EVALUATION COPY


HTML Images5.


1. 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; whereasthe JPEG format is used for more complicated images such as photographs.

Inserting Images5.1

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 fileusing a relative or absolute path. The syntax is as follows.

Syntax

<img src="path_to_image_file" alt="alternative text">

The following page shows how to use the <img> tag:

Code Sample

Images/Demos/Images.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Images</title> 5.</head> 6.<body> 7.<h1>Images</h1> 8.<p><img src="http://www.google.com/images/logo.gif" alt="Logo"></p> 9.<hr> 10.<p><img src="Images/Pooh.jpg" alt="Pooh Bear"></p> 11.<hr> 12.<p><img src="Images/RunnersHome.gif" alt="Runners Home"></p> 13.</body> 14.</html>15.


HTML Images

EVALUATION COPY


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.


HTML Images

EVALUATION COPY


• 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 visuallyimpaired.

Long Descriptions

If an image depicts something complicated, such as a graph or chart, a longdescription of the image can be provided on a separate page. The longdesc attributeof the <img> tag is used to point to that description. For example:

Code Sample

Images/Demos/LongDesc.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Long Description</title> 5.</head> 6.<body> 7.<h1>Long Description</h1> 8.<p><img src="Images/BigMac.jpg" alt="Big Mac Nutrition Information"

longdesc="BigMac.html"></p> 9.

</body> 10.</html>11.

Code Explanation

The browsers don't do anything with the longdesc value, but modern screenreadersmake use of it. Freedom Scientific, the makers of Jaws, one of the most popularscreenreaders, say this about their support for longdesc:

JAWS now supports the "Longdesc" attribute in HTML within Internet Explorer5.x and 6. The "Longdesc" attribute allows a long description of graphics to beprovided on a separate page. The "Longdesc" attribute contains the address of thedescriptive page. After reading any Alt text for the graphic, JAWS announces thereis a long description and the address of the page. Just press ENTER to open the pagecontaining the long description in a new window. 17

17. http://www.freedomscientific.com/fs_products/software_jaws401newfea.asp


HTML Images

EVALUATION COPY


http://www.freedomscientific.com/fs_products/software_jaws401newfea.asp

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 valuesto the actual height and width of the image. Using the height and width attributeslets the browser know how much space to allocate for the image without having towait for the image itself to download. This may make for a smoother initial displayof the page.

<img src="logo.gif" alt="Logo" height="100" width="300">

Image Links5.2

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.


HTML Images

EVALUATION COPY


Adding Images to the PageExercise 45 to 10 minutes

In this exercise, you will add an image to index.html. The resulting page is shownbelow.

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.


HTML Images

EVALUATION COPY


Exercise Solution

Images/Solutions/index.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Runners Home™</title> 5.</head> 6.<body> 7.<div> 8. <a href="index.html">Home</a> | 9. <a href="Races.html">Races</a> | 10. <a href="Resources.html">Resources</a> | 11. <a href="Calculator.html">Calculator</a> | 12. <a href="RunningLog.html">Running Log</a> | 13. <a href="MyAccount.html">My Account</a> | 14. <a href="Logout.html">Log out</a> 15.</div> 16.<p>Hello, Stranger!</p> 17.<h1>Welcome to Runners Home™</h1> 18.<p> 19.<img src="Images/RunnersHome.gif" alt="Logo"><br>20. Runners Home™ is dedicated to providing you with:<br> 21. • <a href="Races.html">the most up-to-date information on running

races</a>.<br> 22.

• <a href="Resources.html">the best resources for runners</a>. 23.</p> 24.<hr> 25.<p>© 2011 Runners Home. All rights reserved. For questions, send

email to <a href="mailto:[email protected]">info@runner »» shome.com</a>.</p>

26.

</body> 27.</html>28.


HTML Images

EVALUATION COPY


Conclusion5.3In this lesson you have learned to add images to a web page, to make those imagesaccessible, and to create image links .


HTML Images

EVALUATION COPY



HTML Images

EVALUATION COPY


Introduction to HTML - ITCourseware · 3. Paragraphs, Headings and Text.....19 Paragraphs.....19

Documents

Transcript of Introduction to HTML - ITCourseware · 3. Paragraphs, Headings and Text.....19 Paragraphs.....19