Creación De Páginas Web Con El Lenguaje De Marcas. Uf1302. E-Book

Beatriz Coronado García

• Herausgeber: Clube de Autores
• Kategorie: Für Kinder und Jugendliche
• Sprache: Spanisch

Seitenzahl: 100

Veröffentlichungsjahr: 2025

Beschreibung

Puede solicitar gratuitamente las soluciones a todas las actividades en el email [email protected] Capacidades que se adquieren con este Manual: - Identificar los elementos proporcionados por los lenguajes de marcas y confeccionar páginas web utilizando estos lenguajes teniendo en cuenta sus especificaciones técnicas. - Identificar las características y funcionalidades de las herramientas de edición web, y utilizarlas en la creación de páginas web teniendo en cuenta sus entornos de desarrollo.

Leseprobe

Creación de páginas web con el lenguaje de marcas. UF1302.

Autora: Beatriz Coronado García.

© EDITORIAL TUTOR FORMACIÓN

C/ San Millán, 7, bajo 10

26004 Logroño (La Rioja)

Tlf. 610687276

Email: [email protected]

Web: https://tutorformacion.es   o  https://editorial.tutorformacion.es

Edición: 2024

ISBN: 978-84-19189-77-6

Depósito legal: LR 781-2024

Reservados todos los derechos de publicación en cualquier idioma.

Según el código penal vigente ninguna parte de este o cualquier otro libro puede ser reproducida, grabada en alguno de los sistemas de almacenamiento existentes o transmitida por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro, sin autorización previa y por escrito de D. Miguel Ángel Ladrón Jiménez; su contenido está protegido por la ley vigente que establece penas de prisión y/o multas a quienes intencionadamente reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica.

Contenido

Introducción

Los lenguajes de marcas

1.Características de los lenguajes de marcas.

1.1.Utilización de etiquetas.

1.2.Compatibilidad.

1.3.Editores de texto.

2.Estructura de un documento creado con lenguaje de marcas.

2.1.Comienzo del archivo.

2.2.Encabezados.

2.3.Título.

2.4.Estilos.

2.5.Cuerpo.

2.6.Scripts.

3.Navegadores web.

3.1.Navegadores modo texto.

3.2.Los navegadores más utilizados.

3.3.Diferencias de visualización.

4.Marcas para dar formato al documento.

4.1.Marcas de inicio y final.

4.2.Marcas de aspecto.

4.3.Marcas de párrafo.

4.4.Marcas de fuentes y colores.

4.5.Listas ordenadas.

5.Enlaces y direccionamientos.

5.1.Creación de un enlace.

5.2.Tipos de enlace.

5.3.Los enlaces y la navegación.

6.Marcos y capas.

6.1.Marcos.

6.2.Capas.

7.Prueba de autoevaluación.

Imágenes y elementos multimedia

1.Inserción de imágenes: formatos y atributos.

1.1.Incluir imágenes en las páginas.

1.2.Atributos de las imágenes.

1.3.Propiedades de ubicación de las imágenes.

2.Mapas de imágenes.

2.1.Definición de mapa.

2.2.Creación de un mapa con una imagen.

2.3.Establecer diferentes partes en la imagen.

2.4.Vincular las diferentes partes de la imagen.

3.Inserción de elementos multimedia: audio, vídeo y programas.

3.1.Características y propiedades de los elementos multimedia.

3.2.Recursos necesarios para el funcionamiento de los elementos multimedia.

3.3.Etiquetas y propiedades para la inserción de audio.

3.4.Etiquetas y propiedades para la inserción de vídeo.

3.5.Etiquetas y propiedades para la inserción de programas.

4.Formatos de audio y vídeo.

4.1.Descripción de los formatos de audio.

4.2.Descripción de los formatos de vídeo.

4.3.Configuración de los recursos para audio.

4.4.Configuración de los recursos para vídeo.

5.Marquesinas.

5.1.Los textos con movimiento.

5.2.Utilización de las etiquetas para incluir marquesinas.

5.3.Utilización de las marquesinas y los distintos navegadores.

6.Prueba de autoevaluación.

Técnicas de accesibilidad y usabilidad

1.Accesibilidad web, ventajas de la accesibilidad.

1.1.Definición de Accesibilidad.

1.2.Aplicabilidad de la Accesibilidad.

1.3.Descripción de las ventajas de la Accesibilidad.

1.4.Usabilidad web, importancia de la usabilidad.

1.5.Interacción web-individuo.

1.6.Aplicabilidad de la usabilidad.

1.7.Recursos sobre usabilidad.

2.Aplicaciones para verificar la accesibilidad de sitios web (estándares).

2.1.Recursos web de estándares.

2.2.Utilización de los recursos en las páginas web.

2.3.Comprobar la accesibilidad en las páginas web.

3.Diseño de sitios web usables.

3.1.Descripción de sitios web usables.

3.2.Estudio de la estructura y diseño de los sitios web usables.

4.Adaptación de sitios web usables.

4.1.Utilización de los sitios web usables.

5.Prueba de autoevaluación:

Herramientas de edición web

1.Instalación y configuración de herramientas de edición web.

2.Funciones y características.

2.1.Descripción de los elementos de las herramientas Web.

2.2.Ubicación de los elementos de las herramientas web.

2.3.Propiedades de los elementos de las herramientas web.

2.4.Tareas para realizar con una herramienta de edición web.

2.5.El lenguaje de marcas y las herramientas de edición web.

3.Prueba de autoevaluación:

Prueba de evaluación final

Introducción

Este contenido está diseñado para proporcionar una guía completa y práctica sobre la creación de páginas web utilizando lenguajes de marcas. A lo largo de sus capítulos, se detallan los fundamentos y técnicas esenciales para desarrollar sitios web funcionales y atractivos, abarcando desde la estructura básica de los documentos HTML hasta la inserción de elementos multimedia y la aplicación de técnicas avanzadas de accesibilidad y usabilidad.

El contenido se organiza en cuatro grandes secciones, cada una abordando un aspecto clave del desarrollo web. La primera sección, dedicada a los lenguajes de marcas, ofrece una introducción detallada a estos lenguajes, destacando sus características, estructura y compatibilidad. Se incluyen ejemplos prácticos y capturas de pantalla para ilustrar el uso correcto de etiquetas y la creación de documentos HTML.

La segunda sección explora cómo integrar imágenes, audio, vídeo y otros elementos multimedia en las páginas web. Se proporciona información sobre los formatos de archivos, los atributos de las imágenes y los métodos para crear mapas de imágenes y marquesinas, asegurando que el contenido multimedia se presenta de manera efectiva y atractiva.

La tercera parte aborda la importancia de diseñar sitios web accesibles y fáciles de usar. Se describen las ventajas de la accesibilidad, los principios de usabilidad y las herramientas disponibles para verificar y mejorar estas características en las páginas web. Este enfoque garantiza que todas las personas usuarias puedan acceder y navegar por el sitio de manera eficiente, independientemente de sus capacidades.

Finalmente, la cuarta sección presenta una guía sobre la instalación y configuración de herramientas de edición web. Se exploran sus funciones y características, proporcionando ejemplos de cómo estas herramientas facilitan el proceso de desarrollo web, desde la escritura y edición de código hasta la depuración y mantenimiento de los sitios.

Cada sección está estructurada para ofrecer una combinación de teoría y práctica, permitiendo a los lectores aplicar los conocimientos adquiridos de manera inmediata. El manual está diseñado para ser accesible tanto para principiantes como para aquellos que buscan profundizar sus conocimientos en el desarrollo web, proporcionando una base sólida para la creación de sitios web modernos y eficientes.

A continuación, se expone un glosario que proporciona una comprensión básica de los términos clave relacionados con la creación de páginas web utilizando lenguajes de marcas:

Accesibilidad web: Prácticas y técnicas para hacer que los sitios web sean utilizables por personas con diversas discapacidades. Incluye el uso de texto alternativo para imágenes, navegación por teclado, y contraste adecuado.

Anclas: Enlaces internos dentro de la misma página HTML que permiten a los usuarios saltar a diferentes secciones del documento.

API (Application Programming Interface): Conjunto de reglas y especificaciones que permiten que los componentes de software interactúen entre sí. Ejemplo: APIs del navegador como la API de geolocalización.

Atributos: Proporcionan información adicional sobre los elementos HTML. Se utilizan dentro de las etiquetas de inicio y vienen en pares de nombre y valor, como class, id, src, href, style.

Bibliotecas: Conjunto de funciones predefinidas que facilitan la programación. Ejemplo: jQuery.

CSS (Cascading Style Sheets): Lenguaje utilizado para describir la presentación de un documento escrito en HTML o XML. Define estilos para elementos individuales o grupos de elementos y permite crear diseños responsivos.

Depuración: Proceso de encontrar y corregir errores en el código. Las herramientas de edición web como Visual Studio Code ofrecen características de depuración integradas.

DOCTYPE: Declaración que define el tipo de documento y la versión de HTML que se está utilizando. Ejemplo: <!DOCTYPE html>.

Editor de texto: Software utilizado para escribir y editar código HTML y CSS. Ejemplos incluyen Visual Studio Code y Sublime Text.

Elementos de bloque: Elementos HTML que crean un bloque visible en la página, siempre empiezan en una nueva línea y ocupan todo el ancho disponible, como <div>, <h1> a <h6>, <p>, <form>.

Elementos en línea: Elementos HTML que no inician una nueva línea y solo utilizan el ancho necesario, como <span>, <a>, <img>, <button>.

Etiquetas: Componentes básicos de los lenguajes de marcas como HTML. Se utilizan para definir y organizar el contenido dentro de un documento. Ejemplos incluyen <html>, <head>, <body>, <p>, <a>.

Formularios: Elementos HTML que recogen datos del usuario, utilizando etiquetas como <form>, <input>, <textarea>, <button>, y <select>.

Frames (marcos): Elementos HTML que permiten incrustar un documento HTML dentro de otro, utilizando la etiqueta <iframe>.

Framework: Estructura de trabajo predefinida que facilita el desarrollo de aplicaciones web, como Angular, React o Vue.js.

HTML (HyperText Markup Language): Lenguaje de marcas utilizado para crear y estructurar el contenido de una página web. Incluye etiquetas para definir encabezados, párrafos, enlaces, imágenes y otros elementos.

JavaScript: Lenguaje de programación utilizado para crear contenido dinámico e interactivo en páginas web. Se puede insertar directamente en HTML con la etiqueta <script>.

LaTeX: Sistema de preparación de documentos utilizado principalmente en la creación de textos científicos y matemáticos. Emplea un lenguaje de marcas para definir la estructura y formato del contenido.

Mapas de imágenes: Permiten definir áreas interactivas dentro de una imagen en una página web. Se utilizan etiquetas <map> y <area> para crear estas áreas.

Media Queries: Característica de CSS utilizada para aplicar estilos diferentes a diferentes tamaños de pantalla.

Metaetiquetas: Etiquetas dentro del <head> que proporcionan metainformación sobre el documento, como <meta charset="UTF-8"> para definir la codificación de caracteres.

Multimedia: Elementos como imágenes, audio, y video que se pueden insertar en una página web para hacerla más interactiva y atractiva.

Navegadores web: Software que interpreta lenguajes de marcas y muestra las páginas web. Ejemplos incluyen Google Chrome, Mozilla Firefox, Microsoft Edge y Safari.

Preprocesadores CSS: Herramientas que extienden las capacidades de CSS, como Sass (Syntactically Awesome Style Sheets) y Less (Leaner Style Sheets).

Responsive Web Design (RWD): Enfoque de diseño que hace que las páginas web se vean bien en una variedad de dispositivos y tamaños de pantalla.

Responsivo (diseño adaptativo): Diseño web que se adapta al tamaño de la pantalla del dispositivo del usuario, mejorando la accesibilidad y usabilidad del contenido.

SEO (Search Engine Optimization): Conjunto de prácticas para mejorar la visibilidad de un sitio web en los motores de búsqueda.

Sublime Text: Editor de texto conocido por su velocidad y capacidad de respuesta. Ofrece características avanzadas como edición múltiple y gestión de paquetes.

Usabilidad web: Se refiere a la facilidad con la que los usuarios pueden navegar e interactuar con un sitio web. Principios incluyen facilidad de aprendizaje, eficiencia, memorabilidad, prevención de errores y satisfacción.

Viewport: Metaetiqueta usada para controlar el diseño de una página web en dispositivos móviles. Ejemplo: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

Visual Studio Code: Editor de código fuente desarrollado por Microsoft. Ofrece características como depuración en tiempo real, extensiones, y una interfaz intuitiva.

XML (eXtensible Markup Language): Lenguaje de marcas utilizado para almacenar y transportar datos. No define la presentación de los datos, sino su estructura y almacenamiento.

Los lenguajes de marcas