1 / 262


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

Télécharger la présentation


An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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.

More Related