1. HTML: LEARNING THE (TABLED) LAYOUT PA 70b – Giordon Stark

2. Table* of Contents Introduction to HTML  History of HTML  Why HTML is Important  What is HTML  What makes a good layout? (eye-candy) Theory of HTML  Terminology  Types of Elements  Layout, Formatting, Form  Paired and Unpaired Tags The HTML (table of*) Elements!  Functions, Attributes, Tags, Elements (FATE**) The HTML ”Recipe”  A little bit about XHTML will be covered briefly Practice Session: Making your first web page using tables *Pun completely intended, **Completely Fake Acronym

3. WHY DO WE NEED HTML? WHAT IS ITS PURPOSE? WHAT IS HTML? Introduction to HTML

4. History of HTML Tim Berners-Lee: 1989-1991  Proposed an “internet-based hypertext system”  Developed a markup known as “HTML Tags”  Mosaic (browser) Relatively simply structure based on SGMLguid, widely used at CERN at the time  Later implemented Document Type Definition to distinguish between XML, SGML, and HTML using a set of predefined delcarations

5. History of HTML Over time, it was “re-invented” in various drafts “Formally defined” by certain companies/committees at the time  Internet Engineering Task Force (1991-1995)  HTML + Drafts  HTML Working Group (1995)  HTML 2.0  World Wide Web Consortium (W3C; 1996-present)  Last “new” draft is HTML 4.01 Recommendation, published in 1999  Modern draft is HTML 5.0 which will eliminate the need of a formal doctype (good news! We’ll see why later)

6. What is HTML Stands for HyperText Markup Language Not a programming language, a markup language  A set of markup tags  Markup Tags are often called HTML Tags HTML tells the browser how to display the page

7. Why HTML is Important HTML is a text-imaged based language Defines the “standards” for rendering objects in browsers All browsers interpret HTML to produce identical outputs  Some browsers add additional effects to certain HTML elements to spruce them up (form elements; Chrome) but the size definitions remain virtually the same

8. Why HTML is Important All web programming languages (ASP, ColdFusion, PHP, Flash, CSS, JavaScript, etcetera) rely on HTML in some way  JavaScript defined the Document Object Model (varies from browser to browser) which provides a logical syntax for HTML; we’ll use this language in our discussion  CSS is literally made for HTML  Outputs for PHP, ColdFusion, etc… are rendered in HTML  Flash relies on HTML for embedding purposes (just like images)

9. Why HTML is Important Any modern freelancer considers HTML as the backbone behind web programming More importantly, as a language, it has proper grammar, vocabulary, and syntax  Writing valid code makes it easier for search engines and screen readers  Improves accessibility and makes it easier to unify pages

10. What makes a good layout? The user spends ~5 seconds reading a page to determine if the content is useful (on average) Elements on a page  Placement  Top, Bottom, Left, Right, Middle  Decoration  Big font, Bold, Underline, Italicize, Color, Highlight  Noise/Clutter  Moving Text, Flash, GIFs, Marquees

11. What makes a good layout? What other benefits are associated with good layouts?  Speed (at which a page loads)  Interactivity with user  Accessibility  Usability  Simplicity  Intelligent Design Valid Code, Semantically Correct Code, and using CSS will give you a good start  http://www.joomlashack.com/tutorials/159-usability- accessibility-web-standards-and-seo http://www.joomlashack.com/tutorials/159-usability- accessibility-web-standards-and-seo

12. What makes a good layout? Does the website have a good or bad layout?  http://www.teacherxpress.com/ http://www.teacherxpress.com/  http://www.americanbeautybordercollies.com/ http://www.americanbeautybordercollies.com/  http://lesailes.hermes.com/us/en/ http://lesailes.hermes.com/us/en/  http://www.lingscars.com/ http://www.lingscars.com/  http://www.dokimos.org/ajff/ http://www.dokimos.org/ajff/  http://www.ugcs.caltech.edu/~kratsg/ http://www.ugcs.caltech.edu/~kratsg/  http://www.google.com/ http://www.google.com/  http://www.farinellabakery.com/ http://www.farinellabakery.com/  http://nobelprize.org/ http://nobelprize.org/ The following websites are useful to visit for design ideas  http://www.badwebsiteideas.com/ http://www.badwebsiteideas.com/  http://www.w3.org/ http://www.w3.org/  http://www.webpagesthatsuck.com/ http://www.webpagesthatsuck.com/

13. WHAT IS AN ELEMENT? HOW IS HTML STRUCTURED? HOW IS AN HTML DOCUMENT CREATED? Theory of HTML

14. Terminology HTML  HyperText Markup Language HTML Document (or “web page” if you prefer)  File Type.html (or.htm, but I prefer the former)  Why.htm? Element  Tag  Opening/Closing Tag  Attribute/Value pair Text Editor – Notepad, Notepad++, etcetera W3C –World Wide Web Consortium  http://www.w3.org/ http://www.w3.org/ Nesting Parent/Child Element

15. Terminology Pseudo-Elements Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sem tortor. Tag2 is nested inside Tag1. Tag1 is the parent element of Tag2. Tag2 is the child element of Tag1, it inherits formatting properties (it’s like genetics!)

16. Types of Elements* Block (“Layout”) Elements  Only affects the position of an HTML element on the page, mainly used for developing your page layout  All layout elements have unique attributes developed specifically for them Inline (“Formatting”) Elements  Only formats the HTML element inside, does not generally affect position of said element on a page  All formatting elements can use the same set of attributes (but use them efficiently)  These are going to be completely depreciated in the near future, don’t expect to rely on them *These are my definitions (a way to view HTML more logically)

17. Types of Elements* Form Elements  These are made for user-input, we will see a lot of this later when we go into PHP  Does not (in general) affect positioning or layout of elements on a page; almost always found inside the form element Element Identifiers  Layout and Formatting Elements will only have the “id” attribute (correlating to strict XHTML)  Form Elements will have both “id” attribute and “name” attribute (so that we can play with PHP later) *These are my definitions (a way to view HTML more logically)

18. Types of Tags Paired  These are elements that come with an opening tag and closing tag: Unpaired  These are elements that only have an opening tag  Conform to XHTML by adding a slash to signify that the opening tag is also the closing tag (note the space)  This is called an “empty” element

19. LET’S GO OVER SOME OF THE MORE COMMONLY USED TAGS, THEIR ATTRIBUTES, AND THEIR FUNCTIONS. HTML Table of Elements

20. “Other” Tags Other Tags and Inline (“Formatting”) Tags* Anchor: Link:  Linking external stylesheets Body: Head: HTML: Image:  Map:  Area: Style: Script: Doc. Title: DTD: Span: Strikethrough: Pre-formatting: Superscript: Subscripts: Examples of the Above: link link HTML Tags *Note: these are OK for this class, but HTML is not meant to format a page, simply to organize it. LinkLink

21. Block (“Layout “) Tags* Table Tags Division: Line Break: Horizontal Line: Heading:  #={1,2,3,4,5,6}  1 largest, 6 smallest Paragraph: Section: Article: Aside: Table Row: Data Cell:  (for header row) Groups  Header:  Body:  Footer: Table Caption: HTML Tags *We will not go over frames or inline frames in this class.

22. List Tags Form Tags Ordered List  Start:  List Item: Unordered List  Start:  List Item: Definition List  Start:  Term:  Description: Input Control:  Text Area: Select List:  Option:  Group: Label: Fieldset:  Legend: HTML Tags

23. Attributes…  Provide additional information about the element  Are always specified in the opening tag  Come in name/value pairs: name=“value” Core Attributes – most* elements have them  class: specifies classname for element  id: specifies unique id for element  style: specifies inline-style for element  title: specifies extra information about element *Not valid for base, head, html, meta, param, script, style, and title elements

24. HTML Tags As you see, there are a lot of HTML elements  For now, make sure you recognize them and are somewhat familiar with their function As we progress through the course, I’ll refer back to the HTML elements listed here in more detail  I’ll elaborate more on their attributes when we need to use them in class This class, we’ll go over the inline tags and the table tags In the portions on CSS, we’ll go over the block and list tags In the portions on PHP and JavaScript, we’ll go over the form tags

25. FOLLOWING A COOKBOOK TO GIVE US DELICIOUS EYE-CANDY (WEB PAGES) The HTML “Recipe”

26. All HTML pages contain the same basic structure from which you build upon  DTD (Doc Type Declaration)  HTML Document  Head Title your title here Scripts and Stylesheets here,,  End Head  Body Body Content Here  End Body  End HTML If you don’t specify any of these parts, most browsers assume any code inputted belongs in the “body” of your document

27. The HTML “Recipe” The DTD tells the browser to run in “strict” (or “standards”) mode and not “quirks” mode  http://www.w3.org/QA/2002/04/valid-dtd-list.html http://www.w3.org/QA/2002/04/valid-dtd-list.html Declaring doctypes is the current “solution” to what I call the Box Model problem (or “Browsers War Era”)  http://www.quirksmode.org/css/quirksmode.html http://www.quirksmode.org/css/quirksmode.html  By “solution”, I mean it’s more like placing gum over a dam hole that’s leaking water (it only works in your imagination) The latest solution from HTML 5 is simple – a standard document type: - include it on everything you do from now on

28. The HTML “Recipe” Examples of other doc types:  HTML 4.01 Strict/Traditional/Frameset  XHTML 1.0 Strict/Tradition/Frameset  MathML 2.0

29. The XHTML “Recipe” What about XHTML?  http://www.w3.org/TR/xhtml1/#diffs http://www.w3.org/TR/xhtml1/#diffs  More strict, but major fallback is the identifier  As of XHTML 1.0, the “name” attribute is depreciated, but PHP uses this attribute with submitting forms (IE: we need it) Moral: we will use the best of both worlds. I will teach using many of the XHTML standards while making the code simpler and more efficient in the upcoming classes  Examples of such standards include “well-formedness”, lowercase, quoted out, and termination

30. The XHTML “Recipe” Well-Formedness – “Always Be Closing”  All elements must have a closing tag or written like “empty tags” Lowercase  All HTML elements, attributes, and values are written in lowercase Quoted Out  All HTML attribute/value pairs will be quoted properly and never left blank Termination – “First in, last out” … …

31. The HTML “Recipe” The head of the document is ALWAYS loaded before the body of the document is It contains the rules for how the browser should render, display, read, layout and act on the page You should not put any code in between that define the mark-up of your page (belongs in the body of the document)

32. The HTML “Recipe” It contains (among other things):  : The title of the page  : Internal CSS  : External CSS  : Internal/External JavaScript   Metatags for HTTP Request definitions, page “tags” for search engines, etcetera  We won’t necessarily use these, but you can Google “Metatags” or “Metadata” if you want to learn more

33. The HTML “Recipe” The body of the document is ALWAYS loaded after the header of the document is  I like the extra emphasis, we’ll come back to this later when we deal with the numerous places we can stick CSS code Proper grammar dictates that JavaScript and CSS belong only in the header, but can sometimes be found in the body  Placement of CSS and JavaScript provide a clear example of how the page loads line by line  It “should” never happen, otherwise you need to rewrite your logic This contains 80% of your code unless you love the header  I’m a man, ask any body* This is the focus of today’s exercise *Pun completely intended

34. THESE ARE LINKS THAT YOU’LL WANT TO READ OVER AND KEEP IN MIND FOR REFERENCE IN YOUR BRIGHT FUTURE OF WEB DEVELOPMENT Important Links

35. Links! http://www.w3schools.com/html5/default.asp  For next class – read through: Home, Introduction, New Elements, Tags, Attributes, Events, and Valid DTDs. Home, Introduction, and New Elements  Make sure you understand the ideas involved behind HTML5 and why it’s a HUGE deal for companies like Google and Facebook as well as towards accessibility on the web! Tags  There’s a LOT of information. You do not need to memorize. You simply need to familiarize yourself with “what’s out there” and know that you can come back to it time and time again to learn specific tags. Pay attention to why some tags have been depreciated.

36. Links! http://www.w3schools.com/html5/default.asp Attributes  These are global attributes. They are for identification (class, id), accessibility (accesskey, dir, lang, spellcheck, tabindex, title), and general interface Events  We will go more in depth on the specific type of events – but note that anything you do on your browser triggers (or “fires”) events all the time on every single element. It’s amazing how seamless it is given the large amount of event handling/listening going on in the background Valid DTDs  We will use HTML5 normally – but look over this to see how some elements are depreciated or how their support varies between strict XHTML, HTML 4.01, and HTML5. This gives you a rough idea of why it helps to be consistent with your document types and elements used on the page.

37. HTML5 Boilerplate http://html5boilerplate.com/  This allows you to start with a completely basic HTML5 document that you can start coding in. You can use it later on in the last few weeks of class when you’re more comfortable with coding the whole layout by hand consistently and want to focus on actual layouts

38. Class Website http://www.ugcs.caltech.edu/~kratsg/PA070b/ Everything for the class from homework assignments to lecture slides to extra handouts will be found on here. I don’t like printing things. It kills trees. Crying trees crying make horrible sounds.

39. MAKING YOUR FIRST HTML DOCUMENT USING TABLE AND FORMATTING ELEMENTS Practice Session