HTML

Lic. Mario Torrez

Ingeniera de Sistemas
Universidad Pblica de El Alto - Bolivia
Etiquetas HTML
Etiquetas HTML

<div id=contenedor class=contenedor>

<p>Texto<strong>interior</strong> del contenedor</p>
</div>

<p></p> Etiquetas que pueden anidar

<img /> Etiquetas que no pueden anidar

<h3>Titulo</h3> Contenido afectado por etiquetas

Etiquetas HTML
<
input nombre de la etiqueta
type=number Atributos con posibles valores
id=edad Identificador nico
class=cajon clases reutilizables
readonly propiedades
/>

<input type=number id=edad class=cajn readonly />

<p id=tooltip>Informacin bsica</p>

<li class=enlace>Enlace 1</li>

Tecnologas relacionadas con HTML
Tecnologas relacionadas con HTML
Evolucin de HTML
HTML 2 HTML 3

Primer estndar HTML Primer estndar

Sin tablas recomendado desde W3C
Html, head, body no Tablas
obligatorios HTML estructurado
Applets java
Texto + imagen fluido
Evolucin de HTML
HTML 4 XHTML

Ultima especificacin Ampliacin del estndar

HTML de W3C HTML a XML
Strict, transaccional y
frameset
HTML 5
Impulsado desde WHATWG (Apple, Mozilla, Opera)
Reglas claras a los user agents
Orientado a la creacin de aplicaciones
Nuevas etiquetas semnticas

www.w3.org
www.whtwg.org
Diferencias entre HTML, XHTML y HTML
Cada vez que se codifica un documento HTML se requiere la
etiqueta doctype que sirve para indicar la versin de HTML
del documento al navegador para que lo renderice
correctamente.
Para HTML 4.01
Diferencias entre HTML 4.01, XHTML 1.0 y
HTML5
Para XHTML 1.0
Diferencias entre HTML 4.01, XHTML 1.0 y
HTML5
Para HTML5
Estructura bsica de un HTML
Estructura semntica HTML5
ELEMENTOS HTML
Elementos de prrafo
Los elementos mas importantes para el formato de texto son:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<p></p>
Salto de lnea y lnea horizontal
<br>
<hr>
Citar textos
<blockquote>
Elementos de frase
<abbr> <mark>
<b> <samp>
<cite> <small>
<code> <strong>
<dfn> <sub>
<em> <sup>
<i> <var>
<kbd>
Listas
Sin orden Con orden
<ul> <ol>
<li></li> <li></li>
<li></li> <li></li>
</ul> </ol>
Atributos Atributos
disc (default), square, circle 1 numricos (default); A
Maysculas; a
minsculas; I romanos; i
romanos minsculas
Start, reversed
Definicin de listas
Para la descripcin o definicin de listas se usa
<dl>
<dt>Concepto</dt>
<dd>Descripcin del concepto</dd>
...
</dl>
Caracteres especiales
Para desplegar caracteres especiales se tiene
&copy;
&quote;
&amp;
&nbsp;
&rsquo;
&mdash;
&#124;
El elemento Div
El elemento div se utiliza para configurar un rea estructural o
divisin en una pgina Web.
En consecuencia, esta etiqueta se utilizar para crear secciones
lgicas dentro de la pgina Web
Usualmente cada div tiene definido un identificador que se
utiliza para realizar cambios en la forma de presentacin del
bloque.
Tablas
Las etiquetas para tablas son:
<table></table>
<tr></tr>
<th></th>
<td></td>

Adicionalmente se tiene
<thead>
<tbody>
<theader>
Enlaces
Los enlaces se especifica utilizando la etiqueta <a></a>
Es posible realizar enlaces a otras paginas Web, correos,
secciones en la misma pagina u otras a travs del parmetro
href de la etiqueta <a>

href=http://www.upea.edu.bo
href=contacto.html
href=../index.html
href=productos/ficha.html
href=mailto:infoemergentes@gmail.com
FORMULARIOS
Formularios (I)

Hasta se utiliz el HTML como un lenguaje para la

presentacin de contenidos (imgenes, textos,
listas, tablas, etc) pudiendo el usuario interactuar
con ese contenido pero sin participar.
Con los formularios es posible recibir datos del
usuario: nombre, apellidos, nmeros, valores
[true|false], email, archivos...
Formularios (II)

