Chapter Two
Introduction HTML
HTML
Hypertext Markup Language
is the standard markup language used to create web
pages.
HTML describes the structure of a website semantically
along with cues for presentation
its a markup language, rather than a programming
language
HTML documents consist of a tree of elements and text.
Each element is denoted in the source by a start tag,
such as "<body>", and an end tag, such as "</body>".
Web browsers can read HTML files and render them
into visible or audible web pages.
Anatomy of HTML document
The <!DOCTYPE html> declaration defines
this document to be HTML
The <html> element is the root element of an
HTML page
The lang attribute defines the language of the
document
The <meta> element contains meta
information about the document
The charset attribute defines the character set
used in the document
The <title> element specifies a title for the
document
The <body> element contains the visible page
content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Anatomy ...
Stylesheet (CSS)
<head>
...
<link href=“[Link]” rel=“stylesheet”>
<head>
Javascript
<head>
...
<script src=“[Link]”></script>
<head>
HTML Anatomy ...
Elements
Elements define the structure and content of objects within a page.
Enclosed inside angel brackets < and > : E.g. <a> , <p>, <div>, <span>, <strong>, <h1>…
meta information is placed in the head element
content information is placed in the body element
Tags
The use of less-than and greater-than angle brackets surrounding an element
creates what is known as a tag.
Tags most commonly occur in pairs of opening and closing tags.
Content of the elements always falls between the opening (e.g. <p>)and closing (e.g. </p>)
tag: E.g. <p> …content here…</p>
Tags have to be nested such that elements are all completely within each other,
without overlapping:
Tag, Attribute and Value
Tag
Void element: <input> <hr> <br>
Non void element:
<a>Link</a>
Attribute and Value
Attributes
Attributes are properties used to provide additional information about an
element.
The most common attributes include id, class, src, herf
Attributes are defined within the opening tag, after an element’s name.
Tag, Attribute and Value
Generally attributes include a name and a value.
The format for these attributes consists of the attribute name
followed by an equals sign and then a quoted attribute value.
E.g.
<a href="[Link]"> simple </a>
<input name=“email” value=“who@[Link]”>
Atrribute: name, value
Value: email, who@[Link]
Classifying HTML elements
top-level elements: html, head and body
head elements: placed inside the head
Title, style, link, meta, base, script
Wouldn’t display on the page
block-level elements: flow elements that behave like
paragraphs
occupy 100% of available width
stacked vertically with preceding and subsequent
block elements
article, h1-h6, header, footer, section, p, figure, canvas,
pre, div, ul, ol, dl, table, form, video
Classifying HTML elements
inline elements
phrasing elements that behave like words
flow horizontally
usually placed inside block elements
a (anchor), audio, br, code, img, em, nav, samp
span, strong, sub, sup, time, var
Syntax of HTML
All tags begin with < and end with >
tag name is given immediately following opening <
unrecognized tags and attributes are ignored
attributes are given following the tag name:
<tag attribute1=‚value‛ attribute2=‚value‛ ...>
‘ can be used instead of ‚
forgetting to close a quote can result in a blank page
It’s good practice to keep HTML markup lowercase.
values are case sensitive (used to).
Syntax of HTML
elements without closing tags are of the form <img />
ending / is optional for HTML5, needed for polyglot documents
elements must be well-formed: no bad nesting
<p>Stuff <strong></p></strong>
attributes can be in any order.
white space is allowed
between tag name and attributes
around the = sign
within attribute value (but should be avoided)
Standard HTML Tags
Heading Form
<h1>, <h2>, .... <h6> <form>
Table Form Component
<table>, <tr>, <th>, <input>, <select>,
<td>, <tbody>, <thead> <textarea>
Paragraph Link/Anchor
<p> <a>
List Layer Box
<ol>, <ul>, <li> <div>
Image Formatting
<img> <strong>, <em>, <sub>
Horizontal Line Line Break
<hr> <br>
HTML 5
HTML5 is a cooperation between the
World Wide Web Consortium (W3C) and
Web Hypertext Application Technology Working Group
(WHATWG).
WHATWG was working with web forms and applications,
W3C was working with XHTML 2.0.
In 2006, they decided to cooperate and create a new version of
HTML.
HTML 5: Ground Rules
Some rules for HTML5 were established:
New features should be based on HTML, CSS,
DOM, and JavaScript
Reduce the need for external plugins
Better error handling
More markup to replace scripting
HTML5 should be device independent
Dev process should be visible to the public
HTML 5: New Features
Reduce for external plugin
Semantic elements: header, footer, section, article,
others.
canvas for drawing
paths of rectangles, arcs, lines, images
mouse events
Better support for Local offline Storage (variation of
cookies)
audio & video elements
including drawing video on canvas
form controls, like calendar, date, time, email, url,
search, color, datetime, datetime-local, month,
number, range, tel, week
New API’s
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE (Server-Sent Events)
Cont…
All HTML5 elements can have the following:
id – uniquely identifies an element in the page
style – gives presentation style
class – style class, or space-separated list of style classes
title – title for the element. Can be used as tool-top display
hidden – prevents element from being displayed when set to
true
contenteditable, draggable, dropzone, spellcheck, and more
Cont…
HTML5 defines eight new semantic
elements.
All these are block-level elements.
To secure correct behavior in older
browsers, you can set the CSS display
property for these HTML elements to
block:
header, section, footer, aside, nav, main,
article, figure {
display: block;
}
HTML 5 migration
Chapter 3
Introduction to CSS
CSS
Cascading Style Sheets (CSS): is a simple mechanism for adding
style (e.g. fonts, colors, layouts) to Web documents.
Styles provide powerful control over the presentation of web pages.
A style sheet consists of a set of rules.
Each rule consists of one or more selectors and a declaration block.
A declaration block consists of a list of declarations in curly braces
({}).
Each declaration consists of a property, a colon (:), a value, then a
semi-colon (;)
How CSS works
Style Sheet Syntax Explained
selector
property
value
rule
Creating CSS
Create a style sheet file and apply CSS to multiple
webpages, a single page, or an individual HTML
element.
Three methods:
External Style Sheets (preferred choice)
Embedded Style Sheets
Inline Styles (least desirable)
Example: inline
Example: Embedded CSS
Example: External
Basic CSS Selectors
There are three types of selectors in CSS,
Element : can be selected using it’s name
e.g. ‘p’, ‘div’ and ‘h1’ etc.
Class : can be selected using ‘.className’ operator
e.g. ‘.h3_blue’.
ID : can be selected using ‘#idName’
e.g. ‘#my_para’.
Example: Selector
More Selectors
Precedence
Precedence
Local > Internal > External
Selector Priority level :
ID (highest priority)
Class
Element
The Basis of CSS Layout
The 3 core concepts to understand about CSS layout
are:
The CSS box model
Floating
Positioning
Together, these 3 concepts control the way elements
are arranged and displayed on a page.
The CSS Box Model
Margin
Border
Padding
Content
34
Margins & Padding
Margins
Margins define the space around elements outside the
border
Margin properties can have negative values in order to
deliberately overlap content
Margin properties will affect the position of background
elements (graphics and/or colours) in relation to the edges
of the containing block element
Margin properties can be defined independently on top,
right, bottom and left, or all-at-once using CSS shorthand
35
Margins & Padding
Padding
Padding defines the space around elements inside the
border; i.e between the border and the content itself
Padding properties cannot have negative values
Padding properties do not affect the position of
background elements (graphics and/or colours) in the
containing block element; only the position of content.
Padding properties can be defined independently on top,
right, bottom and left, or all-at-once using CSS shorthand
36
CSS Shorthand: Margin & Padding
For margin and padding (and others), CSS provides a
number of shorthand properties that can save on writing
lines and lines of code. Instead of writing this:
#container { 0
margin-top: 0; 12
margin-right: 5px;
margin-bottom: 6px;
margin-left: 5px; Content Area
5 5
padding-top: 12px; 12 10
padding-right: 10px;
padding-bottom: 30px; 30
padding-left: 12px; 6
}
37
CSS Shorthand: Margin & Padding
…Its much easier to write this:
#container {
padding: 20px 10px 30px 12px;
margin: 0px 5px 6px 5px; 0
} 20
The sequence order is always
clockwise, starting from the top
Content Area
5 5
12 10
30
38
CSS Shorthand: Margin and Padding
You can also apply just one value, example:
#container {
padding: 20px;
5
margin: 5px; 20
}
Which will apply the value
specified equally on all 4 sides Content Area
5 5
20 20
20
5
39
CSS Shorthand: Margin and Padding
And you can apply two values, example:
#container {
padding: 10px 20px;
0
margin: 0px 5px; 10
}
The first value is applied to
the top and bottom Content Area
5 5
20 20
The second value is applied to
the left and right
10
0
40
Borders
The core border properties are:
Width: absolute (px, in, cm, or ‘thin’, ‘medium’, ‘thick’), or
relative (ems)
Style: dotted, dashed, solid, double, groove, ridge, inset,
outset, hidden, etc
Color: ‘blue’, ‘red’, #FF9900, etc
Border: 5px solid blue;
41
CSS Floats: ‚Normal Flow‛
CSS boxes for block
elements are stacked,
one above the other, so
that they’re read from
top to bottom.
In CSS, this is said to be
the ‚normal flow‛.
(Note that CSS boxes for inline
elements are placed next to each
other, within boxes for block
elements, and will normally wrap
according to the width of the
containing block.) But…
42
Floats: Positioning CSS Boxes
…we can position text text text text textinline
text text text text text
block element boxes text text text text text text text text text text
text text text text text text text text text text
side-by-side in CSS text textinline
text text text text text text text text
text text text text text text text text text text
using floats. text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
Setting the float text text text text text text text text text text
block text text text text text text textinline
text text text
property to left or text text text text text text text text text text
text text text text text text text text text text
right causes a box to text text text text text text text text text text
text text text text text text text text text text
be taken out of its text text text text text text text text text text
text text text text text text text text text text
position in the text text text text text text text text text text
normal flow and
moved as far left or
right as possible.
43
Float Values
The Float property text text text text textinline
text text text text text
has three value text text text text text text text text text text
text text text text text text text text text text
options: text textinline
text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
float: left; text text text text text text text text text text
text text text text text text text text text text
float: right; block
text text text text text text text text text text
text text text text text text textinline
text text text
text text text text text text text text text text
float: none; text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
44
Restoring the Normal Flow: ‚Clear‛
To restore the ‚normal
text text text text textinline
text text text text text
flow‛, we can use the text text text text text text text text text text
clear property. text text text text text text text text text text
text textinline
text text text text text text text text
text text text text text text text text text text
The clear property has text text text text text text text text text text
three value options: text text text text text text text text text text
text text text text text text text text text text
clear: left; block
text text text text text text text text text text
text text text text text text textinline
text text text
clear: right; text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text
clear: both; text text text text text text text text text text
text text text text text text text text text text
These specify which text text text text text text text text text text
side of the element’s box text text text text text text text text text text
may not have a float
next to it.
block
45
CSS Positioning
The third core concept to understand in CSS layout (after
the ‘box model’ and ‘floats’), is positioning.
There are two types of positioning that can be applied to
CSS boxes:
• Relative Positioning
• Absolute Positioning
Understanding the differences between the two is
difficult at first, but important!
46
CSS Positioning: Relative Positioning
A relatively positioned element will stay exactly where it
is, in relation to the normal flow.
You can then offset its position ‚relative‛ to its starting
point in the normal flow:
Box 1 Box 2 Box 3
Containing box
47
CSS Positioning: Relative Positioning
In this example, box 2 is offset 20px, top and left. The
result is the box is offset 20px from its original position in
the normal flow. Box 2 may overlap other boxes in the
flow, but other boxes still recognise its original position in
the flow.
top: 20px
#myBox { Left: 20px
position: relative;
Box 1 Position: relative Box 3
left: 20px;
top: 20px; Box 2
}
Containing box
48
CSS Positioning: Absolute Positioning
An absolutely positioned box is taken out of the normal
flow, and positioned in relation to its nearest positioned
ancestor (i.e. its containing box).
If there is no ancestor box, it will be positioned in relation
to the initial containing block, usually the browser
window.
top: 20px
Left: 20px
Box 1 Box 3
Position: absolute
Box 2
Containing box (relatively positioned ancestor)
49
CSS Positioning: Absolute Positioning
An absolutely positioned box can be offset from its initial
position inside the containing block, but other boxes
within the block (and still within the normal flow) act as
if the box wasn’t there.
top: 20px
#myBox {
Left: 20px
position: absolute;
Box 1 Box 3
left: 20px; Position: absolute
top: 20px;
Box 2
}
Containing box (relatively positioned ancestor)
50
CSS Positioning: Fixed Positioning
Fixed Positioning is a sub-category of Absolute
Positioning
Allows the creation of floating elements that are always
fixed in the same position in the browser window, while
the rest of the content scrolls as normal
(rather like the effect of fixed background attachments)
PROBLEM: fixed positioning is not supported in IE5 and
IE6(!), but can be made to work with javascript for those
browsers
51