LENGUAJES DE MARCA PARA LA

VISUALIZACIÓN DE LA INFROMACIÓN
WEB. HTML5
Profesores: - Sergio M. Mbomio
- Tomás
1. Evolución de la tecnología HTML 5
Primer aproximación de lenguajes de marcado

Estándar internación de lenguajes de marcado

HTML, lenguaje de marcado creado por Tim Berners-Lee

Es un lenguaje de marcado que combina HTML y XML

Tres tecnologías en un mismo estándar: HTML 5 = HTML + CSS + JS

Tema 2: Lenguajes de marca para la visualización de la información web. HTML5

1. Evolución de la tecnología HTML 5

Tema 2: Lenguajes de marca para la visualización de la información web. HTML5

1. Evolución de la tecnología HTML 5

Tema 2: Lenguajes de marca para la visualización de la información web. HTML5

1. Evolución de la tecnología HTML 5

Estructura básica HTML5

Estructura
básica HTML
Vs
Estructura
báscia HTML5

Tema 2: Lenguajes de marca para la visualización de la información web. HTML5

1. Evolución de la tecnología HTML 5
Estructura Básica

Tema 2: Lenguajes de marca para la visualización de la información web. HTML5

2. ¿Qué es HTML 5?
HTML 5 combina tres tecnologías: HTML, CSS y
JavaScript (JS).
▪ HTML se encarga de la estructura de la página.
▪ CSS se encarga de la presentación de la página.
▪ JavaScript (JS) proporciona funcionalidad a la
página.

Tema 2: Lenguajes de marca para la visualización web. HTML5

3. Estructura La etiqueta DOCTYPE le indica al navegador que estamos utilizando
HTML5.

básica de una La etiqueta html Marca el principio y fin del mismo del dcumento

página HTML 5 HTML. Se le debe añadir el atributo lang para indicar el idioma en el

que está escrito el documento.

Etiqueta head es una parte de la web donde colocamos todas

aquellas etiquetas que no se van a visualizar, pero que sirven para
indicar todas las características que el navegador necesita.

Etiqueta meta sirven para indicar aspectos de funcionamiento de la

página web.

Atributo  charset es una de las imprescindibles, ya que indica la

codificación que tendrá la página. Con un valor de utf-8 se mostrarán
símbolos como la "ñ", "ç" o los acentos correctamente.

Etiqueta title. El título de la página, que los navegadores suelen

colocar en la barra de título de la ventana en la que se muestra la
página.

Etiqueta body, encierra el contenido en sí de la página web. Lo que

el navegador muestra por pantalla 
 Ejemplos sencillos de documentos HTML5.

3. Estructura
básica de una
página HTML 5.
Ejercicio. Crear un documento HTML
con el siguiente texto:
La etiqueta p indica un párrafo. En el ejemplo tenemos dos párrafos
Este es el párrafo 1
Gráficamente
Este es el párrafo 2

Visualizar el resultado con un

navegador web
 Comentarios

3. Estructura
básica de una
página HTML 5.
Ejercicio. Escribe el código adjunto
en el bloc de notas y guarda el
archivo con extensión .html

Visualiza el resultado con un

navegador web
 A. Las herramientas para escribir código HTML5 son:

❑ Bloc de notas de Windows o Vi de Linux: son editores de texto plano

que, entre otras cosas, sirven para escribir código HTML5. Desventaja: no
4. Herramientas aceleran la escritura ni proporcionan ayuda al programador. Y el código
generado requiere ser comprobado en varios navegadores (Internet Explorer,
para crear Google Chrome, Mozilla Firefox, Apple Safari y Opera) para asegurar la
compatibilidad. Tarea: Representar en una tabla, las empresa propietarias de

aplicaciones en los navegadores listados anteriormente, indicando sus últimas versiones.

HTML5 y
❑ Editores de texto multi-propósito (editores de código): son editores
pensados para escribir código de cualquier lenguaje de programación.
Cuando escribimos en HTML, colorean el texto resaltando el código de
validadores de forma que sea más legible. Además, ayudan a escribir código HTML.
Ejemplos: Notepad++, TextMate, Atom, Visual Studio Code o Sublime Text.
código HTML5 También se llaman editores políglotas.

