Diseño web con HTML5 Y CSS3 - 2.ª edición E-Book

Manuel Torres Remón

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch

Seitenzahl: 144

Veröffentlichungsjahr: 2025

Beschreibung

Aprenda a crear sitios web con HTML5 y CSS3 de forma clara, práctica y progresiva HTML es un lenguaje de programación que sirve para desarrollar y visualizar páginas web, y se ha convertido en el estándar a nivel mundial. Su versión más reciente, HTML5, está diseñada para funcionar en cualquier dispositivo, lo que la convierte en una herramienta versátil y esencial. Por su parte, CSS3 es el lenguaje de hojas de estilo que permite definir la apariencia y el diseño visual de una página web. Si desea introducirse en el desarrollo web con las herramientas fundamentales del diseño actual, ha llegado al libro indicado. Con sus explicaciones accesibles y ejemplos concretos, adquirirá los conocimientos necesarios para construir páginas web funcionales, atractivas y adaptadas a distintos dispositivos. A lo largo de nueve capítulos, se tratan los aspectos clave del diseño web: desde la estructura de los documentos HTML hasta el uso avanzado de hojas de estilo, imágenes, formularios, listas, enlaces y tablas. Ya sea un estudiante, un profesional o una persona interesada en el diseño web, este manual le permitirá avanzar con seguridad desde los conceptos básicos hasta el desarrollo de sus proyectos. Empiece hoy a diseñar sus propias páginas web. La herramienta está en sus manos.

Leseprobe

Diseño web con HTML5 y CSS3

© Manuel Torres Remon

Derechos reservados © Empresa Editora Macro EIRL, Lima – Perú

Primera edición: Empresa Editora Macro EIRL, Lima – Perú, marzo de 2025

Primera edición: MARCOMBO, S.L. 2016

Segunda edición: MARCOMBO, S.L. 2026

© 2026 MARCOMBO, S.L. www.marcombo.com

Gran Via de les Corts Catalanes 594, 08007 Barcelona

Contacto: [email protected]

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra

ISBN del libro en papel: 978-84-267-4098-4

ISBN del libro electrónico: 978-84-267-4121-9

Producción del ePub: booqlab

Manuel Torres Remon

Manuel Torres Remon es ingeniero de sistemas computacionales y licenciado en Educación en la especialidad de Computación e Informática, además cuenta con veinte años de experiencia en consultoría y docencia en áreas de tecnología. Esta amplia experiencia le ha permitido brindar cursos de formación en las instituciones más importantes de Lima, Perú.

Su formación académica tecnológica se inició en el Instituto Manuel Arévalo Cáceres, la cual complementó al estudiar Ingeniería de Sistemas Computacionales en la Universidad Privada del Norte, obteniendo su grado de licenciado a nombre de la Universidad Alas Peruanas. El aprendizaje adquirido de estas instituciones le ha proporcionado una buena formación profesional, lo que le ha permitido desempeñarse satisfactoriamente en las diversas instituciones donde trabaja.

Actualmente, se desempeña como docente de tecnología en instituciones educativas como la Escuela Superior de Tecnología del SENATI, IEST “Manuel Arévalo Cáceres” y Cibertec. En estas instituciones imparte cursos de tecnología, especialmente en Programación, Bases de Datos y Análisis de Sistemas.

Para cualquier duda o consulta sobre el material la puede realizar al email [email protected].

ÍNDICE

Cubierta

Título

Créditos

Índice

Presentación

CAPÍTULO 1:

HTML5

1.1

Introducción

1.2

Historia del HTML

1.3

Versiones de HTML

1.4

Características del HTML5

1.5

Funcionamiento del envío de un documento web

1.6

Navegadores web (sitemap)

1.7

Determinar si mi navegador está preparado para HTML5

1.8

Editores HTML

1.9

Comprendiendo la URL

1.10

Creando un proyecto web con Visual Code

1.11

Caso desarrollado: Proyecto lavandería

CAPÍTULO 2:

ESTRUCTURANDO DOCUMENTOS PARA LA WEB

2.1

Estructura de una etiqueta HTML5

