HTML ¿qué es y para que sirve?

<H1>html</H1><h2>Qué es el html y para qué sirve</h2>

www.maximiliano.cl

por Maximiliano Martin - www.maximiliano.cl

http://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

www.maximiliano.cl



Para qué sirve

Describir estructura y contenido

www.maximiliano.cl



Para qué sirve


www.maximiliano.cl

Complementar el texto con Objetos



Para qué sirve


www.maximiliano.cl


Se escribe en forma de “Etiquetas”



< >

Para qué sirve


www.maximiliano.cl


Se escribe en forma de “Etiquetas”

Rodeada por Corchetes Angulares



Declaración / DOCTYPE

Modularización (XHTML)

www.maximiliano.cl

de elementos




Elemento Raiz / <html>


www.maximiliano.cl

de elementos






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




<Etiqueta inicial>

www.maximiliano.cl


Elemento

</Etiqueta final >




<Etiqueta inicial>

www.maximiliano.cl


Elemento

</Etiqueta final >

Contenido




<Etiqueta inicial>

www.maximiliano.cl


Elemento

Atributo=”valor”

</Etiqueta final >

Contenido




<Etiqueta inicial>

www.maximiliano.cl


Elemento

Atributo=”valor”

</Etiqueta final >

Contenido





www.maximiliano.cl




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">



http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd





www.maximiliano.cl




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




<html>

</html>

<body>

</body>

<head>

</head>

www.maximiliano.cl




<html>

</html>

<body>

</body>

<head>

</head>

www.maximiliano.cl




<html>

</html>

<body>

</body>

<head>

</head>

www.maximiliano.cl


<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


<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




www.maximiliano.cl

¿Para quién?Humanos MáquinasUsuarios


Visible “Invisible”



www.maximiliano.cl

¿Para quién?Humanos

Titular principal

MáquinasUsuarios



➡ h1



www.maximiliano.cl


Titular principal

MáquinasUsuarios



Contenido del artículo➡ h1

➡ p



www.maximiliano.cl


Titular principal

MáquinasUsuarios




➡ pLista de elementos ➡ ol, ul, li, li, li, li, li.



www.maximiliano.cl


Titular principal

MáquinasUsuarios





Datos en excel ➡ table, td, tr,



www.maximiliano.cl


Titular principal

MáquinasUsuarios






➡ Valores de atributos



www.maximiliano.cl


Titular principal

MáquinasUsuarios






➡ Valores de atributos



www.maximiliano.cl

<head> o cabeceraContiene información sobre el documento que:

no se muestra directamente al usuario



www.maximiliano.cl


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


referencia a metaetiquetas



www.maximiliano.cl


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


relaciona mediante vínculos a otras URL o archivos



www.maximiliano.cl


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



Elementos en bloque Elementos en linea



<body>...

...</body>

www.maximiliano.cl






<body>...

...</body>

www.maximiliano.cl






<body>...

...</body>

www.maximiliano.cl






<body>...

...</body>

www.maximiliano.cl




p, div, ol, ul, li, h1, h2, h3, etc.

a, img, em, strong, span, etc.



<body>...

...</body>

www.maximiliano.cl




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


<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


<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



http://www.w3c.es/img/eslogo-20030729.png

http://www.w3c.es/img/eslogo-20030729.png

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



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

WYSIWYG



www.maximiliano.cl

WYSIWYGWhat You See Is What You GetLo que ves es lo que obtienes



www.maximiliano.cl




www.maximiliano.cl




www.maximiliano.cl

ValidaciónVerifica la correcta implementación del código según

el DTD declarado

http://validator.w3.org/



http://validator.w3.org


www.maximiliano.cl

Validación



www.maximiliano.cl

Validación



www.maximiliano.cl

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







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

Technology

HTML ¿qué es y para que sirve?