Índice
 
Imagen    
1. El lenguaje HTML.
  1. Presentación
  2. El código HTML de la página mas pequeña.
  3. Dar forma a los textos.
  4. Listas.
  5. Enlaces.
  6. Imágenes.
  7. Tablas.
    1. Algunos ejemplos de tablas
    2. Tablas para maquetar información. Exercicis.


6.1. El código HTML de la página mas pequeña.

La página con el mínimo de etiquetas es la siguiente: 
 
Primera página con un editor de textos. 
<html>
<head>
    <title>Primera página</title>
</head>

<body>

Lugar donde se escribirá el 
contenido de la página, 
visible para el usuario.

</body>
</html>

En el código siguiente vemos las etiquetas siguientes:

Primeras etiquetas del lenguaje HTML
<html> </html> Principio y fin de documento.
<head> </head> Principio y fin de la sección de encabezamientos. Sirve para incluir otras etiquetas con información descriptiva de la página y que no pertenece al contenido de la misma.
<title> </title> Principio y fin del título que aparecerá en la barra de títulos de la ventana donde se ejecuta el navegador. Es muy importante poner ésta etiqueta y su contenido ya que, además de indicar al usuario el nombre de la página, la utilizan los navegadores para título en los menús de preferidos y los programas que indexan datos para buscadores llevan esas palabras a sus índices.
<body> </body> Principio y fin del cuerpo del documento.
 
Propiedades de la etiqueta body:
Propiedad Dato contenido en la propiedad
BACKGROUND URI (Una imagen de fondo) 
BGCOLOR Color (Color de fondo para el documento)
TEXT Color (Color con el que aparece el texto de la página)
LINK Color (Color con el que aparecen los enlaces de texto)
VLINK Color (Color en el que aparecen los enlaces de las páginas ya visitadas desde éste documento)
ALINK Color (Color para los enlaces activados)
ONLOAD Script (Ejecución de una función escrita en un lenguaje de script en el momento de cargar la página.)
ONUNLOAD Script (Ejecución de una función escrita en un lenguaje de script justo antes del momento de descargar la página.)

Ejemplo:

<body bgcolor="#66FFFF" background="baix.gif" text="#006666" link="#FF6666" vlink="#FF6666" alink="#FF6666">

Ejercicios:

  1. Instala el programa 1stPage en tu ordenador. Puedes trabajar también con el Dreamweaver.
  2. En el programa que acabas de instalar crea una página indicando los componentes del grupo y el tema escogido para realizar la web
  3. El título que aparece es el nombre de la página y siempre tiene que hacer referencia al contenido de la página y aparece en la barra del programa navegador. ¿Qué título tiene la página que estás mirando?
  4. Pon un título adecuado a la página.
  5. Prueba a cambiar el color de fondo de la página.
  6. Pon una imagen de fondo de la página.
  7. ¿Cuándo cambias el color de fondo y también pones una imagen de fondo que orden ejecuta el navegador?
Grabad el ejercicio con el nombre ej01_propiedades.html.

6.2 Dar forma a los textos.

Los textos pueden recibir formato por medio de varias etiquetas.

Etiquetas que formatean textos.
<font></font> Etiqueta de principio y fin de tipo de fuente de letra.

Propiedades de la etiqueta font:
Propiedad Dato contenido en la propiedad
SIZE CDATA: Ajuste del tamaño de la letra

Posibles valores:
1, 2, 3, 4, 5, 6 ,7,
+1, +2, +3, +4, +5, +6 ,+7
-1, -2, -3, -4, -5, -6 ,-7
 
COLOR Color: para las letras
FACE CDATA: Lista de nombres de tipos de letra separados por comas

Uso de ésta etiqueta:

<font face="Times New Roman, Times, serif" color="#0000FF" size="3">Texto</font>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>		 Formato de párrafos: Seis etiquetas de encabezamiento del 1 al 6.

Propiedades de las etiquetas <h>:
Propiedad Dato contenido en la propiedad
ALIGN Alineación del párrafo

Posibles valores: left | center | right 
 
Uso de los encabezamientos:

<h2 align="center">Dar forma a los textos.</h2>
<p></p> Formato de párrafos: Cambio de párrafo.
 
Propiedades de las etiquetas <h>:
Propiedad Dato contenido en la propiedad
ALIGN Alineación del párrafo

Posibles valores: left | center | right 
 

<pre></pre> Formato de párrafos: Contiene texto formateado previamente.
 
Propiedades de las etiquetas <pre>:
Propiedad Dato contenido en la propiedad
WIDTH Número: Caracteres de ancho de la linea 
 

 
<br> Salto de línea sin cambio d e párrafo.
<b></b>
<em></em>
<i></i>
<u></u>
<tt></tt>
<strong></strong>
<strike></strike>
<sub></sub>
<sup></sup>		 Negrita, enfatizada, itálica, subrayaba, máquina de escribir, negrita, tachada, subíndice y superíndice. 

Normalmente la enfatizada sale también como itálica.
<blockquote></blockquote> Principio y fin de tabulación horizontal. Hace que el texto aparezca indentado. Se pueden poner mas de uno y obtendremos varios indentados.

Ejercicio: Con el texto del ejercicio de los pingüinos tienes que dar formato a todos los párrafos dentro del editor 1stPage.

  1. Abre con el 1stPage el fichero de texto elspinguins.txt
  2. Crea dos párrafos con encabezados h2 que estén alineados a la izquierda.
  3. Cambia el tipo y el color de letra de los títulos y para ello utiliza las etiquetas anteriores con sus propiedades y también combinaciones entre ellas.
  4. Dadle un formato al texto utilizano las etiquetas para formatear textos (Probadlas todas)


Piensa que puedes combinar negrita e itálica. Entonces una de ésas etiquetas tiene que quedar dentro de la otra como en el ejemplo siguiente:

<b><i> Los que se van no volverán </i></b>

Grabad el ejercicio con el nombre ej02_cabeceras_parrafos.html.

6.3 Listas.

Existen cinco clases distintas de listas que permite el HTML pero la principales son dos, las listas numeradas y las listas sin numerar.

Listas
Etiquetas Propiedades
Listas numeradas

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
Propiedades de <ol>
Propiedad Posibles datos
TYPE 1 | a | A | i | I Tipo de numeración de los items
START Número: por el que comenzará la lista.

 
Listas sin numerar

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
Propiedades de <ul>
Propiedad Posibles datos
TYPE Tipo de punto señalador:
 
  • disc (Un circulo lleno)
  • square (un cuacrado lleno)
  • circle (Un circulo vacio)
Ejercicio:
  1. Busca tres direcciones relacionadas con el HTML que estás estudiando.
  2. Crea una lista numerada con esas direcciones en el 1stPage.
  3. Cambia el tipo de numeración y prueba los diferentes casos.
  4. Convierte esa lista en una lista no numerada y prueba las diferentes opciones de lista que conoces.

Grabad el ejercicio con el nombre ej03_listas.html.

Nota: Realiza el ejercicio que tienes en la página ejer04.html.

6.4 Enlaces.

Los enlaces se realizan todos con la etiqueta <A>

Los enlaces.
Algunos usos de la etiqueta <A></A> Explicación
<A HREF="album.html">Album de fotos.</A> El destino del enlace es la página Album.html que se encuentra en el mismo directorio que ésta página que tiene el enlace.
<A HREF="../images/yo.jpg">Mi fotografía</A>  Carga en el navegador la imagen yo.jpg. El fichero de la imagen está en el mismo ordenador pero en el directorio ../imagenes, relativo al directorio que contiene la página con el enlace.
<A HREF="/sonidos/auldlang.mid" TYPE="audio/midi" TITLE="Archivo de sonido">Canción</A>

Canción

 El navegador intentará cargar un reproductor de sonido y ejecutar el fichero auldlang.mid
<A HREF="mailto:malmarza@lamerce.com" TITLE="Apuntes de HTML">Correo a Miguel Angel</A>

Correo a Miguel Angel

 El navegador presenta un enlace que en el momento de hacer clic llama al programa de correo instalado en el ordenador y ya incluye la dirección electrónica especificada en el enlace.
<A HREF="http://webs.lamerce.com/miguel/" TARGET="_top">Apuntes de programación</A>

Apuntes de programación

 Llamada a una página en otro ordenador, con una dirección absoluta. Se ha hecho uso del atributo TARGET que le indica al navegador en donde tiene que abrir la nueva página (Se utiliza sobre todo con marcos FRAMESET)). Este atributo puede tener los valores siguientes: 
 
  • _blank: Abre una ventana nueva para la página llamada.
  • _self: Abre la página en el mismo marco y ventana.
  • _parent: Abre la página en el marco padre del actual.
  • _top: Abre la página en la misma ventana pero elimina los marcos.
<A href="#destino">Una parte de la página</a> Mueve a una parte de la página en la que se ha puesto el ancla #destino
<A name="destino"></a> El ancla #destino se pone así.
<A href="pag.html#destino">Una parte de la página</a> Llama a la página Pag.html y la presenta por el lugar donde se encuentra el ancla #destino

Ejercicio:

  1. Modifica el ejercicio ej03_listas.html añadiendo los enlaces correspondientes.
  2. Modifica alguno de los enlaces para que se abra en una ventana nueva.
  3. En la página webs.lamerce.com/miguel/ice/lapaginagroga.htm hay un ancla llamada marca. Añade un enlace a los anteriores que llame a esa marca.
Grabad el ejercicio con el nombre ej05_enlaces.html.

6.5 Imagenes.

Se insertan en la página con la etiqueta <IMG>.

Las imagenes. Etiqueta <IMG>
Etiqueta Propiedades

<IMG></IMG>

Propiedad Dato
SRC URI Lugar donde está el fichero de imagen
ALT Texto alternativo
LONGDESC URI enlace a una página descriptiva de la imagen
WIDTH Anchura con el que se renderizará la imagen en pantalla. Cuidado con deformar las imagenes.
HEIGHT Altura con el que se renderizará la imagen en pantalla. Cuidado con deformar las imagenes.
USEMAP URI. Sirve para indicar la localización de un mapa de imágenes.
ISMAP Mapa de imágenes que se ejecuta en el servidor.
ALIGN Alineación de la imagen con el texto:
  • top
  • middle
  • bottom
  • left
  • right
BORDER Ancho del borde.
HSPACE Espacio libre horizontal en pixels alrededor de la imagen.
VSPACE Espacio libre vertical en pixels alrededor de la imagen.

 
Ejercicio
  • Bájate la imagen que que tienes al principio del capítulo.
  • Crea una página con el 1stPage e inserta la imágen que te has guardado. (Menú insert, opción image)
  • ¿Que anchura y altura tiene la imagen?
  • Cambia los valores de ancho y alto y observa el resultado. (Es mejor dejar los datos originales.)
  • Pon el texto alternativo y comprueba como funciona.
  • Un clic sobre la mitad superior de la imagen debe mostrar la página ej02_cabeceras_parrafos.html y sobre la mitad inferior la página ej03_listas.html. Uitlizad la propiedad usemap y consultar la ayuda para la creación del mapa.

Grabad el ejercicio con el nombre ej06_imagenes.html.

Nota: Realiza el ejercicio que tienes en la página ejer07.html

6.6 Tablas.

Una tabla se compone de filas que tienen celdas. Asi la tabla mas sencilla es la siguiente:

Una tabla de dos filas y tres columnas
<table>
   <tr>
      <td>a1</td><td>a2</td><td>a3</td>
   </tr>
   <tr>
      <td>b1</td><td>b2</td><td>b3</td>
   </tr>
</table>
 
a1 a2 a3
b1 b2 b3

Las etiquetas principales para hacer una tabla son las siguientes:

Tablas
Etiqueta Propiedades
<table></table> Esta etiqueta delimita el contenido de la tabla. Todas las propiedades a las que asignemos un valor tendrán efecto sobre toda la tabla. 

