Unidad 1

Desarrollo de Sitios y Aplicaciones Web

HTML 5

Indice

Que es el HTML:

En que consiste el HTML

El HTML5

¿Dónde está la lógica?

Primeros pasos con HTML 5

Estructura de una página HTML

Definición del lenguaje

Todo está en la cabeza head

Etiqueta <meta>

Creando_una_página_HTML5

El elemento div

El elemento header

El elemento hgroup

El elemento footer

El elemento article

El elemento section

El elemento figure

El elemento span

El elemento mark

El elemento address

El elemento a

El elemento aside

El elemento blockquote

Referencia rápida (RESUMEN)

Tablas en HTML

Listas no numeradas

Listas Numeradas

Tamaño de la imagen

Colores de pagina y textos

Formulas matematicas

Que es el HTML:

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).

Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto.

El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.

De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron ser una sentencia de muerte.

El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro de una estructura pero que comparte con la misma solo espacio en la pantalla. No existía comunicación e integración alguna entre aplicaciones y documentos.

En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el contenido web, populares funciones como la reproducción de video se estaban convirtiendo en una parte esencial de la web y solo eran efectivamente ofrecidas a través de estas tecnologías.

A pesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su evolución lenta y la falta de integración disminuyeron su importancia hasta el punto en el que hoy día no es más usado en aplicaciones web de importancia. Sin Java, el mercado volcó su atención a Flash. Pero el hecho de que Flash comparte las mismas características básicas que su competidor en la web lo hace también susceptible de correr el mismo destino.

En resumen:

Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

En que consiste el HTML

HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y muchos otros.

Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de cualquier otra forma.

Componentes básicos

HTML provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de Programación de Aplicaciones) y la especificación de CSS3 por completo no son parte del mismo.

HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto que (como veremos más adelante) es extremadamente significativo.

Conceptos básicos:

Un documento HTML es un archivo de texto. Si usted no posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser grabado con la extensión .html y el nombre que desee (por ejemplo, micodigo.html).

Para comenzar escribir en HTML, puede usar cualquier editor de textos en LINUX (vi, vim, nano, SublimeText, BlueFish, etc) , para Windows (notepad, notepad++, etc. no se recomienda realizarlo en Word, o WordPad), tambien es posible realizarlo en Apache NetBeans con sus correspondientes plugins , generalmente ya los tiene preparados, pero si quieres utilizar un framework para esto puedes usar Seamomkey para Linux use la pagina de seamonkey : https://www.seamonkey-project.org/, y para Windows Seamonkey

Que es seamonkey

SeaMonkey es una suite de Internet conformada por navegador web, cliente de correo electrónico (Mozilla Thunderbird), libreta de contactos, editor de páginas web (Mozilla Composer) y cliente de IRC (ChatZilla).

En esencia, es un proyecto que continúa del desarrollo de Mozilla Application Suite, siendo el desarrollo realizado y controlado enteramente por su comunidad de desarrolladores y usuarios a través de The SeaMonkey Council, entidad apoyada sobre todo en cuanto a recursos técnicos por la Fundación Mozilla.

Puedes usar cualquier otro framework para diseñar paginas WEB puedes escoger el que mejor te ayude, pero ten en cuenta que este software te debe de permitir modificar el código en html para que puedas incorporar nuevos efectos o ejecutar procedimientos en javascript.

Para el caso de LINUX descargamos desde el sitio la vesrion de tipo correspondiente al idioma que nos interese, podemos seleccionar en Other Systems & Languages:

a lo que nos llevara a:

descargamos la ultima versión, y esta estará en .tar.bz2

se descomprime el archivo:

cambiamos a ese directorio, donde esta otro llamado seamonkey:

Este directorio lo copiamos al interior del directorio /opt con el mismo nombre, para ello usamos la linea de comandos (CLI) :

al cambiarse al directorio /opt

y mostrando su contenido

en este directorio debemos de descargar una  imagen del representación del programa, lo podemos localizar en imágenes de cualquier navegador:

lo descargamos es este directorio /opt/seamonkey (le cambiaras de nombre a: seamonkey.png)

nos cambiamos al directorio:

cd /usr/local/share/applications/

ahi con un editor de texto de tu preferencia (vi, vim, nano, bluefish, etc.) creamos un archivo llamado seamonkey.desktop

y le agregamos lo siguiente:

con esto creamos un acceso desde el menú Aplicaciones - Internet

al iniciar Seamonkey Web Browser usamos Crtl+4 y nos ejecuta el Composer (es un programa que tiene incorporado Seamonkey) que se usa como framework para paginas web, en el cual podemos modificar el codigo fuente y realizar el proceso de diseño.

El HTML5 es la quinta versión de HTML, (HyperText Markup Language) que significa:

Lenguaje de Marcado de Hipertexto. Es el lenguaje que utiliza la Web y le indica al navegador cómo debe ser mostrada una página.La gran diferencia que existe entre HTML5 y Flash es que el HTML5 puede ser interpretado directamente por los últimos navegadores. En cambio, para reproducir un archivo Flash (extensión SWF) es necesario instalar un plug-in, se trata de un player (reproductor) Flash.

EL HTML5 no necesita ningún tipo de plug-in, es interpretado por las últimas versiones de navegadores.

Las especificaciones del lenguaje HTML las realiza el consorcio W3C que es una comunidad de desarrolladores que establecen los estándares abiertos para el desarrollo de tecnologías Web.

