CODIGO HTML

<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


Complementtar el texto con Objetos

Para qué sirve



Se escribe en forma de “Ettiquettas”

<>

Para qué sirve



Se escribe en forma de “Ettiquettas”

Rodeada por Corchettes An g u l ares

Modularización (XHTML)de elementos

Declaración / DOCTYPE


Declaración /

DOCTYPE Elemento

Raiz / <httml>


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


<Etiqueta inicial>


Elementto

</Etiqueta final >


<Etiqueta inicial>


Elementto

</Etiqueta final >

Contenido


<Etiqueta inicial>


Elementto

Atributo=”valor”

</Etiqueta final >

Contenido

<Etiqueta inicial>


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

http://www.w3.org/TR/

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>

http://www.w3.org/TR/

<html>

</html>

Estructura de documento

</html>

<html>

<head>

</head>


</body>

</html>

<html>

<head>

</head>

<body>


<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




Visible “Invisible”

¿Para quién?Humanos

Titular principal

MáquinasUsuarios



➡ h1




Titular principal

Contenido del artículo➡➡

h1

p




Titular principal

Contenido del

artículo Lista de

elementos

➡➡➡

h1

p

ol, ul, li, li, li, li, li.




Titular principal

Contenido del

artículo Lista de

elementos Datos en

excel

➡➡➡➡

h1

p

ol, ul, li, li, li, li,

li. table, td, tr,




Titular principal

Contenido del

artículo Lista de

elementos Datos en

excel

➡➡➡➡➡

h1

p


li. table, td, tr,

Valores de atributos

www.maximiliano.cl

http://www.maximiliano.cl/






Titular principal

Contenido del

artículo Lista de

elementos Datos en

excel

➡➡➡➡➡

h1

p


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

Elementos en bloque Elementos en l inea

...</body>



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



<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

http://www.wikipedia.com/ancla/

http://www.wikipedia.com/ancla/



<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

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

+ 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



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

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

CODIGO HTML

Education

Transcript of CODIGO HTML