HTML: LEARNING THE (TABLED) LAYOUT

PA 70b – Giordon Stark

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

WHY DO WE NEED HTML?WHAT IS ITS PURPOSE?

WHAT IS HTML?

Introduction to HTML

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

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)

What is HTML

Stands for HyperText Markup LanguageNot 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

Why HTML is Important

HTML is a text-imaged based languageDefines the “standards” for rendering objects

in browsersAll 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

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)

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

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

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

essibility-web-standards-and-seo

What makes a good layout?

Does the website have a good or bad layout? http://www.teacherxpress.com/ http://www.americanbeautybordercollies.com/ http://lesailes.hermes.com/us/en/ http://www.lingscars.com/ http://www.dokimos.org/ajff/ http://www.ugcs.caltech.edu/~kratsg/ http://www.google.com/ http://www.farinellabakery.com/ http://nobelprize.org/

The following websites are useful to visit for design ideas http://www.badwebsiteideas.com/ http://www.w3.org/ http://www.webpagesthatsuck.com/

WHAT IS AN ELEMENT?HOW IS HTML STRUCTURED?

HOW IS AN HTML DOCUMENT CREATED?

Theory of HTML

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++, etceteraW3C –World Wide Web Consortium

http://www.w3.org/NestingParent/Child Element

Terminology

Pseudo-Elements<tag1 attribute1=“value1” attribute2=“value2”>

<tag2 attribute1=“value3”>Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Integer sed sem tortor.</tag2>

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

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 themInline (“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)

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)

Types of Tags

Paired These are elements that come with an opening tag and

closing tag:<tag …></tag>

Unpaired These are elements that only have an opening tag

<tag2 …> Conform to XHTML by adding a slash to signify that the

opening tag is also the closing tag (note the space)<tag2 … /> This is called an “empty” element

LET’S GO OVER SOME OF THE MORE COMMONLY USED TAGS, THEIR

ATTRIBUTES, AND THEIR FUNCTIONS.

HTML Table of Elements

“Other” TagsOther Tags and Inline (“Formatting”) Tags*

Anchor: <a></a>Link: <link></link>

Linking external stylesheetsBody: <body></body>Head: <head></head>HTML: <html></html>Image: <img></img>

Map: <map></map> Area: <area />

Style: <style></style>Script: <script></script>

Doc. Title: <title></title>DTD: <!DOCTYPE html>Span: <span></span>Strikethrough:

<del></del>Pre-formatting:

<pre></pre>Superscript: Subscripts: Examples of the Above: link

HTML Tags

*Note: these are OK for this class, but HTML is not meant to format a page, simply to organize it. Link

Block (“Layout “) Tags* Table Tags

Division: <div></div>Line Break: <br />Horizontal Line: <hr />Heading: <h#></h#>

#={1,2,3,4,5,6} 1 largest, 6 smallest

Paragraph: <p></p>Section:

<section></section>Article: <article></article>Aside: <aside></aside>

<table></table>Table Row: <tr></tr>Data Cell: <td></td>

<th></th> (for header row)Groups

Header: <thead></thead> Body: <tbody></tbody> Footer: <tfoot></tfoot>

Table Caption: <caption></caption>

HTML Tags

*We will not go over frames or inline frames in this class.

List Tags Form Tags

Ordered List Start: <ol></ol> List Item: <li></li>

Unordered List Start: <ul></ul> List Item: <li></li>

Definition List Start: <dl></dl> Term: <dt></dt>

Description: <dd></dd>

<form></form> Input Control: <input />

<button></button> Text Area:

<textarea></textarea> Select List:

<select></select> Option: <option></option> Group: <optgroup></optgroup>

Label: <label></label> Fieldset:

<fieldset></fieldset> Legend: <legend></legend>

HTML Tags

HTML Tags

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

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 functionAs 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 classThis class, we’ll go over the inline tags and the table

tagsIn the portions on CSS, we’ll go over the block and list

tagsIn the portions on PHP and JavaScript, we’ll go over

the form tags

FOLLOWING A COOKBOOK TO GIVE US DELICIOUS EYE -CANDY (WEB PAGES)

The HTML “Recipe”

The HTML “Recipe”

All HTML pages contain the same basic structure from which you build upon DTD (Doc Type Declaration) <!DOCTYPE html> HTML Document <html>

Head <head> Title <title>your title here</title> Scripts and Stylesheets here <style>, <script>, <link>

End Head </head> Body <body>

Body Content Here End Body </body> End HTML </html>

If you don’t specify any of these parts, most browsers assume any code inputted belongs in the “body” of your document

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

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 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: <!DOCTYPE html> - include it on everything you do from now on

The HTML “Recipe”

Examples of other doc types: HTML 4.01 Strict/Traditional/Frameset XHTML 1.0 Strict/Tradition/Frameset MathML 2.0

The XHTML “Recipe”

What about XHTML? 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

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 blankTermination – “First in, last out”

<tag><tag2><tag3>… …</tag2></tag></tag3><tag><tag2><tag3>… …</tag3></tag2></tag>

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)

The HTML “Recipe”

<head>It contains (among other things):

<title></title>: The title of the page <style></style>: Internal CSS <link></link>: External CSS <script></script>: Internal/External JavaScript <meta></meta>

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

</head>

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 codeProper 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 <body></body> man, ask any body*

This is the focus of today’s exercise

*Pun completely intended

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

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.

Links!

http://www.w3schools.com/html5/default.aspAttributes

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.

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

<!DOCTYPE html><html>

<head></head><body></body>

</html>

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.

MAKING YOUR FIRST HTML DOCUMENT USING TABLE AND FORMATTING

ELEMENTS

Practice Session