View
131
Download
7
Category
Preview:
DESCRIPTION
Introducción al HTML para periodistas y/o administradores de contenido.
Citation preview
<H1>html</H1><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
Qué es HTMLLenguaje de Marcado más extendido
www.maximiliano.cl
Clases •Presentación•Procedimientos•Descriptivo
•Codificar un documento•Industria Editorial•Dictado a viva voz
1986
1991
SGMLLenguaje de Marcado Generalizado Standard
www.maximiliano.cl
Qué es HTML
HTMLLenguaje de Marcas de Hipertextos
Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
Complementar el texto con Objetos
Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
< >
Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
Rodeada por Corchetes Angulares
Declaración / DOCTYPE
Modularización (XHTML)
www.maximiliano.cl
de elementos
Declaración / DOCTYPE
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.cl
de elementos
Declaración / DOCTYPE
Elemento Raiz / <html>
Modularización (XHTML)
www.maximiliano.cl
Modularización. Módulo de:Estructura / body, head, html, titleTexto / abbr, acronym, address, etc.Hipertexto / aLista / 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
<a href=”” title=””>texto de enlace</a>
<Etiqueta inicial>
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
<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>
<Etiqueta inicial>
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
No 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
Etiqueta 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>
</html>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<html>
</html>
<body>
</body>
<head>
</head>
www.maximiliano.cl
Estructura de documento
<html>
</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 elementos
Mó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
elementos
Mó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?Usuarios
Comunicamos/Informamos
www.maximiliano.cl
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
www.maximiliano.cl
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
➡ h1
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Contenido del artículo➡ h1
➡ p
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Contenido del artículo➡ h1
➡ pLista de elementos ➡ ol, ul, li, li, li, li, li.
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Contenido del artículo➡ h1
➡ pLista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Contenido del artículo➡ h1
➡ pLista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Contenido del artículo➡ h1
➡ pLista 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
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>
www.maximiliano.cl
<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>
www.maximiliano.cl
<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>
www.maximiliano.cl
<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>...
...</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>...
...</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>...
...</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>
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
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
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
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 Te
xt -->
Core Attributes
class
id
Note: Core Attributes m
ay not be used
in base, head, html, meta, param,
script, st
yle or title elements.
style
title
Language Attributes
dir
Note: Language Attrib
utes may not be
used in base, br, frame, fra
meset, 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 fie
lds
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
WYSIWYGWhat You See Is What You GetLo que ves es lo que obtienes
www.maximiliano.cl
WYSIWYGWhat You See Is What You GetLo que ves es lo que obtienes
www.maximiliano.cl
WYSIWYGWhat You See Is What You GetLo 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/
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
www.maximiliano.cl
EjercicioEscribir las etiquetas identificadas
www.maximiliano.cl
Ejercicio¿Cuántos elementos HTML puedes
nombrar en 5 minutos?
www.maximiliano.cl
GraciasMaximiliano Martin
www.maximiliano.cl
Recommended