De acuerdo a los creadores, el HTML5 puede ser entendido de dos maneras:

Plataforma Web que reúne diferentes tecnologías abiertas:

para la creación de aplicaciones Web que puedan ser utilizadas en un ordenador de escritorio, celulares, tablets, TV y cualquier otro tipo de dispositivo. Algo de lo que incluye es: especificación HTML5, Javascript, CSS3, SVG, geolocalización. Las tecnologías que conforman esta plataforma no están formalmente definidas y podrían variar en el tiempo.

Especificaciones HTML5:

se trata de la quinta versión de las especificaciones de HTML como ya dijimos por sus siglas en inglés.

El conjunto de tecnologías de HTML5 permite realizar aplicaciones Web interactivas on-line y off-line.

Por ejemplo, soporta:

• multimedia

• audioyvideo

• animaciones

• geolocalización

• guardar datos en el cliente

Estas tecnologías son soportadas por los modernos navegadores como: Firefox, Chrome, Safari, Internet Explorer y en todo tipo de dispositivos como celulares y tablets.

¿Dónde está la lógica?

El lenguaje de marcado es algo estático, una lista anidada de etiquetas.

La lógica es manejada con Javascript dentro de la etiqueta: <script>

Las tecnologías de HTML5 están separadas en los siguientes grupos:

Semántica

Las etiquetas son el alma de HTML.
Algunos ejemplos de etiquetas son: <canvas>, <video>, <audio>. Las etiquetas son interpretadas por los navegadores y es lo que determina cómo se verá la página y su contenido.
Las nuevas etiquetas permiten desplegar textos, secciones, imágenes, video y audio, animaciones en todo tipo de navegador y dispositivo sin que el usuario deba instalar plug-ins ni nada adicional.
Para el desarrollador, se traduce en un código más amigable, intuitivo y simple.

Off-line y almacenamiento
Esta tecnología permite guardar información en el cliente. De esta forma, la aplicación podría obtener datos de un servidor y guardarlos y procesarlos en el cliente para cuando el usuario se encuentre off-line.

Acceso a dispositivo

Posibilita la utilización de geolocalización, cámara y micrófono del dispositivo. Así como también lectura y escritura de archivos binarios y archivos de contacto y eventos en ciertos dispositivos.

Conectividad

Este grupo de tecnologías se focaliza en la interacción cliente/servidor, mediante la utilización de Web sockets para intercambio más rápido de datos que se traduce en chats y juegos multiusuario.

Multimedia

Esta característica consiste en la utilización de audio y video, directamente con el navegador sin necesidad de pluglns de ningún tipo.

Gráficos 3D y efectos

Conjunto de tecnologías: 2D Cativas, WobGL, SVG, 3D, permiten la realización do animaciones y efectos 2D y 3D.

Integración y performance

Estas tecnologías se orientan a lograr aplicaciones más robustas y con mejor performance (desempeño)

Resumen

• HTML5 es un conjunto de especificaciones y tecnologías abiertas que está en constante evolución.
• En HTML5, no se necesitan plug-ins.
• Presente en la mayoría de los últimos navegadores: Firefox, Chrome, Safari, Internet Explorer, etc.
• Soportado por la mayoría de dispositivos: PC de escritorio,celulares, tablets y TV interactiva.
• Javascript es el lenguaje de programación de HTML5.
• Las especificaciones están agrupadas en tecnologías: semántica, off-line y almacenamiento, acceso a dispositivo, conectividad, multimedia, gráficos 3D y efectos, integración y performance, CSS3.

Primeros pasos con HTML 5

Existen principios que sigue la W3C ( https://www.w3.org/  consorcio que agrupa todo tipo de organizaciones: gubernamentales, empresariales y sin fines de lucro. Entre ellos,
establecen cuáles son los estándares de la Web  ) para desarrollar las especificaciones de HTML5. Se establecieron categorías para cada uno de los principios.

Podemos encontrar los mismos en inglés en: http://www.w3.org/TR/html-design-principles/

El concepto básico es: NO ROMPER LA WEB.

Compatibilidad   Utilidad  Interoperabilidad  Acceso universal

Estructura de una página HTML

Tipo de documento

La página HTML es en donde se encuentra todos los datos para que el navegador despliegue la página. Lo primero es declarar que la página es un HTML para que el navegador la reconozca como tal.

La primera marca para HTML5 ha sido simplificada con respecto a versiones anteriores y es simplemente:

Raíz <html>

La estructura de una página HTML es muy similar a la de una estructura de árbol. El nodo que contiene a todos los demás, el nodo raíz. Para el caso de una página Web, el nodo raíz es:

Definición del lenguaje

En la etiqueta <html>, se puede definir el lenguaje mediante el atributo: lang este atributo se le indica al navegador el lenguaje por defecto de la página.
El código nos quedaría de esta manera por ahora:

<!DOCTYPE html>
<html lang="es">
</html>

En nuestro caso, hemos especificado el lenguaje en español. Es una buena práctica definir el lenguaje en la etiqueta <html>, ayuda por ejemplo a los motores de búsqueda para agregar a los resultados aquellas que coincidan con un idioma determinado.

Todo está en la cabeza <head>

Prosiguiendo con la estructura básica de nuestro HTML, llegamos a la cabeza.
Se trata de la etiqueta <head> que es hija de la etiqueta <html>.

<!DOCTYPE html>
<html lang="es">

<head>
</head>

</html>

