SINTAXIS PARA TRABAJAR EN HTML
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de
base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los
elementos del documento, como enlaces, párrafos, imágenes, etc. Así pues, un
documento HTML estará constituido por texto y un conjunto de etiquetas para
definir la forma con la que se tendrá que presentar el texto y otros elementos
en la página.
La etiqueta presenta frecuentemente dos partes:
Una apertura: de forma general <etiqueta>
Un cierre: de tipo </etiqueta>
Un cierre: de tipo </etiqueta>
Todo lo
incluido en el interior de esa etiqueta sufrirá las modificaciones que
caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas
<b> y </b> definen un texto en negrita. Si en nuestro documento
HTML escribimos una frase con el siguiente código:
<b>Esto
esta en negrita</b>
PARTES DE UN
DOCUMENTO HTML
Además de todo esto, un
documento HTML ha de estar delimitado por la etiqueta <html> y
</html>. Dentro de este documento, podemos asimismo distinguir dos
partes principales:
El encabezado, delimitado por
<head> y </head>
donde colocaremos etiquetas de índole informativo como por ejemplo el titulo <title></title> de nuestra
página. El cuerpo, delimitado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Las mayúsculas o minúsculas son
indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de
combinación de mayúsculas y minúsculas. <html>, <HTML> o
<HtMl> son la misma etiqueta. Resulta sin embargo aconsejable
acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden
convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene
mal coger buenas costumbres desde el principio para evitar fallos triviales en
un futuro.
TABLAS EN HTML
Para empezar, nada más
sencillo que por el principio: las tablas son definidas por las etiquetas
<table> y </table>.
Dentro de estas dos
etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán
forma y contenido a la tabla.
Las tablas son descritas
por líneas de izquierda a derecha. Cada una de estas líneas es definida por
otra etiqueta y su cierre: <tr> y </tr>.
Asimismo, dentro de
cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por
otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será
donde coloquemos nuestro contenido.
Estructura de una
tabla sencilla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
Veamos a continuación algunos
atributos útiles para la construcción de nuestras tablas. Empecemos viendo
atributos que nos permiten modificar una celda en concreto o toda una línea: <tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
align:
Justifica el texto de la celda del mismo modo que si fuese el de un párrafo
(center, left, right).
valign: Podemos
elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o
abajo (bottom) de la celda.
bgcolor:
Da colo a la celda o linea elegida.
bordercolor: Define el color del borde.
Otros atributos que
pueden ser únicamente asignados a una celda y no al conjunto de celdas de una
línea son:
background: Nos permite colocar un fondo para la celda a
partir de un enlace a una imagen.
height: Define la altura de la celda en pixels o
porcentaje.bgcolor: Da colo a la
celda o linea elegida.
width: Define la anchura de la celda en pixels o
porcentaje.
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Nota:
El atributo height no funciona en todos los navegadores, además, su uso no está
muy extendido. Las celdas por lo general tienen el alto que necesitan para que
quepa todo el contenido que se le haya insertado, es decir, crecen lo
suficiente para que quepa lo que hemos colocado dentro.
El atributo width si que funciona en todos los navegadores y lo tendréis que utilizar constantemente. Si le asignamos un ancho a la celda, el ancho será respetado y si dicha celda tiene mucho texto o cualquier otro contenido, la celda crecerá hacia abajo todo lo necesario para que quepa lo que hemos colocado.
Estos últimos cuatro atributos descritos son de gran utilidad.
Concretamente, height y width nos ayudan a definir las dimensiones de nuestras
celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma
relativa, es decir por porcentajes referidos al tamaño total de la tabla.
Por ejemplo:
<td
width="80"> Dará una anchura de 80 pixels a la celda. Sin embargo:
<td width="80%">
Dará una anchura a la celda del 80% de la anchura de la tabla.
Los atributos rowspan y colspan son también utilizados frecuentemente.
Gracias a ellos es posible expandir celdas fusionando éstas con sus vecinas. El
valor que pueden tomar estas etiquetas es numérico. El número representa la
cantidad de celdas fusionadas.
Así, <td colspan="2">
Fusionara la celda en cuestión con su vecina derecha.
|
Esta celda tiene un colspan="2"
|
|
|
Celda normal
|
Otra celda
|
Del mismo modo,
<td rowspan="2">
|
Esta celda tiene rowspan="2", por eso tiene
fusionada la celda de abajo.
|
Celda Normal
|
|
Otra celda normal
|
Expandirá la celda hacia abajo fusionándose con la celda inferior.
No hay comentarios:
Publicar un comentario