CFGS DESARROLLO DE APLICACIONES
MULTIPLATAFORMAS
MÓDULO LENGUAJES DE MARCAS
UNIDAD 01: HTML
Índice.
1.1. Introducción a HTML.
1.2. Estructura básica de una página HTML.
1.3. Elementos y atributos en HTML.
1.4. Trabajando con texto.
1.5. Enlaces y listas.
1.6. Imágenes y multimedia.
1.7. Tablas.
1.8. Formularios.
1.9. HTML5
1.10. Introducción a CSS.
1.1. Introducción a HTML.
Definición de HTML.
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).
Es el lenguaje de marcado estándar para crear páginas web.
HTML describe la estructura de una página web semánticamente y, originalmente, incluía
pistas para la apariencia del documento.
Componentes de HTML.
HTML está compuesto por una serie de elementos; los cuales se representan mediante
etiquetas.
Las etiquetas de HTML son los nombres de los elementos encerrados en corchetes
angulares: <nombre>.
1.1. Introducción a HTML.
Ejemplo de código HTML.
Muestra un ejemplo básico de cómo se ve el código HTML. Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>Mi primera página web</h1>
<p>¡Hola mundo! Esta es mi primera página web.</p>
</body>
</html>
1.2. Estructura básica de una página HTML.
Ejemplo de estructura básica de una página en HTML.
<!DOCTYPE html>
<html>
<head>
<!-- Metadatos del documento -->
</head>
<body>
<!-- Contenido del documento -->
</body>
</html>
1.2. Estructura básica de una página HTML.
Declaración DOCTYPE.
La etiqueta <!DOCTYPE html> es una declaración que debe aparecer al principio de los
documentos HTML. Aunque no es una de las etiquetas HTML clásicas, es una instrucción
crucial para el navegador.
Puntos clave sobre la etiqueta <!DOCTYPE html>:
1. Propósito: Indica al navegador qué tipo de documento debe abrir y qué sintaxis y
gramática utiliza su código fuente.
2. Importancia: Si no se usa el DOCTYPE adecuado, tu mensaje puede perderse en la
traducción, lo que resulta en una página web que no se ve ni funciona como debería.
3. Uso: Para usar DOCTYPE en HTML5, simplemente incluye la siguiente línea al principio
de tu documento HTML: <!DOCTYPE html>.
1.2. Estructura básica de una página HTML.
Etiquetas <html>, <head> y <body>.
1. Etiqueta <html>: representa la raíz de un documento HTML, todos los demás
elementos deben estar contenidos dentro de estas etiquetas. Es la primera etiqueta
que se abre y la última que se cierra en un documento HTML.
2. Etiqueta <head>: proporciona información general (metadatos) acerca del
documento, incluyendo su título y enlaces a scripts y hojas de estilo. La información
contenida en la etiqueta <head> no se muestra directamente en la ventana del
navegador, sino que se utiliza para proporcionar información a los navegadores y
motores de búsqueda. Aquí es donde se vinculan las hojas de estilo CSS y los scripts de
JavaScript.
3. Etiqueta <body>: define el área donde se coloca todo el contenido visible de la página
web. Es un contenedor que alberga texto, imágenes, enlaces, multimedia, formularios
y otros elementos HTML que los visitantes pueden ver y con los que pueden
interactuar.
1.2. Estructura básica de una página HTML.
Etiquetas de cabecera.
Son elementos que se utilizan para proporcionar información esencial sobre un documento HTML.
Existen dos tipos principales de etiquetas de cabecera en HTML:
1. Etiquetas de cabecera del documento: Estas etiquetas se encuentran en la sección <head> de
un documento HTML y no son visibles en la página web. Contienen metadatos del documento,
como el título de la página (<title>), enlaces al CSS, enlaces para personalizar favicon, y otros
metadatos. Aunque no se muestran en la página, desempeñan un papel crucial en la mejora de
la accesibilidad y el SEO de un sitio web.
2. Etiquetas de encabezado de sección: Estas son las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y
<h6>, que se utilizan para definir los encabezados de las secciones de contenido en una página
web <h1> es el encabezado de mayor importancia y <h6> es el menos importante. Estos
encabezados son visibles en la página web y ayudan a estructurar y organizar el contenido.
También son importantes para la accesibilidad, ya que las personas que utilizan lectores de
pantalla a menudo navegan por una página a través de sus encabezados.
1.2. Estructura básica de una página HTML.
Ejemplo de cómo se utilizan estas etiquetas en un documento HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mi página de prueba</title>
</head>
<body>
<h1>Encabezado principal</h1>
<h2>Subencabezado</h2>
<p>Este es el contenido de la sección.</p>
</body>
</html>
En este ejemplo, la etiqueta <title> dentro de <head> define el título del documento, que se
muestra en la pestaña del navegador. Las etiquetas <h1> y <h2> definen los encabezados de las
secciones del contenido de la página.
1.3. Elementos y atributos en HTML.
¿Qué son los elementos y atributos en HTML?
Son dos conceptos fundamentales en HTML:
1. Elementos HTML: Los elementos en HTML son unidades que componen la estructura
y definen el contenido y la semántica de una página web. Proporcionan información al
navegador sobre cómo presentar y organizar el contenido. Un elemento HTML se
compone de una etiqueta de apertura, contenido y una etiqueta de cierre.
Por ejemplo, en <p>Hola, mundo!</p>, <p> es la etiqueta de apertura, Hola,
mundo! es el contenido y </p> es la etiqueta de cierre.
1. Atributos HTML: Los atributos en HTML son información adicional que se coloca
siempre en la etiqueta de apertura para añadir o complementar información al
elemento HTML. Los atributos HTML modifican las características estándar de los
elementos HTML o agregan nuevas funcionalidades.
Por ejemplo, en <img src="[Link]" alt="Una imagen">, src y alt son atributos de
la etiqueta <img>. El atributo src especifica la fuente de la imagen y alt
proporciona un texto alternativo para la imagen.
1.3. Elementos y atributos en HTML.
Elementos de bloque vs elementos en línea.
En HTML, los elementos se clasifican en dos categorías principales: elementos de bloque y
elementos en línea.
Elementos de bloque (Block):
• Los elementos de bloque ocupan todo el espacio de su elemento padre (contenedor),
creando un “bloque”.
• Cada vez que se presenta un elemento de este tipo, se hace un salto de línea de
manera predeterminada sin la necesidad de colocar una etiqueta de salto de línea.
• Ejemplos de elementos de bloque incluyen <div>, <p>, <h1> a <h6>, <ul>, <ol>, <li>,
<table>, <tr>, <td>, <dl>, <dd>, <dt>, entre otros.
1.3. Elementos y atributos en HTML.
Elementos de bloque vs elementos en línea. (Cont.)
Elementos en línea (Inline):
• Los elementos en línea son aquellos cuyo contenido se encuentra en una misma línea.
• Si colocamos dos o más elementos en línea sin expresar un salto de línea, estos
elementos se presentarán uno seguido de otro en una misma línea.
• Ejemplos de elementos en línea incluyen <a>, <code>, <em>, <i>, <img>, <input>,
<span>, <strong>, <sub>, <sup>, <u>, entre otros.
Es importante entender las diferencias entre ambos tipos de elementos para poder crear
estructuras con CSS de manera efectiva.
1.3. Elementos y atributos en HTML.
Atributos comunes.
Los atributos en HTML son información adicional que se coloca siempre en la etiqueta de apertura
para añadir o complementar información al elemento HTML. Aquí te dejo algunos ejemplos de
atributos comunes en HTML:
1. id: Este atributo establece un identificador único a la etiqueta HTML. Solo puede existir un
elemento con el mismo id en un documento.
Por ejemplo: <div id="pagina">.
2. class: Este atributo establece una clase a una etiqueta HTML. Pueden existir varios elementos
con la misma clase en un documento.
Por ejemplo: <div class="contenido">.
3. style: Este atributo aplica propiedades CSS directamente al elemento HTML en cuestión.
Por ejemplo: <p style="color:blue;">.
4. alt: Este atributo proporciona un texto alternativo para elementos multimedia, como
imágenes.
Por ejemplo: <img src="[Link]" alt="Una imagen">.
1.3. Elementos y atributos en HTML.
Atributos comunes. (Cont.)
5. href: Este atributo establece la URL de destino de un enlace.
Por ejemplo: <a href="[Link]
6. draggable: Este atributo especifica si un elemento es arrastrable o no.
Por ejemplo: <img src="[Link]" draggable="true">.
7. hidden: Este atributo especifica si el elemento aún no es, o ya no es, relevante.
Por ejemplo: <p hidden>Este párrafo está oculto.</p>.
8. lang: Este atributo especifica el idioma del contenido del elemento.
Por ejemplo: <p lang="es">Este párrafo está en español.</p>.
9. spellcheck: Este atributo especifica si el elemento debe tener su ortografía y gramática
comprobadas o no.
Por ejemplo: <textarea spellcheck="true"></textarea>.
1.4. Trabajando con texto.
Etiquetas para encabezados.
Las etiquetas de encabezado son etiquetas HTML utilizadas para diferenciar los encabezados y
subencabezados del resto del contenido en una página web. Las más importantes son:
• H1: Es el encabezado principal y título de la página.
• H2: Es un subencabezado y punto de apoyo.
• H3: Es una subsección o elemento de lista bajo un H2.
• H4: Es una subsección o elemento de lista bajo un H3.
Es importante mencionar que una etiqueta h1 y una etiqueta de título (title) no son los mismos
elementos en HTML. La etiqueta de título comunica el título de la página para la ventana del
navegador y para el fragmento de la página de resultados del motor de búsqueda.
Las etiquetas de encabezado son importantes para el SEO porque ayudan a los usuarios a navegar
y explorar la página. Los motores de búsqueda dependen de los encabezados para comprender
mejor las secciones de una página. En cuanto a las mejores prácticas para las etiquetas de
encabezado, es recomendable no saturar tus etiquetas de encabezado con palabras clave. Aunque
sigue siendo una buena idea incluir palabras clave en tus etiquetas de encabezado, debes centrarte
en agregarlas de manera más sabia y natural.
1.4. Trabajando con texto.
Etiquetas para texto normal.
Las etiquetas para texto normal en HTML son utilizadas para estructurar y dar formato al
contenido textual de una página web. Aquí te dejo algunos ejemplos:
1. Etiqueta <p>: Esta etiqueta define un párrafo de texto.
Por ejemplo: <p>Este es un párrafo.</p>.
1. Etiquetas de encabezado <h1> a <h6>: Estas etiquetas se utilizan para definir los
encabezados y subencabezados de una página web. <h1> es el encabezado de mayor
importancia y <h6> es el menos importante.
Por ejemplo: <h1>Este es un encabezado principal</h1>.
1. Etiqueta <b>: Esta etiqueta se utiliza para dar formato de negrita al texto.
Por ejemplo: <b>Este texto está en negrita.</b>.
1. Etiqueta <i>: Esta etiqueta se utiliza para dar formato de cursiva al texto.
Por ejemplo: <i>Este texto está en cursiva.</i>.
1.4. Trabajando con texto.
Etiquetas para texto normal. (Cont.)
5. Etiqueta <u>: Esta etiqueta se utiliza para subrayar el texto.
Por ejemplo: <u>Este texto está subrayado.</u>.
6. Etiqueta <em>: Esta etiqueta se utiliza para enfatizar el texto.
Por ejemplo: <em>Este texto está enfatizado.</em>.
7. Etiqueta <strong>: Esta etiqueta se utiliza para indicar que el texto es importante.
Por ejemplo: <strong>Este texto es importante.</strong>.
8. Etiqueta <small>: Esta etiqueta se utiliza para mostrar el texto en un tamaño más
pequeño.
Por ejemplo: <small>Este texto es pequeño.</small>.
1.4. Trabajando con texto.
Formato de texto.
El formato de texto en HTML se logra utilizando varias etiquetas que rodean el texto y
transforman su apariencia y estructura. Por ejemplo:
• Párrafos: Cada párrafo debe estar delimitado por un elemento <p>, como en este ejemplo:
<p>Soy un párrafo, ¡desde luego que lo soy!</p>
• Encabezados: Hay seis elementos de encabezado: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Cada
elemento representa un nivel de contenido diferente en el documento; <h1> representa el título
principal, <h2> representa el subtítulo, <h3> representa el subtítulo del subtítulo, y así
sucesivamente.
• Negrita: Para hacer un texto en negrita, puedes usar la etiqueta <b> o <strong>, por ejemplo:
<b>texto en negrita</b>
<strong>texto en negrita</strong>
1.4. Trabajando con texto.
Formato de texto. (Cont.)
• Cursiva: Para hacer un texto en cursiva, puedes usar la etiqueta <i> o <em>, por
ejemplo:
<i>texto en cursiva</i>
<em>texto en cursiva</em>
• Subrayado: Para subrayar un texto, puedes usar la etiqueta <u>, por ejemplo:
<u>texto subrayado</u>
• Texto grande y pequeño: Para hacer un texto más grande o más pequeño, puedes usar
las etiquetas <big> y <small>, respectivamente.
Las etiquetas deben abrirse y cerrarse correctamente, y pueden combinarse para aplicar
múltiples formatos a un texto.
1.5. Enlaces y listas.
Enlaces en HTML
Los enlaces, también conocidos como hipervínculos, son una parte fundamental de la
web. Se crean utilizando el elemento ancla <a> con un atributo href que contiene la
dirección web a la que apunta el enlace. Aquí tienes un ejemplo:
<a href="[Link] del enlace</a>
El “Texto del enlace” es el texto visible que los usuarios pueden hacer clic para ir a la
dirección web especificada.
1.5. Enlaces y listas.
Listas en HTML.
Pueden ser ordenadas o desordenadas.
• Listas ordenadas: Se crean con la etiqueta <ol>, y cada elemento de la lista se define con la
etiqueta <li>. Por ejemplo:
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
</ol>
• Listas desordenadas: Se crean con la etiqueta <ul>, y cada elemento de la lista se define con la
etiqueta <li>. Por ejemplo:
<ul>
<li>Elemento</li>
<li>Otro elemento</li>
</ul>
1.5. Enlaces y listas.
Listas en HTML. (Cont.)
También puedes combinar enlaces y listas. Por ejemplo, puedes hacer que cada elemento
de una lista sea un enlace:
<ul>
<li><a href="[Link] 1</a></li>
<li><a href="[Link] 2</a></li>
</ul>
1.5. Enlaces y listas.
Listas anidadas.
Son listas que contienen otras listas dentro de sus elementos, combinando los tres tipos de listas (<ul>, <ol>,
<dl>) para crear una lista más compleja y específica; para crear listas anidadas, tenemos que hacer que el
elemento de una de las listas sea a su vez una lista. Por ejemplo, podemos tener una lista no ordenada y uno
de los ítems puede ser una lista ordenada. Por ejemplo:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
En este ejemplo, “Item 2” tiene una lista anidada con “Subitem 1” y “Subitem 2”. Esta es la forma correcta de
escribir listas anidadas en HTML.
1.6. Imágenes y multimedia.
Formatos de imágenes.
En HTML, se pueden utilizar varios formatos de imagen. Aquí te dejo una descripción de
los más comunes:
1. GIF: formato de imagen para la web se hizo muy popular a principios de los años 90.
Soporta imágenes estáticas y animaciones simples juntando unos cuantos frames y
admite transparencias. Sin embargo, su calidad deja bastante que desear, ya que
cuenta con una pequeña paleta de hasta 256 colores.
2. JPG: formato de imagen para la web se utiliza principalmente para fotografías.
Admite millones de colores, lo que lo hace ideal para imágenes con muchos detalles y
variaciones de color.
3. PNG: formato de imagen ocupa muy poco con gráficos. Es perfecto para todos los
elementos del diseño web, ya que la mayoría, ocupan menos que con jpg. Permite
hacer unas transparencias perfectas, algo que con jpg no se puede hacer.
1.6. Imágenes y multimedia.
Formatos de imágenes. (Cont.)
4. SVG: Scalable Vector Graphics. Este formato permite hasta crear plantillas web
enteras con gráficos vectoriales.
5. WebP: Un formato de imagen bastante reciente creado por Google que se creó con la
intención de juntar todas las ventajas que tienen los otros formatos de imagen.
Para insertar una imagen en una página web, se utiliza el elemento <img>. Este elemento
requiere al menos un atributo para ser utilizado: src, que contiene una ruta que apunta a la
imagen que quieres poner en la página. Por ejemplo:
<img src="[Link]" />
Si la imagen estuviera en un subdirectorio llamado images, entonces deberías incrustar la
imagen así:
<img src="images/[Link]" />
1.6. Imágenes y multimedia.
Inserción de audio y video.
Para insertar contenido de audio y video en una página web, puedes usar los elementos
<audio> y <video> de HTML5. Aquí te dejo un ejemplo básico de cómo se vería el código
para insertar un video:
<video src="ruta_del_video.mp4" controls>
<p>Tu navegador no soporta HTML5 video. Aquí está el <a
href="ruta_del_video.mp4">enlace del video</a>.</p>
</video>
En este código, src es la ruta al archivo de video que quieres mostrar. El atributo controls
agrega controles de reproducción al video, como play, pause, y volumen.
1.6. Imágenes y multimedia.
Formatos de audio y video.
Los elementos <audio> y <video> de HTML permiten incrustar contenido de audio y video
en una página web.
• Elemento <video>: Este elemento permite incrustar videos en un documento HTML.
Un ejemplo muy simple sería:
<video src="[Link]" controls>
<p> Tu navegador no soporta HTML5 video. Aquí está el <a
href="[Link]">enlace del video</a>. </p>
</video>
• Elemento <audio>: Funciona de manera similar al elemento <video>, pero para
contenido de audio.
1.6. Imágenes y multimedia.
Formatos de audio y video. (Cont.)
Es importante tener en cuenta que diferentes navegadores soportan diferentes formatos
de video y audio. Por ejemplo, los formatos como MP3, MP4 y WebM son llamados
formatos contenedores.
Además, existen atributos útiles que puedes usar con estos elementos, como controls
(para mostrar controles de reproducción), autoplay (para iniciar la reproducción
automáticamente), loop (para repetir el video o audio automáticamente al finalizar), entre
otros.
Por último, es importante mencionar que existen proveedores de video online (OVPs)
como YouTube, Dailymotion y Vimeo, y proveedores de audio como Soundcloud. Estas
compañías ofrecen una forma conveniente de alojar y consumir videos y audios, y
proporcionan códigos prefabricados para incrustar estos contenidos en tus sitios web.
1.7. Tablas.
Creación de tablas.
Las tablas en HTML son una forma de organizar datos en filas y columnas. Este concepto ha sido
adoptado por HTML para transmitir información que, de otro modo, no sería comprendida tan
fácilmente.
Una tabla básica en HTML puede ser declarada usando tres elementos principales:
• table: El contenedor principal.
• tr: Representa a las filas que contienen las celdas.
• td: Representa a las celdas.
Ejemplo básico:
<table>
<tr>
<td> Celda 1 </td>
<td> Celda 2</td>
</tr>
</table>
1.7. Tablas.
Atributos de las tablas.
Los atributos de las tablas en HTML permiten personalizar y controlar el comportamiento
de las tablas. Algunos de los atributos más importantes son:
• align: Alinea horizontalmente la tabla con respecto a su entorno.
• background: Nos permite colocar un fondo para la tabla a partir de un enlace a una
imagen.
• bgcolor: Da color de fondo a la tabla.
• border: Define el número de píxeles del borde principal.
• bordercolor: Define el color del borde.
1.7. Tablas.
Atributos de las tablas. (Cont.)
• cellpadding: Define, en píxeles, el espacio entre los bordes de la celda y el contenido
de la misma.
• cellspacing: Define el espacio entre los bordes (en píxeles).
• height: Define la altura de la tabla en píxeles o porcentaje.
• width: Define la anchura de la tabla en píxeles o porcentaje.
Muchos de estos atributos están en desuso desde la versión del estándar HTML5, y se
recomienda usar CSS para aplicar estilos a las tablas.
Además, existen etiquetas como <tr>, <td>, <th>, <caption>, <thead>, <tbody>, <tfoot>,
<colgroup>, <col> que se utilizan para completar los datos de las tablas en una página
web.
1.7. Tablas.
Etiquetas <th> y <caption>.
Etiqueta <th>: La etiqueta <th> en HTML se utiliza para definir una celda como
encabezado de un grupo de celdas en una tabla. La naturaleza exacta de este grupo está
definida por los atributos scope y headers.
Esta etiqueta puede contener contenido de flujo, pero sin encabezado, pie de página,
contenido de seccionamiento, o contenido descendiente de encabezados.
La etiqueta de inicio es obligatoria. La etiqueta de cierre puede ser omitida si es
inmediatamente seguida por el elemento <th> o <td> o si no hay más datos en su
elemento padre.
1.7. Tablas.
Etiquetas <th> y <caption>. Ejemplo <th>.
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</table>
1.7. Tablas.
Etiquetas <th> y <caption>.
Etiqueta <caption>: La etiqueta <caption> en HTML se utiliza para añadir un título o una
descripción a una tabla.
El contenido dentro de la etiqueta <caption> se coloca en la parte superior o en la parte
inferior de la tabla, dependiendo de la configuración del navegador y de los estilos CSS
que se apliquen.
Un buen <caption> debería introducir contexto para una tabla, haciéndola
significativamente más fácil de comprender. Esta etiqueta solo puede ser declarada al
comienzo de la tabla, antes de cualquier otro elemento dentro de ésta.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.7. Tablas.
Etiquetas <th> y <caption>. Ejemplo <caption>.
<table>
<caption>Tabla de edades</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</table>
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Creación de formularios.
1. <form>: Esta etiqueta se utiliza para crear un formulario HTML para la entrada del usuario.
Puede contener elementos como <input>, <textarea>, <button>, etc.
2. <input>: Este es un elemento de entrada versátil que puede ser de diferentes tipos, como
texto, correo electrónico, contraseña, radio, casilla de verificación, etc., dependiendo del
atributo type.
3. <textarea>: Este elemento se utiliza para la entrada de texto multilínea. A diferencia de <input
type="text">, que permite una sola línea de entrada, <textarea> es útil cuando se espera que
los usuarios proporcionen detalles más extensos, como comentarios o descripciones.
4. <button>: Este elemento representa un botón. Por defecto, un <button> dentro de un <form>
actúa como un botón de envío, pero su comportamiento puede ser modificado.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Creación de formularios. Ejemplo.
<form action="/submit" method="post">
<label for="name">Nombre:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Correo electrónico:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">Mensaje:</label><br>
<textarea id="message" name="message"></textarea><br>
<button type="submit">Enviar</button>
</form>
Este formulario incluye campos para el nombre, el correo electrónico y un mensaje, así como un botón para
enviar el formulario. Cuando el usuario hace clic en “Enviar”, los datos del formulario se envían a la URL
especificada en el atributo action del formulario (/submit en este caso) utilizando el método HTTP
especificado (post en este caso).
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Controles de entrada.
Los controles de entrada de un formulario en HTML son elementos que permiten a los usuarios
interactuar con el formulario, proporcionando datos que pueden ser enviados al servidor. Aquí te
presento algunos de los controles de entrada más comunes:
1. Text: Define un campo de una sola línea de texto.
<input type="text" placeholder="Introduce nombre" />
2. Password: Define un campo para contraseñas. Este campo oculta el texto ingresado por el
usuario.
<input type="password" placeholder="Introduce tu contraseña" />
3. Email: Este tipo de campo se define utilizando el valor email en el atributo type del elemento
input. Obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida.
<input type="email" id="email" name="email" />
4. Number: Este tipo de entrada permite al usuario insertar solo números.
<input type="number" placeholder="Introduce un número" />
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Controles de entrada. (Cont.)
1. Radio: Permite al usuario seleccionar una opción de entre varias.
<input type="radio" />
1. Checkbox: Permite al usuario seleccionar varias opciones de entre varias.
<input type="checkbox" />
1. Submit: Agrega un botón de envío a los formularios. Cuando un usuario hace clic en él, envía
automáticamente el formulario.
<input type="submit" value="Enviar" />
1. Button: Crea un botón, que puede ser manipulado por el tipo de detector de eventos onClick de
JavaScript.
<input type="button" value="Haz clic" />
Estos son solo algunos ejemplos de los tipos de controles de entrada que puedes usar en un formulario
HTML. Cada uno de estos tipos de entrada tiene un propósito específico y ayuda a guiar al usuario a través
del proceso de llenado del formulario. La apariencia de un control de formulario puede variar dependiendo
del navegador y la plataforma utilizada.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Tipos de <input>.
Los elementos <input> en HTML son utilizados para crear controles interactivos para
formularios web con el fin de aceptar datos del usuario. El comportamiento de <input>
depende del valor que se le da al atributo type. Algunos de los tipos de <input> más comunes
son:
1. Text: Define un campo de una sola línea de texto.
<input type="text" placeholder="Introduce nombre" />
2. Password: Define un campo para contraseñas. Este campo oculta el texto ingresado por el
usuario.
<input type="password" placeholder="Introduce tu contraseña" />
3. Submit: Define un botón para enviar los datos del formulario.
<input type="submit" value="Enviar" />
4. Reset: Define un botón para resetear todos los valores del formulario a los valores por
defecto.
<input type="reset" value="Restablecer" />
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Tipos de <input>. (Cont.)
5. Radio: Define un radio button, que te permite seleccionar UNA opción entre varias.
<input type="radio" name="opcion" value="opcion1"> Opción 1
<input type="radio" name="opcion" value="opcion2"> Opción 2
6. Checkbox: Define un checkbox. Nos permite seleccionar ninguna o varias opciones.
<input type="checkbox" name="opcion" value="opcion1"> Opción 1
<input type="checkbox" name="opcion" value="opcion2"> Opción 2
7. Button: Define un botón.
<input type="button" value="Haz clic" />
8. Email: Para contener direcciones de correo electrónico.
<input type="email" id="email" name="email" />
9. Number: Sirve para valores numéricos.
<input type="number" placeholder="Introduce un número" />
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Tipos de <input>. (Cont.)
10. Date: Se usa para seleccionar fechas.
<input type="date" id="fecha" name="fecha" />
11. File: Define un campo para subir ficheros.
<input type="file" id="archivo" name="archivo" />
12. Range: Proporciona un slider para seleccionar un valor numérico entre dos valores (por
defecto de 0 a 100).
<input type="range" min="0" max="100" step="1" />
13. Search: Se usa para buscadores (se comporta como un input text).
<input type="search" id="busqueda" name="busqueda" />
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Tipos de <input>. (Cont.)
14. Tel: Se usa para números de teléfono.
<input type="tel" id="telefono" name="telefono" />
15. Time: Permite seleccionar una hora (sin tener en cuenta la zona horaria).
<input type="time" id="hora" name="hora" />
16. URL: Se usa para rellenar el input con una URL.
<input type="url" id="url" name="url" />
Estos son solo algunos ejemplos de los tipos de <input> que puedes usar en un formulario
HTML. Cada uno de estos tipos de entrada tiene un propósito específico y ayuda a guiar al
usuario a través del proceso de llenado del formulario.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Etiquetas <label> y <fieldset>.
Etiqueta <label>: se utiliza para definir una etiqueta para un elemento en una interfaz de
usuario; puede estar asociado con un control ya sea mediante la utilización del atributo for,
o ubicando el control dentro del elemento label. Tal control es llamado “el control
etiquetado” del elemento label.
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
En este ejemplo, la etiqueta “Nombre:” está asociada con el campo de entrada debido al
uso del atributo for en la etiqueta <label> y el atributo id en la etiqueta <input>.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.8. Formularios.
Etiquetas <label> y <fieldset>.
Etiqueta <fieldset>: se utiliza para agrupar elementos relacionados dentro de un formulario. Este
elemento puede ser particularmente útil en formularios grandes, donde la legibilidad y la facilidad
de acceso pueden ser mejoradas mediante la segmentación:
<form>
<fieldset>
<legend>Información Personal</legend>
Nombre: <input type="text" name="nombre">
Apellidos: <input type="text" name="apellidos">
</fieldset>
</form>
En este ejemplo, el elemento <fieldset> se utiliza para agrupar los campos de entrada “Nombre” y
“Apellidos” bajo el título "Información Personal".
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
¿Qué es HTML5?.
HTML5 es la quinta revisión importante del Lenguaje de Marcado de Hipertexto
(HyperText Markup Language).
Es una versión que funciona con las bases del HTML de siempre, pero que cuenta con
etiquetas adicionales que permiten crear sitios web más modernos y más compatibles con
las tecnologías digitales actuales.
HTML5 no es un lenguaje de programación como tal, sino una manera de estructurar,
interpretar y desplegar el contenido de un documento web mediante etiquetas y atributos
que le indican al navegador qué es cada elemento (por ejemplo, un subtítulo, un párrafo,
una frase en negrita, una lista de imágenes, etc.).
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Ventajas de HTML5:
• Mejora la experiencia del usuario en los navegadores web más comunes (HTML5 es compatible
con los navegadores Google, Safari, Firefox, etc.) y entre distintos dispositivos (diseño
responsive).
• Permite obtener un mejor posicionamiento en buscadores (de hecho, Google recomienda su
uso).
• Soporta funcionalidades multimedia e interactivas, como vídeos o formularios, sin necesidad de
plugins.
• Permite utilizar API’s de Javascript para incluir elementos complejos, como dibujos 3D o mapas
directamente en el documento.
HTML5 evolucionó de HTML4, y cuenta con algo llamado “etiquetas semánticas”, que permiten
que el sitio sea indexado con mayor exactitud por los buscadores y definir mejor la estructura y
componentes de una web.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Nuevas etiquetas y atributos en HTML5.
HTML5 introdujo una serie de nuevas etiquetas y atributos que mejoran la semántica y la interactividad
de las páginas web. Aquí te presento algunas de las más destacadas:
1. Etiquetas semánticas: Estas etiquetas proporcionan un contexto adicional sobre el contenido que
contienen, lo que ayuda a los motores de búsqueda y a las tecnologías de asistencia a entender
mejor la estructura de la página.
• <article>: Define un contenido independiente que tiene sentido por sí mismo, como un post de
blog o una noticia.
• <section>: Define una sección de un documento, como capítulos, encabezados, pies de página,
etc.
• <nav>: Se utiliza para definir una sección de enlaces de navegación.
• <header> y <footer>: Definen el encabezado y el pie de página de un documento o sección.
• <aside>: Define contenido relacionado con el contenido principal, como barras laterales.
• <figure> y <figcaption>: Se utilizan para marcar una imagen o diagrama y su leyenda.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Nuevas etiquetas y atributos en HTML5. (Cont.)
2. Etiquetas de formulario: HTML5 introdujo nuevas etiquetas de formulario y atributos para
permitir una mayor interactividad y validación del lado del cliente.
• <datalist>: Define una lista de opciones predefinidas para un input.
• <output>: Representa el resultado de un cálculo.
• <progress>: Representa el progreso de una tarea.
• <meter>: Representa una medida escalar dentro de un rango conocido.
3. Etiquetas multimedia: Estas etiquetas permiten la integración nativa de contenido
multimedia en las páginas web.
• <audio> y <video>: Permiten la incorporación de contenido de audio y video sin necesidad de
plugins externos.
• <source>: Se utiliza dentro de las etiquetas de audio y video para proporcionar varias fuentes de
medios.
• <track>: Se utiliza para especificar pistas de texto para las etiquetas de audio y video.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Nuevas etiquetas y atributos en HTML5. (Cont.)
4. Etiquetas gráficas: HTML5 introdujo etiquetas para trabajar con gráficos en la web.
• <canvas>: Se utiliza para dibujar gráficos en la web a través de scripting
(generalmente JavaScript).
• <svg>: Permite la incorporación de gráficos vectoriales escalables en la web.
Estas son solo algunas de las nuevas etiquetas y atributos introducidos en HTML5. Hay
muchas más características que hacen de HTML5 una herramienta poderosa para el
desarrollo web.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Formularios en HTML5.
HTML5 ha introducido varias mejoras y nuevas características para los formularios, lo que
facilita la creación de formularios más interactivos y funcionales. Algunas de las novedades
más destacadas son:
1. Nuevos tipos de campos: HTML5 ha introducido nuevos tipos de campos para
formularios, como campos de búsqueda, teléfono, URL, selectores de color, fecha,
entre otros.
2. Placeholder: Es una marca de posición, normalmente un texto de ejemplo que aparece
ya escrito en el campo del formulario, y que desaparece cuando hacemos click en él.
3. Autofocus: Sirve para poner por defecto el foco en un campo al cargar la página
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.9. HTML5.
Formularios en HTML5. (Cont.)
4. Autocomplete: Permite al navegador predecir el valor que el usuario introducirá en un
campo de formulario.
5. Required: Este atributo se utiliza para indicar que un campo de formulario es
obligatorio.
6. Datalist y List: El elemento <datalist> representa la lista de elementos <option> como
sugerencias cuando se llena un campo <input>.
7. Nuevas Clases de ”input”: Se han añadido nuevas clases de input para mejorar la
interactividad y funcionalidad de los formularios.
8. Sliders: Permiten a los usuarios seleccionar un valor o rango de valores en un rango
predefinido.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
¿Qué es CSS?
Significa Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje de
programación que se utiliza para determinar el diseño y la presentación de los documentos
electrónicos, principalmente páginas web.
A diferencia de HTML, que se utiliza para estructurar el contenido de una página web, CSS
se utiliza para definir cómo se debe mostrar ese contenido. Esto incluye cosas como los
colores, las fuentes, el espaciado entre elementos, y otros aspectos del diseño.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Puntos clave de CSS.
1. Separación de contenido y diseño: CSS permite separar el contenido de una página web
(definido en HTML) de su diseño. Esto hace que el código sea más fácil de mantener y permite
cambiar el diseño sin alterar el contenido.
2. Estilos en cascada: De ahí viene el nombre de CSS. Si se definen múltiples estilos para el
mismo elemento, CSS decidirá cuál aplicar basándose en una serie de reglas de prioridad.
3. Compatibilidad con todos los navegadores: Todos los navegadores modernos soportan CSS,
lo que significa que puedes utilizarlo para diseñar páginas web que se verán consistentes en
diferentes plataformas.
4. Control preciso sobre el diseño: CSS ofrece un control muy preciso sobre cómo se muestran
los elementos HTML en el navegador.
5. Estilos reutilizables: Con CSS, puedes definir estilos que pueden ser reutilizados en diferentes
partes de tu sitio web, lo que puede ahorrar mucho tiempo y esfuerzo.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Formas de añadir CSS a una página HTML.
Existen tres formas principales de insertar CSS en HTML: CSS externo, CSS interno y CSS
en línea.
1. CSS Externo: Este método implica la creación de un archivo CSS separado (con
extensión .css) que contiene todas las reglas de estilo. Este archivo se vincula al
documento HTML utilizando el elemento <link> dentro de la sección <head> del
documento HTML. Aquí tienes un ejemplo de cómo se ve esto:
<head>
<link href="mi_estilo.css" rel="stylesheet" type="text/css">
</head>
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Formas de añadir CSS a una página HTML. (Cont.)
2. CSS Interno: En este método, las reglas de estilo se colocan directamente en el
documento HTML dentro de un bloque <style> que se encuentra en la sección <head>
del documento. Aquí tienes un ejemplo de cómo se ve esto:
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Formas de añadir CSS a una página HTML. (Cont.)
3. CSS en línea: Este método implica agregar estilos directamente a los elementos HTML
individuales utilizando el atributo style. Este método se utiliza principalmente para
aplicar estilos únicos a elementos individuales y no se recomienda para estilos que se
aplicarán en todo el sitio web. Aquí tienes un ejemplo de cómo se ve esto:
<p style="color:blue;">Este es un párrafo con CSS en línea.</p>
Cada uno de estos métodos tiene sus propios usos y ventajas. El CSS externo es útil para
aplicar estilos consistentes en todo el sitio web y facilita el mantenimiento del código. El
CSS interno puede ser útil para estilos específicos de una sola página, mientras que el CSS
en línea se utiliza para aplicar estilos a elementos individuales.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Selectores, propiedades y valores en CSS.
En CSS, los selectores, propiedades y valores son tres componentes fundamentales que
trabajan juntos para definir el estilo de los elementos HTML.
1. Selectores: Los selectores CSS son patrones que se utilizan para seleccionar los
elementos a los que se les aplicará un estilo. Existen varios tipos de selectores en CSS,
incluyendo:
• Selector de tipo: Selecciona todos los elementos que coinciden con el nombre del
elemento especificado.
• Selector de clase: Selecciona todos los elementos que tienen el atributo de clase
especificado.
• Selector de ID: Selecciona un elemento basándose en el valor de su atributo id.
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Selectores, propiedades y valores en CSS. (Cont.)
1. Selectores: Los selectores CSS son patrones que se utilizan para seleccionar los
elementos a los que se les aplicará un estilo. Existen varios tipos de selectores en CSS,
incluyendo:
• Selector universal: Selecciona todos los elementos.
• Selector de atributo: Selecciona elementos basándose en el valor de un
determinado atributo.
• Combinadores: Seleccionan elementos basándose en su relación con otros
elementos. Por ejemplo, el combinador de hermanos adyacentes (+), el combinador
general de hermanos (~), el combinador de hijo (>), y el combinador de
descendientes (espacio).
CES JUAN PABLO II – CÁDIZ. - CURSO 2023-2024 – MANUEL ARANA SÁNCHEZ - LENGUAJES DE MARCAS
1.10. Introducción a CSS.
Selectores, propiedades y valores en CSS. (Cont.)
2. Propiedades: Las propiedades son las características que se desean definir para los
elementos seleccionados. Por ejemplo, color, font-size, background-color, margin,
padding, etc.
3. Valores: Los valores son las especificaciones que se asignan a las propiedades. Por
ejemplo, si la propiedad es color, el valor podría ser blue o #0000FF.
Un ejemplo de cómo trabajan juntos los selectores, propiedades y valores en CSS sería:
p{
color: blue;
}
En este caso, p es el selector, color es la propiedad y blue es el valor. Esto significa que el
color del texto para todos los elementos <p> será azul.