Ejemplos de Código HTML5 y Hojas de Estilo CSS para Principiantes

Fundamentos de HTML y CSS: Estructuración y Estilos Básicos

A continuación, se presentan y corrigen los ejemplos prácticos de desarrollo web que combinan la estructuración en HTML con el diseño mediante reglas de CSS.

1. Ejemplo: Formato de Títulos con CSS Interno

En este bloque se define el tamaño y la familia tipográfica de los encabezados (h1, h2, h3) mediante un bloque de estilos interno dentro del elemento <head>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formularios - Títulos</title>
    <style>
        h1, h2, h3 {
            font-family: Verdana;
        }
        h1 {
            font-size: 60px;
        }
        h2 {
            font-size: 50px;
        }
        h3 {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <h1>Esto es un ejemplo</h1>
    <h2>Esto es otro ejemplo</h2>
    <h3>Esto es otro ejemplo</h3>
</body>
</html>

2. Ejemplo: Listas Desordenadas con Viñetas y Enlaces

Muestra cómo organizar elementos de navegación usando la etiqueta de lista desordenada <ul> con el atributo type="circle" y enlaces hipertexto <a>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Listas</title>
</head>
<body>
    <h1>Ejemplo 1</h1>
    <ul type="circle">
        <li>Inicio</li>
        <li>Noticias</li>
        <li><a href="#">Reciente</a></li>
        <li><a href="#">Más leídos</a></li>
        <li><a href="#">Más valorados</a></li>
    </ul>
</body>
</html>

3. Ejemplo: Estilos Avanzados, Subrayados y Clases CSS

Este ejemplo aplica decoraciones de texto (underline y overline), colores de fondo y bordes discontinuos a través de selectores de clase como .destacado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formularios</title>
    <style>
        p, h2 {
            text-decoration: underline;
        }
        h2 {
            background: red;
            text-align: center;
        }
        p span {
            text-decoration: overline;
        }
        .destacado {
            border: dashed 2px green;
        }
    </style>
</head>
<body>
    <h2>Hola<span> buenos días</span></h2>
    <p class="destacado">Primeros ejemplos de CSS</p>
    <p>CSS nos acabará gustando<span class="destacado"> y haremos cosas interesantes</span></p>
</body>
</html>

4. Ejemplo: Vinculación Externa y Estilos en Línea (Línea Azul)

Demuestra la combinación de estilos aplicados a nivel de documento o externos frente a estilos específicos aplicados mediante el atributo style directamente en el elemento HTML.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <link href="ej1css.css" rel="stylesheet"/>
    <title>Formularios</title>
    <style>
        p {
            color: red;
            background: #ccc;
            font-family: Verdana;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Esto es un ejemplo</p>
    <p style="color: blue; background: #eee; font-family: Arial; text-align: left;">Esto es un ejemplo</p>
</body>
</html>