En ella, se introducen los datos relativos a la página Web en sí misma. Veremos algunas configuraciones a continuación.

Para indicarle al navegador el tipo de codificación a utilizar independientemente de la codificación que se utilice en la máquina del usuario, es a través de la etiqueta <meta> con el atributo charset. Los caracteres ingleses y latinos y una gran cantidad de otros caracteres están contemplados en la codificación: UTF-8. Es prácticamente una codificación universal que siempre nos servirá.

<meta>

La innovación de este elemento en HTML5, como en la mayoría de los casos, es solo simplificación. La nueva etiqueta <meta> para la definición del tipo de caracteres es más corta y simple. Por supuesto, podemos cambiar el tipo utf-8

utf-8 : 8-bit Unicode Transformation Format

Sus características principales son

Es capaz de representar cualquier carácter Unicode.

Usa símbolos de longitud variable (de 1 a 4 bytes por carácter Unicode).

Incluye la especificación US-ASCII de 7 bits, por lo que cualquier mensaje ASCII se representa sin cambios.

Incluye sincronía. Es posible determinar el inicio de cada símbolo sin reiniciar la lectura desde el principio de la comunicación.

No superposición. Los conjuntos de valores que puede tomar cada byte de un carácter multibyte, son disjuntos, por lo que no es posible confundirlos entre sí.

para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

Definición y uso
La etiqueta <meta> define metadatos* sobre un documento HTML.

(*  La búsqueda de conjuntos de datos: saber qué datos existen, qué datos hay disponibles de una cierta zona, de un tema determinado, a una escala, de una fecha o en general de unas características específicas que el usuario demanda.)

El código quedaría de esta manera:

<!DOCTYPE html>
<html lang="es">

<head>
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”HTML5, CSS3, Javascript”>

</head>

</html>

Las etiquetas que definen las secciones comienzan con <  > y finalizan con </  >, hasta aquí vamos realizando nuestro diseño, paro aun no se puede representar nada en la página, esto es solo el protocolo que debe de leerse antes de mostrar la información.

Título <title>

Esta etiqueta determina el título de la página. Típicamente, aparecerá en la barra del título en nuestro navegador y en los resultados de un buscador.

<!DOCTYPE html>
<html lang="es">

<head>
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”HTML5, CSS3, Javascript”>

        <title>Conociendo HTML5</title>

</head>

</html>

Hasta el momento tenemos un código simple pero con una estructura compleja. Esto es porque el código HTML no está formado por un conjunto de instrucciones secuenciales. HTML es un lenguaje de etiquetas, un listado de elementos que usualmente se utilizan en pares y que pueden ser anidados (totalmente contenidos uno dentro del otro). En la primera línea del código del Listado tenemos una etiqueta simple con la definición del tipo de documento e inmediatamente después la etiqueta de apertura <html lang="es">. Esta etiqueta y la de cierre</html> al final del listado están indicando el comienzo del código HTML y su final. Entre las etiquetas <html> insertamos otras etiquetas especificando dos importantes partes de la estructura básica: <head> para la cabecera y <body> para el cuerpo del documento. Estas dos etiquetas también se utilizan en pares. 

¡La etiqueta <title> es obligatoria en los documentos HTML!

¡El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden al enumerar las páginas en los resultados de búsqueda.

El elemento <título>:

• define un título en la barra de herramientas del navegador

• proporciona un título para la página cuando se agrega a favoritos

• muestra un título para la página en los resultados del motor de búsqueda

A continuación se ofrecen algunos consejos para crear buenos títulos:

Elija un título descriptivo más largo (evite títulos de una o dos palabras)
Los motores de búsqueda mostrarán entre 50 y 60 caracteres del título, así que trate de no tener títulos más largos que eso.
No utilice solo una lista de palabras como título (esto puede reducir la posición de la página en los resultados de búsqueda).

Poniendo el cuerpo <body>

Dentro de la etiqueta <body>, se coloca gran parte de lo que el usuario verá u oirá, como textos, imágenes, video, audio, párrafos.
Esta etiqueta viene inmediatamente después que la etiqueta <head>. Si hacemos un paralelo con Flash, el <body> podría relacionarse con el stage (escenario).
Es donde se despliegan los textos, imágenes, video y audio.

Utilizaremos la etiqueta <p> de párrafo para desplegar el saludo sublime:

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”HTML5, CSS3, Javascript”>

        <title>Conociendo HTML5</title>

</head>
<body>

    <p>Hola Mundol</p>

</body>

</html>

Definición y uso

La etiqueta <body> define el cuerpo del documento.

El elemento <body> contiene todo el contenido de un documento HTML, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc.

Nota: Sólo puede haber un elemento <body> en un documento HTML.

y se le pueden ingresar mas valores conforme avancemos se veran y los incluiremos

Pasemos estas instrucciones a  un archivo con terminación html y podremos probar nuestro primer código en cualquier navegador, ejemplo1.html:

Al leerlo en un cualquier navegador se vería así:

Localiza los elementos establecidos en el código anterior. (para revisar lo elementos dentro de <head> y el contenido de meta, presiona la tecla F12 de tu navegador y los veras del lado derecho selecciona las etiquetas,  el navegador los lee y los interpreta, lo que queramos que se vea esta en <body>, tomaremos este aspecto cuando lleguemos a JavaScript

Algo simple pero iremos aumentando las características, aquí vemos el resultado de lo realizado hasta el momento, pero aun falta mas...

Creando una página HTML5

La base fundamental a la hora de crear una página HTML es la utilización de los elementos de marcado o etiquetas. Estas etiquetas son las que dan estructura a la página Web. Por otro lado, tenemos lo que da estética a esta estructura en lo que respecta a color, tamaño, ubicación. Es aquí donde entra en juego el CSS (Cascade SheetStyle) que significa: hojas de estilo en cascada.
Veamos de qué se trata para hacernos de las herramientas básicas para crear y estilizar una página HTML.

La estructura de una pagina web tiene parecido a la de un árbol invertido

Además de la estructura de árbol, también se utiliza la metáfora de parentescos.
Así, el nodo que contiene a otro es el padre (parent).

El nodo, que es contenido por otro, es el hijo (child) y los nodos que son hijos de un mismo padre son hermanos entre sí (sibling).

El primer elemento que conoceremos es el <div>. Podemos entender al <div> (de división) como un contenedor de uso genérico de un documento HTML.

El elemento <div> comenzó a dominar la escena. Con el surgimiento de webs más interactivas y la integración de HTML, CSS y Javascript, el uso de <div> se volvió una práctica común. Pero este elemento, no provee demasiada información acerca de las parte del cuerpo que está representando. Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir entre las etiquetas de apertura y cierre de un elemento <div>. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como la celda de una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es su propósito o qué contiene.

Las estructuras que conforman nuestra página deben tener sentido, ser predecibles y deben dar a entender sin dudas: el propósito.

Supongamos que un cliente nos solicita realizar un sitio sobre artículos de lugares para visitar

La estructura básica sería la siguiente:
Encabezado - Título del artículo.
Contenido - El contenido propiamente dicho.
Pie - datos del sitio, derechos del autor, vías de contacto.
Con los div, podrías representar esta estructura de la siguiente manera:

<div id="encabezado"/>
<div id="contenido"/>
<div id="pie"/>

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

</head>
<body>

    <div id="encabezado">
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </div>

    <div id="contenido">
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </div>

   <div id="pie">
              <p>Todos los derechos reservados</p>
   </div>

</body>

</html>

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> establecen tamaños definidos de tipografías, comenzando por las de mayor tamaño <h1>, a medida que aumenta el número de la etiqueta disminuye el tamaño de la tipografía siendo <h6> la más pequeña.

Definición y uso
La etiqueta <div> define una división o sección en un documento HTML.

La etiqueta <div> se utiliza como contenedor para elementos HTML, a los que luego se les aplica estilo con CSS o se manipula con JavaScript.

La etiqueta <div> se puede diseñar fácilmente utilizando el atributo class o id.

¡Se puede colocar cualquier tipo de contenido dentro de la etiqueta <div>!

Nota: De forma predeterminada, los navegadores siempre colocan un salto de línea antes y después del elemento <div>.

ahora realicemos el siguiente que le llamamos ejemplo2.html

y el resultado se vería así:

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<header>

Uno de los nuevos elementos incorporados en HTML5 es <header>.

El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento.

Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es usado solo para el cuerpo o secciones específicas dentro del cuerpo.

Lo primero es lo primero (sí, pura lógica). Encabezado en inglés se dice: header.
No es casualidad que la etiqueta que se utiliza para el encabezado se llame justamente: header.
Así que reemplazamos la etiqueta <div> por <header>.

Propósito:

Encabezar la página o una sección de un bloque de contenido o sección.
Eventualmente, ser un contenedor de títulos y subtítulos.

le llamamos ejemplo3.html

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

</head>
<body>

    <header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>

    <div id="contenido">
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </div>

   <div id="pie">
              <p>Todos los derechos reservados</p>
   </div>

</body>

</html>

Definición y uso

El elemento <header> representa un contenedor para contenido introductorio o un conjunto de enlaces de navegación.

Un elemento <header> normalmente contiene:

uno o más elementos de encabezado (<h1> - <h6>)
logotipo o icono
información de autoría

Nota: Puede tener varios elementos <header> en un documento HTML. Sin embargo, <header> no se puede colocar dentro de un <footer>, <address> u otro elemento <header>.

el resultado:

Hábitat y costumbres:

Lo encontrarás habitualmente al comienzo de un sitio Web. Se le suelen insertar logos, el del nombre del sitio, campo de búsqueda e imagen que encabeza el sitio.
Otro de sus hábitats es la <article>. Si el elemento <article> lleva título y subtítulo, se los representa dentro de un elemento agrupador <hgroup> de etiquetas <hl> a <h6 -.
y la diferencia con div es que puede convivir, además, con imágenes y otros elementos.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<hgroup>

Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de cada <article>, incorporamos elementos <h1> para declarar un título. Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de cabecera para cada parte del documento, pero es normal que necesitemos también agregar subtítulos o más información que especifique de qué se trata la página web o una sección en particular. De hecho, el elemento <header> fue creado para contener también otros elementos como tablas de contenido, formularios de búsqueda o textos cortos y logos.

Esto aplica a nuestro caso y la etiqueta header nos quedaría de esta manera:

<header>
            <hgroup>

             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
             </hgroup>

</header>

Se lo suele encabezar con la etiqueta <header> y se lo finaliza con la etiqueta <footer>.

Una ventaja de utilizar las etiquetas semánticas que para los robots de búsqueda quedará claro que el <header> es el encabezado de un artículo y que dentro de la etiqueta hgroup, las etiquetas heading con menor número serán las más importantes y representativas del contenido.

Propósito:

Agrupar un grupo consecutivo de etiquetas heading.

Costumbres:

Lo encontrarás dentro de la etiqueta <header>.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<footer>

Así como tenemos un encabezado tenemos el pie de página que en inglés se dice: footer. Este elemento puede contener por ejemplo:
datos del autor, hipervínculos a las redes sociales, copyright, hipervínculos a los principales contenidos del sitio.

<footer>
<h5>Todos los derechos reservados</h5>
</footer>

Es importante resaltar que no es necesario emplear un solo ' <footer> por sitio o página. Este elemento puede ser utilizado en diferentes secciones de una misma página.
Propósito:

Representar el pie de una página o sección.
Costumbres:

Lo verás al pié de una página web o una sección. Muchas veces es la contrapartida de <header>.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<article>

Cuando un contenido posee significado por sí mismo y, en caso de separarlo de la estructura donde está, sigue teniendo sentido, es el candidato a ser insertado dentro de una etiqueta: <article>.
Se entiende a <article> como una pieza de contenido independiente.
Esta etiqueta, a su vez, se suele utilizar con un encabezado, contenido y pie de página. Es decir que puede estar compuesto por las etiquetas header y footer.
Algunos ejemplos de <article> son: una publicación en un foro, un artículo de un sitio especializado.

Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de esas partes.

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>

    <div id="contenido">
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </div>

   <footer>
           <h5>Todos los derechos reservados</h5>
   </footer>
</article>

En este caso, queda claro que se trata de un bloque o pieza de contenido independiente que puede ser movido o utilizado en cualquier parte sin que pierda sentido.

Propósito:
Ser utilizado como un contenido independiente que conforma en sí mismo una unidad de contenido.

Costumbres:

Se lo encuentra en artículos especializados, publicaciones en foros y redes sociales, notas periodísticas, entradas de blog.
Puede funcionar independiente del contexto en donde se encuentre. Es decir, puede ser separado y utilizarse aislado o insertarlo en otro conjunto de contenido y seguirá teniendo sentido.

Definición y uso

La etiqueta <article> especifica contenido independiente y autónomo.
Un artículo debe tener sentido por sí solo y debe ser posible distribuirlo independientemente del resto del sitio.

Fuentes potenciales para el elemento <article>:
Publicación en el foro

Entrada en el blog

Noticia

Nota: El elemento <article> no se muestra como nada especial en un navegador. Sin embargo, puedes usar CSS para darle estilo al elemento <article>.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<section>

Su significado es sección. Lo que hace es separar diferentes contenidos que en conjunto conforman una unidad.

Pero a diferencia de <article>, una sección no es independiente. Si se sustrae un elemento <section> de un contenido, este último se ve afectado, es decir, pierde su sentido o queda incompleto.

Agregaremos las siguientes secciones a nuestro artículo:

— Información general
— Acceso
— Admisión
— Horarios

Lo que haremos es no utilizar la etiqueta <div>, utilizaremos un <section> por cada una de las secciones. Cada una de las secciones tendrán un título con la etiqueta: <h4> y, a continuación, el texto correspondiente

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> Entrada general: $90.00 </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: https://ventadeboletosenlinea.inah.gob.mx/</p>
   </section>

entonces quedaría de esta forma, y pasamos a un archivo .html , lo llamaremos ejemplo4.html:

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> Entrada general: $90.00 </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: https://ventadeboletosenlinea.inah.gob.mx/</p>
   </section>

y el resultado es:

Actividad relaciona lo que se observa en la pagina y las diferentes secciones que se han explicado, y realiza un pequeño reporte de lo que observas.

la etiqueta <section> es necesaria para contener la información más relevante.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<figure>

La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora de declarar el contenido del documento. Antes de que este elemento sea introducido, no podíamos identificar el contenido que era parte de la información pero a la vez independiente, como ilustraciones, fotos, videos, etc… Normalmente estos elementos son parte del contenido relevante pero pueden ser extraídos o movidos a otra parte sin afectar o interrumpir el flujo del documento.

No nos debe confundir el nombre, aunque sea figure (figura), no se limita únicamente a la utilización de imágenes. Y, además, esta etiqueta soporta más de un elemento.

Este elemento está pensado para que sea un dato adicional al contenido principal, pero si se suprime, el contenido principal no debe perder sentido. Se lo debe considerar como un elemento "flotante", es decir que pueda ser ubicado cerca del texto sin que por su posición altere el sentido del contenido principal.
Si la posición y orden es crucial, como en el caso de un tutorial con imágenes paso a paso. Esta etiqueta no debería ser utilizada.

Dentro de esta etiqueta, se suele utilizar la <figcaption>. La misma cumple el rol de ser la leyenda del o los elementos contenidos en <figure>. Puede haber etiqueta <figcaption> dentro de <figcaption>. Debe como primer o último hijo de <figure>, debera de descargar una imagen del castillo de Chapultepec y crear un directorio llamado images1 (u otro nombre pero tenga en cuenta que debera de referirse a ese directorio para "llamar" a la imagen y sea mostrada). realice esto con el nombre de ejemplo5.html

añadimos algo nuevo los comentarios en html5 <!--  -->

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> Entrada general: $90.00 </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: https://ventadeboletosenlinea.inah.gob.mx/</p>
   </section>

el resultado (la imagen se debera ajustar al tamaño que se apropiado, posteriormente se indicara la forma de realizarlo), pero en general se vera asi:

Puedes ubicar el resultado de la etiqueta <figcaption>  </figcaption>

Propósito:
Mostrar un elemento adicional en apoyo a un contenido principal, pero  sin jugar un rol indispensable. La idea es que <figure> pueda ser removido o ubicado en una posición “flotante” con respecto al contenido al que está vinculado a nivel de temática, sin que importe en dónde debo presentar.

Hábitat y costumbres:

Se lo suele encontrar dentro de la etiqueta <article> o <section>.
Es habitual encontrar como hijo de <figure> el elemento  <figcaption> cuyo propósito es describir el contenido de <figure> y formar con el mismo una unidad de contenido.

HTML5 fue desarrollado con la intención de simplificar, especificar y organizar el código. Para lograr este propósito, nuevas etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS y Javascript. Estas incorporaciones y mejoras de versiones previas están relacionadas no solo con nuevos elementos sino también con cómo usamos los ya existentes.

Sintaxis de imágenes HTML

<img src="images1/chapultepec.jpg" alt="Castillo de Chapultepec" />  
La etiqueta HTML <img> se utiliza para incrustar una imagen en una página web.

Técnicamente, las imágenes no se insertan en una página web; Las imágenes están vinculadas a páginas web. La etiqueta <img> crea un espacio de almacenamiento para la imagen a la que se hace referencia.

La etiqueta <img> está vacía, contiene solo atributos y no tiene una etiqueta de cierre.

La etiqueta <img> tiene dos atributos obligatorios:

src: especifica la ruta a la imagen.
alt: especifica un texto alternativo para la imagen.

El atributo src requerido especifica la ruta (URL) a la imagen.

Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrese de que la imagen permanezca en el mismo lugar en relación con la página web; de lo contrario, sus visitantes verán un ícono de enlace roto. El icono de enlace roto y el texto alternativo se muestran si el navegador no puede encontrar la imagen

El atributo alt requerido proporciona un texto alternativo para una imagen, si el usuario por algún motivo no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario usa un lector de pantalla).
El valor del atributo alt debe describir la imagen.

