Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML 5

HTML 5 presentation using small examples
by

André Restivo

on 28 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML 5

HTML 5
André Restivo @
FEUP
(2013)

History
1991
HTML
Tim Berners-Lee
1993
HTML+
1995
HTML 2.0
1997
HTML 3.2
Browser Wars
1999
HTML 4.01
Style Sheets (CSS)
2000
XHTML 1.0
XML
2012
HTML 5
Organized in a
tree
like structure. Elements can contain other
elements
and/or
text

Defined using
tags
Can also have
attributes

Browsers display each tag using a predefined style that can be changed using
CSS
.

HTML Elements
Tags
<
body
>
<
p

id
="first">Some <
strong
>text</
strong
></
p
>
<
p
>Some other text</
p
>
<
img

src
="image.png">
</
body
>
body
img
p
p
text
text
strong
text
Basic Document
<
html
>
<
head
>
<
title
>Title</
title
>
</
head
>
<
body
>
</
body
>
</
html
>
Heading Tags
<
h1
>Heading</
h1
>
(only one per document)
<
h2
>Heading</
h2
>
<
h3
>Heading</
h3
>
<
h4
>Heading</
h4
>
<
h5
>Heading</
h5
>
<
h6
>Heading</
h6
>
Paragraphs and Line Breaks
<
p
>This is a paragraph.</
p
>
<
p
>
This is another paragraph<
br
>
(empty tag)
with a line break.
</
p
>
Lists
Ordered Lists
<
ol
>
<
li
>An item</
li
>
<
li
>Another item</
li
>
<
li
>And another one</
li
>
</
ol
>

1. An item
2. Another item
3. And another one

Unordered Lists
<
ul
>
<
li
>An item</
li
>
<
li
>Another item</
li
>
<
li
>And another one</
li
>
</
ul
>

An item
Another item
And another one

Lists inside Lists
<
ul
>
<
li
>A list:
<
ol
>
<
li
>Something</
li
>
<
li
>Something else</
li
>
</
ol
>
</
li
>
<
li
>Another item</
li
>
<
li
>And another one</
li
>
</
ul
>

A list:
1. Something
2. Something else
Another item
And another one

A term
And it's definition
This one
Has a different definition
Alternative definition
Definition Lists
<
dl
>
<
dt
>A term</
dt
>
<
dd
>And it's definition</
dd
>
<
dt
>This one</
dt
>
<
dd
>Has a different definition</
dd
>
<
dd
>Alternative definition</
dd
>
</
dl
>
This is a paragraph

This is another paragraph
with a line break
Basic Tags
The Anchor (link)
<
a

href
="anotherpage.html>Another Page</
a
>

<
a

href
="somewhere/deeper.html">Deeper</
a
>

<
a

href
="../start.html">Back</
a
>

<
a

href
="http://www.google.com">Search</
a
>
All Together Now
<
p
>This is a menu:</
p
>
<
ul
>
<
li
><
a

href
="http://www.google.com">Search</
a
></
li
>
<
li
><
a

href
="help.html">Help</
a
></
li
>
</
ul
>
<
img

src
="dog.png"
alt
="A photo of a dog">
Images
<
img

src
="dog.png"
alt
="A dog"
width
="300"
height
="200">
Tables
Tables, Rows and Data
<
table
>
<
tr
>
<
td
>A</
td
><
td
>B</
td
><
td
>C</
td
>
</
tr
>
<
tr
>
<
td
>D</
td
><
td
>E</
td
><
td
>F</
td
>
</
tr
>
</
table
>
Headers
<
table
>
<
tr
>
<
th
>A</
th
><
th
>B</
th
><
th
>C</
th
>
</
tr
>
<
tr
>
<
td
>D</
td
><
td
>E</
td
><
td
>F</
td
>
</
tr
>
</
table
>
Cell Merging
<
table
>
<
tr
>
<
td
>A</
td
><
td

colspan
="2">B</
td
>
</
tr
>
<
tr
>
<
td

rowspan
="2">C</
td
><
td
>D</
td
><
td
>E</
td
>
</
tr
>
<
tr
>
<
td