Para realizar la tarea, se remite al alumno

visitar la web  caniuse.com e introducir la Visual Studio
palabra “dialog donde pone Can I use____?
Code
 A. Las herramientas para escribir código HTML5 son:

❑ Bloc de notas de Windows o Vi de Linux: son editores de texto plano

que, entre otras cosas, sirven para escribir código HTML5. Desventaja: no
aceleran la escritura ni proporcionan ayuda al programador. Y el código
4. Herramientas generado requiere ser comprobado en varios navegadores (Internet Explorer,
Google Chrome, Mozilla Firefox, Apple Safari y Opera) para asegurar la
para crear compatibilidad. Tarea: Representar en una tabla, las empresa propietarias de
los navegadores listados anteriormente, indicando sus últimas versiones.

aplicaciones en ❑ Editores de texto multi-propósito (editores de código): son editores

HTML5 y
pensados para escribir código de cualquier lenguaje de programación.
Cuando escribimos en HTML, colorean el texto resaltando el código de forma
que sea más legible. Además, ayudan a escribir código HTML. Ejemplos:
validadores de Notepad++, TextMate, Atom, Visual Studio Code o Sublime Text.

código HTML5 Visual Studio

Code
“Texto coloreado”
Visual Studio
Code
 A. Las herramientas para escribir código HTML5 son:

❑ Editores de texto HTML: Son lenguajes especializados en escribir

códigos HTML. Con estos no podemos escribir códigos de otros lenguajes
4. Herramientas como Java, C, C++, Python, etc. Incluyen más funciones para escribir código
HTML. Ejemplos: Coda, Komodo Edit, WebStorm o Brackets.
para crear
aplicaciones en
HTML5 y
validadores de
código HTML5

Visual Studio
Editor WebStorm
Code
 A. Las herramientas para escribir código HTML5 son:

❑ Editores XML: Pensados para la gente que trabaja creando documentos y

elementos relacionados con XML. Entienden HTML, pero no son tan potentes
como los anteriores Ejemplos: Oxygen, XML Copy Editor y XMLSpy.
4. Herramientas
para crear
aplicaciones en
HTML5 y
validadores de
código HTML5
Visual Studio
Code

Editor Oxygen XML

 B. Validadores de código HTML5:
