Sintaxis de un elemento HTML
Los elementos definen todo aquello que queremos incluir dentro de nuestra página.Para que un elemento funcione de la manera esperada, debemos escribirlo respetando la estructura sintáctica que le corresponde.
Sintaxis
Todos los elementos inician con una etiqueta conocida como "etiqueta de apertura" y, salvo las excepciones (de las que ya hablaremos) finalizan con otra etiqueta conocida como "etiqueta de cierre".La etiqueta de apertura de todo elemento lleva el nombre del mismo, mientras que la etiqueta de cierre es igual que la de apertura con el agregado de una barra inclinada / ante puesta al nombre.
Por su parte, las etiquetas se componen de un par de corchetes angulares < > que, en su interior, contienen el nombre y los atributos que la definen.
Los atributos se declaran (escriben) dentro de la etiqueta de apertura y definen el modo en que dicho elemento se verá o comportará.
El material incluido entre las etiquetas de apertura cierre de un elemento se conoce como "contenido" y constituye aquello que queremos controlar o mostrar.
En esta entrada recordamos los elementos básicos para escribir una página HTML
 |
| Clic en el cuadro para agrandar |
El elemento HTML:
El primer elemento (padre de todos los demás es el elemento HTML y su comienzo se declara con la etiqueta <html> <!--Empieza el documento HTML -->La cabecera:
El siguiente
elemento que debe declararse dentro del HTML es el elemento cabecera que inicia con el tag <head> <!--Empieza
el encabezado -->
El título:
Dentro del
elemento cabecera se alojan varios elementos más de los cuales, por el momento,
solo nos vamos a ocupar del elemento título que se declara con el tag de
apertura <title>Escribir HTML
básico</title><!-- Título del documento -->
Una vez
declarado todo el contenido de la cabecera, debe cerrarse el head con el tag de
cierre </head><!--Termina el encabezado -->
El body (cuerpo):
Acá es donde
empieza la parte visible del documento. Todo lo que vayamos a incluir en
nuestra página para ser accedido por los visitantes va a estar alojado dentro del elemento “body”
que se declara con su tag de apertura
<body><!--Empieza
el cuerpo del documento. -->
El Div:
Cuando
queremos organizar varios elementos con el fin de alinearlos o tener cierto
grado de control sobre una parte del documento se suele utilizar el elemento “Div”
el cual se encarga de dividir el documento en sectores independientes unos de
otros. El elemento Div se declara con su tag de apertura
<div
align="center"> <!--Empieza un Div. Se usa para dividir la página en bloques. En
este caso para centrar el contenido del Div-->
Los encabezados (headers):
A la hora de
colocar contenidos dentro de nuestra página, es importante contar con un
esquema de jerarquía para los títulos. El esquema de encabezados (headers) es
el elemento utilizado para esto, contando con una escala jerárquica para títulos y subtítulos con valores que van
desde h1 hasta h6 siendo h1 la mayor y h6 la de menor tamaño e importancia. El
elemento encabezado se declara entre le par de tags de apertura y cierre con la
letra h + el número correspondiente al nivel adjudicado.
<h1>Esto es un encabezado tipo título grande</h1> <!--Título con encabezado de primer nivel -->
<h2>Este es un encabezado más chico</h2> <!--Subtítulo con encabezado de segundo nivel
-->
</div><!--Final
del Div -->
<h3>Este es un encabezado más chico</h3>
<!-- Subtítulo con encabezado de tercer nivel -->
Los textos y su estructuración:
Los párrafos:
Los textos
incluidos en el body del documento deben pertenecer a algún tipo de bloque. Si
escribo un texto lo debo incluir dentro de un encabezado “h”, dentro de un ítem
de lista “li”, o dentro de un párrafo “p”.
Escribir
texto suelto “no es aconsejable” en la
actualidad.
En adelante,
vamos a procurar incluir todo texto dentro de un elemento contenedor del tipo bloque,
por ejemplo, como ya lo dije, dentro de un párrafo “p”.
Ejemplo de párrafo:
<p><!-- empieza un párrafo -->
Los elementos son la estructura básica del HTML. Un elemento comienza con una etiqueta de apertura, desarrolla un contenido y finaliza con una etiqueta de cierre. Son excepción a esta regla unos pocos elementos que no tienen contenido ni utilizan etiqueta de cierre y se los conoce con el nombre de "elementos vacios".
Son ejemplo de ello <br /> (genera un salto de línea) y <hr /> (inserta una línea horizontal. Como las de ésta página) .
Son ejemplo de ello <br /> (genera un salto de línea) y <hr /> (inserta una línea horizontal. Como las de ésta página) .
</p> <!-- termina el párrafo -->
Las listas:
Cuando
queremos enumerar elementos, lo ideal es utilizar el elemento lista en alguna
de sus variables (lista ordenada, desordenada, o de definiciones)
El elemento
lista se declara con sus tag de apertura y de cierre.
Los ítems de
la lista se declaran siempre entre los tags de apertura y cierre en forma “individual”
es decir que cada ítem tiene un par de tags (uno de apertura <li> y uno de
cierre, </li> Hay que tener presente que, en la actualidad, es obligatorio
declarar el tag de cierre de cada ítem de la lista.
<ul><!--Empieza
una lista desordenada -->
<li>Primer ítem de la lista.</li>
<!-- Primer ítem -->
<li>Segundo ítem </li><!-- Segundo ítem
-->
<li>Tercer ítem </li><!--
Tercer ítem -->
<li>Cuarto ítem </li><!--
Cuarto ítem -->
</ul><!--
fin de la lista desordenada-->
El tag de
cierre declara el final de esta lista.
La línea horizontal:
El elemento
línea horizontal pertenece a las excepciones llamadas elementos vacios ya que
no tiene contenido ni tag de cierre siendo su antigua declaración <hr> y
la actual y correcta
<hr />
<!-- línea horizontal -->
No debemos olvidar
cerrar cada elemento con su correspondiente tag.
Una vez completado
el total del contenido de cuerpo de la página procedemos a cerrar el body con
su tag de cierre.
</body>
<!--Termina el cuerpo del documento HTML -->
Y por último, cerramos
el html.
</html>
<!--Termina el documento HTML -->
Fin del documento
Fin del documento
Algo más
 |
| Clic para agrandar |
No hay comentarios:
Publicar un comentario