2.2

Elementos que cambian su significado

2.3

Los atributos de una etiqueta HTML5

2.4

Identificación de los atributos en una etiqueta HTML5

2.5

Estructura global de un documento web

2.5.1

Especificación DOCTYPE

2.5.2

Iniciando la estructura web con <html>

2.5.3

Definición de cabecera con la etiqueta <head>

2.5.4

Etiqueta <body>

2.6

Caso desarrollado 1: Maquetación de un documento web HTML5 básico

2.7

Etiqueta <header>

2.8

Etiqueta <section>

2.9

Etiqueta <nav>

2.10

Etiqueta <aside>

2.11

Etiqueta <footer>

2.12

Elementos internos del HTML5

2.12.1

Etiqueta <article>

2.12.2

Etiqueta <figure>

2.13

Comentarios en HTML5

2.14

Otras etiquetas HTML5

2.14.1

Etiqueta <hr>

2.14.2

Etiqueta <blockquote>

2.14.3

Etiqueta <cite>

CAPÍTULO 3:

HOJAS DE ESTILOS EN CASCADA CSS3.

3.1

Breve historia de CSS

3.2

Características del CSS3

3.3

Elementos de la definición CSS3

3.4

Funcionamiento básico de CSS3

3.5

Integración CSS en HTML5

3.5.1

Estilo en línea

3.5.2

Estilo a nivel de página

3.5.3

Estilo externo

3.5.4

Estilo importado

3.6

Los comentarios en CSS

3.7

Selectores CSS

3.7.1

Selector universal

3.7.2

Selector de etiqueta

3.7.3

Selector en descendencia

3.7.4

Selector de clase

3.7.5

Selector de identificación

3.8

Selectores avanzados

3.8.1

Selector hijo

3.8.2

Selector adyacente

3.9

Agrupación de reglas CSS

3.10

Modelos de cajas

3.10.1

Unidades relativas

3.10.2

Unidades absolutas

3.11

Márgenes y rellenos

3.11.1

Elementos de bloque

3.11.2

Elementos de línea

3.11.3

Color de fondo

3.11.4

Color al texto

3.11.5

Color al borde

3.12

Bordes en CSS

3.12.1

Ancho de borde

3.12.2

Color del borde

3.12.3

Estilo de borde

3.13

Espaciado en CSS

3.14

Textos en CSS

3.15

Alineación en CSS

3.16

Enlaces en CSS

3.17

Posicionamiento CSS

3.17.1

Posicionamiento normal

3.17.2

Posicionamiento relativo

3.17.3

Posicionamiento absoluto

3.17.4

Posicionamiento fijo

3.17.5

Posicionamiento flotante

3.18

Caso desarrollado 1: Estilo de línea

3.19

Caso desarrollado 2: Estilo a nivel de página

3.20

Caso desarrollado 3: Estilo externo

3.21

Caso desarrollado 4: Estilo importado

3.22

Caso desarrollado 5: Posicionamiento relativo

3.23

Caso desarrollado 6: Posicionamiento absoluto

3.24

Caso desarrollado 7: Posicionamiento flotante

CAPÍTULO 4:

FORMATEANDO UN TEXTO WEB

4.1

Formato básico

4.1.1

Las etiquetas de cabecera

4.1.2

La etiqueta de párrafo <p>

4.1.3

La etiqueta de cambio de línea <br>

4.2

Etiquetas para fragmentos de textos

4.2.1

La etiqueta <strong>

4.2.2

La etiqueta <mark>

4.2.3

La etiqueta

4.2.4

La etiqueta

4.2.5

La etiqueta

4.2.6

La etiqueta <cite>

4.3

Etiquetas de modificación de significado

4.3.1

La etiqueta <sup>

4.3.2

La etiqueta <sub>

4.3.3

La etiqueta <small>

4.4

Etiquetas orientadas a código

4.4.1

La etiqueta <time>

4.5

Caso desarrollado 1: Uso de la etiqueta <header> y <h1>...<h6>

4.6

Caso desarrollado 2: Uso de la etiqueta <br>

4.7

Caso desarrollado 3: Uso de la etiqueta <span>

4.8

Caso desarrollado 4: Uso de la etiqueta <blockquote> y <cite>

4.9

Caso desarrollado 5: Uso de la etiqueta <time>

4.10

Caso desarrollado 6: Uso de la etiqueta <sup>

4.11

Caso desarrollado 7: Uso de la etiqueta <mark>

CAPÍTULO 5:

LISTAS

5.1

Trabajando con listas

5.2

La etiqueta <ul>: Lista desordenada

5.3

Etiqueta <ol>: Lista ordenada

5.4

Caso desarrollado 1: Listas desordenadas

5.5

Caso desarrollado 2: Listas desordenadas sin viñeta

5.6

Caso desarrollado 3: Listas desordenadas con imagen

5.7

Caso desarrollado 4: Listas ordenadas con numeración decimal

5.8

Caso desarrollado 5: Listas ordenadas con numeración romana

CAPÍTULO 6:

ENLACES Y NAVEGACIÓN

6.1

Introducción

6.2

Estructura de la URL

6.3

Enlaces básicos

6.3.1

Enlazando a otra página web

6.3.2

Enlazando a un email

6.4

Tipos de URL

6.4.1

URL absoluto

6.4.2

URL relativo

6.4.3

Diferencias entre URL absoluta y relativa

6.5

Atributos de la etiqueta <a>

6.6

Implementación de enlaces por anclas

6.7

Caso desarrollado 1: Uso de la etiqueta <a> y <nav>

6.8

Caso desarrollado 2: Proyecto web – Agencia de empleos

CAPÍTULO 7:

IMÁGENES, AUDIO Y VÍDEO

7.1

Seleccionando de manera correcta las imágenes

7.1.1

Imágenes GIF

7.1.2

Imágenes JPG

7.1.3

Imágenes PNG

7.2

Agregando imágenes con la etiqueta <img>

7.2.1

Atributo src

7.2.2

Atributo alt

7.2.3

Atributo height y width

7.3

Usando imágenes como enlaces

7.4

Agregando vídeos de YouTube

CAPÍTULO 8:

GESTIÓN DE TABLAS PARA LA WEB

8.1

Introducción a las tablas web

8.2

Elementos básicos y atributos de una tabla

8.3

Etiqueta <table>

8.3.1

Atributo border

8.3.2

Atributo bordercolor

8.3.3

Atributo cellspacing

8.3.4

Atributo cellpadding

8.3.5

Atributo align

8.3.6

Atributo bgcolor

8.4

Etiqueta <tr>

8.5

Etiqueta <td> y <th>

8.6

Atributo rowspan

8.7

Atributo colspan

8.8

Dividir la tabla en <thead>, <tbody> y <tfoot>

8.8.1

<thead>

8.8.2

<tbody>

8.8.3

<tfoot>

CAPÍTULO 9:

GESTIÓN DE FORMULARIOS PARA LA WEB

9.1

Introducción a los formularios web

9.2

Creando un formulario: etiqueta <form>

9.2.1

Atributo action

9.2.2

Atributo method

9.2.3

Atributo id

9.2.4

Atributo name

9.2.5

Atributo enctype

9.2.6

Atributo target

9.2.7

Atributo autocomplete

9.3

Control de textos para formularios

9.3.1

Etiqueta <label>

9.3.2

Cuadro de texto simple

9.3.3

Cuadro de texto múltiple

9.3.4

Cuadro de password

9.3.5

Entrada de un correo electrónico

9.3.6

Entrada de fecha

9.3.7

Tipo number

9.3.8

Tipo range

9.4

Control de botones para los formularios

9.4.1

Usando imágenes para los botones

9.4.2

Elemento <output>

9.5

Control de los cuadros de chequeo

9.6

Control de los botones de radio

9.7

Control del cuadro combinado

9.8

Control del cuadro de lista

9.9

Etiqueta <datalist>

9.10

Caso desarrollado: Formulario de registro

BIBLIOGRAFÍA

Guide

Cubierta

Título

Start

PRESENTACIÓN

En la actualidad, la internet se ha vuelto un elemento muy importante en nuestras vidas, ya que facilita el acceso a la información y al entretenimiento por medio de vídeos, televisión digital, redes sociales, etc. Para que esta información sea accesible en la internet, tiene que estar en una página web o ser una. Por ello, es importante saber manejar y programar una página web tanto para nuestro desarrollo personal como laboral.

Una de las personas que influyó en esta tendencia es Tim Berners-Lee. Él introdujo la idea del HTML al mundo, dándola a conocer en el año 1989 como producto de las deficiencias que presentaba la búsqueda de información en la internet y la necesidad humana de mejorar lo que se tiene. Tim propone dos tecnologías para mejorar la experiencia en la web, como son: el HTTP y el HTML, respectivamente.

Si se analiza el concepto de HTTP, se evidenciaría que se refiere a la necesidad de transferir información de cualquier tipo por la web, de ahí sus iniciales HyperText Transfer Protocol. El HTTP es un protocolo de transferencia usado para computadoras (ordenadores) catalogadas como servidores web. Estos reciben una petición de usuario como, por ejemplo, visualizar una determinada página web. Se debe notar que siempre comienza con las palabras http://, pues estas hacen referencia al protocolo que se usará cuando se haga la petición al servidor web. Esto convierte y muestra un documento HTML en su navegador web, como, por ejemplo, Internet Explorer, Google Chrome, Mozilla Firefox, etc.

La segunda tecnología propuesta es el HTML, que representa un lenguaje de marcado basado en etiquetas. Este indica al navegador web cómo debe mostrar el documento web solicitado por un determinado usuario. Esta tecnología abrió el camino a lo que hoy se conoce como navegar por la web, pues contiene etiquetas que permiten configurar una navegación fluida entre muchos documentos web que se encuentran en la internet. La unión de estas tecnologías permite que la experiencia en la internet sea rápida y sencilla, lo que hace que el usuario navegue lo más cómodo posible.

Tim Berners-Lee fundó el W3C, llamado así por las iniciales de Consorcio World Wide Web, el cual ofreció a los usuarios de todo el mundo una guía sobre el uso del HTML, disponiendo cuatro versiones iniciales y un nuevo estándar llamado HTML5, que permitirá revolucionar la experiencia web en el planeta. Este libro está preparado para explicar las nuevas especificaciones que presenta HTML5 y que usted podrá desarrollar mediante guías practicas; desarrolladas paso a paso usando aplicaciones estándar y de mayor demanda entre los diseñadores web.

1.1 Introducción

Cuando se escucha el término HTML se lo suele asociar instantáneamente a una página web, debido a que al realizar una navegación se hace uso de un documento web. Luego, este es interpretado dentro de un servidor que transforma las etiquetas HTML en algo legible para el usuario. Entonces, se puede decir que un diseñador de páginas web utiliza el lenguaje HTML para la implementación de sus páginas, ya que usa ciertos programas que generan páginas basadas en etiquetas HTML. Finalmente, los navegadores web permiten visualizar la interpretación de cada etiqueta generando así un proceso de navegación entre páginas web. Todo este proceso será esclarecido en el presente libro, pues nuestro propósito es que usted genere su propio documento web y pueda realizar las pruebas correspondientes en un navegador web.

En ese mismo sentido, se debe considerar que HTML fue diseñado bajo la necesidad de mostrar información por medio de internet. Hoy en día esa necesidad ha hecho que la mayoría de dispositivos que muestran información web tengan un contenido HTML. Este lenguaje se ha convertido en un estándar a nivel mundial, pues todo documento web deberá estar basado en sus etiquetas. Se puede embeber con otras tecnologías, pero sus etiquetas siempre estarán presentes. Existe un consorcio que avala el reconocimiento que tiene HTML, llamado W3C o también World Wide Web Consortium, el cual es considerado como un organismo sin fines de lucro que define las normas sobre el uso de las etiquetas HTML.

“El Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es un consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo. Este consorcio fue creado en octubre de 1994, y está dirigido por Tim Berners-Lee, el creador original del URL (Uniform Resource Locator, Localizador Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje de Marcado de HiperTexto), que son las principales tecnologías sobre las que se basa la Web”.

