Qué son las entidades de carácter y las entidades

numéricas
En las primeras versiones de HTML se especificaba que el juego de
caracteres utilizado por las páginas web debía ser el juego de caracteres
ISO-8859-1, más conocido como Latin-1.
Para poder incluir en un página web caracteres no incluidos en ese juego de
caracteres se debían utilizar las entidades de carácter. Una entidad de
carácter es una referencia a un carácter y se escribe con la sintaxis
&nombre; es decir, empieza por el símbolo & (en inglés, ampersand, en
español, et), a continuación se escribe el nombre del carácter y termina por
un punto y coma.
Por ejemplo, la letra griega alfa (α) se podía incluir en una página web con
la entidad de carácter α.
α ⇒ α ampersand
nombre de la entidad de carácter
punto y coma
En las primeras versiones de HTML se fueron añadiendo entidades de
carácter hasta llegar en HTML 4 a 252 entidades de carácter, que se
muestran al final de esta lección, en el apartado Lista de entidades de
carácter.
La norma RFC 2070, publicada en enero de 1997, permitió el uso de
Unicode como juego de caracteres en HTML, por lo que se amplió el
concepto de entidad de carácter a entidad numérica, para permitr la
referencia a cualquier carácter Unicode, con la sintaxis &número; es decir
empieza por el símbolo &, a continuación se escribe el código Unicode del
carácter (en notación decimal o en notación hexadecimal precedida por una
letra "x") y termina por un punto y coma.
Por ejemplo, la letra griega alfa (α), cuyo código de carácter Unicode es 945
(3B1 en hexadecimal) se podía incluir en una página web con la entidad de
carácter α o con las entidades numéricas α o α.

α ⇒ α ampersand
Almohadilla código Unicode decimal punto y coma
α ⇒ α
Ampersand almohadilla letra "x"
código Unicode hexadecimal punto y coma
Otras recomendaciones (por ejemplo, MathML), han definido más entidades
de carácter que los navegadores también reconocen. La recomendación
XML Entity Definitions for Characters (2ª edición, publicada en abril de
2014) recopiló las entidades de carácter más empleadas en páginas web.
En la web del W3C se puede consultar un lista de entidades de carácter
visualmente atractiva en https://dev.w3.org/html5/html-author/charref, pero
no sé si está actualizada.
La recomendación HTML 5 ya no hace incluye un listado de entidades de
carácter, en favor de las entidades numéricas.
Las entidades de carácter son más fáciles de utilizar porque es más fácil
recordar un nombre que un código, pero al no existir entidades de carácter
para todos los caracteres Unicode, en la mayoría de casos se tiene que
utilizar la entidad numérica.
Los navegadores sólo pueden representar un carácter Unicode si tiene
instalado una fuente que contenga ese carácter. Por eso hay que tener
cuidado al incluir caracteres Unicode, porque los visitantes pueden no ver
esos caracteres.
En el caso de Windows, Microsoft distribuye gratuitamente la fuente Segoe
UI Symbol, que contiene muchos caracteres Unicode. Pero por desgracia, la
fuente Segoe de Windows 7 contiene muchos menos caracteres que la
fuente Segoe de Windows 10.
El inspector de código
Recordarás que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista

Diseño, vista Código y vista Dividir (Código y Diseño)Todas estas vistas se aplican
directamente sobre la ventana del documento.
Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en
el documento. Este panel es el llamado Inspector de código y puede abrirse a través del menú
Ventana. Si la opción Inspector de código no te aparece directamente en este menú, posiblemente
esté dentro de la opción Otros. También puedes abrir el Inspector de código pulsando F10.

El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista
Código y la vista Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el
panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita sólo al espacio del
documento.
 ¿Qué es CSS?

 CSS significa Cascading Style Sheets (Hoja de Estilos en Cascada).

 El lenguaje CSS describe cómo se mostrarán los elementos HTML en la
pantalla.
 El lenguaje CSS ahorra mucho trabajo, ya que permite controlar el diseño de
varias páginas web a la vez.
 Todas las hojas de estilo externas se almacenan en archivos CSS.
¿Por qué usar CSS?
El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el
diseño, la disposición y las variaciones en la imagen para los diferentes
dispositivos y tamaños de pantalla .
El lenguaje CSS facilita mucho las cosas
La intención del lenguaje HTML no es contener etiquetas para dar formato a una
página web, sino describir el contenido, como por ejemplo aquí:
<h1> Esto es un encabezado </h1>

<p> Esto es un parrafo . </p>

Pero si queremos que ese encabezado o párrafo tenga un color o un tipo de
fuente concreto, deberíamos añadir estilos a cada una de las páginas que los
contenga. Para ahorrar este costoso trabajo, el World Wide Web Consortium
(W3C) decidió crear el lenguaje CSS.
Ahorro de trabajo
Las definiciones de estilo normalmente se guardan en archivos .css externos. De
esta manera, con una hoja de estilos externa puedes cambiar el aspecto de un

sitio web por completo simplemente cambiando un archivo.

Tres formas de insertar CSS
Hay tres maneras de insertar una hoja de estilo:

 Hoja de estilos externa

 Hoja de estilos interna
 Estilo en línea
Hoja de estilos externa
Con una hoja de estilos externa, puedes cambiar el aspecto de un sitio web
completo cambiando un sólo archivo.
Para ello cada página debe incluir una referencia al archivo de hoja de estilos
externa dentro del elemento <link> que se encuentra dentro de la sección <head>:
<head>
<link rel="stylesheet" type="text/css" href="miestilo.css">
</head>
Una hoja de estilo externa se puede escribir desde cualquier editor de texto, debe
ser guardado con la extensión .css y no puede contener ninguna etiqueta HTML .
Hoja de estilos interna
Una hoja de estilo interna se puede usar en una sólo página con un estilo único.
Los estilos internos se definen dentro del elemento <style> dentro de la propia
página HTML:
<head>
<style>
body {
background-color: #FFFFFF;
}

h1 {
color: #000000;
text-align: center;
}
</style>
</head>
Estilos en línea
Un estilo en línea se puede utilizar aplicándolo al estilo de un solo elemento. Para
ello tienes que añadir el atributo de estilo al elemento en cuestión, pudiendo
contener cualquier propiedad CSS, como por ejemplo la siguiente:
<h1 style="color:red;margin-left:30px;">Esto es un estilo en
linea</h1>
Orden en cascada
Supongo que si estás utilizando los tres tipos de CSS te preguntarás cuál
prevalece, ¿no? Pues como bien indica su nombre siguen un orden en cascada
con esta prioridad:

1. Estilo en línea (dentro de un elemento HTML )

2. Hojas de estilo externas e internas (en la sección de cabecera )
3. Las que viene por defecto en el navegador
Por lo tanto, un estilo en línea (dentro de un elemento HTML específico) tiene la
prioridad más alta, lo que significa que va a anular los estilos definidos dentro de la
etiqueta <head>, aquellos recogidos en una hoja de estilos externa (archivo.css) o
incluso los que trae por defecto el navegador .
Sintaxis CSS
Un conjunto de reglas CSS consta de un selector y de un bloque de declaración:
El selector hace referencia al elemento HTML al que le queremos aplicar el estilo,

mientras que el bloque de declaración contiene una o más declaraciones

separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados
por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de
declaracionesestán rodeados por llaves .
En el siguiente ejemplo todos los elementos de párrafo tendrán el texto azul
y centrado:
p {
color: blue;
text-align: center;
}
Los selectores CSS
Los selectores CSS se utilizan para “encontrar” (o seleccionar) elementos HTML
en función del nombre del elemento, del id , de la clase, del atributo, etc.
El selector de elementos
El selector de elementos elige elementos en función del nombre de los mismos.
Por ejemplo, podríamos seleccionar todos los elementos <h2> en una
página, alinearlos a la izquierda y ponerlos en color rojo de la siguiente manera:
h2 {
text-align: left;
color: red;
}
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un
elemento específico, esto quiere decir que será único dentro de una página.
Para ello debes utilizar el símbolo de la almohadilla (#) delante del atributo id. Si
por ejemplo tenemos un id=parrafo1 que queremos centrar y poner en color azul,
la regla de estilo sería la siguiente:
#parrafo1 {
text-align: center;
color: blue;
}
El selector de clase
El selector de clase elige los elementos con un atributo de clase específico. Para
ello tienes que escribir un punto (.) delante del nombre de la clase .
Por ejemplo, podemos decidir que aquellos atributos con clase “newsletter” estén
centrados y sean rojos:
.newsletter {
text-align: center;
color: red;
}
Otro caso posible sería que quisieras añadir la clase “newsletter” sólo a los
elementos de párrafo, entonces quedaría de la siguiente forma:
p.newsletter {
text-align: center;
color: red;
}
¿Y si quieres que tus elementos HTML hagan referencia a más de una clase?

Pues también es posible

