Guia Diseño WEB

[FECHA]
[NOMBRE DE LA COMPAÑÍA]
[Dirección de la compañía]
ÍNDICE
HTML ...................................................................................................................................................... 5
Definición de HTML ............................................................................................................................ 5
¿Qué significa HTML y que es? ........................................................................................................... 5
¿Para qué sirve HTML? ....................................................................................................................... 5
¿Qué es un documento HTML? .......................................................................................................... 6
Las diferentes versiones del HTML ..................................................................................................... 6
HTML 1: .......................................................................................................................................... 6
HTML 2: .......................................................................................................................................... 6
HTML 3: .......................................................................................................................................... 6
HTML 4: .......................................................................................................................................... 6
HTML 5: .......................................................................................................................................... 6
Etiquetas ................................................................................................................................................ 7
Las que tienen una apertura y un cierre ............................................................................................. 7
Las etiquetas de solo apertura (auto contenidos) .............................................................................. 8
Atributos de etiquetas........................................................................................................................ 8
Crear un documento HTML .................................................................................................................... 9
Definición: .......................................................................................................................................... 9
El DOCTYPE........................................................................................................................................... 12
<!DOCTYPE html> ............................................................................................................................. 12
Cabecera de un documento HTML ....................................................................................................... 13
La Etiqueta <Head> .......................................................................................................................... 13
La Etiqueta <TITLE> ...................................................................................................................... 13
La Etiqueta <META> ..................................................................................................................... 14
La Etiqueta <STYLE> ..................................................................................................................... 15
La Etiqueta <SCRIPT> .................................................................................................................... 15
Comentarios en HTML .......................................................................................................................... 16
Insertar un comentario .................................................................................................................... 16
Organizar el texto en HTML .............................................................................................................. 16
Contenido de un documento HTML ..................................................................................................... 17
Títulos en HTML ............................................................................................................................... 17
Párrafos en HTML ............................................................................................................................. 18
Crear una línea nueva ...................................................................................................................... 19
Saltos de línea en HTML ................................................................................................................... 20
Línea horizontal en HTML................................................................................................................. 21
Enfatizar y resaltar textos en HTML ................................................................................................. 22
I.E.S.T.P. Unitek 1
Imágenes en HTML ...........................................................................................................................23
Enlaces o hipervínculos en HTML .....................................................................................................24
Abrir un enlace en otra pestaña del navegador............................................................................25
Crear un enlace mediante una imagen .........................................................................................25
Caracteres especiales en HTML (Entities) .........................................................................................26
Entidades HTML............................................................................................................................26
Listas en HTML .................................................................................................................................27
Listas ordenadas en HTML ............................................................................................................27
Listas desordenadas en HTML ......................................................................................................28
Listas anidadas .............................................................................................................................29
Indentación o sangrado ....................................................................................................................30
Tablas en HTML ................................................................................................................................30
El título de la tabla <caption> .......................................................................................................30
El encabezado de la tabla <thead> ...............................................................................................30
El cuerpo de la tabla <tbody> .......................................................................................................31
El pie de la tabla <tfoot>...............................................................................................................31
Combinar celdas ...............................................................................................................................33
El atributo COLSPAN .....................................................................................................................33
el atributo ROWSPAN ...................................................................................................................34
Las Cajas en HTML ............................................................................................................................35
La etiqueta Span ...............................................................................................................................36
Diferenciando las etiquetas div y span .........................................................................................36
Formularios básicos en HTML ...........................................................................................................38
La Etiqueta Label ..........................................................................................................................39
Elementos de formulario ..................................................................................................................39
Cuadro de Texto ...........................................................................................................................40
Cuadro de Contraseña ..................................................................................................................40
Checkbox ......................................................................................................................................41
Radio ............................................................................................................................................42
Botón de Envío de Formulario ......................................................................................................43
Botón de Reseteo del Formulario .................................................................................................43
Ficheros Adjuntos .........................................................................................................................44
Campos Ocultos ............................................................................................................................45
Formularios Avanzados ....................................................................................................................46
La Etiqueta Fieldset y Legend .......................................................................................................47
Otros Elementos de Formulario .......................................................................................................47
2 @EdgarMSA
La etiqueta Textarea ..................................................................................................................... 47
La Etiqueta Select ......................................................................................................................... 48
Formularios en la Era de HTML5 ...................................................................................................... 49
Fechas, Meses, Semanas, Horas. ...................................................................................................... 49
Selección de Fecha ....................................................................................................................... 50
Mes y Semana .............................................................................................................................. 50
Hora.............................................................................................................................................. 50
Números, Directo o Sliders: Number & Range ................................................................................. 51
Campo de Email ............................................................................................................................... 52
Campo para URLs ............................................................................................................................. 53
Atributos de Campos de Formulario a Tener en Cuenta .................................................................. 54
Autofocus ..................................................................................................................................... 54
Required ....................................................................................................................................... 54
Placeholder .................................................................................................................................. 54
La Semántica de HTML5 ....................................................................................................................... 55
Nuevas Etiquetas Semánticas ........................................................................................................... 55
Estructura de un Documento HTML5 ............................................................................................... 55
Estructura Tradicional de un Documento en HTML 4 ................................................................... 56
Estructura Tradicional de un Documento En HTML5 .................................................................... 56
Uso de Las Nuevas Etiquetas Semánticas ......................................................................................... 57
La Etiqueta <Header> ................................................................................................................... 57
La Etiqueta <Nav> ........................................................................................................................ 59
La Etiqueta <Footer> .................................................................................................................... 60
La Etiqueta <Article> .................................................................................................................... 61
La Etiqueta <Section> ................................................................................................................... 62
La Etiqueta <Aside> ...................................................................................................................... 63
La Etiqueta <Figure> ..................................................................................................................... 64
La Etiqueta <Main> ...................................................................................................................... 66
Multimedia en HTML5 ...................................................................................................................... 67
Etiquetas audio y video ................................................................................................................ 67
Atributos de las Etiquetas Multimedia a Tener en Cuenta ............................................................... 67
La Etiqueta <Source> .................................................................................................................... 68
La Etiqueta <Video> ..................................................................................................................... 69
La etiqueta <Audio> ..................................................................................................................... 70
I.E.S.T.P. Unitek 3
4 @EdgarMSA
HTML
Definición de HTML
Definición breve: HTML (HyperText Markup Language) es el lenguaje utilizado para la

creación de páginas web.
¿Qué significa HTML y que es?
HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en inglés

"HyperText Markup Language", es un lenguaje que pertenece a la familia de los
"lenguajes de marcado" y es utilizado para la elaboración de páginas web. El estándar
HTML lo define la W3C (World Wide Web Consortium) y actualmente HTML se
encuentra en su versión HTML5.
Cabe destacar que HTML no es un lenguaje de programación ya que no cuenta con
funciones aritméticas, variables o estructuras de control propias de los lenguajes de
programación, por lo que HTML genera únicamente páginas web estáticas, sin embargo,
HTML se puede usar en conjunto con diversos lenguajes de programación para la
creación de páginas web dinámicas. HTML fue creado y es mantenido por una
organización sin ánimo de lucro llamada W3C. El W3C es un consorcio formado por
más de 400 empresas (entre ellas las que desarrollan los principales navegadores como
Google, Microsoft, Mozilla, Apple...), etc.
Desde el consorcio trabajan continuamente en definir cómo debe evolucionar este
lenguaje y otros estándares que conforman la web. Posteriormente los fabricantes de
navegadores preparan los mismos intentando conseguir que un código funcione igual
en todos los navegadores. Aunque desafortunadamente no siempre es así, cada vez es
una realidad más cercana.
Por tanto, a lo largo de los años las versiones de HTML han evolucionado: HTML 2.0
(1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), con el objetivo de adaptarse
a los nuevos tiempos y así dar soporte a nuevas necesidades (estandarización de los
sistemas de audio, vídeo, etc).
¿Para qué sirve HTML?
Básicamente el lenguaje HTML sirve para describir la estructura básica de una página y
organizar la forma en que se mostrará su contenido, además de que HTML permite
incluir enlaces (links) hacia otras páginas o documentos.
HTML es un lenguaje de marcado descriptivo que se escribe en forma de etiquetas para
definir la estructura de una página web y su contenido como texto, imágenes, entre
otros, de modo que HTML es el encargado de describir (hasta cierto punto) la apariencia
que tendrá la página web.
I.E.S.T.P. Unitek 5
¿Qué es un documento HTML?
Para desarrollar una página web en HTML es necesario crear un documento HTML.
Básicamente un documento HTML es un archivo de texto que tienen la extensión .html
o .htm, en este documento se escriben todo el texto y las etiquetas HTML necesarias
para la creación de una página, al texto escrito en el documento HTML se le llama
código HTML. Un documento HTML se puede generar con cualquier editor de textos
simple como el bloc de notas de Windows o Gedit de Linux.
Las diferentes versiones del HTML
Con el paso del tiempo el lenguaje HTML ha cambiado significativamente. En la primera

versión del HTML (HTML 1.0), ¡ni siquiera se podía mostrar imágenes!
Aquí tenemos un pequeño historial muy breve de los lenguajes para nuestro
conocimiento general...
Versiones del HTML:
HTML 1: Esta fue la primera versión que creó Tim Berners-Lee en 1991.
HTML 2: La segunda versión del HTML apareció en 1994 y finalizó en 1996 con la
publicación del HTML 3.0. Esta fue la versión que sentó las bases para las versiones
futuras del HTML. Las reglas y la operatividad de esta versión las otorgó el W3C (aunque
la primera versión la creó un solo hombre).
HTML 3: Apareció en 1996 y esta versión nueva del HTML añadió muchas posibilidades
al lenguaje, como tablas, applets, scripts, posicionamiento de texto alrededor de las
imágenes, etc.
HTML 4: Esta es la versión más común del HTML (más específicamente es HTML 4.01).
Apareció por primera vez en 1998 y propuso el uso de tramas (estas seccionan una
página web en varias partes), tablas más complejas, mejoras en los formularios, etc. Lo
más importante es que esta versión permitió por primera vez el uso de hojas de estilo,
¡nuestro famoso CSS!
HTML 5: Esta es la última versión. Proporciona muchas mejoras, como la capacidad
para incluir vídeos fácilmente, un diseño mejorado del contenido, nuevas funciones para
los formularios, etc. Esta es la versión que vamos a estudiar en detalle.
6 @EdgarMSA
Etiquetas
Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >,
que tienen funciones y usos específicos y se utilizan para escribir código HTML.
Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma:
<etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta>
es la etiqueta de cierre indicada por la diagonal (Slash). HTML tiene definidas gran
variedad de etiquetas para distintos usos. En el último estándar de HTML (HTML5)
existen más de 100 etiquetas.
Por esto vamos a empezar por entender qué aspecto tienen. Lo primero es saber que
las etiquetas sólo pueden ser de dos tipos:
Las que tienen una apertura y un cierre
La etiqueta de apertura y la de cierre son las misma con la única diferencia de la diagonal
"/" , es necesario la etiqueta de cierre para limitar el campo de acción de la etiqueta, por
ejemplo a etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se
escribe la etiqueta de apertura el navegador tomará como párrafo todo el texto que se
encuentre después de dicha etiqueta hasta toparse con la etiqueta de cierre </p> y así
con las demás etiquetas según la función de cada una, la mayoría de las etiquetas de
HTML son etiquetas de este tipo.
Etiquetas con Apertura y cierre

Apertura Cierre
<html> </html>
<head> </head>
<body> </body>
<p> </p>
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre,

es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de
cierre.
I.E.S.T.P. Unitek 7
Las etiquetas de solo apertura (auto contenidos)
“los que no se cierran explícitamente” Este segundo grupo de etiquetas no requieren de

una etiqueta de cierre debido a que su campo de acción está limitado al lugar en donde
se incluye la etiqueta.
Etiquetas sin etiqueta de cierre

<br>
<img>
<hr>
<input>
En el primer ejemplo vemos la etiqueta <br> que sirve para indica un salto de línea,
creo que es fácil deducir porque no necesita etiqueta de cierre, pues es un elemento muy
simple y el navegador no necesita que le digamos hasta donde "limitar" el campo de
acción de esta etiqueta pues los saltos de línea son solo eso "un cambio de renglón y
ya", la segunda etiqueta <img> sirve para insertar una imagen en la página tampoco
necesita etiqueta de cierre, ya que la etiqueta se debe ubicar en el lugar en donde
queramos insertar la imagen, pero hace falta algo más para completar la etiqueta ya que
un simple "img" no nos dice nada acerca de la imagen, para ello existen los atributos.
Atributos de etiquetas.
Las etiquetas tienen atributos que nos sirven para especificar propiedades de esa
etiqueta, por ejemplo, especificar el ancho y alto de algún elemento, la ubicación de un
documento o imagen, etc. El atributo se coloca después del nombre de la etiqueta que
apertura.
El segundo caso del ejemplo anterior vimos que <img> sirve para insertar una imagen,
pero para que la etiqueta funcione necesita de sus atributos, por medio de estos le
daremos uso a la etiqueta. Los atributos se escriben dentro de la etiqueta de la siguiente
forma:
Ahora volviendo al ejemplo de la etiqueta <img> es necesario indicar en forma de un

atributo la dirección y el nombre de la imagen que queremos que se muestre, esto de la
siguiente manera:
Con lo anterior nuestra etiqueta <img> ya podrá mostrar la imagen deseada. Hay
atributos específicos para cada etiqueta, en este ejemplo mostramos la etiqueta <img>
con el mínimo requerido, pero puede llevar más atributos, pero si hay que decir que a
cualquier etiqueta de HTML se le puede agregar atributos, para algunas etiquetas como
esta, será algo forzoso agregar el atributo, pero para otras podrá ser algo opcional, sin
embargo, las etiquetas y sus atributos son la base del lenguaje HTML, y por medio de
estas es como se construye una página web.
8 @EdgarMSA
Crear un documento HTML
Definición: Un documento HTML es un archivo de texto que tienen la extensión .html
o .htm, este tipo de archivo se puede abrir con un editor de textos para editar el código
o con un navegador de Internet para visualizar la página resultado del código HTML
escrito.
Para desarrollar una página web en HTML es necesario crear un documento HTML.
Básicamente un documento HTML es un archivo de texto que tienen la extensión .html
o .htm, en este documento se escriben todo el texto y las etiquetas HTML necesarias
para la creación de una página, al texto escrito en el documento HTML se le llama
código HTML. Un documento HTML se puede generar con cualquier editor de textos
simple como el bloc de notas de Windows o Gedit de Linux.
Mostraré un ejemplo de cómo crear un documento HTML con Windows y el Bloc de
Notas.
Al guardar un documento en el Bloc de Notas se guarda por default con una extensión
.txt pero nosotros queremos un .html y no un .txt, entonces para esto solo basta con
agregar la extensión al momento de asignarle nombre al archivo como se muestra en la
siguiente imagen:
Una vez hecho esto tendremos un archivo HTML, este archivo por su extensión .html
ya es una página web, notarás que el icono de este archivo es el icono del navegador
de Internet que utilizas por default y se abre al hacer doble clic en él con el navegador
como una página web cualquiera. Si abrimos el archivo HTML que acabamos de crear
con el navegador se abrirá una página completamente en blanco.
Hasta el momento tenemos una página web vacía, así que para visualizar algo en el
navegador al momento de abrirla tendremos que agregar algo de texto.
I.E.S.T.P. Unitek 9
Para editarlo tendremos que hacer clic derecho y la opción "abrir con" para elegir el bloc
de notas o cualquier otro editor de textos y de esta manera poder editar el código
fuente de nuestra página.
Una vez hecho esto puedes intentar agregar el texto que se te ocurra, luego guardar el
archivo e intentar volver a abrir la página con el navegador, si haces esto se mostrará el
texto que escribiste.
Ejemplo escribiendo "Texto de prueba":
Resultado al abrir con el navegador:
Es importante mencionar que (aunque funciona) esta no es la manera correcta de escribir

texto en HTML, hay un mínimo de etiquetas necesarias que debemos escribir para
definir la estructura básica de un documento HTML.
10 @EdgarMSA
Escribiré el HTML necesario para nuestra página de ejemplo con el "Texto de prueba" y
después explicare el código:
Esta es la estructura básica mínima de un documento HTML, la primera línea indica el

tipo de documento, por lo que está etiqueta le indica al navegador que usaremos el
estándar HTML5.
La segunda línea (<html>) indica el inicio del documento HTML, esta etiqueta tiene su
respectiva etiqueta de cierre (</html>) al final de nuestro documento.
Después sigue la etiqueta <head> que al igual tiene su etiqueta de cierre </head>,
estás etiquetas indican la cabecera del documento HTML.
Dentro del HEAD encontramos la etiqueta <title> con su etiqueta de cierre </title>
dentro de estas etiquetas se escribirá el título de nuestra página.
Después pasamos al cuerpo del documento que está delimitado por las etiquetas
<body> y </body> dentro del cuerpo del documento es donde vamos a escribir todo
aquello que se visualizará en el navegador al abrir la página, en este caso lo que se
visualiza es el "Texto de prueba".
Como se observa en el código de ejemplo, un documento HTML se divide en dos partes,
el HEAD y el BODY, en la parte del HEAD va la información de la página, cosas como
el título, descripción, idioma, autor, entre otras más dirigidas principalmente a los
buscadores y navegadores, pero la parte dirigida a los usuarios está en el BODY, como
su nombre lo dice es el cuerpo de la página, es donde va el contenido, donde se organiza
y se muestran el texto, los colores, las imágenes y todo lo visual.
Ahora ya sabemos crear un documento HTML con el bloc de notas de Windows,
aunque cabe aclarar que para fines reales de desarrollo usar el bloc de notas resulta ser
muy anticuado pues el bloc de notas es un editor muy sencillo y bastante limitado en
comparación con otros programas de edición más potentes que nos permiten mayores
funcionalidades al momento de escribir código HTML.
I.E.S.T.P. Unitek 11
El DOCTYPE
<!DOCTYPE html>
Cuando escribimos nuestro documento HTML, lo primero que tenemos que escribir es
el DOCTYPE. El Doctype es la declaración de tipo de documento. en otras palabras, el
Doctype nos sirve para indicar que nuestro documento está escrito siguiendo la
estructura determinada por un DTD (definición del tipo de documento) concreto.
No es realmente una etiqueta como las otras (empieza con un signo de exclamación) y
se puede considerar como una excepción que confirma la regla.
Esta línea doctype antiguamente era extremadamente compleja. Memorizarla era
imposible. En XHTML 1.0 se tenía que escribir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
Para el deleite de los administradores web se decidió simplificarla en el HTML5. Cuando
veas una etiqueta doctype corta (<!DOCTYPE html>) significa que la página está escrita
en HTML5.
Lo importante: ¡El DOCTYPE en HTML5 es más sencillo que nunca, por lo que ya no
hay excusas para utilizarlo!
En DOCTYPE informas del DTD que utilizas en tu documento. El DTD nos indica la
estructura de etiquetas del documento, los atributos que pueden tener las etiquetas, los
eventos, etc.
Tenemos que crear nuestros documentos respetando el DTD indicado en nuestro
DOCTYPE. Esto no es más que conocer y respetar los estándares web; de nada sirve
poner el DOCTYPE si luego no cumplimos el estándar.
Podemos comprobar si nuestro documento sigue el estándar con el validador de la
W3C.
12 @EdgarMSA
Cabecera de un documento HTML
La Etiqueta <Head>
En el artículo anterior echamos un vistazo a la estructura de un documento HTML y

mencionamos que se divide en dos partes, el HEAD y el BODY, ahora vamos a tratar el
tema del HEAD más a fondo.
HEAD traducido del inglés al español significa "cabeza", por eso a esta parte del
documento la llamamos cabecera. En el documento HTML comienza con la etiqueta
<head> y se indica su final con la etiqueta </head>, se escribe así:
El HEAD es la parte donde se incluye la información acerca del documento, podríamos

atrevernos a decir que el HEAD es una sección de un documento HTML meramente
"técnica e informativa", pues la mayoría de esta información no la muestra el navegador
al usuario e inclusive pudiéramos dejarla vacía y esto no afectaría al funcionamiento o
la forma en que se visualiza la página, y si bien el HEAD de un documento HTML
pudiera ir vacío siempre es mejor darles la suficiente importancia a las etiquetas que el
HEAD contiene, mucho más aún si nuestro objetivo es publicar nuestro trabajo en la
web, pues muchas de las etiquetas del HEAD son importantes para los buscadores y para
un buen posicionamiento en los resultados de búsqueda.
Bueno vamos al grano y conozcamos las etiquetas del HEAD.
La Etiqueta <TITLE>
Un elemento del HEAD visible desde el navegador, muy importante para los buscadores
pues es el texto que se visualiza en los resultados de búsqueda.
Me parece importante señalar que este elemento nada tiene que ver con el nombre del
archivo pues son dos cosas totalmente distintas e independientes una de la otra, por
ejemplo, podríamos tener un archivo llamado index.html y en el código un
<title>Página principal - Bienvenido</title> y esto estaría bien.
En el navegador:
La Etiqueta <META>
La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información
puede ser utilizada por los buscadores. La etiqueta <meta> representa varios tipos de
metadatos que no pueden ser expresados con las etiquetas <title>, <link>, <style> y
<script>.
El atributo Charset se utiliza para especificar la codificación usada en nuestra página.
Únicamente debe existir una etiqueta meta con el atributo Charset en la página. En él
indicaremos si nuestra página esta codificada en UTF-8, ISO o cualquier otro tipo de
codificación. Este elemento debe estar dentro de los primeros 512 bytes de la página:
Otro de los atributos de la etiqueta meta es content, el cual es utilizado para dar valores
a los metadatos de la página o a las directivas pragma (son sentencias especiales que
controlan el comportamiento del compilador).
Un tercer atributo es name, éste asigna un metadato a la página. Un metadato esta
expresado como un par nombre-valor, el atributo name es el encargado de especificar
que metadato queremos crear, y el atributo content proporciona su valor.
Algunos de los metadatos más utilizados son:
 Application-name: representa el nombre que tendrá el documento web.
 Author: indica el nombre del creador de la página.
 Description: con este metadato se pretende dar una pequeña descripción de lo
que contiene nuestra página. Este valor sera muy utilizado por los directorios de
páginas y buscadores.
 Generator: se utiliza para indicar con que software se ha creado la página. Si tú
has creado el documento a mano no necesitas incluir este metadato en él.
 Keywords: es el conjunto de palabras más relevantes de nuestro documento. Por
ejemplo, las palabras más relevantes para un documento que hable sobre
HTML5, podrían ser: HTML5, Video, Tags, Enlaces.
14 @EdgarMSA
La Etiqueta <STYLE>
Con esta etiqueta se puede incluir código CSS dentro del documento HTML, en este
ejemplo se les da un color azul a los párrafos, es decir a los fragmentos de texto
contenidos por las etiquetas <p> </p>.
Pero la mejor manera de incluir código CSS es a través de un archivo externo en el head
a través de la etiqueta <link>
La Etiqueta <SCRIPT>
La etiqueta <script> permite la inserción de códigos script, como puede ser JavaScript
en un documento web del lado del cliente. El código se puede insertar directamente
entre las etiquetas de esta manera:
En este ejemplo agregamos código de JavaScript que lo único que hace es mostrarnos
un texto que dice "Hola".
o haciendo referencia a un documento externo el cual contiene el código script a

ejecutar. En este último caso la etiqueta de script no ha de tener contenido.
Comentarios en HTML
Un comentario en HTML es un texto que es simplemente una nota. No se muestra, el
ordenador no lo interpreta y no modifica lo que se visualiza en la página. Lo usamos
nosotros y aquellos que lean el código fuente de la página. Podemos usar los
comentarios para dejar instrucciones sobre la forma en la que funciona la página.
¿Qué finalidad tiene esto? Nos ayudará a recordar cómo funciona la página cuando
vuelvas al código fuente después de que haya pasado un tiempo sin verlo.
Insertar un comentario
Un comentario es una etiqueta HTML con un formato muy especial:
Lo puedes poner en la parte que quieras en el código fuente, no afecta a la página, pero
lo puedes usar como ayuda para que te sitúes en el código especialmente si es largo.
Organizar el texto en HTML
Bueno, la página en blanco es bonita, pero si dejas la página web así es probable que
no tenga mucho éxito.
Vamos a conocer un buen número de etiquetas HTML. Algunas etiquetas se usan desde
la primera versión de HTML y otras se han introducido más recientemente en HTML5.
 Cómo organizar la página con títulos;
 Cómo teclear párrafos;
 Cómo resaltar palabras determinadas en el texto;
 Cómo organizar la información en listas.
 Cómo insertar imágenes…etc.
