Composición de una página web en código html

Jueves, 18 de Septiembre de 2025

Introducción

Composición de un texto

    Características del texto
    Tipo de letra
    Tamaño
    Color
    Estilo
    Diacríticos
    Indices y subíndices
    Otros signos usuales
    Letras del alfabeto griego
    Maquetado de textos
    Espacio en blanco adicional, final de línea, párrafo, texto sangrado, justifición a la derecha, justificación en ambos márgenes, texto centrado
    Jerarquización de textos
    Encabezamiento, apartados y subapartados
    Listas
    Glosarios
    Barras de separación

Enlaces, imágenes, tablas y otros recursos

Introducción

Los documentos en código html (HiperText Markup Languaje) son interpretables por los navegadores de la red. Es un lenguaje de programación sencillo que utiliza un sistema de etiquetas indicativas de las correspondientes funciones a realizar por el navegador.
Gran parte de las etiquetas tienen una parte de inicio y otra de fin, entre las cuales se dispone el texto, figura, etc. que quede afectado por la función correspondiente.
Todas las etiquetas están delimitadas por los signos < >
que indican al navegador que se trata de una etiqueta, o sea una orden de ejecución y su contenido no aparece en la pantalla.

A continuación se mencionan las etiquetas imprescindibles y las más usuales.

<html>

 Todo texto en dicho código ha de comenzar con la etiqueta de inicio <html>
y finalizar con la etiqueta de cierre </html>, de esa forma el navegador interpreta cual es el contenido del documento.

<head></head>

dentro de la etiqueta <head> se disponen indicaciones sobre propiedades y contenidos del documento, mediante metaetiquetas, y en especial su título.
Las páginas con esas especificaciones son registradas por los rastreadores de la red.

la etiqueta <title></title>

contiene el nombre que le damos al documento, que aparecerá en la cabecera del navegador, para esta página se dispuso
<title>Gu&iacute;a para la redacci&oacute;n de p&aacute;ginas web</title>

la etiqueta <body></body>

delimita el contenido del documento

Esos son los tres campos principales de todo documento
en código html vendrían indicados, incluida la etiqueta del título, por

<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>

Composición de un texto

El texto que se incluya dentro de la etiqueta

<body>
</body>

aparece en la ventana del navegador en negro, en el tipo de letra seleccionado en las preferencias del navegador, con este tamaño, estilo redonda y sobre un fondo gris o blanco, que depende de los navegadores.

No se pueden escribir directamente diacríticos: acentos o letras como la ñ, ç, etc.,  y letras de otros alfabetos que no sean el latino, ya que no son legibles para el navegador (en pantalla aparecerían otros caracteres)

Características del texto

Si se desea que el texto o una parte esté en color, tamaño, tipo y estilo diferentes de los mostrados por defecto en el navegador, hay que indicarlo mediante etiquetas.
 
  • Tipo de letra (preferente sobre el que el navegador pone por defecto)
    • se indica mediante la etiqueta <font face="new york">New York</font>
    New York (aparece escrita con ese tipo de letra)
  • Tamaño (diferente del normal por defecto)
    • se utiliza la etiqueta <font size="+1"></font>, el valor "+1" nos da un tamaño algo mayor, si damos el valor "-1" el tamaño en pantalla será algo menor.
    Tamaño grande (con valor "+1") y Tamaño pequeño (con valor "-1")
  • Color
    • se utiliza la etiqueta <font color="red">rojo</font>
    el texto que se disponga dentro aparecerá en rojo, en el ejemplo: rojo
    usualmente el navegador entiende los nombres en inglés de los siete colores y otros colores comunes, de forma que si en lugar de "red" se escribe "green", el texto aparecerá en verde: rojo

    Hay que disponer entre comillas (" ") la indicación correspondiente para una lectura correcta

    Cuando haya varias indicaciones a hacer se disponen una a continuación de otra como etiqueta única compuesta,
    p. ej.: en color azul, tamaño grande y tipo palatino
    la indicación sería <font color="blue" size="+1" face="palatino">Palatino</font>
    en el ejemplo: Palatino

    El cierre afecta a todas las indicaciones, de forma que si se quiere cambiar alguna de las características, hay que cerrar y volver a abrir (otra etiqueta) con las nuevas características.

  • Estilo 
    • Se utilizan las etiquetas
    • <i></i> para cursiva
    • <b></b> para negrita
    • <u></u> para subrayado
