HTML

HTML
Introducción:
HTML es el lenguaje de marcado estándar para crear páginas Web.
¿Qué es HTML?
 HTML significa Hyper Text Markup Language (Lenguaje de marcado de hiper texto).
 HTML es el lenguaje de marcado estándar para crear páginas web.
 HTML describe la estructura de una página web.
 HTML consta de una serie de elementos.
 Los elementos HTML indican al navegador cómo mostrar el contenido.
 Los elementos HTML etiquetan partes de contenido como "esto es un encabezado", "esto es un
párrafo", "esto es un enlace", etc.
Un documento HTML simple

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Titulo de la pestaña</title>
</head>
<body>
<h1>Mi primer encabezado</h1>

<p>Mi primer parrado</p>

</body>
</html>
Ejemplo explicado
 La declaración <!DOCTYPE html> define que este documento es un documento HTML5.

 <html> es el elemento raíz de una página HTML. El resto de elementos descienden de este
elemento. Se puede agregar el atributo lang con el valor “es” o “en” para especificar que el
documento esta en español o ingles respectivamente. Por ejemplo, para un documento en
español se especifica como lang=”es”.
 El elemento <head> contiene metainformación sobre la página HTML para que el navegador la
interprete correctamente.
 El elemento <title> especifica un título para la página HTML (que se muestra en la barra de
título del navegador o en la pestaña de la página).
 El elemento <body> define el cuerpo del documento, y es un contenedor para todos los
contenidos visibles, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.
 El elemento <h1> define un encabezado grande.
 El elemento <p> define un párrafo.
 Para abrir un comentario escribimos “” o usamos el atajo Ctrl + Ç.
 Este elemento <meta charset=”UTF-8”> especifica la codificación de caracteres del documento
— es decir, el conjunto de caracteres que el documento puede usar. utf-8 es un conjunto de
caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano.
Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo
tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu
página podría gestionar inglés y japonés sin problemas.
¿Qué es un elemento HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una etiqueta de fin:
<Nombre de etiqueta>El contenido va aquí... </Nombre de la etiqueta>

<> h1 Mi primer encabezado</h1>
<p> Mi primer párrafo. </p>
Etiqueta de inicio Contenido del elemento Etiqueta de cierre
<h1> Mi primer encabezado </h1>
<p> Mi primer parrado </p>
<br> ninguno ninguno
Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>) pero si pueden tener
atributos por ejemplo el elemento <img href=”imagen1.png”>. Estos elementos se denominan
elementos vacíos. ¡Los elementos vacíos no tienen una etiqueta final!
Navegadores Web
El propósito de un navegador web (Chrome, Edge, Firefox,
Safari) es leer documentos HTML y mostrarlos
correctamente.
Un explorador no muestra las etiquetas HTML, pero las
utiliza para determinar cómo mostrar el documento:
Estructura de página HTML

A continuación, se muestra una visualización de una estructura de página HTML:
<html>
<head>
<title>Titulo de la página</title>
</head
<body>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo</p>
<p>Esto es un párrafo</p>
as
</body>
</html
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE
html>. El documento HTML en sí comienza con <html> y termina con </html>.
La Declaración <!DOCTYPE>
La declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas web
correctamente. Solo debe aparecer una vez, en la parte superior de la página (antes de cualquier
etiqueta HTML) y no distingue entre mayúsculas y minúsculas. La declaración para HTML5 es:
<!DOCTYPE html>.
Encabezados HTML
Los encabezados HTML se definen con las etiquetas: <h1>…<h6>
En la representación semántica, <h1> define el encabezado más importante y <h6> el menos
importante. En la representación visual, <h1> es mas grande en tamaño que <h2> y así sucesivamente
hasta <h6>.
Un elemento de encabezado describe brevemente el tema de la sección que presenta.
Notas de uso:
 No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad CSS
font-size para eso.
 Evite omitir niveles de encabezado: siempre comience con <h1>, después use <h2> y así