¿Estás preparados? Entonces, ¡vamos! veras que no es complicado.
16 @EdgarMSA
Contenido de un documento HTML
En este apartado aprenderás sobre las etiquetas base para la creación de un documento
web. La etiqueta <body> es el contenedor para todos los aspectos representables de
un documento. Es parte de la estructura básica de un documento. Es decir que todas las
etiquetas que veremos serán incluidas entre las etiquetas <body></body>.
Títulos en HTML
Ya que el contenido de nuestra página podría tener varios párrafos, va a ser difícil que
nuestros visitantes se sitúen. Es aquí donde los títulos ganan utilidad.
En HTML puedes seleccionar seis niveles de títulos diferentes. Con esto quiero decir que
puedes decir «este es un título muy importante», «este es un título un poco menos
importante», «este es un título mucho menos importante», etc. Por consiguiente, tienes
seis etiquetas de título diferentes:
<h1> </h1>: significa «título muy importante". En general se usa para mostrar el título
de la página al comienzo de la página.
<h2> </h2>: significa "título importante".
<h3> </h3>: asimismo, esto significa un título un poco menos importante (puedes
decir «subtítulo» si quieres).
<h4> </h4>: el título es incluso menos importante.
<h5> </h5>: el título no es importante.
<h6> </h6>: el título no es nada importante.
Intenta crear una página web con títulos para ver cómo se ve:
En el Navegador:
Párrafos en HTML
El texto en una página web se teclea habitualmente en párrafos. En el lenguaje HTML

la etiqueta <p> se usa para delimitar los párrafos.
<p> significa "comienzo del párrafo";

</p> significa "fin del párrafo";
Como se mencionó anteriormente tecleamos el contenido del sitio web entre las
etiquetas <body></body>. Así que tenemos que poner nuestro párrafo dentro de
estas dos etiquetas y ¡finalmente tendremos nuestra primera página web con texto!
18 @EdgarMSA
En el navegador:
Crear una línea nueva
En HTML si presionas la tecla Enter no se crea una línea nueva en la forma en la que
estamos acostumbrados. existe por supuesto una forma de empezar una línea nueva en
HTML.
De hecho, si quieres teclear un párrafo nuevo solo necesitas usar una segunda etiqueta
<p>. ¡Así que al final nuestro código HTML debería estar lleno de etiquetas de párrafos!
Un ejemplo:
En el navegador:
Saltos de línea en HTML
El elemento HTML line break <br> produce un salto de línea en el texto (retorno de
carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es
significante.
La etiqueta <br>. Es una etiqueta de solo apertura que se usa para indicar el salto de
línea: <br >. La puedes colocar dentro de un párrafo o por fuera.
Aquí tenemos la forma de usarla en un código:
En el navegador:
20 @EdgarMSA
Línea horizontal en HTML
La etiqueta <hr> define un salto temático en una página HTML (por ejemplo, un
cambio de tema). La etiqueta <hr> se utiliza para separar el contenido (o definir un
cambio) en una página HTML.
La etiqueta <hr> crear una linea horizontal. Esta etiqueta es similar al salto de línea y
de la misma manera que <br> dejara un espacio tanto arriba como abajo.
Como podrás ver, todo lo que esta etiqueta hace es dibujar una línea horizontal
separando diferentes partes del contenido o tan sólo decora la página.
En el navegador:
Enfatizar y resaltar textos en HTML
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo, una palabra o
conjunto de palabras. Así como tenemos seis niveles de títulos para enfatizar un bloque
contamos con dos elementos que son (<em> <strong>)
El elemento de mayor fuerza de énfasis es "STRONG" y le sigue "EM". Veamos un
ejemplo del empleo de estos dos elementos HTML:
En el navegador:
22 @EdgarMSA
Imágenes en HTML
Para insertar una imagen dentro de una página debemos utilizar el elemento HTML
<img>, la misma no tiene una etiqueta de cierre (similar a la etiqueta <br>).
Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan
nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg
y png. La sintaxis de esta etiqueta es:
Como mínimo, debemos indicar los atributos SRC y ALT de la etiqueta HTML "img". En
el atributo src indicamos el nombre del archivo que contiene la imagen. Como la imagen
se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el
nombre de archivo basta.
Otro atributo muy recomendado es alt, donde disponemos un texto que verán los
usuarios que visiten el sitio con un navegador que sólo permite texto ( o con un
navegador que tenga desactivada la opción de descarga de imágenes ). El texto debe
describir el contenido de la imagen.
Crearemos una página que muestre una imagen llamada foto1.jpg (La imagen se
encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página).
En el navegador:
Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para
recuperarla será:
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /

Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML
luego la sintaxis será:
Enlaces o hipervínculos en HTML
El elemento más importante que tiene una página web es el hipervínculo (Enlaces), estos
nos permiten cargar otra página en el navegador.
Normalmente un navegador al encontrar esta etiqueta HTML muestra un texto
subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página indicada
por dicho hipervínculo.
Primero veremos cuál es la sintaxis para disponer un hipervínculo a una página que se
encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).
El elemento de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
En el navegador:
Como vemos, se trata de otra etiqueta HTML de apertura y cierre. Lo que se encuentra
entre el comienzo y el fin de la etiqueta es el texto que aparece en la página
(normalmente subrayado).
Tan al igual que otras etiquetas el atributo href incorpora en el comienzo de una marca
y tiene un nombre y un valor. El atributo href de la etiqueta <a> hace referencia a la
página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo
(Enlace).
24 @EdgarMSA
Nota: para poder abrir un sitio web debe especificar el protocolo “http” o
“https” según sea el caso seguido de la dirección (url) del sitio web
Abrir un enlace en otra pestaña del navegador

La etiqueta <a> tiene un atributo que nos permite indicar que la referencia del recurso
sea abierta en otra pestaña. Este atributo se llama “target” y debemos asignarle el valor
"_blank" para indicar que la página sea abierta en otra pestaña.
Creemos una página que contenga dos hipervínculos, el primero abre el sitio en el
mismo navegador y el segundo en otra instancia del navegador:
Crear un enlace mediante una imagen

Como ya conocemos los enlaces y como insertar imágenes en nuestra página, ahora
podemos implementar un enlace, pero en vez de mostrar un texto mostraremos una
imagen.
La solución es simple y consiste en disponer la etiqueta <img> encerrada entre la
etiqueta de apertura y cierre del enlace(<a>)
Crearemos una página que muestre una imagen (logo.jpg) como enlace. Al ser
presionados llamara a otra página.
Como podemos observar insertamos el elemento HTML <img> en el lugar donde

disponíamos el texto del hipervínculo. Eso es todo.
En el navegador:
Caracteres especiales en HTML (Entities)
Los caracteres reservados en HTML deben reemplazarse con entidades de caracteres. Los
caracteres que no están presentes en su teclado también pueden ser reemplazados por
entidades.
Entidades HTML
Algunos caracteres están reservados en HTML. Si usa el signo menor que (<) o mayor
que (>) en su texto, el navegador puede mezclarlos con las etiquetas. Las entidades de
caracteres se utilizan para mostrar caracteres reservados en HTML.
Una entidad de carácter se ve así:
En el navegador:
Nota: Para conocer más sobre los caracteres reservados de HTML, y de los
que puedes hacer uso en tus proyectos te recomendamos visitar las
siguientes páginas web:
https://www.w3schools.com/html/html_entities.asp
https://dev.w3.org/html5/html-author/charref
26 @EdgarMSA
Listas en HTML
Listas ordenadas en HTML

La etiqueta <ol> se utiliza para crear listas ordenadas. Esta etiqueta HTML es útil
cuando debemos numerar o listar una serie de datos.
La etiqueta <ol> y su correspondiente etiqueta de cierre es </ol>.
En su interior cada uno de los items se los dispone con la etiqueta <li>, que también
tiene la etiqueta de apertura <li> y la etiqueta de cierre de item </li>.
Luego se encarga el navegador de numerar cada uno de los items contenidos en la lista,
tengamos en cuenta que se numeran porque se trata de una lista ordenada.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos los
tipos de desarrolladores web:
En el navegador:
Listas desordenadas en HTML
La etiqueta <ul> se utiliza para crear listas no ordenadas. Esta etiqueta HTML es útil
cuando tenemos un orden aleatorio para listar una serie de datos.
Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada
items sino un pequeño símbolo gráfico. La forma de implementar este tipo de listas es
idéntica a las listas ordenadas.
Veamos un ejemplo donde implementamos una lista no ordenada:
En el navegador:
28 @EdgarMSA
Listas anidadas
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas
de distinto tipo, por ejemplo, podemos tener una lista no ordenada y uno de los item
puede ser una lista ordenada. Para el anidamiento de listas solo debemos tener cuidado
en la correcta apertura y cerrado de las etiquetas.
En el navegador:
Indentación o sangrado
Los espacios en blanco que dejamos a la izquierda de cada etiqueta se llama indentación
y tiene por objetivo que el código HTML sea más legible para la próxima vez que
modifiquemos el contenido de la página. El navegador no tiene en cuenta estos espacios
y los ignora.
El sangrado nos permite identificar en forma más sencilla donde comienza una etiqueta
HTML y donde finaliza.
Tablas en HTML
El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada,
organizado en filas y columnas.
La etiqueta <table> es una etiqueta de apertura y cierre que nos permite crear la tabla,
que vamos a mostrar. Y la estructura que tendrá la etiqueta TABLE estará formada por:
El título de la tabla <caption>

Para disponer un título a una tabla debemos incorporar la etiqueta <caption>
inmediatamente después que abrimos la etiqueta table.
El encabezado de la tabla <thead>

El encabezado lo haremos con la etiqueta <thead>. Que nos permitirá crear el
encabezado de la tabla (nombre de los campos de una tabla “Metadatos ”). Dentro de
ella debemos hacer el uso de la etiqueta <tr> que nos permite crear una fila. Y de esa
manera comenzar a crear las respectivas columnas que tendrá nuestra tabla con la
etiqueta <th>. La etiqueta <th> es de uso exclusivo solo para encabezados de tabla.
30 @EdgarMSA
El cuerpo de la tabla <tbody>
Una vez definido el número de columnas que tendrá nuestra tabla comenzaremos
agregando contenido a nuestra tabla para ello debemos crear el cuerpo de dicha tabla
con la etiqueta <tbody>.
Dentro de ella comenzaremos hacer uso de la etiqueta <tr> para crear una fila. Y para
insertar los datos de las columnas usaremos la etiqueta <td>. La etiqueta <td> puede
ser usada en el cuerpo como en el pie de la tabla, pero siempre debe estar entre los
límites de la etiqueta <tr>.
El pie de la tabla <tfoot>

Por ultimo implementaremos el pie de nuestra tabla con la etiqueta <tfoot> para
agregar contenido a nuestro pie de tabla. Haremos uso de las etiquetas <tr> y <td>,
de la manera como se usa en el cuerpo de la tabla.
Nota: las etiquetas mencionadas tales como <table>, <caption>,

<thead>, <tbody>, <tfoot>, <tr>, <th> y <td> son etiquetas de
apertura y cierre.
La mejor forma de entender y dominar este concepto es implementar tablas y ver su
resultado dentro del navegador.
32 @EdgarMSA
En el navegador:
Combinar celdas
En algunas ocasiones, puede ser necesario combinar dos o más celdas en una sola que
pasará a ocupar el lugar de aquellas afectadas. Estas combinaciones pueden ser llevadas
a cabo con los atributos “rowspan” (para combinar verticalmente) y “colspan” (para
combinar horizontalmente).
El atributo COLSPAN
Como hemos comentado con anterioridad, para la combinación horizontal de celdas,
utilizaremos el atributo “colspan” seguido del valor (Numero de columnas a unir).
Recuerda que el atributo border está no soportado en HTML5 y que más adelante
veremos cómo reemplazarlo mediante el uso de CSS.
En el navegador:
el atributo ROWSPAN
En este caso, para la combinación vertical de celdas, utilizaremos el atributo de celda
“rowspan” seguido del valor (Numero de filas a unir).
En el navegador:
34 @EdgarMSA
Las Cajas en HTML
La etiqueta <div></div> permite crear cajas contenedoras de otros elementos. Esta

etiqueta no muestra (por defecto) ningún estilo ni formato visual, sino que es utilizada
únicamente para organizar la disposición de los elementos en la página. Es muy sencillo
indicar su posición de forma absoluta o relativa en la página y crear divisiones del
espacio para distribuir los elementos.
Estas cajas pueden contener cualquier tipo de elemento (texto, imágenes, etc.) u otras
etiquetas <div> para crear subdivisiones.
El uso de la etiqueta div es sencillo. Observemos este ejemplo:
En el navegador:
Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de
contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura
interna del documento hemos aplicado una división muy importante. La figura muestra
el texto del ejemplo; no hay ninguna diferencia visible.
Eso es todo lo que necesitamos saber: la etiqueta <div> configura espacios dentro de
la página.
La etiqueta Span
Después de la etiqueta </div> de cierre, se comienza con una nueva línea. Esa es una
de las diferencias principales con la otra etiqueta que empleamos para diferenciar
contenidos, la etiqueta <span>. Con ella conseguimos un efecto similar, pero en el
interior de un párrafo. Recordemos que span se emplea con frecuencia para aplicar
estilos en el interior de un bloque de texto.
En el navegador:
Diferenciando las etiquetas div y span

Adicionalmente, las etiquetas div y span se suelen acompañar de uno o dos parámetros
destinados a identificar ese bloque:
 ID: permite establecer un identificador único para el bloque. Así podremos

referirnos al bloque de forma inequívoca.
 CLASS: es similar a id, pero con la ventaja de que se puede repetir; así que
podemos tener varios <div> diferentes con la misma clase.
36 @EdgarMSA
Usando id y class podemos diferenciar unos div de otros y así aplicarles estilos CSS
diferentes o hacer que actúen de forma distinta.
Los atributos id y class se utilizan como se muestra en el ejemplo:
En el navegador:
Como se puede apreciar, los atributos id y class se pueden mezclar. Se mantiene siempre
esa norma: los id son únicos dentro de una página, mientras que los class se suelen
repetir para que varios elementos tomen un mismo estilo.
Formularios básicos en HTML
En HTML, un formulario es una sección del documento destinada a que el usuario

introduzca datos que van a ser enviados a algún lado. En HTML un formulario puede
contener cosas muy variadas: texto normal, elementos especiales llamados controles
(checkboxs, radios, comboboxs, etc.), y otros elementos especiales denominados
etiquetas (labels). Explicaremos el significado de estos elementos especiales y cómo
generar formularios en HTML.
Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea
introduciendo texto, seleccionando una opción entre varias, etc., antes de enviar el
formulario y que éste sea procesado.
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>.
El código HTML necesario para definir el formulario anterior se muestra a continuación:
La etiqueta <form> encierra todos los contenidos del formulario y la etiqueta <input>
permite definir varios tipos diferentes de elementos (botones y cuadros de texto).
La mayoría de formularios utilizan sólo los atributos action y method. El atributo action
indica la URL de la aplicación del servidor que se encarga de procesar los datos
introducidos por los usuarios.
Nota: El signo # (numeral). Como valor en un atributo, no hace nada. Se

usa con fines de prueba.
38 @EdgarMSA
El atributo method establece la forma en la que se envían los datos del formulario al
servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio
de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta
forma, casi todos los formularios incluyen el atributo method="get" o el atributo
method="post".
En el navegador:
La Etiqueta Label
Se emplea para definir el título o leyenda de los campos definidos en un formulario. El
único atributo que suele utilizarse con la etiqueta <label> es for, que indica el
identificador (atributo id) del campo de formulario para el que esta etiqueta hace de
título.
La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado
y se mejora su accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero
del ratón se posiciona automáticamente para poder escribir sobre el campo de
formulario asociado. Este comportamiento es especialmente útil para los campos de tipo
radio y checkbox.
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se denominan

"campos de formulario" y "controles de formulario". La mayoría de controles se crean
con la etiqueta <input>, por lo que su definición formal y su lista de atributos es muy
extensa. A continuación, se muestran los controles que se pueden crear con la etiqueta
<input>.
Cuadro de Texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra
un cuadro de texto vacío en el que el usuario puede escribir cualquier texto. A
continuación, se muestra el código HTML correspondiente:
El atributo type diferencia a cada uno de los controles que se pueden crear con la
etiqueta <input>. Para los cuadros de texto, su valor es text. El atributo name es el más
importante en los campos del formulario. De hecho, si un campo no incluye el atributo
name, sus datos no se envían al servidor. El valor que se indica en el atributo name es
el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de
formulario.
En el navegador:
Cuadro de Contraseña
La única diferencia entre este control y el cuadro de texto normal es que el texto que el
usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los
navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para
escribir contraseñas y otros datos sensibles.
Cambiando el valor del atributo type por password se transforma el cuadro de texto
normal en un cuadro de contraseña. Todos los demás atributos se utilizan de la misma
forma y tienen el mismo significado. En el navegador:
40 @EdgarMSA
Checkbox
Los checkbox o "casillas de verificación" son controles de formulario que permiten al
usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se
muestran varios checkbox juntos, cada uno de ellos es completamente independiente
del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias
opciones relacionadas, pero no excluyentes.
El valor del atributo type para estos controles de formulario es checkbox. Como se
muestra en el ejemplo, el texto que se encuentra al lado de cada checkbox no se puede
establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente
fuera del control del formulario. Si no se añade un texto al lado de la etiqueta <input>
del checkbox, el usuario sólo ve un pequeño cuadrado sin ninguna información relativa
a la finalidad de ese checkbox.
El valor del atributo value, junto con el valor del atributo name, es la información que
llega al servidor cuando el usuario envía el formulario.
En el navegador:
Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked.

