Introducción a HTML

HTML es el lenguaje con el que se confeccionan las páginas web y los libros electrónicos (e-books). Su estructura está basada en elementos, integrados por etiquetas (tags) y el contenido que está encerrado entre dichas etiquetas. Las etiquetas están contenidas entre los símbolos de menor y mayor (paréntesis triangulares), <>. Todo lo que está contenido entre la etiqueta de comienzo y la etiqueta de cierre constituye un elemento HTML.

La estructura general de un elemento HTML es:

<etiqueta>Contenido</etiqueta>

HTMLintro-1
Estructura de un elemento HTML

Las etiquetas se pueden considerar como contenedores de contenidos (containers), aunque algunas etiquetas han sido creadas para aplicar formato a los contenidos que se encuentran delimitadas por ellas.

Partes de un documento HTML

La etiqueta que engloba todo el contenido de un documento HTML es <html>——–</html>

Dentro de este elemento se colocarán las demás etiquetas. En todo documento hay dos partes:

<head>——–</head> donde se coloca información para ser utilizada por el navegador, pero que no será mostrada en la página, en esta sección se puede colocar información como el título (que aparece en la pestaña del navegador), autor, lenguaje, tipo de codificación y adicionalmente se puede incluir hojas de estilos en cascada, CSS.

<body>——-</body> donde se colocan los contenidos que aparecerán en la página, flanqueados por las diferentes etiquetas.

Algunos elementos básicos HTML se muestran en la siguiente tabla

 

Etiqueta de Apertura Contenido Etiqueta de Cierre
<html> Contenedor de todo el documento html, incluye las parte del <head> y del <body> </html>
<head> Contenedor de metadatos y hojas de estilo en cascada (CSS) </head>
<body> Contenedor de la información que aparece en la pagina </body>
<h1> Titulo nivel 1 </h1>
<h2> Titulo nivel 2 </h2>
<h3> Titulo nivel 3 </h3>
<h4> Titulo nivel 4 </h4>
<h5> Titulo nivel 5 </h5>
<h6> Titulo nivel 6 </h6>
<p> Contenedor de párrafo </p>

 

Con esta información podemos crear la estructura básica de un documento html

HTMLintro-4
Estructura básica de un documento HTML

 

 

Este código produce la siguiente salida.

HTMLintro-3
Pagina con los elementos HTML que han sido creados con el editor de texto.

Para introducir el código html podemos utilizar cualquier editor de texto. En Windows podemos utilizar notepad, sin embargo, existen otros editores que podrían ser utilizados tales como el “notepad ++” y el “CoffeCup HTML editor”.

El notepad guarda los archivos con la extensión txt por defecto, cuando guardemos nuestro archivo con el documento html, debemos colocar la extensión html o htm. Para ver el resultado del documento html debemos abrirlo con algún navegador, el cual procesara el código creado con el editor de texto (notepad o cualquier otro editor).

 

Referencias Bibliográficas

Alvarez, R. (2012). Manual de HTML de Desarrollo Web.

W3C. (2015). W3C School. Obtenido de http://www.w3schools.com/html/html_intro.asp

 

Anuncios

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 )

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 )

Google+ photo

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

Conectando a %s