Propiedad Dato
WIDTH Ancho que ocupa la tabla. Se puede dar en tanto por ciento o en pixeles. 
  • Si ponemos el valor en % la tabla ocupará el % del tamaño de la ventana del navegador. Es un ancho variable.
  • Si ponemos el número de píxeles estamos haciendo una tabla de tamaño fijo. Si ponemos 750px la tabla ocupará siempre 750px independientemente del tamaño de la ventana del navegador.
BORDER Número de pixels que ocupará el borde de la tabla.
CELLSPACING Espacio en pixels entre las celdas.
CELLPADDING Margen interior de las celdas
ALIGN Alineación de la tabla dentro de la ventana del navegador. [ left | center | right ] 
BGCOLOR Color de fondo de toda la tabla.
BACKGROUND URL: Imagen de fondo para la tabla
VSPACE Espacio vertical entre la tabla y el texto o elementos exteriores.
HSPACE Espacio horizontal entre la tabla y el texto o elementos exteriores
bordercolorlight
bordercolordark
bordercolor		 Colores que afectan al borde de la tabla.
<tr></tr> Esta etiqueta delimita el contenido de una fila.

Las propiedades de esta etiqueta afectan a todas las celdas de una misma fila.

Una propiedad como el color cambiará el color de todos los elementos de la fila. Se verá este color y no el que se halla asignado en la etiqueta <TABLE>

Propiedad Dato
ALIGN Alineación de los datos de todas las celdas. [ left | center | right | justify | char ]
CHAR Caracter que indica los decimales en los números.
CHAROFF Espacio para alinear los decimales.
VALIGN Alineación vertical de los datos de todas las celdas.[ top | middle | bottom | baseline ]
BGCOLOR Color de fondo de todas las celdas de la fila.
BACKGROUND URL: Imagen de fondo para la fila.
bordercolorlight
bordercolordark
bordercolor		 Colores que afectan al borde de la fila.
<td></td> Esta etiqueta delimita el contenido de una celda. Las propiedades asignadas prevalecen sobre las de fila y las de tabla. Es decir que si asignamos un color diferente a una celda y a la tabla la celda aparece en ese color diferente.

Propiedad Dato
ROWSPAN Número de celdas en fila que ocupa.
COLSPAN Número de celdas en columna que ocupa.
ALIGN Alineación horizontal de los datos dentro de la celda. [ left | center | right | justify | char ] (horizontal alignment) 
CHAR Caracter que indica los decimales en los números.
CHAROFF Espacio para alinear los decimales.
VALIGN Alineación vertical de los datos dentro de la celda. [ top | middle | bottom | baseline ]
WIDTH Ancho de la celda. Puede darse en % de la anchura de la tabla o en pixels.
HEIGHT Alto de la celda.
BGCOLOR Color de fondo de la celda.
BACKGROUND URL: Imagen de fondo para la celda.
bordercolorlight
bordercolordark
bordercolor		 Colores que afectan al borde de la celda.
<caption></caption> Esta etiqueta proporciona un título a la tabla.

Propiedad Dato
ALIGN Alineación del título de la tabla. [ left | center | right | top | bottom ]  

6.6.1 Algunos ejemplos de tablas:

  1.  
    2. <TABLE WIDTH="20%" BGCOLOR="#51a2a2" BORDER=3 align="center">
    <CAPTION>Quadrat màgic</CAPTION>
 
    <TR align="center">
        <TD>8</TD><TD>3</TD><TD>4</TD>
    <TR align="center">
       <TD>1</TD><TD>5</TD><TD>9</TD>
   <TR align="center">
       <TD>6</TD><TD>7</TD><TD>2</TD>
</TABLE>
    Quadrat màgic
    8 3 4
    1 5 9
    6 7 2
  2.  
    3. DESPLAZADOS INTERNOS ASISTIDOS POR EL ACNUR 1997(1)
      País Personas
    1 Sierra Leona 1.500.000
    2 Liberia  971.000 
    3  Bosnia-Herzegovina  971.000 
    4  Azerbaiyán  549.000 
    5  Afganistán  310.000 
    6  Georgia  280.000 
    7  Chipre  265.000 
    8  Burundi  216.000 
    9  Sri Lanka  200.000
    10 Federación Rusa (Chechenia)  180.000  
    <TABLE BORDER=3 align="center">
    <CAPTION align="left">DESPLAZADOS INTERNOS ASISTIDOS POR EL ACNUR 1997(1)</CAPTION>
     <!-- Fila 1-->
    <TR>
        <TD align="right"> </TD><TD>País</TD><TD align="left">Personas</TD>
    </TR>
     <!-- Fila 2-->
    <TR>
        <TD align="right">1</TD><TD>Sierra Leona</TD><TD align="right">1.500.000</TD>
    </TR>
     <!-- Fila 3-->
    <TR>
        <TD align="right">2</TD><TD>Liberia</TD><TD align="right">971.000</TD>
    </TR>
     <!-- Fila 4-->
    <TR>
        <TD align="right">3</TD><TD>Bosnia-Herzegovina</TD><TD align="right">971.000</TD>
    </TR>
     <!-- Fila 5-->
    <TR>
        <TD align="right">4</TD><TD>Azerbaiyán</TD><TD align="right">549.000</TD>
    </TR>
     <!-- Fila 6-->
    <TR>
        <TD align="right">5</TD><TD>Afganistán</TD><TD align="right">310.000</TD>
    </TR>
     <!-- Fila 7-->
    <TR>
        <TD align="right">6</TD><TD>Georgia</TD><TD align="right">280.000</TD>
    </TR>
     <!-- Fila 8-->
    <TR>
        <TD align="right">7</TD><TD>Chipre</TD><TD align="right">265.000</TD>
    </TR>
     <!-- Fila 9-->
    <TR>
        <TD align="right">8</TD><TD>Burundi</TD><TD align="right">216.000</TD>
    </TR>
     <!-- Fila 10-->
    <TR>
        <TD align="right">9</TD><TD>Sri Lanka</TD><TD align="right">200.000</TD>
    </TR>
     <!-- Fila 11-->
    <TR>
        <TD align="right">10</TD><TD>Federación Rusa (Chechenia)</TD><TD align="right">180.000</TD>
    </TR>
</TABLE>
  3.  
    4. <table width="200px" border="1">
  <tr> 
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
     
     
       
        
    <table width="200px" border="1">
  <tr bgcolor="#CCCCFF"> 
    <td rowspan="3" width="15%">&nbsp;</td>
    <td width="40%">&nbsp;</td>
    <td width="45%">&nbsp;</td>
  </tr>
  <tr bgcolor="#FFCCCC"> 
    <td width="40%" >&nbsp;</td>
    <td width="45%" >&nbsp;</td>
  </tr>
  <tr> 
    <td width="40%" bgcolor="#33CC66">&nbsp;</td>
    <td width="45%" bgcolor="#FF0000">&nbsp;</td>
  </tr>
</table>
     
         
       
       

 

6.6.2 Tablas para maquetar información. Exercicis.

  1. Escribe en el 1stPage los ejemplos de tablas que hay en los apuntes.

    Grabad el ejercicio con el nombre ej08_tablas.html.



  2. En la imagen tienes una página con un matemático. Debajo tienes una imagen con la tabla que sirve para maquetar la información del matemático.

    Observa que es una tabla que tiene dos filas y dos columnas. La primera fila solo tiene una celda que ocupa dos columnas.

    Crea la tabla para hacer la página del matemático. Los ficheros para hacer esta página los tienes en pitagoras.zip.

    Grabad el ejercicio con el nombre ej09_tablas.html.


  3. En las imagen siguiente ves una página web con información sobre la anaconda. En la otra ves el conjunto de tables que se utilizan para maquetar esa información. 

    Verás que hay una tabla amarilla en el fondo que tiene una fila y tres columnas.

    En la celda central hay otra tabla de color verde que tiene tres filas y una columna

    Dentro de la tercera celda de ésta última tabla tenemos una tercera tabla de una fila y dos columnas. 

    Crea todas esas tablas, cuidando de dar unos anchos fijos a las celdas.

    Puedes crear la misma página con los ficheros que tienes en anaconda.zip.

Grabad el ejercicio con el nombre ej10_tablas.html.