Si el valor del atributo es checked, el checkbox se muestra seleccionado. En cualquier
otro caso, el checkbox permanece sin seleccionar.
Radio
Los controles de tipo radio son similares a los controles de tipo checkbox, pero
presentan una diferencia muy importante: son mutuamente excluyentes. Los radios se
utilizan cuando el usuario solamente puede escoger una opción entre las distintas
opciones relacionadas que se le presentan. Cada vez que se selecciona una opción,
automáticamente se deselecciona la otra opción que estaba seleccionaba.
El valor del atributo type para estos controles de formulario es radio. El atributo name
se emplea para indicar los radios que están relacionados. Por lo tanto, cuando varios
radios tienen el mismo valor en su atributo name, el navegador sabe que están
relacionados y puede deseleccionar una opción del grupo de radios cuando se seleccione
otra opción.
En el navegador:
42 @EdgarMSA
Botón de Envío de Formulario
La mayoría de formularios dispone de un botón para enviar al servidor los datos
introducidos por el usuario:
El valor del atributo type para este control de formulario es submit. El navegador se
encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo
de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece
el atributo value, el navegador muestra el texto predefinido Enviar.
En el navegador:
Botón de Reseteo del Formulario

Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos
ya no utilizan este tipo de botón. Se trata de un botón especial que borra todos los
datos introducidos por el usuario y devuelve el formulario a su estado original:
El valor del atributo type para este control de formulario es reset. Cuando el usuario
pulsa este botón, el navegador borra toda la información introducida y muestra el
formulario en su estado original. Si el formulario no contenía originalmente ningún
valor, el botón de reset lo vuelve a mostrar vacío. si el formulario contenía información,
el botón reset vuelve a mostrar la misma información original.
En el navegador:
Como es habitual en los botones de formulario, el atributo value permite establecer el
texto que muestra el botón. Si no es utiliza este atributo, el navegador muestra el texto
predefinido del botón, que en este caso es Restablecer.
Ficheros Adjuntos
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque
desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el
número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los
servidores añaden restricciones por motivos de seguridad.
El valor del atributo type para este control de formulario es file. El navegador se encarga
de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un
botón que permite navegar por los directorios y archivos del ordenador del usuario.
En el navegador:
Nota: las entradas de tipo Submit, Reset y File pueden tener como atributo
Disabled, lo que hace este atributo es desactivar el botón.
44 @EdgarMSA
Campos Ocultos
Los campos ocultos se emplean para añadir información oculta en el formulario:
El valor del atributo type para este control de formulario es hidden. Los campos ocultos
no se muestran por pantalla, de forma que el usuario desconoce que el formulario los
incluye. Normalmente los campos ocultos se utilizan para incluir información que
necesita el servidor pero que no es necesario o no es posible que la establezca el usuario.
Formularios Avanzados
Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de

formularios de las aplicaciones web. No obstante, HTML define algunos elementos
adicionales para mejorar la estructura de los formularios creados.
La siguiente imagen muestra un formulario que agrupa sus elementos y añade etiquetas
a cada campo para mejorar su estructura:
En el navegador:
46 @EdgarMSA
La Etiqueta Fieldset y Legend
La etiqueta <fieldset> agrupa todos los controles de formulario a los que encierra. El
navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta
<legend> se incluye dentro de cada etiqueta <fieldset> y establece el título que
muestra el navegador para cada agrupación de elementos.
Por otra parte, todos los controles de formulario salvo los botones presentan una
carencia muy importante: no disponen de la opción de establecer el título o texto que
se muestra junto al control.
Otros Elementos de Formulario
La etiqueta <input> permite crear tipos diferentes de controles de un formulario. Sin

embargo, algunas aplicaciones web utilizan otros elementos de formulario que no se
pueden crear con <input>. Las listas desplegables y las áreas de texto disponen de sus
propias etiquetas (<select> y <textarea> respectivamente).
Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya
que es mucho más cómodo de introducir que en un campo de texto normal:
La etiqueta Textarea
Se emplea para incluir un área de texto en un formulario
Los atributos más utilizados en las etiquetas <textarea> son los que controlan su
anchura y altura. La anchura del área de texto se controla mediante el atributo cols, que
indica las columnas o número de caracteres que se podrán escribir como máximo en
cada fila. La altura del área de texto se controla mediante rows, que indica directamente
las filas de texto que serán visibles.
En el navegador:
Para limitar el número de caracteres que se puede introducir dispone del atributo
maxlength tan al igual que el input de tipo Text.
La Etiqueta Select
Se emplea para definir cada elemento de una lista desplegable. La inmensa mayoría de
listas desplegables que utilizan las aplicaciones web son simples, por lo que el código
HTML habitual de las listas desplegables es:
48 @EdgarMSA
La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista.
Cada una de las opciones de la lista se define mediante una etiqueta <option>. El
atributo value de cada opción es obligatorio, ya que es el dato que se envía al servidor
cuando el usuario envía el formulario. Para seleccionar por defecto una opción al
mostrar la lista, se añade el atributo selected a la opción deseada.
Por otra parte, las listas desplegables permiten agrupar sus opciones de forma que el
usuario pueda encontrar fácilmente las opciones cuando la lista es muy larga:
Formularios en la Era de HTML5
Hace tiempo un formulario tenía poco más que 4 o 5 tipos de campo y teníamos que
jugar con JavaScript para hacerlos más funcionales.
Vamos a hablar de los nuevos tipos de campos que HTML5 trae bajo el brazo, que te
ayudarán a contextualizar que tipo de datos entramos y en el caso de tablets y móviles
que teclado u opciones nos van a mostrar en pantalla.
HTML5, nos trae un buen puñado de tipos de campo nuevos para formularios que nos
ayudan a mejorar la experiencia de usuario ya no solo a nivel del uso en ordenadores,
si no en cualquier otro dispositivo móvil.
Hablaremos de los nuevos atributos y types que nos brinda HTML5, sus ventajas y el
beneficio de adaptarse en cada dispositivo, porque no todos disponen de un bonito
teclado con sus más de 100 teclas. Sin olvidar como no, que navegadores lo aceptan
con su compatibilidad.
Fechas, Meses, Semanas, Horas.
Siempre que hemos tenido que pelear con formularios que guardan fechas, como una
reserva online por ejemplo, hemos tenido que recurrir a Javascript y librerías como
jQuery o YUI.
Con HTML5 la funcionalidad de fechas y tiempo viene integrada en el navegador en
distintos tipos de campo: fecha, mes, semana, y hora.
Selección de Fecha
El tipo date sería el más común, nos ofrece una forma directa de mostrar un calendario
y seleccionar una fecha con su día, mes y año. En los distintos dispositivos móviles que
usamos nos mostrará una ventana o menú nativo del sistema con el selector de fecha.
En la mayoría de campos de fecha se pueden limitar mínimo y máximo de fechas con

las propiedades min y max. El valor que nos devuelve siempre este campo está basado
en la ISO 8061 que tiene el formato AAAA-MM-DD.
Mes y Semana
El tipo month nos deja elegir directamente un año y su mes, mientras que week solo el
número de la semana del año elegido.
Hora
Para elegir una hora ahora usaremos time que nos da la selección numérica de hora y
minuto, incluido la de segundos y fracciones de segundo en algunos navegadores.
50 @EdgarMSA
En el navegador:
Números, Directo o Sliders: Number & Range
Para el manejo de campos numéricos se han introducido dos nuevos tipos number y
range. Estos dos tipos comparten una serie de propiedades para fijar mínimo, máximo
y número de pasos.
 min=”1″ define el mínimo valor aceptado por el campo.

 max=”15″ define el máximo valor.
 step=”2″ en base al mínimo define el rango de valores que sube hasta el máximo.
El campo number aparece como uno de texto con la singularidad que tiene flechas para
sumar o restar a su valor. En cambio, range se muestra como un slider o campo
deslizante que va desde el mínimo al máximo establecido por min y max y saltando de
valor en valor según step.
En el navegador:
Campo de Email
En cuestión visual el campo de tipo email es básicamente una copia de text pero con
algunas peculiaridades propias ya que a la hora de usar required valida que el contenido
del campo tenga el formato de una cuenta de email.
En el navegador:
52 @EdgarMSA
Campo para URLs
Un campo para escribir una dirección web, comúnmente denominada URL. Igual que
el tipo anterior el campo de url es como text y en dispositivos móviles añade a su teclado
virtual teclas de acceso rápido como las terminaciones de dominio .com, .net o .org e
incluso el último historial de textos introducidos en este tipo de campo.
En el navegador:
Atributos de Campos de Formulario a Tener en Cuenta
Con la remesa de nuevos campos, también han llegado diferentes tipos de propiedades,
estos son los principales a tener en cuenta:
Autofocus
El navegador fija el foco al campo que lo tenga indicado automáticamente al cargar la
página, ideal para sitios donde el campo de búsqueda es importante.
Required
El campo con este atributo será validado por el propio navegador, tanto si está vacío
como si incluye un tipo como puede ser email o url aparecerá un pequeño globo
informativo indicando el problema.
Placeholder
Mostrará un texto por defecto mientras el campo este vacío y al escribir desaparecerá,
una mejora que ayuda a entender el propio campo.
54 @EdgarMSA
La Semántica de HTML5
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se
han introducido en HTML5. Existen más de 30 nuevas etiquetas semánticas que pueden
ser utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se podrían clasificar en
dos grupos:
Etiquetas que extienden a las actuales, como <video>, <audio> o <canvas>, y que
además añaden nuevas funcionalidades a los documentos HTML, que podemos
controlar desde JavaScript y
etiquetas que componen la web semántica, es decir, que no proponen nuevas
funcionalidades, pero sirven para estructurar sitios web, y añadir un significado
concreto, más allá de las etiquetas generales como <div>.
Veremos cómo transformar nuestra estructura actual de marcado basada en <div>, a
una estructura que utiliza las nuevas etiquetas estructurales como:
 <nav>
 <header>
 <footer>
 <aside>
 <article>
Nuevas Etiquetas Semánticas
En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000

de páginas web utilizando el motor de Google, intentando identificar la manera en la
que la web real estaba construida. Uno de los resultados de este análisis, fue la
publicación de una lista con los nombres de clases más utilizados. Este estudio revela
que los desarrolladores utilizan clases o IDs comunes para estructurar los documentos.
Esto llevó a considerar que quizás fuese una buena idea crear etiquetas concretas para
reflejar estas estructuras.
Este tipo de etiquetas que componen la web semántica nos sirven para que cualquier
mecanismo automático (un navegador, un motor de búsqueda, un lector de feeds...)
que lea un sitio web sepa con exactitud qué partes de su contenido corresponden a cada
una de las partes típicas de un sitio. Observando esas etiquetas semánticas estructurales,
cualquier sistema podrá procesar la página y saber cómo está estructurada.
Estructura de un Documento HTML5
Como hemos visto con las nuevas etiquetas semánticas introducidas en HTML5, éstas
aportan un significado concreto al documento que estamos definiendo, y por lo tanto,
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver
cómo podemos convertir nuestra actual página con las nuevas etiquetas introducidas en
HTML5.
Estructura Tradicional de un Documento en HTML 4
El siguiente código muestra una estructura "clásica" de documento HTML, donde los
diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por sí
mismas, estas etiquetas no aportan ningún tipo de significado, y el atributo id tampoco
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever">, el
significado sigue siendo el mismo, ninguno.
Estructura Tradicional de un Documento En HTML5

Veamos cómo podemos añadir un significado a este documento, únicamente aplicando
las nuevas etiquetas semánticas incluidas en HTML5.
56 @EdgarMSA
Uso de Las Nuevas Etiquetas Semánticas
La Etiqueta <Header>
Según la especificación, un elemento <header> representa lo siguiente:
Un grupo de navegación o contenido introductorio. Un elemento header

normalmente contiene una sección de encabezado (un elemento h1-h6 o un elemento
hgroup), pero puede contener otro tipo de elementos, como una tabla de contenidos,
un formulario de búsqueda o cualquier logo importante.
En nuestro ejemplo, y en la mayoría de los sitios web, la cabecera contiene los primeros
elementos de la página. Tradicionalmente el título de la web, su logo, enlaces para
volver al inicio... De la manera más simple, nuestra cabecera quedaría de esta forma:
En el navegador:
También es muy común que los sitios web muestren un lema o subtítulo bajo el título
principal. Para dar mayor importancia a este subtítulo, y relacionarlo de alguna manera
con el título principal de la web, es posible agrupar los dos titulares bajo un elemento
<hgroup>.
En el navegador:
58 @EdgarMSA
La Etiqueta <Nav>
Según la especificación, un elemento <nav> representa lo siguiente:
El elemento <nav> representa una sección de una página que enlaza con otras páginas
o partes de la misma página: una sección con enlaces de navegación.
El elemento <nav> ha sido diseñado para identificar la navegación de un sitio web. La

navegación se define como un conjunto de enlaces que hacen referencia a las secciones
de una página o un sitio, pero no todos los enlaces son candidatos de pertenecer a un
elemento <nav>: una lista de enlaces a patrocinadores o los resultados de una
búsqueda, no forman parte de la navegación principal, sino que corresponden con el
contenido de la página.
Como ocurre con los elementos <header>, <footer> y el resto de nuevas etiquetas,
no estamos obligados a utilizar un único elemento <nav> en toda la página. Es posible
que tengamos una navegación principal en la cabecera de la página, una tabla de
contenidos o enlaces en el pie de la página, que apuntan a contenidos secundarios.
Todos ellos son candidatos a pertenecer a un elemento <nav>.
En el navegador:
La Etiqueta <Footer>
Según la especificación, un elemento <footer> representa lo siguiente:
Representa el pie de una sección. Un pie tradicionalmente contiene información acerca

