Introducción a HTML y CSS

Escrito el 17 de Junio de 2024 en español con un tamaño de 5,05 KB

HTML: Lenguaje de Marcas de Hipertexto

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto. La esencia de HTML reside en el concepto de etiquetas. Estas etiquetas encapsulan el contenido y tienen un cometido específico.

Etiquetas, Estructura y Primera Página

Etiquetas Básicas

<!DOCTYPE html>: Indica el estándar HTML5.
<html></html>: La etiqueta más genérica, que envuelve todo el documento.
<head></head>: Contiene información sobre la página, como el título y las hojas de estilo.
<meta />: Proporciona metadatos sobre la página. Ejemplos:
- <meta charset="iso-8859-1" />: Especifica la codificación de caracteres de la página (en este caso, ASCII).
- <meta name="description" content="Historia de España" />: Describe la temática de la página para los motores de búsqueda.
- <meta name="keywords" content="html5, css" />: Define palabras clave relevantes para la página.
<body></body>: Representa el cuerpo de la página, donde se muestra el contenido visible para el usuario.

Etiqueta Title y Enlace a Hojas de Estilo

<title></title>: Se coloca dentro del <head> y define el título que se muestra en la barra de título del navegador. Es importante para el SEO, ya que los motores de búsqueda le dan mucha importancia. Debe ser una frase corta, descriptiva y coherente con el contenido de la página.
<link rel="stylesheet" href="mihojadeestilos.css" />: Se coloca después del <title> y se utiliza para enlazar hojas de estilo externas al documento HTML.

Etiquetas de Estructura

<header></header>: Representa la cabecera de la página.
<nav></nav>: Se utiliza para la navegación principal del sitio web.
<aside></aside>: Contiene información adicional o complementaria al contenido principal.
<section></section>: Define una sección temática dentro del contenido principal.
<footer></footer>: Representa el pie de página, que suele contener información legal, de contacto, etc.
<article></article>: Se utiliza para agrupar contenido independiente y autocontenido, como noticias o artículos de blog.
<hgroup></hgroup>: Agrupa títulos y subtítulos (h1 a h6) para indicar su relación jerárquica.
<figure></figure>: Se utiliza para imágenes y otros elementos externos, como vídeos o gráficos.
<figcaption></figcaption>: Proporciona un pie de foto para un elemento <figure>.

Etiquetas de Formato de Texto

<mark></mark>: Resalta texto como si se hubiera marcado con un rotulador.
<em></em>: Representa texto enfatizado, generalmente mostrado en cursiva.
<strong></strong>: Representa texto importante, generalmente mostrado en negrita.
<small></small>: Muestra el texto en un tamaño más pequeño, a menudo utilizado para letra pequeña o notas legales.
<cite></cite>: Representa el título de una obra (libro, película, canción, etc.).
<address></address>: Contiene información de contacto.
<time></time>: Representa una fecha y/o hora.

Enlaces en HTML

En HTML se utiliza el elemento <a> (ancla) para crear un enlace. El atributo href especifica la URL de la página de destino.

Introducción a CSS

CSS (Cascading Style Sheets) es un lenguaje que se utiliza para dar estilo y formato a los documentos HTML. Permite separar el contenido de la presentación.

Tipos de Selectores en CSS

Etiqueta selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Id, aplicar estilos CSS a un único elemento de la página. Clase, similar a id pero utilizado en etiquetas menos fuertes, grados de +concreción. Margin propiedad de las etiquetas que hacen referencia al espacio en blanco o separación que existe entre el borde de la caja y su alrededor. Clear si se superpusiera. Padding separación entre el contenido y el borde del contenedor.

Entradas relacionadas:

Etiquetas: