Web I - 02 - XHTML Introduction
Upcoming SlideShare
Loading in...5
×
 

Web I - 02 - XHTML Introduction

on

  • 3,068 views

Learning XHTML for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

Learning XHTML for Web Development 1 Course suitable for degree following CIT/CIS/CS ACM model curriculum.

Statistics

Views

Total Views
3,068
Slideshare-icon Views on SlideShare
3,063
Embed Views
5

Actions

Likes
7
Downloads
26
Comments
0

3 Embeds 5

http://www.slideshare.net 2
http://blog.randyconnolly.org 2
https://lms.kku.edu.sa 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web I - 02 - XHTML Introduction Web I - 02 - XHTML Introduction Presentation Transcript

  • EASINGINTO WEBDEVELOPMENT2.2 HTML
  • 1 INTRODUCTION 2 HTML 3 TABLES 4 FORMS 5 HTTP 6 CSS 7 CSS FRAMEWORKS 8 DIGITAL MEDIA2 9 USABILITY
  • HTML Standard3  Hypertext Markup Language  While initially developed by Tim Berners-Lee of y p y CERN in 1990, the World Wide Web Consortium ( (W3C) now officially controls HTML standard. ) y  In practice, Netscape, then Microsoft controlled the development of HTML HTML.  Tags added or supported by their browsers influence/control the HTML standard standard.
  • HTML Standard4  From around 2002/3, there has been movement back to having F d 2002/3 th h b tb kt h i W3C control the standard for HTML  W3C standards:  HTML 3.2  HTML 4.01  XHTML 1.0  XHTML 1.1  XHTML 2.0  Now, most recent versions of browsers are h i to follow the N i fb having f ll h standards  FireFox supports XHTML 1.1  IE 6 (almost) supports XHTML 1.0  IE 7 (almost) supports XHTML 1.1
  • XHTML5  XHTML (Extensible HTML) as a standard came about due to browser inconsistencies.  Fewdifferences between HTML and XHTML  XHTML is stricter than HTML and has additional rules.  As well, several tags and many attributes are no longer supported.
  • Tags Defined6  HTML d fi defines elements which are i di t d b t l t hi h indicated by tags.  The basic HTML tag has four parts:  An opening delimeter, the < symbol p g , y  The Tag name  Optional list of attributes that modify the way that tag works.  A closing delimeter the > symbol delimeter,  A typical tag might look like this: <p align="center">  Tags are not case sensitive.  However, in XML (eXtensible Markup Language) and XHTML, tags must be lower-case.  If your browser encounters a tag it doesn’t support, it simply ignores it. See page(s): 94 ff
  • Containers7  Most M t HTML t tags are containers, meaning the beginning t t i i th b i i tags must be tb matched by a closing tag.  The end tag will have same name as start tag but preceded with a slash (/). l h (/)  For example:  This is <b>Bold text</b> but not this This is <b>Bold text</b> but not this  Will result in:  This is Bold text but not this  The text enclosed within the tags will follow the tag’s instructions.  For some tags, the end tag is optional.  XHTML standard requires all tags to be closed closed.  For those tags without end tags in the HTML original (e.g., <br>) then close tag is contained within tag (e.g., <br/>) See page(s): 71
  • Nested Tags8  Tags can be nested. Hello <b><i>emphasized</i></b> there  will result in hello emphasized there i  The order is important. <b>This word is <i>emphasized</i> here </b>  Correct (no overlapping lines) <b>This word is <i>emphasized</b> here </i> × Incorrect (overlapping lines)
  • Attributes9  Attributes t d Att ib t extend or modify the way a tag operates. dif th t t  Most (but not all) tags accept several attributes.  order of attributes is unimportant p  Most attributes take values, which follow an equal sign (=). For example, <p align=left> <font face="arial, tahoma"> <a href="http://www.abc.com"> <body bgcolor="#ffcc00">  Strictly speaking, values should be enclosed in straight quotes (" " y p g, g q ( not “ ”).  You can omit the quotes if the value contains only letters, digits, hyphens, or periods.  XHTML requires quotes around attributes.  Browsers ignore unknown attributes.
  • Information Browsers Ignore10  line breaks displays as He Hello there llo t here  tabs and multiple spaces Hello there Hello there  multiple <P> tags Hello Hello<P><P><P><P><P>There there  unrecognized tags and attributes <randy nose=large>hello there</randy> Hello there  text in comments <!-- this is a comment --!>
  • Character Entities11  In order to display special characters (such as ©, á, &, <, >, ñ, ü, etc), you must use character entities.  You can specify these with either the name code or the number code (not all special symbols have names). E.g., This has &copy; Copyright &#169; today results in This has © Copyright © today  One of the more helpful character entities is that for a non-breakable space (&nbsp;) Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;there results in Hello     there     However you should never need to use non-breakable spaces to achieve this type of look (we will use CSS instead)
  • XHTML Differences12  XHTML is case sensitive and thus tags must be lowercase  XHTML requires attributes to be quoted  XHTML requires all tags to be closed
  • HTML Editing13  HTML documents are simple ASCII text files  as such, you can use Notepad, Word, or any other program that can write ASCII text files.  There are specific HTML-creation tools. They fall p y under two general categories:  WYSIWYG (What You See Is What You Get) authoring tools  HTML Editors
  • WYSIWYG Authoring Tools14  Tools with graphical interfaces that make writing f HTML more akin to working with a word processor.  Instead of typing tags, you can select commands from pull down menus, and click and drag items.  Th These programs t t shield th user f try to hi ld the from th t the tags  Theoretically, the user doesn’t need to know HTML  Examples E l  Microsoft FrontPage and Microsoft Visual Studio  Adobe Dreamweaver  Adobe GoLive
  • 15 Microsoft Visual Studio
  • Macromedia Dreamweaver di16
  • WYSIWYG Authoring Tools17  Advantages Ad t  good for beginners  good for quick prototyping  can save bother of writing  Disadvantages  often generate bad HTML or browser-specific HTML (e.g., FrontPage)  often will automatically change an HTML document when opened, y g p , removing tags it doesn’t like or support (e.g., FrontPage)  never true WYSIWYG  that is, the result often looks different in browser than in WYSIWYG is program, and unless you know HTML you cannot fix it.  However, with better browser support of standardized XHTML, WYSIWYG tools are getting better and better g g
  • WYSIWYG Problems As displayed in Dreamweaver As displayed in FrontPage Viewed in Netscape 418 Viewed in Internet Explorer 4
  • HTML Editors19  Programs that facilitate the process of entering/typing HTML  user still needs to know HTML  Examples  Notepad  HomeSite  BBEdit
  • Microsoft Notepad20
  • Macromedia HomeSite di i21
  • Structure of HTML22  The two basic parts of a web page are:  The head  The body
  • HTML Skeleton23 <html> <html> defines the beginning of the HTML document <head> h d <head> defines the beginning document <title>My Mom</title> header, which contains information about the document </head> <title> is displayed in browser title bar <body> and used for bookmarks Contents here <body> contains the content to be displayed in browser window </body> </html>
  • html element24  Should contain namespace and language declaration. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  Note: the xmlns attribute is required in XHTML but is invalid in HTML HTML.
  • DOCTYPE Declaration25  XHTML requires that an HTML document needs a DOCTYPE declaration as the first element.  Itspecifies which document type definition (DTD) you are following.  Current browsers can use this information to help determine which rules it should use to display the markup (i.e., should it use strict XHTML rules, no XHTML, or both). See page(s): 107
  • DOCTYPE Declaration26  Possible DOCTYPEs: P ibl DOCTYPE  XHTML 1.1  Only supported by FireFox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 1//EN" -//W3C//DTD 1.1//EN "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  XHTML 1.0 strict  Supported by Firefox and IE 7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  XHTML transitional  Supported by FireFox, IE6 and later <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  None / Q i k mode N Quirks d  No use of standards  Default if no valid DOCTYPE present
  • The <head> Th <h d>27  The head Th h d section provides information i id i f i about the document.  The following elements can be within the head <meta> Provides additional information about the document <title> Displayed by browser in title bar. Required for HTML 3.2 compatibility. <script> Contains Javascript code <style> Contains style sheet information <link> For linking to an external style sheet file
  • <meta> Element <meta> Element28  Meta tags were intended to provide additional semantic meaning (meta information) to web (meta-information) pages.  Early search engines used them, but due to abuses, most search engines now heavily discount them.  Two styles: <meta http-equiv="name" content="content"> <meta name="name" content="content">  e.g. g <meta name="description" content="randy’s home page"> <meta name="keywords" content="first, second, third"> <meta name="expires" content="01 j p jun 2007"> <meta name="robots" content="index,nofollow">
  • <script> Element <script> Element29  Used to contain a client-side script  Usually Javascript, but could also be VBScript (IE only)  Often contained with the <head> but valid anywhere.  E.g. <script type="text/javascript"> type text/javascript > document.write("Hello World!"); </script>
  • <style> and <link> 30 elements  Both contained within <head>  <style>  Used to define a CSS style(s) in a document. <style type="text/css" > type text/css h1 { font-weight: bold; font-size: 18pt; } </style>  <link>  Generally used to define a link to an external stylesheet. <link rel="stylesheet" type="text/css" href="theme.css" />
  • <b d > El t <body> Element31  Contains the contents of the d C h f h document  Can contain the following attributes, which allow you to specify global settings (i.e., for entire (i e document) for background image and color as well as text colors:  background=url Specifies a background picture, where url is the name (and path) of the picture file. The picture is tiled and set behind all images and text  bgcolor=color Specifies background color of page  text=color Sets the color of normal text  link=color Sets the color of hypertext links  vlink=color Sets the color of visited hypertext links yp  For XHTML strict, do not use these attributes.
  • Body Margins32  By default, browsers have a margin of 10 to 12 pixels.  The margin varies depending upon the browser and platform. Internet Explorer 5 Netscape 4
  • Body Settings33  To set colors images, and margins, and colors, images margins other stylistic settings, you should use CSS.  e.g., <style> body { background-color : # b k d l #FFFFFF; background-image: url(images/Pattern1.gif); font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; color : #000088; margin: 0px; } </style>
  • Color C l34  Color can be specified in three ways  "#rrggbb"  "#rgb"  "color name"  rrggbb is a hexadecimal RGB (red-green-blue) p triplet FFFFFF=white 000000=black FF0000=red 00FF00=green FFFF00=yellow OOFFFF=cyan  rgb is converted to rrggbb by replicating digits. # 6C #F6C == # 66CC #FF66CC  HTML 4.0 supports 16 color names  Browsers supports 140 color names
  • Semantic markup35  To benefit from XHTML, you need to think about your T b fit f XHTML d t thi k b t markup in semantic (meaning) rather than visual terms.  XHTML markup is not about presentation; its about document structure and content (meaning).  That is, we should use XHTML as HTML was originally intended.  We should structure our document into headings, lists headings lists, paragraphs.  We should use HTML elements because of what they mean, not because of the way they "look." tb f th th "l k "  We can change the way elements look via CSS.
  • Structuring Text36  There are a number of ways of structuring blocks of text.  breaking text into paragraphs and lines  using headings to create sections g g  grouping info into lists
  • Paragraph and Line Breaks37  You cant use carriage returns to create new paragraphs or to break lines  The <br/> tag creates line breaks  multiple <br/> tags okay, but discouraged  The <p> tag creates paragraph breaks  multiple <p> tags ignored  <p> isa container and thus needs a </p>  The <div> tag also creates paragraph breaks, but <div>  should be used to indicate a section (which might contain multiple <p> tags. p p g
  • <html><head><title>line and Paragraph Breaks</title></head> <body bgcolor="white"> HyperText Markup Language, a markup <br/> language defined by an SGML Document Type Definition (DTD).To a document writer,<p> HTML is simply a collection of tags used to mark blocks of text and assign them <p align="right">special meanings. g p g g p g </body></html>38
  • Styling the <p> and <div>39  Do not use align attribute of <p> or <div>.  Do not use <p> tags just to create space. p g j p  Use it to indicate a logical paragraph.  Use the <div> tag to indicate a section of paragraphs <div>  paragraphs.  Instead, you can use CSS to style or position the text. t t
  • CSS <p> and <div>40 <div id="preamble"> id preamble > <p class="p1"> Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support. </p> <p class="p2"> Today, we must clear the mind of past practices. Web enlightenment h d l h i d f i b li h has b been achieved thanks to the hi d h k h tireless efforts of folk like the W3C, WaSP and the major browser creators. </p> </div>
  • Headings <h1>, <h2>, etc41  There are six levels of heading  Level 1 is the largest and level 6 the smallest g  Most browsers allow user to alter relative size  We W can use CSS to determine the precise t d t i th i appearance  Examples <h1>This is a big heading</h1> <h3>smaller heading</h3>
  • Old School Headings42 <html><head><title>Headings</title></head> <body bgcolor="white"> <h1>HTML Defined</h1> HyperText Markup Language, a markup language defined by an SGML Document Type Definition (DTD) To a document writer HTML is simply a collection (DTD). writer, of tags used to mark blocks of text and assign them special meanings. <h3 align=center>HTML Introduction</h3> Here is some more text </body> </html>
  • CSS School Headings43 <h2>The Beauty of CSS Design</h2>
  • Lists44  There are three types of lists  Unordered, or bulleted lists  Ordered, or numbered lists  Definition lists
  • Unordered Lists < l> U d d Li t <ul>45 <ul> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> </ul> /
  • Ordered Lists < l> O d d Li t <ol>46 <ol> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> </ol> /
  • Definition Lists <dl>47 <dl> <dt>happy</dt> <dd>feeling or expressing joy</dd> <dt>sad</dt> <dd>Expressive of sorrow or unhappiness</dd> / </dl>
  • CSS Lists48
  • Formatting Characters49  These tags change the emphasis and appearance of characters within blocks of text.  These tags also referred to as inline type styles as the tags appear within lines of text.  Two categories  logicaltags  physical tags
  • Logical Style Tags L i l St l T50  Describes the texts meaning, context, D ib h i or usage; it does not describe how it is to b displayed (the browser be d l d(h b determines that).  Examples: <em> Characters are to be emphasized (often italic) <strong> Emphasized more (often bold) <code> Characters are code sample (often courier) <acronym> Defines an acronym (e.g., ASP) <span> Used to group inline elements
  • Physical Style Tags51  Indicates exactly the way the text is to be formatted  XHTML  Some of these (<font>, <u>, <s>) are prohibited  Even if not prohibited, use of these is discouraged in XHTML  Use logical style instead  Examples p <B> Bold <U> Underline <I> Italic <S> Strikethrough <TT> Monospaced M d <FONT> Font
  • Linking52  Your web site should be a collection of several separate pages connected together via hypertext links  Hyperlink is created via anchor tag <a> and the yp g documents unique address known as a URL (Uniform Resource Locator).  Links can be to created to: j jump t an external site to t l it  jump to another page in the current site  jump to another part of the current page
  • Linking53  A link has three parts: a destination  a label  a target g
  • Linking54  The destination is the most important part. It specifies what page will be loaded when user clicks.  The label specifies the text of the hyperlink.  The target is optional It determines where the optional. destination will be displayed.  The target might be a new window, a different frame window frame, or, most common, the current window.
  • The Anchor Tag <a>55 Label L b l <a href="http://www.mtroyal.ab.ca">Click here</a> Destination <a href="www.mtroyal.ab.ca" target="_blank">Click here</a> Target (this would display page in new window) <a name="top"> Defines l D fi location for internal link ti f i t l li k <a href="#top">Click here to go to top of page</a> Destination is internal link (i.e., within current page)
  • Absolute URLs56  Absolute URL  used to specify exactly where a file is located.  used for linking to an external site.  Three parts:  protocol (e.g., HTTP://, FTP:// )  host/server name (e.g., www.microsoft.com)  path name, if necessary (e.g., / ff / f /office/word )  file name (e.g., index.htm, exam.cgi, menu.jpg)  Example: http://www.microsoft.com/office/word/index.htm
  • Absolute URLs57  File-based b l Fil b d absolute references should not b f h ld t be used for referencing files within your own site. For example: l C:/My Documents/comp1274/assign2/product.htm Why?  when y you move y your site to y your web server, y , your links (and image references) will not work (since it is quite likely that your files will not be on the same drive and directory on the server).  You should almost always use relative references for referencing files within your own site!!
  • Relative References58  A reference to another document relative to the location of the document that contains the reference. Some Folder href=products.html index.html products.html
  • Root Reference59  Another thing to be aware of is that a reference that begins with the slash is a root reference.  A root reference is an absolute references.
  • Root Reference60  A root reference has a different meaning on the web server than it does on your local machine.  e.g.,/images/logo.gif  On a local machine without a web server, the root , reference (e.g., “/”) refers to the root of the physical drive.  Thus the above example references a file in the folder images which is in the root of the drive.  i.e., it will reference c:/images/logo.gif
  • 61 Root Reference e.g., /images/logo.gif  On the web server, this references a file in the folder images which is in the root of the site. g Remember that a web server can host multiple sites.  Each site is contained within its own “virtual” folder that is independent of each site’s actual physical location. p p y www.abc.com So, on a web server the root reference (e.g., “/”) refers to the root of the site’s virtual folder, not the root of the physical drive. www.xyz.com
  • 62Referencing Syntax  The synatx used is based on the UNIX y operating system (but similar to DOS)  Slash separates folder from file name p products/sales.htm /  Slash separates folder from folder name web/products/sales.htm  A slash in front of first folder name means root directory /file.htm /My Documents/file.htm Documents/file htm  Use forward slash (/) not backslash ()  Use .. to move up a folder ../My Documents/file.htm
  • <img src=????> img src ???? Q: in sales.htm, how would we reference pants.htm ? A) ) p pants.htm B) products C) C:/My Documents/web/products/pants.htm D) /products/pants.htm E) products/pants.htm63
  • <img src=????> img src ???? Q: in pants.htm, how would we reference sales.htm ? A) ) sales.htm B) web/sales.htm C) C:/My Documents/web/sales.htm D) /products/sales.htm E) ../sales.htm64
  • <img src=????> img src ???? Q1: in pants.htm, how would we reference hats.htm ? Q2: in sales.htm, how would we reference index.htm ?65
  • Q: in fred.htm, how would we reference pants.htm ? A) pants htm pants.htm B) ../products/pants.htm C) /products/pants.htm D) products/pants.htm E) ../pants.htm66
  • URLs URL67  Have the following syntax: protocol://server domain name/path/filename  For F example: l http://www.this_server.com/docs/index.html http://www.mtroyal.ab.ca/ ftp://ftp.shareware.com/pub/file.zip absolute references mailto://bgates@microsoft.com courses/1235.html Another page in the current site #bottom Defined location in current page relative references Defined location in another 1235.html#bottom page in current site
  • Anchor Tag, continued68  Usual attributes: href="url" Defines destination. name="name" name "name" Defines target for i D fi f internal h l hypertext li k link. target="window" Link should be loaded into window or frame. Not supported in XHTML Strict. window can have the following values: _blank bl k loads d l d document i new b w window t in w browser wi d w _parent loads into parent of current document _self loads into current window _top loads into main browser window frame name loads into named frameset (if doesnt exist then loads i t l d into new window) i d )
  • Hyperlink Example69 Here is some text<br/> / Click <a href="index.html">right here</a> will open the index page we created earlier<br/> Click <a href="#bottom">here</a> will take us to bottom of this p g page<br/> / blah, blah blah ... ... ... <a id="bottom">This is the bottom</a> /
  • Images70  Two general classes of images  inline images  appear on a web page along with text and links and are automatically displayed by browser when page is loaded  external images  stored separately from web page and are loaded only on demand (usually as a result of a link).  Images are graphical picture files that are downloaded and displayed by browser.  Image files must be GIF or JPG or PNG format. g
  • How Graphics Can Be Used71  As a simple graphic  As a link  As an imagemap a simple graphic in which multiple hotspots/links have been defined  As A spacing d i i devices  many designers use a single transparent pixel that can be i d b resized to create white space hi
  • <img> Tag <i > T72  Graphics displayed by the <img> tag. For example: <img src="image.gif" />  Accepted attributes: src="filename" specifies path or filename of file alt="description" text to be displayed in place of image width="n" width of image in pixels g p height="n" height of image in pixels longdesc="url" A URL to a document that contains a long description of the image usemap="url" indicates image is client-side imagemap Title=“description”
  • Graphics as Links73  To make a graphic a link place anchor link, tags around the IMG tag. For example: <a href="mtequip htm"><img src="pack gif“ /></a> href mtequip.htm ><img src pack.gif  When an image is a link, it will have a border around it to indicate it has a link link.  Mostdesigners prefer not to have this border  We can use CSS to remove it default
  • Alternative Text74  The alt attribute allows you to specify a string of alternative text to be displayed in place of an image.  displayed while image is downloaded  displayed if graphic display is turned off  Very important for accessibility reasons (i.e., for visually-impaired using Voice Reader software  some browsers display alt attribute as pop-up tip pop up when mouse positioned over image
  • Alternative Text75 <img src="pack.gif“ /> <img src="pack.gif" alt="Really Blue Pack" /> Really Blue Pack
  • Image Width and Height76  width and height indicate the dimension of image.  While optional, the use of these attributes is p , recommended because:  they allow browser to lay out page even before images are downloaded  You can use these attributes to resize an image  however,it is generally better to resize image in an image editor because:  image editors often have better quality interpolation methods for resizing (i.e., it better quality resize)  often faster download (see next slide)
  • Original image Width: 511 dh Height: 205 File Size: 102K image resized in browser image resized in image editor Width: 511 Width: 200 Height: 205 Height: 133 File Size: 102K downloaded File Size: 26K downloaded <img src="ski.gif" width=200 height=133> <img src="ski2.gif" width=200 height=133>77
  • Original image Width: 100 Height: 249 Image resized in esi ed Image resized in esi ed image editor browser Width: 200 Width: 200 Height: 498 Height: 49878
  • Q: in products.htm, how would we display menu.gif products htm menu gif <img src=????> <img src=menu.gif> <img src=c:/westgear/images/menu.gif> <img src=/westgear/images/menu.gif> <img src=westgear/images/menu.gif> <img src=images/menu.gif>79
  • Q: in products.htm, how would we display menu.gif products htm menu gif <img src=????> <img src=images/menu.gif> <i i / if> <img src=c:/westgear/menu.gif> <img src=/westgear/menu gif> src=/westgear/menu.gif> <img src=westgear/menu.gif> <img src=c:menu.gif> g g <img src=menu.gif>80
  • Two Types of Image Map81  An image map is a graphic image in which multiple links have been defined.  Two Types:  Server-Side Server Side Image Maps  Implemented using an image displayed by the client and a program that runs on the server. Not really used anymore.  Client-Side Image Maps  Works the same as above except there is no program run on p p g the server. All processing of coordinates occurs in the browser.
  • Image Map82 menu.gif index.htm browse.htm search.htm about.htm
  • Creating a client-side IM client side83  The first thing you need is the image onto which you want to map the link. This can be any GIF or JPEG image. i  The second step is to use map tags to define the image map. Y do this within your HTML fil You d hi i hi file.  The final step is add a attribute to the image tag, to tell the b ll h browser to use the image as an image map h instead of a normal image
  • <map> Tag84  <map> starts a map definition.  Ithas one attribute, name. The name you are giving this map definition must be surrounded by quotation marks. For example: <map name="mainmap">  In between comes one or more <area> tags.  </map> ends the map definition.
  • <area> Tag85  <area> defines each clickable area on the image and its link. You may have many area tags within a map definition. It has 3 attributes:  shape="rect/circle/poly/point" defines the shape of the linked area.  coords="X,Y,X,Y" are the coordinates of the linked area.  For a rectangle you set the upper left and lower right x,y coordinates. For a circle you set the center-point and a point y p p on the circumference, on a polygon you specify every angle.  href="link" sets the link for the specified area by identifying h linked URL. Th id if i the li k d URL The URL can be either a full or a b ih f ll relative URL.
  • Using the Image Map86  The final step in using an image map is inserting the image into your file and naming the image map definition. This is quite straightforward and involves simply adding a new image attribute called "usemap."  Example: <img src="mainmap jpg" width=46 height=26 usemap="#mainmap" /> src= mainmap.jpg usemap= #mainmap
  • Example Map Definition87 <img src="menu.gif" width="369" height="31" usemap="#linkbar" /> <map name="linkbar"> <area shape="rect" coords=" 11,5, 73,29" href="products.htm"></area> <area shape="rect" coords=" 75,5,137,29" href="stories.htm"></area> <area shape="rect" coords="140,5,198,29" href="orders.htm"></area> <area shape="rect" coords="200,5,288,29" href="community.htm"></area> <area shape="rect" coords="289,5,366,29" href="contact.htm"></area> </map> As displayed in browser p y With hot spots indicated
  • Drawbacks to ImageMaps88  Imagemaps are almost unusable until most of image is downloaded. Image map menu What it looks like while downloading (or if images turned off)
  • Alternatives to Image Maps89  Split image into smaller images, and reassemble using tables (our next topic) or CSS.  Create image links as per slides. E.g., <a href="browse.htm"><img src="menur2c4.gif" alt="browse“/></a> < h f "b ht "><i " 2 4 if" lt "b “/></ > Split i S lit image with table ith t bl borders displayed Split image with table borders turned bo de s t ned off
  • Accessibility and XHTML90  Accessibility refers to the process of making web pages usable (accessible) to users with visual disabilities.  These users use screen reader software such as JAWS.  A web page whose markup is cleanly focused on content and which contains no formatting is significantly g g y easier to comprehend for the blind.  US and Canadian governments require accessible sites. g q
  • Who is the Most Important Blind User?91  Search Engines!!!
  • Accessibility and XHTML92 http://www.youtube.com/watch?v=VGeppPO5lQ0 http://www.youtube.com/watch?v=tNFPHLiO-os http://www youtube com/watch?v tNFPHLiO os http://www.youtube.com/watch?v=d5oZf9ULAyw p y y http://www.youtube.com/watch?v=0ftQIQ91Ff4
  • HTML593  The next version of HTML  Notice that it is NOT XHTML  In 2009, W3C stopped work on XHTML 2.0, and switched focus to HTML5.  Somecontroversy: perception that with HTML5 the browser manufacturers have taken back control of the web.
  • Browser Support94  Still uneven  Main problem, no HTML5 support in IE8 and below
  • HTML595  Design principles:  Don’t break existing web pages  Error handling  Adding markup to simplify web page structure g p p y p g
  • Minimal Structure96 <! DOCTYPE html> ! OC ht l <title>something</title> <h1>heading</h1> <p>some text blah</p> <p>some te t blah</p> Yes, no head or body tags needed!
  • Typical HTML Layout Structure97 <div id=“header”> di id “h d ” <div id=“menu”> </div> </div> <div id=“sidebar”> </div> </di > <div id=“content”> </div>
  • New Tags98  New tags have been added to make the markup more semantic (more meaningful).  Thatis, the usual <div id="something"> hodgepodge has been partially replaced with common markup elements.
  • Structural Elements99
  • Structural Elements100 <! DOCTYPE html> <title>HTML 5 Test</title> <header> <h1>This is the Main Heading</h1> </header> /h d <nav> <ul> <li>Home</li> <li>Products</li> <li>About Us</li> </ul> </nav> <article> <h2>Page Title</h2> <h2>Page Title</h2> <p>blah blah blah</p> </article> <footer> Copyright 2012 </footer> /f t
  • Structural Elements101
  • 102
  • 103
  • Old way of Audio/Video104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114