<p class="newsletter centrado">Este parrafo tiene en cuenta
la clase newsletter y centrado</p>
La agrupación de selectores
Si tienes varios elementos a los que quieres aplicarles los mismos estilos también
se puede hacer. Para ello tienes que separar cada selector con una coma como
en el siguiente ejemplo:
h1, h2, p {
text-align: center;
color: red;
}
Comentarios CSS
Los comentarios se utilizan para explicar el código, de manera que si en un futuro
quieres editarlo sea más sencillo entenderlo. Para que éstos sean ignorados por
los navegadores tiene que ir entre estos símbolos: al inicio /* y al final */.
h2 {
color: blue;
/* Esto es un comentario */
text-align: center;
}
Conclusión
Podría extenderme bastante más, pero como acercamiento creo que es más que
suficiente. Una vez asimiles toda la información aquí plasmada, te animo a que
eches un vistazo al style.css de tu WordPress (Apariencia → Editor) y así puedas
ver de primera mano los diferentes tipos de selectores.

FORMATOS DE TEXTO EN HTML: NEGRITA, CURSIVA, TACHADO, SUBRAYADO, SUPERÍNDICE,

SUBÍNDICE.

Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a
describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente indicaremos las que han
sido más utilizadas en el pasado, aunque algunas se consideren deprecated (no recomendadas).

Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello
tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman
ese texto en el formato que nosotros le hayamos querido dar. Algunas de estas etiquetas están no recomendadas
(deprecated) por lo que no debemos emplearlas. Otras etiquetas han adquirido un nuevo significado en las
últimas versiones de HTML, pero no vamos a entrar a definir este nuevo significado. Debido a su amplia difusión
en el pasado conviene conocer los que fueron usos tradicionales de estas etiquetas, a medida que avances en
el conocimiento de HTML podrás comprobar cómo para algunas etiquetas se consideran hoy día nuevos
significados.

Como verás, algunas de las etiquetas que vamos a explicar están obsoletas (deprecated en inglés). Estas
etiquetas en principio no deben de ser usadas porque dejarán de existir en las nuevas versiones a partir de
HTML 5 y los navegadores es posible que dejen de reconocerlas en un futuro. Los motivos para incluirlas en
este curso son:
- Son etiquetas que han sido muy populares en el pasado y te puedes encontrar muchas páginas webs que
hacen uso de ellas.

- Son etiquetas reconocidas por prácticamente todos los navegadores actuales.

- Son una buena forma de introducirnos en los lenguajes propios de desarrollos webs desde el punto de vista
didáctico. Una vez se entiendan estos conceptos, es más fácil abordar aspectos más avanzados como las hojas
de estilo CSS.

NEGRITA

Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización
de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un
significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La
primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código
y lo que veríamos en pantalla:
Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
CURSIVA

Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto debes
cerrarla con la etiqueta </i>). También se ha utilizado la etiqueta <em>. Como en el caso de la negrita, aunque
podrían atribuírseles distintos significados no vamos a prestarle atención a esta cuestión ahora. Aquí
presentamos un ejemplo:

Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>

SUBRAYADO U (DEPRECATED)

Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo
con su correspondiente etiqueta </u>. Así se subrayaría una frase:

<u>Así subrayaríamos una frase importante</u>

PALABRAS MÁS GRANDES O MÁS PEQUEÑAS

Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de
utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación
de tamaño se podía conseguir gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos
indican cuáles eran sus funciones: <big> agrandará el texto y <small> lo disminuirá. No recomendamos su uso
ya que las nuevas versiones de HTML no van a admitir esta etiqueta. La modificación del tamaño del texto se
debe hacer a través de técnicas CSS.

Cada vez que se escribe una etiqueta big, se hace el texto un punto más grande. Estas etiquetas también se
podían combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.
Un ejemplo sería el siguiente:

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y

ésta <big><big>más grande aún</big></big>.

SUPERÍNDICES Y SUBÍNDICES

Mediante HTML también podemos escribir expresiones con símbolos matemáticos. Gracias a las etiquetas
siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un
subíndice y <sup> será la etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier expresión con símbolos matemáticos como esta:
H₂O o números elevados a potencias 7³.

TEXTO TACHADO

Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las
etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado. Aquí presentamos una muestra:

Puedo proceder a tachar una palabra <strike>así</strike>, <s>así</s> o <del>así</del>

EJERCICIO

En el siguiente código hay elementos que en las versiones más recientes de HTML se consideran deprecated o
not supported. Escribe el código en un editor de textos como el bloc de notas o Notepad++, guárdalo con un
nombre como ejemplo.html y visualízalo en tu navegador.

