Scribd
Cargar
3 vistas

HTML y CSS

guia de programacion

Cargado por

Maria E Monasterio
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
3 vistas

HTML y CSS

guia de programacion

Cargado por

Maria E Monasterio
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 25

HTML

Es uno de los lenguajes de marcado más utilizados en el diseño web en todo el


mundo. Sus puntos fuertes radican en una sintaxis uniforme y claramente
estructurada, un enfoque de código abierto y gratuito y una gran facilidad de
aprendizaje. Cualquiera que quiera introducirse en el diseño web rápido y sin
mucho esfuerzo encontrará en HTML la base adecuada para programar una
página web moderna, atractiva y con elementos interactivos.

Qué significa HTML: Hyper Text Markup Language

HTML significa “Hyper Text Markup Language” (‘Lenguaje de Marcado de


Hipertexto’) y, junto a Java y CSS, es uno de los lenguajes de marcado
basados en texto más utilizados en el mundo. Tim Berners-Lee, inventor de la
World Wide Web, sentó las bases de HTML en 1992 con la primera especificación
HTML. El Consorcio World Wide Web (W3C) declaró HTML 4.0 estándar oficial en
diciembre de 1999. Desde entonces, alrededor del 63 % de todas las páginas web
se basan en código HTML. En la actualidad (2023), las versiones XHTML y
HTML5 se utilizan principalmente para la creación de páginas web optimizadas
para SEO.

El lenguaje HTML tiene principalmente las siguientes características:

 En la creación de páginas web, se utilizan tags HTML para describir y


estructurar los elementos de la página.
 La sintaxis de HTML es uniforme y textual, y consta siempre de una
etiqueta de inicio y otra de fin.
 Por ello, HTML se considera un lenguaje de marcado o markup.

HTML no es un lenguaje de programación

En principio, HTML no cuenta como lenguaje de programación. A diferencia de los


lenguajes de programación y scripting como PHP o JavaScript, HTML no puede
utilizarse para crear algoritmos, tareas, condiciones o bucles debido a su falta de
estructura de comandos. Por tanto, HTML pertenece a los lenguajes de marcado.
Mientras que HTML describe y estructura una página web con una sintaxis
estática basada en texto, los lenguajes de programación crean contenidos
dinámicos, tareas lógicas complejas, comandos y algoritmos.

Usos del HTML

HTML se utiliza para crear y editar páginas web privadas o empresariales. La


estructura básica, también llamada código fuente, siempre tiene un aspecto similar
para las páginas web basadas en HTML debido a su sintaxis uniforme. El código
fuente HTML muestra a los navegadores, junto con el CSS (Cascading Style
Sheets), cómo se debe mostrar y componer visualmente la página web en el
dispositivo final, incluyendo el diseño, la tipografía y los colores.

Con la versión actual HTML5 están disponibles nuevas posibilidades de uso


y atributos HTML.

Entre los usos y funciones de HTML se incluyen:

 Describir el diseño y el aspecto de una página web


 Ejecutar vídeos insertados en HTML, elementos de audio y hojas de cálculo
 Integrar diferentes dispositivos estilísticos para la presentación de textos
 Navegar dentro de una página web mediante hipervínculos
 Crear formularios para la generación de clientes potenciales, como
formularios de registro, newsletters, solicitudes de contacto o descargas
 En combinación con plugins, integración de formularios de búsqueda y
opciones de reserva
 Ejecución de contenidos de página dinámicos mediante referencias a hojas
de estilo CSS o archivos JavaScript

¿Cómo es la estructura del código HTML?

La estructura HTML subyacente siempre tiene un aspecto muy similar debido a la


uniformidad de la sintaxis. Los documentos HTML constan siempre de los tres
elementos básicos siguientes:

DOCTYPE

La llamada declaración de tipo de documento se encuentra siempre en la parte