Recomendación: si tras unos caracteres en cursiva va una coma, punto, etc., conviene incluirlo dentro de la etiqueta para que no aparezca un espacio entre el final de la palabra y el signo de puntuación:
cursiva, (la coma está fuera de la etiqueta)
cursiva, (la coma está con el texto afectado por la etiqueta)
  • Diacríticos (acentos y letra ñ)
    • las palabras con signos diacríticos tienen una escritura propia en código html, que afecta a la vocal o caracter concreto, los más usuales en español son:
    • con acento ortográfico, como geología
      en código html se escribiría: geolog&iacute;a
      en la palabra cámara, habría que escribir: c&aacute;mara
    • u con diéresis: ü
      en código html se escribe: &uuml;
      por ejemplo, agüero, en código html se escribe: ag&uuml;ero
    • Letra ñ
      en código html se escribe: &ntilde;
      p. ej., tamaño, se escribe: tama&ntilde;o
  • Indices (12C) y subíndices (CO2)
    • se indican mediante las etiquetas
    • <sup></sup> para los índices, en el ejemplo: <sup>12</sup>C
    • <sub></sub> para los subíndices, en el ejemplo: CO<sub>2</sub>
  • Otros signos usuales
    • la mayor parte de los signos de puntuación se escriben directamente, no así los comienzos de las preguntas o de las exclamaciones utilizados en español, etc.
    • ¿ (comienzo de interrogación) en código html se escribe: &#191;o bien &iquest;
    • ¡ (comienzo de exclamación) en código html se escribe: &#161;o bien &iexcl;
    • ~ (tilde de la ñ) en código html se escribe: &#126;
    • < (menor que) en código html se escribe: &lt;
    • ‰ (tanto por mil) en código html se escribe: &#137;
    • © (Derechos de autor o Copyright) en código html se escribe: &copy;
  • Letras del alfabeto griego
    • Se les indica por el tipo de letra symbol escribiendo la letra latina correspondiente
    así la letra delta (d), en código html se escribiría: <font face="symbol">d</font>
    para la letra alfa (a) se pondría dentro de la etiqueta la letra a, etc.

Maquetado de textos

Los textos en código html no presentan por sí mismos divisiones en líneas, párrafos, etc.
El navegador dispone el texto en líneas ajustadas al tamaño de la ventana y justificado a la izquierda. Si el texto requiere un formateado determinado hay que indicarlo mediante etiquetas.
 
  • espacio en blanco adicional, en código html hay que escribir: &nbsp;
    • tantas veces como espacios en blanco se deseen
  • final de línea, con la etiqueta <br>
  • párrafo, con la etiqueta <p> al principio del mismo (si el resultado obtenido no es satisfactorio, puede cerrarse con la etiqueta </p>)
  • texto sangrado, con la etiqueta <blockquote></blockquote>
    • puede usarse repetidamente para establecer varios niveles si el texto lo requiere.
    Esta etiqueta deja una línea en blanco entre los grupos de texto o sólo bajo el grupo según el navegador.
  • justifición a la derecha
    • <p align="right"></p> todo el párrafo
    o con la etiqueta <div align="right"></div>
  • justifición en ambos márgenes
    • <p align="justify"></p> todo el párrafo
    o con la etiqueta <div align="justify"></div>
  • texto centrado, con la etiqueta <center></center>
para cambiar la disposición del texto siempre hay que cerrar la etiqueta abierta y abrir la que corresponda, en otro caso habría errores de lectura por el navegador.

Jerarquización de textos

  • Encabezamiento, apartados y subapartados

    • se obtienen tamaños especiales para resaltar el título de un documento, sus apartados y subapartados con las siguientes etiquetas:
    • con la etiqueta <h1></h1> de encabezamiento
    • con la etiqueta <h2></h2> de apartado principal
    • con la etiqueta <h3></h3> de subapartado
    se pueden disponer hasta seis niveles
    todas estas etiquetas conllevan dejar una línea en blanco bajo ellas
  • Listas
    • lista numerada, la lista en su conjunto está indicada por la etiqueta <ol></ol> y a cada parte de la lista se le antepone la etiqueta <li>
    • lista sin numerar: se le identifica con la etiqueta <ul></ul> y cada parte de la lista se le antepone la etiqueta <li>
    • si sólo se utiliza la etiqueta <li> antepuesta a cada término de la lista, esta aparece con sus términos sin sangrado respecto al texto precedente.
    pueden conseguirse listas anidadas, mostrando la información en los niveles que la hagan más comprensible, ya sean numeradas o sin numerar.
  • Glosarios
    • es un tipo particular de lista con los términos y sus definiciones respectivas, por ello también se le conoce como lista de definición
    • se utiliza la etiqueta <dl></dl> para delimitar el glosario
    • a cada término se le antepone la etiqueta <dt>
    • a su definición se le antepone la etiqueta <dd>
  • Barra de separación horizontal (entre partes del documento)
    • se utiliza la etiqueta <hr>, en este caso ocupará toda la anchura de la ventana y un grosor o altura de 1 punto.
    • se pueden fijar su longitud

      • <hr width="150" align="right"> indica que tendrá una longitud de 150 puntos y a la derecha.
    • o bien <hr width="50%"> indica que ocupará el 50 % de la anchura de la ventana que tengamos en ese momento (centrada o a la izquierda, por defecto, según el navegador)
    • y grosor (altura) en la pantalla

      • <hr size="4"> indica que su altura o grosor será de 4 puntos
    • o controlar varias al tiempo,

      • p. ej.: <center><hr size="6" width="50%" color="#FF00FF"></center> indica una barra de grosor 6 puntos, con una anchura del 50% de la ventana, centrada y en color magenta (el color de la barra sólo lo muestran algunos navegadores).

Enlaces Gráficos Tablas Otros recursos

©   Marcos A. Lamolda 2003 portada