Diseño de páginas web básico

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

7. Maquetación de textos

Para identificar los distintos tipos de textos que nos podemos encontrar en una página web, tenemos dos etiquetas principales:

  1. <h> para indicar que es un titular o título. Tenemos 6 tamaños diferentes: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Siendo el h1 el de mayor tamaño y el 6 el de menor. Normalmente h1 solo colocamos uno en la página y sera el que toman los buscadores como referencia para saber el contenido de la página.
  2. <p> para indicar que es un parrafo.

 

Hay que tener presente que estas etiquetas colocan automaticamente un salto de línea antes y otro despues de la etiqueta para separar el contenido que hay entre ellas.

salto de línea

<h1> Titular</h1>

salto de línea

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

salto de línea

<p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>

salto de línea

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto  

Además de estas dos etiquetas, tenemos:

<br /> Coloca un salto de línea o retorno de carro

<!-- comentario --> Contienen textos que no se ven en la página pero nos sirven de guia a los programadores para saber que se esta haciendo. 

<center></center> Centra el contenido que hay entre estas dos etiquetas.

Para darle formato al texto tenemos:

<strong> marca el texto en negrita </strong>

<b> También pone el texto en negrita </b>

<i> Coloca el texto en cursiva o itálica </i>

<em> Enfatiza el texto y se muestra en cursiva </em>

<sup> Pone el texto como superíndice </sup>

<sub> Pone el texto como subíndice </sub>

 <dfn> Introduce la definición de un término </dfn>

<code> Introduce código </code>

<samp> El texto es un ejemplo de código </samp>

<kbd> Texto propio de una acción del teclado </kbd>

<var> Define que el texto es una variable </var>

<cite> Introduce una cita </cite>

<blockquote> Introduce un sangrado igual que cite, pero no pone el texto en cursiva </blockquote>

<pre> Escribe el texto tal y como lo escribimos en el código, con sus espacios y saltos de línea </pre>. Hay que tener en cuenta que cuando escribimos código html los espacios no se tienen en cuenta, solo el primero. grácias a esta etiqueta se escribe igual. Por ejemplo

                           <p>                                          hola

soy                                      jose y estoy                          en casa.</p>

Apareceria en la página escrito como:

hola soy jose y estoy en casa.

Porque se ignorarian todos los espacios menos el primero y los saltos de línea los cuenta como un espacio, no como salto de línea.

<font> Nos permite modificar tres propiedades de la letra</font>

  • color: Establece el color del texto que hay entre las etiquetas
  • size: Establece el tamaño del texto que hay entre las etiquetas
  • face: Establece la tipografía del texto que hay entre las etiquetas.

 

como ejemplo:

<font color="#fff" size="18" face="Arial"> texto texto texto texto </font>

Task Discussion


  • Telemako   June 14, 2012, 5:08 a.m.

    Hay algunas etiquetas que faltan, como por ejemplo:

    <tt></tt> Estilo de texto de teletipo

    ¿Estan descatalogadas del estandar?

    Saludos.

  • jose francisco   June 14, 2012, 1:50 p.m.
    In Reply To:   Telemako   June 14, 2012, 5:08 a.m.

     

    No la he colocado ya que no es muy utilizada y desaparece ahora con html5. Si queremos conseguir ese efecto tenemos que utilizar las css. Con html5 desaparecen varias etiquetas, siendo sustituidas por otras o por estilos css. Algúnas de las que desaparecen son:
     
    <acronym>
     
    Se usaba para describir acrónimos (por ejemplo NASA) en HTML4, sin embargo ahora deberemos usar la etiqueta <abbr>.
     
    <applet>
     
    Esta etiqueta se usaba para introducir applets dentro de la web, sin embargo, ahora debemos usar <object>.
     
    <basefont>
     
    Definía características de la fuente por defecto: color, tamaño y familia; para todo el documento. Esto mismo podemos hacerlo vía CSS.
     
    <big>
     
    Como su nombre indica, servía para hacer el texto más grande, con CSS podemos hacer esto mismo de varias formas.
     
    <center>
     
    Centraba horizontalmente el contenido, un remedio rápido para un problema frecuente. La solución correcta usar CSS.
     
    <dir>
     
    Etiqueta para definir listados de directorios, ha dejado de tener sentido como tal y en su lugar debemos usar <ul>.
     
    <font>
     
    Para especificar la fuente de un texto, incluye el estilo dentro del contenido, por lo que debemos evitarla a toda costa. Su labor la hacemos usando CSS.
     
    <frame>
     
    En los tiempos en que no existía AJAX, los frames eran una de las mejores formas de hacer recargas parciales de las páginas. Esta opción desaparece en HTML5. Si habéis trabajado alguna vez con ellos, aparte de antiestéticos os habrán dado quebraderos de cabeza de todo tipo, mucho mejor recargar div de forma asíncrona.
     
    <frameset>
     
    Relacionada con la anterior, era parte del funcionamiento de los frames.
     
    <noframes>
     
    También relacionada con las dos anteriores.
     
    <strike>
     
    Etiqueta muy poco utilizada, servía para hacer justo esto con el texto, ahora usamos <del> en su lugar.
     
    <tt>
     
    Usada para definir texto de teletipos, ahora usamos CSS.
     
    <u>
     
    Utilizado para indicar texto subrayado, ahora usamos CSS y más concretamente: text-decoration:underline.
     
    Espero te ayude y gracias por seguir el curso.
  • Gonzalo   April 19, 2012, 11:17 a.m.

    Orale hay muchas etiquetas las cuales ni conocia, ahora solo falta aprender a usarlas,  excelente articulo. 

     

    saludos!!

  • jose francisco   April 20, 2012, 9:32 a.m.
    In Reply To:   Gonzalo   April 19, 2012, 11:17 a.m.

    No le hagas mucho caso a estas etiquetas, las he puesto a modo informativo, solo para que sepais que existen. Después verás que a la hora de maquetar textos vamos a utilizar las reglas css para hacer todo esto.

  • Yob   April 18, 2012, 9:43 a.m.

    wooow! hay algunas etiquetas html5 que no conocia y que parecen ser muy utiles, la que más me gustó fue la de <pre> que respeta el espaciado que le demos el texto tal y como lo hariamos en word o en otra app para redactar

  • jose francisco   April 18, 2012, 11:32 a.m.
    In Reply To:   Yob   April 18, 2012, 9:43 a.m.

    Todas las etiquetas que muestro aqui no pertenecen en si al html5, sino al xhtml. Una vez afianzemos los conocimientos de xhtml si veremos algo de html5. Empezando a utilizar las etiquetas semanticas como:

    header, nav, section, footer, etc... para definir las partes de la pagina en vez de con div. 

    Utilización de todas las etiquetas creadas para formularios, ampliandonos las posibilidades y la utilización de las canvas, que es practiamente un lenguaje basante completo.

  • Yob   April 20, 2012, 9:32 a.m.
    In Reply To:   jose francisco   April 18, 2012, 11:32 a.m.

    ¡oooh!, tanto tiempo usando escribiendo en html y no sabia de la existencia de algunas de estas etiquetas.

    Gracias por la aclaracion!
    Saludos

  • jose francisco   April 20, 2012, 10:02 a.m.
    In Reply To:   Yob   April 20, 2012, 9:32 a.m.

    de nada

  • Telemako   June 18, 2012, 11:18 a.m.
    In Reply To:   jose francisco   April 20, 2012, 10:02 a.m.

    Gracias, es un placer seguir tu curso, además está muy bien desarrollado.

  • jose francisco   June 18, 2012, 2:30 p.m.
    In Reply To:   Telemako   June 18, 2012, 11:18 a.m.

    gracias