Listados y tablas es lo que este pequeño tutorial pretende abarcar en esta ocasión.

1. GENERANDO LISTAS y TABLAS
EJERCICO UNO – PARRAFOS y LISTADOS
El siguiente ejercicio pretende abordar temas ya conocidos como lo son los fuentes, párrafos y además de introducir el
concepto de listas en HTML. Además de ello se descubrirán ciertos caracteres especiales que son necesarios para escribir
ciertos textos que no aparecen en el inglés, como lo son las tildes, la “ñ” y los signos de admiración e interrogación en
HTML. Escriba el siguiente código en un archivo nuevo de Sublime Text 3:
Guarde este archivo como listas.html y ábralo en el navegador. Deberá verse así:

2. Se deja al estudiante una sección dedicada completamente a la explicación de los caracteres especiales.
Puede consultarla haciendo clic en el siguiente enlace: CLIC AQUI
EJERCICO DOS – TABLAS
Una tabla consta de FILAS (horizontales en verde) y COLUMNAS (verticales en rosa). La intersección de una columna y una
fila se denomina CELDA (en cian). HTML posee etiquetas que permiten dibujar tablas directamente en nuestro sitio web.
El hecho de utilizar tablas es una práctica que está siendo poco utilizada en la actualidad, debido a que otras tecnologías de
diseño y estilo, como el caso de CSS, vienen a arreglar el problema de ubicación de elementos en el sitio web.
Sin embargo, no por eso dejaremos de aprender esta maravillosa técnica de dibujo de tablas en HTML. Al llegar al tema de
CSS notaremos que esta tecnología permite la mejora y optimización del estilo visual y estético del sitio y que muchas de las
etiquetas de HTML se verán afectadas.
No se asuste si no entiende lo que digo, muy pronto lo entenderá.
Abra una nueva pestaña en Sublime Text 3 y escriba el siguiente código:

3. Guarde este archivo como horario.html y ejecútelo en el navegador.
Aprenderemos otra lección importante: las cosas en HTML se pueden modificar al antojo del programador. Para ello, en el
mismo archivo HTML que está diseñando, escriba lo siguiente:

4. Prácticamente es copiar el mismo código que teníamos anteriormente justo debajo del original y hacer las modificaciones
en la línea señalada. Ahora guarde este documento y ejecútelo en el navegador. Deberá verse así:
Pueden hacerse las modificaciones que se desean, nada está escrito en piedra. Puede agregar columnas, filas y también
eliminarlas, modificar las fuentes, tamaños, colores… etc. Las posibilidades son casi infinitas.

5. BONUS: CARACTERES ESPECIALES
Los caracteres especiales, denominación que, para nuestra desgracia como hispanohablantes, incluye a las vocales
acentuadas y a la letra eñe además de ciertas limitaciones relativas al uso de ciertos símbolos que significan algo en HTML,
como el de menor que(<) o el signo inglés de and (llamado ampersand : &).
Trataremos primero el caso más sencillo. Existe una razón evidente que impide que podamos escribir ciertos símbolos
directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario
diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento
final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el
texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso &lt; . Los símbolos
afectados por esta limitación, y la forma de escribirlos, se detallan a continuación:
 < ( Menor que ): &lt;
 > ( Mayor que ): &gt;
 & (símbolo de and , o ampersand ): &amp;
 " ( comillas dobles ): &quot;
Es decir, que para escribir <"> en nuestro texto HTML original debemos poner &lt;&quot;&gt; .
El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo.
La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que
antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un
punto y coma ( ; ). Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en
nuestro idioma son:
 á: &aacute;
 é: &eacute;
 í: &iacute;
 ó: &oacute;
 ú: &uacute;
 Á: &Aacute;
 É: &Eacute;
 Í: &Iacute;
 Ó: &Oacute;
 Ú: &Uacute;
 ü: &uuml;
 Ü: &Uuml;
 ñ: &ntilde;
 Ñ: &Ntilde;
 ¿: &#191;
 ¡: &#161;
Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin acentuar (puesto que se
trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene, respectivamente. La
equivalencia de los signos de abrir interrogación y exclamación es algo más oscura: a falta de una denominación más

6. evidente, tenemos que usar el valor numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede
hacer con cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo&#numero; .
La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los
caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo
HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien
cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es
absolutamente recomendable respetar la norma especificada en HTML.
En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres
especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos
sin preocuparse por estos problemas, y luego traducir a HTML correcto.
Fuente: www.webtaller.com/construccion/lenguajes/html/lecciones/caracteres-especiales-html.php