HTML 2 HTML Hypertext Markup Language (HTML) a

04

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)<br>

05

5 HTML History 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.<br>

06

6 HTML History XHTML 1.0 was the universal standard, for a while.
Then two competing groups spent several years working on two competing standards, HTML5 and XHTML 2.0.
It actually got nasty – each group hated the other.<br>

07

7 HTML History XHTML 2.0 first:
The XHTML 2.0 group, authorized by the W3C, 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 was not fully backwards compatible with older websites.<br>

08

8 HTML History HTML5:
In 2004, a Boerners-Lee group reintroduced the idea of evolving HTML4 into HTML5.
W3C rejected that proposal, continuing with XHTML.
Apple, Mozilla, and Opera (and Boerners-Lee) 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.<br>

09

9 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.
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.<br>

10

10 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.<br>

11

11 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 http://dev.w3.org/html5/spec/Overview.html<br>

12

12 HTML History HTML5 includes/will include support for:
Graphic effects like filters, rounded corners, and enhanced transparency.
Standardized sections such as “navigation” and “footer.”
Scalable Vector Graphics (SVG): vector and raster images and their behaviors defined in XML text files, so they can be scripted.
<canvas> (a drawing screen) – raster only, so drawn elements cannot be manipulated in an SVG-like way.<br>

13

13 HTML History Native animation and video (replacing Flash???).
“Flash Professional Toolkit for CreateJS” plug-in allows you to create in Flash but export to HTML5/JavaScript: http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html
<video> tag
Thirty new tags, plus lots of new attributes for existing tags.<br>

14

14 HTML History HTML5 and “Standards”
Trying to avoid the “browser wars” of the past, when we had to “sniff the browser” and write different versions of the page for different browsers.
BUT… the standards will be implemented at different rates by different browser manufacturers over the next decade, so still problematic.<br>

15

15 HTML History Probably even more problematic now than 5 years ago, because mobile browsers, too.
For further discussion, see
http://www.adobe.com/inspire/2012/04/what-are-web-standards.html and
http://www.adobe.com/inspire/2012/08/web-standards-primer.html?trackingid=JZYSJ
IE 8 supports only bits of HTML5 standards – IE 9 and up are more compliant.
What to do? Use plug-ins or degrade gracefully.<br>

16

16 HTML History Resources (more on some of these in JavaScript lectures):
Demos at Chrome Experiments http://www.chromeexperiments.com/
Articles and tutorials at Google’s HTML5 Rocks http://www.html5rocks.com/en/
Browser compatibility tables at HTML5 Please http://html5please.com/
Browser compatibility tables at CanIUse http://caniuse.com/
Tutorials on the Adobe Developer Connection http://www.adobe.com/devnet.html , especially Adobe, Standards, and HTML5 http://www.adobe.com/devnet/html5/articles/adobe-standards-html5.html
HTML5: Edition for Web Authors: http://www.w3.org/TR/2011/WD-html5-author-20110809/
JavaScript feature detection library, Modernizr http://modernizr.com/<br>

17

17 Creating HTML Pages Develop the entire site or subsets of the site on your own PC first.
FTP 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…<br>

18

18 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, in our labs.
Microsoft’s Expression Web, a part of Microsoft DreamSpark software program– see the CS website for information.
Seamonkey’s free HTML editor, in the labs, http://www.seamonkey-project.org/<br>

19

19 Creating HTML Pages For image creation and editing:
Adobe’s Fireworks or Photoshop
Gimp, a free download, http://www.gimp.org/<br>

20

20 Creating HTML Pages Hard way: Hand code the HTML...
In a plain text editor like Notepad, Editpad (download from my web page), or Notepad++ (free at http://notepad-plus-plus.org ):
Open both your editor and your browser, with a sliver of each showing on your desktop no matter which one has focus.
Type the HTML in the 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.<br>

21

21 Creating HTML Pages Either way, FTP/upload to the server only after the site/section is done and debugged locally on your PC.
Then, be sure to test on the server from a different computer than your own, or temporarily rename the working directory on your hard drive before testing 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.<br>

22

22 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.<br>

23

23 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 www.chami.com/html-kit .
To check syntax, try the utilities at:
http://watson.addy.com (although I disagree with many of its syntax findings)
www.w3c.org
HTML online reference: http://www.w3.org/2009/cheatsheet/<br>

24

24 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.<br>

25

25 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 will be in the HTML Study Guide on my web page.<br>

26

26 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.<br>

27

27 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.<br>

28

28 Introduction How to tell the difference between structure and presentation?
If relevant to a blind person, it’s structure.
If not relevant to a blind person, it’s presentation.<br>

29

29 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.
Please get in the habit by using that name for your homepage for this class.<br>

30

30 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.<br>

31

31 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 as they are widely supported by current browsers.<br>

32

32 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:
<p>
...Insert a paragraph of content here ...
</p> “/” used for end tags<br>

33

33 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.<br>

34

34 Tag Overview Some tags have only a start tag, with all the necessary information embedded within the tag.
<img src="myPicture.jpg">
or
<img src="myPicture.jpg" /> Recommended by: HTML4? No, but accepted. XHTML 2.0? Required. (How silly.) HTML5? Doesn’t care either way. Older standard.<br>

35

35 Tag Overview I won’t deliberately show the ending slash in non-containers tags.
Either way, tags have optional attributes that are embedded within the start tag.
<img src = "myPicture.jpg"> Attribute name, equals sign (spaces optional), and value in quotes (optional unless special characters).<br>

36

36 Tag Overview Uppercase versus lowercase HTML:
HTML (1.0-4.0): 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.”<br>

37

37 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!!!<br>

38

38 Tag Overview Common file naming methods:
fileName.html (Hungarian notation/camel case)
file_name.html
In any case, be consistent!<br>

39

39 Documentation Tags Tags that start with <! never display within the browser.
Two types:
Comments
DOCTYPE tag<br>

40

40 Documentation Tags Comments
< ! - - insert single or multi-line
comment here - - >
Brace yourself for a shocker…
Don’t over-comment because of the download hit – comment only esoteric stuff.
Do use blank lines liberally to separate chunks of code, and use indentation to show nesting (but careful with nesting and server-side includes).<br>

41

41 DOCTYPE Tag
The very first statement in the HTML file, stating standards the file follows.
HTML4 and XHTML 2.0 had doctypes like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (case-sensitive)
This one is “loose” (“transitional”) -- that is, it supports the newer standards while allowing older code, too.
Dreamweaver CS5 defaults to this. Documentation Tags<br>

42

42 DOCTYPE Tag
HTML5:
<!DOCTYPE html> (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. Documentation Tags<br>

43

HTML Tags<br>

44

44 Deprecated Tags and Attributes Deprecated 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 can 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!)<br>

45

45 Deprecated Tags and Attributes No deprecated tags or attributes in your personal or group website – 1 point off for each instance I find.

Let's look at a simple HTML file…<br>

46

<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = "this site does ... ">
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…</p>
</body>
</html><br>

47

47 Loading an HTML File into the Browser Loaded 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.<br>

48

<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = " this site does ... ">
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html><br>

49

<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = “keywords” content = “ phrase1, phrase2, …”>
<meta name = “description” content = “this site does ...”>
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html><br>

50

<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, phrase2, … ">
<meta name = "description" content = "this site does ... ">
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html> 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.<br>

51

<!DOCTYPE html>
<html>
<head>
<title>Penny’s Page</title>
<meta name = "keywords" content = "phrase1, p2, … ">
<meta name = "description" content = "this site does ... ">
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html> 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.<br>

52

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML4.0//EN”
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
<html>
<head>
<title>penny’s page</title>
<meta name = “keywords” content = “ phrase1, phrase2, …”>
<meta name = “description” content = “this site does ...”>
</head>

<body >
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html><br>

53

53 Setting up the Body Deprecated <body> 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 #000000 is black (important!)
Default background color is white.
Missing # works in some browsers, not others.
Deprecated in favor of CSS’s background-color.<br>

54

54 Setting up the Body <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.<br>

55

55 Setting up the Body <body> attributes (continued):
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.<br>

56

56 Setting up the Body <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.<br>

57

57 Setting up the Body <body> attributes (continued):
text =”#hhhhhh” sets text color.
Default text color is black (#000000).
Deprecated in favor of CSS’s color.<br>

58

58 Setting up the Body <body> attributes (continued):
Links
link = “#hhhhhh” for unvisited links (default blue)
alink = “#hhhhhh” for active links
(clicked on, default
red)
vlink = “#hhhhhh” for visited links (default usually
purple)<br>

59

59 Setting up the Body <body> attributes (continued):
Link formatting is deprecated in favor of CSS’s a, a:link, a:visited, a:hover, a:active.<br>

60

60 Setting up the Body So, a fully specified <body> might look like this:
<body bgcolor="#0000ff" background="myBackground.gif" bgproperties="fixed" text="#ffffff" link="#ff0000" alink="#00ff00" vlink="#ffff00" ><br>

61

61 Intro to CSS Quick and dirty intro to local (i.e., in the tag itself) CSS, with more to follow in later lectures…
<body style="background-color:#0000ff; background:url(‘myBackground.gif’); background-attachment:fixed; color:#ffffff;" link="#ff0000" alink="#00ff00" vlink="#ffff00" ><br>

62

62 Intro to CSS Quick and dirty intro to local (i.e., in the tag itself) CSS, with more to follow in later lectures…
<body style="background-color:#0000ff; background:url(‘myBackground.gif’); background-attachment:fixed; color:#ffffff;" link="#ff0000" alink="#00ff00" vlink="#ffff00" > style= is HTML, stuff in quotes is CSS.
format: reserved word: value;
Can use multiple values in a single style attribute.
Alternate single and double quotes.<br>

63

63 Intro to CSS Note: In HTML, pixels are specified by the number alone:
border="2"
In CSS, use the number plus "px":
style="border:2px;" No space between.<br>

64

64 Setting up the Body <body style="background-color:#0000ff; background:myBackground.gif; background-attachment:fixed; color:#ffffff;" link="#ff0000" alink="#00ff00" vlink="#ffff00" > For now, leaving the link specifications in HTML, not in CSS.<br>

65

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML4.0//EN”
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
<html>
<head>
<title>Penny’s Page</title>
<meta name = “keywords” content = “ phrase1, phrase2, …”>
<meta name = “description” content = “this site does ...”>
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and on,
and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes on,
and on, and on, and on…
</p>
</body>
</html> 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.<br>

66

66 Header Tags Example:
<h1>Level 1 header </h1>
<h2>Level 2 header </h2>
<h3>Level 3 header </h3> 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.<br>

67

67 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.<br>

68

<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML4.0//EN”
“http://www.w3c.org/TR/REC-html40/strict.dtd”>
<html>
<head>
<title>Penny’s Page</title>
<meta name = “keywords” content = “ phrase1, phrase2, …”>
<meta name = “description” content = “this site does ...”>
</head>

<body>
<h1>Header Stuff</h1>
<p>This is a paragraph of content of some sort, that goes on, and
on, and on, and on, and on, and on….
</p>
<p>This is another paragraph of some kind of content, that goes
on, and on, and on, and on…
</p>
</body>
</html> 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.
</p> is required by newer standards even though browsers will accept paragraphs without ending tags.<br>

69

69 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.<br>

70

70 Paragraph Tag <p>
Fourscore and seven years ago, our
fathers brought forth on this continent
a new nation, …
</p>
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, …<br>

71

71 Paragraph Tag <p>Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115</p>

displays

Penny McIntire Department of Computer Science Northern Illinois University DeKalb, IL 60115

because spaces and line breaks in the text are ignored.<br>

72

72 Paragraph Tag On the other hand, using <p>...</p> on every line can insert blank lines where you don’t want them...<br>

73

73 Paragraph Tag Using <p> tags on each line. <p>Penny McIntire</p>
<p>Department of Computer Science</p>
<p>Northern Illinois University</p>
<p>DeKalb, IL 60115</p>
displays
Penny McIntire

Department of Computer Science

Northern Illinois University

DeKalb, IL 60115<br>

74

74 Break Tag <br> Forces a line break, with no extra blank line, like a carriage return.
Was deprecated and <br/> for XHTML, but <br> is fine for HTML5.
Inserted within text within other tags like <p>...</p>.
Useful for times when the additional spacing caused by <p> would be irritating...<br>

75

75 Break Tag <p>
Penny McIntire<br >
Department of Computer Science<br >
Northern Illinois University<br >
DeKalb, IL 60115
</p>
displays
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115<br>

76

Other HTML tags<br>

77

77 Horizontal Rule <hr size = "n" height in pixels
width = "m" or "m%"
align = "left" or "center" or "right"
color = "#hhhhhh"
noshade >
Horizontal rule (dividing line) n pixels high, and m pixels or m percent of container width.
align is deprecated in favor of CSS.
color works only in IE, but degrades gracefully to the default color in other browsers. Deprecated in favor of CSS’s color (which also works only in IE).<br>

78

78 Horizontal Rules noshade is optional – shades the line with a 3-D speed bump effect if omitted and line is tall enough.<br>

79

79 Center Tag <center>...</center>
Causes the items within this container (a tag with both start and end tags) to be centered horizontally on the page.
Deprecated in favor of CSS’s
text-align
or
margin-left:auto; margin-right:auto;<br>

80

80 Center Tag Example:
<center>
<h1>Level 1 header </h1>
<h2>Level 2 header </h2>
<h3>Level 3 header </h3>
</center>
<h4>Level 4 header </h4>
<h5>Level 5 header </h5>
<h6>Level 4 header </h6><br>

81

81 Center Tag Displays:

Level 1 header
Level 2 header
Level 3 header
Level 4 header
Level 5 header
Level 6 header<br>

82

82 Align Attribute align = "center"/"left"/"right"/"justify"
An attribute, not a tag, so embedded within another tag, such as an <h1> tag.
Used to align a single element such as a header or a paragraph.
align = "center" works the same as <center>...</center> except <center> is used to enclose multiple tags all at once.
Deprecated in favor of CSS.<br>

83

83 Align Attribute Example:
<h1 align = "center">This is a level 4 header </h1>
<h1 align = "left">This is a level 4 header </h1>
<h1 align = "right">This is a level 4 header </h1>

displays

This is a level 4 header
This is a level 4 header
This is a level 4 header<br>

84

84 Text Styles <u>...</u> underline
Avoid, because underline is generally reserved for links.
Deprecated in favor of CSS’s text-decoration.
<strong>...</strong> boldface
<b>...</b>
<b> is deprecated.
CSS’s font-weight a better option than <strong>? (I disagree.)<br>

85

85 Text Styles <em>...</em> italics (“emphasized”)
<i>...</i> (deprecated)
CSS’s font-style a better option? (I disagree.)
<tt>...</tt> fixed width font
CSS’s typeface options are preferred.
<del>...</del> strike-through
CSS’s text-decoration a better option? (Maybe).
<sup>...</sup> superscript
CSS’s vertical-align a better option? (I disagree).
<sub>...</sub> subscript
CSS’s vertical-align a better option? (I disagree).<br>

86

86 Text Styles Example:

<h1 align = "center">
<u> This is a</u><em> level 1<strong> header</strong> </em> </h1>

displays

This is a level 1 header<br>

87

87 Text Styles Well-formed HTML closes tags in the reverse order in which they are opened.
Correct:
<u> <em> <strong>Hi!</strong> </em> </u> Incorrect because overlapping:
<u> <em> <strong>Hi!</u> </em> </strong><br>

88

88 Font Tag <font color = "#hhhhhh" size = "n" or "+n" or "-n" face = "font name"> ...paragraph text here...
</font>
Overrides the defaults in the <body> element.
Deprecated (viewed as the ultimate evil)! in favor of CSS’s font properties.<br>

89

89 Font Tag size attribute
Valid 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.<br>

90

90 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"<br>

91

91 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.”<br>

92

92 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 (font files can be above 100K).
In theory, the fonts could contain viruses.<br>

93

93 Preformatted Text <pre width="n">...</pre>
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!<br>

94

94 Incorporating Images <img src="path to the image"
height="n" width="m"
name = "name you give it"
id = "name you give it"
alt="for screen readers"
title=“tool tip to display"
border="n" align="see prior discussion" hspace="n" vspace="n" ><br>

95

95 Incorporating Images src=" path and filename "
Only two image formats fully 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 recent browsers, but test features like transparency thoroughly!<br>

96

96 Absolute and Relative URLs src="path and filename"
Background on absolute and relative URLs in HTML...
Absolute URL
Contains the complete address, including the protocol, such as
http://www.pennymcintire.com/csci475/myImage.gif
http://www.amazon.com
Will not work if you forget the “http://”<br>

97

97 Absolute and Relative URLs Relative URL
An address with one or more of the pieces missing, like
src="myimage.gif" 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.<br>

98

98 Absolute and Relative URLs src="csci475/myimage.gif"

For the above relative address, the browser would look under the subdirectory where the current page resides for the csci475 subdirectory.<br>

99

99 Absolute and Relative URLs src="../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.<br>

100

100 Absolute and Relative URLs src="../../csci475/myimage.gif"

For the above relative address, the browser would go up two directories in the hierarchy, then down to the csci475 directory.<br>

101

101 Absolute and Relative URLs Same idea for links to other web pages, not just for images (href specifies a link – more later)href="../../csci475/myHTMLpage.html"

What will this do?
href="www.amazon.com"<br>

102

102 Incorporating Images Back to src="…"
Use an absolute address like
http://www.niu.edu/cs/myimage.gif
for all external addresses (not under your own site).
Use a relative address like
../csci475/assign.html
for all addresses within your site.
Why? Portability!<br>

103

103 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 not case-sensitive, UNIX is.
You might have accidentally changed the directory structure for the server.
You might have forgotten to FTP ancillary files like images.<br>

104

104 Incorporating Images OR, it might work on the server when you are testing from your own computer, but breaks on a different computer. Why?
If you accidentally specified a path and filename on your own computer, the image may still show up when vieing from your own computer.
Test from another computer, or rename the directory on your own computer!<br>

105

105 Incorporating Images height = "nnn" height, in pixels
width = "nnn" width, in pixels
height and width default to the exact size of the saved image if not specified, but specify that default anyway. Why?
Text on the page displays properly right off the bat, with empty boxes of the correct size as placeholders for the images.
Faster display.<br>

106

106 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.<br>

107

107 Incorporating Images But this is changing, due to querying to media queries, which change the image depending upon resolution of the browser window.
More later, under graphics, or check out http://msdn.microsoft.com/en-us/magazine/hh882445.aspx if you are anxious to get going with media queries and CSS.
Better to use height: and width: in CSS, unless one-offs.<br>

108

108 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, and will for years to come) 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).<br>

109

109 Incorporating Images alt = "some text" Text that displays if the browser can’t display graphics or the image errors off.
Always (repeat, always) include.
Used by search engines.
Screen readers use for vision-impaired users.
alt = "" (empty quotes) if no meaning, so skipped by screen readers.
title="some text"
For a tooltip on mouseover (newer).<br>

110

110 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.<br>

111

111 Incorporating Images align =
"top"

"bottom"

"middle"

"left"

"right"<br>

112

112 Incorporating Images hspace=“m" vspace="n"
Vertical and horizontal white space left around the image, in pixels.
Each applies to two margins (that's unfortunate)
Default is usually 3 pixels.<br>

113

113 Incorporating Images align, hspace, and vspace
Deprecated in favor of:
CSS margin, which can be specified on all four sides independently: margin-left, margin-right, margin-top, margin-bottom.
margin-left:auto; margin-right:auto; centers the item.
CSS float, text-align, vertical-align, position, etc.<br>

114

114 Incorporating Sound and Movies Linking 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.<br>

115

115 Incorporating Sound and Movies Flash was already embedded in all browsers for the last decade or so, until recently.
Now, Apple and Adobe are feuding, so all bets are off.
The death knell for Flash?
Especially since Flash animations can now be converted to HTML5/JavaScript animations, even from the Flash editor.<br>

116

116 Incorporating Sound and Movies Background sound (IE only)
<bgsound src = "filename"
loop = "n" or "-1" >
within the <head>.
loop = "n" means n repetitions of the sound.
loop = "-1" means continuous play.
Bad idea to default to background sound – annoys people surfing from work.<br>

117

117 Anchors, or hyperlinks, link to other web pages, documents, or email accounts.

<a href = " address">Penny’s Page</a> Linking<br>

118

118 Linking Example (text link):
<a href = "http://www.yahoo.com" target="_blank">
Go to Yahoo
</a>
displays
Go to Yahoo

Note the difference between the actual link address and the text that is displayed.<br>

119

119 Linking target = attribute for the <a> 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.
"nameYouHaveChosen" Opens in a new window that you can reuse by referencing the name again.
Careful – some browsers don't pull the tab to the front.
Use initial "_" only with reserve words above, not with your own names.<br>

120

120 Linking:Image Links To make an image an anchor for a link, merely surround it with the beginning and ending anchor tags...
<a href = "mypage.html">
<img src = "graphics/myDog.gif"
border = "2"
height = "100"
width = "150"
alt = "picture of my dog" >
</a> If the border is turned on, its color will be the same as the color specified for links. Be sure there isn’t an extra space here.<br>

121

121 Linking:Automatic Email Links If the link is an email address, and you want the user’s default email program to come up with an email automatically addressed to the href address when the link is clicked:
<a href = "mailto:pmcintire@niu.edu?subject= subject line&body=any body text you want" >Send me an email</a>
This works only if the user has a default email client set up on his or her computer; i.e., won’t work on a public access computer like our labs.<br>

122

122 Linking:Thumbnails to Larger Images Provide 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:
<a href = "largeImagePage.html">
<img src = "smallImage.jpg" height="10" width="10" alt="my img" title="my img">
</a>
This defines the thumbnail image as the clickable link to largeImagePage.html that contains the larger image.<br>

123

123 Linking:Thumbnails to Larger Images Don’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.<br>

124

124 Linking:Internal Anchors Sometimes 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.<br>

125

125 Linking:Internal Anchors Use an anchor tag with no href and no content at the destination for the jump:
<a name = "gohere" id="gohere"></a>
This serves as the bookmark.
Specify both name (older standard) and id (newer standard), to be backward and forward compatible.
Newer browsers support any element (<p>, <h1>, etc.) with an id to be used as a bookmark, without needing an <a> tag at the destination.
Careful, though – older browsers are still common.
Also, compromises maintainability; find and replace of the destination tag won't work anymore because all different.<br>

126

126 Linking:Internal Anchors To jump to that spot...
<a href = "path/mypage.html#gohere">
Jump to XYZ
</a>
displays
Jump to XYZ
and links to the anchor you specified.
You can omit the URL/path if the bookmark is within the current page:
<a href = "#gohere">Jump to XYZ</a><br>

127

127 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.<br>

128

128 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)<br>