superior y al principio de un documento HTML. La marca DOCTYPE html tiene el
formato <!DOCTYPE html>. Indica al navegador de qué tipo de documento y de
qué sintaxis de código y versión HTML se trata. En el caso de HTML5, por
ejemplo, puede ser <html5>. Dado que la etiqueta DOCTYPE no es un elemento
HTML en sentido estricto, puede ser la única antes de la sección HTML del
documento.

Cabecera HTML

La cabecera HTML transmite al navegador detalles importantes y


metainformación sobre el cuerpo del documento. Se marca como <head> y
viene inmediatamente después de la etiqueta <html> que abre la sección HTML.
La cabecera HTML puede contener, entre otros, los siguientes elementos:

 Título del documento


 Descripción
 Autor y copyright
 Juego de caracteres
 Información de escalado para móviles
 Información sobre estilos y scripts incluidos en archivos CSS o JavaScript y
otros recursos incluidos
 Información meta robots (instrucciones de indexación para los rastreadores
de los motores de búsqueda)

Cuerpo HTML

El cuerpo HTML se abre con la etiqueta <body> y contiene toda la información


sobre el diseño visible y sobre los elementos dinámicos integrados en la página.
Mediante etiquetas HTML, el cuerpo describe todo lo que los visitantes de la
página deben ver en el área de visualización del navegador cuando abren la
página web.

Estructura básica de un documento HTML

A continuación, te mostramos la estructura básica de un documento HTML:

<!DOCTYPE html>
<hmtl>
<head>
<title>…</title>
<meta …/>
</head>
<body>
</body>
</html>
Copy

HTML

La estructura de las etiquetas HTML

Aparte de la etiqueta DOCTYPE, que no requiere etiqueta final, todos los


elementos del documento HTML siguen el mismo principio de tres
componentes:

 Etiqueta de apertura < >: las etiquetas de apertura siempre van entre
corchetes angulares de apertura y cierre y muestran al navegador dónde
comienza el elemento con contenido a mostrar.
 Contenido: entre la etiqueta de apertura y la de cierre se encuentra el
contenido que el navegador debe mostrar o ejecutar. Esto abarca desde
párrafos de textos y reproductores de vídeo hasta imágenes y formularios.
 Etiqueta final </>: la etiqueta final va entre dos corchetes con una barra.
Indica al navegador dónde termina el elemento HTML.

Historia del html


La primera versión de este código apareció en 1991 y fue escrita por Tim
Berners-Lee (TBL), siendo poco más que un diseño inicial de 18 elementos, 13 de
los cuales aún se conservan. Se lo consideró poco más que una variante del
Lenguaje de Marcado General Estándar (SGML) en uso y consistente en un
lenguaje de etiquetas, pero ya en 1993 se reconocieron sus virtudes y su potencia
en la estandarización de los lenguajes de la Red.

Entonces se inició el trabajo en Html+, una versión más desarrollada, y en 1995 se


obtuvo la tercera versión del estándar: HTML 3.0, cuyas sucesivas actualizaciones
(3.1 y 3.2) fueron de gran éxito en los primeros navegadores populares de
Netscape y Mosaic. En 1997 aparecería el HTML 4.0, ya como recomendación
de la W3C, y finalmente en 2006 la versión más reciente, HTML 5.0.

¿Cómo funciona el html?


El lenguaje html opera en base a marcadores escritos (que aparecen entre
comillas angulares: <html>), a partir de las cuales se cifra la apariencia y orden
interno de una página web, así como los scripts o rutinas que operan dentro de
ellas. Dicho código fuente hace de ADN de la página Web, diciéndole al
navegador de dónde obtener los recursos para su representación y en qué orden,
secuencia y modo establecerlos. Y siguiendo el código al pie de la letra, el
navegador nos brinda la experiencia de la navegación Web.

Para ello html opera en base a un conjunto de componentes, como son:

 Elementos. Los ladrillos básicos del lenguaje html, sirven para representar el
