Post on 16-Apr-2017
<H1>html</H1><h2>Qué es el html y para qué
sirve</h2>
Por Erika Montesdeoca
Qué es HTMLLenguaje de Marcado más extendido
Qué es HTMLLenguaje de Marcado más extendido
•Codificar un documento• Industr ia Editorial•Dictado a viva voz
Clases•Presentación•Procedimientos•Descripttivo
19861991
SGM
LLenguaje de MarcadoGeneralizado Standard
Qué es HTML
HTM
LLenguaje de Marcas de Hipertextos
Para qué sirve
Para qué sirve
Describir esttructtura y conttenido
Para qué sirve
Describir esttructtura y conttenido
Complementtar el texto con Objetos
Para qué sirve
Describir esttructtura y conttenido
Complementtar el texto con Objetos
Se escribe en forma de “Ettiquettas”
<>
Para qué sirve
Describir esttructtura y conttenido
Complementtar el texto con Objetos
Se escribe en forma de “Ettiquettas”
Rodeada por Corchettes An g u l ares
Modularización (XHTML)de elementos
Declaración / DOCTYPE
Modularización (XHTML)de elementos
Declaración /
DOCTYPE Elemento
Raiz / <httml>
Modularización (XHTML)de elementos
Declaración / DOCTYPE
Elemento Raiz / <httml>
Modular izac ión. Módulo de:Esttructtura / body, head, html, tit le Textto / abbr, acronym, address, etc. Hiperttextto / aListta / dl, dt, dd, ol, ul, li.Objettos / object, param. Presenttación / b, big, hr, i, etc. ettc. /
<a href=”” title=””>texto de enlace</a>
Estructura de Elementos
Elementto
<a href=”” title=””>texto de enlace</a>
<Etiqueta inicial>
Estructura de Elementos
Elementto
</Etiqueta final >
<a href=”” title=””>texto de enlace</a>
<Etiqueta inicial>
Estructura de Elementos
Elementto
</Etiqueta final >
Contenido
<a href=”” title=””>texto de enlace</a>
<Etiqueta inicial>
Estructura de Elementos
Elementto
Atributo=”valor”
</Etiqueta final >
Contenido
<Etiqueta inicial>
Estructura de Elementos
Elementto
Atributo=”valor”
</Etiqueta final >
Contenido
<a href=”” ttiittllee==””””>>texto de eennllaaccee</a>
Declaración / DOCTYPENo es una etiqueta sino una
insttrucción
•Definición del Tipo de Documentto (DTD)• E l DTD especifica las reglas para ellenguaje 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>Etiqueta que contiene todo el HTML
• In forma al navegador que lo contenido por él debe ser interpretado como HTML• In ic io 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>
Estructura de documento
</html>
<html>
<head>
</head>
Estructura de documento
</body>
</html>
<html>
<head>
</head>
<body>
Estructura de documento
</body>
</html>
<html>
<head>
</head>
<body>
Estructura de documento
<body>
</body>
</html>
</head>
Estructura de documento <html>
<head>
<title> y otros elementos
Módulos de:• Estructura
• h tm l , head, title, body
•Metainformación•Estilos• L i n k•Base
</body>
</html>
</head>
Estructura de documento <html>
<head>
<title> y otros elementos
<body>
elementos
Módulos de:• Estructura
• h tm l , head, title, body•Metainformación•Estilos• L i n k•Base
Módulos de:• Texto
• p , code, div, em, strong, span, q,pre, samp, h1, h2, h3, etc
• Hipertexto• Lis ta•Objetos•Presentación•Edición•Formularios•Tablas• Imágen•Otros
¿Para quién?Usuarios
Comunicamos/Informamos
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
¿Para quién?Humanos
Titular principal
MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
➡ h1
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Titular principal
Contenido del artículo➡➡
h1
p
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Titular principal
Contenido del
artículo Lista de
elementos
➡➡➡
h1
p
ol, ul, li, li, li, li, li.
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Titular principal
Contenido del
artículo Lista de
elementos Datos en
excel
➡➡➡➡
h1
p
ol, ul, li, li, li, li,
li. table, td, tr,
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Titular principal
Contenido del
artículo Lista de
elementos Datos en
excel
➡➡➡➡➡
h1
p
ol, ul, li, li, li, li,
li. table, td, tr,
Valores de atributos
www.maximiliano.cl
¿Para quién?Humanos MáquinasUsuarios
Comunicamos/Informamos
Visible “Invisible”
Titular principal
Contenido del
artículo Lista de
elementos Datos en
excel
➡➡➡➡➡
h1
p
ol, ul, li, li, li, li,
li. table, td, tr,
Valores de atributos
<head> o cabeceraContiene información sobre el documento
que: no se muestra directamente al usuario
<head> o cabecera
<html><head>
<title>Guía de Referencia Rápida XHTML</title>
</head><body>
...elementos del body...</body>
</html>
Contiene información sobre el documento que: no se muestra directamente al usuario
<ttittle>
<head> o cabeceraContiene información sobre el documento
que: referencia a metaetiquetas
<head> o cabecera
<meta name="Description" conttentt="Qué es HTML y para qué sirve" /><meta name="Keywords"<meta name="Author"<meta name="Copyright"
conttentt="HTML,XHTML,tutorial HTML" /> conttentt="Maximiliano Martin" /> conttentt="...
Contiene información sobre el documento que: referencia a metaetiquetas
<metta>
<head> o cabeceraContiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<head> o cabecera
<link ttype="text/css" rel="stylesheet" href="css/base.css" /><link ttype="text/css" media="print" rel="stylesheet" href="css/print.css" /><link ttype="text/css" media="aural" rel="stylesheet" href="css/aural.css" />
Contiene información sobre el documento que: relaciona mediante vínculos a otras URL o archivos
<l ink>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
p, div, ol, ul, li,h1, h2, h3, etc.
a, img, em, strong, span, etc.
...</body>
<body> o cuerpoDefine el contenido del documento. Lo que
se muestra a través del navegador
<body>...
Elementos en bloque Elementos en l inea
p, div, ol, ul, li,h1, h2, h3, etc.
a, img, em, strong, span, etc.
Valores de AtributosPropiedad de algunos elementos a los que se
les asigna Valores específicos (Humanos/Robots)
<a> v í ncu lo o anc la </a>
Valores de AtributosPropiedad de algunos elementos a los que se
les asigna Valores específicos (Humanos/Robots)
<a> v í ncu lo o anc la </a>
<a href=”http://www.wikipedia.com/ancla/” ttittle=”Definición de Wikipedia” rel=”External”>
vínculo o ancla </a>
• hre f• t i t l e• class• i d
•hreflang•accesskey• r e l• tabindex
Valores de AtributosPropiedad de algunos elementos a los que se
les asigna Valores específicos (Humanos/Robots)
<img s r c = ” U R I ” />• sc r• a l t• class• i d
<img src=”http://www.w3c.es/img/eslogo-20030729.png” altt="Oficina española del W3C" heightt="52" widtth="279" />
• height• longdesc• wid th
+ ElementosPropiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots)
•Esttructtura: body, head, html, tit le•Textto: abbr, acronym, address, blockquote, br,cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var•Presenttación : b, big, hr, i, small, sub, sup, t t• Fo r m u l a r i o s : button, fieldset, form, input, label, legend, select, optgroup, option, textarea• Ta b l a s : caption, col, colgroup, table, tbody, td, tfoot, th, thead, t r• M a p a de I m a ge n del lado Clientte: area, map• M a p a de I m a ge n del lado Ser v idor : Attribute ismap on img
•Hiperttextto: a• Listta : dl, dt, dd, ol, ul, l i•Objettos: object, param• E d i c i ó n : del, ins•Textto Bidirecc ional : bdo• M ó d u l o de Imagen: img• Mettainformación: meta•Scriptting : noscript, script• H o j a de Esttilo: style element• L i n k : l ink• B a s e : base
+ ElementosPropiedad de algunos elementos a los que se les asigna Valores específicos (Humanos/Robots)
•Esttructtura: body, head, html, tit le•Textto: abbr, acronym, address, blockquote, br,cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var•Presenttación : b, big, hr, i, small, sub, sup, t t• Fo r m u l a r i o s : button, fieldset, form, input, label, legend, select, optgroup, option, textarea• Ta b l a s : caption, col, colgroup, table, tbody, td, tfoot, th, thead, t r• M a p a de I m a ge n del lado Clientte: area, map• M a p a de I m a ge n del lado Ser v idor : Attribute ismap on img
•Hiperttextto: a• Listta : dl, dt, dd, ol, ul, l i•Objettos: object, param• E d i c i ó n : del, ins•Textto Bidirecc ional : bdo• M ó d u l o de Imagen: img• Mettainformación: meta•Scriptting : noscript, script• H o j a de Esttilo: style element• L i n k : l ink• B a s e : base
Comments
<!-- Comment Text -->
Core Attributes
class
idNote: Core Attributes may not be used
in base, head, html, meta, param,
script, style or title elements.
style
title
Language Attributes
dirNote: 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
EuroSmall bullet
Trademark
Pound
Non-breaking space
Copyright symbol
Available free from AddedBytes.com
Links
<a href="">Page link
<a href="mailto:"> Email link
<a name="name"> Anchor
<a href="#name"> 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
TitleRelevant 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>
FormCollection 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
WYSIWYG
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
WYSIWYGWhat You See Is What You Get Lo que ves es lo que obtienes
ValidaciónVerifica la correcta implementación del código
según el DTD declarado
http://validator.w3.org/
Validación
Accesibilidad
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/
Proporciona alternativas para que lleguemos a más usuarios con nuestro mensaje/información
•Metaetiquetas l ink• Texto de vínculos• Atr ibutos alt, longdesc, rel, Acceskey, tabindex• Estructura de cabeceras h1, h2, h3•Cambios de idioma
EjercicioEscribir las etiquetas identificadas
Ejercicio¿Cuántos elementos HTML
puedes nombrar en 5 minutos?
Gracias