5 marzo 2009 in Diseño Web, XHTML/CSS by dacho

Bueno en esta lección procederemos a insertar texto en una pagina y luego veremos como darle distinto formato al mismo.

¿Como Insertar texto en una pagina web?

Como habíamos dicho en la primera lección las paginas web se escriben en un lenguaje de etiquetas. Para poder hablar un lenguaje hace falta conocer sus palabras, intentaremos aprender este lenguaje primero observando código y luego explicando que hace cada cosa. Crearemos un Articulo que diga porque crear una pagina web (en realidad lo tome de aquí), Constara de una pregunta principal y luego encabezados que responden los motivos de la pregunta:

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema-->
  <title>Practico 3</title>
 </head>

 <body>
  <!-- Insertaremos un encabezado (o titulo) y un texto -->
  <h1> Porque diseñar una pagina Web? </h1>
	<p>Le mostramos las razones por las que su empresa debería tener su espacio en Internet.</p>

	<h2>Presencia en la web</h2>
	<p>Internet es uno de los medios de comunicación con mayor crecimiento de la actualidad y se ha convertido en la herramienta más utilizada para buscar todo tipo de información. Es por esto que cada vez más empresas desean tener su propio sitio web y de esta manera poder captar los potenciales clientes que prefieren este medio para buscar información sobre productos o servicios.</p>

	<h2>Atención al público las 24 hs</h2>
	<p>El sitio web de su empresa permanecerá abierto todos los días del año, las 24 hs. del día. Los clientes no tendrán que esperar para buscar la información que necesitan sobre sus productos o servicios, porque pueden acceder a ella cuando y desde donde lo deseen. Esto permite a los clientes tomar una decisión con mayor tranquilidad y antes de hacer una consulta al personal. Por otro lado, su empresa ahorra tiempo en la atención directa al público, porque clientes más decididos realizan consultas concretas, que no requieren de largas muestras o explicaciones.</p>

	<h2>Ampliación de mercados</h2>
	<p>Un sitio web es accesible desde cualquier parte del mundo. Su empresa puede lograr clientes de ciudades en las que quizás no exista una sucursal. En este sentido las posibilidades de expansión son muy importantes y variadas. Actualmente las cadenas</p> o franquicias comerciales aprovechan las ventajas de Internet para buscar inversores dispuestos a instalar nuevas sucursales.

	<h2>Interacción con el cliente</h2>
	<p>Internet brinda múltiples formas de comunicación (e-mail, chat, foros, videos, redes sociales, etc..) que pueden ser aprovechadas por su empresa para mantener un contacto más cercano con sus clientes y para lograr la fidelización de los mismos.</p>

 </body>

</html>

Bueno ya deberías haber probado el código, si aun no lo hiciste recomiendo que lo hagas antes de continuar. Supongo en este punto que sabes que son las etiqueta <head> y <body>. En caso de que no lo sepas volvé a la primera lección, leela y realiza todas las consultas que sean necesarias.

Estaremos de acuerdo que el artículo que creamos en el practico3, no tiene el formato mas lindo o elegante que hemos visto jamas, de hecho es medio feucho… No importa, por el momento tenes que olvidarte de ese detalle y trata de observar lo objetivo de la pagina, ya habrá tiempo de darle formato un poco mas adelante.

Manejo de Texto en XHTML

A continuación listo las etiquetas utilizadas en HTML para contener texto y una breve explicación:

Headers, Titulos o encabezados

Se utilizan para describir titulos principalmente o frases o contenido importante y tienen la siguiente sintaxis:

<h1> texto </h1>:
<h2> texto </h2>:
<h3> texto </h3>:
<h4> texto </h4>:
<h5> texto </h5>:
<h6> texto </h6>:

El mas importante en donde por ejemplo se puede poner el titulo principal de la pagina es el <h1>, un titulo importante pero menos importante que el <h1> es el <h2> y asi hasta el <h6>

Para ver las diferencias entre los encabezados puedes ver el practico4.html

<!-- practico4.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de internet -->

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema-->
  <title>Practico 4</title>
 </head>

 <body>

  <h1>Encabezado h1</h1>
  <h2>Encabezado h2</h2>
  <h3>Encabezado h3</h3>
  <h4>Encabezado h4</h4>
  <h5>Encabezado h5</h5>
  <h6>Encabezado h6</h6>

 </body>

</html>

Parrafos

Hay dos elementos que se utilizan en una pagina web para insertar texto, estos son:

<p> texto </p>: Este elemento es uno de los mas utilizados en las webs, nos permite poner texto y es un elemento de bloque (ya veremos mas adelante que es un elemento de bloque), que lo que hace es colocar texto pero al colocar varios <p> los ubica automáticamente debajo, porque son párrafos diferentes.
<span> texto </span>: Este tambien es un elemento muy utilizado en las webs, nos permite poner texto y es un elemento inline (ya veremos mas adelante que es un elemento de bloque), que lo que hace es colocar texto pero al colocar varios <span> el texto continua digamos que normal. Esta herramienta es muy util por ejemplo para cambiar el color a una parte parcial de un párrafo.

Como siempre incluimos un ejemplo para ver de que se trata:

<!-- practico5.html -> Guardarlo con ese nombre y ejecutarlo con un explorador de internet -->

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Por el momento si no sabes que es esta linea simplemente ignorala, ya volveremos sobre el tema-->
  <title>Practico 5</title>
 </head>

 <body>

<h1>Blog de la Web : Ejemplo Con p</h1>
<p>Este intenta ser un espacio para publicar toda clase de artículos que hagan referencia a la Web y a Internet.</p>
<p>Todo sobre diseño web, programacion y Posicionamiento en los buscadores.</p>

<h1>Blog de la Web : Ejemplo Con span</h1>
<span>Este intenta ser un espacio para publicar toda clase de artículos que hagan referencia a la Web y a Internet.</span>
<span>Todo sobre diseño web, programacion y Posicionamiento en los buscadores.</span>

<h1>Conclusión</h1>
<p> El Span sigue el texto como si fuera el mismo y el p los coloca en párrafos diferentes. Si no te das cuenta, modifica este archivo y colocale textos mas largos y coloca mas párrafos para ir viendo.</p>

 </body>

</html>

Bueno estos elementos que presente aquí son los que generalmente se utilizan para colocar textos y encabezados en las paginas webs y es muy importante que aprendan a utilizarlos de forma correcta, porque esto permite crear paginas webs de forma eficientes, lo que les permitirá tener los beneficios de un correcto armado del HTML.

Tenia pensado incluir aquí los conceptos de CSS y darle formato al texto pero esta lección ya es lo suficientemente larga, por lo que en la próxima entrega cambiaremos de color a los textos, los ordenes, negritas, cursivas, justificaciones, anchos y altos fijos.

Nos vemos! y como siempre ante cualquier duda sobre esta lección, posteala en esta sección así mantenemos ordenado el blog.

Diprox es mi empresa de Diseño Web, si necesitas algun diseño profesional o posicionamiento web no dudes en contactarnos

Siguiente Lección >>

>> Indice de Contenido <<

Entradas Relacionadas: