Curso HTML #03 – Qué son las Etiquetas y Estructura HTML Básica

Todos los documentos HTML se basan en etiquetas, las cuales tienen varias utilidades y la manera de escribirlas siempre es la misma. Una etiqueta puede ser utilizada para definir la estructura interna del documento HTML, y, por lo tanto, la estructura de la página web, pero también puede ser utilizada para insertar elementos, así como imágenes, vídeos o incluso para dar formato o agrupar el texto.

1.jpg

Las etiquetas suelen estar formadas por dos elementos: la etiqueta de apertura, y la etiqueta de cierre.

Cada etiqueta, ya sea estructural o sea un elemento, tiene un nombre, por ejemplo, la etiqueta que sirve para insertar una imagen se llama “img”.

El nombre de las etiquetas, se escribe entre corchetes angulares (< y >) y en minúsculas. El nombre de las etiquetas siempre está compuesto por letras, excluyendo números, símbolos o espacios.

Cuando insertamos una etiqueta, escribimos la etiqueta de apertura: “<etiqueta>”, a continuación, su contenido, así como texto u otras etiquetas y finalmente, la etiqueta de cierre, la cual se escribe igual que la etiqueta de apertura, pero con una barra o slash antes de su nombre: “</etiqueta>”.

Cuando se trata de una etiqueta que no tiene contenido, como, por ejemplo, la etiqueta “img”, entonces no se escribe etiqueta de cierre: “<img>”.

En cambio, si la etiqueta sí tiene contenido, entonces deberá escribirse tanto la etiqueta de apertura como la de cierre, por ejemplo, en el caso de una etiqueta de enlace o hipervínculo: “<a>Enlace</a>”.

2.jpg

Las etiquetas, además, pueden tener atributos o propiedades, las cuales son definidas en la etiqueta de apertura. Las propiedades suelen escribirse con un nombre clave y a continuación, su valor.

Por ejemplo:

<img src=”ruta de la imagen”>

En este caso, estaríamos definiendo cuál es la ruta de la imagen en cuestión.

Cabe destacar que una misma etiqueta puede contener más de una propiedad o atributo.

Por ejemplo:

<img src=”ruta de la imagen” width=”45” height=”45”>

En este caso, estaríamos definiendo, no solamente la ruta de la imagen, sino dos propiedades más.

Cuando un atributo o propiedad no tiene valor pero aún así, está declarada, entonces no se escribe valor ninguno, simplemente el nombre del atributo.

Por ejemplo:

<button disabled>Texto del Botón</button>

En este caso, estaríamos insertando un botón, pero este está desactivado, ya que tiene la propiedad “disabled” declarada.

Estructura principal

3.png

Todos los documentos HTML tienen una estructura principal, la cual es la misma para cualquier documento HTML.

  • La primera etiqueta, llamada “<!DOCTYPE html>” sirve para definir la versión de HTML a utilizar, en este caso, sería HTML5. Esta etiqueta es recomendable utilizarla, al principio del documento.
  • La siguiente etiqueta llamada “<html>” sirve para iniciar el documento y para finalizarlo, pues todo el contenido del documento HTML, irá dentro de esta etiqueta.
  • La etiqueta “<head>” sirve como etiqueta contenedora de todas las etiquetas para definir las propiedades del documento, así como su título, descripción, autor, codificación y otras meta-propiedades. Cabe destacar que cualquier texto que insertemos dentro de esta etiqueta, no será visible.
  • La etiqueta “<body>” sirve como etiqueta contenedora de todas aquellas etiquetas y contenido que queramos insertar en nuestro documento HTML, y, por lo tanto, en nuestra página web. Así como el texto, párrafos, imágenes, enlaces, formularios, etc.

Por ejemplo:

<!DOCTYPE html>
<html>
  <head>
     <title>La web de Karla</title>
  </head>
  <body>
     <h1>Esto es un título</h1>
     <p>Esto es un párrafo</p>
  </body>
</html>

Las otras etiquetas que puedes apreciar en la imagen, las explicaré más adelante, pues las he utilizado como ejemplo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.