sucesivamente.
Ejemplo correcto:
<h1> Elementos de título </h1>
<h2> Resumen </h2>
<p> Algo de texto aquí relacionado con el resumen ... </p>
<h2> Ejemplos </h2>
<h3> Ejemplo 1 </h3>
<p> Algo de texto aquí relacionado con el ejemplo 1... </p>
<h3> Ejemplo 2 </h3>
<p> Algo de texto aquí relacionado con el ejemplo 2... </p>
<h2> Consulte también </h2>
<p> Algo de texto aquí ... </p>
No hacer Sí hacer
<h1>Cabecera nivel 1</h1> <h1>Cabecera nivel 1</h1>
Las etiquetas de cabecera pueden anidarse para generar sub-secciones en nuestros documentos. Esto
beneficia la organización de la información y también ayuda a los usuarios de lectores de pantalla a
conocer mejor la jerarquía de los contenidos.
Ej 1.0:
<h1> Harry Potter </h1>
<h2> Sinopsis </h2>
<h2> Novelas </h2>
<h3> Harry Potter y la Piedra Filosofal </h3>
<h3> Harry Potter y la Cámara de los Secretos </h3>
<h3> Harry Potter y el Prisionero de Azkaban </h3>
<h3> Harry Potter y el Cáliz de Fuego </h3>
<h3> Harry Potter y la Orden del Fenix </h3>
<h3> Harry Potter y el Príncipe Mestizo </h3>
<h3> Harry Potter y las Reliquias de la Muerte </h3>
<h2> Películas </h2>
<h3> Harry Potter y la Piedra Filosofal </h3>
<h3> Harry Potter y la Cámara de los Secretos </h3>
<h3> Harry Potter y el Prisionero de Azkaban </h3>
<h3> Harry Potter y el Cáliz de Fuego </h3>
<h3> Harry Potter y la Orden del Fenix </h3>
<h3> Harry Potter y el Príncipe Mestizo </h3>
<h3> Harry Potter y las Reliquias de la Muerte (Parte 1)
</h3>
<h3> Harry Potter y las Reliquias de la Muerte (Parte 2)
</h3>
Puede haber varios <h1> pero no se recomienda. Es mejor poner de <h1> al titilo principal de la página y
<h2> a los secundarios.
Párrafos HTML
Los párrafos HTML se definen con la etiqueta: <p>
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>
Etiquetas de sección de contenido
HEADER
La etiqueta <header>, o cabecera, es una de varias etiquetas de documento nuevas introducidas con
HTML5. Es usada para clasificar el contenido que aparece en la parte superior de cada página de tu sitio
web: el logo (y elementos que lo conforman o son parte de tu identidad, tal como un slogan), el menú
de navegación, el buscador de tu sitio, redes sociales, botones destacados, el idioma / país (si tu
audiencia vive en otros países, lo recomendable es agregar un
selector de idiomas de dichos lugares), elementos referentes a una
tienda online (si tienes una e-commerce o tienda online deberás
añadir un carrito, login o sign up, wish list, etc.), etc.
MAIN
El elemento HTML <main> representa el contenido principal del
<body> de un documento o aplicación.
Nota: no debe haber más de un elemento <main> en un documento,
y este no debe ser descendiente de un elemento <article>, <aside>,
<footer>, <header>, o <nav>.
FOOTER
El Elemento HTML Footer (<footer>) representa un pie de página
para el contenido de sección más cercano como: <article>, <aside>,
<nav>, <section>, <blockquote>, <body>(en el caso de la imagen),
<details>, <fieldset>, <figure>, <td>. Un pie de página típicamente
contiene información acerca del autor de la sección, datos de
derechos de autor, enlaces a documentos relacionados, datos de la web, información de contacto, mapa
del sitio, volver a los enlaces principales, documentos relacionados, etc. Puede tener varios elementos
<footer> en un documento.
Etiquetas de sección de contenido ll
SECTION
El elemento de HTML section (<section>) representa una sección genérica de un documento. Sirve para
agrupar contenido que esta relacionado. Cuando creamos bloques cuyo contenido es parte de un
bloque total usaremos section.
Notas de uso:
Si la intención es indicar el contenido de un elemento <section> , es mejor usar el elemento <article> en
su lugar, a modo de artículos independientes como en las revistas. <section> está diseñado para
contenidos dependientes, pero diferenciados.
No se debe usar el elemento <section> como un mero contenedor genérico; para esto ya existe <div>,
especialmente si el objetivo solamente es aplicar un estilo (CSS) a la sección. Como regla general, el
título de una sección debería aparecer en el esquema del documento.
ARTICLE
Representa contenido independiente. Es decir, podemos leer ese fragmento en cualquier otro sitio y
tendría sentido.
El Elemento article de HTML (<article>) representa una composición auto-contenida en un documento,
página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por
ejemplo, en la indicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico,
una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro
elemento independiente del contenido.
Notas de uso:
Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el
exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que
representa la entrada del blog.
Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento
<address>, pero no se aplica a los elementos <article> anidados.
La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo
pubdate atributo de un elemento <time>.
ASIDE
Se utiliza para representar contenido relacionado pero que no forma parte del contenido principal.
El elemento HTML <aside> representa una sección de una página que consiste en contenido que está
indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo
representadas como barras laterales o como inserciones y contienen una explicación al margen como
una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del
autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.
Notas de uso:
No utilices el elemento <aside> para etiquetar texto entre paréntesis, ya que este tipo de texto se
considera parte del flujo principal.
EJEMPLOS
Ejemplo de section conteniendo a article:
<body>
<header>
<h1>NOTICIAS NACIONALES</h1>
</header>
<main>
<section>
<h2>Noticias de Cordoba</h2>
<article>Noticia 1</article>
</section>
</main>
<footer>
Copyright © Todos los derechos reservados
</footer>
</body>
Este código en https://validator.w3.org/ nos arrojaría una advertencia de que los articles necesitan un
encabezado ya que estos al ser contenido independiente pueden tener su propio encabezado y su
propio pie de página pero no es obligatorio. Entonces, el código corregido y mostrando las diferentes
formas de como representar un article y seria así:
<body>
<header>
</header>
<main>
<section>
<h2>Noticias de Córdoba</h2>
<article>
<h3>Noticia 1</h3>
<p> Texto de relleno </p>
<footer>23/9/2021</footer>
</article>
<article>
<h3>Noticia 2</h3>
<p> Texto de relleno </p>
</article>
<article>
<header>
<h3>Noticia 3</h3>
</header>
<p>Texto de relleno</p>
<footer>23/9/2021</footer>
</article>
</section>
</main>
<footer>
</footer>
</body>
Ver el video 12 de html de Dorian Desings 05:54
Ejemplo de article conteniendo a section:
<body>
<header>
</header>
<main>
<article>
<h2>Navegadores más utilizados en 2021</h2>
<section>
<header>
<h3>Crome</h3>
</header>
<footer>21:07 23/9/2021</footer>
</section>
<section>
<h3>Firefox</h3>
</section>
</article>
</main>
<footer>
</footer>
</body>
Ejemplo de aside:
<body>
<header>
<h1>Cursos de desarrollo web gratuitos</h1>
</header>
<aside> Visita mi canal de YouTube </aside>
<main>…</main>
</body>
No importa si aside esta fuera o dentro de main. Pero preferentemente ponerlo fuera.
Elementos de bloque
Los elementos de bloque son los que ocupan todo el ancho de la pagina por ejemplo <h1>, <p>, etc. Esto
lo podemos ver al inspeccionar la página.
Existen otros elementos llamado elementos de línea como <span> que no ocupan todo sino la parte que
les corresponde. Pruebe usted mismo. Y si colocamos varios, se colocan uno al lado del otro.
Elementos de línea
<em> representa énfasis.
<Ej:
<em>El dinero</em> es importante, pero la salud es lo más importante. ¡Saludos! = El dinero es
importante, pero la salud es lo más importante. ¡Saludos!
Con esta etiqueta le decimos al navegador que la parte “El dinero” es más importante que el resto de las
palabras. Si le agregamos un valor a modo de ejemplo “El dinero” tendría un valor de 1 y el resto de la
oración de 0.
<strong> representa más énfasis.
Ej:
<em>El dinero</em> es importante, pero <strong>la salud</strong> es lo más importante. ¡Saludos! =
El dinero es importante, pero la salud es lo más importante. ¡Saludos!
Con esta etiqueta le decimos al navegador que la parte “la salud” es más importante que el resto de las
palabras. Si le agregamos un valor a modo de ejemplo “la salud” tendría un valor de 2, “El dinero”
tendría un valor de 1 y el resto de la oración de 0.
<small> representa menos énfasis que un texto normal.
Ej
<em>El dinero</em> es importante, pero <strong>la salud</strong> es lo más importante.
<small>¡Saludos!</small>. = El dinero es importante, pero la salud es lo más importante. ¡Saludos!
Con esta etiqueta le decimos al navegador que la parte “¡Saludos!” es menos importante que el resto de
las palabras. Si le agregamos un valor a modo de ejemplo “la salud” tendría un valor de 2, “El dinero” un
valor de 1, el resto de la oración de 0 y “¡Saludos!” tendría un valor de -1.
Concusiones
El texto con <em> se hace cursiva, con <strong> negrita y con <small> pequeño. Esto no significa que
usemos estas etiquetas para este fin, para eso usamos CSS. Usamos estas etiquetas para decirle al
navegador la importancia de cada palabra.
<br> se usa para dar un salto de línea en alguna parte en específico.
Ej: en un poema, una canción, etc. Es decir, cortar el texto y que lo siguiente se escriba en la línea de
abajo.
<wbr> se usa para dar un salto de línea si hiciera falta.

