Insertar Texto y darle formato – Tutor HTML / CSS

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:

 

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

 

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:

 

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 <<

19 comments

  1. Mirna

    Esta padre la página, solo tengo una duda, en la primera lección mencionas que en el título le puedo decir al navegador el idioma que estamos utilizando, pero no mencionas cómo, me puedes ayudar?? quiero saber cómo le hago para que aparezcan los acentos

  2. dacho

    |Author

    Hola Mirna, en realidad lo que uno le indica al navegador es que codificacion de caracteres usar. Es decir por ejemplo si utilizas una codificacion para ingles y colocas letras acentuadas o la ñ, al estas letras no pertenecer al idioma, dependiendo de muchas cosas es muy probable que en vez de aparecer lo que buscas aparezcan letras raras.

    Lo que se debe hacer es en primera instancia elegir una codificacion de caracteres. Con soporte para español las mas comunes son UTF-8 y ISO-8895.

    En general los dos serviran, pero por cuestiones de espacio voy a explicarte solo la de ISO-8895 ¿como se elije y como se utiliza esta codificacion?

    Para indicar esto tienes que colocar un metatag asi:

    En el encabezado de la pagina (entre head y /head)

    Con esto ya le informas al navegador que estas utilizando ISO-8895.

    Luego tienes que tomarte la tarea de codificar la pagina en iso-8895, ¿como?

    Si quieres una ñ entonces en vez de poner ñ en el codigo, colocas &ntilde;

    Si queres una á entonces en vez de poner á pones &aacute;

    Si queres una é entonces en vez de poner é pones &eacute;

    Adivina como seria la í ( &iacute; )

    Aca te dejo un enlace a una tabla de caracteres ISO-8895:

    http://www.ascii.cl/es/codigos-html.htm

    Por ejemplo si queres escribir un parrafo:

    Espero haber sido claro cualquier cosa pregunta de nuevo :)

  3. Mirna

    Por supuesto que fuiste claro, MUCHAS GRACIAS!!!
    Seguimos en contacto, porque voy a seguir tu tutorial hasta el final, espero no tener mas dudas pero si sí, te escribo, saludos

  4. Hola Dacho:

    Soy nhuevo en estas lides y estoy intentando construir un Web que en futuro pueda traducir a otros idiomas con facilidad sin grnades problemas :-)
    Me gustaria asber si se puede crear un documento XHTML que contenga todos los textos de la página (con los correspondientes encabezados) para despues, desde las páginas en los que van destinados, insertar los párrafos qiue correspondan. Mi idea seria un documento con esta apariencia (no pongo marcas XHTML por que no te quiero liar)

    asdasdasdasfsdfasdfadsgadfgadfgdfgdfgsdfgsdfgsfdgsfdgsfdgsfdggsfgsdfg
    asdasdasdasfsdfasdfadsgadfgadfgdfgdfgsdfgsdfgsfdgsfdgsfdgsfdggsfgsdfg

    asdasdasdasfsdfasdfadsgadfgadfgdfgdfgsdfgsdfgsfdgsfdgsfdgsfdggsfgsdfg
    asdasdasdasfsdfasdfadsgadfgadfgdfgdfgsdfgsdfgsfdgsfdgsfdgsfdggsfgsdfg

    Si esto fuera posible podria tener el texto general del Web en un único doumento del que luego se irian insertando los párrafos en las correspondientes páginas.

    Gracias por adelantado cualquiera que sea la respuesta,

    Jorge

  5. dacho

    |Author

    Hola @Jorge, No logro comprender exactamente que es lo que necesitas… Si lo que queres es insertar texto dependiendo por ejemplo del idioma que elija el usuario, entonces necesitas no solo html, sino que además necesitaras PHP. Ojo también se puede hacer solo en HTML pero seria mas trabajo.

    También se puede llegar a hacer con javascript, pero no seria lo mas conveniente por temas de que seria cargar la pagina de información que no se va a ver.

    Te pido que especifiques mas claro lo que necesitas a ver si te puedo ayudar mejor!…

    Saludoss!

  6. dacho

    |Author

    Hola Ale, Las diferencia entre span y p, básicamente es que el span es un elemento en linea y el elemento p es un elemento en bloque.

    Los elementos en linea hacen que no se modifique el orden del texto por ejemplo (si es que es texto lo que queremos hacer), por ejemplo un enlace.

    Esto es un elemento en linea (un enlace)

    Fíjate que no se hace un “enter” o retorno de carro o un nuevo párrafo.

    En cambio el elemento p si te genera que cuando lo abrimos se inserta un nuevo párrafo.

    En general los elementos en bloque hacen esto, es decir se colocan en una nueva linea.

    espero haber sido claro cualquier cosa volve a consultar y lo vemos en un ejemplo!

    Saludos!

  7. jose i lopez

    Hola amigo tengo poco en esto y estoy aprendiendo poco a poco ok Vale sigue asi bien esplicado y que dios te bendiga amigo.tu amigo Jose

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">