Fuente: https://es.wikipedia.org/wiki/World_Wide_Web_Consortium

En la actualidad, el World Wide Web Consortium (W3C) anunció que realizará una actualización del HTML5, la cual se llamará HTML5.1, y se centrarán en la lectura del script para usuarios con poca experiencia en diseño web. Asimismo, facilitará el uso de la programación y la incorporación de nuevas funcionalidades y características enfocado en el futuro.

1.2 Historia del HTML

Como ya se mencionó, HTML es un lenguaje de definición de etiquetas que presentó sus inicios alrededor del año 1991. Motivado por mostrar información de forma remota entre la comunidad de científicos, Tim Berners logró desarrollar HTML cuando se encontraba laborando (trabajando) en la CERN (European Organization for Nuclear Research), Organización Europea para la Investigación Nuclear. En esta primera versión se presentaron 22 etiquetas, de las cuales entre 11 y 12 aún se siguen usando en la versión actual.

Con el fin de establecer un estándar, se crea el IEFT (Internet Engineering Task Force), Grupo de Trabajo de Ingeniería de Internet, en el año 1993. Este grupo definió la gramática que presenta HTML actualmente; en estos años se presentaron bosquejos para el lenguaje de etiquetas teniendo como resultado el HTML+. Luego, en el año 1994, se introdujo el HTML Working Group, el cual estandariza el uso del HTML con la versión 2.0 y 3.0. Una de las principales características en esta evolución es la incorporación de etiquetas para la gestión de las tablas en un documento web.

A inicios del año 1997 se lanzó la versión 3.2 del HTML bajo una nueva organización llamada W3C (World Wide Web Consortion), fundada por Tim Berners; dicha organización es la encargada de generar recomendaciones y estándares que aseguran el uso correcto del HTML en el World Wide Web.

A finales del año 1997 se lanzó la cuarta versión llamada HTML4, cuya principal característica es la introducción de variantes que presentan el lenguaje como transaccional, estricta y marcos. La variante transaccional permitía el uso de etiquetas obsoletas dentro del lenguaje, mientras que la estricta no y los marcos dividían la página web en sectores llamados frames.

Finalmente, en el año 2014 se creó la WHATWG (Web Hypertext Application Technology Working) para la implementación de una nueva tecnología basada en las etiquetas HTML5 e incorporando funcionalidades para elementos multimedia como los vídeos, audios, imágenes vectoriales y contenido 2D y 3D dentro de los documentos web.

1.3 Versiones de HTML

HTML no cuenta con muchas versiones debido a que su objetivo es implementar documentos web mediante etiquetas; la diferencia entre las versiones es mínima, a excepción de la versión HTML5, la cual cambia el paradigma tradicional por una tecnología moderna enfocada a todos los dispositivos que la soporten. En la actualidad se puede observar esto en casi todos los aparatos móviles como tablets, smartphones, iPhone, televisores smart, etc. A continuación, se mostrará una lista de las versiones del HTML y una breve especificación:

a.HTML 1.0: es la versión oficial del lenguaje HTML lanzada en 1993. Esta versión se basa en contenidos básicos y se manejaba siempre desde etiquetas que permitían a los diseñadores web crear documentos estructurados enfocados a los enlaces y formatos de texto legibles.

b.HTML 2.0: es considerada la primera versión oficial lanzada en 1995; es aquí donde se formalizan todas las versiones pasadas del HTML. Esta versión se encuentra basada en el estándar del HTML llamado SGML, el cual contiene un lenguaje limpio enfocado en un alto porcentaje en la funcionalidad y no en el diseño, por lo que no presenta un soporte para las tablas.

c.HTML 3.0: fue desarrollada a principios del año 1996 en conjunto con empresas comerciales como IBM, Microsoft, Netscape, Novell, SoftQuad, Spyglass y Sun Microsystems. Entre sus principales características se observa la incorporación de etiquetas para las tablas y microaplicaciones; además, mejora el aspecto de las imágenes colocando texto alrededor.

d.HTML 4.0: