HTML

Hyper Text  Markup Language

 

Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador.

 

… …

HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, entre otras.

HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>,/). 

 

: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML.

DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.

 

: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador.                                                                                                                             

 

: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

  • : define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo  es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:

    •  a 

      : encabezados o títulos del documento con diferente relevancia.
    • : define una tabla.
      •  
      : fila de una tabla.
      •  

      *Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas:

      * declara un documento HTML5 para que se visualice correctamente.

      Doctype comienza a utilizarse en HTML4.01 y XHTML

      *

         

      *La etiqueta meta define varios tipos de metadatos.

      *El atributo charset especifica la codificación usada en nuestra página.

       

      Las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos.

       

      Editores HTML

      Antes de comenzar a trabajar con un editor específico, es recomendable conocer el código.

      Podemos usar programas que trabajen con texto plano, sin añadir sus propias marcas de edición, en Windows el Bloc de Notas y en Macintosh el TextEdit.   

      Los documentos HTML deben tener la extensión html o htm.

      : celda de una tabla (debe estar dentro de una fila).                     

      Entidades HTML

        Los caracteres especiales como signo de puntuación, letras con tilde o diéresis o símbolos de escritura del lenguaje se deben convertir en entidad HTML para mostrarse en un navegador. 

                                                                

      Carácter Entidad HTML Carácter Entidad HTML
      á á Á Á
      é é É É
      í í Í Í
      ó ó Ó Ó
      ú ú Ú Ú
      ü ü Ü Ü
      ñ ñ Ñ Ñ
      ¡ ¡ ¿ ¿

      Estructura HTML

        *Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él.  

      		     

      *

      		  

      *Charset utf-8 es la Unicode Transformation Format 8-bit representa el código de caracteres UNICODE. Es compatible con ASCII.

      Permite visualizar los caracteres de todos los idioma. 

      *Caracteres especiales: para incluir en el texto caracteres que son propias del lenguaje HTML es necesario usar su anotación codificada: 

       

      Espacio en blanco (non-breaking space)

       

      <

      Menor que

      <

      >

      Mayor que

      >

      &

      Ampersand

      &

      “

      Comillas 

      "

      ‘

      apóstrofo

      '

      *

,yo,o  para identificar que esta codificado en este lenguaje y Limitar, el principio y el fin del documento.  la cabecera, que contiene información y recursos sobre el propio documento y que no aparece en el documento, destacando el titulo

El cuerpo contiene los elementos visibles en la página.

RESUMEN HTML

 

                                                                                                                                                                                                                           

La representación de una tabla es actualmente muy dependiente del browserutilizado. 

 TABLE La marca <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>. 
Se puede indicar alguno de los siguintes atributos: 
BORDER: define el grosor del marco exterior (puede ser cero). CELLPADDING: define el espacio alrededor del texto de una celda. CELLSPACING: define el espacio entre celdas.
El valor de estos atributos se especifica en píxels. Cuando no se les asigna ningún valor explícitamente estos atributos tomarán valores definidos por defecto. 
El valor por defecto del atributo BORDERes cero por lo que si éste atributo no se especifica se obtendrá una tabla sin bordes la cual suele ser muy útil para la alineación de elementos, uno al lado de otro, o uno debajo de otro. Para que se visualicen los bordes de la tabla bastará nombrar este atributo asignandole un valor, o no. 
Se puede determinar el tamaño de la tabla, bien forzandola a ocupar un cierto porcentaje de la anchura de la ventana del browsero definiendo un tamaño fijo en unidades, mediante los atributos: 
WIDTH: define el ancho de la tabla, bien en % o en unidades. HEIGTH: define el alto de la tabla, bien en % o en unidades.

 Ejemplos:

celda 1 celda 2
celda 3 celda 4
<TABLE> <TR><TD>celda 1</TD><TD>celda 2</TD></TR> <TR><TD>celda 3</TD><TD>celda 4</TD></TR> </TABLE>
celda 1 celda 2 celda 3 celda 4
<TABLE BORDER> <TR><TD>celda 1</TD><TD>celda 2</TD></TR> <TR><TD>celda 3</TD><TD>celda 4</TD></TR> </TABLE>
celda 1 celda 2
celda 3 celda 4
<TABLE BORDER=5 CELLSPACING=6 CELLPADDING=8> <TR><TD>celda 1</TD><TD>celda 2</TD></TR> <TR><TD>celda 3</TD><TD>celda 4</TD></TR> </TABLE>
Definiendo el ancho y alto de la tabla en %
Ancho (WIDTH) 50% Alto (HEIGHT) 30%
<TABLE BORDER WIDTH=50% HEIGHT=30%> <CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION> <TR ALIGN="center"> <TH>Ancho (<I>WIDTH</I>)</TH> <TD>50%</TD> <TR ALIGN="center"> <TH>Alto (<I>HEIGHT</I>)</TH> <TD>30%</TD> </TABLE>
Definiendo el ancho y alto de la tabla en unidades.
Ancho (WIDTH) 300 Alto (HEIGHT) 80

<TABLE BORDER WIDTH=300 HEIGHT=80> <CAPTION>Definiendo el ancho y alto de la tabla en %</CAPTION> <TR ALIGN="center"> <TH>Ancho (<I>WIDTH</I>)</TH> <TD>300</TD> <TR ALIGN="center"> <TH>Alto (<I>HEIGHT</I>)</TH>

<TD>80</TD> </TABLE>  TR La marca <TR> inicia una línea de la tabla que terminará con </TR>. Admite los atributos:
VALIGN: permite una alineación del texto en el sentido vertical de la celda. Admite los valores: TOP, BOTTOM, MIDDLE ALIGN: permite una alineación del texto en el sentido horizontal de la celda. Admite los valores: RIGHT, CENTER, LEFT
Estos atributos se aplican sobre toda la fila, salvo cuando un atributo de <TD> contradice esta alineación. 
 TD La marca <TD> delimita el inicio de una celda. Admite los atributos: 
VALIGN: permite una alineación del texto en el sentido vertical de la celda. Admite los valores: TOP, BOTTOM, MIDDLE ALIGN: permite una alineación del texto en el sentido horizontal de la celda. Admite los valores: RIGHT, CENTER, LEFT COLSPAN: define una celda con una anchura múltiplo de la columna básica. ROWSPAN: define una celda con una anchura múltiplo de la fila básica. NOWRAP: obliga al browsera inscribir todo el texto de la celda en una sola línea.
 
Como vemos por esta imagen, el atributo <TABLE> genera la tabla, mientras que <TD> sirve para definir los campos presentes dentro de esta tabla.
He aquí cómo el diseño puede ser transformado en código y, por tanto, en una tabla propiamente dicha: 

<TABLE BORDER=1 WIDTH=300>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

<TD WIDTH=100>

</TD>

</TABLE>
 
En el siguiente ejemplo, consideraremos que queremos elaborar una tabla de este tipo: