Scribd
Cargar
16 vistas136 páginas

HTML v7.0

Cargado por

raulmg.17405
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
16 vistas136 páginas

HTML v7.0

Cargado por

raulmg.17405
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 136

Lenguaje de marcas HTML5

1
HTML
HTML (HyperText Markup Language) es el primer
lenguaje que una persona debe conocer si desea
comenzar a realizar páginas web. HTML no es un lenguaje
de programación, sino una lenguaje descriptivo, una serie
de etiquetas que el navegador interpretará de una u otra
forma para mostrar distintos contenidos por pantalla.

 HTML es un lenguaje sencillo preparado para presentar


información.

Es un lenguaje de marcas o etiquetas que permiten
estructurar el documento, así como dar formato al
texto

Permite insertar hipertexto; es decir la posibilidad que
determinadas palabras marcadas de forma especial
permitan abrir un documento relacionado con ellas.

2
3
Herramientas HTML
 Para escribir HTML bastaría con un editor de texto plano como el
bloc de notas de Windows o gedit de Linux.

 Sin embargo lo ideal es trabajar mediante editores de código


capaces de entender el lenguaje y colorear de diferente manera
las etiquetas HTML para distinguirlas del texto normal y así
trabajar mejor. Algunos populares son Notepad++ , Sublime
Text o Atom

 Otra forma es trabajar con editores WYSIWYG (What You See Is


What You Get, lo que se ve es lo que se obtiene), en los que se
edita el documento al estilo de los procesadores de texto. De
modo que se ve el resultado sin tocar el código y es el editor el
que traduce el resultado al código correspondiente.
(Dreamweaver, Frontpage,…)

 Los archivos HTML por lo general, tienen la extensión .html o .htm

4
Normalización. Versiones
de HTML
 Los programas capaces de traducir el código HTML y
producir una salida en pantalla de los mismos son los
navegadores (browsers en inglés). Se trata de un
software gráfico que se inició con la creación de Mosaic a
principios de los 90 y que poco a poco produjo más
productos hasta llegar a una guerra de navegadores a
finales de los 90 entre Internet Explorer de Microsoft y
Navigator de Netscape que ganó Microsoft pero que
ahora continúa con otros navegadores como el propio
Internet Explorer, Mozilla Firefox, Google Chrome,
Opera o Apple Safari entre otros.

 El problema surgió en cuanto unos navegadores


incorporaron elementos HTML que el resto no traducía, con
lo que aparecieron diferentes dialectos HTML. Así una
página se podía mostrar de forma totalmente diferente
según el navegador.

5
Normalización. Versiones
de HTML (II)
 La solución pasó por intentar estandarizar el
lenguaje. Por ello el propio Tim Bernes Lee
(creador de HTML) fundó la World Wide Web
Consortium (abreviado W3C) como
organismo de estandarización del lenguaje
HTML ante la industria.

6
Normalización. Versiones
de HTML (III)
HTML5 es una combinación de:

•
nuevas etiquetas de markup (lenguaje) HTML,
•
propiedades CSS3,
•
JavaScript y
•
algunas tecnologías complementarias de apoyo

 Para ello identificar un documento escrito en HTML5


veremos al comienzo:

7
Lenguaje de marcas HTML5

Parte I: Estructura de un
documento HTML

8
Formato de las etiquetas
HTML5
 Un documento HTML está formado por elementos,
donde cada elemento se compone de tres partes: una
etiqueta inicial, el contenido del elemento, y una
etiqueta final.

 Alguna etiquetas contienen atributos: Los atributos


proporcionan información adicional acerca de los
elementos HTML.

9
Estructura de una página
 El cuerpo (llamado
body en inglés)
contiene todo lo que el
usuario ve en su
pantalla y la cabecera
(llamada head en
inglés) contiene todo
lo que no se ve (con la
única excepción del
título de la página, que
los navegadores
muestran como título
de sus ventanas).

10
Estructura de una página
(II)

<head> y </head>. Cabecera de la pagina,


contiene identificación e información del
documento
puede contener
<link>, <style>, <script> <meta>
<title>

El cuerpo del documento contiene la


información propia del documento (el texto
de la página, las imágenes, los formularios,
etc) Todo lo que se visualiza en la pantalla.

11
Estructura de una página
web HTML5 (I)

 Según los estándares del HTML, cada documento del HTML


requiere un tipo de declaración del documento. El "DOCTYPE"
comienza el documento del HTML y le dice a un Validator qué
versión del HTML utilizar en la comprobación de sintaxis del
documento.

 En concreto la primera línea aquí puesta indica que el


documento se va a escribir en HTML5

12
Estructura de una página
web HTML5 (II)
 El elemento html que marca la raíz de la página debe
especificar el lenguaje en el que está escrita (atributo
lang).

 Con lang aseguramos que todos los navegadores


quedan avisados sobre el lenguaje utilizado.
 El lenguaje español se puede indicar con es

simplemente o con más detalle usando es-ES que es


el símbolo internacional de español de España.

13
Estructura de una página
web HTML5 (III)
 Dentro del elemento head que marca el inicio
de la cabecera debemos incluir la etiqueta
meta que advierte sobre el sistema de
codificación del texto de la misma.

 En el código mostrado se utiliza el más


recomendable, que es UTF-8, Unicode de 8 bits

14
Comentarios
 En HTML, los comentarios tienen la siguiente sintaxis:

<!-comentario de una línea -->

<!-primera línea del comentario


segunda línea del comentario -->

 Los comentarios son ignorados por el navegador y por


tanto no son mostrados al usuario que visualiza la
página. No obstante, es importante cuidar lo que se
escribe en los comentarios ya que todo navegador hoy
en día permite acceder al código HTML de la página y
ver qué se ha escrito ahí.

15
Elementos de la cabecera:
HEAD
Los elementos factibles de incluir en el <HEAD> son:
 <TITLE> … </TITLE>

Title es obligatorio en las páginas web, sirve para indicar
el título de la página (que los navegadores suelen
mostrar en la barra de título de la ventana de la página).

Es un elemento muy importante porque los buscadores
otorgan a su texto prioridad en las búsquedas que se
realizan.
 <SCRIPT> … </SCRIPT>
 Se utiliza para incluir programas al documento. En
general se tratan de Javascripts.

16
Elementos del HEAD (II)

 <STYLE> … </STYLE>
 Especifica un estilo CSS para ser utilizado en el
documento.
 <LINK> … </LINK>
 Permite invocar a un recurso externo a la página con
el fin de incorporar a dicha página el contenido del
recurso.

17
Elementos del HEAD (III)
 <META/>
 La etiqueta meta permite indicar información extra a la
página web. Esta información no es útil para el usuario
final ya que no se muestra durante la visualización de la
página, pero es muy útil para los buscadores. Con esta
información es con la que indexan las páginas web.
 Por ejemplo, permite especificar información de interés
como: autor, fecha de publicación, descripción, palabras
claves, etc.
 Tiene etiqueta de inicio pero no de fin.
 Sus atributos son:

18
Ejemplo completo
META

19
Cuerpo del documento:
body
 El cuerpo de un documento HTML almacena el
contenido de la página Web, el cual puede presentarse
en el navegador de multitud de formas (textual, gráfica,
en forma de audio).

 Para aquellos navegadores que presentan visualmente


la información, puede verse el cuerpo del documento
como un lienzo donde se irán pintando textos,
imágenes, colores, gráficos, sonidos, etc.

 El cuerpo del documento viene delimitado entre las


etiquetas <body> y </body>.

20
Cuerpo del documento:
body
 Además, hay que tener presente que todos los
atributos de presentación del cuerpo están
desaprobados.

 Ahora todos los atributos que sirvan para


perfilar el aspecto de cada parte de la página
web se indicarán mediante hojas de estilo CSS

21
Cuerpo del documento:
body

22
Etiquetas disponibles en
HTML5
 Ver chuleta en aulavirtual

23
Ejercicio de clase
 Abre el editor de HTML que mas te guste y escribe el
siguiente código escrito en HTML5

24
Lenguaje de marcas HTML5

Parte II: Presentación de texto

25
Presentación de
contenidos
 A continuación estudiaremos las etiquetas utilizadas
para dar formato al texto y por tanto crear distintos
tipos de presentación de contenidos. Algunas etiquetas
se usan desde la primera versión de HTML y otras se
han introducido más recientemente en HTML5.
 En esta parte vamos a ver en orden sucesivo:
 cómo teclear párrafos;
 cómo organizar la página con títulos;
 cómo resaltar palabras determinadas en el texto;
 cómo organizar la información en listas.
 Cómo organizar la información en tablas.

26
Párrafos
 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>¡Hola y bienvenidos a mi sitio!</p>

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


 </p>significa "fin del párrafo";
27
Crear una línea nueva
 En HTML si presionáis la tecla Enter no se crea una línea
nueva en la forma en la que estáis acostumbrados. Así
que probad este código:

28
Crear una línea nueva
 ¡Todo el texto se muestra en la misma línea aunque haya
un salto de línea en el código! Darle a la tecla del Enter
frenéticamente en el editor de texto, por lo tanto, no sirve
de nada.

 Como podríais esperar, sin embargo, existe por supuesto


una forma de empezar una línea nueva en HTML.

 De hecho, si queréis teclear un párrafo nuevo solo


necesitáis usar una segunda etiqueta <p>. ¡Así que al
final vuestro código HTML debería estar lleno de etiquetas
de párrafos!

29
Crear una línea nueva

30
Crear una línea nueva
 ¿Qué pasa si solo quiero pasar a la línea siguiente en un
párrafo dando comienzo a una línea nueva?
 ¡Hay una etiqueta que se llama «salto de línea»! Es una
etiqueta huérfana que solo se usa para indicar el salto
de línea: <br />. La tenéis que colocar dentro de un
párrafo.

31
Líneas horizontales
 Si queremos hacer una ruptura entre párrafos y que
esta se resalte mediante una línea horizontal usaremos
la etiqueta vacía hr:

<p>Primera línea </p>


<hr/>
<p>Segunda línea</p>

32
Espacios en blanco
 Otro detalle adicional a tener en cuenta es el de los
espacios en blanco.

 En HTML una sucesión de espacios en blanco,


introducidos mediante la barra espaciadora, será
visualizada por el navegador como un solo espacio en
blanco.

 Aunque se debe evitar la tendencia de utilizarlos para


formatear, puede introducirse de manera efectiva una
sucesión de espacios en blanco a través del carácter
especial &nbsp;. No obstante, su uso no está orientado
al formateo de texto, sino a impedir que el navegador
introduzca un salto de línea entre dos palabras
determinadas.