colspan
="2"
rowspan
="2">F</
td
>
</
tr
>
<
tr
>
<
td
>D</
td
>
</
tr
>
</
table
>
Sections
<
table
>
<
thead
>
<
tr
>
<
th
>A</
th
><
th
>B</
th
><
th
>C</
th
>
</
tr
>
</
thead
>
<
tfoot
>
<
tr
>
<
td
>100</
td
><
td
>200</
td
><
td
>300</
td
>
</
tr
>
</
tfoot
>
<
tbody
>
<
tr
>
<
td
>a</
td
><
td
>b</
td
><
td
>c</
td
>
</
tr
>
<
tr
>
<
td
>d</
td
><
td
>e</
td
><
td
>f</
td
>
</
tr
>
</
tbody
>
</
table
>
Forms
Media
Formatting
Generic Blocks
URLs can be
relative
or
absolute
Input Types
Action and Method
<
form

action
="save.php"
method
="get">

</
form
>
Common Attributes
<
input

type
="..."
input type
name
="..."
name of the field to be passed to the action
readonly
="readonly"
input value cannot be modified
required
="required"
field must be filled out
disabled
="disabled"
input is disabled

>
Form Contents
<
input
>
Several types of user editable fields

<
textarea
></
textarea
>
A big editable text field

<
select
>...</
select
>
A dropdown list
Text Inputs
<
input

type
="?"
value
="?">
text
password
tel
e-mail
search
url
Tree Structure
Resources
References:
http://www.w3.org/TR/html-markup/
http://www.w3schools.com/tags/

Books:
http://diveintohtml5.info/

Tutorials:
http://www.htmldog.com/guides/html/
HTML
What's Next?
Design
CSS
Generated
PHP
,
Python
,
Ruby
, ...
Data
Databases
Behavior
Javascript
,
JQuery
, ...

action
the web page that receives and processes the form results

method
either
get
(values are passed in the
URL
) or
post
(values are passed inside the
HTTP header
)

Special Interface Inputs
<
input

type
="?"
value
="?">
time
color
datetime
week
date
range
number
max
min
step
File
<
form

action
="upload_file.php"
method
="post"
enctype
="multipart/form-data">
<
input

type
="file"
name
="file">
...
</
form
>
Hidden
<
input

type
="hidden" name="?">

The same as a text field but it doesn't show on the browser. We'll find what is its purpose later...
Submit
<
input

type
="submit"
value
="...">
Radio and Checkbox
<
input

type
="checkbox"
name
="
vehicle
"
value
="Bike">I have a bike<
br
>
<input

type
="checkbox"
name
="
vehicle
"
value
="Car"
checked
="checked" >I have a car

<
input

type
="radio"
name
="
gender
"
value
="male">Male<
br
>
<
input

type
="radio"
name
="
gender
"
value
="female">Female
To use file uploading in a form,
method
must be
post
and
enctype
must be
multipart/form-data
Value
contains the text to be used for the submit button. A multilingual default will be used if left blank.
Document Type and Metadata
HTML elements form a tree like structure.
Some HTML elements can have children. Those have start and end
tags
.
HTML elements that don't allow children only have an opening
tag
.
Label
<
label

for
="id_name">Name:</
label
>
<
input

type
="text"
name
="name"
id
="id_name">
Select
Textarea
<
textarea

rows
="4"
cols
="50">
This is an input field that allows the user to input several lines of text. This is the default value for that input.
</
textarea
>
Field Sets
<
form
>
<
fieldset
>
<
legend
>Personal data:</
legend
>
Name: <
input

type
="text"><
br
>
Email: <
input

type
="text"><
br
>
Date of birth: <
input

type
="text">
</
fieldset
>
</
form
>
Dropdown Selections
<
select
name
="fruit">

<
option
value
="orange"
>
Orange</
option
>

<
option
value
="banana">Banana</
option
>

<
option
value
="tomato">Tomato</
option
>

<
option
value
="apple">Apple</
option
>
</
select
>
value passed to the action page
what's presented to the user
Select Attributes
<
select

name
="..."
name of the field to be passed to the action
multiple
="multiple"
allow multiple selections
required
="required"
field must be filled out
disabled
="disabled"
input is disabled

>
Option Groups
<
select
name
="food"
>
<
optgroup

label
="Fruits">
<
option

value
="orange">Orange</
option
>
<
option

value
="banana">Banana</
option
>
</
optgroup
>
<
optgroup

label
="Vegetables">
<
option

value
="lettuce">Lettuce</
option
>
<
option

