LECCIÓN #1

PRINCIPIOS DEL LENGUAJE DE MARCAS (HTML)- ETIQUETAS HTML

HTML es un lenguaje de programación que utiliza para el desarrollo o construcción de una página web. Se origina de la
sigla que corresponde a Hyper Text Markup Language, es decir, lenguaje de Marcas de Hipertexto, que podría ser
traducido como lenguaje de formato de Documentos para Hipertexto. Este lenguaje se basa principalmente en etiquetas,
con las cuales vamos construyendo los diferentes apartados de nuestra Web. Es imprescindible conocer estas etiquetas y
funcionamiento para poder crear o al menos modificar una página web.

Lenguaje de marcas o lenguaje de marcado:

Es una forma de codificar un documento que, junto con el texto incorpora etiquetas o marcas que contienen
información adicional acerca de la estructura del texto o su presentación. El lenguaje de marcas más extendido
es el HTML
Las etiquetas o marcas son códigos que se incorporan en los archivos creados en el lenguaje HTML para añadir significado
o formato al contenido de una página web y consisten en breves instrucciones de comienzo y final, mediante los cuales
se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás
elementos, en la pantalla del ordenador.

Reglas básicas para el diseño de las etiquetas en el lenguaje HTML

 Las etiquetas deben estar encerradas entre los signos “<” y “>”.
 Habitualmente vienen en pares <p> y </p>.
 La primera etiqueta es la de apertura y la segunda es la etiqueta de cierre.
 El texto que se encuentra entre las dos etiquetas es el contenido del elemento.
 Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea que <b> es lo mismo que <B>.

Esta es una etiqueta HTML

<etiqueta >contenido</etiqueta>

Por ejemplo: <b>contenido</b>

A continuación, se analiza cada uno de los elementos de la estructura básica de una etiqueta:

- El elemento HTML comienza con la etiqueta de apertura <b> (etiqueta que nos muestra un
texto en negrita).
- El contenido de dicho elemento aparecerá en la página web en negrita.
- El fin del elemento HTML es con la etiqueta de cierre </b>.

Etiquetas básicas y principales

A continuación, se detalla una lista muy extensa de todas Las etiquetas que se usan en el lenguaje HTML, con su respectiva
descripción y etiqueta de apertura y cierre
 Etiqueta de Etiqueta de
Nombre Descripción
apertura cierre
a <a> </a> Origen o destino de un vínculo
abbr < abbr > </ abbr > Abreviatura (p.ej.:WWW, HTTP, etc.)
acronym < acronym > </ acronym >
address < address > </ address > Información sobre el autor
applet < applet > </ applet > Applet java
area < area > prohibido Área de un mapa de imágenes en el lado del cliente
b <b> </b> Estilo de texto en negrita
Base <base> prohibido URI base del documento
basefont < basefont > prohibido Tamaño de base de fuente
bdo < bdo > </ bdo > anular algoritmo BiDi l18N
big < big > </ big > Estilo de texto grande
blockquote < blockquote > </ blockquote > Cita larga
body opcional opcional Cuerpo del documento
br <br> prohibido Salto de línea forzado
Button < Button > </ Button > Botón
caption < caption > </ caption > Título de tabla
center < center > </ center > Forma abreviada de DIV align=center
cite < cite > </ cite > Cita
code < code > </ code > Fragmento de código de computadora
col <col> prohibido Columna de una tabla
colgroup < colgroup > opcional Grupo de columnas de una tabla
dd <dd> opcional Descripción de una definición
del <del> </del> Texto borrado
dfn <dfn> </dfn> Definición
dir <dir> </dir> Lista tipo directorio
div <div> </div> Contenedor genérico de idioma/estilo
dl <dl> </dl> Lista de definiciones
dt <dt> opcional Término definido
em <em> </em> Énfasis
fieldset < fieldset > </ fieldset > Grupo de controles de un formulario
font <font> </font> Cambio local de la fuente
form <form> </form> Formulario interactivo
frame <frame> prohibido Subventana
frameset <frameset> </frameset> Subdivisión en ventanas
h1 <h1> </h1> Encabezado
H2 <h2> </h2> Encabezado
H3 <h3> </h3> Encabezado
H4 <h4> </h4> Encabezado
H5 <h5> </h5> Encabezado
H6 <h6> </h6> Encabezado
head opcional opcional Cabecera del documento
hr <hr> prohibido Separador horizontal
html opcional opcional Elemento raíz del documento
iframe < iframe > </ iframe > Subventana en línea
img <img> prohibido Imagen incluida
input <input> prohibido Control de formulario
ins <ins> </ins> Texto insertado
isindex <isindex> prohibido Entrada de texto en una sola línea con indicador
kbd <kbd> </kbd> Texto que debe ingresar el usuario
label <label> </label> Texto del rótulo de un campo de formulario
legend <legend> </legend> Leyenda de un grupo de campos
li <li> opcional Objeto de lista
link <link> prohibido Un vínculo independiente del medio
map <map> </map> Mapa de imágenes en el lado del cliente
menu <menu> </menu> Lista tipo menú
meta <meta> prohibido Meta información genérica
noframes <noframes > </noframes> Contenedor de contenidos alternativos para la
representación no basada en marcos
noscript <noscript> </ noscript > Contenedor de contenidos alternativos para la
representación no basada en scripts
object < object > </ object > Objeto incluido genérico
ol <ol> </ol> Lista ordenada
optgroup < optgroup > </ optgroup > Grupo de opciones
option <option> opcional Opción seleccionable
p <p> opcional Párrafo
param <param> prohibido Valor de propiedad con nombre
pre <pre> </pre> Texto preformateado
q <q> </q> Cita corta en línea
s <s> </s> Estilo de texto tachado
samp <samp> </samp> Ejemplo de salida de programa, scripts, etc.
script < script > </ script > Sentencias de script
select <select> </select> Selector de opciones
small <small> </small> Estilo de texto pequeño
span <span> </span> Contenedor genérico de idioma/estilo
strike <strike> </strike> Estilo de texto tachado
strong <strong> </strong> Énfasis fuerte
style <style> </style> Información de estilo
sub  Subíndice
sup  Superíndice
table < table > </ table >
tbody opcional opcional Cuerpo de tabla
td <td> opcional Celda de datos de una tabla
textarea < textarea > </textarea> Cuerpo de texto multilínea
tfoot <tfoot> opcional Pie de tabla
th <th> opcional Celda de encabezado de tabla
thead <thead> Opcional Cabecera de tabla
title <title> </title> Título del documento
tr <tr> opcional Fila de una tabla
tt <tt> </tt> Estilo de texto de teletipo o monoespacio
u <u> </u> Estilo de texto subrayado
ul <ul> </ul> Lista no ordenada
var <var> </var> Variable o argumento de un programa
Ejemplo utilizando la etiqueta optgroup

https://www.htmlquick.com/es/reference/tags/optgroup.html

Práctica realizada con los navegadores:

Google Chrome, Brave, Explorer, Microsoft

Edge