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
