Home UC3M
Home IT
Home / Docencia / Introducción a HTML

Intro a HTML

Fases de Diseño de un sitio Web: III. Fase Producción

Índice


  1. Tratamiento del espacio

Ejercicio

Tarea

Observa cómo tratan los navegadores los espacios en blanco.

Procedimiento

  1. Abre el editor interacctivo seleccionando este enlace.
  2. Escribe el siguiente texto en el lado izquierdo de la pantalla respetando los espacios en blanco y saltos de línea que contiene.
  3. Esto demuestra cómo se usan los espacios en blanco
    
    
    
      						(espacio, tabuladores y fines de línea)
    
    
    
    son agrupados como un único espacio en blanco en HTML.
    
    Puede que no se vea como se esperaba.
  4. Pulsa submit para ver el resultado en el lado derecho.

Debería verse:

Esto demuestra cómo se usan los espacios en blanco (espacio, tabuladores y fines de línea) son agrupados como un único espacio en blanco en HTML. Puede que no se vea como se esperaba.

Go Up
  2. Sangrar el texto

HTML no entiende los espacios en blanco tal y como los escribimos normalmente. Para conseguir que el texto se posicione horizontalmente en el punto deseado de la pantalla se utilizan algunas etiquetas especiales como:

  • La etiqueta de bloque <BLOCKQUOTE>
  • La etiqueta de texto preformateado<PRE>.
  • La etiqueta de centrado, <CENTER>.
  • El espacio en blanco &nbsp;
  • Las tablas <TABLE> (se verán en otra sección)
  • Los distintos tipos de listas <OL>, <UL> y <DL> (se verán en otra sección)

El texto incluido dentro de las etiquetas <blockquote>...</blockquote> ocupa en pantalla menos espacio en horizontal que un párrafo normal ya que estas etiquetas aumentan los márgenes derecho e izquierdo.

El texto incluido dentro de las etiquetas <pre>...</pre> aparece preformateado, es decir se muestra con el mismo formato con el que lo hayamos escrito. Estas etiquetas se utilizan cuando interesa deshabilitar el comportamiento habitual del navegador (agrupación de todos los espacios en uno solo, ajuste de línea al tama ño de la ventana, etc.) y queremos que el texto se vea tal y como lo estamos escribiendo. Esta funcionalidad se utiliza por ejemplo al escribir los versos de una poesía o un fragmento de código).

El texto incluido dentro de las etiquetas <center>...</center> aparece centrado en pantalla.

En HTML además de las etiquetas y los atributos existen otro tipo de marcas denominadas entidades y que se caracterizan porque comienzan con el símbolo & y terminan con un punto y coma "; ". Estas entidades nos sirven para representar caracteres especiales.

La entidad &nbsp; (del inglés Non Breaking Space que significa espacio sin ruptura) sirve para representar en HTML un espacio en blanco y se utiliza normalmente en dos casos:

  • Cuando queremos que dos palabras no se separen al ajustar el texto al tamaño de la ventana, por ejemplo las dos palabras que forman una marca. En ese caso si ponemos Coca Cola el navegador puede separar las palabras pero si ponemos Coca&nbsp;Cola el navegador no las separará aunque modifiquemos el tamaño de la ventana.
  • Cuando queremos evitar que el navegador agrupe todos los espacios como si fuesen uno sólo podemos utilizar la entidad &nbsp; tantas veces como espacios en blanco queramos incluir.

Puedes consultar la forma de representar otros caracteres especiales pulsando sobre este enlace


Ejercicio

Tarea

Practica el uso de las etiquetas <blockquote>, <pre>, <center> y la entidad &nbsp;.

Procedimiento

  1. Abre el editor interactivo seleccionando este enlace y escribe en el lado izquierdo el siguiente texto.
  2. <html>
      <body>
        <h3>Sangrar Texto</h3>
    
        <ul>
          <li>
            Este es un ejemplo de uso de la etiqueta &lt;blockquote&gt;.
            <blockquote> El efecto es que aumentan los márgenes
            izquierdo y derecho y diminuye el tamaño del
            p&aacute;rrafo.</blockquote>
          </li> 
    
          <li>
            Este fragmento de poes&iacute;a es un ejemplo de texto preformateado
            <pre>
          1.    Un soneto me manda hacer Violante
          2. en mi vida me he visto en tal aprieto.
          3. Catorce versos dicen que es soneto.
          4. Burla burlando van los tres delante.
                           (...)
            </pre>
          </li>
    
          <li>
            Este es un ejemplo de uso de la etiqueta center que centra el texto
            que contiene
            <center>Texto centrado</center>
          </li>
    
          <li>
    	Este es un ejemplo de uso de los espacios en blanco. Hemos visto que
            en HTML todos los espacios que escribimos el navegador los agrupa
            como si fueran uno sólo. Aqui ponemos 4 espacios en blanco
            &nbsp;&nbsp;&nbsp;&nbsp;que el navegador no podrá
            agrupar
          </li> 
    
          <li>
            Este es un ejemplo de uso de la entidad "non breaking
            space". Trata de ajustar el tamaño de la ventana hasta que
            consigas romper en dos líneas esta primera aparición de la palabra
            Coca Cola. Trata de hacer lo mismo con esta segunda aparición que
            contiene un "non breaking space" Coca&nbsp;Cola
            comprobarás que en este segundo caso te resulta imposible.
          </li>
        </ul>
      </body>
    </html>
    	

Debería verse:

Sangrar Texto

  • Este es un ejemplo de uso de la etiqueta <blockquote>.
    El efecto es que aumentan los márgenes izquierdo y derecho y diminuye el tamaño del párrafo.
  • Este fragmento de poesía es un ejemplo de texto preformateado
            1.    Un soneto me manda hacer Violante
            2. en mi vida me he visto en tal aprieto.
            3. Catorce versos dicen que es soneto.
            4. Burla burlando van los tres delante.
                             (...)
    		
  • Este es un ejemplo de uso de la etiqueta center que centra el texto que contiene
    Texto centrado
  • Este es un ejemplo de uso de los espacios en blanco. Hemos visto que en HTML todos los espacios que escribimos el navegador los agrupa como si fueran uno sólo. Aqui ponemos 4 espacios en blanco      que el navegador no podrá agrupar
  • Este es un ejemplo de uso de la entidad "non breaking space". Trata de ajustar el tamaño de la ventana hasta que consigas romper en dos líneas esta primera aparición de la palabra Coca Cola. Trata de hacer lo mismo con esta segunda aparición que contiene un "non breaking space" Coca Cola comprobarás que en este segundo caso te resulta imposible.

Go Up
  3. Saltos de línea y secciones

HTML por defecto ignora los saltos de línea y ajusta el texto al tamaño de la ventana disponible. A veces puede interesar forzar los saltos de línea por ejemplo al escribir una dirección donde queremos que el destinatario, nombre de la calle y código postal estén en líneas diferentes para ello se utiliza la etiqueta <br> (del inglés Breaking Rule). A veces interesa que el salto de línea quede también reflejado gráficamente mediante una línea divisoria para por ejemplo separar dos secciones de texto. Para conseguirlo se utiliza la etiqueta <hr> (del inglés Horizontal Rule)


Ejercicio

Tarea

Practica las etiquetas <br> para forzar saltos de línea y <hr> para incluir un separador entre secciones.

Procedimiento

  1. Abre el editor interacctivo seleccionando este enlace.
  2. Escribe el siguiente texto en el lado izquierdo de la pantalla:
    <html>
     <body>
      <p>Universidad Carlos III de Madrid
       Avda Universidad, 30
       28911 Leganes, Madrid.
      </p>
      <hr>
    
      <p>Universidad Carlos III de Madrid</p>
      <p>Avda Universidad, 30</p>
      <p>28911 Leganes, Madrid.</p>
      <hr>
    
      <p>Universidad Carlos III de Madrid<br>
       Avda Universidad, 30<br>
       28911 Leganes, Madrid.<br>
      </p>
      <hr width=50%>
     </body>
    </html>
    
  3. Pulsa submit para ver el resultado en el lado derecho.

Debería verse:

Universidad Carlos III de Madrid Avda Universidad, 30 28911 Leganes, Madrid.


Universidad Carlos III de Madrid

Avda Universidad, 30

28911 Leganes, Madrid.


Universidad Carlos III de Madrid
Avda Universidad, 30
28911 Leganes, Madrid.



Go Up
  4. Proyecto: Tratamiento del espacio. Secciones

Una vez que tenemos el contenido básico de la página de entrada index.html vamos a tratar de separar la información de presentación de la información bibliográfica aprovechando nuestros conocimientos sobre como tratar el espacio. El título y la información de presentación la vamos a presentar centrada para que llame más la atención del visitante (<center>...</center>) . El texto de presentación es demasiado largo y ocuparía toda la línea, por ello hemos decidido forzar algunos saltos de línea (<br>) para que el texto quede agrupado en el centro de la pantalla.

También añadiremos lo que será el esqueleto de navegación de nuestro sitio web. Para hacerlo utilizaremos un par de separadores (<hr>) para crear el efecto de una barra de navegación y añadiremos unas cuantas palabras que indicaran cada una de las secciones de nuestro sitio web. Para que las palabras no queden demasiado juntas hemos utilizado entidades de caracter (&nbsp;) para separarlas tal y como muestra la figura:


Aplicación práctica

Tarea

Utiliza las etiquetas <center>, <br>, <hr> y la entidad &nbsp; para distribuir espacialmente el contenido de tu página web y crear la barra de navegación.

Procedimiento

  1. Observa la página de entrada al web de telémaco.
  2. Abre con el wordpad el fichero.html que corresponda a tu página principal.
  3. Utiliza las etiquetas <center>...</center> rodeando las partes de texto que quieras que aparezcan centradas.
  4. Utiliza la etiqueta <br> si quieres forzar algún salto de línea.
  5. Utiliza las etiquetas <hr> para crear las líneas de tu barra de navegación (recuerda que <br> y <hr> no tienen etiqueta de cierre).
  6. Utiliza la entidad de caracter "non breaking space" &nbsp; para separar las palabras de tu menú de navegación tanto como quieras. (Recuerda que debes usar tantos &nbsp; como espacios en blanco quieras incluir ya que si pones los espacios en blanco directamente el navegador los agrupará como si fuese uno solo)
  7. Guarda el fichero.html y ábrelo con el navegador (Internet Explorer o Netscape Navigator) para comprobar el resultado.
  8. Si el resultado no es como esperabas revisa de nuevo el contenido de tu página y comprueba si todas las etiquetas se abren y se cierran correctamente teniendo en cuenta que algunos elementos como <br> y <hr> no tienen etiqueta de cierre.
  9. Si tienes alguna duda coméntala con tus compañeros en el foro titulado "HTML"
Go Up

Localización | Personal | Docencia | Investigación | Novedades | Intranet
inicio | mapa del web | contacta

Last Revision: