Top Right Link Text
{ Curso de HTML/XHTML }
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ... soy casi perfecto.


Curso de HTML y/o XHTML cap5 – formatos de texto: acentos, color, tamaño y tipo de letra.

Si bien muchas de estas cosas lo podemos hacer en una hoja de estilos aparte ( CSS ), es primordial partir por lo basico, más adelante versemos CSS a fondo.

Acentos en HTML

En el capitulo anterior me dejaron unos comentarios de que los acentos no se veían bien, pues bien los acentos (y otros caracteres poco comunes) en HTML se escriben así:

< ( Menor que ): &lt;
> ( Mayor que ): &gt;
& (símbolo de and , o ampersand ): &amp;
" ( comillas dobles ): &quot;
á: &aacute;
é: &eacute;
í: &iacute;
ó: &oacute;
ú: &uacute;
Á: &Aacute;
É: &Eacute;
Í: &Iacute;
Ó: &Oacute;
Ú: &Uacute;
ü: &uuml;
Ü: &Uuml;
ñ: &ntilde;
Ñ: &Ntilde;
¿: &#191;
¡: &#161;

Para que queda más claro un ejemplo:

s&oacute;lo soy un texto con acento.

Mostraría : sólo soy un texto con acento.

Ahora tenemos otra opción la cual es definir una codificación de la pagina web (mirar la linea 4):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Mi primera pagina<title>
  </head>
 
  <body>
    <h1 align="center"><u>Mi primera pagina</u></h1>
    <p>
      <em>Guau</em> esto es <b>increible</b> miren voy a poner
      un link <a href="http://tecnologiaslibres.net"> a TecnologiasLibres</a>
    </p>
 
  </body>
 
</html>

y listo, cualquiera de las 2 opciones son validas, ojo en vez de UTF-8 pueden definir otra codificación pero yo les recomiendo esa :P .

Color de texto en html

es súper sencillo de hecho vamos a explicarlo con un ejemplo. la pagina anterior dejaremos el titulo en rojo y el contenido en azul :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Mi primera pagina<title>
  </head>
 
  <body>
    <h1 align="center" style="color:red;"><u>Mi primera pagina</u></h1>
    <p  style="color:blue;">
      <em>Guau</em> esto es <b>increible</b> miren voy a poner
      un link <a href="http://tecnologiaslibres.net"> a TecnologiasLibres</a>
    </p>
 
  </body>
 
</html>

Ojo los nombre de los colores van en ingles. Y si quieren usar una paleta de colores con una gama más amplia, pueden en vez de poner el nombre del color usar la codificación RGB.

Tamaño y tipo de letra en html

Es muy similar a colo se define el color, de hecho seguiremos con el mismo ejemplo que estamos usando y valos a dejar el tamaño del titulo más grande y de otra fuente:

fijar en la linea 9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Mi primera pagina<title>
  </head>
 
  <body>
    <h1 align="center" style="color:red;font-size:47px;font-family:Times;"><u>Mi primera pagina</u></h1>
    <p  style="color:blue;">
      <em>Guau</em> esto es <b>increible</b> miren voy a poner
      un link <a href="http://tecnologiaslibres.net"> a TecnologiasLibres</a>
    </p>
 
  </body>
 
</html>

Eso es todo, dudas sugerencias :D ? dejar un comentario

Post Relacionados

    feed ¿Quieres leer más artículos como éste? ¡Suscríbete!



    This entry was posted on Tuesday, February 17th, 2009 at 05:22 and is filed under Curso de html/xhtml. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    Leave a Reply