contenido y sus atributos, así como marcar los parámetros del propio lenguaje,
como el punto de inicio de la cadena de comandos y el punto de cierre, o las
necesidades especiales.
 Atributos. Las especificaciones respecto a valor, color, posición, etc. de los
elementos incorporados en el código. Por lo general consisten en una serie de
instrucciones lógicas o numéricas.

¿Qué son las etiquetas HTML?


Las "tags" HTML, o "etiquetas" HTML, son códigos utilizados para "marcar" el
texto de una página web, con el fin de dar instrucciones al navegador sobre cómo
mostrarlo.

Es decir, las etiquetas HTML son el lenguaje utilizado para estructurar y


definir el contenido en un documento HTML. Estas etiquetas se encuentran en el
HTML (o Lenguaje de Marcado de Hipertexto) de cada página.

Cada etiqueta contiene instrucciones sencillas que indican al navegador cómo dar
formato al texto y a definir los diversos elementos de la página web. Al aplicar
estas etiquetas de marcado a los diferentes elementos del texto, se indica al
navegador cómo mostrarlos al usuario, lo que permite crear páginas web
estructuradas y con un diseño coherente.

¿Para qué sirven las etiquetas HTML?

Por ejemplo, puedes utilizar etiquetas HTML para aplicar cursivas, crear saltos de
línea, insertar objetos multimedia, crear listas con viñetas o para definir diferentes
tipos de contenido en una página web, como encabezados, párrafos, imágenes,
enlaces, formularios y mucho más.

En resumen, las etiquetas HTML son esenciales para diseñar y organizar el


contenido de una página web de manera efectiva y clara.

¿Cómo leen las páginas web las tags HTML?

Los servidores leen el código HTML para entender y mostrar el contenido. Leerá el
HTML de arriba abajo, de forma muy parecida a como estás leyendo esta guía.

Puedes utilizar tantas o tan pocas etiquetas como quieras para dar formato al
contenido. Sin embargo, hay algunas reglas y tags HTML esenciales que deberás
seguir.

¿Cómo se compone una etiqueta en HTML?

Una tag HTML contiene tres partes:

1. Una etiqueta de apertura — esta empezará con un símbolo < >.


2. Contenido — unas breves instrucciones sobre cómo mostrar el elemento en la
página.
3. Una etiqueta de cierre — cerrará con un símbolo </ >.

Sin embargo, algunas tags HTML pueden no cerrarse. Esto significa que la
etiqueta HTML no necesita cerrarse con un </ >. Normalmente, usarás etiquetas
no cerradas para metadatos o saltos de línea.

¿Cuál es la diferencia entre atributo, elemento y etiqueta HTML?

Pese a que esta guía trata sobre las tags HTML, es importante conocer la
diferencia entre etiquetas, elementos y atributos HTML. Aunque los términos
"atributo", "elemento" y "etiqueta" suelen utilizarse indistintamente, hay diferencias
sutiles entre ellos.

Un elemento HTML es un elemento de la página; forma parte del contenido de la


misma. Una tag HTML afecta a la apariencia de un elemento HTML. Un atributo
HTML describe las características de ese elemento.

Aquí tienes un desglose de cómo funcionan juntos los elementos, las etiquetas y
los atributos:

 Las etiquetas HTML contienen instrucciones para definir un elemento HTML


específico e indican cómo mostrarlo en la página. Cada etiqueta HTML comienza
con un símbolo de menor que "<" y termina con un símbolo de mayor que ">",
y preceden y siguen al contenido del elemento. Por ejemplo, la etiqueta <p>
define un párrafo en HTML.
 Un elemento HTML es un conjunto completo de etiquetas y contenido que define
un elemento específico en una página web. Es decir, los elementos HTML son el
contenido de la página intercalado entre las etiquetas. Por ejemplo, el elemento
<p> incluiría tanto la etiqueta de apertura <p> como el contenido del párrafo, así
como la etiqueta de cierre </p>.
 Los atributos HTML proporcionan información adicional a los elementos
HTML sobre cómo se debe procesar o mostrar el contenido. Los atributos se
agregan a las etiquetas HTML utilizando la sintaxis de "nombre de
atributo=valor". Por ejemplo, la etiqueta <img> puede incluir un atributo src que
especifique la ubicación de la imagen en la página, o la etiqueta <html> puede
incluir un atributo lang que especifique el idioma y país: <html lang="en-US">.

Tipo Etiquetas HTML Elementos Atributos


HTML HTML
Contiene Instrucciones El contenido Información
sobre cómo de la página adicional sobre
mostrar un que debe los elementos
elemento en la mostrarse. de la página.
página.

Apariencia Empiezan por < Intercalado Aparecen en la


y terminan por en una etiqueta inicial
>. etiqueta antes de
HTML. cualquier
elemento.

En resumen, las etiquetas HTML son los bloques de construcción básicos de una
página web, los elementos son los bloques completos que incluyen etiquetas y
contenido, y los atributos se utilizan para proporcionar información adicional sobre
cómo procesar o mostrar los elementos.

¿Qué son las etiquetas HTML básicas?

Las etiquetas HTML básicas son las etiquetas más comúnmente utilizadas en la
estructura de una página web.

Estas etiquetas básicas suelen conformar la estructura básica de una página web
y son esenciales para el desarrollo web. Sin embargo, hay muchas otras etiquetas
HTML más avanzadas y especializadas que se pueden utilizar para diseñar
páginas web más complejas. Te hablo de ellas más adelante.

¿Cuáles son las etiquetas HTML básicas?

Las etiquetas HTML más utilizadas son:

 <!DOCTYPE>: Se utiliza para especificar la versión de HTML que se está


utilizando en la página.
 <html>: Define el inicio y el final de la página web.
 <head>: Define la sección de encabezado de la página, donde se incluyen
elementos como el título de la página, metaetiquetas, scripts, entre otros.
 <title>: Define el título de la página web que aparece en la pestaña del
navegador.
 <body>: Define la sección del cuerpo de la página web, donde se incluyen todos
los elementos que se mostrarán en la página.
 <h1> a <h6>: Define los encabezados o títulos de diferentes niveles de jerarquía
en la página web. El uso de esta etiqueta formateará cualquier texto entre la
etiqueta <h> de apertura y la etiqueta </h> de cierre como un Título o
subtítulo. Por ejemplo, en <h>Etiqueta de encabezamiento</h2>, <h2> y </h2>
serían las etiquetas HTML y "Etiqueta de encabezamiento" es el elemento
HTML, es decir, el encabezamiento de la página.
 <a>: Define un enlace que el usuario puede hacer clic para ir a otra página web
o a una sección diferente de la misma página.
 <img>: Define una imagen que se mostrará en la página web.
 <p>Etiqueta de párrafo</p>: Define un párrafo de texto. Las etiquetas <p> y
</p> son etiquetas HTML y la "Etiqueta de párrafo" es el elemento HTML, es
decir, el texto de la página. Esta etiqueta formatea cualquier texto entre la
etiqueta <p> de apertura y la etiqueta </p> de cierre como un párrafo estándar o
texto de cuerpo principal.
 <b>Etiqueta de negrita</b>: Esta etiqueta dará formato de negrita a cualquier
texto que se encuentre entre la etiqueta <b> de apertura y la etiqueta </b> de
cierre. Aquí, <b> y </b> son las etiquetas HTML y la "etiqueta de negrita" es el
elemento HTML, es decir, el texto de la página.
 <i>Etiqueta de cursiva</i>: Esta etiqueta formateará como cursiva cualquier
texto entre la etiqueta de apertura <i> y la etiqueta de cierre </i>. Aquí, <i> y </i>
son las etiquetas HTML y "Etiqueta cursiva" es el elemento HTML (el texto de la
página).
 <u>Etiqueta de subrayado</u>: Esta etiqueta formateará cualquier texto entre
la etiqueta <u> de apertura y la etiqueta </u> de cierre como subrayado. Aquí,
<u> y </u> son las etiquetas HTML y "Etiqueta de subrayado" es el elemento
HTML, es decir, el texto de la página.

Listado de etiquetas HTML comunes

iquetas para la base del documento

Etiqueta Descripción Atributos

<!DOCTYPE> Tipo de documento HTML. –

<html> Documento HTML. lang

<head> Información sobre el documento HTML. –


Etiqueta Descripción Atributos

<body> Define el cuerpo del documento. –

<title> Título del documento. –

charset,
<meta> Metadatos del documento HTML.
name, content

Define la URL base para todas las URL


<base> href, target
relativas en un documento.

Conecta un documento HTML con una hoja de


<link> href, rel, type
estilo externa.

Define información de estilo para un


<style> type, media
documento HTML.

Define detalles adicionales que el usuario


<details> –
puede ver o esconder.

<summary> Encabezado visible para el elemento <details>. –

<!– –> Permite escribir un comentario. –

Etiquetas para dividir secciones


Etiqueta Descripción Atributos principales

<div> Contenedor genérico de sección. –

<section> Sección de contenido temático. –

<article> Contenido independiente y autónomo. –

<aside> Contenido relacionado pero no central. –

<header> Encabezado del contenido o sección. –

<footer> Pie de página del contenido o sección. –

<nav> Grupo de enlaces de navegación. –

<main> Contenido principal del documento. –

Etiquetas para crear textos

Etiqueta Descripción Atributos

<p> Define un párrafo align

Define encabezados de
<h1> – <h6> align
distintos tamaños

<hgroup> Grupo de encabezado (<h1> a –


<h6>)
Etiqueta Descripción Atributos

href, target, download, rel,


<a> Define un enlace type, hreflang, accesskey,
tabindex

<strong> Define texto en negrita –

<em> Define texto enfatizado –

<u> Define texto subrayado –

<del> Define texto tachado –

<sup> Define texto sobrescrito –

<sub> Define texto subíndice –

<blockquote> Define una cita larga cite

<q> Define una cita corta cite

Define un bloque de texto


<pre> –
preformateado

<abbr> Define una abreviatura title


Etiqueta Descripción Atributos

Define información de
<address> –
contacto

<cite> Define un título de trabajo –

<bdo> Define la dirección del texto dir

<mark> Define el texto resaltado –

<span> Incluye texto en línea

<small> Define el texto pequeño –

<time> Define una fecha/hora datetime

<var> Define una variable en el texto –

Define el término de una


<dfn> –
definición

Aísla una parte del texto para


<bdi> –
que tenga un formato diferente

<br> Salto de línea –

<wbr> Define un posible salto de –


Etiqueta Descripción Atributos

linea

Cambio de temática a partir de


<hr> –
una línea dibujada

Etiquetas para listas

Etiqueta Descripción Atributos

type,
<ul> Una lista desordenada. start,
reversed

type,
<ol> Una lista ordenada. start,
reversed

Un elemento de lista dentro de una lista desordenada o


<li> value
ordenada.

<dl> Una lista de definición. –

Un término (un nombre o un concepto) dentro de una


<dt> –
lista de definición.

<dd> La definición (el significado o la descripción) de un –


Etiqueta Descripción Atributos

término dentro de una lista de definición.

Etiquetas para tablas

Etiqueta Descripción Atributos

border, cellpadding,
<table> Crea una tabla
cellspacing, width

<caption> Agrega un título a la tabla –

Define una celda de encabezado en una


<th> colspan, rowspan
tabla

<tr> Define una fila en una tabla –

<td> Define una celda en una tabla colspan, rowspan

Agrupa el contenido del encabezado en


<thead> –
una tabla

Agrupa el contenido del cuerpo en una


<tbody> –
tabla

Agrupa el contenido del pie de página en


<tfoot> –
una tabla

<col> Define las propiedades para una o más span


Etiqueta Descripción Atributos

columnas de una tabla

Define un grupo de columnas en una


<colgroup> span
tabla

Etiquetas para multimedia y scripts

Etiqueta Descripción Atributos

Define un script en JavaScript u otro src, type, async,


<script>
lenguaje de script defer, crossorigin

Define un contenido alternativo para


<noscript> Ninguno
navegadores que no admiten scripts

Define un área para gráficos dinámicos y


<canvas> dibujos, utilizando scripts (por ejemplo, width, height
JavaScript)

Define un archivo de sonido o música,


src, preload, autoplay,
<audio> que se reproduce cuando se carga la
loop, controls
página web

src, width, height,


Define un archivo de video, que se poster, preload,
<video>
reproduce cuando se carga la página web autoplay, loop,
controls

<source> Define múltiples recursos de medios para src, type, media


Etiqueta Descripción Atributos

elementos multimedia como audio y video

Define un texto de título o subtítulo para src, srclang, label,


<track>
elementos multimedia como audio y video default

Define un marco en línea en el que se src, width, height,


<iframe>
puede cargar una página web diferente frameborder, scrolling

Define un contenido integrado, como un


<embed> src, type, width, height
plugin de Flash

Define un objeto incrustado en un


data, type, width,
<object> documento HTML, como una imagen, un
height, name
video o un archivo de audio

<param> Define un parámetro para un objeto name, value

Define una imagen como un mapa de


<map> name
imagen

shape, coords, href,


<area> Define una región de un mapa de imagen
alt

Define una barra de progreso para tareas


<progress> largas en curso, como descargas o carga value, max
de archivos

<meter> Define un valor escalar dentro de un value, min, max, low,


Etiqueta Descripción Atributos

rango conocido o un valor fraccional high, optimum

Define un fragmento de código de


<code> Ninguno
computadora

<kbd> Define texto de teclado Ninguno

Define la salida de una muestra o ejemplo


<samp> Ninguno
de un programa de computadora

Define una variable en un contexto de


<var> Ninguno
computadora

Etiquetas para formularios

Etiqueta Descripción Atributos

Crea un formulario
<form> action, method, target
HTML.

type, name, value,


Define un campo de
<input> placeholder, required,
entrada.
autofocus, disabled

name, rows, cols,


Define un área de texto
<textarea> placeholder, required,
para entrada de datos.
autofocus, disabled

<select> Define una lista name, multiple, size,


Etiqueta Descripción Atributos

required, autofocus,
desplegable.
disabled

Define una opción en


<option> value, selected, disabled
una lista desplegable.

Define una etiqueta para


<label> un elemento de for
formulario.

Agrupa elementos de
<fieldset> –
formulario.

Define una leyenda para


<legend> un elemento de –
formulario agrupado.

Define un botón de type, name, value,


<button>
formulario. autofocus, disabled

Define una lista de


opciones predefinidas
<datalist> id
para un campo de
entrada.

Agrupa opciones en una


<optgroup> label, disabled
lista desplegable.

<input type=»radio»> Define un botón de radio. name, value, checked,


required, autofocus,
Etiqueta Descripción Atributos

disabled

name, value, checked,


<input Define una casilla de
required, autofocus,
type=»checkbox»> verificación.
disabled

name, value, formaction,


Define un botón de envío formmethod, formtarget,
<input type=»submit»>
de formulario. formenctype, autofocus,
disabled

Define un botón para


<input type=»reset»> –
restablecer el formulario.

src, alt, name, value,


Define una imagen como
formaction, formmethod,
<input type=»image»> botón de envío de
formtarget, formenctype,
formulario.
autofocus, disabled

Define un campo oculto


<input type=»hidden»> name, value
en el formulario.

Conclusión

La comprensión de las html etiquetas es esencial para cualquier persona que