Responde a las siguientes preguntas: ¿Qué etiquetas de las empleadas sería recomendable no utilizar y
reemplazar mediante uso de técnicas CSS?

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 01 del curso HTML - aprenderaprogramar.com</title>
</head>
<body text="green" bgcolor="white">
<pre>
Ejemplo básico: uso de etiquetas de formato y atributos básicos para la etiqueta body.
<strong>negrita</strong>
<em>Cursiva</em>
<del>Subrayado</del>
<big>Grande</big>
<small>pequeño</small>
Esto es un_subíndice
Y esto un^superíndice
</pre>
</body>
</html>
Etiquetas válidas fundamentales para dar
formato a un texto
Resaltar textos
<strong> Texto de mayor importancia</ strong>
Normalmente devuelve el texto en negrita, pero fundamentalmente se
usa para dar mayor importancia a ciertas palabras o frases dentro de un
texto. Es una etiqueta importante para el posicionamiento web.
<b>texto en negrita</ b>
La etiqueta que convierte el texto en negrita, simplemente. Para darle a
un texto mayor importacia es más correcto usar <strong>.
<em> texto en cursiva </ em>
Crea énfasis en el texto seleccionado, normalmente mostrando el texto
en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta
en lugar de <i>.
<h1> títulos y encabezados</ h1>
Crea títulos, para dar más o menos importancia a frases de tu texto y
establecer orden dentro de la narración. Hay 6 niveles de mayor a menor
importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.
<big>texto más grande</ big>
Una forma rápida de aumentar el tamaño de la fuente. Para hacer el
texto más pequeño sin usar css se usa <small>.
<sub> subíndice</ sub>
Muestra el texto dentro de estas etiquetas por debajo de la línea normal,
a modo de un subíndice.
<sup> superíndice </ sup>
Muestra el texto dentro de estas etiquetas por encima de la línea normal,
a modo de un superíndice.
Estructura y disposición de textos en la página
<div>bloque de texto</ div>
Establece un bloque personalizado de contenido en tu página. Se utilizan
sobre todo junto con las hojas de estilos para crear capas y estructuras
web.
<span> Bloque de texto en línea</ span>
Similar a la etiqueta div, pero el texto contenido dentro de esta etiqueta
sigue el flujo normal del resto, mientras que el texto contenido dentro de
la etiqueta <div> actúa como un bloque separándolo visualmente del
resto. Puedes leer más información sobre elementos y etiquetas en HTML.
Texto preformateado
<pre> texto preformateado</ pre>
Soportes de texto preformateado. Si envuelve alrededor de este texto,
que va a seguir la forma
del texto en el código – es decir, sin formato extra tiene que poner pulg Si
tienes espacio que en su código, éste aparecerá espaciadas en la
página.
<samp> Textos de ejemplo</ samp>
Se utiliza para mostrar un ejemplo en pantalla, por lo general de una
salida de un programa, un script, etc. Es similar en uso a la etiqueta
<code>.
<code> código</ code>
Establece el texto como código, se usa mucho en páginas como esta,
para ejemplos de código fuente.

Aplicar un Estilo
Para aplicar un Estilo CSS personalizado:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de
inserción del mouse en un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango
de texto dentro de un párrafo, el Estilo CSS sólo afectará al rango seleccionado.

En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que

aparece al desplegar el cuadro Estilo.
Hojas de Estilos
Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva
hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y
seleccionando Exportar.

Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar
todos los estilos incrustados en un nuevo archivo CSS.

Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos
en otras también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego
la adjuntamos en cualquier página que queramos utilizarlos.
 Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra
en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

Elegimos si queremos Vincular o importar la hoja de estilos.

Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una
referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de
manera automática en todas las páginas que utilizan la hoja. Esta es la opción más aconsejable
si vamos a utilizar el estilo en más de una página, de esta forma sólo será necesario vincular
cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas
creado.

Si elegimos Importar la hoja se incrusta en la página.

La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos,
por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán
crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que será la que
se muestre cuando navegues por Internet, y otra para print que será la que se utilice cuando se
imprima el contenido del archivo.

Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.

Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Texto, y
a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a
través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través
del menú Texto.

Formato:

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado,
párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro de un
documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito,
por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al
establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo
uno.
 Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga
en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el
usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial,
Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá
en Helvetica.

Tamaño:

Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en
píxeles, centímetros, etc...

Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página
ni aquí, el color del texto por defecto será el negro.

Estilo:

Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del
menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en
el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos
aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se
trata de un vínculo.

Alinear:

A través de estos botones es posible establecer la alineación del texto de una de estas cuatro
formas distintas: izquierda, centrada, derecha y justificada.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas.

Sangria:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie
de márgen que se establece a ambos lados del texto. En este caso caso los botones se refieren
a sangría a la izquierda del texto.