value
="carrot">Carrot</
option
>
</
optgroup
>
</
select
>
Textareas also allow the common attributes
name
,
disabled
,
readonly
and
required
.
Be careful with extra whitespace
Who is it for
Humans
(normally with CSS)
Computers
(crawlers, ...)

Don't forget people with disabilities (screen readers)
Common Attributes
id
Specifies a
unique
id for an element.
class
Specifies
one or more
class names for an element. Can be shared between elements.
hidden
Specifies that an element is not yet, or is no longer, relevant.
accesskey
Specifies a shortcut key to activate/focus an element.

<
label
>Name:
<
input

type
="text"
name
="name">
</
label
>
Allows the association between a label and its corresponding input. Clicking the label activates the input. Important for disabled people.
Allows grouping inputs in larger forms. Legend is the name of the group.
Tag Types
There are two major types of
HTML
elements according to the way they display on the browser:

Inline
elements occupy only the space they need and don't force line changes. Example:
strong
.
Block
elements, by default, use all the horizontal space they can get and force a line change before and after themselves. Example:
p
.
End tag
Start tag
Text Formatting
<
em
> Defines emphasized text
<
small
> Defines smaller text
<
strong
> Defines important text
<
sub
> Defines subscripted text
<
sup
> Defines superscripted text
<
ins
> Defines inserted text
<
del
> Defines deleted text
<
mark
> Defines marked/highlighted text
Computer Output Formatting
<
code
> Defines computer code text
<
kbd
> Defines keyboard text
<
samp
> Defines sample computer code
<
var
> Defines a variable
<
pre
> Defines preformatted text
Special Blocks Formatting
<
abbr
> Defines an abbreviation or acronym
<
address
> Defines contact information for someone
<
bdo
> Defines the text direction
<
blockquote
> Defines a section that is quoted from another source
<
q
> Defines an inline (short) quotation
<
cite
> Defines the title of a work
<
dfn
> Defines a definition term
Span
Span
is a generic
inline
tag that can be used, for example, to mark specific parts of text:
<
p
>This book has been written by <
span

class
="author">Arthur C. Clark</
span
>.</
p
>
Div
Divs
are generic
block
tags that can be used to define sections of a website:
<div

id
="menu">
<
ul
>
<
li
><
a
>Home</
a
></
li
>
<
li
><
a
>Contacs</
a
></
li
>
<
li
><
a
>Register</
a
></
li
>
</
ul
>
</
div
>
Document Type
The Document Type declaration is not an HTML tag
It must be the first thing on your document
It tells the browser which HTML version you are using
For HTML 5 just use:
<!
DOCTYPE

html
>
Metadata
You can define metadata for your document inside the
head
tag.
<
meta

name
="?"
content
="?">
application-name
Name of the web application the page represents.

author
Author of the document.

description
Description of the page. Used by Search Engines.

generator
Software package used to generate the page.

keywords
Comma-separated list of keywords - relevant to the page.
<
meta

charset
="?">
UTF-8
Character encoding for Unicode
ISO-8859-1
Character encoding for the Latin alphabet
Meta Content
Meta Character Set
Semantic Structure
Semantic tags tell the browser something about what's inside them.

Tags like
div
and
span
tell nothing!
HTML 5 Semantics
HTML 5
brings a whole new set of semantic tags to replace commonly used
div
blocks
New Tags
<
header
>
<
nav
>
<
section
>
<
article
>
<
aside
>
<
figcaption
>
<
figure
>
<
footer
>
Canvas
A
canvas
is an empty rectangle that can be used to draw on the fly using
javascript.
<
canvas

width
="?"
height
="?"></
canvas
>
SVG
S
calable
V
ector
G
raphics
SVG
images can be created and edited with any text editor
SVG
images can be searched, indexed, scripted, and compressed
SVG
images are
scalable
SVG
images can be
printed
with high quality at any resolution
SVG
images are
zoomable
without degradation
SVG Example
<
svg

xmlns
="http://www.w3.org/2000/svg"
version
="1.1"
height
="190">
<
polygon

points
="100,10 40,180 190,60 10,60 160,180"

style
="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</
svg
>
Other Media Tags
HTML 5
also includes specific tags for:

audio
defines sound, such as music or other audio streams
video
specifies video, such as a movie clip or other video streams
source

specify multiple media resources for media elements
track

text tracks for video and audio elements
What it is
H
yper
T
ext
M
arkup
L
anguage
Written using HTML
elements
Not
for design or presentation
Structure
and
semantics
Full transcript