Ej:
Supongamos que tenemos un enlace, una palabra larga o una combinación de caracteres que no entre
en una sola línea del navegador... por ejemplo
https://www.udemy.com/courses/software/hardware/hola/sdgfggh/sfgsgd/dfndn/asda/hgdfh-dhf-
1234-5454
Si queremos que el navegador haga saltos de línea en algunas partes en especifico si es que no entra en
el navegador agregamos la etiqueta <wbr> EJ:
https://www.udemy.com/<wbr>courses/<wbr>software/<wbr>hardware/<wbr>hola/<wbr>sdgfggh/
<wbr>sfgsgd/<wbr>dfndn/<wbr>asda/<wbr>hgdfh-dhf-1234-5454
Ahora el navegador hará saltos de línea después de las diagonales si el link no entra en una sola línea.
Los signos – son iguales a los <wbr>. El navegador también hará saltos de línea si es necesario después
de estos signos. Pero si se los cambia por _ (guion bajo) o cualquier otra forma de separación, tomara
todo como una frase completa y hará el salto de toda la frase unida por ejemplo por _.
Ver el video 17 de HTML de Dorian Desings. O algún video parecido.
<time> se usa para representar contenido de una hora o fecha relevante.
Ej:
<time>27/09/2021 17:36</time>
Existen otras etiquetas para dar estilo dentro html que son:
<i> Italic para cursiva. Ej: <i>Cursiva</i> = Cursiva
<b> Bold para negrita. Ej: <b>Negrita</b> = Negrita
<u> Underline para subrayado simple. <u>Subrayado</u> = Subrayado
Estas etiquetas son las únicas para dar estilo y aunque se siguen manteniendo, es posible que
desaparezcan. Por lo tanto, para cursiva, negrita y subrayado se usa CSS. En el caso de Italic no se suele
utilizar esta para cursiva sino para representar iconos. Investigar esto más adelante.
<sup> Superíndice Ej: <p>4 elevado al cuadrado se representa asi: 4<sup>2</sup></p> = 4 elevado al
cuadrado se representa asi: 42
<sub> Subíndice Ej: <p> La fórmula del agua se representa asi: H<sub>2</sub>O</p> = La fórmula del
agua se representa asi: H2O
Atributos
Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura, para
controlar el comportamiento del elemento. Se añaden a la etiqueta de inicio.
Existen 2 tipos:
 Comunes: Su sintaxis es atributo=”valor”
 Booleanos: Su sintaxis es atributo (solo el nombre del atributo)
Id=”DNI”
El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento.
Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u
hojas de estilo (con CSS).
El valor de este atributo es una cadena de caracteres. El autor del sitio no debe usarlo para proporcionar
información.
El valor de este atributo NO debe contener espacios en blanco. Los navegadores tratan los IDs que
contienen espacios en blanco como si los espacios fueran parte del ID. Los elementos pueden tener sólo
un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID,
pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el
DOM.
class=”Pase de gimnacio”
El atributo class también lo utilizaremos para identificar elementos HTML pero en este caso podemos
ponerle un mismo valor a varios elementos. El valor de este atributo NO debe contener espacios en
blanco.
Ejemplos
<p id="parrafo-1"> este es un párrafo ejemplo para mostrar un atributo de
identificación único</p>
<p id="parrafo-2"> este es un párrafo ejemplo para mostrar un atributo de
identificación único</p>
<p id="concepto-1" class=”conceptos-clave”> Los párrafos que tienen como
identificador class=”conceptos-clave” serán destacados en color especial<p/>
<p id="concepto-2" class=”conceptos-clave”> Los párrafos que tienen como
identificador class=”conceptos-clave” serán destacados en color especial<p/>
title=”mensaje que se muestra cuando pasamos el mouse sobre un texto o imagen”

El atributo global title contiene un texto representado información relacionada al elemento al cual
pertenece. Tal información puede típicamente, pero no necesariamente, ser presentada al usuario como
un tip. Aquí hay algunos usos típicos para este atributo:
Vínculo: el título o la descripción del documento vinculado
Elemento mediático como una imagen: una descripción o créditos asociados.
Párrafo: una nota de pie de página o comentario acerca de este.
Cita: alguna información sobre el autor y otros datos.
data-* Es un atributo que nos permite guardar algún valor en la etiqueta html.
El asterisco se puede reemplazar por cualquier palabra que queramos. Esto al nivel de html no tiene
utilidad, pero es muy importante para JS.
Los atributos data son creados en la especificación de HTML5 con la intención de que los desarrolladores
los usemos para alojar datos («data») que son privados a la aplicación o al sitio web, para los cuales no
existe ningún otro atributo apropiado.
Ej:
<p id=”párrafo-2” data-ejemplo=”Datos de ejemplo”>Datos en la etiqueta</p>
<img id="miImagen" src="miImagen.jpg" alt="Texto alt"/>
data-camara="Modelo de la cámara que utilicé"
data-efecto="Efectos aplicados a esta foto"
data-geo="Longitud y latitud"
data-fecha="La fecha en que tomé la foto"
Enlaces HTML
Lo que caracteriza a la web como medio de comunicación es la navegación por medio de hipervínculos
(links o enlaces). Esta conexión entre archivos permite al usuario elegir el sentido de la navegación.
En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es href="" donde se
escribe la ubicación del archivo de destino que puede estar en la misma carpeta que el archivo que lo
está llamando, en otra carpeta del mismo sitio o en otro sitio web.
Entre las etiquetas <a href=""></a> se puede colocar cualquier elemento html que funcionará como
botón, generalmente se coloca un texto o una imagen. Si es un texto, el navegador por defecto lo
muestra en color azul y subrayado. Si es una imagen, algunos navegadores especialmente las versiones
anteriores a las actuales, le pueden agregar un borde azul.
Rutas de enlaces:
Se llama ruta al valor que se escribe dentro del atributo href="" y se pueden clasificar en dos tipos:
Rutas absolutas:
Las rutas absolutas son las que definen la ubicación completa de un archivo en la web y empiezan desde
https://nombredelsitio.com/archivo.html (el archivo de destino puede ser de cualquier extensión). Por
ejemplo, si queremos vincular nuestro sitio con Facebook, usaríamos una ruta absoluta y el código sería:
<a href="https://www.facebook.com/pagina">Estamos en Facebook</a>
Rutas relativas:
Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a la ubicación del
archivo que lo está llamando. Ejemplo: si el archivo index1.html vincula con quien-soy.html y están en la
misma carpeta, el código sería asi:
<a href="quien-soy.html">Quién soy</a>.
{ {
CARPETA 1
CARPETA 1.0 {quien−soy
index 1.html
. html
archivo 2. html
{
CARPETA RAIZ
CARPETA 2 {
CARPETA 2.0 archivo 1. html
archivo 25.html
gato . jpg
index . html
Si necesitamos vincular a index1.html con un archivo que está al nivel de la carpeta pondremos
../archivo_2.html. Agregaremos un ../ por cada nivel superior. Esto puede causar ciertos problemas si
queremos contactar con un archivo que está en una carpeta que está en la raíz del proyecto o que este
muy alejado. Por lo tanto, si partimos desde index1.html podemos definir una ruta relativa que nos lleve
a la raíz del proyecto si empezamos el nombre del archivo con una barra lateral. Ej:
/carpeta_2/carpeta_2.0/archivo1.html. Si hubiéramos querido hacerlo de la primera forma seria
así: ../../carpeta_2/carpeta_2.0/archivo1.html
Si desde index1.html queremos agregar un link para vincularlo con index.html existen dos formas
rápidas:
La primera es poner /index.html y la segunda es solamente poner / como argumento del href porque los
navegadores cargan la pagina index.html automáticamente, es decir, la toman por defecto. Esto solo
vale si el archivo index.html está en la raíz de la carpeta, si no es así, hay que agregar la carpeta en la
que este, el nombre, etc.
Atributos de la etiqueta <a>
target=”” define donde se abrirá el recurso solicitado.
Siempre para rutas absolutas o enlaces externos usar _blank como valor del atributo. target=”_blank”.
Se abre la pagina en una nueva pestaña.
El valor que viene por defecto es target=”_self” que es lo mismo que no pone nada. Se abre la pagina en
la misma pestaña.
download Atributo booleano. Sirve para descargar el recurso solicitado. IMPORTANTE: EL RECURSO
DEBE ESTAR EN EL MISMO SERVIDOR.
EJ:
<a href=”/carpeta_2/gato.jpg” download>Descargar gato</a>
La carpeta donde se guardan las imágenes, videos, audios, etc. Se llama assets.
Navegación interna con anclas
Las anclas muestran la información que contiene la página. Sirven de menú interno de navegación de la
misma.
Permiten enlazar contenido a una altura determinada de una página, facilitando al usuario visualizar la
información que está buscando sin tener que hacer scroll, salirse de la página o recargar la misma.
Úsalas cuando tengas mucho caudal de información y necesites categorizar el contenido.
Definí títulos cortos y de fácil interpretación que agrupen los contenidos de la página.
El objetivo principal de un ancla es la delimitación de secciones específicas que puede ser llamado o
direccionado desde un índice. De esta forma es posible navegar entre las diferentes secciones sin
recargar la página.
Cómo crear un ancla:
El elemento HTML Ancla <a href=”#id-categoria”> categoria </a> crea un enlace dentro de una página y
refiere a través de un ID a otra sección dentro de la misma página.
Índice:
<h3 id="indice">En esta página:</h3>
Enlace:
<a href="#Subtítulo 1">Subtítulo 1 </a>
Destino:
<h3 id="Subtítulo 1">Subtítulo 1 </h3>
Volvér al índice:
<a href="#indice’’>Volver al índice </a>
Al final de cada sección agrega un botón o enlace que lleve al usuario al índice.
<nav>: El elemento de sección de navegación
El elemento HTML <nav> representa una sección de una página cuyo propósito es proporcionar enlaces
de navegación, ya sea dentro del documento actual o a otros documentos. Ejemplos comunes de
secciones de navegación son menús, tablas de contenido e índices.
COMBIANACION DE <nav> Y NAVEGACION A TRAVES DE ANCLAS
<body>
<h1>Textos</h1>
<nav>
<a href="#Texto-1">Texto 1</a>
</nav>
<h2 id="Texto-1">Texto 1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat
dignissimos reiciendis est rerum inventore, exercitationem culpa quidem sint
enim libero vero voluptatibus nemo eos nam odit porro cum excepturi modi!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
accusantium aliquam dolores eaque? Consequatur nam exercitationem voluptas
sed est. Accusamus ab expedita et doloribus, adipisci blanditiis explicabo
corporis harum delectus!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error
accusantium aliquam dolores eaque? Consequatur nam exercitationem voluptas
sed est. Accusamus ab expedita et doloribus, adipisci blanditiis explicabo
corporis harum delectus!</p>
</body>
Observar que en el href se le agregó un # antes de la dirección del id.
Como podemos observar podemos ir a distintas partes de una misma página desde la página. También
podemos ir a distintas partes de una página desde otra página. Por ejemplo:
<nav>
<a href="/carpeta_6/archivo_9.html#Texto-1">Texto 1</a>
</nav>
Solamente agregamos el #Texto-n a la dirección de la página en donde están los textos a los que
queremos ir.
LISTAS
Las listas en HTML nos permiten crear conjuntos de elementos en forma de lista dentro de una página,
todos los cuales irán precedidos, generalmente, por un guión o número.
Los tipos de listas en HTML son los siguientes:
 Listas ordenadas
 Listas desordenadas
 Listas de definiciones
Listas ordenadas
Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para
representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá
precedido de un número o letra que establezca su orden. El orden es importante.
Las listas en HTML ordenadas se representan mediante el elemento OL.
<ol> ... </ol>
Cada uno de los elementos de la lista ordenada se representará mediante el elemento LI.
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ol>
Un ejemplo de lista ordenada sería el siguiente:
<ol>
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>
Que produciría el siguiente efecto:
1. Julio
2. Carmen
3. Ignacio
4. Elena
Número de inicio de la lista: start
El atributo start nos permite indicar el número por el cual queremos que empiece la lista, ya que por
defecto las listas ordenadas en HTML empiezan por el número 1.
<ol start="numero"> ... </ol>
De esta forma, si queremos que la lista empiece por el número 5, escribiremos el siguiente código:
<ol start="5">
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>
Que produciría el siguiente efecto:
5. Julio
6. Carmen
7. Ignacio
8. Elena
Tipo de lista ordenada: type

De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
 1 - Listas decimales
 a - Listas alfabéticas en minúsculas
 A - Listas alfabéticas en mayúsculas
 i - Listas de números romanos en minúsculas
 I - Listas de números romanos en mayúsculas
Los valores indicados al principio son los que le podemos asignar al atributo type de la lista ordenada
en HTML.
<ol type="tipo"> ... </ol>
Si queremos que nuestra lista aparezca ordenada mediante letras en mayúsculas escribimos lo
siguiente:
<ol type=”A”>
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>
Listas en orden inverso: reversed
En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite
invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.
Para utilizarlo simplemente indicamos el atributo reversed sobre el elemento OL.
<ol reversed> ... </ol>
En este caso, si escribimos la siguiente lista:
<ol reversed>
<li>Julio</li>
<li>Carmen</li>
<li>Ignacio</li>
<li>Elena</li>
</ol>
Lo que obtendremos por pantalla será lo siguiente:
4. Julio
3. Carmen
2. Ignacio
1. Elena
Listas Desordenadas
Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden,
simplemente precedidos por una viñeta que puede ser un punto, un cuadrado,…
Para definir una lista desordenada en HTML utilizamos el elemento ul.
<ul> ... </ul>
Para representar los elementos de la lista desordenada utilizamos el mismo elemento que con las listas
ordenadas, es decir, el elemento li.
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento N</li>
</ul>
De esa forma podríamos tener el siguiente código HTML:
<ul>
<li>FC. Barcelona</li>
<li>Real Madrid</li>
<li>Real Betis</li>
<li>Atlético de Madrid</li>
</ul>
Lo que nos mostrará por pantalla: Si agregamos el atributo type="circle"
a la etiqueta <ul> los puntos negros
 FC. Barcelona estarían vacíos. Ej:
 Real Madrid
 Real Betis o FC. Barcelona
 Atlético de Madrid o Real Madrid
o Real Betis
El único atributo que comparten las LO y LU es el type. o Atlético de Madrid
Listas de Definiciones
Las listas en HTML de definiciones en HTML nos sirven para montar listas en las que tenemos la
estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien
pueden ser cualquier par valor-definición.
Las listas en HTML de definiciones en HTML se construyen mediante el elemento dl.
<dl> ... </dl>
En este caso, dentro de las listas en HTML de definiciones tenemos dos elementos anidados, el que
representa al valor dt y el que representa a la definición dd. De esta forma la estructura de las listas
en HTML de definiciones es la siguiente:
<dl>
<dt>Término1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
...
<dt>Término N</dt>
<dd>Definición N</dd>
</dl>
Si queremos crear una lista en HTML con definiciones de palabras, podemos escribir lo siguiente:
<dl>
<dt>Pizpireta</dt>
<dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
<dt>Pulular</dt>
<dd>Dicho de las personas, animales o cosas: Abundar y bullir en un
lugar.</dd>
<dt>Concupiscencia</dt>
<dd>En la moral católica, deseo de bienes terrenos y, en especial, apetito
desordenado de placeres deshonestos.</dd>
</dl>
Lo cual nos acabará mostrando por pantalla lo siguiente:

Pizpireta
Dicho de una mujer: Viva, pronta y aguda.
Pulular
Dicho de las personas, animales o cosas: Abundar y bullir en un lugar.
Concupiscencia
En la moral católica, deseo de bienes terrenos y, en especial, apetito desordenado de placeres
deshonestos.
Por defecto los navegadores dejan el término y en la siguiente líne, junto con un tabulador, la definición.
Menú de navegación
<nav>
<ul>
<li><a href="#Post-1">Post 1</a></li>
</ul>
</nav>
Recordar que el valor del atributo href puede ser una ruta absoluta, relativa o como en este caso, un
enlace a un post de la misma página.
Listas anidadas
Cuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista
que estemos anidando.
Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas
sea a su vez una lista. Es decir, el esquema de listas sería parecido al siguiente:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>
<ol>
<li>Elemento 2.1</li>
<li>Elemento 2.2</li>
...
<li>Elemento 2.N</li>
</ol>
</li>
<li>Elemento 3</li>
...
<li>Elemento N</li>
</ul>
En este caso hemos anidado una lista ordenada dentro del tercer elemento li de una lista desordenada.
Hay que tener cuidado de poner el elemento li dentro de la lista anidada, ya que si no lo ponemos
estaremos generando un código incorrecto.
Las anidaciones de listas puede ser de cualquier tipo de lista y sin límite de anidación.
Un ejemplo de listas anidadas sería una clasificación de animales como la siguiente:
<ul>
<li>Carnívoro
<ul>
<li>León</li>
<li>Buitre</li>
<li>Hiena</li>
</ul>
</li>
<li>Herbívoro
<ul>
<li>Cabra</li>
<li>Vaca</li>
</ul>
</li>
<li>Omnívoro
<ul>
<li>Oso</li>
<li>Urraca</li>
</ul>
</li>
</ul>
El efecto que obtendríamos sería el siguiente:
 Carnívoro
o León
o Buitre
o Hiena
 Herbívoro
o Cabra
o Vaca
 Omnívoro
o Oso
o Urraca
Tablas
Una tabla normal se entiende que es un conjunto de datos presentados en forma de filas y columnas. En
HTML las tablas tienen muchas posibilidades, lo que ha permitido, tradicionalmente, ser utilizadas como
elemento de maquetación de páginas complejas.
En especial permiten unir varias celdas para formar tablas con una disposición irregular, lo que permite
realizar acabados muy complejos en las páginas. Aún más: se permite incluso colocar una tabla dentro
de una celda lo que nos proporciona aún más libertad en la maquetación de páginas.
Sin embargo, hoy en día se recomienda no usar las tablas de esta forma ya que las mejoras que
proporciona CSS en el uso de capas, permiten olvidar a las tablas como recurso de maquetación.
El uso actual de las tablas es más semántico: indicar una disposición en celdas las cuales se marcan
también de forma semántica (celdas de cabecera, celdas normales, filas, columnas, pie de tabla, título
de tabla, etc.).
En HTML cada tabla está asociado a un elemento <table> (elemento que encierra la tabla), dentro de
este elemento se indican las filas mediante el elemento <tr> (table row, elemento que construye filas) y
dentro de cada fila se indican las celdas mediante elementos <td> (table data, elemento que construye
celdas).
En HTML 5 las etiquetas table y tr no tienen atributos, aunque hay atributos, como por ejemplo el
atributo border, que reconocen los navegadores por estar presentes en versiones anteriores de HTML.
Es, como siempre, el lenguaje CSS el que determina la apariencia y formato de la tabla.
Ejemplo de tabla:
<table>
<tr>
<td></td>
<td>Lunes</td>
<td>Martes</td>
<td>Miércoles</td>
<td>Jueves</td>
<td>Viernes</td>
</tr>
<tr>
<td>10:30</td>
<td>Matemática</td>
<td>Geografía</td>
<td>Física</td>
<td>Dibujo</td>
<td>Matemática</td>
</tr>
<tr>
<td>11:30</td>
<td>inglés</td>
<td>Lenguaje</td>
<td>Geografía</td>
<td>Química</td>
<td>Física</td>
</tr>
</table>
Obtiene el resultado:
Lunes Martes Miércoles Jueves Viernes
10:30 Matemática Geografía Física Dibujo Matemática
11:30 Inglés Lenguaje Geografía Químic Física
a
Elementos de marcado semántico en las tablas

Celdas de cabecera
Es muy habitual que las tablas muestren datos y que estos posean celdas que sirvan para describirles.
Esas celdas se consideran de cabecera y se marcan con <th>. El elemento HTML <th> define una celda
como encabezado de un grupo de celdas en una tabla.
El conjunto de celdas encabezado, conforman el encabezado. Por lo tanto este ira dentro del elemento
<thead>.
Ejemplo:
<table>
<thead>
<tr>
<th> </th> 
<th>Lunes</th>
<th>Martes</th>
<th>Miércoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
</thead>
<tr>
<td>10:30</td>
<td>Matemáticas</td>
<td>Geografía</td>
<td>Física</td>
<td>Dibujo</td>
<td>Matemáticas</td>
</tr>
<tr>
<td>11:30</td>
<td>Inglés</td>
<td>Lenguaje</td>
<td>Geografía</td>
<td>Química</td>
<td>Física</td>
</tr>
</table>
En el resultado sólo se aprecia que el navegador colorea en negrita las celdas de cabecera. Esto no
significa que usemos <th> para poner negritas, para eso usamos CSS. Resultado:

a
Títulos
A las tablas se les puede poner un título si lo requiere con ayuda de la etiqueta caption. Para esto
agregamos <caption> SIEMPRE después de la etiqueta <table>. Ej:
<table>
<caption>HORARIO DE CLASES</caption>
<thead>…</thead>
<tr>…</tr>
<tr>…</tr>
</table>
Resultado:
HORARIO DE CLASES
a
Cuerpo de la tabla
El contenido de la tabla debe ir dentro de una etiqueta <tbody> para representar el cuerpo de la tabla.
Esta es opcional siempre y cuando no estemos utilizando un <thead>. Si lo usamos, es obligatorio. Ej:
<table>
<thead>…</thead>
<tbody>
<tr>…</tr>
<tr>…</tr>
</tbody>
</table>
Pie de tabla
Esta etiqueta es opcional completamente. <tfoot>. Ej:
<table>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>
<tr>
<td>Total de asignaturas</td>
<td>7</td>
</tr>
</tfoot>
</table>
Resultado con bordes para mayor apreciación, tener en cuenta que esto no lleva bordes:
HORARIO DE CLASES
11:30 Inglés Lenguaje Geografía Química Física
Total de asignaturas 7
Imágenes HTML
Las imágenes HTML se definen con la etiqueta. <img>. Algunos atributos son src (indica la dirección de la
imagen que se quiere insertar), alt (en caso de no poder mostrar la imagen por alguna razón se mostrara
lo escrito en este atributo), width (ancho ej. 65px o solamente 65), height (alto ej. 35px o solamente
35).
<img src="imagen.jpg" alt="imagen rota" width="104" height="142">
Elementos HTML anidados
Los elementos HTML se pueden anidar (esto significa que los elementos pueden contener otros
elementos). Todos los documentos HTML constan de elementos HTML anidados.
El siguiente ejemplo contiene cuatro elementos HTML: <html> <body> <h1> <p>
<!DOCTYPE html>
<html>
<body>
<h1>Mi Primer Encabezado</h1>
<p> Mi Primer Párrafo</p>
</body>
</html>

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Un documento HTML simple

<h1>Mi primer encabezado</h1>

 La declaración <!DOCTYPE html> define que este documento es un documento HTML5.

<Nombre de etiqueta>El contenido va aquí... </Nombre de la etiqueta>

Etiqueta de inicio Contenido del elemento Etiqueta de cierre

<h1> Mi primer encabezado </h1>

<p> Mi primer parrado </p>

<br> ninguno ninguno

Estructura de página HTML

<wbr> se usa para dar un salto de línea si hiciera falta.

title=”mensaje que se muestra cuando pasamos el mouse sobre un texto o imagen”

<ol start="numero"> ... </ol>

Que produciría el siguiente efecto:

Tipo de lista ordenada: type

<ol type="tipo"> ... </ol>

<ul> ... </ul>

De esa forma podríamos tener el siguiente código HTML:

<dl> ... </dl>

Lo cual nos acabará mostrando por pantalla lo siguiente:

El efecto que obtendríamos sería el siguiente:

Elementos de marcado semántico en las tablas

Lunes Martes Miércoles Jueves Viernes

También podría gustarte