33
Espacios en blanco
 Así mismo, debe evitarse el uso de elementos P vacíos o
elementos P conteniendo sólo el carácter especial
&nbsp; para formatear el texto.

Prueba a escribir esto en


el bloc de notas. Guarda
con el nombre
ejemplosinespacios.html
en tu memoria externa.

34
Espacios en blanco
 La entidad &nbsp; permite añadir un espacio en blanco
obligatorio. Por lo que si, por ejemplo, la escribimos
cuatro veces seguidas, estaremos dejando cuatro
espacios en blanco que el navegador sí tendrá en
cuenta.

35
Encabezado de secciones
 Las páginas HTML habituales suelen tener una estructura
más compleja que la que se puede crear solamente
mediante párrafos. De hecho, es habitual que las páginas
se dividan en diferentes secciones jerárquicas.

 Los títulos de sección se utilizan para delimitar el


comienzo de cada sección de la página.

 HTML permite crear secciones de hasta seis niveles de


importancia. De esta forma, aunque una página puede
definir cualquier número de secciones, sólo puede incluir
seis niveles jerárquicos.

36
Encabezado de secciones
 Las etiquetas que definen los títulos de sección son
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

 La etiqueta <h1> es la de mayor importancia y por


tanto se utiliza para definir los titulares de la página.

 La importancia del resto de etiquetas es descendiente,


de forma que la etiqueta <h6> es la que se utiliza para
delimitar las secciones menos importantes de la página.

 Al igual que la etiqueta <p>, las etiquetas de título de


sección son elementos de bloque

37
Encabezado de secciones

38
Resaltado básico de
caracteres
 Son elementos que permiten marcar el texto de forma
especial (elementos en línea)
 Enfatizar


Para enfatizarel texto, tenéis que usar la etiqueta
<em> </em>.

Es muy simple de usar, ¡todo lo que tenéis que hacer
en encerrar las palabras a enfatizar dentro de estas
etiquetas!
 Enfatizar considerablemente
Para enfatizar considerablemente un texto, podéis
usar la etiqueta <strong> que significa «énfasis
fuerte» o si preferís «importante». Se usa
exactamente de la misma forma que <em>

39
Resaltado básico de
caracteres

40
Etiquetado por contenido
 Según el tipo de contenido a presentar, podemos
utilizar una de las etiquetas que aparecen a
continuación.
 El navegador formateará el texto con unos atributos
predeterminados:

41
Listas
 Las listas permiten crear párrafos agrupados y
alineados mediante símbolos como viñetas o números y
además crean párrafos alineados de forma especial
para su correcta visibilidad.

 Las listas con viñetas se deben englobar dentro de un


elemento ul (de unordered list, lista no ordenada),
después cada párrafo de la lista estará dentro de
elementos de tipo li (de list item, elemento de lista).

42
Listas
 Las listas numéricas aparecen dentro del
elemento ol (de ordered list, lista ordenada),
después cada párrafo de la lista estará dentro
de elementos de tipo li, al igual que las
anteriores. La diferencia ahora es que cada
párrafo con li, aparece con un número y no
con una viñeta. Ejemplo:

43
Listas
 El tipo de viñetas o de numeración empleada se puede
modificar aplicando hojas de estilos CSS a los elementos
de la lista.

 Los elementos de la lista son elementos de bloque.

44
Ejercicio de clase
 f

45
Listas anidadas
 Es posible meter unas etiquetas con otras, por ejemplo:

46
Listas anidadas

47
Ejercicio de clase
 Haz una lista ordenada con los nombres: Desayuno,
almuerzo, Merienda y Cena.

 Ahora debajo de cada uno de los apartados anteriores


coloca otra lista (desordenada) con los alimentos a
consumir en cada una de esas comidas.

48
Listas de términos
 Permite crear una lista de definiciones de términos. En
ellas se indica el término a definir y su definición.
Etiquetas: dl para comenzar la lista y dt junto con dd
para cada término.

49
Tablas
 La definición de una tabla comienza con la etiqueta table,
por cada fila se indica tr y por cada columna se indica td.

 En HTML 5 y XHTML a la etiqueta table sólo se le permite el


atributo border para indicar la anchura del borde de la tabla
(además de, por supuesto, los atributos comunes a todos los
elementos de HTML como id).

 El número indicado en border se refiere a píxeles.

 Utilizaremos <tr> cada vez que comience una fila de la tabla


y dentro de dicha fila una etiqueta <td> para cada celda.

50
Ejemplo tabla

51
Celdas de cabecera <th>

52
Ejercicio de clase
 Realizar el código HTML5 para la siguiente tabla:

53
Títulos en las tablas
 Puede especificarse el título de una tabla mediante el
elemento CAPTION.
 Este elemento sólo puede ir inmediatamente después
de la etiqueta de inicio del elemento TABLE y sólo
puede haber uno.

54
Combinar celdas
 La combinación (unión) de celdas se realiza a través de los
atributos rowspan y colspan de los elementos TH (table
header) y TD (table data). Cuando se le asigna un valor mayor
que 1, se está indicando el número de filas (rowspan) o
columnas (colspan) que debe ocupar dicha celda. Dicho de
otra manera, se unen varias celdas consecutivas (en
horizontal o vertical) creando una macro celda.

55
Ejemplo: combinar celdas

56
Ejercicio de clase

57
Tablas dentro de tablas
 Para generar tablas aún más complejas, se pueden
meter elementos table, dentro de otras tablas. Lo que
se hace es meter una etiqueta table (con todos sus
elementos de fila y columna) en un td o th.

58
Lenguaje de marcas HTML5

Parte III: Hiperenlaces

59
Enlaces
 Dentro de una página web se pueden colocar enlaces que permitan
cuando arrimamos el ratón hacer clic y que se cargue y se lance el
destino de una URL.

 Podéis crear un enlace para ir de la página a.html a la página b.html,


pero también podéis crear un enlace a otro sitio web, por ejemplo
http://www.google.com. Veremos que ambos casos funcionan de la
misma forma.

 La etiqueta que permite realizar enlaces es la etiqueta a. El atributo


href permite indicar la URL a la que se realiza el salto. Ejemplo:

 la palabra Tiberio estará remarcada de modo que al hacer clic


saltaremos a la URL

http://es.wikipedia.org/wiki/Tiberio.

60
Enlaces
 Ese ejemplo muestra un salto absoluto, es decir el
enlace nos lleva a una dirección URL global. Pero es
posible que el salto nos dirija a un recurso presente en
nuestro propio servidor. Ejemplos:

61
Resumen gráfico enlace a
otra página de mi sitio web

62
Atributos del elemento a
 Realmente el único de obligado uso es href, pero es posible utilizar los
siguientes atributos (además de los atributos comunes a todas las etiquetas
comentados anteriormente):

 El atributo target indica donde se abrirá el documento del enlace:

<a target="_blank|_self|_parent|_top|framename">

63
Enlaces
 Los enlaces pueden apuntar directamente a documentos
PDF, Word, etc.

<a
href="http://www.ejemplo.com/informe.pdf">Descargar
informe completo [PDF]</a>
<a
href="http://www.ejemplo.com/informe.doc">Descargar
informe completo [DOC]</a>

 Un truco muy útil con los enlaces es el uso de URL


relativas para poder volver al inicio del sitio web desde
cualquier página web interior:

<a href="/">Volver al inicio</a>

64
Enlaces
 Puede utilizarse el protocolo mailto dentro de la URL de
un hipervínculo para especificar que se desea enviar un
correo electrónico.

<a href="mailto:[email protected]" title="Dirección


de email para solicitar más información"> Solicita más
información </a>

 Cuando se hace clic sobre un enlace de este tipo, el


sistema operativo abre el programa de correo
electrónico especificado por defecto y añade la dirección
de destino de manera automática.

 La sintaxis es la misma que la de un enlace normal,


salvo que se cambia el prefijo http:// por mailto:

65
Ejercicio de clase
 Vamos a crear una carpeta y dentro de ella 2
ficheros html. Uno de ellos index.html y el otro
enlaces.html

 Desde index.html se dará la posibilidad de


saltar al fichero enlaces.html

 Desde enlaces.html podremos saltar a la


página de inicio index.html y también
incluiremos un par de enlaces a webs de
medios informativos.

66
Enlaces internos
 Hay un estilo de enlace que permite saltar a un punto
concreto del documento. Se realiza de esta forma:

 (1) Se marca una posición en el documento usando la


etiqueta que queramos o creando una nueva con <div>
y poniendo a esa etiqueta el atributo id al que se le
indica un identificador que servirá de marcador de la
posición. Ejemplo:

<div id=“salto1"></div>

 (2) Ponemos el enlace donde deseemos e indicamos en


el atributo href el nombre del marcador indicado, pero
anteponiendo al nombre el símbolo de la almohadilla
(#). Ejemplo:

67
Enlaces internos

68
Enlaces internos a páginas
distintas
 Por otro lado es posible indicar direcciones de enlace
que salten a una página y dentro de ella se coloque en
una posición marcada, por ejemplo:

 El enlace del ejemplo salta a la página


actividades.html localizada en la ruta indicada y
además se coloca en la posición indicada por la etiqueta
marcada con el valor verano.

69
Ejercicio de clase

70
Enlace en ventana nueva

71
Lenguaje de marcas HTML5

Parte IV: Imágenes

72
Inserción de imágenes
 Las imágenes se insertan en HTML gracias al elemento
IMG. Su uso simple necesita de la especificación de dos
atributos obligatorios:

<img src="URL_imagen" alt="texto_alternativo“/>

 Como se puede observar, IMG sólo tiene etiqueta de


inicio y no de fin.

 El atributo src se utiliza para indicar la URL de la imagen


a cargar (relativa o absoluta) y alt el texto alternativo a
mostrar en pantalla en caso que el navegador no pueda
encontrar la imagen o por ejemplo para para las
personas discapacitadas que no pueden acceder que no
pueden visualizarlas

73
Atributos de <IMG>

74
Atributos heigth y width
 Mediante los atributos height y width se indica el espacio que el
navegador deberá reservar para la imagen.

 En caso de no indicar nuevas medidas el navegador esperará a


que se descargue completamente la imagen para así conocer su
tamaño y continuar con la presentación del resto del
documento.

 Si queremos mostrar una imagen más pequeña que la original


será conveniente retocarla mediante editor de imágenes.

 El valor de la anchura y altura puede indicarse en píxeles


(width=”200”) o en porcentaje (width=”70%”).

75
Consejos uso <IMG>

76
Ejemplo

77
Miniatura clicable
 Si la imagen es muy grande, es recomendable mostrar su vista en
miniatura en tu sitio web.

 Después añade un enlace a la vista en miniatura para que los


visitantes puedan ver la imagen en su tamaño original.

 Existen millones de programas para crear miniaturas de imágenes


(por ejemplo, Easy Thumbnails). Por tanto, tendré dos versiones de
mi foto: la vista en miniatura y la imagen original.

78
Ejercicio de clase
 Descarga una foto de Cartagena y colócala en una
página web.

 Una vez que la visualices modifica el código para que la


imagen a su vez sea un enlace a la página de la
Wikipedia en la que habla de dicha localidad

79
Lenguaje de marcas HTML5

Parte V: Elementos
multimedia

80
Inserción de audio
 La inserción de audio se realiza con las etiquetas <audio> y </audio>.

 Los formatos de audioArchivo que reproduce sonido. soportados son: MP3, WAV
y Ogg.

 Atributos principales de la etiqueta <audio>



autoplay: Indica que el audio se reproduce automáticamente cuando está
listo.

controls: Indica que se muestra controles, como los botones play, pause,
etc.

loop: Indica que el audio se reproduce de nuevo cada vez que termina.

muted: Indica que el audio estará silenciado.
 preload: Indica si el audio carga previamente al tiempo que la página ha
cargado. Los posibles valores de este atributo son “auto” o “none”.
 src: Indica la ubicación del archivo de audio a reproducir.

81
Ejemplo de audio 1
<audio src="miaudio.mp3" autoplay controls loop >
Audio no soportado
</audio>
 En el caso que el navegador no soporte el componente de
audio en vez de este, se le mostrará en pantalla el texto
“Audio no soportado” que hemos puesto adentro.
 Adicionalmente si se quiere agregar más de una fuente de
audio se utiliza la etiqueta <source>
 Agregar múltiples fuentes es útil en el caso que la primer
fuente no se encuentre por algún motivo, entonces tratará de
buscar la siguiente fuente hasta encontrar alguna.

82
Ejemplo de audio 2

83
Inserción de video
 La inserción de video se realiza con las etiquetas <video> y </video>. Al igual que el
audio esta funcionalidad no requiere de la instalación de plugins en el navegador

 Los formatos de video soportados son: MP4, WebM y Ogg.


 Atributos principales de la etiqueta <video>

autoplay: Indica que el video se reproduce automáticamente cuando está listo.

controls: Indica que se muestra controles, como los botones play, pause, etc.

loop: Indica que el video se reproduce de nuevo cada vez que termina.
 muted: Indica que el video estará silenciado.
 preload: Indica si el video carga previamente al tiempo que la página ha cargado.
Los posibles valores de este atributo son “auto” o “none”.
 src: Indica la ubicación del archivo de video a reproducir.
 width: Indica el ancho del video en pixeles.
 height: Indica la altura del video en pixeles.
 poster: indica la ubicación de una imagen que se mostrará mientras el video está
cargando.

84
Ejemplo de video

85
Inserción de video de
Youtube
 Busca el video
 Pulsa compartir
 Elige la opción Insertar <>
 Elige las opciones para el video que vas a insertar en tu
página.
 Pulsa Copiar y pega el código en tu documento HTML

 https://www.ensalza.com/blog/como-insertar-un-video-d
e-youtube-en-tu-pagina-web/

86
Lenguaje de marcas HTML5

Parte VI: Formularios

87
Formularios
 Los formularios se utilizan para establecer una
comunicación con el usuario. A través de ellos, el usuario
selecciona una serie de opciones o rellena información
solicitada enviándola a un determinado programa (suele
conocerse como script) ubicado en un servidor Web. Dicho
programa procesa la información recibida y, generalmente,
devuelva una respuesta al usuario en forma de página Web.

 Como puede observarse, hay dos tecnologías implicadas:


un lenguaje de marcas para definir los formularios (HTML ó
XHTML) y un lenguaje de programación para procesar la
información recibida (PHP, ASP, CGI, etc.).
 Nosotros sólo veremos cómo crear los formularios y no
cómo procesarlos ya que esto último se sale del
propósito del módulo.

88
Formularios
 Por ejemplo podemos colocar cuadros de texto en los
que el usuario pone sus datos y estos pasan a una
página PHP que tendrá la capacidad de recoger dichos
datos y actuar en consecuencia.

 Ejemplo de formulario:

89
Etiqueta FORM
 Todo formulario HTML comienza con una etiqueta form
y dentro de ella se colocan todos los controles del
formulario.

 Fundamentalmente la etiqueta form posee dos


atributos:
 action. Indica el nombre del script que procesará los

datos del formulario. También es válido poner


action=”mailto: [email protected]” para
que los datos sean enviados directamente a una
dirección de correo, aunque no todos los
navegadores lo soportan.

90
Etiqueta FORM
 method. Opcional. Si no se utiliza, el valor por defecto
es get. Indica el método de envío de datos entre el
formulario y el servidor. Puede tener dos valores: get|
post.

El método GET envía los datos a través de la URL mientras
que el método POST envía los datos del formulario en el
cuerpo en el cuerpo del mensaje HTTP.

El método GET tiene un gran inconveniente: la cantidad de
información que puede ser enviada está limitada al tamaño
máximo de la URL que navegador y servidor pueden
manejar. Además, el método GET no soporta el envío de
caracteres que no sean ASCII (cómo "é“ y"©").

El método POST siempre es más seguro y más cómodo. Si
se va a trabajar con URL’s de más de 100 caracteres o que
contengan caracteres no ASCII, el uso del método POST es
imperativo para evitar posibles problemas.

91
Etiqueta FORM

92
Cuadros de texto
 Los cuadros de texto se utilizan para entradas de texto
cortas de una sola línea. Su sintaxis es:

<input type="text" name="nombre" size="tam_caja"


maxlength="max_car" value="texto ">

 Saca en la página un cuadro en el que el usuario puede


introducir texto. Además podemos utilizar estos
atributos:
 name. Nombre del cajetín. Es importante ponerle un

nombre significativo

value. Da un valor inicial al cuadro, se usa para
indicar un texto de ayuda al relleno.

93
Cuadros de texto
 id. Opcional. Identificador del cuadro. La W3C (organismo
que estandariza XML y HTML) recomienda usar id en lugar
de name, pero lo cierto es que PHP recoge los valores
gracias a name, no funciona con id. Por lo que para más
seguridad los diseñadores suelen utilizar ambos atributos.

 size: Opcional. Tamaño del cajetín en caracteres. Es decir,


si size=”7”, el explorador mostrará un cajetín dónde sólo
serán visibles los 7 primeros caracteres que el usuario
escriba.

 maxlength: Opcional. Número máximo de caracteres que


se podrán insertar en el cajetín. No ha de coincidir con
size.

94
Cuadros de texto

95
Label para un campo de
formulario
 Aunque el código anterior produce el efecto deseado de
añadir un par de cuadros de texto a un formulario
anteponiéndoles un texto, la manera correcta de
escribir ese texto sería con la etiqueta <label>

 Si haces clic en el texto «Nombre de usuario»: verás


que el cursor se sitúa automáticamente en el campo de
texto correspondiente.
 Se emparejan con los atributos for e id.

96
Cuadros de contraseñas
 Funcionan como los cuadros de texto, sólo que el
texto que se introduce se oculta, mostrando sólo
puntos o asteriscos. La sintaxis es:

<input type="password" name="nombre" />

 Usa los mismos atributos que los cuadros de


texto. Si usamos método GET, la contraseña es
visible en la parte superior del navegador. Con
POST esto no ocurre, pero aún así podríamos
averiguarla. Por ello lo ideal es pasar cifrada la
contraseña.

97
Cuadro de texto multilinea
 La etiqueta textarea permite coloca un cuadro de texto
de varias líneas para que el usuario puede introducir un
texto largo. El atributo rows permite indicar la altura en
líneas de texto del cuadro y el atributo cols, la anchura
en caracteres (los demás atributos son como los de la
etiqueta input type="text". Ejemplo:

98
Botones
 Los botones son controles del formulario en los que no se
puede escribir y solo reaccionan a movimientos de ratón.

Botón de envío, input type="submit"


 Sirve para llevar a cabo la comunicación entre el
formulario y la página que recoge sus datos. La sintaxis
es:

<input type="submit" value="texto del botón" />

 En cuanto se pulsa este botón, los datos del resto de


controles se envían a la página receptora del formulario
(que se corresponde a la URL indicada en el apartado
action de la etiqueta form).

99
Botones
Botón de restablecer, input type="reset"
 La sintaxis de este botón es:

<input type="reset" value="texto del botón" />

 Este tipo de botones lo que hacen es anular los datos que se


han introducidos en los controles del formulario. Deja todos
los controles en su estado inicial.

Botón genérico, input type="button"


 Un botón genérico se marca indicando type="button" en la
etiqueta type. En los formularios no se usa para enviar o
configurar la información, sino que se utiliza normalmente
para capturar su pulsación (mediante JavaScript es lo más
habitual) y responder en consecuencia.

100
Botones de radio
 Se trata de un control fácil de usar que permite elegir
una de entre varias opciones. Todas las opciones deben
de tener el mismo nombre y sólo cambia el valor de las
mismas. Ejemplo:

 En este caso el valor de la etiqueta input a usar será


radio. El atributo checked (que sólo admite el valor
checked) hace que el botón en el que se usa, aparezca
chequeado por defecto

101
Botones de radio

102
Ejercicio de clase

103
Casillas de verificación
 La diferencia fundamental entre los cuadros de
confirmación y los botones de radio reside en que en el
primero cada opción es independiente del resto y
TODAS podrían estar marcadas (cada cuadro de
confirmación debe tener un nombre diferente con
respecto al resto de cuadros de confirmación), de ahí
que todas puedan llevar el atributo checked.

 En cambio, en los botones de radio sólo se puede


seleccionar UNA de las opciones mostradas (todas las
opciones del mismo grupo deben tener el mismo
nombre), de ahí que sólo una de las opciones del grupo
pueda llevar el atributo checked.

 El valor del tipo en este tipo de entrada es checkbox.

104
Casillas de verificación

105
Cuadro combinado
 Un cuadro combinado permite el uso de una lista de
opciones en la que se puede elegir la deseada.

 Todo cuadro comienza con una etiqueta select que es


la encargada de dar nombre (name) al control.

 Dentro cada opción del cuadro se indica con una


etiqueta option a la que se da valor mediante el
atributo value. Dentro de la etiqueta option se coloca
el texto que verá el usuario.

 El atributo selected: Opcional. Indica si esta opción de la


lista vendrá seleccionada por defecto.

106
Cuadro combinado

107
Cuadro combinado
 Se pueden agrupar opciones dentro del cuadro usando
el elemento optgroup. Ejemplo:

108
Cuadro de selección de
archivo
 Cuando se usa type="file" en una etiqueta input,
entonces aparece un botón que al pulsarle hace
aparecer un cuadro de selección de archivos mediante
el cual podremos elegir un archivo. La ruta local a dicho
archivo es lo que se guarda para ser enviado al sitio o
página que recibe los valores del formulario. Ejemplo:

109
Agrupación de controles,
fieldset
 La etiqueta fieldset permite agrupar controles
para que visualmente sea más cómodo el
relleno de los controles.

 Visualmente los controles aparecerán


recuadrados y se suele utilizar una etiqueta
inmediatamente interior a fieldset que es
legend que contiene el texto que encabezará
al grupo de controles.

110
Agrupación de controles,
fieldset

111
Ejercicio

112
Estructurando páginas
 Las páginas anteriores muestran las decenas de etiquetas HTML
disponibles para marcar y estructurar cada elemento individual de
las páginas web: tablas, listas, enlaces, párrafos, imágenes, etc.
Aunque combinando esas etiquetas es posible crear cualquier página
web, no es posible hacer que las páginas muestren estructuras
complejas.

 La mayoría de páginas HTML disponen de estructuras complejas


formadas por varias columnas de contenidos y otro tipo de
divisiones. Utilizando exclusivamente HTML no es posible crear estas
estructuras complejas, ya que es imprescindible emplear las hojas de
estilos CSS.

 No obstante, los estilos de CSS necesitan la ayuda de HTML/XHTML


para crear los diseños más avanzados. En concreto, el código HTML
se encarga de agrupar los elementos de la página en diferentes
divisiones en función de su finalidad: la zona de la cabecera de la
página, la zona de contenidos, una zona lateral para el menú y otras
secciones menores, la zona del pie de página, etc.

113
Estructurando páginas
 Para agrupar los elementos que forman cada zona
o división de la página se utiliza la etiqueta <div>:

 El nombre de la etiqueta div tiene su origen en la


palabra división, ya que esta etiqueta define zonas
o divisiones dentro de una página HTML.

 Las páginas web complejas que están bien


diseñadas utilizan decenas de etiquetas <div>.
Con mucha diferencia, los atributos más utilizados
con esta etiqueta son id (para identificar la capa
de forma única) y class (para aplicar a la capa
estilos CSS).

114
Estructurando páginas

115
Lenguaje de marcas HTML5

Parte VI: Etiquetas semánticas

116
Etiquetas semánticas
nuevas de HTML5
 Las principales etiquetas HTML5 nuevas no tienen una
representación especial en pantalla. Todas se
comportan como un <div> o un <span>. Pero cada una
tiene un significado semántico superior a un simple div
o span.

 Todos estos elementos no son comprendidos excepto


por navegadores compatibles con HTML 5.

 Estas nuevas etiquetas no significan que ya no se use


<div>. Div siempre debe usarse cuando necesites una
caja con objetivos de diseño gráfico o cualquier cosa
que no tenga significado semántico. Sólo usa las
etiquetas semánticas de HTML5 donde sean necesarias.

117
Estructura típica de una
web
 Ves? Una cabecera arriba,
un menú de navegación a
la izquierda, pie de página
abajo y un bloque lateral a
la derecha para colocar
contenido secundario,
como un calendario,
publicidad o qué se yo. Es
lo típico.

 HTML5 ha definido
etiquetas para algunas de
esas zonas, no por estar
situadas en esas zonas,
sino por el contenido que
poseen dentro
(semánticas, recuerda).

118
Nuevas etiquetas HTML5
 Nuevas etiquetas del
Html5 y cómo se
podrían distribuir
dentro del diseño de
una página web

119
Nuevas etiquetas HTML5

120
<header>
 Hacer cosas como <div id=”header”> es un poco
estúpido cuando el 99% de los proyectos web tienen
una cabecera. <header> está diseñada para
reemplazar la necesidad de crear divs sin significado
semántico.

 Se encargan de indicar a los navegadores que lo que


contienen es la cabecera de la página y que dentro
seguramente llevarán lo típico, algún logotipo, el título
de la página, quizás una descripción de la misma y poco
más.

121
<header>
 Además de los elementos citados, un header podría
contener un menú de ayuda a la navegación, una tabla
de contenidos, un formulario de búsqueda, etc. Su
contenido no es tan extricto.

 Al tratarse de etiquetas semánticas, nos da igual la


posición que ocupen dentro de nuestra página.
 Un header será un header esté donde esté. Quizás

hayas diseñado una web en la que el título y la


descripción de la web junto con algunos enlaces o
ayudas a la navegación los tengas situados en una
barra lateral. Ese bloque continuará siendo un
encabezado o header, pues corresponde con el
significado semántico de header y la posición que
ocupa ya os digo que no nos importa en ese aspecto.

122
<header>
 Además, se puede
utilizar en otras
partes del documento
que necesiten un
subencabezado.

 Por ejemplo, en un
blog, podría haber un
header en la parte
superior, definiendo
el título del sitio y su
autor, y luego otro en
cada artículo.

123
<footer>
 Similar al anterior, sirve para marcar el pie de una
página, sección, artículo etc.

 Se trata de una etiqueta para encerrar todo aquel


código típico de las partes inferiores de las páginas web.

 Contendrán por tanto enlaces a otras webs


relacionadas, al mapa de la web, a una página de
comentarios sobre el copyright, una política del portal,
quizás algo de publicidad, etc.

124
<footer>
 Footer significa pie y aunque se ha creado para
contener lo dicho, no ha de tener que estar en la parte
más baja de una página web para poder ser un footer.

 Tened en cuenta que todas etiquetas intentan informar


a los navegadores sobre lo que pueden contener esos
bloques, no más.

 No olvidemos que el aspecto, apariencia e incluso la


posición dentro de la web son cosas que les importan
un webo a los navegadores. Esas cosas ya las leerán en
la hoja de estilo. El Html5 pretende con estas etiquetas
saber cuál es su contenido, información semántica, no
más. Por tanto, puedes colocar luego esa "capa" donde
te de la real gana dentro de la web.

125
<nav>
 La etiqueta <nav> se usa para marcar una sección del
documento cuya función es la navegación por la página web, o
sea, se trata de una barra de navegación. Más adelante con
CSS se puede dar un formato especial a dichos enlaces.

 nav se puede escribir dentro de cualquier elemento HTML de


sección (como section, article, header, footer,..).

 Incluso puedes colocar cualquier etiqueta dentro, aunque lo


recomendado es usar listas <ul>.

 Esta etiqueta no debe ser usada para marcar todos los grupos
de enlaces, únicamente los bloques principales de navegación
por la página. Por ejemplo, los típicos enlaces que hay en el
pie de página no se deben marcar con <nav>.

126
<section>
 Es un elemento que permite dividir en diferentes partes
o secciones un documento.

 Una sección, en este contexto, es una agrupación


temática del contenido, típicamente con un encabezado.

 Por tanto, define un área de contenido única dentro del


sitio. En un blog, sería la zona donde están todos los
posts.

 Recuerda que no se debe usar para englobar un bloque


cualquiera de código simplemente porque necesitas
encerrarlo dentro de algo para aplicarle así estilos CSS o
algún Script.

127
<section>
 Si el único motivo para encerrar un bloque de código es el
de poder aplicarle lo anterior, no tiene sentido aplicarle
una de estas nuevas etiquetas. En su lugar se puede y
debe usar un DIV de toda la vida.

 La diferencia es sutil pero muy importante: cuando


creamos bloques cuyo contenido forma un todo usaremos
<section/>, cuando estos bloques responden más a diseño
o a necesidades de estructura usaremos <div/>.

 Una regla que podemos usar para saber si un bloque de


código o un elemento de una página web debe encerrarse
entre esta etiqueta es el preguntarse.... si la web fuera un
libro.... estaría ese elemento en el indice inicial del mismo?
Si la respuesta es SI, es buen candidato para section.

128
<article>
 Si se observan los elementos descritos anteriormente
parece claro que HTML 5 utiliza como metáfora la forma de
distribuir contenidos de un periódico. Así hay cabeceras,
pies, secciones y, con este elemento, artículos.

 La idea es colocar dentro de este elemento (que tiene


sentido dentro del elemento section, o incluso aparecer
de forma independiente) es colocar contenido que pueda
ser entendido como un todo que describa un tema de
forma íntegra.

 Esta etiqueta agrupa todos los elementos que forman una


unidad de información, como la entrada de un blog, el
artículo de un periódico, la ficha de un producto en un
catálogo y puede incluir a su vez header, footer y otras
etiquetas semánticas.

129
Ejemplo <section> y
<article>

130
<aside>
 Con las etiquetas <aside> y </aside>, se nos invita a
rodear todo aquel contenido que no es directamente
contenido principal del que estamos hablando o del que
estamos tratando en esa página en concreto. La norma
dice que se use para todo aquel contenido tangencial al
contenido principal de la página.

 Lo usaremos por tanto para todos aquellos elementos


secundarios, como podrían ser los bloques publicitarios,
enlaces externos, citas, un calendario de eventos, etc,
siempre claro que no encontremos otra etiqueta más
acorde de entre las ya comentadas.

 Para que este texto aparezca de manera especial, debe


dársele formato con CSS.

131
<aside>

132
133
<hgroup>
 En muchas ocasiones es habitual encontrarnos con el
título de la página web con una breve descripción o
definición o lema de la página bajo él. Es muy típico por
ejemplo en los blog tipo WordPress.

 Pues HTML5 ha previsto ese caso y ha decidido crear la


etiqueta <hgroup> con su etiqueta de cierre </hgroup>
para encerrar casos como ese, en los que se podría
definir el título de la web con un <h1> y una
descripción bajo el mismo con una etiqueta <h2>.
Cualquier agrupación de titulares definidos con <h...>
seguidos deberíamos encerrarlos entre <hgroup> y
</hgroup>.

134
<figure> y <figcaption>
 <figure> sirve para agrupar los elementos relativos a
una imagen como la propia imagen (elemento img), el
título de la misma, el pie, los párrafos relativos, etc.
 Permite indicar el título de una imagen, dentro de un
elemento figure.

135
Ejemplo
 http://davidyeiser.com/

136

También podría gustarte