arquer.netarquer en la red
arquer.netEn nuestra página de prácticas de la lección anterior faltaban los acentos. Esto no ha sido un error sino que se hizo apropósito.
Es una cuestión de juegos de caracteres, idiomas y esas cosas que he querido dejar para esta segunda parte.
Así que empezaremos a profundizar en la teconología.
En la primera línea del documento HTML se debe declarar el tipo de documento y el estándar al que se adhiere. Por ejemplo, esta es la primera línea de este documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Se informa al navegador de que se le envía un documento 'HTML versión 4.0 transicional' (hay tres variantes de HTML 4.0, con marcos, transicional y estricta). Y se le dice donde esta el DTD, documento de definición de términos (los archivos DTD son documentos que explican el formato a los humanos pero tambien a las máquinas) por si lo necesita para algo.
Otra cosilla de nada es la que se refiere a la codificación, al idioma y al juego de caracteres que utilizamos al crear el documento; para evitar que las letras específicas del idioma (pongamos la n con tilde conocida como EÑE en español) aparezcan sustituidas de forma "creativa".
Esta información se pasa dentro de la sección de cabecera en una etiqueta META. Las etiquetas META se diferencian de las que vimos hasta ahora en que no se cierran; normalmente tienen dos parámetros, el equivalente http (http-equiv) y el contenido; a continunación vemos la declaración del juego de caracteres de este documento:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Esta declaración META dice que el tipo de contenido del archivo es texto, que con el texto escribimos un documento html y que el juego de caracteres es el iso.8859-1 (el que utilizo en mi bloc de notas).
Como que es el mismo que utilizo en mi sistema, cuando escribo una letra con acento sé que saldrá con acento en cualquier navegador que soporte este juego de caracteres.
Ahora puedo hacer la corrección ortográfica de la página de prácticas sin miedo a que las letras acentuadas se conviertan en extraños glifos incomprensibles.
Las declaraciones META que hemos visto no se cierran con una </meta>, pues bien, hay otras que se pueden escribir en el cuerpo del documento que tampoco se cierran.
Veremos solo unas pocas; un par de ellas son muy sositas, el salto de línea simple, que se escribe como <br>, y la línea horizontal que se escribe <hr>, ambas se pueden modificar ligeramente, sobre todo la línea horizontal que puede cambiar de grosor, relleno, color, etc. pero esto lo dejaremos para mejor ocasión, sólo un ejemplo:
Otra etiqueta sin cierre, la que utilizamos para insertar una imagen es mucho más entretenida y le vamos a dedicar un apartado completo.
Por lo general el resto de las etiquetas sirven para delimitar partes del documento y se deben abrir y cerrar.
Como que he dedicado una página completa al asunto de insertar imágenes en las páginas web basta con resumir aquí algunas cosas.
Prepararemos la imagen para que su tamaño en disco (su 'peso') sea lo más ajustado posible.
Adaptaremos el tamaño para que quepa dentro de una pantalla 'al uso', si publicamos con intenciones de llegar a todos los usuarios no deberíamos pasar de 570 puntos de ancho por unos 400 de alto; de ahí para arriba vamos perdiendo audiencia. Está claro que si escribimos páginas para usuarios con gigantescos terminales gráficos el tamaño podemos considerarlo secundario.
En la etiqueta <IMG ... incluiremos siempre una descripción con la etiqueta ALT="descripcion" y el tamaño de la imagen en sus lugares correspondientes anchura y altura: with=... height=... . Esto hace que el navegador tenga menos dificultades para reparti5r el espacio y mejora la velocidad de navegación.
La descripción de la imagen que ponemos en la etiqueta ALT se muestra en el caso de que falle la descarga de la imagen por alguna razón, por ejemplo cuando el usuario utiliza un navegador de sólo texto (personas que no pueden ver) o cuando pasamos el ratón por encima de la imagen (en algunos navegadores). Además es una exigencia de accesibilidad.
En el caso de que la imagen sea únicamente un adorno pondremos también la equiqueta pero sin contenido ALT="".
Las listas se incluyen en casi cualquier página web, tarde o temprano pondremos una lista.
De las primeras versiones de HTML se han heredado varios tipos de listas, ordenadas o desordenadas, numeradas o no, de definiciones...
Lo cierto es que el navegador ni ordena la lista ni la desordena, y que el tipo de numeración o los adornos con que se inician las líneas o la forma que adopta la lista son cuestiones visuales que se tratan con la hoja de estilo, no con el HTML.
En este momento las listas 'normales' son listas desordenadas (Unsorted_List = UL) y se preparan con una estructura como esta:
<ul> <li>primer elemento de la lista</li> <li>segundo elemento de la lista</li> <li>tercer elemento de la lista</li> <li>cuarto elemento de la lista</li> </ul>
Que se ven como esto:
Como lo prometido es deuda, vamos a modificar la lista con un poco de estilo; esta vez 'estilo en línea', dentro de las etiquetas de la lista:
La representación habitual de una lista es con sus elementos uno sobre otro; podemos hacer que la lista se quede dentro de la línea si se lo pedimos educadamente: style="display:inline" impediremos el salto de línea al final de cada elemento de la lista.
O podemos controlar el tipo de adorno que ponemos a la izquierda.
<STYLE>
UL { list-style-type:disc }
</STYLE>
Podemos utilizar: disc, circle, square o none como posibles tipos.
Pero lo más bonito es utilizar nuestras propias imágenes:
<STYLE>
UL { list-style-image:url(imgs/bullet.png) }
</STYLE>
Que nos deja la lista así
Hasta el momento es cuestión de gustos, sin embargo en futuras versiones las etiquetas tienden a estar escritas en minúsculas.
Muchas veces las páginas que escribimos se revisan más de una vez, en estos casos puede ser interesante dejar algunos comentarios como referencia futura que el navegador no debe mostrar; para esto se utiliza esta forma de marcarlos:
<!-- Esto es un comentario que ocupa una linea -->
<!--
Este otro comentario
se extiende generosamente
por más de una línea
-->
Las marcas de comentario son también útiles para encerrar estilos y código javascript, si el navegador lo entiende lo utilizará correctamente y si no lo entiende lo dejará oculto.
En esta seguna etapa hemos aprendido que el documento puede avisar sobre la versión de HTML que utilizamos, y que es buena cosa que también informe sobre el juego de caracteres con el que se ha escrito.
Hicimos una alusuión a algunas etiquetas que no se tienen que cerrar y aprendimos a mostrar listas y a modificarlas con hojas de estilo.
Por último aprendimos a insertar comentarios en el documento para nuestra propia referencia o para ocultar elementos a navegadores antigüos.
Busca en Google evitando contenidos inadecuados desde esta página
La búsqueda segura en Google te ayuda a encontrar paginas con contenidos adecuados para toda la familia