Imágenes en otra carpeta
Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el atributo src:  src="images1/chapultepec.jpg"

Algunos sitios web apuntan a una imagen en otro servidor.

Para apuntar a una imagen en otro servidor, debe especificar una URL absoluta (completa) en el atributo src:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Notas sobre imágenes externas: Las imágenes externas pueden estar protegidas por derechos de autor. Si no obtiene permiso para usarlo, es posible que esté infringiendo las leyes de derechos de autor. Además, no puedes controlar las imágenes externas; pueden eliminarse o cambiarse repentinamente.

Imágenes animadas
HTML permite GIF animados:

<img src="programming.gif" alt="Computer Man" >

(los gif animados se realizan de forma independiente y se realizan con un softwarwe para ese proposito)

Imagen como enlace
Para usar una imagen como enlace, coloque la etiqueta <img> dentro de la etiqueta <a>:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial">
</a>

Formatos de imagen comunes
Estos son los tipos de archivos de imagen más comunes, compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<span>

La etiqueta HTML <span> se utiliza para agrupar y aplicar estilos a elementos en línea.

Hay una diferencia entre la etiqueta span y la etiqueta div. La etiqueta span se usa con elementos en línea, mientras que la etiqueta div se usa con contenido a nivel de bloque.

ejemplo6.html

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> <span style = "color:#FF0000;">Entrada general: $90.00</span> </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: https://ventadeboletosenlinea.inah.gob.mx/</p>
   </section>

Resultado :

en esta linea <span style = "color:#FF0000;">Entrada general: $90.00</span> establece que el color del texto es de color rojo, #FF0000 esta formado por 3 numeros en hexadecimal, que coresponden al sistema RGB (RED, GREEN, BLUE), el primer munero corresponde al hexadecimal FF rojo, 00 verde, 00 azul, la combiacion de ellos (son los colores primarios) podemos hacer todas la combianaciones que podemos imaginar FF es el valor mas alto y 00 el valor mas bajo #000000 es el negro #FFFFFF es el blanco.

Los tres colores primarios, rojo, verde y azul, están elaborados con una mezcla la mayor intensidad del color deseado con la menor intensidad de los otros dos:

Con los navegadores modernos para toda la gama de color de 24 bits, 16.777.216 colores diferentes posibilidades. Utilice el selector de color para explorar todas 16,7 millones de ellos, o si esto es demasiado muchos, revise las tablas de colores para la selección de las paletas.

Soporte del Navegador

Chrome     Firefox    IE    Ópera    Safari    Android Seamonkey

    Sí             Sí         Sí      Sí          Sí              Sí           Sí

<mark>

La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda. El elemento <mark> resaltará la parte del texto que concuerda con el texto buscado, ejemplo7.html:

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> <span style = "color:#FF0000;"><mark>Entrada general: $90.00</mark></span> </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <mark>https://ventadeboletosenlinea.inah.gob.mx/ </mark></p>
   </section>

esta etiqueta se sobrepone al texto que se haya indicado.

En el pasado, normalmente obteníamos similares resultados usando el elemento <b>. El agregado de <mark> tiene el objetivo de cambiar el significado y otorgar un nuevo propósito para éstos y otros elementos relacionados:

· <em> es para indicar énfasis
· <strong> es para indicar importancia.
· <mark> es para resaltar texto que es relevante de acuerdo con las circunstancias.
· <b> debería ser usado solo cuando no hay otro elemento más apropiado para la situación (bold negitas).

probemos estos, en ejemplo8.html

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4><em>Acceso:</em></h4>
               <p>Si utilizas el S. T. C. Metro,<strong> las estaciones más cercanas son:</strong> </p>
               <p><b>Chapultepec - línea 1. </b>Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> <span style = "color:#FF0000;"><mark>Entrada general: $90.00</mark></span> </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <mark>https://ventadeboletosenlinea.inah.gob.mx/ </mark></p>
   </section>

resultado:

Puedes ubicar el resultado de las etiquetas?

<address>

El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podría ubicarse perfectamente en algunas situaciones en las que debemos presentar información de contacto relacionada con el contenido del elemento <article> o el cuerpo completo.

Este elemento debería ser incluido dentro de <footer>, como en el siguiente ejemplo:

probemos estos, en ejemplo9.html

<!DOCTYPE html>
<html lang="es">

<head>
        
         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>

        <title>Conociendo HTML5</title>

<article>
<header>
             <h1>Castillo de Chapultepec</h1>
             <h3>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas​ y un diseño arquitectónico principalmente barroco y neoclásico.</h3>
    </header>
    <section>

           <h4> Informacion general del Castillo </h4>   
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4><em>Acceso:</em></h4>
               <p>Si utilizas el S. T. C. Metro,<strong> las estaciones más cercanas son:</strong> </p>
               <p><b>Chapultepec - línea 1. </b>Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4> <span style = "color:#FF0000;"><mark>Entrada general: $90.00</mark></span> </h4>
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <mark>https://ventadeboletosenlinea.inah.gob.mx/ </mark></p>
   </section>

El resultado:

El final de la página observaras el resultado incluso si haces clic te llevara a la pagina de referencia indicada ahí.

<a>

Hemos agregado dentro la etiqueta <address> </address>, otra nueva etiqueta <a href=”https://es.wikipedia.org/wiki/Castillo_de_Chapultepec”>El castillo de Chapultepec</a> esta se refiere al un enlace o "link" a otra página para hacer una referencia a ese sitio, para este caso usamos la etiqueta <a href > </a>

<a href="https://alguna_direccion_web">Descripcion de dicha página</a>

Definición y uso

La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra.

El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace.

De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:

Un enlace no visitado está subrayado y en azul.

Un enlace visitado está subrayado y en color violeta.

Un enlace activo está subrayado y en rojo.

Consejos y notas

Consejo: si la etiqueta <a> no tiene atributo href, es solo un marcador de posición para un hipervínculo.

Consejo: una página vinculada normalmente se muestra en la ventana actual del navegador, a menos que especifique otro destino.

para abrir la pagina en otra ventana del navegador:

<a href="https://es.wikipedia.org/wiki/Castillo_de_Chapultepec" target="_blank">Más Información del castillo de Chapultepec</a>

para hacer referencia para enviar un correo a:

<a href="mailto:algun_correo@xyz.com">Enviar correo</a>

Tu agrega esta última linea a la página donde creas conveniente, no hay una preferencia o regla donde puede ir.

Para realizar un enlace en la misma pagina, primero deberías de indicar en el destino de la referencia por ejemplo, en la pagina esta el tema:

y en el menú inicial o donde se hace la referencia hacia ese tema:

observen que el # esa al inicio del nombre de la etiqueta para que haga referencia a esa "etiqueta" y "vaya" a ese sitio.

<aside>

En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>:

podemos decir que las entradas del blog son relevantes pero los enlaces y las pequeñas reseñas sobre esas entradas son solo una ayuda para la navegación pero no lo que al lector realmente le interesa, prácticamente solo se usa en blog.

ejemplo10.html

El resultado:

Otro elemento nuevo es:

<blockquote> </blockquote>

La etiqueta <blockquote> especifica una sección citada de otra fuente.

Los navegadores suelen aplicar sangría a los elementos <blockquote>

RESUMEN DE ESTA SECCION

Referencia rápida

En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito.

La especificación también incluye algunos elementos con la única tarea de proveer estilos.

Esta es una lista de los que consideramos más relevantes:

<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…

<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.

<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…

<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…

<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo,una cabecera con título y subtítulo).

<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.

<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.

<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).

<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.

Tablas en HTML

Las tablas HTML permiten a los desarrolladores web organizar los datos en filas y columnas.

Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.

un ejemplo de ello es:

Definición de una tabla es con <table> y </table>, contienes parametros como : width="70%" indica el ancho ocupado de la pantalla, cellspacing="2", Cambia el espacio entre las celdas con la propiedad de espaciado de bordes, es decir la separación entre las celdas, cellpadding="2"  especifica el espacio entre el contenido de la celda y sus bordes,  border="1"   las tablas HTML pueden tener bordes de diferentes estilos y formas.

Encabezados de tabla

A veces desea que sus celdas sean celdas de encabezado de tabla. En esos casos utilice la etiqueta <th> </th>

Filas de la tabla

Cada fila de la tabla comienza con <tr> y termina con </tr>

Celdas de tabla

Cada celda de la tabla está definida por un <td> y un </td>

La etiqueta <tbody> se utiliza para agrupar el contenido del cuerpo en una tabla HTML.

realicen un solo archivo de html de nombre ejemplo10a.html, con los parámetros necesarios para presentar lo siguiente:

(es el código anterior aplicado a la pagina)