desee adentrarse en el mundo del desarrollo web. Cada una de estas etiquetas
desempeña una función específica, y saber cuándo y cómo usarlas correctamente
es la clave para crear páginas web estructuradas y accesibles. A lo largo de este
artículo, hemos explorado una variedad de etiquetas en HTML, brindando a los
lectores una visión clara de su utilidad y aplicación práctica en diferentes contextos
de diseño web.
Cascading Style Sheets (CSS)

Es un lenguaje de programación que sirve para determinar el diseño de los


documentos electrónicos. Con la ayuda de unas sencillas instrucciones -
presentadas en forma de código fuente claro-, los elementos del sitio web, como el
diseño, el color y la tipografía, pueden adaptarse como se desee. Gracias a las
hojas de estilo en cascada, la estructura semántica y el contenido del documento
no se ven afectados. CSS surgió a mediados de la década de 1990 y ahora se
considera el lenguaje de hojas de estilo estándar en Internet.

Hosting
El hosting como nunca lo habías visto

 Rápido, seguro, flexible y escalable


 Certificado SSL/DDoS incluido
 Dominio y asesor personal incluidos
Ver packs
¿Qué es CSS?

CSS, al igual que HTML, es uno de los lenguajes centrales de Internet. Mientras
que para añadir texto a un sitio web se utiliza HTML y se estructura
semánticamente, para definir el diseño del contenido se utiliza CSS. Aunque
HTML y CSS se utilizan en combinación, las instrucciones de diseño de CSS y los
elementos de HTML existen por separado. Esto significa que una máquina puede
leer un documento electrónico incluso sin CSS. Con la ayuda de CSS, el contenido
del navegador se prepara visualmente y se presenta de forma atractiva.

CSS es un “estándar vivo” que sigue siendo desarrollado por el World Wide Web
Consortium. Por esta razón siempre hay nuevas funciones y aplicaciones prácticas
que descubrir. El lenguaje de hojas de estilo, muy extendido, surgió en los años
90. En aquella época, la idea de utilizar hojas de estilo para mostrar el contenido
de la web no era del todo nueva. Pero CSS se diferenciaba en un aspecto
importante de otros elementos orientados a la visualización que ya existían en
HTML: los usuarios tenían ahora la opción de definir reglas de diseño para grupos
de elementos en varios documentos y en una sola hoja de estilo.

Definición: CSS (Cascading Style Sheets)


Lenguaje de programación para el diseño visual de páginas web. Con el
Cascading Style Sheets se puede determinar, por ejemplo, el tipo de letra, el
tamaño o el color con el que mostrar los elementos HTML.

Ventajas y ámbitos de aplicación de CSS

El éxito de un sitio web no depende solo del contenido, sino también de un buen
diseño. Los usuarios pierden rápidamente el interés por las páginas web que no
son fáciles de usar o no están bien estructuradas. En este caso, CSS ofrece una
serie de opciones de diseño que no están disponibles en HTML puro.

Por ejemplo, CSS permite controlar algunas especificaciones de forma


centralizada. Esto significa que elementos similares (como todos los hipervínculos
o imágenes) dentro de un mismo documento pueden ser reconocidos y
formateados mediante un único comando. Las instrucciones de diseño no tienen
que estar en forma de hoja de estilo interna en el propio documento HTML. Si se
guardan las instrucciones CSS en una hoja de estilo externa, es decir, en un
archivo separado, ésta puede utilizarse también para otros documentos.

Además de las instrucciones básicas de visualización relativas a los colores, las


formas y la tipografía de los elementos HTML, ahora existen módulos más
sofisticados en CSS. Con ellos se pueden, por ejemplo, definir animaciones o
representaciones diferentes según el medio de salida. De este modo, el mismo
documento HTML puede prepararse de forma idéntica para todos los medios
posibles. Como el contenido y el diseño están separados en este documento, el
código del sitio web es más claro. El llamado lenguaje de estilo SASS ofrece aún
más posibilidades, pero no sustituye por completo al CSS.

La estructura de una instrucción CSS

Una instrucción CSS determina los valores o propiedades que deben tener los
elementos de tu documento electrónico. En su estructura básica, la instrucción
consiste en un selector y corchetes. Las declaraciones se enumeran dentro de los
corchetes, separadas por punto y coma. Cada instrucción consta del nombre de la
propiedad, dos puntos y un valor específico. Después de la instrucción final y
antes del corchete de cierre, se puede añadir otro punto y coma, pero no es
obligatorio. Por ejemplo, la instrucción CSS del siguiente ejemplo pide que el
encabezado H1 se muestre en azul y con un tamaño de letra 12:
Una instrucción CSS consiste en un selector y una instrucción con propiedades y
valores correspondientes.

¿Cómo integrar CSS en tu sitio web?

Es posible integrar CSS en un documento electrónico utilizando hojas de estilo


internas y externas. Además, las propiedades pueden colocarse directamente en
el código fuente HTML de un elemento utilizando el estilo inline. A continuación,
ofrecemos una visión general de los tres métodos para integrar CSS en HTML.

Hojas de estilo externas

En las hojas de estilo externas, las instrucciones CSS se definen en archivos


externos mediante la terminación “.css” y se integran en el archivo HTML mediante
una etiqueta “link”. Este es el método más habitual porque el contenido y el diseño
están perfectamente separados y se pueden realizar cambios fácilmente. El
enlace se hace en la zona “head” del documento HTML de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1> Esto es un encabezado </h1>
<p>Esto es un párrafo</p>
</body>
</html>
Copy
Hojas de estilo internas

Aquí es donde se añaden todas las instrucciones CSS en el archivo HTML. Ten
en cuenta que estas solo se aplican al documento correspondiente. Para las hojas
de estilo internas, inserta el elemento “style” en el área “head” del documento
HTML como mostramos a continuación:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}
</style>
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo</p>
</body>
</html>
Copy
Estilo inline

Al igual que con la hoja de estilo interna, las instrucciones CSS están contenidas
en el archivo HTML. Sin embargo, hay una diferencia importante: los atributos
correspondientes se encuentran directamente en la etiqueta de inicio del elemento
y no se aplican a ningún otro elemento. Este método es especialmente útil si no
se quieren dar instrucciones generales de diseño.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;"> Esto es un encabezado </h1>
<p> Esto es un párrafo </p>
</body>
</html>
Copy
La interacción de CSS y HTML

Los ejemplos anteriores demuestran que CSS solo puede utilizarse junto con una
estructura clásica de HTML. Dado que HTML estructura el contenido mediante
párrafos, listas y tablas, y que CSS se encarga del diseño visual, ambos lenguajes
web se complementan y están estrechamente relacionados entre sí. Editar
Cascading Style Sheets suele girar en torno al diseño de “cajas”. La estructura de
un documento HTML se basa en el principio de anidamiento, en el que los
elementos individuales se superponen como cajas. Cada “caja” que ocupa espacio
en un sitio web tiene las siguientes propiedades:

 Padding: el espacio que rodea el contenido de un elemento


 Border: la línea que se encuentra justo fuera del relleno
 Margin: el espacio fuera del borde

Estr
uctura del sitio web en documento HTML con padding, border y margin que puede
modificarse visualmente mediante CSS.
Estas “cajas” se formatean especificando el tamaño, la forma y el color. Además
de estos sencillos atributos, existen instrucciones CSS más sofisticadas para
insertar sombras en el texto, añadir funciones de filtro para las imágenes y resaltar
formularios y otros elementos.

Nota
Una vez que hayas comprendido los principios básicos del lenguaje de hojas de
estilo, su aplicación es bastante sencilla. Aprende más sobre los mejores trucos de
CSS que harán que tu página web parezca aún más profesional.

También podría gustarte