A los navegadores les interesa hacer funcionar el código, sea válido o no. Sin
embargo, como creadores de páginas web, debemos cumplir las normas del
lenguaje de marca (HTML, XML,…) aprendiendo así realmente el lenguaje y
4. Herramientas además impidiendo que el navegador se equivoque al interpretar nuestros fallos .
En esta asignatura consideraremos los siguientes validadores:
para crear ❑ El validador oficial de la W3C (https://validator.w3.org/): permite

aplicaciones en validar todas las versiones de HTML, incluida la versión 5. Los errores
graves se muestran en rojo y puede haber avisos (warnings) que son

HTML5 y
fallos leves, pero que hay que tener en cuenta.

❑ Validadores de los entornos de desarrollo (IDE): la mayor parte de

validadores de los entornos de trabajo disponen de validador incorporado (en el propio
entorno se marcan los fallos a la vez que escribimos el código) y algunos

código HTML5 otros se puede instalar un plugin.

Visual Studio
Code
 B. Validadores de código HTML5: A los navegadores les interesa hacer
funcionar el código, sea válido o no. Sin embargo, como creadores de páginas
web, debemos cumplir las normas del lenguaje (HTML, XML,…) aprendiendo así
realmente el lenguaje y además impidiendo que el navegador se equivoque al

4. Herramientas interpretar nuestros fallos. En esta asignatura consideraremos los siguientes

validadores:

para crear ❑ El validador oficial de la W3C (https://validator.w3.org/): permite

aplicaciones en
validar todas las versiones de HTML, incluida la versión 5. Los errores
graves se muestran en rojo y puede haber avisos (warnings) que son
fallos leves, pero que hay que tener en cuenta.
HTML5 y ❑ Validadores de los entornos de desarrollo (IDE): la mayor parte de

validadores de los entornos de trabajo dispone de validador incorporado (en el propio

entorno se marcan los fallos a la vez que escribimos el código) y algunos

código HTML5 otros se puede instalar un plugin.

❑ Si queremos evaluar el grado en el que un navegador (Firefox,

Google Chrome, …) soporta HTML5 utilizamos los sitios:
▪ http://html5test.com/: este sitio determinar con una puntuación
numérica el grado de soporte de HTML5 del navegador que utilizas
para acceder a dicha web.
▪ http://fmbip.com/: muestra las capacidades relacionadas con
HTML5 que posee nuestro navegador.
▪ https://modernizr.com/: permite a los desarrolladores en JavaScript
detectar las características que tiene el navegador del usuario y
actuar en consecuencia desde el propio código.
 C. Referencias de Ayuda. A continuación se listan las direcciones de Internet
que nos ayudan a utilizar los distintos elementos de HTML5 e incluso nos
dicen su compatibilidad:
❖ w3schools (web: https://www.w3schools.com/tags/): Contiene
4. Herramientas la ayuda de los elementos de HTML5.

para crear ❖ Mozilla Developer Network (web:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element):
aplicaciones en es como la anterior solo que a veces los elementos no son
estandarizados.
HTML5 y ❖ World Wide Web Consortium (W3C, web:
validadores de https://www.w3.org/TR/html5/): Es como la primera, con
elementos estándares. Se estructura de manera muy formal.
código HTML5 La desventaja es que todas las direcciones de internet
referenciadas anteriormente están en inglés.
 Etiqueta <BR>, genera un salto de línea y no tiene etiqueta de fin.
Etiqueta <p>, sirve para generar párrafos tiene etiqueta de fin </p>

5. Dando formato aunque es opcional.

Etiqueta <CENTER>, Centra todo lo que este dentro, se texto,

al texto imagen, etc. su etiqueta de fin es </CENTER>

Etiqueta <H1> </H1> (H2, H3, H4, H5, H6), es una etiqueta de
cabecera que sirve para. Las cabeceras son como los capítulos de
un libro. H1 es el tamaño mayor y H6 es el tamaño menor.
Etiqueta <HR>, sirve para crear una raya horizontal tan ancha como
la pantalla. No tiene etiqueta de fin.

<!DOCTYPE html>
<html lang=“es-ES”>
<head>
<title>Mi primera web</title>
<meta charset=“utf-8”>
</head>
<body>
<H1><CENTER>Primera página</CENTER></H1>
<HR>
Esta es mi primera página, aunque todavía es muy sencilla.
Como el lenguaje HTML no es fácil, pronto estaré en condiciones de
hacer cosas más interesantes.
<body>
</html>
 Etiqueta <BR>, sirve para separar los párrafos o cualquier otra cosa pero sin
dejar una línea en blanco. No tiene etiqueta de cierre.
Etiqueta <B>, para poner el texto entre ella en negrita. Se cierra con </B>

5. Dando formato Etiqueta <I>, para poner el texto en cursiva. Se cierra con </I>
Etiqueta <BLOCKQUOTE>, sirve para crear márgenes al texto que va entre

al texto ellas, es decir, añade sangría al estilo Microsoft Word.

Etiqueta <SUP>, sirve para crear índices. Ejemplo m al cuadrado. Su
etiqueta de fin es </SUP>.
Etiqueta <SUB>, sirve para crear subíndices. Ejemplo m al
cuadrado. Su etiqueta de fin es </SUB>.
<!DOCTYPE html>
<html lang=“es-ES”>
<head>
<title>Mi primera web</title>
<meta charset=“utf-8”>
</head>
<body>
<H1><CENTER><I>Primera página</I></CENTER></H1>
<HR>
Esta es mi primera página, aunque todavía es muy sencilla.
Como el <B>lenguaje HTML</B> no es fácil, pronto estaré en
condiciones de hacer cosas más interesantes.
m² y v_x son los ejemplos de índices
y sub índices
<body>
</html>
 Para crear listas desordenadas hacemos:
<UL>
El Resultado es:
5. Dando formato <LI> Mercedes
<LI>BMW
• Mercedes
• BMW
al texto <LI>Opel
>LI>Seat
</UL>
• Opel
• Seat

Se puede anidar una lista dentro de otra. Por ejemplo

<UL>
<LI> Mamíferos
<LI>Peces El Resultado es:
<UL> • Mamíferos
<LI>Sardina • Peces
<LI>Chicharro o Sardina
</UL> o Chicharro
<LI>Aves • Aves
</UL>

El Resultado es: Listas ordenadas

1. Reunión con el Sr. Mba <OL>
2. Comida con la gerencia <LI>Reunión con el Sr. Mba
3. Llamar al conserje de INSTTIC <LI>Comida con la gerencia
4. Recoger a Esperanza <LI>Llamar al conserje de INSTTIC
<LI>Recoger a Esperanza
<OL>
 Etiqueta <DL>, sirve para escrbir las listas de definición. Son apropiadas
para glosarios. Se cierra con </DL> Pa usar esta etiqueta, se añaden las

5. Dando formato etiquetas siguientes <DT> y <DD> que no tienen etiquetas de cierre.

al texto <DL>
<DT>Una cosa a definir
<DD>La definiciòn de esa cosa
<DT>Otra cosa a definir
<DD>La definición de esta otra cosa
</DL>

El Resultado es:
Una cosa a definir
La definición de esta cosa
Otra cosa a definir
La definición de esta otra cosa
 Ejemplo 3

5. Dando formato <!DOCTYPE html>

<html lang=“es-ES”>
<head>

al texto </head>
<title>Mi primera web2</title>
<meta charset=“utf-8”>

<body>
<CENTER><H1>Mis aficiones</H1></CENTER>
<HR>
Sin un orden particular, mis <B>aficiones</B> son las
siguientes:
<UL>
<LI>El cine
<LI>El deporte
<UL>
<LI>Natación
<LI>Baloncesto
</UL>
<LI>La música
</UL>
La música que más me gusta es <I>(en orden de preferencia):</I>
<OL>
<LI>El Ebolaza
<LI>El Tembete
<LI>El Bivalaga
</OL>
<body>
</html>
 Estructura de los enlaces:
<a href=“xxx”>yyy</a>. Donde xxx es ek destino del enlace e yyy es el
texto indicativo en la pantalla del enlace (con un color especial y subrayado).
6. Enlaces con Tipos de enlaces:

otras páginas 1. Enlaces dentro de la página, se aplica en los documentos muy

extensos, nos permiten dar un salto desde una posición a otra
determinada dentro de la misma página.

<a href=“#marca”>yyy</a> Y en el sitio exacto donde queremos saltar,

debemos poner el siguiente código <a name=“marca”></a>

2. Enlaces con otra página, en este caso, simplemente sustituimos lo que

hemos llamado xxx, (el destino del enlace) por el nombre del fichero:
<a href=“ejemplo3.html>Mis aficiones</a>

Observación: para que esto funcione, tanto la página que estamos

escribiendo esta etiqueta como la página a la que queremos saltar están
en el mismo directorio (carpeta). Si la página a la que quiero saltar está,
por ejemplo en el subdirectorio subdir, entonces en la etiqueta tendría que
escribir el enlace de la siguiente forma:
<a href=“subdir/ejemplo3.html”>Mis aficiones</a>
Si quiero saltar desde una página a otra que están en un directorio superior,
entonces tendría que escribir lo siguiente:
<a href=“../ejemplo3.html>Mis aficiones</a> Los dos puntos (..) hacen
que el navegador se dirija al directorio superior.
 3. Enlaces con una página fuera de nuestro sistema, Si queremos enlazar
con una página que está fuera de nuestro sistema, es decir, que esté en un

6. Enlaces con servidor distinto al que soporta nuestra página, es necesario conocer su
dirección completa, o URL. El URL podría ser, además de la dirección de una

otras páginas página del Web, una dirección FTP. La estructura es:
<a href=http://www.google.com>página de google</a>

Observación: es importante copiar estas páginas correctamente, respetanto

las mayúsculas y minúsculas, porque los servidores UNIX sí las distinguen.

4. Enlaces con direcciones de email, la estructura es:

<a href=mailto:dirección_de_emial>Texto del enlace</a>. Un ejemplo sería:
<a href=“mailto:info@dominio.com”>info@dominio.com</a>

Observación: la desventaja de este formato de enlace con email es que hay

robots (softbots) de internet que buscan direcciones de correo electrónico en
nuestras páginas para poder luego enviar SPAM (correo no deseado).
 Ejemplo:

6. Enlaces con <!DOCTYPE html>

<html lang="es-ES">
    <head>
otras páginas         <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
           <center>
                 <h1>Mis páginas favoritas</h1>
           </center>
          <hr>
          Estas son  mis páginas favoritas:
          <li><a href="http://www.google.com">google</a></li>
          <li><a href="http://www.syncrom.com">PDH</a></li>
          <li><a href="Carp/ejemplo3.html">Mis aficiones</a></li>
    </body>
</html>

Navega en los distintos enlaces de la página del ejemplo para verificar su funcionamiento
 Para insertar una imagen en nuestra página web utilizamos la etiqueta IMG. Su
estructura es:
<IMG SRC=“imagen.gif>. El atributo de la etiqueta IMG es SRC (source ó

7. Imágenes fuente en español) nos indica la ubicación de la imagen. La / sirve para entrar
en un directorio o carpeta, si la imagen está ubicada en una carpeta diferente a
donde tenemos nuestra página web. Si la imagen está ubicada en un directorio
superior al de la página se utilizan los dos puntos (..): ../
gif es un formato de imagen que aceptan los navegadores. Otro formato
que aceptan es jpg.

Dentro de la etiqueta IMG se puede añadir otro atributos, como ALT, que es la
descripción de la imagen. Si por lo que sea, el navegador no puede cargar la
imagen, el texto alternativo (ALT) saldrá en su defecto. Y si la imagen se carga,
ALT será lo que aparezca cuando el cursor del ratón pare un segundo encima
de la imagen. Ejemplo de uso:
<IMG SRC=“imagen.gif” ALT=“descripción”>. La etiqueta IMG no tiene
etiqueta de cierre.

La propiedad ALIGN de la etiqueta IMG nos indica la alineación del texto que
rodea a la imagen con respecto a ella misma. Sus valores pueden ser TOP,
MIDDLE y BOTTON. Ejemplos de uso:
<IMG SRC=“imagen.gif” ALIG=TOP> Texto alineado arriba
<IMG SRC=“imagen.gif” ALIG=MIDDLE> Texto alineado en medio
<IMG SRC=“imagen.gif” ALIG=BOTTON> Texto alineado abajo

Las imágenes también pueden convertirse en enlaces. Investiga como se logra

eso.
 Ejemplo:
7. Imágenes <!DOCTYPE html>
<html lang="es-ES">
    <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
<center>
<h1>Ejemplo de imágenes</h1>
</center>
<hr>
Para llevar a cabo este ejemplo tienes que: <a href=“imag1.html”><img src=“imagenes/insttic.jpg”></a>
1. Crear una subcarpeta dentro de la carpeta donde &nbsp; &nbsp;
vas a guardar tu archivo html. <a href=“imag2.html”><img src=“imagenes/sectoriales.jpg”></a>
    </body>
2. Guardar las imágenes que vas a mostrar en el </html>
documento html en la subcarpeta creada.

3. Con el programa “paint de windows”,

redimensionar las imágenes a mostrar al tamaño Donde Pictures es el nombre de la carpeta donde está contenida la
de 10x10 y guardarlas en la misma carpeta image y insttic.jpg es la primera imagen y sectoriales.jpg la segunda
imágenes. imagen. Jpg es el formato de imagen. &nbsp es introducir un espacio
en blanco entre las dos imágenes para que no aparezcan pegadas.
 Mediante la etiqueta <table> y su cierre </table> se crea una tabla en HTML.
8. Tablas Para incluir filas y columnas hacemos:
<tr> </tr> para añadir una fila y <td> </td> para añadir celdas.

Para poner bordes a la table, incluimos el atributo border con su valor.

Ejemplo: <border=“3”> </border>. En las celdas de las tablas podemos incluir
textos, imagen u otras táblas.

Ejemplo de tabla:
<tr>
<td>1</td> 1 2 3
<td>2</td> 4 5 6
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
 Ejemplo de tabla

<!DOCTYPE html>
<html lang="es-ES">

8. Tablas     <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
<tabel>
<tr>
<td>Provincia</td>
<td>Djibloho</td>
<td>Kie Ntem</td>
<td>Wele Nzas</td>
<td>Bioko Norte</td>
</tr>
<tr>
<td>Habitantes</td>
<td>5.500.000</td>
<td>805.000</td>
<td>438.000</td>
<td>752.000</td>
</tr>
 <tr>
<td>Superficie</td>
8. Tablas <td>7.733</td>
<td>6.303</td>
<td>12.500</td>
<td>5.910</td>
</tr>
<tr>
<td>Densidad (hab./km2)</td>
<td>712</td>
<td>127.45</td>
<td>35.92</td>
<td>126.53</td>
</tr>
<tr>
<td>Código Postal</td>
<td>08</td>
<td>43</td>
<td>25</td>
Si añades el atributo border con valor 1 a la <td>17</td>
etiqueta table, la tabla tiene el aspecto de la </tr>
imagen. </table>
Se recomienda al alumno variar dicho     </body>
valor para ver como varia el aspecto de </html>
la tabla.
 Algunos atributos de las tablas:

8. Tablas colspan: Se indica un valor entero positivo que especifica la cantidad de

columnas que se expande la celda.

Dimensión de la tabla: El navegador se rowspan: Se indica un valor entero positivo que especifica la cantidad de filas
encarga normalmente de dimensionar el que se expande la celda.
tamaño total de la tabla de acuerdo con el
nº de filas, de columnas, por el contenido align: Alineación horizontal del contenido de la celda; tiene los siguientes
valores: right, left, center, justify o char. Por ejemplo: align=“right” produce una
de las celdas, espesor de los bordes, etc.
alineación a la derecha del contenido de la celda.

A veces queremos que la tabla tenga el valign: alineación vertical del contenido de la celda; puede ser top, middle,
tamaño que nos gusta, tanto en anchura bottom o baseline.
que en longitud. Esto se consigue char: Carácter usado para alinear el contenido de la celda, cuando se usa
añadiendo a la etiqueta table, los atributos align=“char”.
width y height igual a un porcentaje de la
dimensión de la pantalla o a una cifra que Título de la tabla:
<caption> </caption> permite añadir el título de la tabla justo encima de la
equivale al número de pixeles.
tabla.

Ejemplo: Encabeado de celda <th>: sirve para ponerle títulos a las columnas:
<table width=“60”>
<table height=“200”> Col1 Col2 Col3
1 2 3
4 5 6
 Formularios. Mediante los formularios:

9. Formulario ✔ Se pedirán datos al usuario

✔ Se mostrará información.

La estructura general de un formularios es la siguiente: <form> </form>, esta

URI = Uniform Resource Identifier, identifica etiqueta tiene dos atributos obligatorios: action y method.
un recurso en internet, sea ubicación,
nombre o ambos. action: sirve para indicar qué aplicación procesa los datos del formulario en el
servidor. Enviar un formulario es hacer una ordel submit.
URL = Uniform Resource Locator, hace
referencia a una dirección web method: indica el modo de transmisión de los datos del formulario. Puede
tomar los valores POST ó GET. El valor GET envía los datos usando la URI. El
valor POST envía los datos en el cuerpo del documento, ocultos al usuario (no
visible en la URI).

Ejemplo del método GET:

http://www.aprenderaprogramar.com/newuser.php?
nombre=Pepe&apellido=Flores&email=h52turam
%40uco.es&sexo=Mujer

El texto de color azul es la dirección web en sí. El símbolo ? Indica donde empiezan los
parámetros que se reciben desde el formulario que ha enviado los datos de la página web.
Después del símbolo ? aparecen pareja de datos son su nombre y valor separados por el
símbolo &.
 Elementos de los formularios: En los formularios tenemos elementos para

9. Formulario introducir datos, elementos donde seleccionamos el dato, elementos para

enviar órdenes, como botones, etc.

Elementos de introducción de datos:

<input type=“xxx” name=“yyy” value=“zzz”>. Donde:
Ejemplo:
Introduzca su nombre: xxx indica el tipo de introducción.
yyy es el nombre que le asignamos nosostros a la variable de introducción del
<input type=“text” name=“Nombre” dato.
size=“25” maxlength=“30”> zzz es el valor por defecto asociado al elemento.

❑ Cajas de texto: Una caja de texto es un elemento donde el usuario podrá

El tamaño de esta caja de texto será de introducir datos (letras y números). Ejemplo:
25 y no se podrán escribir más de 30
caracteres.
Introduzca su nombre:
<input tyoe=“text” name=“Nombre”>
<br>
Introduzca sus apellidos:
<input tyoe=“text” name=“Apellidos”>

Hay dos atributos interesantes de las cajas de texto. Son:

size: Se utiliza para variar la longitud de la caja de texto. Su valor es numérico.
maxlength: indica el número de caracteres que puede introducir el usuario. Si
no se especifica nada, no hay limitación.
9. Formulario
❑ Caja de texto Password o Contraseña: no permiten ver lo que se escribe,
aparecerán en pantalla unos símbolos de asteriscos. Su estructura es:

<input type=“password” name=“clave”>

Si queremos que la caja de texto sea invisible, hacemos:

<input type=“hidden” name=“clave”>. En este caso, se podrá acceder a su

contenido mediante programación (ejemplo JavaScript).

❑ Cajas de texto de múltiples líneas:

<textarea name=“Nombre” rows=“filas” cols=“columnas”> </textarea>

9. Formulario Ejemplo:
<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
<table>
<tr>
<td>Nombre</td>
<td><input type”text” name=“Nombre”></td>
</tr>
<tr>
<td>Apellidos</td>
<td><input type”text” name=“Apellidos”></td>
</tr>
 Ejemplo:
<tr>
9. Formulario <td>Observaciones</td>
<td>
<textarea name”notas” rows=“5” cols=“80”>
</textarea>
</td>
</tr>
</table>
</body>
</html>
 ❑ Casillas de verificación: son componentes que sólo tiene dos valores:
9. Formulario marcado o desmarcado. La propiedad value contiene el valor cuando la casilla
se selecciona, y si no está seleccionada, contiene la cadena vacía. La
propiedad checked se utiliza para que aparezca la casilla seleccionada
directamente

<input type=“checkbox” name=“Nombre”>

Un ejemplo de uso podría ser el siguiente:

Marque los leguajes que conoces:

<input type=“checkbox” name=“Java” vakue=“1” checked>Java
<br>
<input type=“checkbox” name=“NET” vakue=“2”>.NET
<br>
<input type=“checkbox” name=“PHP” vakue=“3”>PHP
<br>
<input type=“checkbox” name=“Cobol” vakue=“4”>Cobol

La salida de este código es la siguiente:

Marque los lenguajes que conoces:
9. Formulario ❑ Botones de opciones: Define varias opciones entre las que el usuario debe
seleccionar una de ellas.

<input type=“radio” name=“Nombre”>

En este caso, se da el mismo nombre a todos los botones.

Ejemplo:

<input type=“checkbox” name=“Lenguaje” vakue=“1” checked>Java

<br>
<input type=“checkbox” name=“Lenguaje” vakue=“2”>.NET
<br>
<input type=“checkbox” name=“Lenguaje” vakue=“3”>PHP
<br>
<input type=“checkbox” name=“Lenguaje” vakue=“4”>Cobol
9. Formulario ❑ Botones de opciones: Define varias opciones entre las que el usuario debe
seleccionar una de ellas.

<input type=“radio” name=“Nombre”>

En este caso, se da el mismo nombre a todos los botones.

Ejemplo:

<input type=“checkbox” name=“Lenguaje” vakue=“1” checked>Java

<br>
<input type=“checkbox” name=“Lenguaje” vakue=“2”>.NET
<br>
<input type=“checkbox” name=“Lenguaje” vakue=“3”>PHP
<br>
<input type=“checkbox” name=“Lenguaje” vakue=“4”>Cobol
9. Formulario ❑ Botones de envío y de reseteo de formulario: Tenemos dos botones: El
botón submit que sirve para enviar el formulario al servidor; y el botón reset,
que sirve para resetear el formulario para que vuelva a su estado original.

<input type=“submit” name=“BotonEnviar” >
<input type=“reset” name=“BotonReset” >

Con la propiedad value podemos cambiar el texto:

<input type=“submit” name=“BotonEnviar” value=“Enviar”>

<input type=“reset” name=“BotonReset” value=“Borrar”>

❑ Botones de comando: A estos botones se les puede asociar una

determinada acción, que puede estar programada en JavaScript o en algún otro
lenguaje que lo permita. Su estructura es:

<input type=“button” name=“Nombre” value=“Texto” >

Las propiedades value (el texto del botón) y OnClick (evento que se
desencadena al pulsar con el ratón sobre el botón, funcionan como en los
botones submit y reset.
9. Formulario

❑ Listas desplegables: Con estos botones podemos conseguir listas

desplegables y listas de opciones. Su estructura es:
<select name=“lista”>
<option name=“Nombre1”>…</option>
<option name=“Nombre2”>…</option>
…
<option name=“NombreN”>…</option>
</select>
 Ejemplo:
<!DOCTYPE html>
9. Formulario <html lang="es-ES">
    <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
Selecione su estado civil: <br>
<select name=“EstadoCivil”>
<option name=“Soltero”>Soltero</option>
<option name=“Casado”>Casado</option>
<option name=“Separado”>Separado</option>
<option name=“Divorciado”>Divorciado</option>
<option name=“Viudo”>Viudo</option>
</select>
</body>
</html>

Podemos usar la propiedad selected para hacer que una de las opciones se
encuentre seleccionada al cargar la página web.
<option name=“Soltero” selected>Soltero</option>

La propiedad size nos da otro tipo de control. Se recomienda al alumno

probarlo en el ejercicio anterior, modificando la línea de select
<select name=“EstadoCivil” size=“4”>
10. Multimedia ❑ Audio: Para insertar audio en una página html se utiliza el elemento <audio>
y su cierre es </audio>. Ejemplo:
<audio src=“audio.mp3”></audio>
Donde :
audio es la etiqueta que permite insertar audio
src es un atributo de la etiqueta audio
audio.mp3 es el valor, es decir, el archivo de audio que se va a reproducir.

Si se inserta este elemento tal cuál esta arriba, no se mostrará nada en el

navegador, tampoco se reproducirá el archivo de audio.

Para que se reproduzca el audio tenemos que añadir el atributo controls para
que muestre los controles para que el usuario pueda pulsar el botón “PLAY”.
Por tanto, el elemento HTML queda como sigue:
<audio src="audio.mp3" preload="none" controls></audio>

El atributo controls muestra los controles de reproducir, pausar, volumen, etc.

El atributo preload y con el valor none evita a que el audio se reproduzca
automáticamente tras abrir la página
10. Multimedia
Ejemplo:
<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
<audio src="Fally Ipupa - Amore.mp3" preload="none" controls></audio>
</body>
</html>

Observación: El archivo de audio a

reproducir tiene que estar en el mismo
directorio que el documento HTML para
que el reproductor pueda encontrarlo.
En caso contrario, habrá que indicarle al
navegador la ubicación del audio.
 ❑ Audio: Formatos y Codecs de audios más utilizados

10. Multimedia
10. Multimedia
❑ Video: Para poder insertar videos en nuestras páginas HTML tenemos que
utilizar la etiqueta <video>. Su estructura básica es:

<video src="video.mp4" width="640" height="480"></video>

esto mostrará el primer fotograma del video, con un tamaño de 640x480, pero
se verá como una imagen, ya que no muestra los controles del video y tampoco
tiene la autoreproducción activada. Podríamos solucionarlo indicando los
atributos controls o autoplay.

<video src="video.mp4" width="640" height="480“ controls></video>

10. Multimedia
Ejemplo:
<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <title>Mi primera web3</title>
        <meta charset="utf-8">
    </head>
    <body>
<video src="Romy.mp4" width="640" height="480“ controls></video>
</body>
</html>

Pulsa el botón Play para reproducir el

video
 ❑ Audio: Formatos y Codecs de video más utilizados

10. Multimedia