Todo formulario se encuentra contenido dentro de

una etiqueta <form>. Funciona como un
contenedor de los distintos campos que conforman
el formulario.
En s no tiene estilos visibles, siendo una etiqueta
de bloque.
Tiene los siguientes atributos:
Formularios (III)
action = URL indica hacia donde enviaremos los datos
recogidos por el formulario. Podemos tambin enviar a un
email con action=mailto:info@mail.com
(desaconsejado)
method = POST|GET indicamos el modo en el que
enviaremos los datos.

Aunque no existe un modo 100% seguro, se considera POST

ms seguro dado que enva los datos dentro de la cabecera
HTTP; mientras que los datos enviados por GET aparecen
en la URL y son ms fcilmente visibles.
Formularios (IV)
Diferencias entre enviar por GET y POST:

- POST permite enviar ms informacin que GET (el lmite de

la URL).
- POST permite enviar ficheros adjuntos. GET no.
- Los datos por POST se almacenan en la cabecera HTTP. Los
de GET en la URL.
Formularios (V)
Cuando utilizar GET o POST?

- Como norma general se utiliza GET para los formularios de

bsqueda (como en Google, donde vemos los trminos de la
bsqueda en la URL).

- Cuando queramos realizar una modificacin contra una BD

de datos por medio de un formulario utilizaremos POST por ser
ms seguro, admitir un mayor nmero de informacin y
soportar el envo de ficheros.
Formularios (VI)
enctype = "application/x-www-form-urlencoded |
multipart/form-data | text/plain Tipo de
codificacin en la que se enva el formulario.
Generalmente no se indica salvo en el caso que
enviemos ficheros adjuntos.
accept-charset = UTF-8, ISO-8859-1, etc
Establecemos la codificacin de los datos contenidos,
que por defecto coincide con el del documento HTML:
name o id. Es una buena prctica asignar siempre un
identificador o un name a un formulario. Para as
identificarlo y poder realizar validaciones previas en JS.
Formularios (VII)
autocomplete = on Permite autocompletar datos del
formulario en funcin de datos previamente introducidos
por el usuario. Incluso es un atributo que se puede
aplicar a otros input de modo que puede estar activado
en el formulario y desactivado para un campo (o
viceversa).

novalidate Permite desactivar la validacin de formularios

en HTML5.
<form action="demo_form.asp" novalidate>
Formularios (y VIII)
El atributo accept no funciona en HTML5. Un formulario no
debe de determinar si un fichero es o no es lo que dice
ser.
Aunque se realicen validaciones en el lado del cliente
SIEMPRE se deben de validar en el servidor. Los
formularios son la entrada de la mayora de ataques web
a Bases de Datos.
Aunque HTML5 incluye ya validacin nativa en cliente y se
pueden utilizar validaciones con libreras JS, estas se
pueden burlar fcilmente simplemente desactivando JS.
<input>
La etiqueta <input> nos permite incluir los distintos
controles del formulario o campos donde poder introducir
los datos. Es una etiqueta simple por lo que en XHTML
se escribe <input/>

Existen 10 tipos de campos distintos en XHTML y an ms

con HTML5:
text | password | checkbox | radio | submit |
reset | file | hidden | image | button
Tipos de <input>
type=text Es el tipo de campo ms comn. Se muestra
un texto vaco en donde usuario puede escribir texto.

<label>Nombre
<input type="text" id=nombre name="nombre"/>
</label>
Tipos de <input>
type=password Como su propio nombre indica se utiliza
para escribir contraseas o contenido que no queramos
que se vea en pantalla.

<label>Contrasea
<input type="password" id=contrasena
name="contrasena"/>
</label>
Tipos de <input>
type=checkbox Son casillas de verificacin que
permiten al usuario seleccionar una o varias
opciones. Son campos independientes unos del otro.

<label><input type="checkbox" name="ny"> New

York</label>
<label><input type="checkbox" name="bos">
Boston</label>
<label><input type="checkbox" name="sfo"> San
Francisco</label>
<label><input type="checkbox" name="dc"> Wasington
DC</label>
Tipos de <input>
type=radio Los elementos de este tipo son similares a
los checkbox pero con la distincin de que son excluyentes.
Cuando se selecciona una opcin automticamente se
desmarca la otra.

Es importante destacar que dado que son excluyentes usan el

mismo atributo name.
<label><input type="radio" name="sexo" value="hombre"
checked="checked" /> Hombre</label>
<label><input type="radio" name="sexo" value="mujer" />
Mujer</label>
<input>
checked Para los controles checkbox y radiobutton permite
indicar qu opcin aparece preseleccionada.

<label><input type="checkbox" name="ny" checked> New

York</label>
<label><input type="checkbox" name="bos" checked>
Boston</label>
<label><input type="checkbox" name="sfo"> San
Francisco</label>
<label><input type="checkbox" name="dc"> Wasington
DC</label>
Tipos de <input>
type=button En ocasiones nos podemos encontrar con
formularios especialmente complejos que necesitan ms
botones que un reset o un enviar. (Por ejemplo una
calculadora).

<input type="button" name="sumar" value="Sumar" />

<input type="button" name="restar" value="Restar" />
<input type="button" name="dividir" value="Dividir" />
<input type="button" name="multiplicar"
value="Multiplicar" />

Estos botones en s no realizan acciones en concreto sino que sirven

como disparadores de funciones JavaScript.
Tipos de <input>
type=submit Genera un botn para enviar los datos del
formulario.

<input type="submit" name="buscar" value="Buscar" />

type=reset Permite borrar los campos y resetear el

formulario.

<input type="reset" name="limpiar"

value="Borrar datos del formulario" />
Tipos de <input>
type=file Por medio de este tipo de campo podemos
incluir archivos para ser subidos al servidor. En HTML no
existe ninguna limitacin para en formatos y tamao de los
archivos a subir. Sin embargo todos los servidores incluirn
un lmite (generalmente entre 2 y 8 Mbytes) en el tamao de
los ficheros.

<form method="post" enctype="multipart/form-data">

Los formularios que adjunten ficheros tendrn el atributo

enctype o no funcionarn.
Tipos de <input>
type=hidden En ciertos casos ser necesario pasar
datos en el formulario no visibles para el usuario (aunque
aparecern en cdigo HTML visibles). Generalmente son
datos necesarios para la gestin, controles de seguridad o
bien que ya se le han preguntado al usuario.

<input type="hidden" name="id_usuario"

value="109" />
Atributos <input> (I)
name=nombre Cada elemento de un formulario hay que
identificarlo con un atributo name, para poder identificarlo
y de este modo cuando llegue a su destindo se pueda
procesar.

value=texto Podemos establecer el valor inicial del

campo.
Atributos <input> (II)
alt=descripcin Como en las imgenes nos permite
incluir una descripcin.

tabindex=numero Nos permite especificar el orden que

seguiremos en la seleccin de un campo de formulario
cuando pulsemos la tecla de tabulador.

placeholder= Nos permite incluir una descripcin sobre

el uso del campo en los tipo text.
Atributos <input> (III)
size=tamao Tamao del control (para los campos de
texto y de password se refiere al nmero de caracteres,
en el resto de controles se refiere a su tamao en pxel.

maxlength=tamao Mximo nmero de caracteres para

los controles de texto y de password.
Atributos <input> (y IV)
readonly El elemento muestra un valor pero no es posible
modificarlo.

disabled El elemento input aparece desactivado y no es

posible interactuar con l. Por ejemplo un botn de
submit. No se envian sus datos. (Se usa tambin con
<select> y <textarea>)

required Hasta que el campo no ha sido completado no se

puede enviar el formulario.
Agrupacin de elementos
En los formularios podemos agrupar varios elementos de
control o campos mediante el tag <fieldset>.

Semnticamente es una buena prctica. Adems podemos

definir el nombre de la agrupacin con el elemento <legend>.

<fieldset><legend>Asiento</legend>
<label><input type="radio" name="asiento"
value="ventanilla" checked
/>Ventanilla</label>
<label><input type="radio" name="asiento"
value="pasillo" />Pasillo</label>
</fieldset>
<button>
En HTML5 se ha introducido el tag <button> como un
elemento independiente, pero que tambin se puede incluir en
formularios. Se trata de un tag doble, luego su sintaxis es:

<button type=submit>Enviar</button>

Entre otros atributos cuenta tambin con el type=reset y

type=submit por lo que se puede utilizar dentro de
formularios.

<button type=submit>Enviar</button>
La etiqueta <output>
La etiqueta <output> se incluye en el estandar HTML5 como
un elemento en el que se muestra el resultado de una
operacin. No soportada por Internet Explorer.

<form
oninput="x.value=parseInt(a.value)+parseInt(b
.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<textarea>
La etiqueta <textarea> se utiliza cuando se debe de
introducir una gran cantidad de texto, dado que se puede
especificar altura y anchura.

Se utilizan los atributos row= y cols= para dotar de altura y

anchura en lineas o columnas al elemento.

<form action="insertar_producto.php" method="post">

<textarea id="descripcion" name="descripcion"
cols="40" rows="5"></textarea>
</form>
<textarea>
Su principal diferencia con los <input> es que no tienen lmite
en la cantidad de caracteres que puede contener.

Es frecuente utilizar libreras de JS externas para dotar de

una apariencia ms propia de un editor de texto o HTML
avanzado.

Algunos ejemplos:

http://www.tinymce.com/ - Tiny MCE

http://ckeditor.com/ - CKEditor
<select>
Los denominados campos <select> visualmente tienen la
apariencia de listas de elementos u opciones.

Realmente no aportan una funcionalidad muy distinta de las

que podamos obtener con los checkbox o los radiobutton.

Se compone de un contenedor <select> y tantos elementos

<option> como posibles valores o alternativas que queramos
contener.
<select>
Lista con un slo elemento visible.

<label for="asiento">Asiento</label> <br/>

<select id="asiento" name="asiento">
<option value="" selected>- Elija asiento -
</option>
<option value="ventanilla">Ventanilla</option>
<option value="pasillo">Pasillo</option>
<option value="central">central</option>
</select>
<select>
Lista con varios elementos visibles.

<label for="asiento">Asiento</label> <br/>

<select id="asiento" name="asiento" size=2>
<option value="" selected>- Elija asiento -
</option>
<option value="ventanilla">Ventanilla</option>
<option value="pasillo">Pasillo</option>
<option value="central">central</option>
</select>
<select>
Lista con seleccin mltiple de elementos.

<label for="so">Sistema operativo</label> <br/>

<select id="so" name="so" size="4" multiple>
<option value="windows"
selected>Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
<select>
En los campos <select> podemos ademas agrupar opciones
visualmente con <optgroup>.

<label for="asiento">Asiento</label> <br/>

<select id="asiento" name="asiento">
<optgroup label="Primera clase">
<option value="pri-pas">Pasillo</option>
<option value="pri-ven>Ventanilla</option>
</optgroup>
<optgroup label="Segunda clase">
<option value="seg-pas">Pasillo</option>
<option value="seg-ven">Ventanilla</option>
</optgroup>
</select>
Formularios en HTML5 (I)
Se han aadido nuevos tipos de campos <input> con
diferente soporte en los distintos navegadores.

color date datetime datetime-local email

month number range search tel time url week

http://www.w3schools.com/html/html5_form_input_types.asp

http://www.htmlcinco.com/nuevos-tipos-de-input-en-html5/
Formularios en HTML5 (II)
<input>

type=number Podemos enviar enteros, estableciendo un

mnimo y un mximo como input de texto.

type=range Podemos enviar enteros, estableciendo un

mnimo y un mximo utilizando un control grfico.

type=color Nos permite seleccionar desde un color picker

un color y enviarlo como hexadecimal.
Formularios en HTML5 (III)
<input>

type=date Nos permite seleccionar una fecha. En los

navegadores ms avanzados aparece un calendario.

type=datetime Nos permite seleccionar fecha y hora (con

zona horaria).

type=datetime-local Nos permite seleccionar fecha y hora

(sin zona horaria).

type=month, type=week, type=time Nos permiten

seleccionar distintas unidades de tiempo
Formularios en HTML5 (IV)
<input>

type=email Permite enviar una direccin de email con una

pobre validacin.

type=url Permite enviar una url con una pobre validacin.

type=tel Para el envo de nmeros de telfono.

type=search Para definir campos de bsqueda.

Formularios en HTML5 (y V)
<datalist>

Nos permite vincular a un input de texto una lista de posibles

valores, lo que nos permite emular una funcionalidad de
autocompletado.
<input list="browsers" name="browsers">
<datalist id="browsers">
<option value="IE">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>