HTML: Learning the (tabled) Layout (pptx) - UGCS - Caltech

viraginitysplashInternet and Web Development

Nov 10, 2013 (3 years and 7 months ago)

59 views

HTML: LEARNI NG 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!


F
unctions,
A
ttributes,
T
ags,
E
lements (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 I S I TS PURPOSE?

WHAT I S 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
H
yper
T
ext

M
arkup
L
anguage


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

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

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
-
accessibility
-
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 I S AN ELEMENT?

HOW I S HTML STRUCTURED?

HOW I S 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++, etcetera


W3C

World Wide Web Consortium


http://www.w3.org/


Nesting


Parent/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 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)

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, THEI R ATTRI BUTES,
AND THEI R FUNCTI ONS.

HTML Table of Elements

“Other” Tags

Other Tags and Inline
(“Formatting”) Tags*


Anchor: <a></a>


Link: <link></link>


Linking external
stylesheets


Body: <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: <sup></sup>


Subscripts: <sub></sub>


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


FOLLOWI NG A COOKBOOK TO GI VE US
DELI CI OUS 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
X
HTML “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
X
HTML “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”


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


This is the focus of today’s exercise


*Pun completely intended

THESE ARE LI NKS THAT YOU’ LL WANT TO
READ OVER AND KEEP I N MI ND FOR
REFERENCE I N YOUR BRI GHT 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.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.

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.

MAKI NG YOUR FI RST HTML DOCUMENT
USI NG TABLE AND FORMATTI NG ELEMENTS

Practice Session