jueves, 23 de febrero de 2017

Cosas a tener en cuenta al usar el lenguaje HTML

Tutorial de HTML y principalmente su version 5

Cosas a tener en cuenta

No olvides la etiqueta de final

La mayoría de los navegadores mostrara el contenido de los elementos HTML correctamente aun si olvidas la etiqueta de final:

<html>

 <body>
  <p>Este es un párrafo.
  <p>Este es otro párrafo.
 </body>

</html>

El ejemplo de arriba se muestra bien en la mayoría de los navegadores, pero no te confíes en ello.

Nota: omitir la etiqueta de final puede producir resultados o errores inesperados.

Los elementos HTML vacios

Los elementos HTML sin contenido se llaman elementos vacios.

<br> es un elemento vacio sin una etiqueta de cierre (la etiqueta <br> define que se desea un salto de linea).

Los elementos vacios pueden ser “cerrados” en la etiqueta de apertura como se muestra a continuación: <br/>.

HTML5 no requiere que los elementos vacios sean cerrados. Pero si quieres ser más estricto, o si necesitas hacer tu documento legible por analizadores XML, debes cerrar todos los elementos HTML apropiadamente.

Usa etiquetas en letra minúscula

No importa si las etiquetas HTML se escriben con mayúsculas o minúsculas: <P> significa lo mismo que <p>.

El estándar HTML5 no requiere que las etiquetas estén con letra minúscula, pero W3C recomienda que se use letra minúscula en HTML, y lo demanda para los tipos de documento más estrictos como XHTML.

Elementos HTML anidados

Los elementos HTML pueden ser anidados (los elementos pueden contener elementos).

Todos los documentos HTML consisten de elementos HTML anidados.

Este ejemplo contiene cuatro elementos anidados:

<!DOCTYPE html>
<html>

 <body>
  <h1>Mi Primer Encabezado</h1>
  <p>Mi primer párrafo.</p>
 </body>

</html>

Explicando el ejemplo:

  1. El elemento <html> define al documento entero.

    Tiene una etiqueta de inicio <html> y una etiqueta de final </html>.

    El contenido del elemento es otro elemento HTML (el elemento <body>).

    <html>
    
     <body>
      <h1>Mi Primer Encabezado</h1>
      <p>Mi primer párrafo.</p>
     </body>
    
    </html>
    

  2. El elemento <body> define el cuerpo del documento.

    Tiene una etiqueta de inicio <body> y una etiqueta de final </body>.

    El contenido del elemento es, otros dos elementos HTML (<h1> y <p>).

    <body>
     <h1>Mi Primer Encabezado</h1>
     <p>Mi primer párrafo.</p>
    </body>
    

  3. El elemento <h1> define a un encabezado.

    Tiene una etiqueta de inicio <h1> y una etiqueta de final </h1>.

    El contenido del elemento es: Mi Primer Encabezado.

    <h1>Mi Primer Encabezado</h1>
    

  4. El elemento <p> define a un párrafo.

    Tiene una etiqueta de inicio <p> y una etiqueta de final </p>.

    El contenido del elemento es: Mi primer párrafo.

    <p>Mi primer párrafo.</p>
    

Visualizacion

No puedes tener seguridad de cómo se visualizara la pagina.

Pantallas grandes o pequeñas, y ventanas con tamaña modificado crearan diferentes resultados.

Con HTML, no puedes cambiar el resultado añadiendo espacios extras o líneas extras al código HTML.

El navegador removerá cualquier espacio y línea extra cuando despliegue o muestra la pagina:

<p>
Este parrafo
contiene varias lineas
en el codigo fuente,
pero el navegador 
lo ignora.
</p>

<p>
Este parrafo
contiene         varios espacios
en el codigo         fuente,
pero el        navegador 
lo ignora.
</p>

Te mostraremos la solucion mas adelante. Mientras tanto se cuidadoso al escribir tu codigo HTML y evitaras muchos dolores de cabeza. Puedes tambien ir visualizando tu pagina pero no es obligatorio pues adelante resolveremos estos posibles errores de visualizacion

No hay comentarios.:

Publicar un comentario