HTML - Elmentos

Los elementos HTML tienen muchos rangos. Todo lo que ves: párrafos, logo, baner, los enlaces de navegación del lado izquierdo y derecho y todos son elementos de esta página.

Un elemento tiene tres partes: Una etiqueta de abertura, el contenido del elemento y una etiqueta de cierre.

  • <p> - la etiqueta que abre un párrafo
  • Contenido del elemento - el párrafo en sí
  • </p> - la etiqueta de cierre

Todas las páginas web tendrán al menos los elementos base: html, head, title y body.

El elemento html

Un documento HTML siempre empezará y terminará con una etiqueta <html> y su respectivo </html>. Esta es la estructura estándar de un documento HTML.

Por favor abre un bloc de notas y copia el siguiente código:

html<html>
</html>

Guarda el documento desde "Archivo/Guardar como". Selecciona "Todos los archivos" y nombra el nuevo archivo como "index.html". Dale "Guardar". Ahora abre el archivo en un navegador de manera que puedas actualizar la página (F5).

Si hiciste todo correctamente podrás ver tu página web, en blanco!

El elemento head

El elemento head es el que va a continuación. Mientras lo pongas entre html y body todo debería ir bien. Head no tiene una función evidente, así que hablaremos de este aspecto en los siguientes tutoriales. Sin embargo quiero mencionar que <head> puede ofrecerle información muy útil al navegador. Aquí puedes introducir otros códigos como Javascript o CSS.

Por el momento dejaremos así con la excepción de que introducimos el elemento desde la lista, pero primero observemos todo sin él:

html<html>
<head>
</head>
</html>

Si guardas el documento e intentas actualizar la página web desde el navegador, no veras ninguna diferencia. Ten un poco de paciencia, porque a continuación estudiaremos algunos elementos visibles.

El elemento title

Para que todo salga bien tendrás que poner la etiqueta title dentro de la etiqueta head. Lo que escribas dentro de estas dos etiquetas de title ( <title> y </title<) será visto como el nombre del navegador, normalmente en la parte superior derecha. A continuación tenemos el código HTML

:
html<html>
	<head>
		<title> My primera página web!</title>
	</head>
</html>

Guarda el archivo y abrelo en tu navegador. Podrás ver el título en la pestaña del navegador en la parte superior izquierda (en la mayoría de los navegadores) o derecha (en algunos).

Puedes ponerle el nombre que quieras, solo recuerda que los nombres descriptivos son los más fáciles de encontrar después.

El elemento body

El elemento body es el que define el comienzo del contenido de la página en sí misma (títulos, párrafos, fotos, música y todo lo demás). Como puedes ver en el menú de la izquierda, tratamos uno por uno, todos estos elementos del contenido.

Por ahora lo que necesitas recordar es que body abarca todo el contenido de la página.

html<html>
	<head>
		<title> Mi primera página web!</title>
	</head>

	<body>
		Hola chicos! Aquí pondremos el contenido un poco mas tarde!
	</body>
</html>

Ahora guarda y actualiza tu pagina HTML. Deberías poder ver este mensaje en tu navegador. Pero esto es solo el comiendo, pasa al siguiente tutorial para que aprendas sobre los siguientes elementos de una pagina html.