En la confección de esta web, se trata de conseguir como objetivos principales:
- Que las páginas se cargen de forma rápida y efectiva.
- Que al imprimir una página en A4, se vea exactamente igual que en el monitor.
Apartados
Preliminares
Las primeras líneas de la página han de ser:
<!DOCTYPE HTML><html lang="es"><head><meta charset="UTF-8">
<title>Rectivía (Astorga-León).</title>
DOCTYPE HTML es una declaración que indica el tipo de documento. Es un elemento heredado del HTML, notablemente simplificada en HTML5.
El atributo lang especifica el idioma del contenido del elemento.
El juego de caracteres (charset), o codificación, depende del sistema operativo que se esté usando para crear el archivo HTML. Mientras que unos sistemas como Linux o Mac usan por defecto un juego de caracteres llamado UTF-8, en Windows se usa de manera predeterminada otro juego de caracteres llamado ISO-8859-1. En HTML5 el juego de caracteres a usar es siempre UTF-8. Por lo que tendremos que tener especial atención si somos usuarios de Windows, para asegurarnos que usamos la codificación correcta.
A continuación incluímos otras líneas meta, y los enlaces a los archivos de javascript y hojas de estilo:
<meta name="description" content="barrio rectivia astorga TITULO">
<meta name="keywords" content="barrio rectivia astorga TITULO">
TITULO será sustituido por el título de la página, es decir, por el texto que interesa para los buscadores.
<script src="prec.js"></script>
<link rel="stylesheet" type="text/css" href="prec.css">
<style> Definiciones de estilo, si necesarias </style>
Finalizamos la primera parte de la estructura del documento HTML, e iniciamos la segunda parte con la etiqueta BODY, e inmediatamente creamos un bloque de información que contendrá toda la página y que dejamos identificada.
</head><body><div id="global">
En el archivo prec.css que anteriormente hemos vinculado como contenedor CSS, en sus dos primeras líneas tendremos
#global {width:800px; margin:4px auto;}
body {text-align:center;}
que especifican que la página tendrá una anchura de 800 pixels, y se situará en el centro de la pantalla del monitor.
En el cuerpo de una página, lo primero es suministrar los valores de las variables tema, titulo y siguiente, y llamar a la función cabecera() que abre un bloque global para toda la página.
<script> tema=T; titulo="TITULO"; siguiente="ARCHIVO"; cabecera();</script>
T, será 0, 1, 2, 3, 4 ó 5 dependiendo de la pertenencia de la página a Actualidad, Barrio, Historia, Parroquia, Cofradía, o Indice respectivamente. El valor de 9 se reserva para las páginas de Formación Informática
TITULO, es el título de la página en cuestión, ya comentado anteriormente, y
ARCHIVO, es el nombre de la página que le sigue sin la extensión (.html) que es la extensión común, que se supone, a todas las páginas de este sitio web.
Para finalizar una página hay que realizar una llamada a la función pie(), y a continuación cerrar el bloque global, la estructura de la segunda parte, y la página.
<script"> pie();</script></div></body></html>
cabecera(), utiliza las dos primeras variables para realizar las pestañas de los temas, y poner en primer plano el que corresponda con sus correspondientes apartados, y el título.
pie(), se encarga del botón siguiente, caso de tener valor siguiente (la tercera variable), y el de comentar.
Una nueva página origina cambios en la Página anterior, y hay que incluirla en el Mapa web, e Índice cronológico.
Además de las funciones cabecer() y pie() se usan otras funciones:
La función enConstruccion(), escribe mensaje de página en construcción.
La función barra();, crea una línea de separación que utiliza los colores del tema. Admite opcionalmente como parámetro el ancho de la misma, con los mismos valores de width de la etiqueta HR de HTML.
Los colores de los temas quedan fijados en el archivo JavaScript
TemaNombre temaColorValor HEXNombre0Inicio#FFFFE0LightYellow1Barrio#E0FFFFLightCyan2Historia#F5F5DCBeig3Parroquia#F5DEB3Wheat4Cofradía#DDFFDD5Índice#FFDFFF6#ffffceMarfil7#edbb998#f5f5f5WhiteSmoke9Informática#7FFFD4Aquamarine
Títulos y cabeceras
class=h1-tT, puede utilizarse con el elemento h1 para títulos auxiliares o complementarios, siendo T el número del Tema ya mencionado anteriormente.
<h1 class=h1-t5>Título o subtítulo de bloque.</h1>
Título o subtítulo de bloque.
También puede ser utilizada como clase de un párrafo, donde además de h1-tT disponemos otras tres clases: hcab, resaltado y resaltadoplus.
Título complementario
Cabecera apartado de historia, noticia, etc.
Título de párrafo.
Título de párrafo con énfasis mayor.
Admiten además otros parámetros y propiedades de los párrafos, para un uso esporádico.
<p class=resaltado style="text-align:right">
Este ejemplo alinea a la derecha con el parámetro style y la propiedad text-align:
Nombre del autor
La función historial(), construye la cabecera de "Historial y noticias", después de una barra de separación, y con un enlace de las abreviaturas de las fuentes consultadas.
Estilo párrafos
Hay dos estilos de párrafos diferentes: párrafo estándar y párrafo cita para transcripciones textuales. Además ambos pueden estar disminuidos, es decir, visualizados con un tipo de letra más pequeña.
Párrafo estándar
<p>, es la etiqueta del párrafo estándar a la que se pueden aplicar múltiples clases para una mejor distribución de los textos. Así:
<p class=ps> o <p class=ps1>, párrafo sangrado.
<p class=ps2>, párrafo sangrado 2 veces.
<p class=pspl>, párrafo sangrado primera línea es la alternativa elegante al párrafo estándar justificado por ambos lados.
<p class=psf>, párrafo sangría francesa. Se aplica preferentemente para índices o contenidos laterales que generalmente suelen ser enlaces dentro de la página o a otras páginas, y como alternativa a listas y tablas.
<p class=pp>, párrafo pegado. Un primer párrafo pegado no queda pegado al párrafo anterior por el espacio del margen inferior.
Tiene que haber varios párrafos pegados seguidos para que se note el efecto "pegado".
<p class=psp> o <p class=ps1p>, párrafo sangrado pegado.
Naturalmente el siguiente párrafo pegado puede estar sangrado.
<p class=ps2p>, párrafo sangrado 2 veces pegado.
Y también puede ser con doble sangrado.
Párrafo cita
<p class=pcita> o <p class=cita>, párrafo cita. Este tipo de párrafo lleva sangrado en primera línea, para hacer más notoria la literalidad de la copia del documento. Además, como puede notarse, lleva un primer sangrado puesto que siempre o casi siempre es ampliación de información del párrafo anterior.
<p class=pscita>, párrafo sangrado cita. También este tipo de párrafo lleva sangrado en primera línea, para hacer más notoria la literalidad de la copia del documento. También, como puede notarse, lleva un primer sangrado puesto que siempre o casi siempre es la ampliación, valga la redundancia, de la ampliación de información.
<p class=ppcita>, párrafo pegado cita. Es el equivalente al párrafo pegado estándar pero con las características del párrafo cita.
Al igual que con los párrafos pegados estándar, tiene que haber varios párrafos pegados seguidos para que se note el efecto "pegado".
<p class=pspcita>, párrafo sangrado pegado cita. También tiene su equivalencia con el párrafo estándar, pero también con las características del párrafo cita.
Se ha de tener en cuenta que el efecto "pegado" se produce con varios párrafos pegados seguidos, independientemente de que sean estándar o de cita.
<p class=pcitass>, párrafo cita sin sangrado (primera línea). Para citas aún se ofrecen dos variantes más de párrafos que contribuyen a la claridad de la exposición. Una sin sangría en la primera línea y con párrafo pegado.
<p class=pcitasf> o <p class=psfcita>, párrafo cita sangría francesa. Es la otra opción, y quizás más interesante que la anterior; esta opción también es pegada.
Párrafos disminuidos
Estos estilos se utilizan preferentemente en las páginas de noticias del siglo XIX, XX y XXI, a fin de reducir el número de páginas que ocupan, sobre todo en el caso de que se desee su impresión total o parcial.
<p class=hcabdis>, cabecera disminuida historia o noticia.
<p class=pdis>, párrafo disminuido. Todas las clases de los párrafos disminuidos se definen con los párrafos pegados, excepto el margen superior de hcabdis.
<p class=psdis>, párrafo sangrado disminuido.
<p class=pcitadis>, párrafo cita disminuido.
<p class=pscitadis>, párrafo sangrado cita disminuido.
<p class=pdisnp>, párrafo disminuido no pegado.
<p class=pcitadisnp>, párrafo cita disminuido no pegado.
Estilos texto
Estas clases son empleadas para las columnas de las tablas, listas, etc., y, naturalmente, también pueden ser aplicadas a todo un párrafo completo. Tendremos que recurrir a la etiqueta <span> para cambiar de estilo de texto dentro de un mismo párrafo.
En un párrafo estándar, <span class=tcita> cambia al texto de cita, </span> lo recupera.
En un párrafo cita, <span class=tl> cambia a texto estándar, </span> recupera cita.
Otras posibilidades nos ofrecen las clases: dis, para texto disminuido; manus, para texto manuscrito, y las ya conocidas resaltado, para texto resaltado; resaltadoplus, para texto más resaltado; y hcab para otra forma de énfasis, que también se pueden intercalar en los textos.
Los formatos en negrita y cursiva (italic) se emplean las etiquetas HTML <b> e <i> respectivamente, y para los textos de manuscritos cuya lectura no está clara se recurre a las etiquetas css <span style='color:red'> para el rojo, y a <span style='color:green'> para el verde. Para insertar en un párrafo disminuido, texto cita disminuido emplear <span style='color:blue'>.
Notas al pie
Aún tenemos dos clases más para notas a pie de página que pueden hacerse desde un párrafo estandar1 o desde el párrafo de una cita2 cuanto la nota al pie es de la cita misma.
Una nota al pie se consigue con
<a id="vuelta1" class=supcita href="#nota1">1</a>
Siendo nota1 la identificación de la nota al pie a la que se accede al hacer clic en el superíndice, y vuelta1 la identificación de esta posición, a la que se vuelve al hacer clic en el superíndice de la nota al pie.
La nota al pie queda de forma
<p class=notapie><a id="nota1" class=supcita href="#vuelta1">1</a>, texto explicativo.
Al hacer clic en el superíndice se regresa al sitio del texto principal donde está la indicación de la nota al pie.
Cuando la nota es de una cita class=notapie, se sustituye por class=notapiecita. En el ejemplo pueden apreciarse ambas circunstancias.
Al final de la página para una mayor claridad se separan las notas al pie con un pequeña línea realizada con el guión bajo.
Imágenes
Una imagen se muestra generalmente con un texto adjunto. En este caso la imagen queda a la izquierda con una pequeña separación del texto.
<img class=medios-izq src="images/Jrfr.jpg" alt="Texto alternativo">
Para colocarla a la derecha, tendremos que cambiar la abreviatura de la posición en referencia al texto adjunto que acompaña a la imagen.
<img class=medios-dcha src="images/Jrfcuarto.jpg" alt="Texto alternativo">
Si fuese necesario, recuperaríamos la alineación horizontal con:
<br style="clear: both">
La colocación en el centro queda reservada para imágenes más grandes, sin texto por los laterales, y sujeta a las instrucciones de un bloque div, por ejemplo.
<div><img class=centrado src="images/Jrfmedio.jpg" alt="Texto alternativo"></div>
Recordar que <img> en HTML5 no requiere etiqueta de cierre.
Imágenes medios.
En ocasiones en un lateral o en ambos laterales de una noticia interesa insertar la foto o fotos que publica el medio de información, para ello:
Con Paint
- Copiada imagen del medio pegar imagen en Paint.
- Cambiar tamaño. Pixel. Horizontal: 150 (se reduce Vertical)
- Seleccionar Color adecuado para Insertar Texto en la posición inferior
- Seleccionar Arial 8, escribir nombre del medio
- Guardar como archivo jpg, con el nombre “imAMaaaammdd”, sustituyendo AM por la abreviatura del medio: AR Astorga Redacción, EF El Faro, etc
En la página Html insertar, tal y como se ha explicado anteriormente, al principio del párrafo de la noticia.
<img class=medios-dcha src="images/imAMaaaammdd.jpg" alt="Foto medio citado">
Y si corresponde cambiar dcha por izq, y la parte del nombre del archivo (imAMaaaammdd).
Ampliación de imágenes.
Existe la posibilidad de emplear funciones JavaScript para visualizar imágenes reducidas que al hacer clic sobre las mismas, se visualizan ampliadas en ventanas independientes.
- Las imágenes reducidas han de tener un ancho de 290px, 230px o 150px según se deseen visualizar 1 y 2, 3 o 4 imágenes en el ancho de la página.
- El nombre de las imágenes es el mismo, salvo una "r" final en la reducida. (Para una imagen de nombre id-imagen, el nombre de su imagen reducida sería id-imagenr.)
- Tanto la imagen grande como la reducida han de estar en la subcarpeta images, y ambos con la extensión .jpg.
vfoto("id-imagen","texto"), forma básica para una imagen de 290px de ancho.
tv2fotos("id-imagen1","texto1","id-imagen2","texto2"), visualiza dos imágenes.
tv3fotos("id-imagen1","texto1","id-imagen2","texto2","id-imagen3","texto3"), visualiza tres imágenes.
listafotost4c("prefijo", "ultima", "texto"), lista correlativa de imágenes (de 01 a 99) de 150px de ancho (por, preferiblemente, 120px de alto) en una rejilla de 4 columnas.
Para una lista de imágenes de nombre jrf01.jpg, jrf02.jpg, etc, y por consiguiente las reducidas de nombre jrf01r.jpg, jrf02r.jpg, etc., el prefijo para llamar a la función sería entonces jrf; los dos dígitos marcan el orden de visualización y la cifra más alta sería ultima; texto es opcional.
Ventanas secundarias
Mediante el evento onClick podemos visualizar la página de un enlace en una nueva ventana con unos tamaños determinados. Las funciones disponibles son:
waux(), ventana emergente auxiliar limitada al ancho de esta web.
<a href="npDPatri.html" onClick="waux(this.href);return false">D_Patricio</a>
Para enlazar a páginas externas, utilizar el atributo target="_blank".
Las páginas de enlace a rectivia.org se visualizan sin generar nueva ventana, a excepción de las biografías tal y como queda dicho.
wfoto(), ventana emergente fotografía o imagen, con ocupación de toda la pantalla y posibilidad de zoom de ampliación.
<a href="images/Jrf.jpg" onClick="wfoto(this.href);return false"><img class=medios-dcha src="images/Jrfr.jpg" alt="fuenteImg"></a>
wnota(), pequeña ventana emergente para vocabulario, abreviaturas,etc.
<a class=ind href="deportes.html" onClick="wnota(this.href);return false">Deportes</a>
Otros estilos
class=dp, doble pegado. Se aplica a bloques y listas que no se desea tengan márgen superior e inferior.
class=tgral, tabla general. Abre una tabla con ocupación del 100% del ancho de la página que sirve como contenedor invisible al no tener ni borde ni margen alguno.
class=cablis, cabecera lista. Se utiliza para resaltar cabeceras y pies de listas, tablas, etc.
________________________
1notapie, párrafo nota a pie de página generada por rectivia.org. Siguiendo la nomenclatura de los párrafos, esto sería un párrafo disminuido pegado con sangría francesa.
2notapiecita, párrafo nota a pie de página llamada desde el mismo párrafo cita, es decir generado por el autor de la cita.