1 HTML
2 HTML Hypertext Markup Language (HTML) a tag-based language used to format static content, which is unchanging information. Dynamic content, on the other hand, uses scripting languages, applets, or Flash files to interact with the user. We will get to all that later in the semester.
3 HTML HTML files have file name extensions of either .htm (from the older three-character file name extension limit) or .html. HTML files are ASCII files; that is, text-based files.
4 HTML History HTML, developed by Tim Boerners-Lee, and (this is important!) charitably released in 1989 for free use, no copyright restrictions. Boerners-Lee formed the W3C to manage the specs. Three releases: 1.0, 2.0, 3.0, 4.0 (1998) Then there was XHTML 1.0 (2000): Created newer (many silly) standards (more later). Incorporated support for XML (a data transport language). Was XHTML really all that different? Certainly not different enough to support the claims that it was a whole new language.
5 HTML History XHTML 1.0 was the universal standard, for a while.Then two competing groups (both authorized by the W3C) spent several years working on two competing standards, HTML5.0 and XHTML 2.0. It actually got nasty – each group hated the other.
6 HTML History XHTML: The XHTML 2.0 group insisted it wasn’t HTML anymore, it was a whole new language. (Not.) I heard a couple of them present at a conference –pretty darn arrogant. Though XHTML 2.0 was essentially HTML, it turned out to have areas incompatible with existing HTML & XHTML 2.0 websites.
7 HTML History HTML5: In 2004, a Boerners-Lee group reintroduced the idea of evolving HTML4 into HTML5. The W3C rejected that proposal, and continued with XHTML. Apple, Mozilla, and Opera formed a group called WHATWG to continue evolving HTML5 anyway. Guiding principle: Technologies need to be backwards compatible and oriented toward the way the world is, not the way we want the world to be.
8 HTML History HTML5, continued:In 2006, the W3C agreed to participate in development of HTML5. Finally, in Spring 2010, Microsoft joined the HTML5 working group. Sometime in Spring 2011, the W3C stopped all development on XHTML 2.0 and declared HTML 5.0 the future standard. All major browser manufacturers now on board.
9 HTML History HTML5, continued:HTML5 will incorporate many of the best elements of XHTML 2.0. Messier but more reasonable specifications, in order to be backward compatible with the quite messy evolution of HTML over the decades. Invalid code that would have been just ignored in the past will be disallowed and flagged as errors in the future.
10 HTML History HTML5, continued:Parts of HTML5 supported in newest browsers, some parts not available for many years (2020?) This may be the last release number – just an evolution, bit by bit, from now on. HTML5.0 evolving specifications
11 HTML History HTML5, continued:HTML5 will include native support for graphics manipulation. Adobe Edge for HTML 5 graphics manipulation: Still in beta.
12 Creating HTML Pages Develop the entire site on your own PC first.FTP the site to the web server only after it’s completed. Test the site again on the server. Two ways to create the site on your PC: the easy way, and the hard way…
13 Creating HTML Pages Easy way: Create the page visually using an integrated development environment (IDE), which translates your visual design to HTML. Adobe’s Dreamweaver – the Cadillac of editors. Microsoft’s Expression Web, a part of the Microsoft Academic Alliance – see the CS website for information. Seamonkey’s free HTML editor, in the labs,
14 Creating HTML Pages For image creation and editing:Adobe’s Fireworks or Photoshop Gimp, a free download,
15 Creating HTML Pages Hard way: Hand code the HTML...In a plain text editor like Notepad or Editpad (download from my web page): Open both Editpad and your browser, with a sliver of each showing on your desktop no matter which one has focus. Type the HTML in the text editor and save as a .html file on your hard drive. Switch to the browser. File-Open-Browse to open the file in the browser for the first time, or Refresh/Reload to load the latest version. Repeat until done: edit the HTML in the text editor, save it, test in the browser.
16 Creating HTML Pages Either way, FTP/upload to the server only after the site is done and debugged locally on your PC. Then, be sure to test your site on the server from a different computer than your own, or rename the working directory on your hard drive before testing the files on the server. Allow plenty of time to debug after you have uploaded to the server; some links that worked just fine on your PC will inevitably break because you didn’t specify them properly for the server.
17 Creating HTML Pages Do not use a word processor to create HTML files.Native word processor files, like .wpd and .doc files, have hidden formatting characters that will choke the browser. Could do a “save as txt/ASCII”, though, to strip out formatting, leaving just the text. Could do a “save as HTML”, but the code will be unbelievably ugly! Do not use a UNIX text editor to create HTML or CSS files – puts everything on one line for “View Source,” and I won’t grade it or help debug it that way.
18 Creating HTML Pages Can use a specialized HTML editor to validate the HTML and speed up repetitive tasks. Check out the free editor and tools at . To check syntax, try the utilities at: (although I disagree with many of its findings) HTML online reference:
19 If You Have an IDE, Why Bother to Learn HTML?IDEs will not always do what you want them to do, so you have to tweak the code they generate. Sometimes it’s a whole lot faster to hand-code a tag than to create it in the IDE. Knowing HTML is absolutely essential when debugging HTML created by IDEs.
20 Introduction We won’t cover everything in HTML; we will cover the basics, and you can look up anything else when the need arises. However, you will be tested on the HTML. The code you are expected to know is in the HTML Study Guide on my web page.
21 HTML 12/17/2017 Introduction In these PowerPoint presentations, HTML tags (commands) appear in green; while the results that display in the browser appear in yellow. Formatting is often compromised because there isn’t enough room on the screen to format properly. html.ppt
22 Introduction Designed originally to define structure (the way the parts are inherently related), not presentation/formatting (the way the document looks in the browser). Examples: Structure : top-level header, sub-head, paragraph text, tables, table cells, bulleted lists, etc. Presentation : color, size, positioning, etc.
23 Introduction How to tell the difference between structure and presentation? If relevant to a blind person, it’s structure. If irrelevant to a blind person, it’s presentation.
24 Introduction The name of the homepage should be index.htm or index.html. That’s the default file that a web server delivers if the browser doesn’t specify the name. Search engines look for that file. Get in the habit by using that name for your homepage for this class.
25 Introduction If you have errors in your HTML, the browser might still attempt to display your page. “Attempt” is the key word here; the page might not display at all, or it might not display as you intended. Browsers don’t give you error messages the way compilers do.
26 Introduction We will be enforcing “well-formed HTML”; that is, you must follow the rules (even when the tags will work without following the rules) and do proper formatting. We will be following the newer HTML standards when they are widely supported by current browsers.
27 Tag Overview HTML wraps content in tags that are indicated by < >. Most tags require both a start tag and a closing/end tag, and content (the stuff that displays on the page) goes in between. Example: ...Insert a paragraph of content here ...
“/” used for end tags28 Tag Overview A start tag and its end tag are viewed as a container.In some situations, in some browsers, the browser may forgive you if you forget an end tag, but other browsers in other situations don’t. Well-formed HTML following the newer standards requires the end tag even if the browser lets you get away with omitting it.
29 Tag Overview Some tags have only a start tag, with all the necessary information embedded within the tag. 
or Older standard. Recommended by: HTML4? No, but accepted XHTML 2.0? Yes. (How silly.) HTML5? Doesn’t care either way.
30 Tag Overview From now on, I won’t show ending slash in non-container tags (assuming I delete all those already in my code). Either way, tags have optional attributes that are embedded within the start tag. Attribute name, equals sign (spaces optional), and value in quotes (optional unless special characters).
31 Tag Overview Uppercase versus lowercase HTML: Quotes:HTML ( ): uppercase the standard, both recognized. XHTML 2.0: lowercase recommended, both recognized. HTML5: doesn’t care. Create your own standard and be consistent. Quotes: Highly recommended but required only if special characters. Don’t use “curly quotes.”
32 Tag Overview HTML and Windows PCS are not case-sensitive, but UNIX servers are. The case of the file names (and the paths to get to those files) within the HTML must match the case of the files on UNIX. Again, leave time to debug on the server!!!
33 Tag Overview Common file naming methods: In any case, be consistent!fileName.html (Hungarian notation/camel case) file_name.html In any case, be consistent!
34 Documentation Tags Tags that start with Two types: Comments DOCTYPE tag
35 Documentation Tags Comments Indicated by< ! - - insert single or multi-line comment here - - > Don’t over-comment because of the download hit – only esoteric stuff. Do use blank lines liberally to separate chunks of code, and use indentation to show nesting.
36 Documentation Tags DOCTYPE TagThe very first statement in the HTML file, stating standards the file follows. HTML4 and XHTML 2.0 had doctypes like this: (case-sensitive) This one is “loose” (“transitional”) -- that is, it supports the newer standards while allowing older code, too. Dreamweaver CS5 defaults to this.
37 Documentation Tags DOCTYPE Tag HTML5: (woo-hoo!)Can choose as an option in Dreamweaver, under “Edit> “Preferences” > “New Document” If in doubt, use whatever Dreamweaver puts in for you, for now. Avoid “strict” (instead of “transitional”) – may well make your code break.
38 HTML Tags
39 Deprecated Tags and AttributesDeprecated tags and attributes are older versions whose use is not recommended even though they will still work in modern browsers. We will learn the deprecated tags and attributes, because you will still encounter them on the web. You will use them in your first HTML assignment, then remove all of them for your CSS assignment. (Fastest way I know to make you a believer in CSS!)
40 Deprecated Tags and AttributesNo deprecated tags or attributes in your personal or group website – 1 point off for each instance I find.
41 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This is a paragraph of content of some sort, that goes on, and on,Header Stuff
This is another paragraph of some kind of content, that goes on,
and on, and on, and on…42 Loading an HTML File into the BrowserLoaded sequentially, line by line, displaying each line of HTML before moving on to the next line. A given HTML tag has no knowledge of the line before it or the line after it. So, with HTML alone, you can’t jump around the way you can with most programming languages, because HTML isn’t a programming language.
43 Indicates the beginning and ending of the HTML. “http://www.w3c.org/TR/REC-html40/strict.dtd”> This is a paragraph of content of some sort, that goes on, and on,Header Stuff
This is another paragraph of some kind of content, that goes on,
and on, and on, and on… Indicates the beginning and ending of the HTML. 44 Indicates the beginning and ending of the HTML. “http://www.w3c.org/TR/REC-html40/strict.dtd”> This is a paragraph of content of some sort, that goes on, and on,Header Stuff
This is another paragraph of some kind of content, that goes on,
and on, and on, and on… Indicates the beginning and ending of the HTML. Contains information about the document as a whole. Generally not rendered on the page itself, merely informational. Only one per page.45
This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….This is another paragraph of some kind of content, that goes on,
and on, and on, and on… Displays on the colored bar across the top line of the browser window. Displays when search engines hit on the site. Is used by search engines to catalog the site. Is the default name when a user adds the page to his or her favorites list. Remember that users might link to this page directly, bypassing the homepage, so it really needs to be clear. 46 Meta tags are used primarily by search engines. "http://www.w3c.org/TR/REC-html40/strict.dtd" > This is a paragraph of content of some sort, that goes on, and on,Header Stuff
This is another paragraph of some kind of content, that goes on,
and on, and on, and on… Meta tags are used primarily by search engines. name = “keywords” identifies the prime search words for search engines that use keywords (not all do). name = “description” identifies the description that displays sometimes in search engine listings.47 Only one
per page. Contains the elements that display on the page. Can include deprecated attributes for default text and link colors, and background color and images. “http://www.w3c.org/TR/REC-html40/strict.dtd”>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….This is another paragraph of some kind of content, that goes on,
and on, and on, and on…48 Setting up the Body Deprecated
attributes:bgcolor = “#hhhhhh” Background color. #hhhhhh is an RGB hex color code (actually RRGGBB), like “0000ff” for blue – more later. For now, remember that the larger the number, the more intense the value of that color… #ff0000 is red, #00ff00 is green, #0000ff is blue #ffffff is white and # is black Default background color is white. Deprecated in favor of CSS’s background-color.49 Setting up the Body
attributes (continued):background = “background.gif”> For a background image. Deprecated in favor of CSS’s background-image. If too large to fit in the browser window, the image will be truncated on the right and the bottom. If too small to fill the screen, the image will tile (repeat horizontally and/or vertically) to fill the background.50 Setting up the Body
attributes (continued):background = “background.gif”> Also consider using a compatible background color, so the user has something to look at while the background image loads and tiles. Use full-screen background images only with great thought – nasty download hit. More later.51 Setting up the Body
attributes (continued):bgproperties=“fixed” Use in conjunction with the background attribute to let content scroll over the top of a fixed background image. If omitted, the background scrolls along with the content, which may result in repeating an image you don’t want to repeat. IE only, not in W3C specs. Deprecated in favor of CSS’s background-attachment.52 Setting up the Body
attributes (continued):text =”#hhhhhh” sets text color. Default text color is black (#000000). Deprecated in favor of CSS’s color.53 Setting up the Body
attributes (continued):Links (default color is normally blue) link = “#hhhhhh” for unvisited links (default blue) alink = “#hhhhhh” for active links (clicked on, default red) vlink = “#hhhhhh” for visited links (default usually purple)54 Setting up the Body
attributes (continued):Link formatting is deprecated in favor of CSS’s a, a:link, a:visited, a:hover, a:active.55
“http://www.w3c.org/TR/REC-html40/strict.dtd”>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….This is another paragraph of some kind of content, that goes on,
and on, and on, and on… Here’s what a body tag with deprecated attributes looks like…56
This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….This is another paragraph of some kind of content, that goes on,
and on, and on, and on… For formatting up to six levels of headings. Varies the font size automatically; a level 1 header has a larger font size than a level 2 header, etc. Relative sizing; the actual size is selected by the browser. 57 Header Tags Example: Level 1 header Displays: Level 2 headerLevel 1 header
Level 2 header
Level 3 header
Displays: Level 1 header Level 2 header Level 3 header HTML forces a blank line after the header, but we can fix that with CSS.
58 Header Tags Header tags are actually intended to be structural (formatting is incidental these days), following a progression – h2 under h1, h3 under h2, etc. Do not use a header tag for a non-header item, just to get a particular font size or other formatting! Important to maintain the progression properly, for accessibility.
59 The text wraps to fill the available line length within the browser. “http://www.w3c.org/TR/REC-html40/strict.dtd”> This is a paragraph of content of some sort, that goes on, andHeader Stuff
This is another paragraph of some kind of content, that goes
on, and on, and on, and on… All of the text placed within the paragraph tags appears as a single paragraph. The text wraps to fill the available line length within the browser. There is a blank line both before and after the paragraph display. is required by newer standards even though browsers will accept paragraphs without ending tags.60 Paragraph Tag Blank lines (created with carriage returns) or extra spaces within the text are ignored. In other words, you must do formatting with HTML, not by formatting within the text.
61 Display depends upon screen width:Paragraph Tag Fourscore and seven years ago, our fathers brought forth on this continent a new nation, …
Display depends upon screen width: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, … or Fourscore and seven years ago, our fathers brought forth on this continent a new nation, …62 Paragraph Tag
Penny McIntire Department of Computer ScienceNorthern Illinois University DeKalb, IL 60115
displays Penny McIntire Department of Computer Science Northern Illinois University DeKalb, IL 60115 because spaces and line breaks in the text are ignored. 63 Paragraph Tag On the other hand, using ...
64 Paragraph Tag
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115
displays Penny McIntire Department of Computer Science Northern Illinois University DeKalb, IL 60115 Usingtags on each line.
65 Break Tag ... would be irritating...
Forces a line break, with no extra blank line, like a carriage return. Was deprecated and
for XHTML, but fine for HTML5. Inserted within text within other tags like
66 Break Tag
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115
67 Other HTML tags
68 Horizontal Rule
69 Horizontal Rules noshade is optional – shades the line with a 3-D speed bump effect if omitted and line is tall enough. In theory, can make a vertical rule by making width very small, size very big.
70 Center Tag
71 Center Tag Example:
72 Center Tag Level 1 header Displays: Level 2 header Level 3 header
73 Align Attribute align = "center"/"left"/"right"/"justify"An attribute, not a tag, so embedded within another tag, such as an tag.
Used to align a single element such as a header or a paragraph. align = "center" works the same as
74 Align Attribute Example: displaysThis is a level 4 header
This is a level 4 header
This is a level 4 header
displays This is a level 4 header
75 Text Styles ... underlineAvoid, because underline is generally reserved for links. Deprecated in favor of CSS’s text-decoration. ... boldface ... is deprecated. CSS’s font-weight a better option than .
76 Text Styles ... italics (“emphasized”)... (deprecated) CSS’s font-style a better option. ... fixed width font CSS’s typeface options are preferred. ... strike-through CSS’s text-decoration a better option. ... superscript CSS’s vertical-align a better option. ... subscript
77 Text Styles Example: displays This is a level 1 header This is a level 1 header displays This is a level 1 header
78 Text Styles Well-formed HTML closes tags in the reverse order in which they are opened. Correct: Hi! Incorrect: Hi!
79 Font Tag paragraph text here... Overrides the defaults in the element. Deprecated (viewed as the ultimate evil)! in favor of CSS’s font properties.
80 Font Tag size attributeValid size range is 1-7, with 1 the smallest and 7 the largest. size = 3 is the browser default. +2 (relative sizing) gives a font size of 5, if applied to the base font set in the browser. If the font size has already been increased, say to a 4, then +2 results in a size 6. Best to use relative sizes, for accessibility reasons.
81 Font Tag face attribute changes the typeface.The typeface must exist on the user’s browser. You can list multiple typefaces as attributes for face – the browser checks the user’s system for the first one, then the second one, etc. The last one on the list should be a standard font like Times or Ariel, or serif or san-serif.. face = "Calligrapher, Georgia, Times, serif"
82 Font Tag If the browser doesn’t find any of them, it uses the default.Nothing to lose here if the font isn’t found; it “degrades gracefully.”
83 Font Tag If you need a fancy font for something special, create a text graphic, save it as an image, and use the image. This comes with a download price and is harder to maintain in the future, so use sparingly. Newer browsers provide the ability to save fonts with the page. A huge download hit (even small font files are around 20K, large font files can be above 100K). In theory, the fonts could contain viruses.
84 Preformatted Text
...Preformatted text preserves the formatting in the original, including spaces, line breaks, and tabs. Particularly useful for displaying code listings because the text won’t wrap to fit the available space in the browser window. The width attribute specifies the maximum number of characters in a line. Don’t use as a way of avoiding HTML/CSS formatting!
85 Incorporating Images height="n" width="m" name = "name you give it" id = "name you give it" alt="alternate text to display" title="tool tip to display" border="n" align="see prior discussion" hspace="n" vspace="n" >
height=“n” width=“m” name = “name you give it” id = “name you give it” alt=“alternate text to display” title=“tool tip to display” border=“n” align=“see prior discussion” hspace=“n” vspace=“n” >
86 Incorporating Images src="…"Only two image formats completely and reliably accepted by all browsers, including older ones: .jpg (for continuous-tone images like photos) .gif (for line art like cartoons, logos, etc.) Another format, web-optimized .png (don’t use native Fireworks .png!) works in newer browsers, but test features like transparency thoroughly!
87 Absolute and Relative URLssrc="path and filename" Background on absolute and relative URLs in HTML... Absolute URL Contains the complete address, including the protocol, such as or Will not work if you forget the “http://”
88 Absolute and Relative URLsAn address with one or more of the pieces missing, like myimage.gif or assign.html No path specified means it’s in the same directory where the current HTML file is located. The server assumes that the missing pieces of the target address are the same as the current page.
89 Absolute and Relative URLscsci475/myimage.gif For the above relative address, the browser would look in the csci475 subdirectory under the subdirectory where the current page resides.
90 Absolute and Relative URLs../csci475/myimage.gif “../” means “go up one subdirectory.” For the above relative address, the browser would go up one directory in the hierarchy, then down to the csci475 directory.
91 Absolute and Relative URLs../../csci475/myimage.gif For the above relative address, the browser would go up two directories in the hierarchy, then down to the csci475 directory.
92 Absolute and Relative URLsSimilar for links to other web pages: What will this do if specified as a link address?
93 Incorporating Images Back to src="…" Use an absolute address like for all addresses not under your own site. Use a relative address like ../csci475/assign.html for all addresses within your site. Why? Portability!
94 Incorporating Images Either way, addresses can work when testing on your own computer but break when you put them out on the web. Why? Windows is case-sensitive, UNIX is not. You might have changed the directory structure for the server. You might have forgotten to FTP ancillary files like images.
95 Incorporating Images OR, it might work on the server when you are testing from your own computer, but won’t work from a different computer. Why? If you specified an image that’s available on your own computer but not on the server, the image may still show up when you’re on your own computer. Test from another computer, or rename the directory on your own computer!
96 Incorporating Images height = "nnn" height, in pixelswidth = "nnn" width, in pixels height and width default to the exact size of the saved image if not specified, but specify that default anyway. Text on the page displays properly right off the bat, with empty boxes of the correct size as placeholders for the images. Faster display.
97 Incorporating Images Don’t use the height and width attributes to change the size of the image on the page. Don’t use to resize image smaller, because you’re still paying the download hit for the larger image. Don’t use to resize the image bigger, because quality will be seriously degraded. Instead, use an image-editing program to resize images and save them in the precise size (in pixels) that you want it to be on the screen. More later, under graphics.
98 Incorporating Images name = "name you give it" id = "name you give it"Needed only if you want to reference the image by name, for things like mouseovers. name is deprecated (but still works) in favor of id in the newer standards. Use both if in doubt (which is what Dreamweaver does for you, when it needs to reference images).
99 Incorporating Images alt = "some text " Text that displays if the browser can’t display graphics or the image errors off. It’s good programming practice to always (repeat, always) include an alt attribute. Used by screen readers for vision-impaired users, used by search engines. alt = "" if no meaning attached. title="some text" title: text on mouseover (newer) Addition to slide
100 Incorporating Images border = "n" border width, in pixels.0 for no border. Deprecated in favor of CSS border. HTML image borders went out of style for a number of years, but now graceful, one-pixel wide borders are back in style.
101 Incorporating Images align = "top" "bottom" "middle" "left" "right"
102 Incorporating Images hspace=“m" vspace="n"Vertical and horizontal white space left around the image, in pixels. Each applies to two margins. Default is usually 3 pixels. If you want spacing on only one side, use a transparent GIF spacer or instead (only until you know how to use CSS). Deprecated in favor of CSS margin.
103 Incorporating Sound and MoviesLinking to sound or movie files is identical to linking to images, but the file name extensions are different. The user must have the appropriate “player” on his or her PC – for example, the Shockwave player if it is a Shockwave file. You can ask the user if he or she wants to download the appropriate player, but also provide an alternative.
104 Incorporating Sound and MoviesFlash is already embedded in all browsers produced in recent history, so you won’t need to worry about Flash files.
105 Incorporating Sound and MoviesBackground sound (IE only)
106 Linking Anchors, or hyperlinks, link to other web pages, documents, or accounts. Penny’s Page The text that displays (underlined unless you change it with CSS) Anchor tag Absolute or relative address to link to.
107 Linking Example (text link): Go to Yahoo displays Note the difference between the actual link address and the text that is displayed.
108 Linking target = attribute for the tag (deprecated in favor of JavaScript to open windows): "_self" Opens the document in the current window (the default). "_blank" Opens the document in a new window, so that the original source window is preserved. Use for external links, but use sparingly for internal links. "_parent" and "_top" only if using frames (more later). "nameYouHaveChosen" Opens in a new window that you can reuse by referencing the name again. Use initial "_" only with reserve words above, not with your own names.
109 Be sure there isn’t an extra space here.If the border is turned on, its color will be the same as the color specified for links. Linking: Image Links To make an image an anchor for a link, merely surround it with the beginning and ending anchor tags... 
border = "2" height = "100" width = "150" alt = "picture of my dog" > Be sure there isn’t an extra space here.
110 Linking: Automatic Email LinksIf the link is an address, and you want the user’s default program to come up with an automatically addressed to the href address when the link is clicked: Send me an This works only if the user has a default client set up on his or her computer; i.e., won’t work on a public access computer like our labs.
111 Linking: Thumbnails to Larger ImagesProvide users with small thumbnail images that link to larger images, so that the user can choose whether or not to pay the download price of the larger image: 
This defines the thumbnail image as the clickable link to the page that contains the larger image.
112 Linking: Thumbnails to Larger ImagesDon’t just use the height and width attributes to downscale the larger image to become the thumbnail; in that case, the thumbnail would take just as long to load as the larger image. That would defeat the purpose of having fast load on the little image and letting the user choose whether or not to wait for the larger image.
113 Linking: Internal AnchorsSometimes it might be nice to be able to link to a specific location in the current page, or to a specific location deep in another page, not just to the top of that page. HTML has a facility to assign an internal anchor to any location in an HTML file; a bookmark, of sorts. Then, we can direct the user directly to that location by adding that location name at the end of path to the page.
114 Linking: Internal AnchorsUse an anchor tag with no href and no content at the destination for the jump: This serves as the bookmark. Specify both name (older standard) and id (newer standard not yet fully supported), to be backward and forward compatible. Newer browsers support any element ( , , etc.) with an id to be used as a bookmark, without needing an tag at the destination.
Careful, though – older browsers are still common.
115 Linking: Internal AnchorsTo jump to that spot... Jump to XYZ displays and links to the anchor you specified. You can omit the URL/path if the bookmark is within the current page: Jump to XYZ
116 Linking Hint Be sure not to include a space or inside any anchor tags, either before or after the link content, whether that content is text or an image. On a text link, the extra spaces will be underlined, which looks awful. On an image link, the dotted outline that displays on click will have an odd shape.
117 Linking: Image Maps An image map is a single image that encompasses multiple links. We specify different areas of the image as hotspots, or anchors. This involves more complicated HTML than using several separate image links; use only when you can’t get the effect you want using separate images. (ImageMapTest.html)
118 A single image, with multiple hotspotsLinking: Image Maps A single image, with multiple hotspots 1 3 4 2
119 This tag puts the actual image on the page. 1
title="Nutritional Data for Apples" alt="Nutritional Data for Apples" coords="136,98, 23“ > title="Nutritional Data For Grapes" alt="Nutritional Data For Grapes" coords="2,69,56,185" >. title="Nutritional Data For Limes" alt="Nutritional Data For Limes" coords="67,38,63,60,79,77,95,75,101,63,94,45,83,38,67,38“ > title="Nutritional Data About Grapes" alt="Nutritional Data About Grapes coords="175,89,174,116,189,130,182,153,201,180,224,160,236,104, 214,75,175,89“ > This tag puts the actual image on the page. 1 2 3 4 One per hotspot. This group of tags sets up the template for the hotspots.
120 Image Maps Sorta like a DSECT in assembler. Sets up the entire image map. Put all map definitions within the tag. name is the only attribute. id will be used more commonly in the future, but name is still needed for current browsers.
121 Image Maps attributes:href = "path to the destination page" shape = "rect" or "poly" or "circle" coords = "coordinate points" For shape = "rect", x1,y1,x2,y2 points for top left and bottom right corners, in pixels, starting at top left corner of the image. For shape = "poly", must list x,y for each point. Can get complicated very quickly. For shape = "circle", x,y for center, plus radius in pixels.
122 Image Maps No formatting – spaces, line breaks, tabs – within tag. Trial and error if you do the coordinates manually, but... Much easier in a package like Fireworks or Dreamweaver, where you simply draw a shape around the area and it calculates the coordinates for you.
123 Image Maps Within the body, define the image the way you would otherwise, but connect to the map by adding the attribute usemap = "#mapname" Like a “using” statement in assembler. The browser then overlays the image map on the image. Use both the alt and title attributes for cross-browser display of the name of the links on mouseover. Let’s look again…
124 Links the image to the image map. title="Nutritional Data for Apples" alt="Nutritional Data for Apples" coords="136,98, 23“ > title="Nutritional Data For Grapes" alt="Nutritional Data For Grapes" coords="2,69,56,185" > title="Nutritional Data For Limes" alt="Nutritional Data For Limes" coords="67,38,63,60,79,77,95,75,101,63,94,45,83,38,67,38“ > title="Nutritional Data About Grapes" alt="Nutritional Data About Grapes coords="175,89,174,116,189,130,182,153,201,180,224,160,236,104, 214,75,175,89“ > Links the image to the image map. x1,y1,x2,y2 coordinates
125 Special Characters Some characters, particularly < > and &, have special meaning for HTML and therefore cannot simply be typed into the text. Instead, HTML uses a code that starts with an & and ends with a ;...
126 Special Characters Symbol < > & © space Code < > &Can be used to force extra spacing (remember, HTML ignores all but a single space character), but CSS can usually provide extra spacing much better.
127 Special Characters Older versions of HTML will work without the semicolon, but HTML5 requires the semicolon. Example: Copyright symbol = ©
128 Special Characters Can also use the ASCI character set, but this is discouraged by HTML5... Dollar sign = $
129 Bulleted Lists Also called unordered lists....
starts and stops the list. starts the list
130 Bulleted Lists HTML: Displays:
131 Bulleted Lists Can also nest bulleted lists...
132 Indentation is for our benefit; there is no meaning attached to it.Bulleted Lists Example:
133 Bulleted Lists Can specify bullet types:On , type="disc"/"circle"/"square"
On older browsers, the browser inserts a blank line at the close of every list – that is, every – whether you want it or not, like this...
134 Bulleted Lists Example: Displays:
135 Bulleted Lists There is no nesting limit.Don’t forget to close your lists, or your web page will be, uhm, interesting, to say the least.
136 Numbered Lists Also called ordered lists.
137 Numbered Lists Attributes for both
138 Example: Displays:
139 Tables Tables are used for formatting table data just as in Word or Excel…
140
| Name | Age | City | Shelley | 28 | Chicago | Abby | 27 | San Francisco |
|---|
| Name | Age | City | Shelley | 28 | Chicago | Abby | 27 | San Francisco |
|---|
142 Sets up a single Table Row in the table header.
Sets up a single Table Row in the table header. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco
143
| Name | Age | City | Shelley | 28 | Chicago | Abby | 27 | San Francisco |
|---|
144 Defines the body of the table.
Defines the body of the table. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco
145 Defines two Table rows. Name Age City Shelley 30 Chicago
Defines two Table rows. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco
146 Defines three Table Data cells in this row.
Defines three Table Data cells in this row. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco
147 Defines three Table Data cells in this row.
Defines three Table Data cells in this row. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco
148 But is good for accessability reasons. 149 Tables As we just saw, tables are used for formatting tabular data, just as in Word or Excel. In addition, invisible tables can be used to line objects up with each other using just HTML (other ways will be discussed when we get to CSS). So, you might put objects in a table with invisible borders, just to line them up the way you want them... 150 Header Stuff Text about picture 1 .................................... 151 Tables An “invisible” table like this allows more exact positioning of items than you can get in other ways. Of course, you can have the borders visible, too, when it suits your purpose. A more modern (but still buggier) way of lining things up, using 152 Tables Failure to close any of the table tags can lead to major formatting problems, depending upon the browser. For instance, a missing
Again, and are optional – can instead just use row and cells, like this version. But is good for accessability reasons. Name Age City Shelley 30 Chicago Abby 29 San Fran Name Age City Shelley 28 Chicago Abby 27 San Francisco s, will be discussed a bit later. Still circumstances where ONLY tables are practical. That should change over the next few years.
153 Tables Attributes for the
| … | on the same line to make this work.
| or | elements. 161 The equivalent of three columns.… | Abby | 27 | San Francisco | The equivalent of three columns. Name Age City Shelley Chicago Abby 27 San Fran
|---|