¡Descarga Apuntes sobre HTML Parte1 y más Apuntes en PDF de Informática solo en Docsity!
TAGS
Este es el inicio de una etiqueta. Este es el cierre de una etiqueta.
Todo el documento HTML debe estar entre las etiquetas y :
[Todo el documento]
El documento en sí está dividido en dos zonas principales:
El encabezamiento , comprendido entre las etiquetas y El cuerpo , comprendido entre las etiquetas y
Dentro del encabezamiento hay información que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas y . El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)
Por tanto, la estructura queda de esta manera:
Título de la página
[Aquí van las etiquetas que visualizan la página]
Si queremos separar el texto en distintos párrafos debemos usar la etiqueta
, (que no tiene su correspondiente etiqueta de cierre
)
El texto puede tener unas cabeceras, comprendidas entre las etiquetas y , y , etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
La etiqueta de centrado y (no la soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
: separadores ( horizontal rules). Con ella se obtiene una raya horizontal tan ancha como la pantalla.
FORMATO DE TEXTO
: Separa párrafos sin dejar líneas en blanco.
“ ” : Fuerza a dejar varios blancos entre dos palabras. Si no ponemos esto no hará caso de los blancos que dejemos.
y para poner algo en negrita (bold). y para poner algo en cursiva (italic).
** y ** para subrayar
** y .** El texto que se encuentre entre ella estará preformateado,(tipo Courier). Además se respetarán los espacios en blanco y retornos del carro , tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente).
** y ** conseguimos que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto , sino que únicamente cambia su apariencia.
** y ** se utiliza para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas. Obsérvese los márgenes a ambos lados.
** ** :escribir índices (m^2 : m2) ** ** : subíndices ( vx: vx)
Las listas desordenadas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:
** Una cosa Otra cosa Otra más Etc. **
Toda la lista está dentro de la etiqueta ** y ** , y luego cada cosa va precedida de la etiqueta **** (list item).
Se puede anidar una lista dentro de otra. Por ejemplo:
** Mamíferos Peces
Sardina Bacalao
Aves **
Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa.
** Primera cosa Segunda cosa Tercera cosa Etc. **
El resultado es:
1.Primera cosa 2.Segunda cosa 3.Tercera cosa 4.Etc.
XXX : se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:
YYY
En el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:
Pulsa para ir al final
Y en el final del documento he puesto esta otra etiqueta:
2. Enlaces con otra página nuestra
Lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.
Si queremos enlazar con la página creada en el ejercicio anterior,( mipag2.html). Sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:
Ejemplo
Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca , y completar el enlace con la referencia a esa marca.
Si quiero poner un enlace desde aquí al ejercicio 2, pero a un sitio concreto, donde he puesto la marca .
Entonces la etiqueta tiene que ser:
ejercicio 2
Estoy suponiendo que la página en la que estoy escribiendo esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, p. ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html".
Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior , en la etiqueta tendría que haber puesto "../mipag2.html".
3. Enlaces con una página fuera de nuestro sistema
Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL.
En vez de lo que hemos llamado anteriormente xxx (el destino del enlace), colocamos la URL. Si queremos enlazar con la página de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sería:
Página inicial de Netscape
Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores UNIX sí las distinguen)
4. Enlaces con una dirección de email
Sustituimos xxx (el destino del enlace) por mailto :seguido de la dirección de email. La estructura de la etiqueta es:
Texto del enlace
Un ejemplo:
Comentarios a
Con el comando IMG SRC se indica que se quiere cargar una imagen llamada imagen.gif.
Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT
Con el comando ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra página con un programa navegador en forma de texto sólo.
Las imágenes deben estar guardadas en un formato de fichero especial llamado GIF. Este formato GIF almacena las imágenes con un máximo de 256 colores, en forma comprimida.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede resultar un tiempo excesivo de carga.
la posición del titular con respecto a la imagen se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:
Titular alineado arriba
Titular alineado en medio
Titular alineado abajo
Ñ para la Ñ ü para la ü Ü para la Ü
¿ para ¿ ¡ para ¡
Es muy posible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que les ocurra lo mismo a todos los que accedan a nuestras páginas con otros navegadores distintos.
LOS ESTÁNDARES DEL HTML
Separador horizontal
Separador , con las que se puede modificar su apariencia y posicionamiento:
Ocupa el 75% de su anchura (width) normal.
Tiene una anchura de 300 pixels.
Se puede alinear a la izquierda:
O a la derecha:
Se puede variar su espesor:
También se puede hacer que sea una línea sólida:
Tamaño de las fuentes
Atributo SIZE para cambiar el tamaño de las fuentes:
Texto en tamaño 5
Texto en tamaño 6
Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal (o tamaño base) es el 3. Se puede también cambiar relativamente con respecto a este tamaño normal.
Texto algo menor
Texto algo mayor
Texto aún mayor
Se puede cambiar incluso el tamaño base para toda la página, poniendo al comienzo del documento (a continuación de la etiqueta ) esta etiqueta que cambiaría el tamaño base de 3 a 5:
Tipos de las fuentes
Tipo de fuentes empleada.
Los navegadores utilizan por defecto generalmente Times New Roman, y que el usuario puede cambiar por otro tipo en la configuración de su navegador. Si así lo hace, todas las páginas que cargue tendrán el texto escrito en esa nueva fuente escogida.
Pero al confeccionar una página del Web, su autor puede forzar a que el texto adopte un determinado tipo de fuentes, distinto del que tiene configurado el usuario. Pero, para que esto ocurra, el usuario debe tener instalado en su disco duro ese tipo de fuentes (y además con el mismo nombre). Si no lo tiene instalado, entonces verá el texto con la fuente por defecto de su navegador.
Esto se consigue con el atributo FACE="Nombre de la fuente". Por ejemplo, para forzar a que el texto adopte la fuente Verdana, pondríamos:
Este texto se verá con la fuente Verdana (quien no tenga instalada esta fuente, no notará nada de particular)
Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y así sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. Así, por ejemplo:
Este texto se verá con la fuente Impact, o en su defecto con Arial
FONDOS
Se puede cambiar el fondo de dos maneras distintas:
1.Con un color uniforme 2.Con una imagen
1. Fondos con un color uniforme
Se consigue añadiendo el comando BGCOLOR a la etiqueta :
donde:
XX es un número indicativo de la cantidad de color rojo YY es un número indicativo de la cantidad de color verde ZZ es un número indicativo de la cantidad de color azul
Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos. Estos dígito son:
0 1 2 3 4 5 6 7 8 9 A B C D E F
Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores.
Los colores primarios son:
#FF0000 - Rojo #00FF00 - Verde #0000FF - Azul
Otros colores son:
#FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo
este orden), teniendo cuidado en escoger un color uniforme de fondo parecido al de la imagen.
Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un color de fondo azul claro, (p. ej. #CCFFFF). La etiqueta quedaría así:
Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automática de imágenes, al cargar la página, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen.
ALINEACIÓN Y DIMENSIONADO DE IMÁGENES
Alineación de las imágenes
La alineación de las imágenes fue, en su día, el primer golpe de efecto del programa Navigator de Netscape. Permitió alinear una imagen a la izquierda o a la derecha de la página y hacer que el texto la rodee completamente, consiguiéndose así una apariencia similar a la de una revista. La imagen "doom.gif", alineada a la derecha, se ha obtenido con la etiqueta:
y la imagen de abajo, "doom2.gif", alineada a la izquierda, se ha obtenido con la etiqueta:
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta
:
Busca el primer margen libre (clear) a la izquierda.
Busca el primer margen libre a la derecha.
Busca el primer margen libre a ambos lados.
Un ejemplo para aclarar esto:
Este texto esta a un lado de la imagen.
Este tambien esta a un lado de la imagen, en la linea siguiente.
Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda.
Dimensionando la imagen
Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen, quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las imágenes.
Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la pantalla.
Para evitar este inconveniente existen unas extensiones de la etiqueta de la imagen que sirven para indicar al navegador cuáles son
sus dimensiones en pixels. (Este dato lo habremos obtenido previamente de algún programa gráfico).
En este caso, el navegador actúa de una forma más favorable, ya que entonces, como conoce las dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las imágenes.
Estos comandos son WIDTH (ancho) y HEIGHT (alto).
Por ejemplo, para la imagen isla.gif situada más arriba:
Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.
Se pueden también, si se quiere, dimensionar las imágenes con unos valores distintos a los que realmente tienen, variando el tamaño, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la página un thumbnail (reproducción en pequeño de una imagen), que hace de enlace a la imagen en su verdadero tamaño. De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar.
He aquí un ejemplo de thumbnail:
La imagen, "nytimes.gif", tiene realmente unas dimensiones de 575x300 pixels (datos obtenidos de un programa gráfico). Para dimensionar el thumbnail a 150x75 (guardando unas proporciones parecidas al original, de 2:1), lo conseguimos con:
Para hacer que esta imagen reducida sea el enlace con la imagen en su tamaño original, lo conseguimos con:
También se puede conseguir esto de otra manera, más correcta aunque más laboriosa. Es la de reducir en un programa gráfico esta imagen a 150x75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande. Es más correcta esta otra solución porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, incluso tampoco algunas de las versiones más antiguas de Netscape.
FORMATO DE LAS IMÁGENES
Tamaño de las imágenes
Cuando vamos navegando por las páginas del Web parece a veces que todo se detiene completamente. Esto es algo que por desgracia ocurre muy a menudo. Pueden ser muchas las causas: conexiones de la red defectuosas, servidores lentos, etc. Son cosas que en general no nos queda más remedio que soportar.
Pero hay una causa particularmente irritante, y es que hayamos ido a parar a una página que padece del Síndrome de la Imagen Gigantesca, que es la mala costumbre de poner en la página imágenes enormes, lo que se traduce en ficheros de imagen a cargar con un tamaño excesivo.
Hay unas cuantas maneras de minimizar el tamaño de los ficheros de imagen:
2.En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:
[etiquetas de las distintas celdas de la primera fila]
[etiquetas de las distintas celdas de la segunda fila]
3.En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son y , que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
fila1-celda1 fila1-celda2 fila1-celda3
fila2-celda1 fila2-celda2 fila2-celda3
Filas con desigual número de celdas
En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si ese número es distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas.
Probar por ejemplo eliminar la tercera celda de la segunda fila, es decir borrar,fila2-celda3.
Titular de la tabla
Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál es su contenido. Se consigue con la etiqueta y .
Ejemplo añadir la siguiente línea:
Ejemplo de filas desiguales .
Variando el espesor de los bordes
El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:
Ejemplo poner:
Celdas de cabecera
Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.
Esto se consigue con la etiqueta y (en vez de la normal y )
Vamos a añadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existían:
Columna 1 Columna 2 Columna 3
Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes., encabezando las columnas o las filas.
Contenido de las celdas
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.
Ejemplo con una imagen:
Ejemplo con un enlace:
Página principal
Página principal
Posicionamiento del contenido dentro de la celda
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:
Al centro A la derecha Cabecera a la izquierda (Recuérdese que por defecto están centradas)
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atributos:
Arriba Abajo
