Leccion 3: Etiquetas y Caracteres Especiales

Las etiquetas vienen en dos variedades: a nivel de bloque de elementos, que marca grandes secciones o bloques, en su documento, y en línea de elementos, que son los pequeños trozos, por lo general contienen una sola línea.

El navegador web pone nuevas líneas (creo Enter en el teclado) alrededor de los elementos a nivel de bloque para que aparezcan en su propia línea.

La Siguente fuente:

<p>p elemento </p><div>div elemento </div>
<section>section elemento</section>
<b>b elemento </b><i>i element </i>
<span>span elemento </span><code>code elemento </code>

Representa la siguiente manera:

p element

div element
section element
b element i element span element code element

Observe que el nivel de los elementos de bloque hacen su propia línea (con espacio adicionales debajo de los elementos p), mientras que los elementos de línea son todos que estan en la misma línea.

En versiones anteriores de HTML, la distinción entre el nivel de bloque y elementos en línea era una parte firme del lenguaje HTML, junto con una regla que los elementos en línea se adjunta dentro de un elemento a nivel de bloque que sintácticamente es válida.

Con HTML 5, esta distinción es muy relajado, y es posible utilizar CSS para convertir una lista dada a cualquier nivel de bloque o en línea.

Elementos a nivel de bloques

Éstos son algunos de los más comunes (y más útiles) con elementos de comportamiento por defecto a nivel de bloque:

<p></p>
Párrafo. Probablemente, la etiqueta más común que vaya utilizar, se marca el comienzo y el final de un párrafo del texto.
<pre></pre>
Texto preformateado. Esta etiqueta es buena para los ejemplos de código de fuente.
<div></div>
Nivel de bloque de división lógica. Sin atributos por defecto.
<h1></h1>...<h6></h6>
Todas las etiquetas de título son las etiquetas a nivel de bloque.

Los siguientes elementos nuevos en HTML 5:

<header></header>
Marcas de la parte superior, o encabezado, de una página web.
<footer></footer>
Marcas de la parte inferior, o pie de página, de una página web.
<nav></nav>
Se utiliza para marcar una sección de exploración.
<section></section>
Se utiliza para incluir otros elementos que componen una sección de una página web.

Elementos en línea

Éstos son algunos de los elementos en línea más comunes junto con sus usos y atributos por defecto:

<strong></strong>
Se utiliza para el texto que desea resaltar.
<b></b>
El texto en negrita.
<em></em>
Hace énfasis en el texto codificado.
<i></i>
El texto en cursiva
<q></q>
Marca el comienzo y el final de una cita.
<code></code>
Indica que el texto adjunto es el código fuente.
<kbd></kbd>
Indica el texto adjunto que es introducido por el usuario desde un teclado.
<sup></sup>
Encierra el texto de superíndice.
<sub></sub>
Encierra el texto de subíndice.
<a></a>
Establece un ancla que se utiliza para crear un enlace o un marcador dentro de un documento.
(see Lección 6).
<span></span>
Línea de división lógica. Sin atributos por defecto.

Elementos de Objeto

Estas tres etiquetas son especiales, porque insertan objetos en lugar de encerrar. Dado que no hay nada que contenga, no tienen una lista de cierre:

<br>
Salto de línea. Esta lista obliga a una línea a retornar.
<img>
Lista de imagen. Se utiliza para mostrar una imagen. (see Lección 7).
<hr>
Regla horizontal. Coloca una linea horizontal a través de la página.

Caracteres especiales

Puesto que <, >, y & tienen un significado especial en HTML, no se pueden utilizar para representarse a sí mismas en un documento HTML. Cuando usted desea utilizarlos, literalmente, (como en los ejemplos de código HTML), tiene que marcarlos con códigos especiales:

MARK-UP RENDER
&lt;<
&gt;>
&amp;&
&nbsp;espacio de no separación

El marcado de un ejemplo como este:

&lt;h2&gt;Uso de caracteres especiales a la fuente del marcado HTML&lt;/h2&gt;
&lt;p&gt;
La fuente del marcado HTML requiere de caracteres especiales para reemplazar las apariciones de  &lt;, &gt;, and &amp;.
&lt;/p&gt;

No es bonito, pero funciona

Ejercicios:

Copia pagina_basica.html a una página llamada etiquetas.html y haz lo siguiente en el nuevo documento:

  1. Establecer el título y un título de nivel superior (<h1></h1>) a Etiquetas.
  2. Copia y pega el siguiente texto entre <pre></pre>etiquetas: 
     Este             texto

         se           extiende         por      varios
    líneas

                      y    tiene     un         montón
   de          extra              

 espacio en      blanco.
    Describe lo que ves. A continuación, reemplace las listas <pre> con las etiquetas <p> y vuelva a recargar la página en su navegador. ¿Qué sucede?
  3. Prueve las dos <div></div> y <span></span> en el documento. ¿Qué parece que hay qu e hacer?
  4. Use cada uno de los listas restantes de esta lección en su página. Escriba las etiquetas que utiliza en un bloc de notas junto con una descripción de lo que cada uno de ellos hace para que el texto encierre.
  5. Revise su página con el W3C Markup Validation Service. Si su página tiene errores de sintacis, debe de corregirlos.
  6. Crear un ejemplo de código fuente HTML de la página. Usted tendrá que utilizar los caracteres especiales para hacer esto.