Texto de documentación para aprender a editar estilos de texto con lenguaje HTML.

Esta documentación es explicativa solamente en cuanto a edición de estilos de texto: no sirve para saber lenguaje HTML ni tampoco para hacer páginas web.

© 2011 Manuel Méndez - Manuko
Documento bajo Licencia de Documentación Libre GNU/FDL
Última revisión: 20110210-22:49

Trucos para escribir mejor con HTML

Para escribir cualquier cosa con edición descriptiva HTML, de modo que podamos escribir en cursiva, con negritas, o subrayando, o incluso haciendo las tres cosas a la vez, o incluso haciendo enlaces y cosas chulas, utilizaremos tags, o etiquetas, HTML (HiperText Markup Language). Ea, a aprender, que no es tan dificil...

La sintaxis de un tag es sencilla: se compone de dos flags, o banderas, una que abre y otra que cierra. Cualquier texto que queramos definir con un tag, deberá estar entre los dos flags, que se escriben con <> para abrir, y </> para cerrar.

Un ejemplo: para hacer negrita, ponemos <b>así y entonces lo que esté entre medias de los dos tags </b> estará en negrita...

Indice

Cursivas, negritas, subrayados...

Para escribir con cursivas, negritas o subrayados, utilizaremos los tags i, b y u respectivamente, así:

Volver al indice

Enlaces

Para realizar un enlace, utilizaremos el tag a, normalmente seguido de la referencia HTTP del enlace, del modo <a href="referencia">texto del enlace</a>.
Por ejemplo, <a href="http://www.google.com">google.com</a> se vería así: google.com, y nos llevaría a google.com...

Volver al indice

Escribir citas acotadas en bloque y saltos de linea

Citas en bloque

Las citas en bloque son muy útiles para hacer referencias dentro de un texto a otros textos. Una cita es, por ejemplo:
Con cien cañones por banda
Viento en popa, a toda vela
Ataca un montón de ventanas
Un pingüino saltarín
Para realizar una cita en bloque, utilizaremos el tag <blockquote></blockquote>, poniendo entre medias de las dos etiquetas el texto citado:
<blockquote>Con cien cañones por banda Viento en popa, a toda vela Ataca un montón de ventanas Un pingüino saltarín</blockquote>

Volver al indice

Saltos de linea

A pesar de que lo hemos escrito con saltos de linea, el navegador no lo interpreta así hasta que no hay una linea vacía entre los textos, en cuyo caso a veces dibuja también esa linea de separación. Utilizaremos la etiqueta <br />, de break (romper), para forzar un salto de linea. En este caso no hay flag de cierre, ya que el salto de linea se ejecuta directamente sin ser una etiqueta para un texto concreto:
<blockquote>Con cien cañones por banda<br />
Viento en popa, a toda vela<br />
Ataca un montón de ventanas<br />
Un pingüino saltarín</blockquote>
Por último, personalmente creo que queda mucho mejor hacer una cita en cursiva:
<blockquote><i>Con cien cañones por banda<br />
Viento en popa, a toda vela<br />
Ataca un montón de ventanas<br />
Un pingüino saltarín</i></blockquote>
Que queda como al principio:
Con cien cañones por banda
Viento en popa, a toda vela
Ataca un montón de ventanas
Un pingüino saltarín

Volver al indice

Incrustar imágenes y centrar texto

Incrustar imágenes

Para incrustar una imágen, utilizaremos el tag simple image source (fuente de imagen), escribiendolo así: <img src="fuente_de_la_imagen">.
Un ejemplo:

<img src="http://www.google.es/intl/en_com/images/srpr/logo1w.png">

Nos dará como resultado:
Claro que alomejor queremos cambiarle el tamaño. Lo más recomendable, es darle un ancho (width) o un alto (height) máximos, en pixeles, por ejemplo así:

<img src="http://www.google.es/intl/en_com/images/srpr/logo1w.png" width="100px">

Que quedaría así:

Volver al indice

Centrar texto e imágenes:

Aunque, eso si, queda mucho mejor si la centramos metiendola dentro de un tag <center></center>...

<center><img src="http://www.google.es/intl/en_com/images/srpr/logo1w.png"></center>
Eso de centrar con <center></center> es muy útil, incluso si queremos centrar texto dentro de una cita de bloque. Así, por ejemplo:
<blockquote><center><i>Con cien cañones por banda<br />
Viento en popa, a toda vela<br />
Ataca un montón de ventanas<br />
Un pingüino saltarín</i></center></blockquote>
Que quedaría tal que así:
Con cien cañones por banda
Viento en popa, a toda vela
Ataca un montón de ventanas
Un pingüino saltarín

Volver al indice

Escribir tildes y carácteres especiales

Hay veces que la codificación del servidor web o de la página que hemos hecho no está correctamente definida, y en lugar de usar un juego de caracteres europeo, se utiliza el estandar UTF-8. Con ese juego de caracteres no podremos ver correctamente ni las tildes, ni la ñ, ni tampoco podremos ver aquellos caracteres especiales html, como <>. Para escribir cualquiera de ellos hará falta utilizar & seguido del código del caracter, y luego ;, ejemplo: &ntilde; dibujaría una n con tilde, es decir, una ñ. A su vez, para escribir &ntilde; y que el navegador no lo traduzca a ñ, utilizamos el código para escribir &, que es &#38;. Distintos casos:

Volver al indice

Alinear párrafos e imágenes

En ocasiones, queremos alinear todo un párrafo para que se vea a un lado del texto, o sangrar el estilo para que la redacción quere más coherente para nuestros hojos. Para alinear un párrafo, utilizaremos el tag p align, con <p align="alineación">párrafo alineado</p>. Un ejemplo:

<p align="right">Con cien cañones por banda<br />
Viento en popa, a toda vela<br />
Ataca un montón de ventanas<br />
Un pingüino saltarín</p>

Quedaría así:

Con cien cañones por banda
Viento en popa, a toda vela
Ataca un montón de ventanas
Un pingüino saltarín



Los valores para align son left (izquierda), right (derecha) o center. También podemos usar align para, por ejemplo, alinear una imagen dentro de un párrafo, así:

<p align="right"><img src="http://www.google.es/intl/en_com/images/srpr/logo1w.png" align="right" width="100px"> Con cien cañones por banda<br />
Viento en popa, a toda vela<br />
Ataca un montón de ventanas<br />
Un pingüino saltarín</p>

Nos daría como resultado:

Con cien cañones por banda
Viento en popa, a toda vela
Ataca un montón de ventanas
Un pingüino saltarín

Volver al indice

Listas

Para hacer una lista, tenemos dos elementos distintos: la lista en si, y cada uno de los elementos. Para etiquetar la lista utilizaremos el tag <ul></ul>, y para etiquetar cada uno de los elementos de la lista, utilizaremos el tag <li></li>.

Un ejemplo:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
 <ul><li>3.1</li>
 <li>3.2</li>
 <li>3.3</li>
 <li>3.4</li></ul>
<li>4</li>
<li>5</li>
</ul>

Nos quedaría así:

Volver al indice



© 2011 Manuel Méndez - Manuko
Documento bajo Licencia de Documentación Libre GNU/FDL
Última revisión: 20110210-22:49