HTML ¿qué es y para que sirve?
maxymiliano
25,810 views
66 slides
Nov 10, 2009
Slide 1 of 66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
About This Presentation
Introducción al HTML para periodistas y/o administradores de contenido.
Slide Content
<H1>html</H1>
<h2>Qué es el html y para qué sirve</h2>
www.maximiliano.cl
por Maximiliano Martin - www.maximiliano.cl
<h2>Qué es el html y para qué sirve</h2>
www.maximiliano.cl
por Maximiliano Martin - www.maximiliano.cl
Qué es HTMLLenguaje de Marcado más extendido
www.maximiliano.cl
www.maximiliano.cl
Qué es HTMLLenguaje de Marcado más extendido
www.maximiliano.clClases
•Presentación
•Procedimientos
•Descriptivo •Codificar un documento
•Industria Editorial
•Dictado a viva voz
www.maximiliano.clClases
•Presentación
•Procedimientos
•Descriptivo •Codificar un documento
•Industria Editorial
•Dictado a viva voz
1986 1991 SGML Lenguaje de Marcado
Generalizado Standard
www.maximiliano.cl
Qué es HTMLHTML
Lenguaje de Marcas de Hipertextos
Generalizado Standard
www.maximiliano.cl
Qué es HTMLHTML
Lenguaje de Marcas de Hipertextos
Para qué sirve
www.maximiliano.cl
www.maximiliano.cl
Para qué sirveDescribir estructura y contenido
www.maximiliano.cl
www.maximiliano.cl
Para qué sirveDescribir estructura y contenido
www.maximiliano.clComplementar el texto con Objetos
www.maximiliano.clComplementar el texto con Objetos
Para qué sirveDescribir estructura y contenido
www.maximiliano.clComplementar el texto con Objetos Se escribe en forma de “Etiquetas”
www.maximiliano.clComplementar el texto con Objetos Se escribe en forma de “Etiquetas”
< > Para qué sirveDescribir estructura y contenido
www.maximiliano.clComplementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares
www.maximiliano.clComplementar el texto con Objetos Se escribe en forma de “Etiquetas” Rodeada por Corchetes Angulares
Declaración / DOCTYPE
Modularización (XHTML)
www.maximiliano.clde elementos
Modularización (XHTML)
www.maximiliano.clde elementos
Declaración / DOCTYPE
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.clde elementos
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.clde elementos
Declaración / DOCTYPE
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.cl
Modularización. Módulo de:
Estructura / body, head, html, title
Texto / abbr, acronym, address, etc.
Hipertexto / a
Lista / dl, dt, dd, ol, ul, li.
Objetos / object, param.
Presentación / b, big, hr, i, etc.
etc. / de elementos
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.cl
Modularización. Módulo de:
Estructura / body, head, html, title
Texto / abbr, acronym, address, etc.
Hipertexto / a
Lista / dl, dt, dd, ol, ul, li.
Objetos / object, param.
Presentación / b, big, hr, i, etc.
etc. / de elementos
<a href=”” title=””>texto de enlace</a> www.maximiliano.cl
Estructura de Elementos
Elemento
Estructura de Elementos
Elemento
<a href=”” title=””>texto de enlace</a> <Etiqueta inicial>
www.maximiliano.cl
Estructura de Elementos
Elemento
</Etiqueta final >
www.maximiliano.cl
Estructura de Elementos
Elemento
</Etiqueta final >
<a href=”” title=””>texto de enlace</a> <Etiqueta inicial>
www.maximiliano.cl
Estructura de Elementos
Elemento
</Etiqueta final >
Contenido
www.maximiliano.cl
Estructura de Elementos
Elemento
</Etiqueta final >
Contenido
<a href=”” title=””>texto de enlace</a> <Etiqueta inicial>
www.maximiliano.cl
Estructura de Elementos
Elemento
Atributo=”valor”
</Etiqueta final >
Contenido
www.maximiliano.cl
Estructura de Elementos
Elemento
Atributo=”valor”
</Etiqueta final >
Contenido
<a href=”” title=””>texto de enlace</a> <Etiqueta inicial>
www.maximiliano.cl
Estructura de Elementos
Elemento
Atributo=”valor”
</Etiqueta final >
Contenido
<a href=”” title=””>texto de enlace</a>
www.maximiliano.cl
Estructura de Elementos
Elemento
Atributo=”valor”
</Etiqueta final >
Contenido
<a href=”” title=””>texto de enlace</a>
Declaración / DOCTYPE
www.maximiliano.cl
www.maximiliano.cl
Declaración / DOCTYPE
www.maximiliano.clNo es una etiqueta sino una
instrucción •Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
www.maximiliano.clNo es una etiqueta sino una
instrucción •Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado •XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
Elemento Raiz / <html>
www.maximiliano.cl
www.maximiliano.cl
Elemento Raiz / <html>
www.maximiliano.clEtiqueta que contiene todo el HTML •Informa al navegador que lo contenido
por él debe ser interpretado como HTML
•Inicio y término del documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
...elementos del head...
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.clEtiqueta que contiene todo el HTML •Informa al navegador que lo contenido
por él debe ser interpretado como HTML
•Inicio y término del documento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
...elementos del head...
</head>
<body>
...elementos del body...
</body>
</html>
<html>
</html>
www.maximiliano.cl
Estructura de documento
</html>
www.maximiliano.cl
Estructura de documento
<html>
</html>
<head>
</head>
www.maximiliano.cl
Estructura de documento
</html>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<html>
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<html>
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<html>
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<title> y otros elementosMódulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<title> y otros elementosMódulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base
<html>
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<title> y otros elementos
elementosMódulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base Módulos de:
•Texto
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios
•Tablas
•Imágen
•Otros
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<title> y otros elementos
elementosMódulos de:
•Estructura
•html, head, title, body
•Metainformación
•Estilos
•Link
•Base Módulos de:
•Texto
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios
•Tablas
•Imágen
•Otros
www.maximiliano.cl
¿Para quién?
UsuariosComunicamos/Informamos
¿Para quién?
UsuariosComunicamos/Informamos
www.maximiliano.cl
¿Para quién?
Humanos MáquinasUsuariosComunicamos/Informamos
¿Para quién?
Humanos MáquinasUsuariosComunicamos/Informamos
www.maximiliano.cl
¿Para quién?
Humanos MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”
¿Para quién?
Humanos MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”➡ h1
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”➡ h1
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li.
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li.
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr,
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr,
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
www.maximiliano.cl
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
¿Para quién?
HumanosTitular principal MáquinasUsuariosComunicamos/Informamos
Visible “Invisible”Contenido del artículo ➡ h1 ➡ p Lista de elementos ➡ ol, ul, li, li, li, li, li. Datos en excel ➡ table, td, tr, ➡ Valores de atributos
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario <html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html> <title>
<head> o cabeceraContiene información sobre el documento que:
no se muestra directamente al usuario <html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html> <title>
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas <meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="... <meta>
<head> o cabeceraContiene información sobre el documento que:
referencia a metaetiquetas <meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="... <meta>
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
www.maximiliano.cl
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos <link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" /> <link>
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos <link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" /> <link>
www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li,
h1, h2, h3, etc. a, img, em,
strong, span,
etc.
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li,
h1, h2, h3, etc. a, img, em,
strong, span,
etc.
<body>...
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li,
h1, h2, h3, etc. a, img, em,
strong, span,
etc.
...</body> www.maximiliano.cl
<body> o cuerpoDefine el contenido del documento. Lo que se
muestra a través del navegador Elementos en bloque Elementos en linea p, div, ol, ul, li,
h1, h2, h3, etc. a, img, em,
strong, span,
etc.
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a>
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a>
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> <a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo
o ancla </a> •href
•title
•class
•id •hreflang
•accesskey
•rel
•tabindex
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <a> vínculo o ancla </a> <a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo
o ancla </a> •href
•title
•class
•id •hreflang
•accesskey
•rel
•tabindex
www.maximiliano.cl
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr
•alt
•class
•id <img src=”http://www.w3c.es/img/eslogo-20030729.png”
alt="Oficina española del W3C" height="52" width="279" /> •height
•longdesc
•width
Valores de AtributosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) <img src=”URI” /> •scr
•alt
•class
•id <img src=”http://www.w3c.es/img/eslogo-20030729.png”
alt="Oficina española del W3C" height="52" width="279" /> •height
•longdesc
•width
www.maximiliano.cl
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base
www.maximiliano.cl
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base Comments
<!-- Comment Text -->
Core Attributes
class
id
Note: Core Attributes may not be used
in base, head, html, meta, param,
script, style or title elements.
style
title
Language Attributes
dir
Note: Language Attributes may not be
used in base, br, frame, frameset, hr,
iframe, param or script elements.
lang
Keyboard Attributes
accesskey tabindex
Form Events
onBlur
onChange
onFocus
onReset
onSelect
onSubmit
Window Events
onLoad onUnload
Keyboard Events
onKeydown
onKeypress
onKeyup
Mouse Events
onClick
onDblclick
onMousedown
onMousemove
onMouseout
onMouseover
onMouseup
Document Outline
<!DOCTYPE>
<html>
<head>
<body>
Version of (X)HTML
HTML document
Page information
Page contents
Common Character Entities
"
&
<
>
@
€
•
™
£
 
©
"
&
<
>
@
€
•
™
£
©
Quotation mark
Ampersand
Less than
Greater than
"At" symbol
Euro
Small bullet
Trademark
Pound
Non-breaking space
Copyright symbol
Available free from AddedBytes.com
Links
<a href="">
<a href="mailto:">
<a name="name">
<a href="#name">
Page link
Email link
Anchor
Link to anchor
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Page Information
<base />
<meta />
<title>
<link />
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script resource
Tables
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col />
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
Forms
<form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
Objects
<object>
<param />
Object
Parameter
Document Structure
<h[1-6]>
<div>
<span>
<p>
<br />
<hr />
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
Lists
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
Text Markup
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Emphasis
Long quotation
Short quotation
Abbreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
Images and Image Maps
<img />
<map>
<area />
Image
Image Map
Area of Image Map
+ ElementosPropiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots) •Estructura: body, head, html, title
•Texto: abbr, acronym, address, blockquote, br,
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
p, pre, q, samp, span, strong, var
•Presentación: b, big, hr, i, small, sub, sup, tt
•Formularios: button, fieldset, form, input, label,
legend, select, optgroup, option, textarea
•Tablas: caption, col, colgroup, table, tbody, td,
tfoot, th, thead, tr
•Mapa de Imagen del lado Cliente: area, map
•Mapa de Imagen del lado Servidor: Attribute
ismap on img •Hipertexto: a
•Lista: dl, dt, dd, ol, ul, li
•Objetos: object, param
•Edición: del, ins
•Texto Bidireccional: bdo
•Módulo de Imagen: img
•Metainformación: meta
•Scripting: noscript, script
•Hoja de Estilo: style element
•Link: link
•Base: base Comments
<!-- Comment Text -->
Core Attributes
class
id
Note: Core Attributes may not be used
in base, head, html, meta, param,
script, style or title elements.
style
title
Language Attributes
dir
Note: Language Attributes may not be
used in base, br, frame, frameset, hr,
iframe, param or script elements.
lang
Keyboard Attributes
accesskey tabindex
Form Events
onBlur
onChange
onFocus
onReset
onSelect
onSubmit
Window Events
onLoad onUnload
Keyboard Events
onKeydown
onKeypress
onKeyup
Mouse Events
onClick
onDblclick
onMousedown
onMousemove
onMouseout
onMouseover
onMouseup
Document Outline
<!DOCTYPE>
<html>
<head>
<body>
Version of (X)HTML
HTML document
Page information
Page contents
Common Character Entities
"
&
<
>
@
€
•
™
£
 
©
"
&
<
>
@
€
•
™
£
©
Quotation mark
Ampersand
Less than
Greater than
"At" symbol
Euro
Small bullet
Trademark
Pound
Non-breaking space
Copyright symbol
Available free from AddedBytes.com
Links
<a href="">
<a href="mailto:">
<a name="name">
<a href="#name">
Page link
Email link
Anchor
Link to anchor
Empty Elements
<area />
<base />
<br />
<col />
<hr />
<img />
<input />
<link />
<meta />
<param />
Page Information
<base />
<meta />
<title>
<link />
<style>
<script>
Base URL
Meta data
Title
Relevant resource
Style resource
Script resource
Tables
<table>
<caption>
<thead>
<tbody>
<tfoot>
<colgroup>
<col />
<tr>
<th>
<td>
Table
Caption
Table header
Table body
Table footer
Column group
Column
Table row
Header cell
Table cell
Forms
<form>
<fieldset>
<legend>
<label>
<input />
<select>
<optgroup>
<option>
<textarea>
<button>
Form
Collection of fields
Form legend
Input label
Form input
Drop-down box
Group of options
Drop-down options
Large text input
Button
Objects
<object>
<param />
Object
Parameter
Document Structure
<h[1-6]>
<div>
<span>
<p>
<br />
<hr />
Heading
Page section
Inline section
Paragraph
Line break
Horizontal rule
Lists
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
Ordered list
Unordered list
List item
Definition list
Definition term
Term description
Text Markup
<strong>
<em>
<blockquote>
<q>
<abbr>
<acronym>
<address>
<pre>
<dfn>
<code>
<cite>
<del>
<ins>
<sub>
<sup>
<bdo>
Strong emphasis
Emphasis
Long quotation
Short quotation
Abbreviation
Acronym
Address
Pre-formatted text
Definition
Code
Citation
Deleted text
Inserted text
Subscript
Superscript
Text direction
Images and Image Maps
<img />
<map>
<area />
Image
Image Map
Area of Image Map
www.maximiliano.cl
WYSIWYG
WYSIWYG
www.maximiliano.cl
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
www.maximiliano.cl
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
www.maximiliano.cl
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
WYSIWYGWhat You See Is What You Get
Lo que ves es lo que obtienes
www.maximiliano.cl
ValidaciónVerifica la correcta implementación del código según
el DTD declarado http://validator.w3.org/
ValidaciónVerifica la correcta implementación del código según
el DTD declarado http://validator.w3.org/
www.maximiliano.cl
Validación
Validación
www.maximiliano.cl
Validación
Validación
www.maximiliano.cl
Accesibilidad
Accesibilidad
www.maximiliano.cl
AccesibilidadProporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/ •Metaetiquetas link
•Texto de vínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios de idioma
AccesibilidadProporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/ •Metaetiquetas link
•Texto de vínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios de idioma
www.maximiliano.cl
EjercicioEscribir las etiquetas identificadas
EjercicioEscribir las etiquetas identificadas
www.maximiliano.cl
Ejercicio¿Cuántos elementos HTML puedes
nombrar en 5 minutos?
Ejercicio¿Cuántos elementos HTML puedes
nombrar en 5 minutos?
www.maximiliano.cl
Gracias
Maximiliano Martin
www.maximiliano.cl
Gracias
Maximiliano Martin
www.maximiliano.cl
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 25,810
- Slides 66
- Favorites 11
- Age 5866 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
33 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
31 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
27 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views