miércoles, 31 de diciembre de 2008

31.- Elementos de estructuración de Texto "<em></em>"

En este y los siguientes post, veremos diferentes elementos, que nos ayudaran a estructurar el texto.

código     : <em></em>
resultado: enfatizado

Código de ejemplo:

<html>
  <head>
    <title>Estructuracion de Texto</title>
  </head>
  <body>
     Texto normal
     <em>texto enfatizado</em>
   </body>
</html>

Se vería así:

Texto normal texto enfatizado

-----------------------------------------------------------

Podéis encontrar más información sobre este tema en: deciencias.net

Temas anteriores *
30.- HTML - Encabezados o Titulos <hn><hn>
29.- HTML - Elementos básicos - Espacios y líneas <br>
28.- HTML - Elementos básicos - Párrafos- <p> </p>
27.- HTML - Elementos básicos - Separadores de Texto
26.- Un buen editor para programación Web - Notepad2
25.- HTML: Entidades y caracteres especiales. (2a parte)
24.- Encabezados o títulos en html
23.- Elemento de centrado html
22.- Estructura básica de un documento
21.- Estructura básica de un documento html - Marcas y etiquetas

viernes, 12 de diciembre de 2008

30.- HTML - Encabezados o Titulos <hn><hn>

Hoy veremos como hacer un encabezado o un titulo fácilmente para nuestra pagina web, y además un formato que podamos repetir en otras, para mantener la homogeneidad (aunque mas adelante veremos métodos mas avanzados)

Se puede dar mayor o menor importancia a los textos cambiando el tamaño y aplicando "negrita". Esto se puede hacer manteniendo un criterio si utilizamos la etiqueta<hN></hN>, en donde N es un valor valor entero comprendido entre 1 y 6 (el 1 formatearía títulos de mayor importancia, y el 6 los de menor importancia).

Estos títulos son párrafos, y producen saltos de línea. Veamos un ejemplo:

<html>
  <head>
    <title>Encabezados o Títulos</title>
  </head>
  <body>
    <h1>Ejemplo de Encabezado 1 - etiqueta <h1></h1>
    <h2>Ejemplo de Encabezado 2 - etiqueta <h2></h2>
    <h3>Ejemplo de Encabezado 3 - etiqueta <h3></h3>
    <h4>Ejemplo de Encabezado 4 - etiqueta <h4></h4>
    <h5>Ejemplo de Encabezado 5 - etiqueta <h5></h5>
    <h6>Ejemplo de Encabezado 6 - etiqueta <h6></h6>
  </body>
</html>

 titulos

Como se puede observar esta etiqueta tiene un principio <hn> y un cierre <hn>

-----------------------------------------------------------

Podéis encontrar más información sobre este tema en: MovableType

Temas anteriores *
29.- HTML - Elementos básicos - Espacios y líneas <br>
28.- HTML - Elementos básicos - Párrafos- <p> </p>
27.- HTML - Elementos básicos - Separadores de Texto
26.- Un buen editor para programación Web - Notepad2
25.- HTML: Entidades y caracteres especiales. (2a parte)
24.- Encabezados o títulos en html
23.- Elemento de centrado html
22.- Estructura básica de un documento
21.- Estructura básica de un documento html - Marcas y etiquetas
20.- Estructura básica de un documento html. Metodología

martes, 9 de diciembre de 2008

29.- HTML - Elementos básicos - Espacios y líneas <br>

Como hemos dicho anteriormente el html fue diseñado al principio especialmente para texto. Es por eso que los saltos de línea no se representan, y aunque lo escribamos en varias líneas se representa en una sola línea separada por espacios, veamos un ejemplo.
Código Ejemplo de separadores y líneas:
<html>
  <head>
    <title>Espacios y líneas</title>
  </head>
  <body>
    Esto                   
    aunque no                     lo          parezca
    es
    una
    sola
    línea
    de
    texto
  </body>
</html>
----- el código anterior en el navegador será así ---------

Esto aunque no lo parezca es una sola línea de texto
-----------------------------------------------------------
El ancho de la representación de esta línea de texto vendrá determinada por la ventana del navegador.
Como podéis observar tampoco se representan los espacios en blanco, por muchos espacios que pongamos solo se representara uno.
Para representar un salto de línea se utiliza la etiqueta <br>. Es decir que por cada <br> que se escribe en el código, se salta una linea en la representación.
Código Ejemplo de etiqueta <br>:
<html>
  <head>
    <title>Etiqueta de salto de línea <br></title>
  </head>
  <body>
    Esto                    
    es una línea, que saltara una línea después de la etiqueta<br>
    esta línea esta debajo porque antes hay una etiqueta <br>  </body>
</html>
----- el código anterior en el navegador será así ---------
Esto es una línea, que saltara una línea después de la etiqueta
esta línea esta debajo porque antes hay una etiqueta
-----------------------------------------------------------

Temas anteriores * 28.- HTML - Elementos básicos - Párrafos- <p> </p>
27.- HTML - Elementos básicos - Separadores de Texto
26.- Un buen editor para programación Web - Notepad2
25.- HTML: Entidades y caracteres especiales. (2a parte)
24.- Encabezados o títulos en html
23.- Elemento de centrado html
22.- Estructura básica de un documento
21.- Estructura básica de un documento html - Marcas y etiquetas
20.- Estructura básica de un documento html. Metodología
19.- Algunos Navegadores

martes, 2 de diciembre de 2008

28.- HTML - Elementos básicos - Párrafos- <p> </p>

Como ya hemos visto para representar saltos de línea utilizamos la etiqueta <br>, para el caso de párrafos, utilizamos las etiquetas <p> y </p> para cerrar el párrafo.

Cada vez que se cambia de párrafo, se representa un salto de línea que separa un párrafo de otro.

Código Ejemplo de párrafo:

<html>
  <head>
    <title>Párrafos</title>
  </head>
  <body>
    <p>Primer Párrafo</p>
    <p>Segundo Párrafo</p>
  </body>
</html>

Como siempre copia o escribe este código con un editor de texto plano (como el notepad de Windows), grabadlo como un archivo con extensión .hml y después abrid ese archivo con vuestro navegador, y obtendrás algo como esto.

-----------------------------------------------------------

Primer Párrafo

Segundo Párrafo

-----------------------------------------------------------

La etiqueta <p> </p> cuenta con el atributo align que permite alinear el texto a la izquierda, a la derecha o al centro. Este atributo también permite justificar el texto a los márgenes, veamos los ejemplos.

Código Ejemplo de párrafo alineado a la izquierda (left):
<html>
  <head>
    <title>Párrafos</title>
  </head>
  <body>
    <p align="left">texto alineado a la izquierda</p>
  </body>
</html>

----- aquí como se vera en el navegador ---------

texto alineado a la izquierda

-----------------------------------------------------------

Código Ejemplo de párrafo alineado a la derecha (right):

<html>
  <head>
    <title>Párrafos</title>
  </head>
  <body>
    <p align="right">texto alineado a la derecha</p>
  </body>
</html>

----- aquí como se vera en el navegador ---------
                 

texto alineado a la derecha

-----------------------------------------------------------

Código Ejemplo de párrafo alineado al centro  (center):

<html>
  <head>
    <title>Párrafos</title>
  </head>
  <body>
    <p align="center">texto alineado al centro</p>
  </body>
</html>

----- aquí como se vera en el navegador ---------
                 

texto alineado al centro

-----------------------------------------------------------

Código Ejemplo de párrafo justificado (justify):

<html>
  <head>
    <title>Párrafos</title>
  </head>
  <body>
    <p align="justify">texto alineado al centro</p>
  </body>
</html>

----- aquí como se vera en el navegador ---------

texto justificado a los márgenes izquierda y derecha, esta línea es mas larga para que podáis observar claramente como funciona la justificación.

-----------------------------------------------------------
Como ya sabéis desde el post anterior, estamos agregando un link donde podáis ver mas información referente al tema tratado. Aunque todo el material expuesto en este blog es de creación propia,  (excepto en los casos indicados), buscaremos otros sitios donde se trate el tema para que podáis tener otro punto de vista o ampliar la información.

Podéis encontrar más información en: Desarrollo web

Temas anteriores *
27.- HTML - Elementos básicos - Separadores de Texto
26.- Un buen editor para programación Web - Notepad2
25.- HTML: Entidades y caracteres especiales. (2a parte)
24.- Encabezados o títulos en html
23.- Elemento de centrado html
22.- Estructura básica de un documento
21.- Estructura básica de un documento html - Marcas y etiquetas
20.- Estructura básica de un documento html. Metodología
19.- Algunos Navegadores
18.- Evolución del concepto hipertexto