Bueno, ahora ya sabemos lo que es una etiqueta y sabemos usar las más básicas, pero claro, hay más. Voy a darle un repaso a otras que también son útiles:

La etiqueta <p>:


Es una etiqueta que sirve para separar unos párrafos de otros. Como las otras, no es muy difícil de usar. Este es un ejemplo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis commodo accumsan. Nullam rutrum mattis quam at pulvinar. Fusce id venenatis quam. Morbi eleifend turpis in sapien pretium at porta tortor rutrum. Nunc tellus ante, venenatis vulputate eleifend eget, tempus eget enim. Nam eu leo sem. Vivamus dictum rhoncus erat. Sed consequat ante vel purus venenatis porttitor. Fusce sagittis ligula dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt, arcu at semper scelerisque, magna tortor tempor risus, at faucibus mi est ac arcu. Vivamus velit nulla, suscipit sed varius quis, vestibulum id nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

La etiqueta  <div>:


Es una muy utilizada, y sirve para hacer una división en la página web (como hacer un bloque ). Su mayor utilidad es la de poder dar estilos a todo el contenido del interior. Por ejemplo, este es el div que uso para las páginas de mi blog (los botones de arriba a la izquierda):

<div class='pagina-blog'>
<div class='normal' id='home'>
<a href='http://emiliocobos.net'>Página Principal</a>
</div>

<div class='normal' id='opina'>
<a href='http://emiliocobos.net/p/que-te-ha-parecido-el-blog.html'>Opina y sugiere</a>
</div>

<div class='normal' id='entradascmc'>
<a href='http://emiliocobos.net/search/label/CMC'>Entradas CMC</a>
</div>

<div class='normal' id='entradaslit'>
<a href='http://emiliocobos.net/search/label/Literatura'>Literatura</a>
</div>

<div class='destacada' id='seguir'>
<a href='http://emiliocobos.net/p/diferentes-formas-de-seguir-este-blog.html'>Sígueme</a>
</div>
</div>

¿Algunas cosas de aquí ya las conocemos, verdad? Como la etiqueta <a>. Pero no sabemos lo que son esos dos atributos: ‘id’ y ‘class’.

Los atributos ‘id’ y ‘class’:


Pasa empezar, deciros que estos atributos son prácticamente universales (las podéis usar en casi todas las etiquetas).

Luego, deciros para qué sirven (aunque tal vez no tengan mucha utilidad si no sabéis CSS, pero todo llegará): Ambos sirven para darles estilo a los objetos, mediante CSS (no os preocupéis, no voy a hablar más sobre el todavía). La diferencia es que una clase (‘class’) vale para varios objetos (fijaros en la clase ‘normal’ del ejemplo de arriba), mientras que una ‘id’ vale para uno solo.

Visto así parece que es más útil una clase, pero esto no es así. El ‘id’ identifica al objeto, y permite usarlo de varias maneras: en javascript facilita mucho, en enlaces, etc.

Por ejemplo: Haced click en el enlace ‘etiqueta <a>‘ y a ‘atributos‘. ¿No veis nada raro en la barra de direcciones?

Sí, es esa almohadilla seguida de unas letras. He utilizado la ‘id’ para poder llevaros a la parte de la página (en este caso el título de la sección)  que coincide con el ‘id’. Este es uno de los usos más básicos que se le puede dar.

Bueno, creo que por hoy vale. Ya sé que esto al principio parece un rollo, pero para poder hacer efectos chulos hay que saber esto.

Como siempre, cualquier duda que tengáis, por tonta que os parezca, si me he expresado mal, he avanzado demasiado, etc. decídmelo, y estaré encantado de ayudaros.

Un pensamiento en “Cosas de utilidad en blogger: Etiquetas (parte 2) y atributos

  1. Imagen de fernandofernando el dijo:

    Hola emilio Cobos Álvarez, buen post, una inquietud con estas etiquetas se pueden ocultar y mostrar diferentes campos, si estoy haciendo una encuesta y cada pregunta corresponde a un div, y esta esta relacionado con flujos,
    si responde pregunta 1 opcion A pase a 3
    si responde pregunta 1 Opcion B pase a 4,
    si inicialmente le di opcion A pasa a 3 y digita valor, pero ahora quiero corregir y decirle que Opcion B pase a 4
    lo hago el flujo correctamente y muestra y oculta las preguntas respectivamente, pero al momento de guardar los datos en la base de datos también ,e guarda el flujo que corregi es decir la preggunta 3. Como hago para No enviar datos a la base de datos de divs que no son visibles.
    CORDIALMENTE
    FERNANDO

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.