Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.