jueves, 7 de junio de 2012

Las etiquetas de HTML

Cuando localizas páginas web o videojuegos, a menudo te topas con las famosas etiquetas del lenguaje HTML y como traductor debes saberlas identificar y entender, ya que estas etiquetas son órdenes para la visualización del texto. Es decir, estas etiquetas harán que una parte del texto salga en negrita, que las frases pasen a formar parte de una lista o que dejes un espacio entre líneas. El traductor debe aprender a jugar con ellas, ya que, a veces, el formato del texto no puede ser el mismo en todos los idiomas. Por ejemplo, puede que en un texto alemán se resalte una sola palabra en negrita porque es la que tiene que llamar la atención sobre el lector, pero que, en castellano, necesites resaltar tres palabras, ya que se trataba de una palabra compuesta que en castellano exige el uso de una preposición.


Por ello, he decidido publicar un pequeño resumen que espero que sirva de ayuda para los que empezáis en el mundo de la Localización. 




Etiquetas


Generales:


<html> </html>: indica el principio y el fin del código de HTML.
• <head> </head>: delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página, pero no es visible en la web.
• <title> </title>: delimita el título de la ventana. Su contenido es invisible en el cuerpo de la web (solo aparece en la parte superior de la ventana), pero es muy importante para los motores de búsqueda.
• <body>: a partir de aquí, se muestra el contenido real de la página web, es decir: el texto.
• <a> </a>: marca las anclas utilizadas para establecer un enlace con texto o gráficos.  La orden del ancla debe incluir el parámetro href="URL" si hace referencia a una URL. Es decir, si quieres introducir un link en la página. En cuanto a los gráficos, se pueden insertar mediante la orden IMG con el parámetro src="URL". A veces los gráficos incluyen texto alternativo [alt=]. Este texto alternativo se muestra en la web si el gráfico no se ha podido visualizar (porque no tienes las actualizaciones instaladas, por ejemplo).
• <script>: se usa para introducir un script en la web. (Por si no sabéis lo que es un script: http://es.wikipedia.org/wiki/Script).

Formato de fuente:

<b> </b>: negrita
<i> </i>: cursiva
<u> </u>:  texto subrayado
<sup> </sup>: superíndice
<sub> </sub>: subíndice 

Tamaño de fuente:

<h1> </h1> / <h6> </h6>: tamaño del título, 1 es la más grande, 6, la más pequeña.
<small> </small>: hace la letra más pequeña.
<big> </big>: hace la letra más grande.
<font size=…> </font>: tamaño de la letra, 1 es la más pequeña, 7, la más grande y 3, normal.

 Estructura de los párrafos:

<p> </p>: comienza el párrafo (se deja un espacio automáticamente antes y después del párrafo).
<center> </center>:  centrar.
<br> </br>: salto de línea
<nobr> </nobr>: elimina los saltos de línea.
<blockquote> </blockquote>: citas 

Listas:

• <li> </li> oder <ul> </ul>: lista
• <ol>   start="1" type="1"> </ol>: lista numerada
  start="1" type="I">
  start="1" type="i">
  start="1" type="A">
  start="1" type="a">

Colores:

<body bgcolor="...">: color de fondo de toda la página.
<font color="..."> </font>: color de la letra.
<table bgcolor="..."></table>: color de fondo de las tablas.
<td bgcolor="..."> </td>: color de fondo de las celdas de las tablas.

http://usuarios.sion.com/pauluk/coloreshtml.htm (Aquí podéis ver los códigos de cada color).

En muchos programas de traducción asistida, el traductor no tiene la posibilidad de jugar con las etiquetas o al menos a veces se bloquean para que el traductor no las elimine. Esto es un error, ya que como ya hemos mencionado, a menudo el formato no es el mismo para un idioma que para otro. Por ejemplo: <br>, a veces  el salto de línea debe aparecer detrás de otra palabra, ya que la extensión de la frase no es la misma en los distintos idiomas. 

Hay programas que te permiten ver el código fuente y el etiquetado de la web. Se trata de programas muy rudimentarios, editores de texto, pero una vez que has terminado la traducción en una herramienta de traducción asistida pueden servir de gran ayuda para cambiar ciertos detalles del formato.

Un ejemplo de programa es editplus: http://www.editplus.com/, por si queréis echarlo un vistazo y jugar con algún código fuente.

:)

3 comentarios:

  1. !Genial entrada Ana! A mí el tema de la localización me interesa muchísimo porque siempre me ha gustado trastear las plantillas de los blogs con el HTML, diseñaba mis jueguecitos con el RPGMaker y sus variables y cosas así. Estoy haciendo unos apuntes magistrales 101 sobre el tema, esta entrada me viene de perlas para repasar las básicas.

    PD: por cierto, hablando de "tags", si utilizas etiquetas para tus posts ganarás posicionamiento y será más fácil para el visitante encontrar el material. Aunque estoy seguro de que ya lo sabías.

    ResponderEliminar
    Respuestas
    1. Tienes razón, Dave. La verdad es que debería tratar de optimizar las búsquedas y hacer algo de SEO. Tengo que ponerme a leer todas las posibilidades que ofrece Blogger para hacerlo mejor. Gracias por el consejo.

      Eliminar
  2. Hola Ana. He encontrado este artículo por casualidad en mi busca por resolver un problema con etiquetas al hacer un ejercicio de traducción en Wordfast. Resulta que el ejercicio consiste en la traducción del texto de una caja de videojuego. Parte del texto tiene etiquetas HTML pero al darle a la flechita para la nueva línea, no me dió la opción de traducir el contenido de las etiquetas. Me quedé pensando si fue algún error mio o que simplemente no se supone que tenga que traducir estas líneas. Tu artículo me ha empezado a dar idea de la razón por la que no apareció la línea disponible para escribir la traducción. Saludos, MariCarmen

    ResponderEliminar