ESTRUCTURA BÁSICA DE HTML
<html>
<head>
<title>MI PAGUINA WEB</title>
</head>
<body>
</body>
</html>
*Vamos a analizar más detenidamente las distintas secciones que componen la página
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
*En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
*La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y</title>).
El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE>
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo
http://platea.pntic.mec.es/~abercian/guiahtml/estructura.htm
| Fondos de página |
Como hemos visto hasta ahora, el navegador dibuja la página con un triste fondo gris. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo.
 |
| Para ver el resultado en la pagina copiamos el siguiente código:<html> <head> <TITLE>Fondos</TITLE> </head> <body background="fondo.gif"> <center> <font face="arial" size="+2">Fondos</font> <hr width=200> </center> <P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> http://www.redaragon.com/informatica/htmlb/cap4.asp |
IMAGENES
Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "obras.gif", que vamos a usar en los siguientes ejemplos
El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , que produce en pantalla:
Este tag admite muchos parámetros útiles:
- width, height: con estos parámetros le decimos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de que lleguen los gráficos(que suelen venir después del texto).
En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla: - También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones de la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla: - border: Este parámetro hace que aparezca un borde rodeando la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en pantalla: - alt: Con este parámetro podemos incluir un texto para los navegadores que no soportan los gráficos.
- Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2>, produce en pantalla:
- Para leer el texto podemos poner el ratón sobre el gráfico durante un segundo.
- align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle.
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla: - hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos lados).
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: - Sobre imágenes se puede decir mucho más, pero sólo vamos a añadir algunos comentarios:
- Una página web en su totalidad(texto y gráficos) no debería sumar más de 80 Kb(1 minuto de carga aprox. para un modem de 14400 bps).
- Un diseñador de páginas web necesitará un programa de retoque fotográfico, como Paint Shop Pro
- Las imágenes pueden servir como enlaces, p.ej el código <a href="obras.htm"><IMG SRC="obras.gif"></a> produce en pantalla:
- Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de color azul rodeándola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo.
http://www.redaragon.com/informatica/htmlb/cap7.asp
TAREA
La etiqueta <table>
encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del
inglés "table row") definen cada fila de la tabla y encierran todas
las columnas. Por último, la etiqueta <td> (del inglés "table data
cell") define cada una de las columnas de las filas, aunque realmente HTML
no define columnas sino celdas de datos.
Al definir una tabla, se
debe pensar en primer lugar en las filas que la forman y a continuación en las
columnas. El motivo es que HTML procesa primero las filas y por eso las
etiquetas <tr> aparecen antes que las etiquetas <td>.
HTML procesa primero las
filas y por eso las etiquetas <tr> aparecen antes que las etiquetas
<td>.
Al definir una tabla, se
debe pensar en primer lugar en las filas que la forman y a continuación en las
columnas. El motivo es que HTML procesa primero las filas y por eso las
etiquetas <tr> aparecen antes que las etiquetas <td>.
HTML procesa primero las
filas y por eso las etiquetas <tr> aparecen antes que las etiquetas
<td>.
De todos los atributos
disponibles para las celdas, los más utilizados son rowspan y colspan, que se
emplean para construir tablas complejas como las que se ven más adelante. Entre
los demás atributos, sólo se utiliza de forma habitual el atributo scope, sobre
todo con las celdas de cabecera que se ven a continuación.
Normalmente, algunas de las
celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o
de la columna. En este caso, HTML define la etiqueta <th> (del inglés
"table header cell") para indicar que una celda es cabecera de otras
celdas.
No hay comentarios.:
Publicar un comentario