HTML

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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 CanIUsehttp://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, Modernizrhttp://modernizr.com/

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…

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/

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

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.

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.

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.

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/

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

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

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

41. Documentation Tags • 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.

42. Documentation Tags • 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.

43. HTML Tags

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

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…

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>

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.

48. Indicates the beginning and ending of the HTML. Indicates the beginning and ending of the HTML. <!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>

49. Contains information about the document as a whole. • Generally not rendered on the page itself, merely informational. • Only one <head> per page. Indicates the beginning and ending of the HTML. <!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>

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.