Anda di halaman 1dari 60

HTML5 and CSS3

The Theory
HTML5
!DOCTYPE
!DOCTYPE
!DOCTYPE must be the first thing in a HTML
document (you can not put it at any point below)

This is not a HTML tag; it is an instruction to the


browser informing it which version of HTML the
page is written in

Always try and use so that the browser knows


what type of document it is
HTML, HEAD and
BODY
HTML
HTML Tag tells the browser that this is a HTML
document

HTML is the beginning and end tags in a HTML


page

It signifies that between its tags is HTML


content - It is the container for all HTML
content except the !DOCTYPE
Head
Defines the Head element part of the HTML
Page

Head is the container for all the HTML page


head elements

It can include page elements such as the page


title, scripts, styles, meta information and much
more
Body

The body tag defines the body element of the


HTML document

Within the body tags; all HTML content is


written and includes things such as text,
hyperlinks, images, tables, lists, etc. and all
other elements that make up the page
Header, Footer and
Section
Header

Represents a container for introductory


content and/or navigation menus

Typically it may contain one or more heading


elements, logos, icons, menus, etc.

Before HTML5; designers would use a Div to


section off the header..
Footer
Defines the Footer section of the HTML5 page

Would typically contain items such is


authorship, copyright, contact information but
could also contain sitemap, menu, related
documents.

Before HTML5 designer would generally create


a section using a Div
Section

Used to define sections in the document

Generally used to section off parts such as


chapters, headers, footers and any other
section of a document that maybe needed
DIV
DIV

Used to define a division or a section in a


HTML document

Used to group block-elements to format them


with CSS
Class and ID
Class
Class is used to specify a section in your HTML page;
used in conjunction of items such as Div, ul, etc

e.g. <div class=test>

Used in CSS to associate styling with elements on page

The same class name can be used in multiple places in


the HTML Document; so styling can be used on
multiple items
ID

ID is similar to class

Unlike class you can only use the ID name on


only 1 element in the HTML document

Like class; ID is used to associate styling to a


section using CSS
Span
Span
Used to group inline-elements in a document

Unlike Div; span does not have any automatic formatting


and so has no styling change in itself

When used on a tag link such as <p>; allows you to add


styling

e.g. <p>This is <span style=color:red>Important</


span> text</p>

This would set the color or Important to red


<P> is for Paragraph
Paragraph

The <p> tag defines a paragraph in you


document

Has pre-defined formatting which can be


changed - The browser will always add some
space (margin) before and after each p
element
<H> is for Header
Headers
<h1> .. to .. <h6> are used to define HTML
Headings

H1 is the most important and goes down to H6 as


least important heading

Each have pre-defined formatting; which


includes font size/style

Formatting of h tags can be changed in CSS


<A> is for Anchor
Anchors

The <a> tag defines a hyperlink which is used to


link to another page

The most important attribute of the <a> tag is


the href attribute - which defines the hyperlink

<a> attribute has default styling; such as colour


of hyperlink; which can be changed with CSS
IMG is for Image
Image

The IMG tag is used to define an image in a


HTML document

There are two required attributes, src and alt;


although you can just use the src attribute

Its advisable to use the alt attribute as this also


helps with SEO
UL and LI
UL

UL stands for Unordered List

UL has some pre-defined formatting; such as


items are bulleted - this can be changed in CSS

You use the ul tag along with the li tag to create


an unordered list of items
LI

<li> tag stands for list item

li tag can be used with unordered lists <ul>;


ordered lists <ol> and menu lists <menu>

Each <li> element is 1 item in the list; so one <ul>


will have many <li> items
Input
Input Tag

Used to specify an input field; somewhere


where a user can input data

Generally used with in form element to create


input areas

Input can be of many different types; defined


by its type attribute
CSS3
Element, Class and ID
Element

An elements are HTML Tags such as <p>, <a>,


IMG, etc. and also include the new Header and
Footer

When used in the CSS styles sheet they are just


added without any pre-definer (unlike class
and id)
Class

A class is user defined in the HTML

To create styles for a class you prefix with a


period ( . )

Allows you to style all items that are defined by


the class in the HTML
ID

ID is user defined but can only be used once in


the HTML Document

To style in CSS you have to pre-fix with a hash


(#)

Allows you to style the one group defined by


the ID
Background Colour and
Image
Backgound-color
The background-color property is used to set
the background colour of an element

The background of the element is the total size


of the element which also includes any padding
and border

You can set using a colour name, hash value or


using rgb(r, g, b)
Background-image

The background-image property is used to set


one or more background images in an element

By default, a background-image is placed at


the top-left corner and is repeated horizontally
for the size of the element (including padding
and border)
Padding and Margin
Padding
Is used to set all the padding properties in one
declaration for the element, class or id it is use in

passing in 4 values sets the padding in the following


order

padding: 10px 10px 10px 5px - sets as

Top,right, bottom and left

Just passing in one value will set all four paddings


Margin

Margin sets all the margin properties for the


element, class or id in one declaration

Like padding the order is top, right, bottom and


left

Also like padding, passing in one value will set


all four margins
Float
Float
Used to specify whether or not an element
should float

By setting the value; every element after is


effected by the float value unless the clear
command is used

We can use for various things such as floating


images so that text wraps, etc.
Font-Family and Font-
Weight
Font-Family
Used to specify the font property for an
element

Is used to change the font used on the element


it is used in

It can hold several font names as a fallback so


that if the browser does not support the first; it
will try the next font
Font-Weight

Used to set how think or thin characters in the


font should be displayed

Used, as example, to set bold fonts


Text-Align and Text-
Decoration
Text-Align

Used to specify the horizontal alignment


property of the text

Allows us to set text to be either center, left or


right in the element it is set in
Text-Decoration
Text-decoration property allows the specification
of particular decoration to be added to text

Used to set text to be underlined, line-through,


etc.

Can also be used to set to none; for example -


when wanting to remove the underline from a
hyperlink
List-Style
List-Style

This property will set all the list properties in


one declaration

Properties that can be set are list-style-type,


list-style-position and list-style-image

Can also be set to none to remove any styling


Border and Border-
Radius
Border

Used to set the border properties in one


declaration

Can set the border-width, border-style and


border-color

You can set all 3 or just 1 if desire


Border-Radius

Used to set the radius properties of the border

We use this property to set rounded border


corners by passing in a value in pixels
Box-Shadow
Box-Shadow

Used to attach one or more shadows to an


element

Values passed in refer to horizontal shadow,


vertical shadow, blur of that shadow as well as
the colour we want the shadow to be
Transform
Transform

The transform property applies 2D or 3D


transformation to an element

You can do things such as rotate, scale, skew,


move as well as a few other things to an element

Great way of adding animation to your HTML


document