Y modifiquen cellspacing="2" cellpadding="2" border="1" con diferentes valores y observen el efecto, y enviarlo con el nombre ejemplo10b.html y su captura de pantalla.

Ahora revisemos lo siguiente:

rowspan="1" En una tabla HTML con una celda que abarca una, dos, tres...  filas el numero entre "" son las filas que abarca.

colspan="2"  En una tabla HTML con una celda que abarca dos o mas columnas  

valign="top" Propiedad establece la alineación vertical (como superior (top), inferior (bottom) o media (middle)) del contenido en th o td.  

align="center", align="left" , align="rigth" align="justify" La etiqueta se usó en desde HTML4 para alinear el texto al centro, izquierda y derecho.

si necesitamos varios atributos por celda podemos usarlo asi: <td valign="top" align="justify">

Agregue esta secuencia a los ejemplos que venimos realizando y guardelo como ejemplo11.html, y el resultado:

Actividad cambien la alineación del texto de las celdas, las del lado derecho centrenlas y coloquenlas a la mitad de la celda, en lugar de  arriba (top)

(evidencia envíen el archivo, y una captura de pantalla)

Listas no numeradas

Definición y uso

La etiqueta <ul> define una lista desordenada (con viñetas solidas circualres, si se requiere de otra forma las viñetas se usa con CSS, mas adelante se explica CSS).

<ul style="list-style-type:disc">

Utilice la etiqueta <ul> junto con la etiqueta <li> para crear listas desordenadas.

agregue este código a la pagina que estamos realizando y se mostrara de esta forma:

envien este diseño con el nombre de ejemplo12.html

Listas Numeradas

La etiqueta HTML <ol> define una lista ordenada. Una lista ordenada puede ser numérica o alfabética.

Los elementos de la lista estarán marcados con números de forma predeterminada:

<ol>
  <li>Café</li>
  <li>Te</li>
  <li>Leche</li>
</ol>

Lista HTML ordenada: el atributo de tipo
El atributo de tipo de la etiqueta <ol> define el tipo de marcador de elemento de lista:

Para indicar un color de fondo en toda la tabla se hace desde la etiqueta table, de color gris #c0c0c0, bgcolor significa background color,  de la siguiente manera:

Números:

Letras mayúsculas

Letras Minúsculas

Números romanos en mayúsculas:

Números romanos en minúsculas:

Conteo de lista de control
De forma predeterminada, una lista ordenada comenzará a contar desde 1. Si desea comenzar a contar desde un número específico, puede usar el atributo start:

Las listas se pueden anidar (lista dentro de la lista):

para nuestro ejemplo seria asi:

El resultado como ejercicio13.html

Repitan la ultima forma con los diversos tipos de listas ordenadas.

Tamaño de la imagen

Ahora podemos modificar el tamaño de la imagen

<figure>
<!-- estos elementos hacen un comentario en html5 -->
<!-- imagen a la que se hace refencia y una descripcion --> <img src="images1/chapultepec.jpg" alt="Castillo de Chapultepec" width="974" height="730"> <figcaption>Esta es una fotografía
del interior del castillo de Chapultepec</figcaption> </figure>

Establece Ancho (width) y Altura,(height) con sus repectivos limites de la image

si desean colocar letra cursiva las etiquetas son <i> ... </i>,  y se hace de esta manera:

<h4><i>Horarios : </i></h4>

para letras negritas las etiquetas son <b> ... </b> :

<p><b>El museo informa:</b> ..................</p>

para establecer el color de fondo de la pagina y otros atributos:

El atributo oncontextmenu se activa cuando el usuario hace clic derecho en un elemento para abrir el menú contextual. Nota: Aunque el evento oncontextmenu es compatible con todos los navegadores, el atributo contextmenu actualmente solo es compatible con Firefox. Esta línea oncontextmenu="return false"; dice claramente que ha desactivado intencionalmente el clic derecho. Para habilitar el clic derecho, debe eliminar este atributo.

style="color: rgb(0, 0, 0);  es el color por defecto del texto a usar  (negro).

background-color: rgb(255, 255, 204);" color de fondo de la página en este caso el tono de amarillo que ves en esta página

vlink="#551a8b" es el color de los sitios que ha visitado, subrayado y purpura.

text="windowtext"   es el color del texto en el área de una ventana, en este caso negro.

link="#0000ee" es el color del enlace antes de visitarlo, subrayado y azul.

alink="#ee0000" es el color del enlace que esta activo y se ve de color rojo               

bgcolor="#000000"  color de fondo del texto.                

puedes escoger el color que mejor se mezcle con la información mostrada en este caso puse este color en ejercicio14.html:

Formulas matematicas

Uno de los problemas que se pueden enfrentar es la representación de formulas matemáticas, como la siguiente:

$\sqrt{35}-\cos\left({30}\right)$

en este caso el código es:

para esta situación hay asistentes en los franework que permiten la edicion de estos elementos tan particulares, en el caso de seamonkey esta en Insertar -> Expresión Matemática ... lo que le llevara a una ventana donde están los diferentes símbolos matemáticos y va armando la ecuación y se inserta en la página.

Evidencia de esta unidad:

Presentar/Enviar un diseño de una pagina WEB, tema libre, con los elementos vistos hasta este momento, entre mas elementos contenga mejor, usando el nombre de unidad1.html, incluyendo nombre y datos necesarios en el contenido de la pagina (encabezado)