de su sección, como quién escribió el contenido, enlaces relacionados, copyright y
similares.
Al igual que ocurre con el elemento <nav>, podemos tener tantos elementos <footer>
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie
principal, que contiene los avisos legales (privacidad, condiciones del servicio,
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que
pueden ir incluidos en un elemento <nav>.
En el navegador:
60 @EdgarMSA
La Etiqueta <Article>
Según la especificación, un elemento <article> representa lo siguiente:
Este elemento representa un contenido completo, auto-contenido en un documento,

página, aplicación o sitio web, que es, en principio, independiente de ser distribuido y
reutilizado.
Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene
significado en sí mismo, y que puede ser distribuido y reutilizado en otros formatos de
datos. No nos referimos únicamente a contenidos clásicos de texto, sino que incluso un
contenido multimedia con su transcripción, un mapa o email pueden ser totalmente
válidos para ser incluidos en una etiqueta <article>.
En el navegador:
La Etiqueta <Section>
A diferencia del elemento <article>, este elemento es utilizado para dividir el
documento (o artículos) en diferentes áreas, o como su propio nombre indica, en
secciones. Según la especificación, un elemento <section> representa lo siguiente:
Representa una sección genérica de un documento o aplicación. Una sección, en este
contexto, es un grupo temático de contenido, que generalmente incluye una cabecera.
Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro
documento en secciones, que incluyen contenido de temáticas diferentes entre sí.
En este caso, la etiqueta <div> no nos aporta ningún significado semántico, tan sólo
estructural. La etiqueta <section> es la encargada de añadir semántica en estos casos:
En el navegador:
62 @EdgarMSA
La Etiqueta <Aside>
Según la especificación, un elemento <aside> representa lo siguiente:
Una sección de una página que consiste en contenido tangencialmente relacionado con
el contenido alrededor del elemento, y puede considerarse separado de este
contenido. Estas secciones son normalmente representadas como elementos laterales
en medios impresos. Este elemento puede utilizarse contener citas, anuncios, grupos de
elementos de navegación y cualquier otro contenido separado del contenido principal
de la pagina.
Dentro de un artículo, por ejemplo, puede ser utilizado para mostrar contenido
relacionado como citas u otros artículos relacionados.
En el navegador:
La Etiqueta <Figure>
Según la especificación, un elemento <figure> representa algún contenido de flujo,
opcionalmente con un título.
La etiqueta se puede utilizar para anotar ilustraciones, diagramas, fotos, listas de

códigos, etc. Esto incluye, pero no se limita a, contenido al que se hace referencia en
la parte principal del documento, pero que podría, sin afectar el flujo del documento,
alejarse de ese contenido primario, por ejemplo, al lado de la página, a páginas
dedicadas, o a un apéndice.
Hasta ahora, no había una manera correcta de poder añadir un subtítulo o una leyenda
a un contenido concreto, como explicar una figura o atribuir una imagen a un fotógrafo.
Gracias a la etiqueta <figure> podemos contener una imagen (o un vídeo, ilustración
o bloque de código) en un elemento y relacionarlo con un contenido concreto:
64 @EdgarMSA
En el navegador:
En conveniente recordar que el atributo alt indica el texto a mostrar cuando la imagen
no está disponible, y no está pensada para contener una descripción de la imagen, y
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption>.
La Etiqueta <Main>
La etiqueta <main> representa el contenido principal del <body> de un documento
o aplicación. El área principal del contenido consiste en el contenido que está
directamente relacionado, o se expande sobre el tema central de un documento o la
funcionalidad central de una aplicación. Este contenido debe ser único al documento,
excluyendo cualquier contenido que se repita a través de un conjunto de documentos
como barras laterales, enlaces de navegación, información de derechos de autor, logos
del sitio y formularios de búsqueda (a menos, claro, que la función principal del
documento sea un formulario de búsqueda).
En el navegador:
66 @EdgarMSA
Multimedia en HTML5
En HTML5 se pretende que el contenido multimedia, (audios y vídeos) formen parte

de la página y dejen de ser unos elementos incrustados. Se pretende por tanto que los
nuevos navegadores se adapten a ello e incorporen recursos para poder reproducir este
contenido sin tener que usar plugins externos.
De momento pocos son los navegadores que permiten reproducir audios o vídeos en
los formatos más habituales sin utilizar plugins externos, por lo que deberemos seguir
usando la forma habitual de insertarlos hasta que la mayoría de ellos los pueda
reproducir.
Etiquetas audio y video

Dos nuevas etiquetas para incrustar contenido multimedia directamente: <audio>
</audio> y <video> </video>.
Estas etiquetas pretenden simplificar la inserción de contenido multimedia, evitando
tener que usar plugins en el navegador. Es el propio navegador el que debe reconocer
el formato multimedia y ponerlo en marcha.
Atributos de las Etiquetas Multimedia a Tener en Cuenta
SRC: Al igual que con las imágenes indicamos en este atributo la ruta del archivo.
AUTOPLAY: Indica que el archivo debe reproducirse automáticamente al cargarse la
página. Este atributo no tiene valores.
CONTROLS: Indica que deben mostrarse los controles para que el usuario pueda iniciar,
detener, pausar el archivo. Este atributo no tiene valores.
LOOP El archivo vuelve a reproducirse cuando acaba, una y otra vez. Este atributo
tampoco tiene valores.
AUTOBUFFER El archivo tiene que descargarse completamente antes de empezar a
reproducirse. Al igual que los anteriores no necesita valores.
POSTER: (Solo para video)El atributo poster indica la imagen que el navegador debe
mostrar mientras el vídeo se está descargando, o hasta que el usuario reproduce el vídeo
MUTED: El atributo muted, permite que el elemento multimedia se reproduzca
inicialmente sin sonido, lo que requiere una acción por parte del usuario para recuperar
el volumen.
HEIGHT, WIDTH: (Solo para video) Los atributos height y width indican al navegador
el tamaño del vídeo en pixels. Si no se indican estas medidas, el navegador utiliza las
medidas definidas en el vídeo de origen, si están disponibles.
PRELOAD: Es posible indicar al navegador que comience la descarga del vídeo antes de
que el usuario inicie su reproducción.
 Preload=auto: se sugiere al navegador que comience la descarga.
 Preload=none: se sugiere al navegador que no comience la descarga hasta que
lo indique el usuario.
 Preload=metadata: este estado sugiere al navegador que cargue los metadatos
(dimensiones, fotogramas, duración...), pero no descarga nada más hasta que el
usuario lo indique.
Veamos con algunos ejemplos cómo se puede escribir el código:
La Etiqueta <Source>
No todos los navegadores soportan todos los formatos de audio o video, por lo que
podemos poner en la página enlaces al mismo archivo en varios formatos, para que el
navegador detecte el formato que soporta. Para ello utilizamos la etiqueta <source>
como en el siguiente ejemplo:
La etiqueta es válida tanto para audio como para video. Dentro de la etiqueta <source>
indicamos la ruta a diferentes archivos, y el tipo de archivo que es. El navegador
intentará reproducir el archivo indicado en la primera etiqueta, si no lo consigue pasará
a la segunda, y así sucesivamente hasta que consiga reproducir alguno de ellos.
68 @EdgarMSA
La Etiqueta <Video>
Una de las mayores ventajas de la Etiqueta <video> de HTML5, es que, finalmente,
están totalmente integrados en la web. Ya no es necesario depender de software de
terceros, y esto es una gran ventaja.
A pesar de que la etiqueta <video> se presenta como una alternativa de flash, sus
funcionalidades van mucho más allá.
En el navegador:
La etiqueta <Audio>
El elemento multimedia <audio> es muy similar en cuanto a funcionalidad al elemento
video. La principal diferencia existe al indicar el atributo controls. Si lo especificamos, el
elemento se mostrará en la página juntamente con los controles. Si no lo hacemos, el
audio se reproducirá, pero no existirá ningún elemento visual en el documento. Por
supuesto, el elemento existirá en el DOM y tendremos acceso completo a su API desde
JavaScript.
En el navegador:
70 @EdgarMSA

Guia Diseño WEB

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Diseño WEB

Cargado por

Copyright:

Formatos disponibles

[FECHA]

Definición breve: HTML (HyperText Markup Language) es el lenguaje utilizado para la

¿Qué significa HTML y que es?

HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en inglés

¿Para qué sirve HTML?

Las diferentes versiones del HTML

Con el paso del tiempo el lenguaje HTML ha cambiado significativamente. En la primera

Las que tienen una apertura y un cierre

Etiquetas con Apertura y cierre

Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre,

“los que no se cierran explícitamente” Este segundo grupo de etiquetas no requieren de

Etiquetas sin etiqueta de cierre

Ahora volviendo al ejemplo de la etiqueta <img> es necesario indicar en forma de un

Resultado al abrir con el navegador:

Es importante mencionar que (aunque funciona) esta no es la manera correcta de escribir

Esta es la estructura básica mínima de un documento HTML, la primera línea indica el

En el artículo anterior echamos un vistazo a la estructura de un documento HTML y

El HEAD es la parte donde se incluye la información acerca del documento, podríamos

o haciendo referencia a un documento externo el cual contiene el código script a

Un comentario es una etiqueta HTML con un formato muy especial:

Organizar el texto en HTML

El texto en una página web se teclea habitualmente en párrafos. En el lenguaje HTML

<p> significa "comienzo del párrafo";

Crear una línea nueva

Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /

Enlaces o hipervínculos en HTML

Abrir un enlace en otra pestaña del navegador

Crear un enlace mediante una imagen

Como podemos observar insertamos el elemento HTML <img> en el lugar donde

Listas ordenadas en HTML

El título de la tabla <caption>

El encabezado de la tabla <thead>

El pie de la tabla <tfoot>

Nota: las etiquetas mencionadas tales como <table>, <caption>,

La etiqueta <div></div> permite crear cajas contenedoras de otros elementos. Esta

Diferenciando las etiquetas div y span

 ID: permite establecer un identificador único para el bloque. Así podremos

En HTML, un formulario es una sección del documento destinada a que el usuario

Nota: El signo # (numeral). Como valor en un atributo, no hace nada. Se

Los elementos de formulario como botones y cuadros de texto también se denominan

Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked.

Botón de Reseteo del Formulario

Utilizando solamente las etiquetas <form> y <input> es posible diseñar la mayoría de

Otros Elementos de Formulario

La etiqueta <input> permite crear tipos diferentes de controles de un formulario. Sin

Formularios en la Era de HTML5

Fechas, Meses, Semanas, Horas.

En la mayoría de campos de fecha se pueden limitar mínimo y máximo de fechas con

Números, Directo o Sliders: Number & Range

 min=”1″ define el mínimo valor aceptado por el campo.

Nuevas Etiquetas Semánticas

En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000

Estructura de un Documento HTML5

Estructura Tradicional de un Documento En HTML5

Un grupo de navegación o contenido introductorio. Un elemento header

El elemento <nav> ha sido diseñado para identificar la navegación de un sitio web. La

Representa el pie de una sección. Un pie tradicionalmente contiene información acerca

Este elemento representa un contenido completo, auto-contenido en un documento,

La etiqueta se puede utilizar para anotar ilustraciones, diagramas, fotos, listas de

En HTML5 se pretende que el contenido multimedia, (audios y vídeos) formen parte

Etiquetas audio y video

Atributos de las Etiquetas Multimedia a Tener en Cuenta

También podría gustarte