Fundamentos de HTML y CSS para el Desarrollo Web

HTML y CSS: Conceptos Técnicos Esenciales

HTML

Estructura de una Página Web

Las páginas web se componen de tres elementos fundamentales: contenido (estructura), presentación y comportamiento.

Contenido (estructura): Datos visibles en la página, representados mediante etiquetas HTML.
Presentación: Estilos visuales como diseño, colores y tamaños, implementados con CSS.
Comportamiento: Interacciones del usuario con los elementos, gestionadas con JavaScript.

Especificaciones de Archivos HTML

HTML utiliza marcadores para definir la estructura de una página. Los archivos son de texto plano con etiquetas que instruyen al navegador.

<!-- Documento HTML5 -->
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Título del Documento</title>
</head>
<body>
    Contenido visible aquí.
</body>
</html>

Clasificación de Etiquetas HTML

Las etiquetas encapsulan datos y se categorizan en simples y dobles.

Etiqueta simple: <etiqueta />
Etiqueta doble: <etiqueta>...contenido...</etiqueta>

Normas de Sintaxis

Las etiquetas no deben anidarse incorrectamente. Los atributos requieren valores entrecomillados.

<!-- Anidamiento correcto -->
<div><span>Texto de ejemplo</span></div>

<!-- Anidamiento incorrecto -->
<div><span>Texto de ejemplo</div></span>

Etiquetas Básicas

Etiqueta de fuente: Modifica características tipográficas.

<font color="blue" face="Verdana" size="4">Texto estilizado</font>

Entidades especiales: Representan caracteres reservados.

Contiene &nbsp; &lt; &gt; &amp; entidades

Encabezados: De nivel h1 a h6, con alineación configurable.

<h1 align="center">Título Principal</h1>
<h2 align="right">Subtítulo</h2>

Enlaces hipervínculo: Navegación entre recursos.

<a href="https://www.sitio.com">Enlace</a>
<a href="https://www.sitio.com" target="_blank">Nueva pestaña</a>

Listas: Desordenadas (ul) y ordenadas (ol).

<ul>
    <li>Ítem A</li>
    <li>Ítem B</li>
</ul>

Imágenes: Insertan gráficos con atributos de ruta y dimensiones.

<img src="foto.png" width="150" height="100" alt="Descripción">

Tablas: Estructuran datos en filas y columnas.

<table border="1">
    <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
    </tr>
    <tr>
        <td>Dato X</td>
        <td>Dato Y</td>
    </tr>
</table>

Iframe: Integra contenido externo dentro de la página.

<iframe src="pagina-externa.html" width="500" height="300"></iframe>

Formularios: Recopilan datos del usuario para envío al servidor.

<form action="/procesar" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br>
    <label for="email">Correo:</label>
    <input type="email" id="email" name="email"><br>
    <input type="submit" value="Enviar">
</form>

Etiquetas de bloque e línea: div, span, p, br para estructura y formato.

<div>Bloque contenedor</div>
<span>Elemento en línea</span>
<p>Párrafo de texto</p>
<br> Salto de línea

CSS

Introducción a CSS

CSS (Hojas de Estilo en Cascada) es un lenguaje para definir estilos visuales en páginas web, separando la presentación del contenido.

Reglas de Sintaxis CSS

Las declaraciones CSS incluyen selectores, propiedades y valores.

selector {
    propiedad: valor;
    otra-propiedad: valor;
}

Métodos de Integración CSS-HTML

En línea: Uso del atributo style directamente en etiquetas.

<div style="color: red; font-size: 20px;">Estilo directo</div>

Interno: Definición dentro de la etiqueta <style> en el <head>.

<head>
    <style>
        p {
            background-color: #f0f0f0;
            padding: 10px;
        }
    </style>
</head>

Externo: Archivo .css vinculado con <link>.

<link rel="stylesheet" href="diseno.css">

Contenido de diseno.css:

body {
    margin: 0;
    font-family: Arial;
}

Selectores CSS

Por nombre de etiqueta: Aplica estilos a todas las instancias.

h1 {
    text-decoration: underline;
}

Por ID: Selector único para un elemento específico.

#cabecera {
    color: #333;
}

Por clase: Aplica a múltiples elementos con la misma clase.

.resaltado {
    background-color: yellow;
}

Combinado: Agrupa selectores para estilos compartidos.

.aviso, .error {
    border: 1px solid #ccc;
}

Propiedades CSS Comunes

Color de texto: color: #000;
Dimensiones: width: 100%; height: auto;
Fondo: background: url('imagen.jpg');
Bordes: border: 2px dashed #aaa;
Espaciado: margin: 15px; padding: 10px;
Alineación: text-align: justify;

Flotación CSS

La propiedad float desplaza elementos fuera del flujo normal, útil para layouts.

.columna {
    float: left;
    width: 30%;
    margin: 1%;
    padding: 2%;
    box-sizing: border-box;
}

Posicionamiento CSS

La propiedad position controla la ubicación de los elementos.

static: Posición por defecto.
relative: Desplazamiento respecto a su posición original.
absolute: Posición fija relativa al contenedor posicionado más cercano.
fixed: Posición fija relativa a la ventana del navegador.

.fijo {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.relativo {
    position: relative;
    top: 5px;
}

Modelo de Caja CSS

Cada elemento se representa como una caja con contenido, relleno, borde y margen.

.tarjeta {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 10px auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Etiquetas: HTML css JavaWeb DesarrolloWeb EtiquetasHTML

Publicado el 6-1 22:09

Friki Work