Introducción a HTML

aprenderás cómo se construye un sitio web y sus principales características.

Para empezar se debe planificar la estructura del sitio a través de un mapa general en el

que se definan algunas características como:

El objetivo del sitio web

Tipo de público al que va dirigido

Los contenidos que tendrá (secciones)

Estilo del sitio (colores, diseño)

Una vez que se termina el proceso de planeación, es momento de conocer el lenguaje que

se emplea para el desarrollo, construcción o escritura de sitios web, se llama HTML

(HyperText Markup Language), en español se traduce Lenguaje de Marcas de Hipertexto.

Este lenguaje está compuesto por una serie de instrucciones a las que se les denomina

etiquetas o marcas.

Todos los archivos HTML son sólo texto, así que se necesita un editor de texto, aplicación

o programa que permita escribir texto plano sin agregar ningún formato específico, por

ejemplo un bloc de notas.

el mouse sobre dicho archivo, dar clic con el botón derecho y seleccionar la opción abrir),

es el navegador el que interpreta y da forma en la pantalla para que el usuario pueda ver

lo que se ha diseñado.

El lenguaje HTML permite crear muchos elementos y hacer dinámico y atractivo un sitio

web, todos los elementos que imagines se establecen a través de etiquetas o líneas de

escritura y existen etiquetas para insertar imágenes, figuras, para agregar colores de

fondo o color de la fuente, para insertar tablas y formularios, para crear listas, y para

hipervínculos que nos permiten dirigirnos a otras páginas, entre otros. Es el lenguaje HTML

el que permite crear páginas web, darles estructura y contenido. Existen diferentes tipos

de etiquetas que se utilizan para crear un sitio web.

Etiqueta Descripción

<p> Define una parte que debe mostrarse como párrafo.

<li> Define un elemento de una lista numerada.

<dl> Define una lista de términos y sus significados asociados.

<figure> Representa una figura ilustrada como parte del documento.

<figcaption> Representa la leyenda de la figura. 

Etiquetas de texto

Etiqueta Descripción

<a> Representa un hiperenlace

<em> Representa un texto enfatizado

<strong> Representa un texto importante

<s> Representa contenido que no es exacto, tiene estilo tachado

<cite> Representa el título de una obra.

<time> Representa un valor de fecha y hora.

<kdb> Representa el texto que debe introducir o la tecla que debe pulsar el

usuario.

<i> Muestra el texto marcado con un estilo en cursiva o itálica.

<b> Muestra el texto marcado con un estilo en negrita.

<u> Muestra el texto subrayado.

<mark> Representa un texto marcado o resaltado como referencia o anotación,

debido a su relevancia o importancia.

<br> Representa un salto de línea.

En una página web también puedes programar un formulario para obtener información de

los usuarios y, existen etiquetas para poder programarlos.

Etiquetas para la creación de formularios

Etiqueta Descripción

<form> Define un formulario. El principio y final de un formulario se define con

las etiquetas <form> y </form>.

<fieldset> Permite organizar en grupos los campos de un formulario.

<legend> Representa el título de un <fieldset>.

<label> Representa una etiqueta para un elemento en una interfaz de usuario.

Este puede estar asociado con un control mediante la utilización del

atributo.

< input> Se usa para crear controles interactivos, que son elementos que

pueden cambiar de acuerdo con las elecciones del usuario. < button> Representa un botón (elemento cliqueable que puede ser utilizado en

formularios o en cualquier parte de la página)

<option> Representa una opción en un elemento <select> o <datalist>.

<select> Representa un elemento de control que permite la selección entre un

conjunto de opciones <option>.

<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.

<datalist> Representa un elemento de control que permite la selección entre un

conjunto de opciones <option>.

<textarea> Representa un elemento de control de edición de texto multilínea.

<output> Representa el resultado de un cálculo.

Las tablas de contenido son un medio para organizar información en filas y columnas que

te permiten almacenar los datos de forma ordenada.

Etiquetas para la creación de tablas de contenido

Etiqueta Descripción

<table> Representa datos con más de una dimensión. El principio

y final de una tabla se define con las etiquetas <table> y

</table>.

<caption> Representa el título de una tabla.

<tr> Representa una fila. Las filas se engloban con las

etiquetas <tr> </tr>

<td> Representa una celda de datos en una tabla.

<th> Representa el encabezado en una tabla.

<colgrup> Representa un conjunto de una o más columnas de una

tabla.

<col> Representa una columna de una tabla.

Un documento HTML está delimitado por las etiquetas <html> y </html>. Dentro de este

documento, podemos asimismo distinguir dos partes principales.