Conocimientos básicos de html

CSS indirectas fuera del documento
Otra forma de aplicar CSS es a través de unos estilos que se encuentran fuera del documento, pero al que se aplicarán esos estilos. Esta forma de aplicar CSS es útil si queremos aplicar los mismos estilos a diferentes documentos html. Se debe crear por tanto un documento de extensión .css donde estarán determinados los diferentes estilos. Y desde cada hoja en la que se quiera aplicar, habrá que indicar que debe buscar los estilos en ese documento. Para ello, hay que incluir la siguiente etiqueta con los siguientes atributos:
<link rel="stylesheet" type="text/css" href="urlhojadeestilos.css">
El mejor ejemplo que se puede mostrar es la hoja de estilo css. que se aplica a esta página y que es la que se adjunta a las demás hojas o páginas de esta selección informativa. De esta manera se uniforma el estilo en todo el bloque de datos. Es importante destacar que posteriormente cualquier cambio que se haga en esta hoja de estilo, afectará a todo el bloque de documentos.
<link href="../.php.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
Explicaré a continuación los diferentes atributos de la etiqueta <link>: El atributo "rel" debe ir con el valor "stylesheet" ya que está definiendo que “link” se está usando para insertar una hoja de estilo. El atributo "type" con valor "text/css" indica que el tipo de sintaxis que usa la hoja de estilo es CSS. Por último, el atributo "href" especificará la ubicación y el nombre de la hoja de estilo.

CSS indirectas dentro del mismo documento
Este tipo de hojas de estilo se aplican cuando se necesita que los estilos de las CSS se apliquen de una forma global a todas las etiquetas de un documento. Por ejemplo, se quiere que todo el cuerpo del documento, el “body", tenga un determinado tipo de letra, que los párrafos tengan un color determinado, que las cabeceras tengan un tamaño igual entre ellas, etc. Para conseguir estos propósitos, las CSS indirectas son ideales. Para aplicar una CSS indirecta dentro del mismo documento, utilizaré la etiqueta <style>. La colocaré en la cabecera del documento. Entre esta etiqueta y su cierre (</style>) escribiré todos los estilos que quiero definir en el documento. El código de la estructura básica de este tipo de CSS sería el siguiente:
<html>
<head>
Aquí van los datos de la cabecera del documento
<style type="text/css">
 </style>
</head>
<body>
Aquí va el cuerpo del documento, todo el contenido
</body>
</html>
Observar como a la etiqueta “style" le hemos puesto el atributo type=“text/css". Indicar este atributo no es necesario, pero sí muy recomendable, pues le está indicando al navegador el tipo de sintaxis que usa la hoja de estilo. Observar también como he puesto los estilos como si fueran comentarios. Anteriormente los estilos se escribían así para ocultar las hojas de estilo a los navegadores que no las reconocieran. Actualmente, todos los navegadores las reconocen, así que escribirlo de esta manera es innecesario.

Formas de definir clases
A continuación vamos a explicar como definir los estilos de los tags dentro de la etiqueta “style". Existen varias formas: Si se quiere definir un estilo, a todas las etiquetas de un determinado tipo que se encuentren en el documento, se escribe de la siguiente manera:
style type="text/css">
-p { atributo1:valor1;atributo2:valor2;}
-h4 { atributo1:valor1;atributo2:valor2;}
</style>
Observar como primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar. Éste va encerrado entre los signos { y }. Todo ello entre las etiquetas <style>. Observar el siguiente código:
style type="text/css">
body {bgolor:#FFFFFF;}
-p { font-family:Courier New;font-size:12pt;color:#0000FF;}
-h4 { color:#FF0000;font-family:verdana;text-align:center;}
</style>
Este código aplicado a un texto haría que el color de fondo del documento fuera blanco, que todos los párrafos tuvieran la fuente “courier new" de tamaño 12 y de color negro y que los textos dentro de etiquetas <h4> fueran de color rojo, estuvieran centrados y su tipo de letra fuera “verdana". Y a continuación copio el código del mismo:
html>
<head>
<title>Un ejemplo de aplicar estilos indirectos en el mismo documento</title>
<style type="text/css">
body {bgolor:#FFFFFF;}
p { font-family:Courier New;font-size:12pt;color:#0000FF;}
h4 { color:#FF0000;font-family:verdana;text-align:center;}
</style>
</head>
<body>
<p>El texto que vaya dentro de este párrafo tiene unas características definidas en la hoja de estilo.<p/>
<h4>Esta cabecera tiene otras características</h4>
<p>Otro párrafo igual que el anterior</p>
</body>
</html>
Otra forma de aplicar un estilo es mediante una clase. Las clases se definen también dentro de la etiqueta “style". Se escribe de la siguiente manera. Observa el código:
.nombreclase {propiedad1:valor1; propiedad2:valor2;}
Como vemos, tenemos que escribir un punto, seguido del nombre de la clase. Para aplicarla, sólo hay que incluirla dentro de la etiqueta que se quiere transformar. Observar el siguiente ejemplo:
<style type="text/css">
.nombreclase { background-color:#000000;color:#FFFFFF;font-size:15pt; }
</style>
Y ahora le aplicarle el estilo a un párrafo. Y a continuación, el código del mismo:
<html>
<head>
<title>Un ejemplo de aplicar el estilo class</title>
<style type="text/css">
.nombreclase { background-color:#000000;color:#FFFFFF;font-size:15pt; }
</style>
</head>
<body>
<p class="nombreclase">El texto que vaya dentro de este párrafo tendrá un color de fondo negro, un color de texto blanco y un tamaño de fuente de 15 puntos, ya que son las características que tiene la clase “nombreclase"</p>
</body>
</html>
Si se quiere restringir el uso de un estilo a un elemento de un tipo determinado, se puede definir de la siguiente manera:
X.nombredelaclase {propiedad1:valor1;}
“X" será la etiqueta a la que se quiere aplicar el estilo. Lo que estoy haciendo con esta forma de aplicar el estilo es limitar esa clase sólo a las etiquetas que se llamen "X". Si pusiéra esta clase en una etiqueta llamada “Y" no funcionaría. Por ejemplo, si escribo esta clase: “p.clase1 {color:#FF0000;text-align:center;}", ese estilo sólo se aplicaría a los párrafos que llevarán esa clase, pero no a ningún otro tipo de etiquetas. Esta es la forma de definir el estilo. Para aplicarlo lo haremos de la misma forma que se aplicán los estilos por clases. En el caso anterior sería:
<p class="clase1">Este párrafo será de color rojo y alineado al centro</p>
Otra forma de definir un estilo es a través del símbolo “#" y del atributo “id". Esta forma de aplicar un estilo es útil para definir un estilo particular. Este estilo se escribiría de la siguiente manera:
<style type="text/css">
#estiloparticular { color:#FF0000; font-size:15pt; }
</style>
Y para aplicarlo debe usarse un tag con el atributo "id" cuyo valor sea el nombre del estilo. En el siguiente enlace muestro cómo quedaría este texto:
<html>
<head>
<title>Un ejemplo de aplicar un estilo particular</title>
<style type="text/css">
#estiloparticular { color:#FF0000; font-size:15pt; }
</style>
</head>
<body>
<p>Este párrafo no tiene aplicado ninguna clase.</p>
<p id="estiloparticular"> A este párrafo le hemos aplicado el “estiloparticular", por lo que el texto es rojo y de un tamaño diferente al anterior</p>.
</body>
</html>

Pseudoclases.
Las pseudoclases son las diferentes clases o los diferentes estilos que podemos darle a un enlace. El navegador por defecto le otorga un estilo diferente a los enlaces con respecto al texto restante. Pero se puede definir ese estilo mediante las pseudoclases. Las diferentes posibilidades de las pseudoclases son las siguientes:
• a:link Es el estilo de un enlace que no ha sido explorado por el usuario.
• a:visited Es el estilo de un enlace que ha sido visitado.
• a:active Estilo de un enlace seleccionado, mientras está siendo seleccionado.
• a:hover Es el estilo de un enlace que tiene el ratón encima, pero sin estar seleccionado.
La forma de escribir las pseudoclases es la siguiente:
<style type="text/css">
a:link{ color: #00FF00; text-decoration: none}
a:active{ color: #000000; text-decoration: none}
a:visited{ color: #000000; text-decoration: none}
a:hover{ color: #FF0000; text-decoration: underline}
</style>
Lo que quiere decir que el enlace, cuando esté sin pulsar, se mostrara de color verde; que cuando esté el ratón encima de él, estará de color rojo y con subrayado; y que cuando se esté pulsando en él o cuando ya haya sido visitado, se mostrará en negro y sin subrayado.

Unidades de medida.
font-size es un estilo que indica el tamaño de la fuente. Esta clase la explicaré más adelante, en el artículo de estilos de fuente. Ahora lo que copio a continuación, son las diferentes unidades de medida en CSS que puedo encontrar. Pixels: px.Las medidas se miden en pixels. Se escriben de la siguiente manera:
<div style="font-size:10px;">Texto de 10 pixels</div>
<div style="font-size:12px;">Texto de 12 pixels</div>
<div style="font-size:14px;">Texto de 14 pixels</div>
<div style="font-size:16px;">Texto de 16 pixels</div>
<div style="font-size:18px;">Texto de 18 pixels</div>
<div style="font-size:20px;">Texto de 20 pixels</div>
Inches o pulgadas: in Las medidas se miden en pulgadas. Se escriben de la siguiente manera:
<div style="font-size:0.2in;">Texto de 0.2 pulgadas</div>
<div style="font-size:0.3in;">Texto de 0.3 pulgadas</div>
<div style="font-size:0.4in;">Texto de 0.4 pulgadas</div>
<div style="font-size:0.5in;">Texto de 0.5 pulgadas</div>
Milímetros: mm Las medidas se miden en milímetros. Se escriben de la siguiente manera:
<div style="font-size:8mm;">Texto de 8 milímetros</div>
<div style="font-size:9mm;">Texto de 9 milímetros</div>
<div style="font-size:10mm;">Texto de 10 milímetros</div>
<div style="font-size:11mm;">Texto de 11 milímetros</div>
Centímetros: cm Las medidas se miden en centímetros. Se escriben de la siguiente manera:
<div style="font-size:0.5cm;">Texto de 0.5 centímetros</div>
<div style="font-size:1cm;">Texto de 1 centímetros</div>
<div style="font-size:1.2cm;">Texto de 1.2 centímetros</div>
Picas: pc Las medidas se miden en picas. Se escriben de la siguiente manera:
<div style="font-size:1pc;">Texto de 1 picas</div>
<div style="font-size:2pc;">Texto de 2 picas</div>
<div style="font-size:3pc;">Texto de 3 picas</div>
<div style="font-size:4pc;">Texto de 4 picas</div>
Puntos: pt Las medidas se miden en puntos. Se escriben de la siguiente manera:
<div style="font-size:15pt;">Texto de 15 puntos</div>
<div style="font-size:20pt;">Texto de 20 puntos</div>
<div style="font-size:25pt;">Texto de 25 puntos</div>
<div style="font-size:30pt;">Texto de 30 puntos</div>
<div style="font-size:35pt;">Texto de 35 puntos</div>
Existen dos tipos más que son em y ex.

Estilos de fuentes.
Los siguientes estilos se pueden aplicar a las fuentes. Se puede cambiar el tamaño del texto, el color del mismo, su anchura, su estilo e incluso su tipo de letra. Observar el script detenidamente: Estilo / color. Este estilo lo usamos para darle color al texto. Se puede indicar como nombre del color o con el modo RGB. Este último es el más recomendable, pues no todos los nombres de colores son admitidos en el estándar. A continuación vamos a ver cómo se escribe el estilo para darle al texto un color rojo.
<div style="color:#FF0000;">Este texto se verá de color rojo.</div>

Position, left y top.
Estilo position
Position en el estilo determina una posición para esa capa. Esta posición puede ser estática, absoluta o relativa. A continuación vamos a pasar a explicarte las tres:

Valor “position: static” La posición “static” es el valor predefinido por defecto de todos los elementos HTML. Los elementos posicionados estáticamente se van colocando uno a continuación de otro, según el flujo HTML.

Valor “position: absolute” Las capas que tienen una posición absoluta no forman parte del flujo natural de los otros elementos del documento HTML, sino que su posición está asignada independientemente de la posición de los otros elementos. La posición de las capas con “position:absolute” se fija mediante unas coordenadas, que vienen dadas por los atributos top y left. El punto inicial de estas coordenadas es la esquina superior izquierda de la caja que contiene los elementos.

Valor “position: relative” Anteriormente he visto como los elementos con posición absoluta no formaban parte del flujo HTML. Pues a diferencia de éstos, los elementos con posición relativa sí forman parte de este fluir. Para elementos con un posicionamiento relativo, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados.

Overflow.
Estilo overflow
Como ya hemos dicho en un artículo anterior, este estilo especificará al navegador el trato que tiene que darle a un texto que no cabe en el espacio que le hemos especificado. Los valores de este estilo pueden ser cuatro:
* Visible: El navegador expandirá el tamaño del documento hasta que encaje todo el contenido.
* Hidden: Ajustará el contenido al tamaño asignado y lo que no quepa no lo mostrará.
* Scroll: Colocará barras de scroll independiente de si el elemento cabe o no.
* Auto: Sólo colocará barras de scroll si el contenido excede del tamaño predefinido.

Tags, etiquetas o Marcas
Nota: La información ha sido tomada de la Facultad de Informática de la Universidad de Las Palmas de Gran Canaria Url:http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html/indice.htm#guia_rap
Marcas
Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc y son utilizadas para dar un tratamiento diferente al texto que se encuentre entre las marcas. En HTML las marcas se delimitan con los signos < (inferior a) y > (superior a). Un texto marcado tendrá por tanto este aspecto: ...texto normal <marca> texto afectado por la marca </marca> resto del texto... Un ejemplo podría ser resaltar un texto en negrita, para ello se emplea la marca <B> y quedaría de la siguiente forma: ...texto normal <B> texto en negrita </B> resto del texto...

Atributos de las marcas
Algunas marcas pueden admitir atributos, pudiendo tener cada uno de estos atributos un valor. Este valor ira entre comillas (") si dicho valor es alfanumérico. <marca atributo1=numérico atributo2="alfanumérico"> Ejemplo: <pre width=50> <a href="/home/default.html">

Definición de bloques
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Marcas de bloques:
* <P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>
* <PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el browser, respetando el formato con el que fue escrito en el fichero fuente HTML.
* <ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado.
* <BLOCKQUOTE> Se suele representar con tabulaciones a la izquierda y derecha y en cursiva. En sistemas que no permiten representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas.
* <BR> Este elemento solo tiene marca inicial e indica un salto de línea.
* <HR> Solo tiene marca inicial y se emplea para representar una línea horizontal.

Lista descriptiva DL,DT,DD
El elemento DL abre una lista descriptiva. Define el inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar, designar cada uno de los elementos, la parte definición y el propio elemento. El atributo COMPACT asocia a la marca DL (<DL COMPACT>) permitirá al browser mostrar en la misma línea el elemento y la primera línea del bloque. Ejemplo:
<dl compact>
<dt>ASCII<dd> juego de caracteres que asigna valores numéricos estándar a las letras, cifras y signos de puntuación
<dt>FUENTE<dd> Conjunto de estilos que posee una categoría de caracteres (negrita, cursiva...)
</dl>

Listas anidadas
Hagamos un ejemplo donde es evidente la forma en que debemos manejar estas etiquetas.
<ul>
<li>Ficheros HTML
<ol>
<li>Ficheros de prueba
<ul>
<li>prueba1.html</li>
<li>prueba2.html</li>
<li>prueba2.html</li>
</ul>
<li>Ficheros de ejemplos
<li>Ficheros del servidor
</ol>
<li>Ficheros de imágenes
<li>Ficheros de sonido
<li>Ficheros de vídeo
</ul>

Tablas
La marca <TABLE>
Una tabla se define entre las marcas <TABLE> y </TABLE>. Esta primera marca regula la presentación general de la tabla mediante tres atributos: BORDER define el grosor del marco exterior CELLPADDING define el espacio alrededor del texto de una celda CELLSPACING define el espacio entre celdas WIDTH define la anchura de la tabla relativa a la anchura de la ventana del browser. Ejemplo:

<table width="100" border="6" cellpadding="3" cellspacing="3" bordercolor="#999999" class="manual">
<tr>
<td align="center">A</td>
<td align="center">B</td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">D</td>
</tr>
</table>

La marca tr, define la fila y la marca o tag td define la celda que se anida dentro de la fila.
Conocer como redactar el código html de una tabla nos ayudará en un futuro a poder insertar dentro de cada fila y celda, los registros de formularios y matrices.

Símbolos.
Por último conoceremos como HTML interpreta los símbolos que más usamos, tanto a la hora de escribir los códigos como los textos.
Los más usados