Scribd
Upload
45 views43 pages

HTML5 and CSS3 - The Future of The Web Programming: Sergio Luján Mora

The document discusses HTML5 and CSS3 and provides an introduction and overview of these technologies. It covers HTML syntax and tags, differences between HTML and XHTML, and various HTML tags and elements. The document is intended to teach about HTML5 and CSS3.

Uploaded by

Oscar Flores
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
45 views43 pages

HTML5 and CSS3 - The Future of The Web Programming: Sergio Luján Mora

The document discusses HTML5 and CSS3 and provides an introduction and overview of these technologies. It covers HTML syntax and tags, differences between HTML and XHTML, and various HTML tags and elements. The document is intended to teach about HTML5 and CSS3.

Uploaded by

Oscar Flores
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 43

HTML5 and CSS3 The Future of the

Web Programming

HTML
Sergio Lujn Mora

HTML5 & CSS3

Content

Introduction
HTML syntax
Differences HTML/XHTML
Tags
More information

HTML5 & CSS3

INTRODUCTION

HTML5 & CSS3

Introduction
Wikipedia:
HyperText Markup Language (HTML) is the
predominant markup language for web
pages. HTML elements are the basic
building-blocks of webpages.

HTML5 & CSS3

Introduction
HTML is written in the form of HTML elements consisting
of tags, enclosed in angle brackets (like <html>),
within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>,
although some tags, known as empty elements, are
unpaired, for example <img>. The first tag in a pair is
the start tag, the second tag is the end tag (they are
also called opening tags and closing tags). In between
these tags web designers can add text, tags,
comments and other types of text-based content.

HTML5 & CSS3

Introduction
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a
markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML5 & CSS3

Introduction
Standard defined by the W3C:

HTML 4.01
HTML 5 (en desarrollo)
XHTML 1.0
XHTML 1.1
XHTML 2 (cancelled)
(December 2011)

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

Introduction
HTML 1 HTML 4.01:
Based on Standard Generalized Markup
Language (SGML)

XHTML 1:
Based on eXtensible Markup Language
(XML)

HTML5 & CSS3

Introduction
Old HTML (until 4.01):
Defines the visual presentation of the web
page:
Font face and font size
Colors
Size of elements
Some special effects

HTML5 & CSS3

Introduction
New HTML (XHTML 1, HTML5):
Visual presentation CSS

HTML5 & CSS3

HTML SYNTAX

HTML5 & CSS3

HTML5 & CSS3

HTML syntax
HTML tags are keywords surrounded by angle
brackets like <html>
HTML tags normally come in pairs like <b>
and </b>
The first tag in a pair is the start tag, the
second tag is the end tag
Start and end tags are also called opening tags
and closing tags

HTML5 & CSS3

HTML syntax
Element

<p class="important">This is a paragraph</p>

Start
tag

Attribute

Value

Content

End
tag

HTML5 & CSS3

HTML syntax
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>The title of the web page</title>
</head>
<body>
<p>A paragraph of text</p>
</body>
</html>

HTML5 & CSS3

HTML syntax
Versions HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

HTML5 & CSS3

HTML syntax
Tag:
Individual: <>
Pair: <> </>

Attributes:
<img src="a.gif">
<input type="radio"
checked="checked">

Upper and lower-case:


<HTML>, <Html>, <html>

10

HTML5 & CSS3

HTML syntax
<!-- Comentario -->
New lines and blank spaces are ignored:
<br />
&nbsp;

HTML5 & CSS3

HTML syntax
How can we know if a web page is
correctly written? Validation
W3C: http://validator.w3.org/

11

HTML5 & CSS3

HTML5 & CSS3

DIFFERENCES HTML/XHTML

12

HTML5 & CSS3

Differences HTML/XHTML
eXtensible HyperText Markup Language
XHTML is based on XML
Syntax is more strict XHTML is a stricter
and cleaner version of HTML

XHTML is almost identical to HTML 4.01

HTML5 & CSS3

13

HTML5 & CSS3

Differences HTML/XHTML
An XHTML document must have only one root
element
Case-sensitive for element and attribute names
Everything in lower-case

<

<

This is wrong:
table WIDTH="100%">
This is correct:
table width="100%">

HTML5 & CSS3

Differences HTML/XHTML
All elements be closed, either by a separate closing
tag or using self closing syntax (e.g. <br />)

<
<

<
<

This is wrong:
p>This is a paragraph
p>This is another paragraph
This is correct:
p>This is a paragraph</p>
p>This is another paragraph</p>

14

HTML5 & CSS3

Differences HTML/XHTML
Attribute values must be quoted (single or double
quotes)
This is wrong:
<table width=100%>
This is correct:
<table width="100%">

HTML5 & CSS3

Differences HTML/XHTML
Attribute minimization is not allowed
This is wrong:
<input checked>
<input readonly>
<input disabled>
<option selected>
This is correct:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />

15

HTML5 & CSS3

Differences HTML/XHTML
Three versions:
XHTML Strict
XHTML Transitional
XHTML Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

HTML5 & CSS3

16

HTML5 & CSS3

<?xml version="1.0" encoding="utf-8"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p> Your HTML content here </p>
</body>
</html>

HTML5 & CSS3

TAGS

17

HTML5 & CSS3

Tags (1)
Tags that define the structure of the
document: <html>, <head>, <body>
Tags that can be used in the <head>
section: <title>, <base>, <meta>,
<style>, <link>

HTML5 & CSS3

Tags (2)
Tags that define text blocks: <address>,
<blockquote>, <div>, <h1><h6>,
<p>, <pre>, <xmp>
Tags that define lists: <dir>, <dl>,
<dt>, <dd>, <menu>, <ol>, <ul>,
<li>

18

HTML5 & CSS3

Tags (3)
Tags that define text format: <b>,
<basefont>,
<big>,
<cite>,
<code>,
<em>,
<font>,
<i>,
<kbd>,
<small>,
<span>,
<strike>,
<strong>,
<sub>,
<sup>, <tt>, <u>, <var>
Tags that define anchors and links: <a>

HTML5 & CSS3

Tags (4)
Tags that define images and image maps:
<img>, <area>, <map>
Tags that define tables: <table>,
<caption>, <thead>, <tbody>,
<tfoot>, <tr>, <th>, <td>

19

HTML5 & CSS3

Tags (5)
Tags that define forms: <form>,
<fieldset>, <input>, <select>,
<option>, <textarea>, <label>,
<legend>, <isindex>
Tags that define
<frameset>,
<iframe>

frames: <frame>,
<noframes>,

HTML5 & CSS3

Tags (6)
Tags that define scripts: <script>,
<noscript>
Tags that define applets and plug-ins:
<applet>, <param>, <object>
(<embed> not standard)
Tags that adjust text: <br>, <center>,
<hr>

20

HTML5 & CSS3

Metadata (1)
Data about data
Section <head>:
<meta http-equiv="property"
content="content" />
<meta name="property"
content="content" />

HTML5 & CSS3


<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.ua.es" />
<meta name="author" content="Programming
in Internet" />
</head>
<body>
<p>In five seconds, this page must
change...</p>
</body>
</html>

21

HTML5 & CSS3

Metadata (2)
<meta name="copyright"
content="Company, author,
designer" />
<meta name="keywords"
content="keywords,
separated, by, comas" />

HTML5 & CSS3

Metadata (3)
<meta name="description"
content="Description of the
content and the purpose of the
website" />
<meta name="author" content="A
person or a company" />
<meta name="robots"
content="index, follow" />

22

HTML5 & CSS3

Metadata (4)
<meta http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1" />
<meta http-equiv="ContentLanguage" content="ES" />
<meta http-equiv="ContentScript-Type"
content="JavaScript" />

HTML5 & CSS3

23

HTML5 & CSS3

Text format (1)


Headings: <h1>, ..., <h6>
Physic styles: <b>, <i>, ...
Logical styles: <cite>, <code>,
<em>, <strong> ...

HTML5 & CSS3

Text format (2)


<font face="" size="">
YOU NEVER MUST USE FONT
You must use CSS instead of

24

HTML5 & CSS3

Text format (3)


CSS:
Inline:
style="font-face: ; font-size: "

Embedded:
<style type="text/css">
selector {font-face: ; font-size: }
</style>

External file:
selector {font-face: ; font-size: }

HTML5 & CSS3

Text format (4)


Serif font types:
Letra Courier New
Letra Georgia
Letra Times New Roman

Sans-serif font types:


Letra Arial
Letra Tahoma
Letra Verdana

25

HTML5 & CSS3

HTML5 & CSS3

26

HTML5 & CSS3

Lists
Definition list
<dl>, <dt>, <dd>

Ordered list
<ol>, <li>

Unordered list
<ul>, <li>

HTML5 & CSS3

27

HTML5 & CSS3

HTML5 & CSS3

Links (1)
Link to a target in the same
document (internal link):
Link: <a href="#name"></a>
Target: <a name="name"></a>

28

HTML5 & CSS3

Links (2)
Link to another document (external
link):
<a href="page.html"></a>

HTML5 & CSS3

Links (3)
Link to a target in another document:
Link:
<a href="page.html#name"></a>
Target: <a name="name"></a>

29

HTML5 & CSS3

Links (4)
Be careful with:
Upper and lower case
Strange characters (use only English
alphabet)
Physical paths
(file:///c:\myweb\groups.html)

HTML5 & CSS3

Tables (1)
Dont use tables for layout, only for data
Tags and structure:
<table></table>
<tr></tr>
<th></th>
<td></td>

30

HTML5 & CSS3

Tables (2)
Other tags:
<thead>, <tbody>, <tfoot>
<caption>

HTML5 & CSS3

31

HTML5 & CSS3

HTML5 & CSS3

32

HTML5 & CSS3

HTML5 & CSS3

33

HTML5 & CSS3

HTML5 & CSS3

34

HTML5 & CSS3

Images (1)
<img>
Mandatory attributes:
src, alt

Optional attributes:
width, height
longdesc
border Deprecated

HTML5 & CSS3

Images (2)
Types of images:
GIF (maximum 256 colors)
JPG, (maximum 16M colors)
PNG

35

HTML5 & CSS3

HTML5 & CSS3

36

HTML5 & CSS3

HTML5 & CSS3

Forms (1)
Send data from Client Server
<form name="name"
action="page.html"
method="methd">
Form controls
</form>
Methods:
POST
GET

37

HTML5 & CSS3

HTML5 & CSS3

Forms (2)
Attributes: name and value

Buttons (to send data, to reset form and


other actions):
<input type="submit">
<input type="reset">
<input type="button">, <button>

<input type="image">

38

HTML5 & CSS3

Forms (3)
Check boxes:
<input type="checkbox">

Radio buttons:
<input type="radio">

Text boxes:
<input type="text">

HTML5 & CSS3

39

HTML5 & CSS3

Forms (4)
Password text boxes:
<input type="password">

Hidden fields:
<input type="hidden">

Sending a file:
<input type="file">

HTML5 & CSS3

Forms (5)
Selection lists:
<select>, <option>, <optgroup>

Text areas:
<textarea>

Label of a control:
<label>

Group of controls:
<fieldset>, <legend>

40

HTML5 & CSS3

HTML5 & CSS3

41

HTML5 & CSS3

HTML5 & CSS3

MORE INFORMATION

42

HTML5 & CSS3

43

You might also like