129

129 Linking:Image Maps A single image, with multiple hotspots 1 2 3 4<br>

130

<img name="fruits" src="image_map4.gif" width="238" height="264" border="0" usemap="#fruit_image_map“>
<map name="fruit_image_map">
<area shape="circle" href="apple_info.html"
title="Nutritional Data for Apples" alt="Nutritional Data for Apples"
coords="136,98, 23" >
<area shape="rect" href="grape_info.html"
title="Nutritional Data For Grapes"
alt="Nutritional Data For Grapes"
coords="2,69,56,185" >.
<area shape="poly" href="lime_info.html
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" >
<area shape="poly" href="grape_info.html" target="_blank"
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">
</map> This tag puts the actual image on the page. This group of tags sets up the template for the hotspots.<br>

131

131 Image Maps Sorta like a DSECT in assembler.
<map name = "name of the map">
Sets up the entire image map.
Put all map definitions within the <body> tag.
name and id are the only attributes (use both for forward and backward compatibility
<area... >
Sets up an individual hotspot within the map.
So, one <area> tag per hotspot.<br>

132

132 Image Maps <area > 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.<br>

133

133 Image Maps No formatting – spaces, line breaks, tabs – within coords attribute value (so formatting your code is impossible for this 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 and writes the HTML.<br>

134

134 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…<br>

135

<img name="fruits" src="image_map4.gif" width="238" height="264" border="0" usemap="#fruit_image_map" >
<map name="fruit_image_map">
<area shape="circle" href="apple_info.html"
title="Nutritional Data for Apples" alt="Nutritional Data for Apples"
coords="136,98, 23" >
<area shape="rect" href="grape_info.html"
title="Nutritional Data For Grapes"
alt="Nutritional Data For Grapes"
coords="2,69,56,185" >
<area shape="poly" href="lime_info.html
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" >
<area shape="poly" href="grape_info.html" target="_blank"
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" >
</map> x1,y1,x2,y2 coordinates<br>

136

136 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 ;...<br>

137

137 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.<br>

138

138 Special Characters Older versions of HTML will work without the semicolon, but HTML5 requires the semicolon.
Example:
<p>Copyright symbol = ©</p>

displays

Copyright symbol = ©
For other symbols: http://www.w3schools.com/tags/ref_symbols.asp<br>

139

139 Special Characters Can also use the ASCI character set, but this is discouraged by HTML5...
<p>Dollar sign = &#36</p><br>

140

140 Bulleted Lists Also called unordered lists.
<ul>...</ul> starts and stops the list.
<li>...</li> starts and stops a single item in a list.
Format:
<ul> starts the list
<li>...</li> 1st bulleted item
<li>...</li> 2nd bulleted item
... etc.
</ul> ends the list<br>

141

141 Bulleted Lists Displays:

Item 1
Item 2
Item 3 HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul><br>

142

142 Bulleted Lists Can also nest bulleted lists...<br>

143

143 Bulleted Lists Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<ul>
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
</ul>
<li>Sub-item 3</li>
</ul>
</ul> Displays:
Item 1
Item 2
Sub-item 1
Sub-item 2
Sub-sub-item 1
Sub-sub-item 2
Sub-item 3 Indentation is for our benefit; there is no meaning attached to it. Bullets change to reflect the level changes: solid disc, open circle, solid square.<br>

144

144 Bulleted Lists Can specify bullet types:
On <ul>, type="disc"/"circle"/"square"
There is no nesting limit.
Don’t forget to close your lists, or your web page will be, uhm, interesting.
CSS: list-style-type:disc or circle or square; list-style-position:inside or outside; list-style-image:url("myImage.gif");<br>

145

145 Numbered Lists Also called ordered lists.
<ol type = "... " >
<li>...</li> <li> used the same as for
<li>...</li> unordered lists.
…
</ol>
Works identically to a bulleted list except numbers/letters the list instead of using bullets.
Default numbers are decimal number: 1, 2, 3, etc.<br>

146

146 Numbered Lists Attributes for both <ol> and <li> include:
type = “1” decimal numbers, the default
type = “A” uppercase alphabet
type = “a” lowercase alphabet
type = “I” uppercase Roman numerals
type = “i” lowercase Roman numerals
Example...<br>

147

Example:
<ol type = “I”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ol type = “A”>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<ol type = “1” >
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
<li>Sub-sub-item 3</li>
</ol>
<li>Sub-item 3</li>
</ol>
</ol> Displays:
I. Item 1
II. Item 2
III. Item 3
A. Sub-item 1
B. Sub-item 2
1. Sub-sub-item 1
2. Sub-sub-item 2
3. Sub-sub-item 3
C. Sub-item 3<br>

148

148 Tables Tables are used for formatting table data just as in Word or Excel…<br>

149

<table> defines the entire table
2 pixel border.
“0” would be no border.
bgcolor (deprecated) sets table background to gray.
width is 40% of the container
Could also be an exact pixel number. <table border = “2” bgcolor = “#999999” width = “40%”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shelley</td>
<td>28</td>
<td>Chicago</td>
</tr>
<tr>
<td>Abby</td>
<td>27</td>
<td>San Francisco</td>
</tr>
</tbody>
</table><br>

150