Scribd
Cargar
18 vistas

02-Introducción A HTML

apuntes de introducción a HTML

Cargado por

jandroman24
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
18 vistas

02-Introducción A HTML

apuntes de introducción a HTML

Cargado por

jandroman24
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/ 109

LENGUAJES DE MARCAS Y

SISTEMAS DE GESTIÓN DE
INFORMACIÓN
TEMA 2: HTML

Mª Isabel Torres Carazo


RECURSOS

• www.w3schools.com
• www.desarrolloweb.com
• https://developer.mozilla.org/es/docs/Web/html
Software a usar
✓Editor de textos plano: Bloc de notas, gEdit, Sublime text, Notepad++, VSCode

Programas específicos para creación de páginas web: modo visual (WYSIWYG)

✓Un navegador: Chrome, Firefox, Ópera, etc. (actualizado)


HTML

• HyperText Markup Language (Lenguaje de Etiquetas de Hipertexto)


• Conjunto de etiquetas que se van intercalando entre el texto de forma que
los programas que utilizamos para navegar por la red sepan qué es lo que
tienen que mostrar cuando accedemos a una página y cómo deben
presentarlo en la pantalla.
• NO es un lenguaje de programación NO realiza acciones.
CLIENTE - SERVIDOR
SITIO WEB

• Un sitio web (en inglés: website) es un conjunto de páginas HTML:


• Relacionadas entre sí por hiperenlaces.
• Gestionadas por una única entidad o persona.
• Accesibles desde Internet a partir de una dirección URL de su página índice (index).
• Con una unidad de contenido (HTML) y de estilo gráfico (CSS).
• Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web.
• Normalmente no se diseña una página web aislada sino más bien un sitio completo
donde a partir de una página principal o índice se enlazan el resto de las páginas.
ESTRUCTURA DE CARPETAS
• Los nombres de carpetas y archivos
• Para evitar errores hay que respetar las siguientes NORMAS cuando se
asigna un nombre a las carpetas o archivos:
• El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9
• No debe contener caracteres no alfanuméricos, signos de puntuación,
espacios en blanco, caracteres acentuados, eñes, etc.
• Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el
guión –
• Aunque una URL puede contener unos 2000 caracteres, los nombres de los
archivos deben ser breves: no más de 4 ó 5 palabras (30-50 caracteres)
• Utilizar siempre letras minúsculas, aunque se admitan mayúsculas. Hay
servidores que distinguen entre mayúsculas y minúsculas (Linux). Esto
significa que la página INDEX.html no es la misma que la página index.html.
• Para las páginas HTML utilizar siempre la extensión: *.html aunque se
admita la *.htm
• Reserva el nombre index.html para la página que deseamos se muestre por
defecto cuando el usuario navega hasta la carpeta principal del sitio web sin
indicar un archivo html concreto.
Mi primera página web – HTML
Vista de código
<HTML>

<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>

<BODY>
Esta es mi primera página.
</BODY>

</HTML>

** Para habilitar las extensiones: explorador de archivos → Archivo → cambiar


opciones de carpeta → Ver → ocultar extensiones
Mi primera página web –RESULTADO
Vista final
ESTRUCTURA DE UNA PÁGINA WEB (I)
ESTRUCTURA DE UNA PÁGINA WEB (II)
ESTRUCTURA DE UNA PÁGINA WEB (III)
ESTRUCTURA DE UNA PÁGINA WEB (IV)
ESTRUCTURA DE UNA PÁGINA WEB (V)
ESTRUCTURA DE UNA PÁGINA WEB (VI)
ESTRUCTURA DE UNA PÁGINA WEB (VII)
ESTRUCTURA DE UNA PÁGINA WEB (VIII)
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Viewport: da las instrucciones al


navegador sobre cómo controlar las
dimensiones y escala.
• Para el diseño adaptativo, se
establece el ancho del dispositivo
como máximo el contenido de la
web.
• La escala inicial es el nivel de zoom
con el que se carga la página.
ESTRUCTURA DE UNA PÁGINA WEB (IX)

• <meta name=“description” content=“web de • <meta name=“keywords” content=“tienda,


reparación”> Descripción del contenido de la coches,granada”> categorizar páginas con esas
página palabras
• <meta charset=“UTF-8”/> Juego de • <meta name=“author” content=“Isabel”> Autor
caracteres. Hay diferencias en Chrome y de la página
Firefox al mostrar algunos caracteres • <meta name=“viewport”
content="width=device-width, initial-
scale=1.0"> Escala la página según el dispositivo
• <meta http-equiv=“refresh” content=“30”>
refrescar la página cada 30 segundos
Instalación de herramientas
✓Como editor, vamos a usar Visual Studio Code (https://code.visualstudio.com/download)
✓Como navegadores: Firefox, Chrome y Firefox nightly (https://www.mozilla.org/es-
ES/firefox/channel/desktop/)

HACER y ENTREGAR ACTIVIDAD 1


Etiquetas básicas

El contenido de la página se inserta DENTRO de la etiqueta <body>


• <p> Este es un párrafo</p>: Indica un párrafo
• <br />: salto de línea. Hay un espacio después de la etiqueta.
• <hr />: línea horizontal. Hay un espacio después de la etiqueta.
• Espacio: &nbsp; se utiliza cuando no queremos que se rompa un conjunto
de palabras en dos o más líneas. NO es una etiqueta, es un carácter especial.
• <! - - Comentario o texto que se quiere ocultar - - >
HTML no distingue entre mayúsculas y minúsculas, por legibilidad, siempre en minúscula.
HTML no tiene en cuenta los espacios o saltos de línea si no es mediante la inserción de las
etiquetas correspondientes
Etiquetas básicas (II)
Etiqueta Utilidad Resultado
<B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<B> <I> ... </I> </B> Negrita y cursiva Negrita y en cursiva
<DEL>…</DEL> Tachado Este texto no es correcto

<EM> ... </EM> Para dar énfasis. Normalmente es cursiva Hay que poner énfasis en algunas cosas.

<STRONG>...</STRONG> La cosa es importante. Normalmente es negrita Hay cosas importantes.


<ADDRESS> …</ADDRESS> Marca la información de contacto Página escrita por Chris Mills
<SMALL>...</SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1

<ABBR title=“”>HTML</ABBR> Envuelve un acrónimo y permite su expansión.

<MARK> … </MARK> Destaca una palabra o texto Texto marcado


Para marcar horas y fechas en un formato legible por <time datetime="2016-01-20T19:30">7.30pm, 20 Enero
<TIME> … </TIME>
la máquina 2016</time>
Etiquetas básicas (II)

Etiqueta Utilidad Resultado

<Q>…</Q> Pone comillas a una cita <<Pequeña cita>>

<CITE>…</CITE> Citar el título de un trabajo Título de un artículo

<BLOCKQUOTE>…</BLOCKQUOTE> Citas más largas Texto largo del artículo al que hacemos referencia
Para respetar los espacios en blanco (tabuladores
<PRE> … </PRE> o espacios). Letra de ancho fijo. No se ajustan a la
longitud de las líneas (scroll horizontal).
Marca fragmentos genéricos de código
<CODE> …</CODE> Code Texto
informático. No respeta espacios en blanco
Permite marcar específicamente nombres de
<VAR>…</VAR> El nombre de la variable es numero
variables

<KBD>…</KBD> Texto del teclado $ ping mozilla.org

<SAMP> … </SAMP> Ejemplo de la salida de un programa Keyboard not found


Caracteres especiales
Código Resultado Código Resultado
&aacute; &Aacute; &eacute; &Eacute;
á, Á, é, É, í, Í, ó, Ó, ú y Ú &lt; <
etc.
&ntilde; y &Ntilde; ñyÑ &gt; >
&iquest; ¿ &amp; &
&iexcl; ¡
&quot; "
&ordm; º
&ordf; ª &nbsp;
&trade; o &#153; o
&copy; ©
&reg; ®
• Algunas cuestiones…
• ¡¡CIUDADO CON EL ORDEN DE CIERRE DE LAS ETIQUETAS!!
• Algunas etiquetas no permiten efectos dinámicos. Son etiquetas estáticas: no cambian.
• Forzar espacios con &nbsp;
• Distinción con HTML 5
ENCABEZADOS
• El tamaño de la letra del encabezado es mayor cuanto
menor sea el valor del número.
• No deben de usarse estas etiquetas para formatear texto.
• Sólo estarán bien usadas para designar títulos de párrafos.
• <h1> This is heading 1</h1>
• <h2> This is heading 2</h2>
• <h3> This is heading 3</h3>
• <h4> This is heading 4</h4>
• <h5> This is heading 5</h5>
• <h6> This is heading 6</h6>
ATRIBUTOS (I)
Se usa para definir las características de un elemento HTML y se sitúan dentro de la etiqueta
inicial. Todos los atributos tienen dos partes: un nombre y un valor.
• Nombre: propiedad que se quiere establecer
• Valor: valor que se le da a la propiedad

Hay cuatro atributos que pueden ser utilizados en la mayoría de los elementos HTML: id, title,
class y style.
id → se usa para identificar un elemento y poder actuar sobre él.
title → es una explicación del id.
class → se usa para asociar un elemento a una hoja de estilo y se especifica la clase del
elemento.
style → se utiliza para especificar reglas de estilos sobre un elemento.
ATRIBUTOS (II)
• Atributos para <BODY STYLE=“atributo1:valor1; atributo2: valor2;atributo3:valor3;…”>
• background-color (color de fondo de la página)
• font-family (tipo de letra)
• font-size (se mide en pt… por ahora)
• color (color de la letra)
• background-image (imagen de fondo)
• text-align (alineación del texto)
• vertical-align (alineación vertical)
• width (ancho en px o %)
• height (alto en px o %)

<BODY style=“background-color:#8541AB; color:RGB(23,200,120); font-size:18pt; font-family:Arial”>


CSS (Cascading Style Sheets)

• Vamos a crear un archivo style.css dentro de una carpeta llamada /css


• Se enlaza este fichero en la sección <head>
• En este fichero es donde vamos a escribir los atributos que nos permiten modificar el
aspecto de los elementos a incluir en la página web
CSS (Cascading Style Sheets)

• Selector: es el elemento al que se le quiere aplicar un estilo, por ejemplo: html, p, img, h1…
• El bloque de declaraciones debe ir encerrado entre { }
• Los pares propiedad y valor van separados por :
• Cada par de declaraciones se separa por ;
COLORES EN LA WEB
En la siguiente página web puedes obtener el color que quieras en hexadecimal, tan solo selecciona el
color y su código aparecerá en el recuadro
http://html-color-codes.info/codigos-de-colores-hexadecimales/
https://htmlcolorcodes.com/es/

Selecciona el color
o introduce el
código
hexadecimal

Código
hexadecimal
AÑADIENDO COLOR
AÑADIENDO COLOR

El parámetro A (canal alfa) indica la


opacidad de un color y es un valor entre 0
(totalmente transparente) y 1 (totalmente
opaco).
FUENTE

Font-family permite indicar una


familia de fuentes tipográficas o
nombres de fuentes concretas.
Para mayor compatibilidad,
comienza con el nombre de la
fuente que deseas y termina con el
nombre de la familia.
PÁRRAFOS (I)
• Se indican con <p>Este es el contenido del párrafo</p>
• Propiedades: NO se le aplica las propiedades de BODY
• background-color: #CCCCCC (color de fondo)
• width: 200px / 80%. Medida absoluta (px) y relativa (%)
• height: no suele usarse
• border-width: 3px (anchura)
• border-style: dotted/solid/double/dashed/groove…
(estilo del borde: punteado, sólido, rayado…)

https://www.w3schools.com/cssref/pr_border.asp
PÁRRAFOS (II)
• border-style: dotted/solid/double/dashed/groove… (estilo del borde: punteado,
sólido, rayado…)

hidden
PÁRRAFOS (III)
• line-height: normal | 1.7 | 20px | 150% (interlineado)

https://www.w3schools.com/cssref/pr_dim_line-height.asp

• border-color: red (color del borde)

• text-align: left / right / center / justify


PÁRRAFOS (IV)
• margin: distancia desde el borde del párrafo a los elementos adyacentes
• margin-top / margin-right / margin-bottom /margin-left / margin (se aplica a todos los lados)
• padding: distancia desde el borde del párrafo hasta el contenido del mismo
• padding-top / padding-right / padding-bottom /padding-left / padding (se aplica a todos los lados)

PADDING

MARGIN
PÁRRAFOS (V)
• border-radius: redondear esquinas de los párrafos

Four values→ Two values→


border-radius: 15px 50px 30px 5px; border-radius: 15px 50px

1 2 1 2 1 2 1 1

4 3 2 3 2 1 1 1
Three values→ One value→

border-radius: 15px 50px 30px; border-radius: 15px;


PÁRRAFOS (VI)
• Ejemplo completo
CONTENEDORES (I)
• Etiqueta <span>texto texto </span>
• USOS:
• Aplicar nuevos estilos DENTRO de un párrafo. Por sí sola, no tiene efecto visual. Debe ir
acompañada de estilos (o class).
• Creación de botones
• Agrupar elementos en una misma línea
CONTENEDORES (II)
• Etiqueta <div>texto texto </div>
• No tiene ningún significado, es semánticamente neutro.
• USOS:
• Contener otros elementos HTML.
• Permite dar formato a un bloque de contenidos.
• Agrupar elementos de distintas líneas

HACER y ENTREGAR ACTIVIDAD 2


IMÁGENES (I)
Ejemplo:

• <img src=“URL imagen” lista_de_atributos /> • width/height → anchura y altura de la


imagen. Puede establecerse en píxeles o
• Principalmente: JPEG, JPG, PNG, GIF, SVG, BMP
porcentajes (px, %).
• Hay que especificar la extensión
• id →nombre identificativo de la imagen
• Utilizar rutas RELATIVAS para evitar errores
(también imágenes de Internet)
IMÁGENES (II)

• title → texto que se muestra cuando se sitúa el • alt → en caso de error, se muestra este
ratón sobre la imagen texto
IMÁGENES (III)

• Centrar imagen: • border-radius→ Nos permite redondear las


esquinas de las imágenes.
• Insertamos dentro de un párrafo y centramos el
contenido del párrafo • Mismo funcionamiento que el border-radius
de los párrafos

• En la propia imagen
IMÁGENES (IV)
Imágenes de fondo
• Se añade como atributo del BODY para que se vea en toda la página.
• background-image:url(url_foto_fondo);
• También pueden ponerse gradientes
(https://www.w3schools.com/cssref/pr_background-image.php)
• Prevalece sobre background-color (color de fondo). Si hay error, se
mostrará el color de fondo
• Por defecto → Modo mosaico
• background-repeat: no-repeat / repeat / repeat-x/y
(https://www.w3schools.com/cssref/pr_background-repeat.php)
• background-position: left / right / center / top / bottom
(https://www.w3schools.com/cssref/pr_background-position.php )
• background-attachment: scroll / fixed / local / initial / inherit
(https://www.w3schools.com/cssref/pr_background-attachment.php)
• background-size: contain / cover / auto / 200px 300px
(https://www.w3schools.com/cssref/css3_pr_background-size.php)
FIGURAS

• <figure> y <figcaption> añaden una


explicación a una imagen
• Las imágenes y el caption deben ir
agrupadas con <figure>

HACER y ENTREGAR ACTIVIDADES 3 y 4


ENLACES (I)

• Etiqueta <a></a>: <A HREF="direccion">Texto sensible del enlace</A>


• Permite otros atributos como: TARGET o TITLE
• Para cambiar el color del enlace:

a:link - a normal, unvisited link


https://developer.mozilla.org/es/docs/Web/CSS/:link
a:visited - a link the user has visited
https://developer.mozilla.org/es/docs/Web/CSS/:visited
a:hover - a link when the user mouse is over it
https://developer.mozilla.org/es/docs/Web/CSS/:hover
a:active - a link the moment it is clicked
https://developer.mozilla.org/es/docs/Web/CSS/:active
ENLACES (II)
• Usaremos el valor href=“#” para indicar un enlace sin funcionalidad
• Una URL local nos lleva a otra página o archivo del mismo sitio de Internet.
• Cuando el archivo a enlazar está en la misma carpeta: la ruta es directamente el nombre del archivo
de destino:
<a href=“./page2.html">Ver siguiente</a>
• El archivo de destino está en una subcarpeta, en este caso deberemos escribir la ruta a partir de la
carpeta donde está el archivo desde el que hacemos clic:
<a href=“./content/page2.html">Ver ejemplo 5</a>
• Si el archivo está en una carpeta de nivel superior, es necesario subir uno o varios niveles en la
jerarquía de directorios, hasta llegar al nivel donde está el archivo. Subimos un nivel escribiendo (../);
si subimos dos niveles (../../), hasta llegar al nivel donde esté el archivo:
<a href="../page2.html">Página 2</a>
• Para ir a una carpeta del mismo nivel, debemos subir al directorio raíz mediante ../ y desde ahí a la
carpeta buscada:
<a href="../pages2/page22.html">Pagina 2 </a>

• Para descargar un fichero almacenado, debemos indicar:


Haz clic <a href=“ruta_fichero.zip">aquí</a> para descargar Fichero.ZIP
ENLACES (III)
• Una dirección absoluta en Internet combina el nombre del servidor que
proporciona la información, el directorio donde se encuentra, el nombre
del fichero:
• esquema://www.miDominio.com/ruta/miArchivo.html
• http, es el protocolo usado para la transacción en la Web:
Ir a <a href="http://www.nytimes.com/"> The New York Times</a>
• https es la versión segura de http:
<a href=" https://www.google.es/"> Google España</a>
• mailto, es el esquema que se emplea para enlazar a una dirección de correo:
<a href="mailto:[email protected]"> Contacto</a>
• ftp, es el esquema para la transferencia archivos:
<a href="ftp://ftp.miDominio.com/ruta/miArchivo.zip">Descarga por FTP</a>
• news, es el esquema para enlazar con un grupo de noticias (externa a nuestras
páginas):
<a href="news://news.ptnic.es">Ir al Grupo de Noticias</a>
ENLACES (IV)

enlace imagen enlace


ENLACES (V)

• Atributo TARGET: especifica dónde abrir el documento enlazado


• _self: abre el enlace en la misma ventana o pestaña donde ha sido clicado (por defecto)
• _blank: abre el enlace en una nueva pestaña (HTML5) o ventana
• _parent: abre el enlace en un frame padre (no se usa porque no se usan frames)
• _top: abre el enlace en la misma ventana en pantalla completa
• framename: abre el enlace en un marco flotante de nombre framename

HACER y ENTREGAR ACTIVIDAD 5


marcador

enlace ANCLAS
• Es posible acceder a una posición determinada dentro del mismo
documento HTML que estemos creando. Para hacerlo, primero
debemos especificar el lugar del documento al que queremos
acceder (marcador o ancla):
<a id="ancla"></a>
<section id="ancla"> …</section>
<p id="ancla"> …</p>
<otras_etiquetas id="ancla">

• Para poder acceder al ancla (o marcador) incluimos el enlace de esta


manera:

<a href ="#ancla">¿Qué incluyen los precios?</a>

• También podemos acceder a anclas situadas en otras páginas web.


Para ello añadiremos el nombre del ancla al final de la URL:
<a href ="url_pagina.html#ancla">Otra vez</a>

HACER y ENTREGAR ACTIVIDAD 6


LISTAS (I)
Desordenadas Parámetro Utilidad
list-style-type: Indica al navegador el dibujo que
<UL> precederá a cada elemento de la lista.
disc/circle/square/none Para mayor flexibilidad se admite
<LI>Primer elemento</LI>
también como parámetro de <LI>.
<LI>Segundo elemento</LI>
</UL>

• Primer elemento
• Segundo elemento

*Deprecated: https://www.w3.org/TR/html4/struct/lists.html
LISTAS (II)
Parámetro Utilidad
Ordenadas
list-style-type: decimal/
decimal-leading-zero/ Indica al navegador el tipo de numeración
<OL> (lower)upper-roman/ que precederá a cada elemento de la lista.
(lower)upper-alpha…
<LI>Primer elemento</LI>
list-style-position: Los marcadores de la lista están dentro o
<LI>Segundo elemento</LI> inside / outside fuera del texto de cada item de la lista
</OL> list-style-image:url(url_image)
Reemplaza el marcador de la lista por una
imagen

1. Primer elemento
2. Segundo elemento

La opción list-style resume los 3 posibles


parámetros type, position e image
LISTAS (III)
Listas con sublistas
<UL>
<LI>Elemento 1
<OL> • Elemento 1
<LI>Primer subelemento 1. Primer subelemento
<UL>
• Elemento 1.1.1
<LI>Elemento 1.1.1 </LI>
<LI>Elemento 1.1.2 </LI> • Elemento 1.1.2
</UL> 2. Segundo subelemento
</LI>
• Elemento 2
<LI>Segundo subelemento</LI>
</OL>
</LI>
<LI>Elemento 2</LI> ¡ATENCIÓN! Para incluir una sublista,
</UL> debe estar DENTRO de las etiquetas que
la contenga
LISTAS (IV)
Listas de Descripción (Description List, Data Term, Data Definition)
<DL>
<DT>Chrome</DT> Chrome
<DD> Google Chrome is a cross-platform web browser developed by Google.
Google Chrome is a cross-platform
</DD> web browser developed by Google.
<DT>Firefox</DT> Firefox
<DT>Mozilla Firefox</DT> Mozilla Firefox
<DD>A free, open source, cross-platform, graphical web browser A free, open source, cross-
developed by the Mozilla Corporation and hundreds of volunteers.
platform, graphical web browser
developed by the Mozilla
</DD> Corporation and hundreds of
volunteers.
</DL>
LISTAS (V)
En muchas ocasiones se usan listas para crear
menús, basta con modificar los estilos…

Aunque aún no vamos a entrar en CSS,


este es un vídeo de adelanto sobre cómo
crear menús desplegables:
https://www.youtube.com/watch?v=oZa2Ut8u2S0 HACER y ENTREGAR ACTIVIDAD 7
TABLAS (I)
<table> → indica el inicio de una tabla
<tr> → indica una fila
<td>Fila 1, columna 1</td> → indica una columna
<td>Fila 1, columna 2</td>
</tr>
<tr> Fila 1, columna 1 Fila 1, columna 2

<td>Fila 2, columna 1</td>


Fila 2, columna 1 Fila 2, columna 2
<td>Fila 2, columna 2</td>
</tr>
</table>
TABLAS (II)
• Se puede usar <th> en lugar de <td> para indicar que algunas celdas son la
cabecera de la tabla
TABLAS (III)

• border: ancho del borde que rodea a la tabla.


Si es 0, el borde no se ve.
• height y width (alto y ancho): pueden
medirse en píxeles (px) o en porcentaje (%)
del elemento contenedor (Ej. width= "100%"
indica que ocupa el ancho del elemento en el
que está colocada).
• padding: distancia del contenido de la
tabla/celda al borde de la tabla/celda. Se
mide en píxeles.
• border-spacing: espacio entre las celdas. Se
mide en píxeles. Por defecto mide 2px.
TABLAS (IV)

• border-collapse: indica si los bordes deben


colapsar en un solo borde p estar separados
TABLAS (V)
• Usando float se puede posicionar la tabla (left o • Se pueden aplicar estilos distintos a los
rigth) respecto a un texto u otro elemento bordes:
• border-bottom
• border-left
• border-right
• border-top
TABLAS (VI)
• background-color: color de fondo de la celda o
tabla
• border-color: color del borde
• vertical-align: alineación vertical
• text-align: alineación del contenido
• margin: alineación horizontal (auto para centrar)
• colspan: especifica el número de celdas de la fila
situadas a la derecha de la actual que se unen a
ésta (incluyendo la celda en que se declara este
parámetro). Es por defecto uno. Si se pone igual
a cero, se unirán todas las celdas que queden a la
derecha.
• rowspan: especifica el número de celdas de la
columna situadas debajo de la actual que se
unen a ésta.
TABLAS (VII)
• Las tablas pueden agrupar tres partes: cabecera, cuerpo y pie.
Utilizaremos <thead> <tbody> <tfoot>
• La cabecera o encabezado y el pie es similar a lo que nos
encontramos en los procesadores de textos.
TABLAS (VIII)
• caption: define el título de una tabla
• colgroup: especifica un grupo de una o más columnas para darles un formato
• col: especifica un formato para cada una de las columnas que estén en el grupo
colgroup

+Info: https://www.w3schools.com/html/html_table_colgroup.asp
TABLAS (IX)
• Las celdas de las tablas pueden contener imágenes o cualquier otro elemento
• Podemos anidar tablas dentro de otras tablas

HACER y ENTREGAR ACTIVIDAD 8


FORMULARIOS (I)
• Permiten interactuar con las páginas web introduciendo o mostrando
información.
• Sintaxis:
<FORM ACTION= "acción a realizar" METHOD= " GET/POST">
Contenido del formulario
</FORM>

• ACTION
• llamada a javascript, php o similar (http://aprende-web.net/javascript/js7_2.php)
• Enviar un email: mailto:"[email protected]“
• METHOD
• Get: método por defecto. Los valores se ven en la barra de direcciones
• Post: Evita mostrar información, sobre todo si es sensible (usaremos este tipo)
FORMULARIOS (II)
GET POST
FORMULARIOS (III)
Métodos para introducir datos en un formulario

INPUT – CAJAS DE TEXTO

https://www.w3schools.com/tags/tag_input.asp
FORMULARIOS (IV)
OTROS TIPOS DE INPUT
Algunos no están soportados en determinados navegadores. Ej. https://html5test.com/ en Mozilla
Firefox
FORMULARIOS (V)
Atributos de los input
Parámetro Utilidad
Número máximo de caracteres que puede introducir el
MAXLENGTH
usuario.
VALUE Texto por defecto que contendrá la caja.
"text", "password", "email", "URL", "tel", "date", "month",
Readonly TYPE "week", "time", "datetime", "datetime-local", "datetime-
picker"
Atributos ya estudiados (background-color, color, font-
STYLE family…)

READONLY Casilla de solo lectura.

REQUIRED Es obligatorio introducir un valor *


Debe tener un nombre para que el contenido se pueda
NAME
enviar
ID Identificador del input

MULTIPLE Permite recibir más de un valor de entrada en algunos casos

https://www.w3schools.com/tags/tag_input.asp
FORMULARIOS (VI)
Atributos de los inputs
Parámetro Utilidad

DISABLED El campo debe estar deshabilitado

MAX Valor máximo para el campo

MIN Valor mínimo para el campo

PATTERN Expresión regular para comprobar el valor de entrada

SIZE Indica el ancho (en caracteres) de un campo de entrada

STEP Número de intervalos para un campo de entrada

FIELD VALUE Valor por defecto del campo


Con el valor ON, se autocompleta el campo con contenidos
AUTOCOMPLETE
anteriormente introducidos
AUTOFOCUS El cursor se sitúa en este campo

NOVALIDATE Hace que el input no se valide al enviarse el formulario

https://www.w3schools.com/tags/tag_input.asp
FORMULARIOS (VII)
La etiqueta <label> define una etiqueta para varios elementos (input, select y
textarea, entre otros…)

El atributo for de la etiqueta label debe tener el mismo valor que el atributo id
del input al que se le asocie.

https://www.w3schools.com/tags/tag_label.asp
FORMULARIOS (VIII)

LISTA DE ELEMENTOS

• Especifica una lista de opciones predefinidas para un


elemento de tipo <input>
• Aparecerá una lista desplegable de opciones
predefinidas
• El atributo list del <input> tiene que tener el mismo
valor que el atributo id del <datalist>
• También permite escribir otro valor en la caja de texto
FORMULARIOS (IX)

ÁREAS DE TEXTO
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
STYLE Podemos aplicarle estilos propios

RADIO BUTTON
3<INPUT NAME="Respuesta" TYPE= "RADIO" VALUE="mal"><br />
Parámetro Utilidad
4<INPUT NAME="Respuesta" TYPE= "RADIO" VALUE="bien"><br />
VALUE Este es el valor que asignará a la variable.
5<INPUT NAME="Respuesta" TYPE= "RADIO" VALUE="mal"><br /> CHECKED Si lo indicamos en una de las opciones esta
será la que esté activada por defecto.

<INPUT NAME="talla" TYPE= "RADIO" VALUE="S" checked>Pequeña<br />


<INPUT NAME="talla" TYPE= "RADIO" VALUE="M">Mediana<br />
<INPUT NAME="talla" TYPE= "RADIO" VALUE="L">Grande<br />
FORMULARIOS (X)

LISTAS DESPLEGABLES
• Parámetros que admite select

Parámetro Utilidad
SIZE El número de opciones que podremos ver. Si es
mayor que 1 veremos una lista de selección y, si no,
veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción.
DISABLED Deshabilita el acceso a las opciones

• Parámetros que admite option


Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
SELECTED Si lo indicamos en una de las opciones ésta será la
seleccionada por defecto.
DISABLED Deshabilita la opción marcada como disabled
FORMULARIOS (XI)
LISTAS DESPLEGABLES CON AGRUPACIONES
• Parámetros que admite optgroup
Atributo Valor Descripción
• La etiqueta <optgroup> se utiliza disabled Disabled Indica si el grupo de opciones debe estar deshabilitado
para agrupar opciones relacionadas label Texto Especifica la etiqueta del grupo de opciones
en una lista desplegable <select>.

• Si se tienen muchas opciones,


agrupar aquellas que están
relacionadas facilita su uso por parte
de los usuarios.
FORMULARIOS (XII)

BOTONES

CHECK BOX

• Si queremos que el control esté activado por defecto, le añadiremos el parámetro CHECKED.
• El formulario asignará a la variable NAME el valor on u off.
FORMULARIOS (XIII)

PLACEHOLDER
• Texto que se muestra para ayudar al usuario y
darle información.
• En cuanto se hace clic en el input, desaparece

FIELDSET-LEGEND • FIELDSET: Permite agrupar visualmente un grupo de


campos
• LEGEND: Permite mostrar un nombre que se le da al
grupo FIELDSET
• Admite como parámetro ALIGN, que indicará en qué lugar se
coloca el título.
• Por defecto es TOP (arriba), pudiendo estar también abajo
(BOTTOM), a la izquierda (LEFT) o a la derecha (RIGHT).
FORMULARIOS (XIV)
<input> - Atributos de validación pattern=“<expresión_regular>”

Las expresiones regulares se construyen con los siguientes elementos:


. Cualquier carácter (o texto de tamaño 1)
A|B Opciones alternativas (o A o B), siendo A y B caracteres
C(A|B) Agrupaciones alternativas (o CA o CB), siendo C, A y B caracteres
[0-9] Rangos de caracteres. Un dígito (del 0 al 9)
[A-Z] Una letra mayúscula de la A a la Z
^ Excluir un elemento.
[^A-Z] Rango de exclusión. Una letra que NO sea mayúscula de la A a la Z
? Opcional. El elemento que acompaña puede aparecer o puede que no
b? El carácter b puede aparecer o puede que no
[0-9]? Un dígito del 0 al 9 puede aparecer o puede que no.
https://www.w3schools.com/jsref/jsref_obj_regexp.asp
FORMULARIOS (XV)
* Repetir 0 o más veces
[0-9]* Un dígito repetido 0 o más veces (vacío incluido)
+ Repetir 1 o más veces
[0-9]+ Un dígito repetido 1 o más veces
{n} Repetir exactamente n veces
[0-9]{3} Cifra de 3 dígitos (dígito repetido 3 veces)
{n1, n2} Rango. Repetir entre n1 y n2 veces
[0-9]{2,4} Cifra de 2 a 4 dígitos (repetir de 2 a 4 veces)
{n,} Rango sin límite. Aparece n o más veces
[0-9]{2,} Cifra de 2 o más dígitos (repetir 2 o más veces)
FORMULARIOS (XVI)
\ Carácter de escape. Para que aparezca el carácter que va detrás como texto
\. El carácter . Literalmente, aparece como texto y no como comodín
\w Cualquier letra o número y el carácter _ (word)
\W Cualquier carácter no reconocido con \w (non-word)
\d Un dígito, equivalente a [0-9] (digit)
\D Cualquier carácter que no sea un dígito (non-digit)
\t Coincide con un tabulador (tab)
\r Coincide con un retorno de línea (return)
\n Coincide con un salto de línea (new line)
\s Espacio en blanco o equivalente [\t\r\n] (whitespace)
\S Cualquiera que no sea un espacio en blanco o equivalente (non-whitespace)
\b Coincide con el inicio/final de una palabra. \ba empieza por a; a\b termina en a (beginning)
\B Coincide con un segmento que no sea inicio o final de palabra (non-beginning)
FORMULARIOS (XVII)
^ Inicio de una línea. ^n → Cualquier cadena con n al principio
$ Fin de una línea. n$ → Cualquier cadena con n al final
() Paréntesis de captura. Agrupa y recuerda las búsquedas
(?:...) Paréntesis de no-captura. Indica si se ha encontrado un patrón pero no lo recuerda
x(?=y) Coincide con x si va seguido de y, pero no consume caracteres
x(?!y) Coincide con x si no va seguido de y, pero no consume caracteres
\N N es un dígito \1 \2. Representa la N-ésima referencia. Captura con los paréntesis

Más en: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp


Puedes probar las expresiones regulares en:
https://regex101.com/
https://regexcrossword.com/
FORMULARIOS(XVIII)

ACCIONES CON JAVASCRIPT <script>


function myalert(){
<input type="text" id="texto">
var valor = document.getElementById("texto").value;
<textarea id="parrafo">Escribe aquí</textarea>
alert(valor);
<button type="submit" onclick="myalert()">
var valor = document.getElementById("parrafo").value;
Enviar
alert(valor);
</button>
}
</script>

• Recoger datos del resto de elementos:


http://librosweb.es/libro/javascript/capitulo_7/utilidades_basicas_para_formularios.html

• Funciones JavaScript: https://norfipc.com/inf/javascript-lista-variables-funciones-usar-paginas-web.html


FORMULARIOS(XIX)

ACCIONES CON JAVASCRIPT


Modificamos las acciones de onclick para
<input type="text" id="texto"> evitar reenviar varias veces un formulario:
<textarea id="parrafo">Escribe aquí</textarea> <input type="button" value="Enviar"
<button type= "button" onclick="myalert()"> onclick="this.disabled=true;
Enviar this.value='Enviando…'; myalert();
</button> this.value='Enviado';"/>

Podemos añadir document.write('Enviado'); a


la función script.
Ejemplo 1: Enviar cuestionario por email (I)
Ejemplo 1: Enviar cuestionario por email (II)

• HTML
Ejemplo 1: Enviar cuestionario por email (III)
• SCRIPT

HACER y ENTREGAR ACTIVIDAD 9


Ejemplo 2: Ver datos de un cuestionario (I)
• HTML formulario.html: partiendo del mismo HTML del ejemplo anterior,
enviamos los datos por GET a otra página web que mostrará los datos que
recogemos al hacer clic en el botón Enviar Solicitud
Ejemplo 2: Ver datos de un cuestionario (II)
• HTML respuestas.html: incluimos el siguiente script, que recoge los datos
según el ID que se indicó en el HTML desde el que lo llamamos
Ejemplo 2: Ver datos de un cuestionario (III)
• HTML respuestas.html: incluimos el siguiente
script, que recoge los datos según el ID que se
indicó en el HTML desde el que lo llamamos
AUDIO Y VIDEO
• Las etiquetas <audio> y <video> pueden
• Atributos de <source>
contener
• <source>: uno por cada tipo de archivo (mp3, • src: origen de los datos
wav, mp4, webm…)
• <track>: subtítulos, transcripciones… tantos
• type: formato
como quiera ofrecer • Atributos de <track>
• Atributos: • src: origen de los datos
• autoplay: inicia el audio automáticamente
• kind: tipo de archivo que estoy enlazando
• controls: muestra los controles del audio
• loop: reproducción cíclica
• srclang: idioma
• muted: silenciado al inicio • label: descripción
• id: identifica el elemento
AUDIO (I)
• La etiqueta <audio> define sonido o cualquier tipo de streaming de audio.
• Atributos:
• Source: https://www.w3schools.com/tags/att_source_type.asp
• Track: https://www.w3schools.com/tags/tag_track.asp

<audio controls autoplay loop id=“audio1" >


Este mensaje sólo aparecerá si el
<source src="cancion.ogg" type="audio/ogg”/> navegador no soporta la etiqueta
<audio>
<source src="cancion.mp3" type="audio/mpeg" />
Su navegador no soporta esta etiqueta (audio)
<track src=“subtitulos_es.vtt” kind=“subtitle” srclang=“es” label=“Español” />
<track src=“subtitulos_en.vtt” kind=“subtitle” srclang=“en” label=“English” />
</audio> Debe estar habilitado en el servidor
AUDIO (II)
• Hay varios eventos asociados a los
• La función play reproduce el audio desde el momento de retardo,
que es almacenado en la propiedad currentTime. El valor por
elementos audio. defecto de currentTime es 0.

• Los más comunes son: <script>


document.getElementById("audio1").play();
o Ended: avisa cuando el elemento audio
termina una reproducción </script>
o Play: avisa cuando el elemento audio inicia
una reproducción o se continúa • El siguiente código reproduce un audio desde el momento 3,5
segundos.
o Pause: avisa cuando el elemento audio pausa
una reproducción <script>

o Progress: avisa periódicamente cuando el


document.getElementById("audio1").currentTime = 3.5;
elemento audio se está descargando document.getElementById("audio1").play();

o Timeupdate: avisa cuando la propiedad </script>


currentTime cambia <script> document.getElementById("audio1").pause(); </script>

o Volume: indica el volumen actual del audio <script> document.getElementById("audio1").volume = 0.3; </script>
VIDEO
• No hay ninguna combinación de un solo
codec/contenedor que funcione en <video width="320" height="240" controls>
todos los navegadores.
•
<source src="pr6.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2">
Por problemas de soporte de <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
navegadores, dentro de una etiqueta
video/audio se pueden agregar <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis“’>
múltiples src para distintos formatos y Su navegador no soporta esta etiqueta (vídeo)

codecs </video>
• Atributos: Este mensaje sólo aparecerá si el

• width: ancho
navegador no soporta la etiqueta
<video>

• height: alto
• poster: mostrar una imagen mientras se
carga el vídeo

Type y Codecs: https://www.w3schools.com/tags/av_met_canplaytype.asp


VIDEO
• A veces queremos insertar vídeos obtenidos de YouTube, para ello, buscamos
el vídeo en cuestión, hacemos clic en Compartir > Insertar > Copiamos el
código del iframe y pegamos en nuestra página
OBJETOS
• Están soportados por todos los
navegadores
• <object> define un objeto embebido en
un documento HTML
• Se usa para embeber plugins (applets
Java, lectores PDF, Flash Player…),
Es más adecuado usar <video>
imágenes o incluso HTML
<audio> <img> <iframe>
• Según el contenido incrustado, el
objeto se tratará como una imagen,
recurso externo, etc.
• Permiten añadir en su interior etiquetas
HTML o texto que funcionen a modo de
fallback (plan B)
OTRAS ETIQUETAS
• <canvas>: dibujar un lienzo en una web. Necesita programación.
• <script>: inserta contenido javascript
• <iframe>: permite embeber documentos web de otros dominios: YouTube o Google Maps
• <embed>: para aplicaciones externas o contenido interactivo (incrustar contenidos para los
complementos del navegador)

object
iframe iframe embed
OTRAS ETIQUETAS

iframe
BLOQUES (I)
• ¿Por qué usar elementos semánticos?
• Más fácil de leer
• Mayor accesibilidad (buscadores,
lectores de pantalla…)
• Código más coherente
(independiente de las preferencias
del programador):
<div class=“header”>
<div id=“header”>
<div class=“head”>
<div>
BLOQUES (II)
En HTML5 los bloques DIV son sustituidos por bloques semánticos que muestran significado por sí mismos.
Tienen unas reglas de anidación
BLOQUES (III)
• <header> La cabecera de la web.
• <footer> La parte más baja de la web.
• <nav> Se usa para definir el menú o la
navegación de la página.
• <aside> Se usa para definir la barra lateral.
• <article> Bloque de contenido que tiene
sentido por sí mismo. Se suele reutilizar y
repetir. También suele llevar un título y un
footer. (Ej. Entrada de un blog).
• <section> Similar a article. Suelen comenzar
con un título (heading). Pueden agrupar
varios titulares y resúmenes.
• Podemos subdividir artículos en secciones y
secciones en artículos
BLOQUES (IV)

• <main> contenido principal de la página.


Solo puede haber uno.
• <details> detalles adicionales que el
usuario puede abrir o cerrar a demanda
• <summary> cabecera para <details>
• <dialog open/close> ventana de diálogo
(popup)
BLOQUES (V)
BLOQUES (VI)

<main>

</main>

HACER y ENTREGAR ACTIVIDAD 10


BANCOS DE RECURSOS (I)
Bancos de imágenes

► PIXABAY: https://pixabay.com/es/ ► UNSPLASH: https://unsplash.com/


► PEXELS: https://www.pexels.com/ ► CUPCAKE: http://cupcake.nilssonlee.se/
► STOKPIC: http://stokpic.com/ ► JAYMANTRI: https://jaymantri.com/
► STOCKSNAP: https://stocksnap.io/ ► PICOGRAPHY: http://picography.co/
► GRATISOGRAPHY: https://gratisography.com/ ► STOCKVAULT: https://www.stockvault.net/
► LIFEOFPIX: https://www.lifeofpix.com/ ► STARTUPSTOCKPHOTOS: http://startupstockphotos.com/
► MMTSTOCK: https://mmtstock.com/ ► SPLITSHIRE: https://www.splitshire.com/
► MAGDELEINE: https://magdeleine.co/license/cc0/ ► I’M FREE: http://imcreator.com/free
BANCOS DE RECURSOS (II)
Repositorios de audios
► MEC: http://recursostic.educacion.es/bancoimagenes/web/
► Magnatune: http://magnatune.com/
► Stereofloat: https://soundcloud.com/stereofloat
► Netlabels: http://www.archive.org/details/netlabels
► SoundClick: http://www.soundclick.com/
► Partners in Rhyme: https://www.partnersinrhyme.com/
► Jamendo: http://www.jamendo.com/es/
BANCOS DE RECURSOS (III)

Repositorios de documentos
► Slideshare: https://es.slideshare.net/
► Calaméo: https://es.calameo.com/
► Wikipedia: https://es.wikipedia.org
► Europeana Collections: https://www.europeana.eu/portal/es
► Biblioteca Nacional de España: http://www.bne.es/es/Inicio/index.html
► Repositorios de universidades
BANCOS DE RECURSOS (IV)

► Existen herramientas que permiten convertir nuestros


contenidos en otros más dinámicos y llamativos:
► PowToon (https://www.powtoon.com): permite crear vídeos y
presentaciones.
► Calaméo (https://es.calameo.com/): transforma nuestros
documentos (Word, pdf, etc.) en revistas digitales.
► TED-Lessons (https://ed.ted.com/lessons): busca un vídeo en
YouTube, añade preguntas y comparte con tus alumnos.

También podría gustarte