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. Énfasis en el texto y tipos de letra.

En HTML existen etiquetas para identificar distintos tipos de letra que nos ayudan a dar énfasis al texto, los más frecuentes son <b> para el texto en negrita e <i> para el texto en itálica aunque existen otros muchos como puedes ver en el siguiente ejercicio.


Ejercicio

Tarea

Practica en el editor interactivo los distintos tipos de letra

Procedimiento

  1. Abre el editor interacctivo seleccionando este enlace.
  2. Escribe el siguiente texto en el lado izquierdo de la pantalla:
    <html>
      <body>
        Texto en <b>Negrita</b> <br> <br>    
        Texto en <i>Itálica</i> <br> <br>    
        Texto en <strong>Fuerte</strong> <br><br>
        Texto en <blink>Intermitente</blink> <br><br>
        Texto en <code>Clave</code> <br><br>
        Texto en <em>Resaltado</em> <br><br>
        Texto en <address>Dirección</address> <br><br>
        Texto en <cite>Cita</cite> <br><br>
        Texto en <samp>Muestra</samp> <br><br>
        Texto en <big>Gran Impresión</big> <br><br>
        Texto en <small>Pequeña Impresión</small> <br><br>
        Texto en <sub>Sub Índice</sub> (No soportado por todos los navegadores)<br><br>
        Texto en <sup>Super Índice</sup> (No soportado por todos los navegadores)<br><br>
        Texto en <tt>Teletipo</tt> <br><br>
        Texto en <keyboard>Teclado</keyboard> <br><br>
        Texto en <strike>Tachado</strike> <br>
    
        <p>
          Se pueden combinar los anteriores de forma que se tenga por ejemplo
          <b>negritas, <i>itálicas y <tt>texto en
          teletipo</tt></i></b> todo junto.
        </p> 
    
        <p>
          Asegúrese de <b>cerrar las etiquetas en el <i>orden
          correcto</i> como ocurre en este ejemplo</b>. Donde primero
          se abre <b> negrita luego se abre <i> itálica  y tenemos que
          cerrar itálica </i> antes de cerrar negrita </b>.
        </p> 
      </body>
    </html>
    	
  3. Pulsa submit para ver el resultado en el lado derecho.
Go Up

Solución:

Debería verse:

Texto en Negrita
Texto en Itálica
Texto en Fuerte
Texto en Intermitente
Texto en Clave
Texto en Resaltado
Texto en
Dirección

Texto en Cita
Texto en Muestra
Texto en Gran Impresión
Texto en Pequeña Impresión
Texto en Sub Índice (No soportado por todos los navegadores)
Texto en Super Índice (No soportado por todos los navegadores)
Texto en Teletipo
Texto en Teclado
Texto en Tachado

Se pueden combinar los anteriores de forma que se tenga por ejemplo negritas, itálicas y texto en teletipo todo junto.

Asegúrese de cerrar las etiquetas en el orden correcto como ocurre en este ejemplo . Donde primero se abre negrita luego se abre itálica y tenemos que cerrar itálica antes de cerrar negrita.

Observaciones

  • Las etiquetas más frecuentes son <b>, <i>, <em> y <strong>
  • Observa que la etiqueta <strong> y <b> en la práctica son equivalentes
  • Del mismo modo la etiqueta <em> e <i> en la práctica son equivalentes
  • La etiqueta <address> además de poner el texto en cursiva inserta un salto de carro al principio y otro al final
  • Observa la forma en que se anidan las etiquetas (Unas etiquetas contienen a otras <b> <i> </i> </b> y no <b><i></b></i>).

  2. Proyecto: Énfasis y formato de texto

Vamos a añadir un poco de énfasis a las notas biográficas de la página principal (index.html) para destacar algunas palabras y hacer el texto más legible. En este ejemplo añadiremos muchos efectos para ilustrar cómo se usan pero se recomienda utilizarlos de forma moderada sólo en aquellas palabras en las que queramos captar la atención del usuario ya que si las palabras resaltadas son muchas el usuario dispersa su atención y no se consigue el efecto deseado.

En la siguiente figura puedes ver el resultado de añadir énfasis a la página de Telémaco:


Aplicación práctica

Tarea

Utiliza las etiquetas <b>, <i>, <em>, <strong>, <cite> y <blink> para enfatizar algunas palabras del texto.

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 <b>...</b> rodeando las porciones del texto que quieras que aparezcan en negrita.
  4. Utiliza las etiquetas <i>...</i> rodeando las porciones del texto que quieras que aparezcan en itálica.
  5. Utiliza las etiquetas <cite>...</cite> si en el texto hay alguna cita textual (por defecto se mostrará en itálica pero podremos modificarlo más adelante en la hoja de estilo).
  6. Utiliza las etiquetas <em>...</em> para dar énfasis. Por defecto se mostrará en itálica pero podremos modificarlo más adelante en la hoja de estilo.
  7. Utiliza las etiquetas <strong>...</strong> para resaltar o dar fuerza a una parte del texto. Por defecto se mostrará en negrita pero podremos modificarlo más adelante en la hoja de estilo.
  8. Utiliza las etiquetas <blink>...</blink> si quieres mostrar un texto de forma intermitente. Se recomienda no utilizar efectos animados dentro de la página que el usuario no pueda deshabilitar porque pueden resultar molestos para el visitante de la página.

Go Up

Solución:

Observaciones

  • Comprueba el aspecto de la página de Telémaco en el navegador pulsando sobre este enlace.
  • Puedes consultar el código HTML de esta página (o de cualquier página que consultes en Internet) desde tu navegador para hacerlo:
    • Si utilizas Internet Explorer: Selecciona la opción de menú (Ver|Código Fuente)
    • Si utilizas Netscape Navigator: Selecciona la opción de menú (Ver|Origen de la página)

  3. Formato de Texto

En HTML para dar formato al texto se puede utilizar la etiqueta <font> acompañada de varios atributos. Esta etiqueta afecta a la presentación del texto y no a su estructura lógica por lo que en general no se recomienda su uso extensivo dentro del documento. En la sección "Hojas de estilo" se explicará como separar la estructura del texto de los aspectos de presentación poniendo estos en un documento independiente que llamaremos hoja de estilo.

En cualquier caso los atributos utilizados en las hojas de estilo son similares a los atributos de la etiqueta <font> los más frecuentes son size para indicar el tamaño face para indicar la familia de fuente (arial, hevetica, times, impact, etc.) y color para indicar el color.


Ejercicio

Tarea

Practica los atributos size, face y color para modificar respectivamente el tamaño, la familia y el color de las letras que componen un texto.

Procedimiento

  1. Abre el editor interacctivo seleccionando este enlace.
  2. Escribe el siguiente texto en el lado izquierdo de la pantalla:
    <html>
     <body>
        <p>Para modificar el tamaño y la familia de los tipos de letra se utiliza la etiqueta
         <TT><b><font></b></TT>.</p>
        
        <h4>Tamaño (valor de 1 a 7)</h4>
        Texto de <font size="6">tamaño 6</font> <br>
        Texto de <font size="5">tamaño 5</font> <br>
        Texto de <font size="1">tamaño 1</font> <br>
        Se puede utilizar para simular <font size="5">M</font>AYÚSCULAS.
        (frecuente al comienzo de párrafo <br>
    
        <h4>Familia de fuente</h4>
        Texto en <font face="arial">Arial</font> <br>
        Texto en <font face="times">Times</font> <br>
        Texto en <font face="impact">Impact</font> <br>
      
        <h4>Color de fuente</h4>
        Texto en <font color="blue">Azul</font> <br>
        Texto en <font color="red">Rojo</font> <br>
        Texto en <font color="green">Verde</font> <br>
      </body>
    </html>
    
  3. Pulsa submit para ver el resultado en el lado derecho.
Go Up

Solución:

Debería verse

Para modificar el tamaño y la familia de los tipos de letra se utiliza la etiqueta <font>.

Tamaño (valor de 1 a 7)

Texto de tamaño 6
Texto de tamaño 5
Texto de tamaño 1
Se puede utilizar para simular MAYÚSCULAS. (frecuente al comienzo de párrafo

Familia de fuente

Texto en Arial
Texto en Times
Texto en Impact

Color de fuente

Texto en Azul
Texto en Rojo
Texto en Verde

Observaciones:

  • Como valor del atributo face debe ser posible utilizar cualquiera de las familias de letras que existan en tu ordenador, pero se debe considerar que no todos los que vean el documento tendrán las mismas familias de letras en sus ordenadores.
  • Como valor del atributo color se pueden utilizar algunos nombres de colores en inglés que están predefinidos, por ejemplo 'red', 'blue' y 'green'. En general se puede especificar el color como color="#rrggbb", en donde cada par de letras corresponde a dos dígitos hexadecimales (0-9,a-f, con a=10 ... f=15) que definen el nivel de cada componente (rojo, verde y azul). He aquí algunos ejemplos. Puedes ver muchos otros pinchando sobre este enlace.
    • #000000 - black
    • #ff0000 - red
    • #8b0000 - darkred
    • #00ff00 - lime
    • #008000 - green
    • #0000ff - blue
    • #ffff00 - yellow (red + green)
    • #ff00ff - magenta (red + blue)
    • #00ffff - cyan (green + blue)
    • #ffffff - white (red + green + blue)
  • Es posible especificar todos los atributos en una sola etiqueta: <font size=2 face="arial" color="#ff2d2d">

Intenta estos cambios:

  • Modifica el valor del atributo size.
  • Modifica el valor del atributo color.
  • Modifica la etiqueta <body> de la siguiente manera: <body bgcolor="yellow">. Note que de esta forma cambia el color del fondo de la página. En este caso también se pueden emplear los colores predefinidos o la notación "#rrggbb".


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

Last Revision: