HTML es un sistema de marcado cuya función es definir la estructura y aspecto de un documento.

Debemos profundizar esta

definición, que sin más aclaraciones no diría mucho, a fin de comprender mejor los conceptos de marcas lógicas y tipográficas.
Una marca tipográfica tiene como función formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo,
etc.Nos sirven para indicar cómo queremos que se muestre el texto; podemos dividirlos en dos categorías: Los que modifican
texto entre dos etiquetas y Los que modifican el texto que les sigue.

Los que modifican texto entre dos etiquetas
Elemento b
(bold = negrita) muestra el texto en negrita.
Sus etiquetas son: <b> y </b> (ambas obligatorias)
Elemento strong
(strong = negrita) muestra el texto en negrita.
Sus etiquetas son: <strong> y </strong> (ambas obligatorias)
Elemento i
(italic = itálica) muestra el texto en cursiva.
Sus etiquetas son <i> y </i> (ambas obligatorias)
Elemento tt
Muestra el texto con caracteres monoespaciados.
Sus etiquetas son <tt> y </tt> (ambas obligatorias)
Elemento big
(big = grande) aumenta el tamaño del texto seleccionado.
Sus etiquetas son: <big> y </big> (ambas obligatorias)
Elemento small
(small = pequeño) reduce el tamaño del texto seleccionado.
Sus etiquetas son: <small> y </small> (ambas obligatorias)
Elemento u
(underlined = subrayado) Subraya el texto seleccionado.
Sus etiquetas son: <u> y </u> (ambas obligatorias)
Elemento sup
(sup = super) Convierte el texto seleccionado en superíndice, por
ejemplo: E=mc2.
Sus etiquetas son: ^y (ambas obligatorias)
Elemento sub
(sub = por debajo) Convierte el texto seleccionado en subíndice, por
ejemplo:texto normal, texto en subíndice.
Sus etiquetas son: _y (ambas obligatorias)
Elemento strike
(strike = roto) Convierte el texto seleccionado en tachado, por
ejemplo:Texto tachado.
Sus etiquetas son <strike> y </strike> (ambas obligatorias)

Elemento FONT
Descripción: El elemento <FONT> puede servirnos para cambiar la fuente del texto que escribimos, el tamaño, el color...
Por ejemplo:
<FONT face="Comic Sans MS"> Mi texto en Comic Sans </FONT> quedaría:
Mi texto en Comic Sans. Para cambiar la fuente del texto tendrías que poner <FONT face="FUENTE DEL TEXTO"> el texto </FONT>
, la fuente tiene que estar instalada en tu ordenador, si quieres puedes poner más de una fuente por si no reconoce la primera,
por ejemplo: <FONT face="Comic Sans MS, Verdana, Script MT Bold"> texto </FONT>, así, si no reconoce la primera fuente, pasará
a la segunda, y si no, a la tercera.
Para cambiar el tamaño del texto el código es: <FONT size="1"> y el tamaño será según el número que indiques.
Para cambiar el color tienes que poner este código:<FONT color="*">; el asterisco lo pongo porque hay 2 formas de poner el color,
1: poner el nombre del color en inglés, blue, red... o en el color hexadecimal correspondiente por el color poniendo antes una
almohadilla (#), por ejemplo #660033.

Elemento INPUT
La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos:
type="" Indicará el tipo de variable a introducir.
text Indica que el campo a introducir será un texto. Sus atributos:
maxlenght="" Seguido de un valor que limitará el número máximo de carácteres a introducir en ese campo.
size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
value="" Indica que no hay valor inicial del campo.
Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus
atributos serán los mismos que para text.

Listas <UL> <OL> <LI> Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos
diferentes de listas, cada uno con tags distintas aunque con alguna en común:
Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li>
que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo
seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada
elemento en forma secuencial, aunque se introduzcan modificaciones.

Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la
tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con
viñetas.
Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.

Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su
propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>.
Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de
apertura el atributo compact: <dl compact>.

Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede
jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el
conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a
convenir sangrar el propio código conforme lo va escribiendo en HTML.
<HTML> <ul> Listas anidadas
<HEAD> <li>Uno</li> <ul>
<TITLE>Ejemplo 6</TITLE> <li>Dos</li> <li>Uno
</HEAD> <li>Tres</li> <ul>
<BODY> </ul> <li>Uno</li>
<br><br> <li>Dos</li>
<H1>Listas</H1> Una lista de glosario <li>Tres</li>
Una lista ordenada <dl> </ul>
<ol> <dt>T&eacute;mino 1</dt> </li>
<li>Uno</li> <dd>Definici&oacute;n 1</dd> <li>Dos</li>
<li>Dos</li> <dt>T&eacute;mino 2</dt> <li>Tres</li>
<li>Tres</li> <dd>Definici&oacute;n 2</dd> </ul>
</ol> </dl> </BODY>
<br><br> <br><br> </HTML>
Una lista sin ordenar

Numeración y Viñetas En la numeración se utiliza la instrucción <OL></OL>. Cada uno de los elementos de la lista está precedido
de la instrucción <LI>. En la instrucción <OL> se puede incluir el tipo de numeración:
type = tipo Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.
Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)

Las viñetas se representan con la instrucción <UL></UL> para

delimitar la lista, y <LI> para indicar cada uno de los elementos. En la
instrucción <UL> se puede incluir el tipo de viñeta:
disk = Indica un punto
circle = Indica un punto sin relleno
square = Indica un cuadrado

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de
materias".
Con los Códigos de colores HTML puede establecer el color de fondo del sitio web, el color del texto, de las celdas en las tablas y
mucho más.
Usar los códigos de colores HTML para el color de fondo del sitio web:
<body style="background:#80BFFF">

Usar los códigos de colores HTML para configurar el color de la fuente/texto:

<span style="color:#80BFFF">

Usar los códigos de colores HTML para el color de fondo de las tablas:
<table style="background:#80BFFF">

Usar los códigos de colores HTML para los colores de los enlaces:
<a style="color:#80BFFF">
COLORES HTML
Los que están en negrita se pueden escribir en lugar de los códigos.
Nombre del color Código del color Apariencia
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
Aqua #70DB93
Baker's Chocolate #5C3317
Blue Violet #9F5F9F
Brass #B5A642
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
Copper #B87333
Coral #FF7F00
Corn Flower Blue #42426F
Dark Brown #5C4033
Dark Green #2F4F2F
Dark Green Copper #4A766E
Dark Olive Green #4F4F2F
Dark Orchid #9932CD
Dark Purple #871F78
Dark Slate Blue #6B238E
Dark Slate Grey #2F4F4F
Dark Tan #97694F
Dark Turquoise #7093DB
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
Gold #CD7F32
Goldenrod #DBDB70
Gray #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
Hunter Green #215E21
Indian Red #4E2F2F
Khaki #9F9F5F
Light Blue #C0D9D9
Light Grey #A8A8A8
Light Steel Blue #8F8FBD
Light Wood #E9C2A6
Lime #32CD32