1

2
ÍNDICE
1. ¿Qué es HTML?..............................................................................................................................6
1.1 - Que es HTML y la web...........................................................................................................6
¿Qué es html? .............................................................................................................................6
¿Cómo es html?...........................................................................................................................8
1.2 - Historia de HTML y las especificaciones................................................................................9
HTML5.....................................................................................................................................10
1.3 La guerra de navegadores y la sintaxis de HTML...................................................................12
ACTUALIDAD........................................................................................................................13
SINTAXIS.................................................................................................................................14
Etiquetas...............................................................................................................................14
contenido..............................................................................................................................14
atributos................................................................................................................................14
etiquetas self-closing............................................................................................................14
2. Empezar con HTML......................................................................................................................14
2.1 Estructura básica de una página web.......................................................................................14
ETIQUETAS BÁSICAS...........................................................................................................18
ENCABEZADOS.................................................................................................................18
ETIQUETAS DE SECCIÓN................................................................................................18
2.2 ¿Qué editor de código debo usar?............................................................................................19
CREANDO LA PRIMERA PAGINA EN EL EDITOR............................................................19
2.3 - Mi primera pagina web con EDteam.....................................................................................20
El <title>...................................................................................................................................20
El meta name="description".....................................................................................................20
<meta charset="UTF-8">..........................................................................................................20
<link rel="stylesheet" href="estilos.css">................................................................................20
<script src="scripts.js"></script>..............................................................................................21
<link rel="shortcut icon" href="favicon.png">.........................................................................21
2.4 Elementos HTML de sección...................................................................................................21
Desactivar código comentandolo..............................................................................................22
barra de navegación <nav>.......................................................................................................22
3. AGRUPACIÓN DE CONTENIDO................................................................................................24
3.1 Etiquetas HTML de contenido.................................................................................................24
Listas anidadas..........................................................................................................................24
Listas de definición...................................................................................................................25
figure y figcaption.....................................................................................................................25
Otros elementos.........................................................................................................................26
Divisiones (Layout)...................................................................................................................27
3.2 Práctica: Agrupación de contenido..........................................................................................28

3
4. ELEMENTOS DE TEXTO Y ENLACES.....................................................................................31
4.1 Elementos HTML inline y de bloque.......................................................................................31
Elementos de texto comunes....................................................................................................32
4.2 Los enlaces...............................................................................................................................33
¿Cómo definir las rutas?..........................................................................................................33
Rutas relativas. En la misma carpeta....................................................................................34
Rutas relativas. A una subcarpeta.........................................................................................34
Ruta relativa a la raiz............................................................................................................34
4.3 Los marcadores........................................................................................................................35
¿Cómo se hacen los marcadores?..............................................................................................35
Atributo target...........................................................................................................................36
5. IMÁGENES...................................................................................................................................36
5.1 Imágenes en HTML.................................................................................................................36
Tipos y formatos de imágenes...................................................................................................36
Como se inserta una imagen.....................................................................................................36
5.2 Viewport y device Pixel Ratio.................................................................................................37
5.3 Picture y atributo srcset............................................................................................................38
Etiqueta picture.........................................................................................................................38
6. SEMÁNTICA Y MICRODATOS..................................................................................................39
6.1 Microdatos y OpenGraph.........................................................................................................39
OpenGraph................................................................................................................................42
7. TABLAS.........................................................................................................................................43
7.1 Tablas HTML...........................................................................................................................43
Etiquetas <table> , <tr> y <td>.................................................................................................43
Encabezado y partes de la tabla <th>, <thead>, <tbody> y <tfoot>.......................................44
7.2 Agrupación de celdas...............................................................................................................45
Agrupar celdas de la misma fila................................................................................................45
Agrupar celdas de la misma columna.......................................................................................46
Título de la tabla con <caption>...............................................................................................47
Estilos con CSS.........................................................................................................................47
Dar diseño a filas.......................................................................................................................48
Dar diseño a columnas. <colgroup> y <col>............................................................................48
8. FORMULARIOS...........................................................................................................................49
8.1 Formularios HTML..................................................................................................................49
Elementos html: <form>, <input>, <label>, <button>.............................................................50
Ejemplo de Javascript con el atributo value..............................................................................52
8.2 Tipos de input...........................................................................................................................53
Atributo placeholder.................................................................................................................53
8.3 Otros elementos de formularios. Campos de selección y atributos.........................................53

4
 <fieldset> y <legend>..............................................................................................................53
Tipos Checkbox y radio...........................................................................................................54
Listas de selección con <select>...............................................................................................55
Elemento <textarea>.................................................................................................................56
Atributos importantes................................................................................................................57
9. MULTIMEDIA...............................................................................................................................57
9.1 Videos en HTML.....................................................................................................................57
Botones de reproducción con Javascript...................................................................................58
9.2 Audio en HTML.......................................................................................................................59
10. INTERACTIVIDAD Y CONTENIDO EMBEBIDO..................................................................60
10.1 Contenido interactivo en HTML5.2.......................................................................................60
El elemento <details> ...............................................................................................................60
El elemento <dialog>................................................................................................................60
10.2 Contenido embebido en HTML.............................................................................................62
11. CIERRE DEL CURSO.................................................................................................................63
11.1 ¿Cómo mantenerse actualizado..............................................................................................63
La W3C.....................................................................................................................................64
La WHATWG...........................................................................................................................64
Caniuse.com..............................................................................................................................64
MDM.........................................................................................................................................65

5
1. ¿Qué es HTML?

1.1 - Que es HTML y la web

Bienvenidos a este curso de html5. Meter html en dos días es una tarea casi imposible. Vamos a
tener que dejar muchas fuera porque el tema es enorme, pero yo espero de corazón darles la base
suficiente para que ustedes con lo que aprendan entre hoy y mañana estén listos para ir más allá.

Yo he aprendido con los años que una de las cosas más difíciles que hay en tecnología es cruzar la
puerta. Osea, entender de qué se trata esto, una vez que lo entiendes el resto ya lo puedes hacer solo.
Todos somos capaces, somos capaces de investigar, de probar con código, pero ese primer paso es
el complejo, porque es el primer paso, cuando tu dices ¿y esto qué es? ¿para qué sirve? ¿con qué se
come? ¿cómo se hace?. Tienes esas dudas que te asaltan cuando algo nunca lo has visto. Una vez
que tienes ese primer paso dado el resto lo puedes hacer solo. Por eso es que en ED.Team hicimos
la metodología desde cero, porque entendíamos que la tecnología yo sé ustedes están en la facultad
de sistemas ustedes para ustedes la tecnología es su vocación etc. pero quiero que por un momento
por un momento ustedes se pongan en el lugar de la gente que no tiene como vocación de carrera la
tecnología pero igual siente la importancia de la tecnología todos los días o no porque usa facebook
porque usa whatsapp porque usa google porque ve que las empresas más valiosas con más dinero en
el mundo son ten dependen de tecnología porque tienen hijos y los hijos empiezan a usar internet
redes sociales y los papás están un poco confundidos y no saben cómo funciona la gente promedio
le interesa la tecnología tal vez no como carrera como a ustedes no pero si les interesa y sienten
temor porque sienten que es algo muy complejo y pero que aún así aunque sea complejo deberían al
menos entenderlo porque influye en sus vidas entonces estamos convencidos de que dar ese paso
inicial y decirle mira así funciona la tecnología, es difícil sí, pero toda carrera es difícil, no
solamente la tecnología, toda carrera, la música, la medicina, el derecho, toda la carrera es difícil no
solamente esta, pero queremos ayudarles a dar ese paso inicial. Y eso vamos a hacer en este curso
de html5, darles ese paso inicial, no vamos a poder ir muy a fondo, pero sí les voy a dar una visión
completa de lo que significa html. Comencemos por el principio

¿Qué es html?
Quiero empezar diciendo que html es el lenguaje que debes aprender primero para entrar al mundo
de la web. La web es una de las áreas de tecnología con mayor demanda laboral, o sea la demanda
laboral que hay para web es brutal. Hay muchos tontos que pronostican las cosas que se van a morir
y nunca le acierta, jamás le acierta, llevamos años con tontos pronosticando que la web se va a
morir, porque ya llegó android, porque ya llegó Ioes, porque llegó la realidad virtual... cada vez que
llega algo nuevo dicen: No la web se va a morir. Y la web está más fuerte que nunca. Por una
sencilla razón porque la web es abierta. Tú abres una computadora, un teléfono, abres google
chrome, firefox, lo que sea, y con solamente una url entras a cualquier contenido. Las aplicaciones
tienen el problema de que se instalan en tu equipo, entonces seguramente te ha pasado que cuando
quieres instalar una nueva aplicación tienes que pensar cuál desinstalar para hacer el espacio de esta
otra. Eso nunca va a pasar con la web, jamás. La web es abierta tienes un navegador y tienes todo:
facebook es web, amazon es web, Google es web. La web nunca va a morir y nunca va a dejar de
haber trabajo en la web. Hay muchísimo trabajo y de los mejores pagados en el mundo, de hecho el
lenguaje con mayor demanda laboral hoy por hoy es javascript, que es el lenguaje de la web.

6
 Entonces ¿Qué es html? Es el lenguaje base para la web, es el lenguaje sobre el cual está construida
la web. Tanto es así que html se creó junto con la web. En realidad son como el huevo y la gallina, o
sea cuál fue primero html o la web, la web o html. Es así, en serio. Tim berners lee creó la web,
pero necesitaba un lenguajes sin ese lenguaje la web no podía existir, entonces tuvo que crear los
dos juntos. Ahorita vamos a entrar en eso, pero antes quiero explicar es qué es html.

html son siglas, son iniciales, hyper, text, hipertexto, sucede que antes de html todos los
documentos en computadoras eran texto, texto plano, texto que no tiene formato, que no tiene
negrita cursiva, documentos científicos de investigación, la mayoría estas cosas se crean en
universidades donde hay centros de investigación, donde hay gente que quiere ir más allá. Entonces
los textos eran planos y con html se crea el hipertexto, ahorita van a ver qué es el hipertexto y
aunque pueda parecer una tontería hoy, en ese tiempo fue una revolución total. Recuerden antes era
texto plano, ahora se crea el hipertexto.

Markup significa marcado ¿qué cosa es marcado? es decir qué cosa es cada elemento en el
documento, decir: tú eres un título, tú eres un párrafo, tú eres un pie de página. Marcar, nada más
marcar, marcar, marcar, qué cosa es cada uno. Eso es todo. aparentemente es muy fácil claro, pero
poco a poco se fue volviendo más complejo, pero en su esencia es marcar, es decir qué cosa es cada
elemento.

Y por último language. Es un lenguaje. No sé si alguno de ustedes han escuchado a alguien decir:
html no es un lenguaje. Preguntenle: Oye qué limones significa la L en html. Por supuesto que si es
un lenguaje, escribes código, el detalle es que no es un lenguaje de programación y por eso mucha
gente le encanta hacer levantar tormentas de arena diciendo que no es un lenguaje. ¿Qué cosa es un
lenguaje de programación? es un lenguaje que te permite hacer operaciones con datos, programar,
en pocas palabras, es hacer operaciones con datos, datos de entrada, datos de salida. Pero en html si
insertas 5 + 7 ¿que te devuelve? 5 y 7, porque es texto nada más, no programas, no manipula datos,
pero síes un lenguaje.

Ahora, he puesto esta imagen porque representa lo que es el marcado. En la cocina tenemos
frasquitos, les ponemos azúcar, sal, porque si no, te echas sal en el café y es horrible. Entonces son
parecidos, tenemos que etiquetar las cosas. En html es lo mismo, tenemos que etiquetar las cosas,
porque hay un programa que se llama el navegador, firefox, google chrome, y el navegador lee el
html y lo procesa. Html es un lenguaje interpretado, y acá viene nuevamente la arena... 'que no es
interpretado por qué no el lenguaje de programación', no tiene nada que ver, sí es un lenguaje
interpretado. Hay dos tipos de lenguaje: lenguajes interpretados y lenguajes compilados. Los
interpretados requieren de un intérprete. Un intérprete es algo así como que yo hablara en japonés y
hubiera una persona al lado traduciendo el español. Es un intérprete porque entiende lo que yo digo
y lo transforma a lo que ustedes entienden. El navegador es ese intérprete, lee el código html,
entiende el marcado y pinta en pantalla los elementos que ves en tu página web. Entonces el
navegador es el intérprete y tú tienes que marcar correctamente los elementos, decirle: oye
navegador, esto es un título, esto es un párrafo, esto es una lista, esto es una tabla. Tienes que
marcar bien todo, así como marcamos los frascos en la cocina para no envenenarnos.

Ahora, les decía hace un rato hipertexto. Antiguamente, como les dije, los documentos eran texto
plano, el hipertexto es algo tan sencillo como hacer un clic, es decir, hacer clic y ¿qué pasó con ese
clic? me regreso la diapositiva 1, me llevó a otro lugar. Para ustedes es lo más común del mundo,
pero retrocedan 30 años atrás y ya no es tan básico, 30 años atrás era sorprendente, era como un
agujero de gusano que estabas aca, hacias click y te pasabas a otro documento. Yo he vivido los
tiempos en los que no había internet y había que leer libros en papel y había que tomar nota y
cuando el libro decía, en el libro tal, el autor tal ,dice tal cosa, te ponían una nota al pie de página y

7
tú anotabas para luego pedir el bibliotecario que te de el libro y buscar la referencia. Pero ahora, en
el <article> tal, el autor dice tal cosa, y hay un link, haces clic y te lleva el <article>, es mágico. Si
tú te pones a pensar eso es la magia del hipertexto un link te lleva a otro lugar. Ese otro lugar tiene
más links y ellos te llevan a otro lugar, y esos otros lugares también tienen links. O sea en teoría
todo está conectado, en algunos de esos links va a haber un link de regreso al punto inicial, de
hecho eso es lo que usa google. Cuando google nace, nace con esa teoría de los links entonces
google dice: cada página lleva a otra entonces yo puedo programar un robot, una araña, una araña
que detecte los links y los siga, entonces detecta un link, se va a esa página y en esa página detecta
más links y se va a esas páginas, y en cada una hace lo mismo, entonces luego genera un ranking
dice esta página tiene mil enlaces que apuntan hacia ella y cada enlace es un voto, es como votar
por un político, esta página como no es muy importante solamente tiene un enlace, entonces la va
poniendo abajo en el ranking, entonces cuando tú buscas por ejemplo zapatillas, te sale arriba la que
tiene más enlaces, pero todo es en base a esos enlaces y el hipertexto es la magia de la web, antes no
había.Una cosa tan sencilla como un link nos ha cambiado completamente la vida. Gracias a los
links la web es lo que es hoy en día.

Ahora, ¿qué cosa es la web? Me encuentro con mucha gente que no sabe qué es la web, no lo tiene
claro, entiende el concepto pero si tú le dices, define la web, no la saben definir, si tú les dices
¿internet y web es lo mismo? algunas personas confunden y creen que sí es lo mismo. Una cosa es
internet y otra cosa es la web. Internet es toda la infraestructura mundial tecnológica que permite
que las computadoras se conecten, es decir, cables, wifi, routers o modems, fibra óptica, cables
submarinos, que tienen toda esa tecnología, toda esa infraestructura física, que tú puedes tocar, que
permite que todas las computadoras se conecten en el mundo, eso es internet y listo, no es lo mismo
que web, la web es un conjunto de documentos html enlazados a través de hipertexto, eso es la web,
en otras palabras, la web es lo que ves a través de un navegador, de google chrome, firefox, de
internet explorer, eso es la web, internet es más grande definitivamente, internet es una
infraestuctura de comunicación, por ejemplo, tú puedes jugar partidas de algún videojuego pero en
red local, entonces se juntan los amigos y ponen cables, no están en internet están entre ellos nada
más, ponen un switch o un modem o algo y se conectan todos y juegan en red local. Ese mismo
concepto llevado a la escala mundial eso es internet lo mismo igualito, los amigos pero en escala
mundial, nada más.

Ahora la web se conforma de tres conceptos:

URL Uniform Resource Locator

HTTP HyperText Transfer Protocol
HTML HyperText Markup Laguage

el http es el protocolo por el cual se comparten los documentos html, miren es un protocolo de
transferencia de hipertexto, por eso es que cuando tú abres una página web sale http, porque ese es
el protocolo para transferir documentos, ¿y qué cosa es un protocolo? un conjunto de reglas que
deben cumplirse. Muy bien, entonces eso es la web.

¿Cómo es html?
Les dije en su momento que html es un lenguaje de marcado en el que etiquetamos las cosas como
si etiquetaramos frascos en una cocina, es similar, es simplemente etiquetado, miren:

8
 <html>
<head>
</head>
<body>
</body>
</html>

acá hay una etiqueta que se abre que es <html>, entonces esta es una etiqueta que se abre y luego se
cierra, es sencillo se abre y cierra. Dentro hay otro par de etiquetas <head> de apertura y </head> de
cierre; <body> de apertura, </body> de cierre, facilito. Entonces <head> es cabeza <body> es
cuerpo, es como que acá dijera head desde apertura a cierre, body desde apertura al cierre, o sea
donde comienza y dónde termina, es sencillo. Así es html si es que ustedes no lo habían visto antes.

1.2 - Historia de HTML y las especificaciones

Antes de entrar al código es muy importante entender el papel de html en la historia de la web.
Generalmente html por principiantes es un lenguaje menospreciado por no ser de programación,
pero tú tienes que entender el papel que tuvo en la historia, en la revolución de la web, para
entender su importancia. Para eso empecemos hablando de ese señor que se llama Tim Berners-Lee.
Creó la web, creó html y creó la web de paso. Estaba investigando en el cern y en el año 1989
comienza su proyecto de html y de la web. En el año 1991 se lanza la primera página web, era una
página sin estilos, era solamente texto y enlaces, pero ya era la primera página web. En el año 1992
se lanza html como el lenguaje, es decir, html ya existía de forma experimental. Cuando hablamos
que se lanza algo, estamos hablando de que ya como que es oficial, ya pasó las pruebas, ya
corregimos los errores, entonces ya podemos decir que está utilizable para todo el público. Sin
embargo tú sabes cuando sacamos algo todo el mundo lo quiere usar a su manera. Por ejemplo
quehay algo llamado real academia española que dice como debemos hablar. La W3C es casi lo
mismo pero en html, o sea, dicen: así se escriben los párrafos, así se escriben los títulos, así se
escriben los <article>s... La mayoría gente no le hace caso, peor antes de que existiera la W3C cada
empresa que hacían navegadores, hacía el código como le daba la regalada gana, no respetaban
ninguna regla, es más microsoft por mucho tiempo fue el enemigo de los estándares. Un estándar es
reglas que se siguen, que todos seguimos, entonces microsoft hacía el html que le daba la gana, el
css que le daba la gana, el javascript que le daba la regalada gana, no respetaba nada, eran tiempos
horribles para hacer web. Si ustedes ahora pueden poner array.for its, lo que sea, de verdad
alégrense, si ustedes pueden poner border radio tal cosa, picture algo,son afortunados. No saben
cuántas horas tenemos que invertir antes para que esa cosa funcione en todos los navegadores. Peor
aún cuando internet explorer en el más usado del mundo, hace unos años no podías decir eso
porque tenía el 90 por ciento del mercado. Y tu aprendías bien chévere html, css, javascript, hacías
tu código y te dabas con la ingrata sorpresa de qué internet explorer no le importaba todo lo que
habías aprendido. Era muy feo, pero esa es otra historia. Entonces la W3C lo que intenta es poner
estándares, poner reglas que todos deban seguir.

En 1998 se lanza la versión 4 de html, la versión que dura más tiempo, la más estable durante
mucho tiempo, pero luego la W3C se le ocurrió mezclar html con xml y creó un engendro feo
llamado xhtml. xml es otro lenguaje de marcado, pero no es para web, es para compartir
información. ¿alguno de ustedes saben lo que es json? Javascript object notation, es un formato de
documentos para compartir información, de hecho json nació como una respuesta a xml, porque
xml era muy complejo muy enredado de su sintaxis y json es más limpio. Entonces xml es un
lenguaje también de marcado para documentos y la W3C se le ocurrió la gran idea de juntar html y
xml. Es más su idea fue más allá, era destruir html. Dijeron que html se murió, ya no va más, lo que

9
va a ser a partir de ahora es xhtml. El plan de ellos era que nunca exista html5, y lo que sí debería
existir para ellos era xhtml 2. Según ellos esa iba a ser la gran revolución. No contaban con la
astucia de que en 2004 iba a salir un grupo de rebeldes llamado la WHATWG que agrupaba
ingenieros de apple, de google, de mozilla firefox, etc. ,gente rebelde que dijo: usted están locos
html no se va a morir, creamos nuestro propio grupo y al final debes pensar en algo. La W3C no
hacen navegadores, ellos dan las reglas, nada más. Las empresas que hacen navegadores son
google, apple, mozilla, microsoft.... ellos pueden ver si respetan o no respetan las reglas, lo ideal es
que la respeten obviamente, pero podrían no hacerlo. Entonces ese grupo de gente creó una
organización al margen llamada WHATWG y dijo: no se va a morir. Ellos ellos crearon html5.
Html5 fue tan revolucionario, marcó tantos hitos en la historia de la web que la W3C tuvo que
matar a xhtml, lo mató y nos quedamos con html, y hasta hoy en día seguimos con eso gracias a esta
a esta revolución.

En el 2014 html5 se vuelve una recomendación. Eso es que ya se vuelve un estándar y está probado,
ya no tiene errores y es compatible con todos los navegadores y lo puedes usar sin problemas, pero
miren desde el 2008 ya teníamos html5. Demoró bastante tiempo en ser una recomendación, en
2016 se lanzó el estándar 5.1 y en 2017 en diciembre, el estándar 5.2.

HTML5
Ahora ¿que esconoces html5? ¿porque es tán revolucionario? porque si nos ponemos a pensar que
grandes empresas crearon una organización al margen para crear una nueva especificación, la cosa
es que fue muy grande.

Miren, en primer lugar web semántica. ¿que significa web semántica? que tiene un significado, ya
no era un marcado vacío, como decir, <div> <p> y <a> si no, teníamos elementos tipo <article>,
tipo <section>, elemento <vídeo>, elemento <audio>, o sea, ya tenemos elementos específicos para
cada cosa, entonces los documentos ya tenían una semántica.

También hablamos de Local Storage. Todo esto es de html5, si bien es cierto, ustedes lo pueden
escuchar hoy en día, pero esto salió con html5, estamos hablando hace muchos años. Local
Storage significa que tú podías guardar datos en tu teléfono, en tu dispositivo, en tu computadora
local. ¿qué significa eso? acceso offline, era maravilloso. Pónganse a pensar, entrabas a una página,
la página tenía datos en el servidor pero los guardaba en tu Local Storage y luego ya podías
navegar sin conexión a internet, era maravilloso en serio, para esas épocas, imagínense.

El Acceso al dispositivo esto significa que tú puedes desde un navegador acceder a la cámara web,
acceder al micrófono. También una página que te dice: la página tal quiere acceder a un micrófono.
Eso era html5, antes se podía hacer eso con flash, pero flash era inseguro, html5 mató a flash (si en
algún lugar te quiere enseñar flash hoy en día te están estafando).

Los web sockets es una comunicación bidireccional con el servidor. Normalmente para tu
comunicarte con un servidor tu le haces una petición, es decir, entras a una url o pulsas un link.
Entonces al pulsar un link, tú le haces una petición al servidor y el servidor te regresa información.
Con web sockets tú podías mantener una conexión abierta siempre, de tal manera que si pasaba
algo en la aplicación, eso que pasaba lo veías frente a tus ojos en tiempo real, sin tener que darle f5,
sin tener que refrescar la página, para los tiempos era sorprendente, hasta ahora sigue siendo
sorprendente, estás en facebook y te sale tal persona te contesto y no ha recargado la página. Esos
son websockets.

10
Multimedia, audio y vídeo nativos. aAntes todo era flash, a partir de html5 todo lo hace el
navegador solito.

Los gráficos (SVG, Canvas, WebGL) WebGL que es 3d con javascript, es una maravilla. Entonces
ya tenemos gráficos avanzados solamente desde el navegador, y solamente se podían hacer con
flash antes.

Los Web workers para tener trabajos en javascript simultáneos sin ocupar el hilo principal. Lo que
pasa es que hay un proceso principal, no sé si ustedes sepan de eso, pero hay un proceso principal
en el navegador, con los web workers tú podías tener un segundo proceso corriendo por detrás.
Entonces mientras el navegador, por ejemplo, estaba pintando la pantalla, había un web worker
corriendo por detrás haciendo otro proceso, lo cual aceleraba mucho las aplicaciones.

Y CSS3, si bien es cierto CSS3 no es parte de html, pero vinieron juntos, y con css3 tú podías hacer
bordes redondeados, podías hacer animaciones, podías hacer sombras, ustedes dirán ¿sombras?, box
shadow y ya, en esos tiempos era, de verdad, para llorar de la alegría. Antes querías hacer una
sombra, abrías photoshop, hacías tu sombra, la exportaba como png, la comprimías, la ponías con
positión: absolute... Se los juro, o si no, ponías una tabla, tabla y abajo otra fila y ahí ponías como
background ese png. Y ese png no sé renderizada en internet explorer, entonces tenías que traerte
una librería para internet explorer, para en que internet explorer muestre eso. Eran horas de trabajo,
y si el cliente te decía no me gusta... Con css3 era box shadow y ya está, era para llorar, en serio, era
una alegría total. Animaciones con css. Todo eso solamente se hacía con flash, animaciones, 3d. Era
emocionante, en serio. Entonces ahora me entiende porque fue una revolución, porque a partir de
html5 el navegador se convierte en el programa más usado del mundo. Yo les pregunto ¿cuál es el
programa que más usan en una computadora durante el día? el navegador y no solamente para
tontear, hay muchas tareas que realmente las hacemos en el browser, que antes requerían un word
instalado, un photoshop instalado y ahora todos en el navegador. Hay muchos programas que eran
de escritorio, que ahora viven en el navegador, es increíble.

Dije hace un rato que la W3C es la institución que define las normas, ahora, estas para ir un poco
rápido son las etapas de una especificación:

Working Draft (WD)

Candidate Recommentation (CR)
Proposed Recommentation (PR)
Recommentation (REC)

Una especificación es un estándar, entonces cuando sale una nueva versión por ejemplo html 6, por
decirlo, y creo que nunca va a existir, pero digamos pasa por todas esas etapas:

en primer lugar el Working Draft, que es el borrador, entonces es como la primera muestra. Como
que se reúnen y dicen: qué tal, que hacemos esto, ya lanzan uno por la ventana, pero ya y al final
pues van van escribiendo ideas. Este es el primer borrador. Ese borrador puede escalar o también
puede descartarse, hay muchas ideas que en el tiempo se descartan y no van a ningún lado, pero hay
ideas que escalan y luego se vuelven una recomendación candidata, que es que ya escaló, ya lo
pueden usar, pruebenlo y veamos qué tal. ¿Alguno de ustedes ha uado prefijos en los navegadores
para css, por ejemplo, -webkit-algo o -modos-algo? es porque justamente la W3C ha trabajado en
una especificación que todavía no está completa, entonces los navegadores dicen: yo no puedo
meter esto al navegador porque todavía no es un estándar, capaz luego lo matan, entonces
metámosle un prefijo, este prefijo significa 'está en desarrollo'. Esa es la razón de ser del prefijo. Un
día vi en una plataforma que no quiero decir su nombre, que los prefijos eran por guerras

11
comerciales... Los prefijos simplemente significan que todavía está en desarrollo, nada más, y
bueno la recomendación propuesta, obviamente, que es como decir el release candidate para
software, esto ya está pero capaz se nos ha escapado un error por ahí, hagan la prueba final. Y
obviamente la final es la recomendación. Recomendación significa, ya es un estándar, se acabó,
úsenlo. Html5.2 es el último estándar de html, obviamente ahorita html5.3 existe pero, obviamente,
en borrador, termina una especificación y al toque trabajan en el borrador de la siguiente.

1.3 La guerra de navegadores y la sintaxis de HTML

Es una historia impresionante que es para que nuestro el día pero los navegadores se han vuelto uno
de los programas más usados en el mundo y han generado guerras enormes.

Los dos primeros navegadores que tuvieron una guerra fueron estos dos el primer navegador gráfico
del mundo fue mosaic en el 93 microsoft que en ese entonces era la empresa más poderosa del
mundo (ya no lo es, la empresa más poderosa del mundo hoy en día es amazon, no es apple, apple
es la más valiosa, en plata en el banco, después está google, pero la empresa más poderosa, porque
el poder no necesariamente es el dinero, el poder es capacidad de tomar decisiones, capacidad de
influir en el mundo, por ejemplo amazon puede ir a una a una ciudad y abrir oficinas y
completamente esa ciudad se transforma, ya está trabajando en tiendas que no tienen personal, no se
han visto tú vas coges una gaseosa de las tomas y ya se cobró en tu cuenta ya sé cómo te lo juro y
hace cobro en tu teléfono ya sé débito de tu cuenta del banco nadie te cobro una cámara escaneo un
software detectó que gaseosa es tanto tanto. Pero bueno volvamos a lo nuestro, en ese tiempo
microsoft era la empresa más valiosa del mundo y se perdió internet no le tomó importancia a
internet, nuestros negocios son office, windows. Estamos hablando de 1994, hace mucho tiempo,
pero luego salimos internet pro recco no se dio cuenta que habían perdido mucho terreno Netscape
en el navegador más usado en el mundo de scripts salió a la bolsa los programadores de Netscape se
volvieron millonarios de la noche a la mañana cuando salieron a la bolsa fue algo brutal la web fue
la más grande revolución de los 90, de verdad, estos como una historia de estrellas de rock en ferias
es genial entonces microsoft dijo: ok se nos pasó el tren. Pero algo que le sobra microsoft es plata,
plata en carretillas trajeron así como el rescate atahualpa trajeron plata pero en carretillas y
contrataron ejércitos de programadores con una sola misión destruir Netscape, esa era su única
misión y hay reportajes y documentales de los programadores de microsoft contando eso, su única
misión era destruir Netscape, no había más ni siquiera el mejor navegador del mundo era destruir
Netscape. Demoraron pero en el 97 o 98 no me acuerdo bien la fecha perdónenme pero cuando se lo
internet por el 4 o sea era imposible aguantar tanto a una empresa con tanto dinero que usa todo su
dinero para destruir no puedes eso algo algo similar pasó hace algunos años se acuerdan de snap
chat y facebook algo similar facebook marck zuckerberg pues le dijo no me acuerdo el nombre del
deseo de nacha perdóname pero bueno pues le dijo te ofrezco tres mil millones de dólares el tipo
icono pero no estás ganando nada o sea tú no no facturaba de snap no facturaba este tipo estaba loco
pero lo con el buen sentido de esa gente que quien no factura no tiene un centavo pero dice no no te
ofrezco cinco mil no haya no quieres el poste y se fue como kiko nos va a sacar su mejor avión en
serio empezó a copiar lea copiarle a copiar no sé si sepa esta historia pero puso a todos sus
ingenieros a copiar de todas las funcionalidades snatch at ahora snap se está yendo ya de caída de lo
que la mayoría de analistas decían que es nacha y va a destronar a facebook por eso es que marzo
pero se fue a comprarla porque sabía que si los dejaba subir tarde o temprano se iba a ver en
problemas y como no lo puedo comprar lo único que hizo fue hacer una guerra de dinero una guerra
de dinero nunca la vas a poder aguantar tarde o temprano te van a ganar porque no tienes los fondos
el otro puede contratar mil programadores llenarte toda la universidad programadores que son
empleadores tú no puedes no tienes el dinero bueno internet flores destruyeron es que hay pero de la
ceniza desde skype de su código inferior de su código salió un fork llamado mozilla firefox y la

12
segunda guerra de los navegadores es la que ven acá, de google chrome versión firefox es más esta
segunda guerra sigue hasta ahora no han visto cuando salió firefox quantum que somos lo más
rápido del oeste, que no está a nuestro nivel y que no sé que la gente yéndose a firefox cuantos yo
me fue facebook one tonne pero no habrían los google candados y muy regresado cosas que pasan

ACTUALIDAD
En la actualidad el navegador es prácticamente un sistema operativo. Cuando los visionarios lo
decían diez años atrás la gente se reía de ellos, decían: tú estás enfermo sistema operativo es otra
cosa cómo vas a decir un navegador es un sistema operativo sí o no un sistema operativo controla
hardware tiene un kernel no tiene una capa en la que se comunique el hardware con el software son
otras cosas es verdad pero sinceramente hoy por hoy estamos a ese nivel.

Uno de los últimos avances de la web son las PWA o progressive web apps, entonces una
progresión web app es una aplicación web es decir con html css y javascript que funciona en el
teléfono como si fuera una aplicación nativa como si la vieras instalado pero es un browser es un
browser que guarda datos offline en el local de historias del teléfono y que tiene código javascript
que pregunta para ponerlo simple pregunta oye estoy conectado a internet no entonces ya para tu
coche local y carga con eso estoy conectado a internet si entonces trae preguntas hay nuevos datos y
te los trae si los pones en la caché local es fantástico y eso es por el es progressive web apps.

Chromebook es un proyecto de chrome que usa google cloud como si fuera un sistema operativo es
una laptop de google no sé si la habrán visto creo que no se vende por acá pero en noticias en
internet no es una laptop pero su sistema operativo es un google chrome y con las aplicaciones de
google

Electron es un framework que te permite crear aplicaciones de escritorio con tecnologías web: html
css y javascript. técnicamente levanta un navegador, claro no está no tiene la barra de direcciones
no pero es un navegador pero tú lo instalas doble clic instalar siguiente siguiente siguiente se instala
aparece en tu menú inicio y es una aplicación de spotify ya eso es es una aplicación de escritorio no
eres web.

Ionic es la misma historia pero para móviles.

React native es lo mismo pero en móviles también.

Y lo último web components es la última revolución de la web ahora tú puedes inventar tus
etiquetas con web components es decir tú dices hay una hay un género hay una che uno pero yo
quiero mi etiqueta no mi etiqueta pepito eso yo quiero esa etiqueta para mí para mi proyecto tienen
o ponerle de guión team porque yo quiero mi etiqueta personalizada la puedo crear con web
components y puedo meter ahí css html y javascript en un solo paquete. Eso ya lo hacen propuestas
como react angular view, pero nativamente sin framework sin librería se puede hacer la web actual
usa web componentes y el futuro de la web es empaquetar esto en pedacitos es como que dices oye
yo necesito un menú me traigo un menú que es un paquetito es un web componen y atrae todo y
atrae la interacción y atrae los estilos y atrae el marcado y atrae absolutamente todo.

13
SINTAXIS
Por último para cerrar este primer bloque está la sintaxis de html. En el siguiente bloque vamos a
meternos a hacer código de frente, pero es necesaria esta introducción. Bien esta es la sintaxis y ojo,
atentos a esto, no quiero que después me digan: ¿Álvaro qué era un atributo? pregúntale a tu
compañero del costado.

Etiquetas

html se basa en etiquetas, etiqueta de apertura, etiqueta de cierre. El slash en el cierre de la

etiqueta.

contenido

Entre la etiqueta de apertura, y la etiqueta de cierre (con un slash), va el contenido, que puede ser
texto o puede ser otra etiqueta como hijos.

atributos

y los atributos que son datos adicionales que tú le das a esa etiqueta, por ejemplo ahorita tiene un
atributo de id, que es un identificador único de ese elemento, entonces puede servir para que tú lo
manipules con javascript, o puede servir como un marcador, cuando hacen un índice usan id para
marcadores, los puntos en el documento para que tú saltas se crean con id. Hay atributos de clase,
de id, title, href, src. Vamos a ver muchos atributos, pero quiero que entiendan básicamente la
sintaxis:

nombre de atributo; signo igual (=); comillas (” ”); y el valor del atributo.

etiquetas self-closing

Y luego también hay etiquetas que no tienen apertura y cierre. Les llaman etiquetas vacías porque
no tienen contenido, como img, que no tiene contenido, solamente tiene un atributo. Estas se llaman
etiquetas self-closing, porque cierran solas o etiquetas vacías. Es común que a las etiquetas self-
closing les pongan un slash al final (/>) como para indicar que se cierran ellas solas, pero no es
obligatorio (Solamente en xhtml es obligatorio).

2. Empezar con HTML

2.1 Estructura básica de una página web

Ya nos toca meternos al código y vimos un poquitito en la última diapositiva del bloque anterior,
vimos la sintaxis. Ahora vamos a hacer el código y vamos a empezar entendiendo la estructura.

14
Voy a mostrarles unos slides:

En primer lugar esta es la estructura básica de todo el documento html, la más básica, lo mínimo
que debería tener un documento html para ser consistente.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Obviamente debe tener extensión html.

Doctype ¿qué es el doctype? como su nombre dice es el tipo de documento. Hay tantas versiones
de html que los navegadores tienen un soporte hacia atrás, que significa que ellos pueden entender
html antiguo. En las versiones antiguas de html había varios doctype.Pero a partir de html5 el doc
time es tan sencillo como <!DOCTYPE html>. Con eso le está diciendo al navegador navegador
mira esto es html5. No es superficial, si tú te olvidas de esta línea el navegador va a hacer cosas
raras, va a pensar que está abriendo un html de 1995, y va a entrar en algo llamado modo Quirks.
Entonces cuidado como olvidarse esto. Ahora esto es teoría, porque muchos editores ya lo
completan solitos, así que como que no hay mucha preocupación de memorizarlo, pero si debes
entenderlo.

Luego el elemento principal es html. Este es el papá de todos. No hay elementos sobre html, no hay
ningún elemento que sea papá de html.

Y luego hay dos elementos internos head y body. Head se usa para poner metadata, por ejemplo,
le decimos al navegador: Este es el título del documento; este documento está en tal idioma; este
documento va a traer tal javascript; tal ccs; este va a ser su favicon; esto va esta va a ser su
descripción para google; etc., metadata, o se,a datos que el navegador no muestra pero los tiene ahí
para cuando los necesite. Y en el body, el cuerpo, está todo el contenido que el navegador sí
muestra en la pantalla. Recuerden head para metadata y body para contenido.

Ahora vemos que hay atributos, miren, el atributo lang. Creo que es muy fácil de entender para qué
sirve. Es para decirle al navegador qué idioma estás usando. Puedo escribir en español aunque le
ponga esto en otro idioma, el detalle es que hay aplicaciones que van a detectar el idioma de la
página y según eso mostrarte alguna información, por ejemplo google puede detectar que tu página
es en inglés aunque no es en inglés, y entonces cuando alguien busca solo páginas en español, no
muestra la tuya porque tú te olvidaste. Es una pequeñez pero es importante.

Luego en el head las dos etiquetas básicas son el meta charset y el title. Ojo meta es una sola
etiqueta, el charset es un atributo. Hay muchos meta: charset, viewport, description, pero la
etiqueta sigue siendo meta, lo que cambia es el atributo. La etiqueta meta para indicar metadatos,
información extra, ahorita les voy a poner varios ejemplos, primero quiero que piensen en la
estructura. Y la etiqueta title es el título de la página. Ese título lo muestra en google, cuando

15
alguien busca tu página y sale un título arriba, ese título es la etiqueta title. Por eso es tan
importante marcar bien el contenido.

Ahora esta es la estructura más básica, pero esta que ven acá ya es la estructura digamos usual, la
que vas a ver más comúnmente:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Porfolio de dibujante">
<title>Porfolio mínimo</title>
<link rel="stylesheet" href="css/estilos2.css">
<link rel="shortcut icon" href="images/favicon.gif">
</head>
<body>
<h1>Título</h1>
<script src="scripts.js"></script>
</body>
</html>

En realidad hemos aumentado dos cositas nada más. Sigue estando el doctype; sigue estando el
html con el lenguaje; sigue estando el meta charset; hemos añadido dos meta. Vamos a ver que
hacen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En primer lugar un meta name=“viewport” y eso sí está medio raro. El viewport es la parte por la
que tu ves el contenido, un ejemplo, tengo este teléfono, ahí veo la página web, pero la página web
sigue más allá del tlf y hacemos scroll. La parte visible del dispositivo ese es el viewport. Tu página
puede ser más grande, entonces el meta name=“viewport” le dice al navegador: oye el tamaño del
viewport, igualalo al tamaño del dispositivo (content="width=device-width, initial-scale=1.0") y
el initial-scale=1, es decir, no vayas a comenzar con un zoom in o un zoom out, comienza siempre
en el tamaño original. Eso es para responsive web design, es un tema que se escapa de este curso, es
css, pero esto es algo que debe estar sí o sí en toda página web. Si te olvidas de esta línea para
responsive web design no te va a funcionar.

<meta name="description" content="Porfolio de dibujante">

luego esto también es muy importante el meta name="description" es muy fácil, miren name y
luego content. Es para indicar una descripción de la página. Un ejemplo: Cuando tú pones un link
en facebook, automáticamente facebook como que detecta el link y pone una imagen y pone un
texto. Esa imagen es una imagen que tú has marcado con Opengraph, que vamos a ver hoy al final
del día, y el título es el title, pero la descripción es esto. Si tú te olvidas, si tu página no tiene el
meta description, lo que hace facebook es buscar en el contenido, en el body y traerse las primeras
palabras. No es lo ideal, porque el body puede tener alguna etiqueta de estilo por hacer un hack de
última hora le pones un style, y eso muestra facebook. Hay que tener cuidado con esto, es mejor
usar el meta descripción. Google también pone el título y debajo una descripción, es el meta
descripción.

16
 <link rel="stylesheet" href="css/estilos2.css">

Esto es css. css es el lenguaje para dar estilos, para diseñar, html solo es estructura, no diseña.
(Cuando alguien te diga 'h1 es para texto grande', es que no sabe html, h1 es para indicar que es el
título principal y que el navegador lo muestre grande es otra historia).

Con esta linea tú vinculas tu documento html con tu CSS. rel te dice qué tipo de relación es, y href
es la url relativa del documento. Más adelante veremos las rutas, rutas relativas, rutas absolutas etc.
por ahora entiendan la estructura nada más.

<link rel="shortcut icon" href="images/favicon.gif">

<link rel="icon" href="img/favicon.png">

El favicon es un inconito arriba en el navegador. Se pone así con un <link rel="shortcut icon" y
luego la url, la dirección del fabicon. Lo normal es usar un png aunque aunque también se usa un
.ico.

<h1>Título</h1>

Y en el body un h1, que es casi obligatorio porque es el título principal del contenido. Ojo, la
diferencia entre esto y la etiqueta <title> es que esta es un meta dato que lo mandas a google, a
Open graph, etc. y <h1> es del contenido. Recuerden, todo lo que está dentro de body es contenido
y lo que hace dentro de head es metadato. Ahora tú podrías poner los estilos dentro de body se
puede, pero no es recomendable.

<script src="scripts.js"></script>

Esto es una llamada a un script, a un javascript. Javascript es un lenguaje que le añade interacción a
la página, es como el hada que viene donde pinocho y le da el toque y pinocho empieza a caminar y
a bailar, le da interacción, puede hacer que en la página responda a la interacción del usuario, no
solamente animaciones, sino realmente respuestas, puede enviar formularios, puede traer data de
una Api y pintar contenido en pantalla, puede mostrar gráficos en tiempo real. Javascript ya es un
lenguaje de programación.

Entonces lo usual es que tú veas javascript al final del body. También se puede poner en el head,
pero en el desarrollo web actual se acostumbra más ponerlo al final del body, por la principal razón
de que muchos scripts interactúan con la página y sí aparece antes que la página termine de cargar,
el script lanza un error. Un ejemplo: en el script le dices: cuando el usuario haga clic en él h1 quiero
que la página se vuelva amarilla. Si este script estuviera en el head, el script cargo antes que exista
el h1, por lo tanto cuando el usuario le dé clic al título no va a volverse amarilla y la consola del
navegador va a mandar un error, va a decir 'el título no existe', y tú te vas a volver loco porque ves
que el título está ahí ¿como que no existe?. Ese es un error muy clásico cuando comenzamos con
Javascript que no entendemos y se soluciona tan sencillo como mandar los scripts abajo.

17
ETIQUETAS BÁSICAS

ENCABEZADOS

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Los encabezados marcan títulos de sección. Van del h1 al h6. H es de heading, encabezado. Hay
muchas malas prácticas con encabezados que vamos a ver.

ETIQUETAS DE SECCIÓN

<header></header>
<nav></nav>
<article>
<h1>Título</h1>
<section>
<h2>Subtitulo</h2>
</section>
</article>
<aside></aside>
<footer></footer>

las etiquetas de sección son las etiquetas que dividen toda la página en bloques.

<header> para encabezados, no solamente el encabezado de toda la página, sino, vamos a suponer
que tú haces un e-comerce, una tienda en línea, entonces tú tienes productos, tarjetitas de productos,
cada tarjetita puede tener su propio header, su propio encabezado y su propio footer.

<nav> es una barra de navegación donde tú pones inicio, quiénes somos, contactenos, etc.

<article> es un elemento de contenido único, por ejemplo un <article> en un blog, un tutorial, pero
comentarios de un <article> no serían artícle, porque los comentarios no son individuales, todos
están amarrados al blog principal.

<section> son las divisiones de cualquier parte de la página. Un <article> muy grande que
subdivides en secciónes. Por ejemplo, un tutorial con varios pasos que serian secciones.

<aside> es contenido que tú pones pero que no está realmente relacionado con el contenido
principal. Por ejemplo en la página web de un diario ponen una noticia y al costado, una publicidad.
Esa publicidad no está relacionada, entonces la etiqueta correcta es <aside>

<footer> para poner notas al pie, créditos, etc.

18
2.2 ¿Qué editor de código debo usar?
¿Qué programa necesitamos para hacer código html? hay muchos, te recomiendo un editor de
código tipo Visual Studio Code, Atom, Sublime text, hay otro que se llama Notepad++, es de la
vieja escuela pero todavía funciona y es simpático. Lo que no te recomiendo nunca es el bloc de
notas, porque usar el bloc de notas para hacer el código es como clavar con una piedra. Hay
herramientas mejores y gratuitas.

Cuando hablamos de editores de código hay dos tipos de programas: los editores y los IDE. Un
editor es un programa ligero que te permite editar archivos y que puede soportar muchos lenguajes
y puede extenderse a través de plugins, de módulos. Un IDE es un entorno de desarrollo integrado,
es un programa más complejo que generalmente funciona para un lenguaje o un grupo de lenguajes
muy específicos, porque está optimizado para eso. El ejemplo más común android estudio, que está
pensado y tiene todas las herramientas para hacer aplicaciones android; o eclipse, o netbeans para
Java, o sea hay IDEs específicos. Para este curso es recomendable utilizar un editor de código.

Tres opciones que son excelentes y gratuitas:

visual studio code. Es la opción número uno ahorita, es un programa de microsoft completamente
gratuito y tiene extensiones, es decir tú puedes instalar extensiones del editor para que te
reconozcan muchos lenguajes y creo que hoy por hoy es el editor de código más usado en el mundo,
como lo fue unos años atrás sublime text y ya le quitaron el trono hace tiempo, pero sigue siendo
un gran editor.

Atom que durante un tiempo tuvo muchísimo bombo. Este editor ha sido creado por la gente de the
git hub. Muy bonito, personalizable, gratuito también, curiosamente los dos están hechos con
Electron. Hace rato en el primer bloque les hablé de electrón y les dije que con web podíamos hacer
aplicaciones de escritorio, estos dos editores son la prueba viviente de que eso es real.

Sublime Text es la vieja confiable, es un editor muy poderoso que hasta la fecha hay funciones que
ni visual studio code ni Atom pueden llegar. Tristemente el desarrollo de Sublime va muy lento,
parece que el equipo de desarrollo le ha puesto pausa al programa, mientras que el desarrollo de
visual studio code está muy fuerte, porque está auspiciada por microsoft, pero la diferencia es que
sublime está escrito en python y es muchísimo más veloz.

El programa que yo voy a usar durante este tiempo durante este curso se llama web storm es un
IDE para javascript para front end, lo uso porque ya me acostumbré y me cuesta con otros
programas.

CREANDO LA PRIMERA PAGINA EN EL EDITOR

Voy a crear aquí un nuevo documento nuevo html y le voy a llamar index. Las ventajas de usar un
programa editor de código es que te da muchas ayudas, automáticamente me crea la estructura, y lo
guardo con la extensión html index.html. miren como arriba la cabecera ya toma un un símbolo que
me diga que es html y abajo al costado dice html porque ya me reconoció lenguaje.

Aquí es momento de hablar rápidamente de un mito muy clásico de la programación, hay muchas
cosas que los programadores no nos acordamos, se lo dejamos al editor.

19
Lo guardé como index.html es recomendable que el archivo principal de tu proyecto se llame así,
porque cuando lo subas a un servidor de internet, el servidor va a buscar el index y ese es el archivo
que va a cargar, va a ser la página principal. Acostúmbrate a tu archivo principal ponerle siempre
index.html.

Otra cosa cuando vayas a practicar código crea una carpeta para tu proyecto y ahí vas metiendo
todo, no dejes sueltas en el escritorio o en otro lugar. Es más, crea una carpeta que se llame
proyectos y ahí vas poniendo subcarpetas por cada proyecto.

2.3 - Mi primera pagina web con EDteam

Seguimos completando la estructura básica de la página.

El <title>
En <title> Ponemos 'mi primera página web con Ed-Team'. Guardo. Voy a abrirlo en un navegador
y si bien es cierto que el contenido sigue vacío, arriba en la pestaña aparece el título.

El meta name="description"
La descripción que muestra google lo trae de los metadatos. Podemos contrastarlo viendo con el
código de una página con Ctrl + U y viendo lo que pone en meta name=”description” en content.

Prácticamente todos los editores hoy aceptan emmet que es un plugin que te permite escribir código
presionando tap, es decir, el programa completa el código y la estructura. Es muy molesto escribir
menor que, title, mayor que, menor que, slash, es muy tedioso. Entonces yo voy a escribir acá meta,
pulsé Tab y listo <meta> , y el programa no me completó la pareja porque meta no tiene pareja, es
una etiqueta self-closing. Entonces añado dentro name= ”description” content=”es mi primer
proyecto web con Ed, estoy muy feliz”> y acá escribí mi contenido.

<meta charset="UTF-8">
Hay muchos idiomas en el mundo, nosotros hablamos español pero hay otros, ruso, griego, árabe,
chino, que usan incluso otros alfabetos, por ejemplo el inglés no tiene acentos, no tiene la letra ñ.
Cuando hacemos web tenemos que pensar en eso, porque pueden verlo desde otros lugares, desde
otro sistema operativo con otro idioma, entonces utf-8 te garantiza que tus caracteres aparezcan
bien, porque utf-8 es un sistema de codificación que soporta todos los caracteres.

Veamos si yo digo acá <h1>explosión de cariño</h1>. Si quito este <meta charset="UTF-8">,

guardo, y miren cómo se imprimieron las tildes y las letras, mal. Eso es un error muy común que
también pasa cuando somos novatos.

<link rel="stylesheet" href="estilos.css">

también habíamos visto qué link me permitía vincular una hoja de estilos css. Entonces pongamos
la linea de este título. El editor me ha subrayado estilos.css con una línea gruesa indicando que el
archivo falta (en WebStorm, Sublime no lo avisa ) es otra ayuda del programa. Voy a crear
entonces ese archivo estilos.css

20
 body{
background: yellow;
}

Volvamos al html y se fue ese subrayado. Ahora voy al navegador actualizo y todo es amarillo.

CSS da diseño, colores,formas, tamaños, etc. pero eso no es tema del curso de hoy, solamente
quería que ustedes comprendan la estructura.

<script src="scripts.js"></script>
Teníamos una etiqueta script. Me vuelve a salir ese subrayado porque el archivo no existe. Vamos a
crear scripts.js:

document.querySelector('h1').addEventListener('click', ()=> {
document.body.style.background = 'green';
})

Se fue ese subrayado. Le estoy diciendo cuando hagas clic en el h1, el documento se va a poner
verde. Se puede leer, tampoco es tan difícil miren:

document.querySelector('h1') o sea, hazme una selección dentro del documento, ¿que voy a
seleccionar? el h1;

addEventListener('click', ()=> ,y a ese h1 escuchale un evento ¿qué cosa es un evento? cualquier

interacción del usuario, un clic, un scroll, cuando escribe... ¿que evento vas a escuchar? el evento
clic.

Y cuando ocurra ese evento clic ¿que va a pasar?

document.body.style.background = 'green'; vamos a encontrar el body y dentro de su estilo le

vamos a cambiar el background a verde.

Veamos si funciona, voy a actualizar para que los cambios se refresquen. Clic en h1 y cambia a
verde. Esto es mucho más complejo les estoy haciendo ejemplos sencillísimos, pero quiero que así
entienda que html da la estructura, css el diseño, javascript toda esa interactividad.

<link rel="shortcut icon" href="favicon.png">

Habíamos visto que podíamos poner un favicon. Para eso teníamos que poner en el rel, “shortcut
icon” y en el href, la dirección del favicon. Voy a traerme un favicon y listo.

2.4 Elementos HTML de sección

habíamos visto ya teníamos etiquetas de sección se acuerdan por ejemplo teníamos <header>
teníamos también la etiqueta <nav>, teníamos también la etiqueta bueno <body> que ya la vimos,
la etiqueta <article> , la etiqueta <section>, la etiqueta <footer>, y la etiqueta <aside>. Estas
etiquetas habíamos visto.

21
 muy bien <header> es el encabezado principal, normalmente en el <header> lo que hacemos es
poner el logotipo de la página o cosas así. Vamos a poner el logo. Para eso vamos a usar un
elemento <img> que le voy a explicar en detalle más adelante por ahora siguen el paso nada más
vamos a poner un elemento de img i en src tenemos que poner su ruta. entonces voy a poner:

img logo punto png

nuevamente no está, el programa me detecta que no existe. Para eso yo voy a ir acá y voy a crear un
nuevo directorio y le voy a llamar img. Es recomendable que todas tus imágenes de tu proyecto la
metas en una carpeta llamada img o imágenes, como quieras, pero lo estándar es img. Ahora
necesito poner ese logo ahí. Lo copio y lo pego. Veamos actualizo, ahí está perfecto. Tú dirás tal vez
el logo está muy grande, ese amarillo está feo... pero esos son temas que le competen CSS, no le
competen a html.

Desactivar código comentandolo

miren esto que acabo de hacer se llama comentar, código cuando tú comentas código lo desactivas
pero no lo borras. Es una práctica que hacemos mucho, desactivamos código comentandolo.

Cada lenguaje tiene su forma de comentar. Html define los comentarios así:

<!-- Esto son comentarios -->

¿Para qué sirven los comentarios? tienen dos funciones: función 1 dar indicaciones en el código es
como decir este logo debe ser de tal tamaño. Le das indicaciones a tu yo del futuro. También ayudan
al equipo, cuando trabajamos en equipo ayudan a que nuestros compañeros sepan para qué está cada
cosa.

Pero otra utilidad del comentario es desactivar un pedazo de código. El atajo estándar para comentar
en todos los editores de código, ojo es un estándar, es Ctrl + / . En Sublime es Crtl + Ç. Porque lo
voy a hacer a cada rato y seguramente se lo van a preguntar.

barra de navegación <nav>

muy bien tenemos en la imagen ahora tenemos una barra de navegación <nav> para navegación
entonces ¿que debería poner ahí? las secciones de mi sitio. Vamos a poner acá:

<a href="#">Inicio</a>
<a href="contacto.html">Contacto</a>

Ya creé una navegación. He creado dos enlaces. Vamos más adelante hablar de los enlaces, pero por
ahora los enlaces son etiquetas <a> que dentro del atributo href indican el destino al que va a
apuntar ese enlace. Poner un hash, una almohadilla, un michi, como decimos en Perú, significa que
no va a ir a ninguna parte, lo estoy poniendo ahí como como adorno.

Y luego el segundo enlace miren me lleva a contacto, pero contacto no existe, vamos a crearla. Y
ahí vamos a crear otra etiqueta que vuelva al inicio index.html. Acá le pongo volver al inicio.
Guardo. F5. Y y de una manera muy sencilla ya he creado una navegación de páginas.

luego <article> sirve para mostrar contenido un contenido individual por ejemplo un <article>
vamos a poner un título que es el título más importante <h1> bienvenidos a mi sitio web

22
ahora un <p> es un párrafo lo vamos a ver en el siguiente bloque en la siguiente ahora vamos a
hablar de los párrafos pero por ahora vamos a escribir y estoy muy contento de mostrarles mi
primera página web perfecto ahora que son los section son divisiones de divisiones entonces los
section se acostumbran que tengan subtítulos entonces como ya estamos con el <h1> arriba hay
que poner un <h2> acá muy importante h 2 significa que has descendido a un nivel si yo pusiera acá
<h3> estoy mal este es uno de los errores más comunes de los principiantes mira porque está mal
porque una <h3> debería estar aquí me entienden porque ya bajé un nivel mas entiende estaba en el
h1 que es un nivel <h2> un nivel más profundo <h3> un nivel más profundo ahora no
necesariamente necesitamos un <section> a veces el <h1> y el <h2> pueden estar al mismo nivel
como subtítulos por ejemplo mi experiencia un subtítulo y vamos a suponer que voy a contar mi
experiencia en este curso entonces voy a poner acá h 3 día 1 y voy a poner mi experiencia en el día
1 fue la la la la la la la la la h 3 día 2 y mi experiencia en el día 2 fue como te odio algo o sea que
quiero que entiendan algo podríamos hacer esto podríamos hacer esto section no entienden un
section agrupando al día uno y otro sección agrupando el día dos está bien de hecho según la doble
3 y esta es la mejor manera pero no es obligatorio lo que ha dicho su compañero es totalmente
verdad es pura lógica ción el h2 es mi experiencia en total y el h3 es día 1 día 2 obviamente hacer
que día 2 hacer que día 2 sea miren a o sea un h 4 eso sí es un terrible error me entiendes voy a
guardar voy a actualizar y quiero que ustedes vean ya métele un zoom bien estos son dónde está
poner un h 4k es un error como les dije hace un momento porque no sigues la secuencia no sigues
los niveles así que ustedes deben pensar siempre en los niveles otra cosa importante html y eso lo
voy a repetir durante todo el día de hoy y mañana' html no es diseño entonces si tú tienes un texto
de este tamaño no pongas que se puso verde porque se cree no pongas h1 jamás h1 es porque es el
título principal si tú quieres un texto de este tamaño usa css me explico miren este es un h 4 cierto
miren voy al ccs y le digo h4 con 6 50 píxeles ahora recargo y mire el h 4 es el más grande de todos
incluso más grande que el h1 lo ven ese es un error común de novato creer que pongo los h1 h2
según su tamaño no porque el tamaño tú lo controlas por css y puedes hacer que un h 6 sea más
grande con h1 tu debes ponerlos por lo que acaba de ser su compañero por la jerarquía de el
contenido que tú estás haciendo me entienden si un h 3 es un subtítulo de un h 21 h 12 es un
subtítulo de un h 1 no los pongas por poner he visto muchísima gente cometiendo ese error incluso
ponen un h 4 cuando no ha habido un h 3 antes a uno de los pasantes hace unos días justamente
puso un h 4 en la que acaba de salir y le dije oye alejos un momento donde esta noche 3 porque
pones un h4 y lo corrigió entonces cuidado con eso pasa hasta en las mejores familias en serio

para cerrar el <footer> es el pie de página lo podemos utilizar para mostrar créditos por ejemplo
vamos a poner álvaro felipe porque es mi nombre yo creé esta página

y en las <aside> ya saben para qué se las hay se acuerdan es para mostrar contenido no relacionado
pero que si quieres mostrarlo ahí puede ser una publicidad puede ser tus botones de siguen en redes
sociales sí no es un contenido directamente relacionado pero quieres ponerlo y entonces vamos a
poner acá compra el curso a html5 desde cero nd team komen está bien está dentro de una <aside>
es correcto ahora seguramente tú dirás hoy pero esto se ve feo pero ese es el ese no es el asunto de
css perdón de html este es asunto de css con css puedes hacer que esto esto se convierta en algo tan
hermoso como esos y lo niegue se va de acabar en serio

miren les voy a hacer un ejemplo vamos a vamos a hacer un f 12 vamos a ver si yo puedo desactivar
los estilos aquí hasta head su primero tienen sufrimientos primero su primer suprimir su primer
sufrimiento primer sufrimiento el primer suprimir sufrimiento listo miren le quite todos los estilos
mire en el fondo todas las páginas son iguales esto es la web de the team sin estilos es esto no es
que esté mal yo quiero que tú entiendas porque a veces la gente dice ay qué aburrido html se ve
todo feo es que ese es el objetivo bueno ya recarga la página y cargaron los estilos me entienden en

23
el fondo todas las páginas son iguales esto es una página y es válida es completamente válida de
funcionar está bien hecha su código es perfecto hemos respetado todos los principios los h1 los
<article>, los <header>, los <nav>, los <aside> .. hemos respetado absolutamente todo por lo
tanto está bien hecha y así se hace buen codigo.

3. AGRUPACIÓN DE CONTENIDO

3.1 Etiquetas HTML de contenido

Vimos en la clase 2 las etiquetas para organizar la estructura básica se acuerdan, y las etiquetas para
las secciones <header>, <nav>, <article> etc, ahora vamos a hablar de agrupación de contenido.
Las etiquetas de agrupación de contenido te permiten agrupar información en bloques, en bloques
de contenido.

Listas anidadas
<ul>
<li>Item de lista 1</li>
<li>Item de lista 2
<ol>
<li>Subitem de lista 1</li>
<li>Subitem de lista 2</li>
</ol>
</li>
<li>Subitem de lista 3</li>
</ul>

En primer lugar hablemos de las listas. Recuerden que html es un lenguaje de marcado lo que hace
html es marcar distintos elementos en la página entonces las listas lo que sirven es para enumerar,
por ejemplo un caso muy clásico de listas sería una lista de tareas:

comprar el pan,
pasear al perro,
ir al dentista,
hacer la compra en el mercado,
etc

sí esa es una lista las listas pueden tener dos elementos los elementos <ul> o los elementos <ol>.
todos los nombres de las etiquetas vienen de palabras entonces <ul> es unordered list, que
significaría lista no ordenada, o lista desordenada y <ol> viene de ordered list, que sería lista
ordenada. <li> viene del list ítem. Una lista es un conjunto de elementos que están relacionados que
es una enumeración, por ejemplo, estudiantes que asistieron al curso. Y en html se indica así.

Las listas pueden anidarse, es decir, como arriba esta sección tiene una lista <ol> dentro de un item
de lista. Podemos tener una lista de nivel principal y tener sublistas, de hecho así es como se hacen
los menús de navegación en las páginas web cuando tenemos un sub-ítem de un menú, fue creado
con listas anidadas.

24
Listas de definición
<dl>
<dt>Perú</dt>
<dd>Lima</dd>
<dt>Colombia</dt>
<dd>Bogotá</dd>
<dt>Bolivia</dt>
<dd>La Paz</dd>
</dl>

También tenemos listas de definición. Estas son listas diferentes, no se usan mucho pero existen.
Sirven para indicar un término y una definición, por ejemplo podría ser para un glosario. Una lista
de lenguajes de programación, quieres poner el nombre del lenguaje y una explicación, entonces
harías una lista de definición. Aquí, por ejemplo una lista de capitales.

<dl> definition list, <dt> definition term, es decir, término de definición y <dd> definición
descripción, la descripción de esta definición.

En este caso lo que he hecho es una lista de capitales, podría poner arriba un <h2> o un <h1>
dependiendo la estructura del documento, y decir Lista de capitales en latinoamérica.Tú tienes que
entender en qué caso estás siempre.

figure y figcaption
<figure>
<pre>
<code>
function hola(){
return "hola"
}
</code>
</pre>
<figcaption>
Declaración de una función JavaScript
</figcaption>
</figure>

Esto es muy importante. A partir de html5 se creó una nueva etiqueta llamada <figure> la etiqueta
figure permite que tú pongas un contenido relacionado pero que rompe el flujo del contenido. ¿que
significa que rompa con el flujo? significa que estás viendo un contenido y en el medio te pone, por
ejemplo, una imagen y luego sigue el contenido. Ese es un <figure> porque rompe con el flujo, pero
no solamente una imagen, podría ser un vídeo, una cita, podría ser código, entonces el figure nos
sirve para meter un pedazo de código.

Entonces repito: el figure mete un pedazo de contenido que sí está relacionado, pero que rompe con
el flujo. No necesariamente es una imagen, es para mucho más que imágenes.

Y ¿qué es <figcaption>? Es la leyenda de este contenido, es decir una descripción, un título, una
explicación, es opcional, no es obligatorio, pero si quieres ahí está, y esto es semántico

25
Otros elementos
<main>
<p>Este es un parrafo, un bloque de texto</p>
<hr>
<pre>
Este textp
se representará igual
en el navegador
</pre>
<blockquote>
Use blockquote para destacar citas.
</blockquote>
</main>

El elemento <main> es el elemento más importante en una página web, digamos que es donde se
pone todo el contenido principal de la página, por otro lado está el <nav> por otro lado está el
<header>, <footer> entiende pero el contenido más importante debe estar siempre dentro de
<main>. Así que acuérdate debe haber un main en tu página.

Luego son bloques de texto como dice que este es un párrafo es decir un bloque de texto cada
bloque de texto es un <p> de párrafo ya está fácil.

Esto es otro elemento que viene con trampa <hr> porque viene con trampa porque hr significa
horizontal rule regla horizontal si tú pones hr yo veo varios con sus laptops y ponen hr y pegue en el
navegador van a mirar que se imprime una línea entonces muchos caen en la trampa de decir pero
esto es una línea yo también puedo hacer una línea con ccs border bottom on pixels all blacks y
hasta una línea es que no recuerda siempre recuerda html no es estilo html no es diseño html es
estructura por lo tanto hace este hr significa algo tú ves una línea pero significa algo sabes qué
significa ese hr significa un cambio de sección un cambio de capítulo un cambio de significado
digamos en el texto que estás trabajando eso significa. Entonces cuando por ejemplo vamos a
suponer que tú estás escribiendo una historia un cuento llegas hasta el final y quieres sacar como
unas conclusiones entonces pones un hr que significa que como que vas a romper la secuencia y
luego poner sus conclusiones, porque no sería tan lógico seguir con los párrafos, párrafos y otro
párrafo con las conclusiones y ya como que viene de golpe no se siente ese esa ruptura. Igual pasa
en las películas esa misma es una película y luego como que hay un fundido negro y te dice diez
meses después y te sale el mismo personaje ya con otra vida algo así se necesita algo que haga esa
ruptura si no se siente raro se siente como que te lo han metido a la fuerza.

<pre> significa pre-formateado, que el navegador va a tomar como este el contenido, porque el
navegador siempre ignora saltos de línea y espacios, el navegador normalmente imprimiría esto en
una sola línea ignorando todos estos espacios, pero con <pre> los respeta.

<blockquote> se usa para citas suponte que vas a citar una frase famosa de un personaje pones
blockquote o también vas a destacar algún elemento de tu propio contenido han visto que por
ejemplo revistas o periódicos tienen la costumbre de que están escribiendo y un pedazo del mismo
<article> lo resaltan no pone como un cuadro y resalta en un pedazo del mismo <article> en este
caso usarías la etiqueta <blockquote>

26
Divisiones (Layout)
<div class="user">
<div class="user_name">
<p>Alexys Lozada</p>
</div>
<div class="user_image">
<img src="alexys.jpg" alt="Foto de A.L.">
</div>
</div>

Y por último por último el elemento <div> . Este elemento es uno de los más incomprendidos de
html , porque está en los dos extremos, gente que tiene algo que le llamamos en son de broma
divitis, que es meterle div a todo, no pones p no pones h1 no pone section no pones <article>, pones
div, eso está completamente mal. Y gente que se va al otro extremo, diciendo que no se debe usar
nunca div. Los dos están mal.

<div> es una etiqueta que no significa nada, es curioso porque en html se supone que todo significa
algo, pero hay dos etiquetas que no significan nada en html <div> y <span>. No significa
absolutamente nada, están hechas simplemente para ser contenedores, que luego tú puedas
manipular por Javascript o por CSS.

Por ejemplo este código es para imprimir un usuario: Alexis losada y su foto. Digamos que yo estoy
poniendo una aplicación donde pongo todos mis usuarios, y cada uno de estos usuarios va a tener un
contenedor <div> con la clase y user. Esa clase se usa para css y luego tengo dos <div> dentro, uno
con la clase user_name donde va a ir el nombre del usuario y otro con la clase user_image, con la
foto del usuario. Fíjense como los <div> no tienen ningún significado, es solo para que luego por
CSS le ponga estilos y lo diseño bonito, como una tarjeta con su foto por un lado y el nombre por
otro.

Pero la pregunta que tú debes hacerte siempre cuando hagas html es: ¿Es correcto usar un div o hay
una etiqueta de html que lo haría mejor?. Si la respuesta es que hay una etiqueta que lo haría mejor,
entonces cámbialo. Por ejemplo tú analizas y dices: esto debería ser un <header>, tal vez debería ser
un <article>,. Si solamente lo vas a usar para CSS y Javascript, usa <div>.

Si tienen alguna pregunta aprovechen ahorita mientras vamos abriendo el editor de código

Hablaste de agrupación pero no mencionaste a etiqueta <hgroup>

te cuento buena pregunta te cuento <hgroup> no existe ya. Fue una propuesta que se hizo para html.
Se encontró que no tenía sentido, fue una propuesta para de meter un h1 h2 juntitos, pero luego lo
analizaron y iba contra la estructura. Usar varios h1 no es un error de html. Hace tiempo, antes de
html5 no se permitía usar más de un h1 en un documento html, el validador te daba un error. Hoy
día se puede, pero aunque se puede es recomendable no hacerlo, porque lo que tú acabas de decir,
google usa el h1 como el título principal de la página y es el que le da más valor, de ahí saca el
título, de ahí entiende el significado de la página, etc. En seo afecta.

Ahora, una cosa es importante, la W3C y dice que si tú necesitas un subtítulo uses un <p>, o sea un
<h1> y un subtítulo, por ejemplo, curso html5 desde cero, y el subtítulo, que se ha dictado por
álvaro felipe. Ese subtítulo que sea un <p>, no uses un <h2> y los metas en <hgroup>, eso nunca
funcionó, fue baneado de la especificación.

27
3.2 Práctica: Agrupación de contenido
Habíamos visto primero las listas. Vamos a practicar haciendo unas listas. En primer lugar listas
ordenadas <ol> y recuerden que cada elemento es un <li> .

Puedo crear sub-ítems de esa lista. Creó una lista anidada. Dentro de un <li> meto otra lista
anidada, otro <ol> con otros <li> dentro.

<body>
<p>Ingredientes de mis platos favoritos:</p>
<ol>
<li>Tallarín saltado
<ol>
<li>Fideos</li>
<li>Carne</li>
</ol>
</li>
<li>Arroz con pollo
<ol>
<li>Pollo</li>
<li>Arroz</li>
</ol>
</li>
<li>Arroz Chaufa
<ol>
<li>Arroz</li>
<li>Carne</li>
</ol>
</li>
</ol>
</body>

En webStorm presiono Ctrl + D y se duplica la última línea, en Sublime, Ctrl + Shift + D, en

VSC es Alt + Shift + ↓ . Eso te ahorra bastante trabajo.

28
 Ingredientes de mis platos favoritos:

1.Tallarín saltado
1.Fideos
2.Carne
2.Arroz con pollo
1.Pollo
2.Arroz
3.Arroz Chaufa
1.Arroz
2.Carne

Esto es una lista, pero tiene una peculiaridad, yo abro y fíjense cómo está numerado: 1 2 y 3 están
numerados.

Ahora ¿qué pasa si yo quiero estos ítems no sean números sino que sean letras a, b, c, d? Para eso se
usa css, si bien es cierto que existen atributos para html, pero no son recomendados.

También puedo combinar tipos de lista por ejemplo podemos a ponerle <ul> al superior, y ahora el
primer nivel tendría viñetas y el segundo nivel, números. Nuevamente podemos caer en la trampa
mental de pensar en cómo se ve. No pienses en cómo se ve en html, para eso existe CSS, no caigas
en esa trampa, html es lo que significa.

Entonces la especificación dice que uses listas no ordenadas cuando el orden no importe. Pero
cuando el orden si importe, usa listas ordenadas. Por eso un menú de navegación lo hacemos con
una lista <ul>.

Vamos a examinar el código de páginas de internet presionando f12 para inspeccionar el código.

Con este botón de acá yo puedo seleccionar un elemento de la página e inspeccionar su código.
Cuando yo me posiciono miren cómo se colorea la parte que estoy seleccionando.

Los menús de navegación son el mejor ejemplo de cuando usar una lista no ordenada. Dentro de
cada de <li> ya tú pones un enlace <a href >

¿En qué caso requería un orden? digamos los finalistas al mundial de fútbol o los mejores alumnos
de la clase. Ahí si necesitas <ol> . Cosa curiosa yo con css puedo hacer que un <ol> parezca un
<ul>. Lo explico para que se quiten eso la cabeza, css puede hacer que una cosa parezca a otra.
Html es para información, cómo estructurar.

29
Ya están hartos de escucharme que no piensen en cómo se ve, pero quiero contarte algo, el
navegador tiene algo llamado estilos del user agent. Cuando tú abres con f12 las herramientas de
desarrollador en el navegador, en el lado izquierdo tienes elementos, que sería el html, y en el lado
izquierdo tienes más pestañas, entre ellas 'estilos'. Aquí el navegador te muestra por qué este
elemento se ve así, o sea, qué estilo se le han aplicado. por ejemplo, voy a subir, voy a escoger este
elemento y miren, me dice

user agent stylesheet

display: list-item;
text align: -webkit-match-parent

que significa que son los estilos que tiene el navegador. Todos los navegadores tienen estilos ccs
adentro, su propio css, por lo tanto el <h1> no se ve igual en firefox, que en chrome, que internet
explorer. Por eso es que nunca debes confiar en html para diseño, para eso existe css, porque cada
navegador tiene su propio user agent.

<figure> es para mostrar contenido que rompe con el flujo pero que debe estar ahí porque también
tiene tiene relación con el contenido entonces por ejemplo lo que había hecho yo era lo siguiente
pre coach y ahí poner una función no función o la razón hola y vamos a poner acá fit captcha
ejemplo de función javascript javascript listo

vamos a ver cómo queda mire aseguran que les hable del elemento <pre> también el elemento pre
que está aquí lo que hace es decirle al navegador navegador considera todos los saltos de línea y
todos los espacios en blanco que tenga ese contenido mire qué tal que en el fit caption qué tal que
en el fish caption a un salto de línea miren ejemplo presionó enter para saltar de línea y luego dice
de función javascript voy a guardar y voy a actualizar mire como el salto de línea me lo ignora lo
ven lo y no lo capaz que no guarde bien a ver control bien en el código recuerda con control tú
puedes ver el código de una página entonces miren el código como el saltado de línea ejemplo salto
de línea de función llave flip robben si salte de línea pero se ignoró hay casos en los que tú no
quieres que se ignore es por ejemplo cuando estás escribiendo código de un ejemplo como acá
quieres explicar un código y quieres que los saltos de líneas se respeten o un ejemplo más clásico
quieres poner un poema y en los poemas tienen saltos de línea, entonces pues lo pone dentro de una
etiqueta cree que va a respetarte los saltos de línea y todos los espacios y obviamente lo que hace es
mostrar el código nuevamente esto es visualmente no hace nada pero el navegador sabe que vas a
poner código

les quiero mostrar un ejemplo vamos a poner acá receta de arroz con pollo mire nada atentos enter
como google sabes cómo y no veamos por ejemplo a un futbolista cristiano ronaldo vienen acá tiene
una ficha completa. Todo eso google lo sabe a través de un buen marcado html. Voy a ser muy
insistente en esto hasta que de verdad me odien, es importante marcar bien html porque luego por
seo y por otras funciones ya más avanzadas tal vez para hacer una aplicación más compleja es
importante marcar bien como google sabía que hacer una receta porque fue bien más bien marcado
el código el contenido entonces y a mí también me pasó cuando aprendí html yo decía si yo quito
lee lee la etiqueta code la quito guardo dónde está no veo ningún cambio cierto ningún cambio
entonces tú podrías en tu inexperiencia pensar que ese ticket es opcional no porque lo quito y no
pasa nada pero volvemos a la historia de siempre nunca pienses en lo que ves piensa en si realmente
estás marcando bien tu contenido porque el día que hagas Seo y les aseguro seo da mucha plata el
día que haga se lo va a agradecer mucho haber marcado bien tu contenido.

30
 vamos a ver vamos a ver casos reales vamos a entrar por ejemplo una página de un diario por
ejemplo el diario 'el país' porque así es como se aprende mucho viendo casos reales intentamos
entender acá cómo está estructurado eso ojo hay páginas que igual están mal hechos ojalá no sea el
caso no creo que intentamos entender aquí hay una noticia cierto aquí hay otra acá hay otra que hay
otras cuatro noticias ahí que debería ser cada elemento o ser que el que envuelve a cada una de ellas
voy a hacer un <article> porque es un elemento este como que independiente vamos a chismosear
en teoría también podría ser un <section> article ex sección están en tanto debate que hasta la
especificación tiene un capítulo dedicado a explicar cuando article y cuando section y saben que
dice depende que luego mostraran o no no sólo más lo va a mostrar ahorita pero miren a jada quien
dijo article estaba en lo cierto miren es un <article> bien cada uno de estos es un <article> genial y
que habrá dentro vamos a mirar dentro de un dip que entonces un día una etiqueta que no significa
nada es solamente para acomodar no es una caja para acomodar las cosas perfecto pero miren qué
hay dentro un figura perfecto dentro hay un título pero aún un enlace y la imagen perfecto está bien
en h2 que es el título de esta noticia bien estoy en pro de esto esto lo vamos a ver hoy día al
finalizar el día que es muy chévere que se llama microdatos les va a encantar esto y luego viene
miren esto de acá este es el autor no francesco mate no es el autor vamos a ver qué es <article>
metadatos estos son de its hay casi yo creo yo personalmente yo creo que pudieron poner un fútbol
porque los fútbol pueden ir dentro de los <article>s pero bueno ya entraríamos en terreno del debate
no pero quiero que vean esto vamos a ver arriba que hay arriba hay un header miren les invito a
chismosear páginas habrá presión en jefe 12 usen este botón y empiecen a recorrer y ponerse en
encima de cada lugar y está bien header luego hay una cabeza el interior cabecera superior que a
veces inferior etc. etc. etc.

4. ELEMENTOS DE TEXTO Y ENLACES

A partir de ahora ya viene lo interesante las cosas bonitas de html. Hasta ahora hemos visto como
algo introductorio, algo que puede ser un poquito aburrido incluso, pero a partir de ahora ya la cosa
se pone interesante.

4.1 Elementos HTML inline y de bloque

En primer lugar quiero que ustedes sepan la diferencia entre un elemento de línea y un elemento
de bloque.

Un elemento de bloque visualmente ocupa, reserva todo el espacio disponible en pantalla y el

siguiente elemento de bloque aparece debajo. Mientras que un elemento de línea se va ubicando
en línea, uno al lado del otro.

Entonces <p>, un párrafo es un elemento de bloque. Si escribo dos párrafos, el segundo párrafo
siempre va a aparecer debajo del primero (salvo que yo con ccs lo manipulen). Pero si escribo dos
elementos <span> uno arriba y otro abajo en pantalla, se van a ver uno al lado del otro, porque son
elementos de línea.

Ahora es importante que lo sepan, porque los elementos de línea deben estar dentro de elementos
de bloque, no pueden estar huérfanos.

Todo lo que hemos visto hasta ahora son elementos de bloque: <ul>, <li>, <p>, <blockquote>,
<article>, <figure> todos. Pero a partir de ahora vamos a empezar a ver elementos de línea,
elementos que van dentro de los párrafos, más pequeños, más detallados.

31
Elementos de texto comunes
<p>
<small></small>
<strong></strong>
<em></em>
<cite></cite>
<dfn></dfn>
<code></code>
<data></data>
</p>

Miren que justamente los he puesto dentro de un <p>, para que se acuerden que deben estar dentro
de elementos de bloque, no necesariamente dentro de un <p>, podrían estar dentro de un <li>, o un
<figcaption>.

Podríamos pensar que estos <small> <strong> etc. son elementos para diseñar, porque si yo pongo
strong a un texto se ve en negrita, si yo pongo <em> a un texto el texto se ve inclinado. Pero
recuerda con html no se diseña. El navegador le da texto en negrita, que es otra cosa, pero en
realidad estos tienen un significado más profundo, <strong> significa que es un texto que es más
importante; <em> también, pero tiene una pequeña diferencia, significa que está enfatizando algo;
<cite> es para citar; <dfn> definición, cuando tú quieres definir algo, explicar qué significa unas
siglas; <code> para poner fragmentos de código; <data> es para poner datos, que vengan de algún
programa, o para poner ejemplos de algunos datos que has traído de alguna estadística etc.

<p>
<br>
<q></q>
<abbr></abbr>
<del></del>
<wbr>
<span></span>
<i></i>
<b></b>
<u></u>
</p>

Hay más ahorita les voy a mostrar la especificación. Son tantos que no nos alcanzaría para verlos
todos, lo vamos a mirar muy rápido y vamos a detenernos en los principales.

<br> es para saltos de línea significa breaking rule; <q> es para citas también, quotes; <abbr>
viene de abreviación; <del> delete, es cuando quieres indicar que un texto ha sido eliminado, por
ejemplo una oferta, 40 dólares y le pones delete entonces indica que ya no tiene ese ese precio y
luego pones el precio real; <wbr> word break o sea ruptura de palabras, eso lo haces cuando una
palabra es muy larga, tú le puedes poner esa etiqueta en el medio de la palabra, para indicar que si
no hubiera espacio suficiente en la pantalla, ahí salta la siguiente línea, y para que no se rompa el
layout del diseño de la página, no se quede todo feo estirándose; <espan> es equivalente al <div>,
que era un contenedor que no significaba absolutamente nada, pero ese es de bloque, cuando
hablamos de texto usamos el <span>, no significa absolutamente nada, pero a veces tú quieres un
contenedor de texto, por ejemplo si tú quieres que un pedazo del texto tengo otro color, es
solamente diseño, no significa nada, entonces le pones un <span>, una clase y con css se le das ese

32
color. Es lo mismo que <div> pero en en linea; <i>, <b> y <u>, bolt y underline, subrayado, estos 3
no sé por qué todavía existen espero que algún día los eliminen, porque estos son los únicos
elementos de html que son de diseño. Vienen de los tiempos remotos de html.

<p>


<time></time>
<mark></mark>
<a href=""></a>
</p>

por último las etiquetas <sub> y <sub> vienen de súperíndice y subíndice, aunque aparentemente
tienen un diseño, también tienen un significado, superíndice que imprime una letra pequeña arriba,
en un exponente, x al cuadrado, una fórmula química, h2o; <time> para poner horas, fechas, igual
no es obligatorio, pero si estás haciendo una aplicación o una página web en la que es muy
importante el tiempo, algo tipo twitter, en twitter el tiempo es muy importante porque es indica en
qué momento se publicó, ahí si te tocaría usar la etiqueta <time>. Si tu aplicación tiene como crítico
el tema del tiempo sí sí toca; <mark> para marcar, destacar algunos elementos. Es el equivalente a
pasarle un resaltador a un texto.

4.2 Los enlaces

Quiero detenerme realmente en los enlaces. Es la parte más importante que cuesta comprender al
inicio. Así que veamos:

<p>
<!-- Ruta absoluta -->
<a href="http://ed.team">Educación</a>
<!-- Ruta relativa, misma carpeta -->
<a href="usuarios.html">Usuarios</a>
<a href="./usuarios.html">Usuarios</a>
<!-- Ruta relativa, carpeta superior -->
<a href="../usuarios.html">Usuarios</a>
<!-- Ruta relativa, 2 carpetas arriba y subcarpeta -->
<a href="../../usuarios/usuarios.html">Usuarios</a>
<!-- Ruta relativa a la raiz -->
<a href="/usuarios.html">Usuarios</a>
</p>

Acá hay rutas: Ruta absoluta, ruta relativa, relativa a la raíz.

Vamos por partes ¿Qué es un enlace? es un hipertexto, haces clic y te lleva a otra parte. El asunto
es: ¿como yo le digo a dónde me va a llevar?. En el atributo href se define la ruta.

¿Cómo definir las rutas?

Hay dos tipos de rutas: relativas y absolutas. Las rutas absolutas son las más fáciles de entender.
Son únicas y siempre comienzan por un protocolo, ya sea http, https, etc.

33
Rutas relativas. En la misma carpeta

Las rutas relativas van a depender de las carpetas. Si quiero hacer un enlace a otra página pero que
esté en la misma carpeta. Puesto puesto que el destino y el index están en la misma carpeta
simplemente basta con poner su nombre:

<p>
<a href="destino.html">Destino</a>
</p>

Sin embargo, a veces te vas a encontrar esto:

<p>
<a href="./destino.html">Destino</a>
</p>

Estas dos opciones son lo mismo, los dos significan 'en la misma carpeta'. pero en muchas
ocasiones por de la configuración del servidor es preferible poner “./destino.html”. En algunos
servidores poner así: "destino.html", no te va a encontrar el destino.

En html como que no, pero si estás haciendo una aplicación con javascript, con ruteadores y cosas
así, sí es recomendable poner “./ ”.

Rutas relativas. A una subcarpeta

pero qué pasa si yo tengo una subcarpeta dentro del directorio en que está la página origen.

<p>
<a href="./subcarpeta/destino.html">Destino</a>
</p>

Primero buscamos dentro de la carpeta en la que estoy, y entonces busco esa subcarpeta, y luego
voy al archivo. (en resumen añadimos la subcarpeta a la ruta).

Y para volver del destino, al origen. Voy a subir un nivel, usamos dos puntos barra, “../”

<p>
<a href="../origen.html">Volver al origen</a>
</p>

Estoy en una subcarpeta, subo de nivel (../), al subir ya estoy al nivel del archivo origen.html.

Y ahora ya entienden las diferentes combinaciones de estos códigos en la ruta. Puedo subir los
niveles y luego meterme en otra subcarpeta o meterme en dos subcarpetas más, etc.

Ruta relativa a la raiz

Esto solamente funciona cuando estás trabajando en un servidor. Tú puedes tener un servidor local,
un local host, puedes instalar un programa tipo Xamp, o un programa que a mí me gusta mucho
Prepros. Lo que hace Prepros es actualizar automáticamente la página, se queda escuchando tu
proyecto y cada vez que hagas cambios actualiza la página. Pero no solamente hace eso, también te

34
permite, a través de una ip, ver tu mismo proyecto en diferentes computadoras de la misma red
local, y puedes ver cómo se ve en diferentes equipos, incluso en teléfonos.

Y otra cosa es que te crea un local host. Porque no es lo mismo cargar una página en el navegador
como archivo, que la página la entrege un servidor al navegador. Un servidor es un programa que
tiene una estructura para entregar archivos html.

Hay muchas cosas que no te van a funcionar como file (archivo). Es mejor que tú en local trabajes
como si fuera un local host, para acostumbrarte a la estructura de carpetas etc. WebStorm me crea
automáticamente un local host al vuelo, solamente hacer clic acá (los iconos para elegir el
navegador que abra la página). Prepros también crea un localhost y vas a poder probar como si
realmente estuvieras trabajando en un entorno de desarrollo real, no simplemente file, como
archivo.

Entonces si tú estás trabajando en un servidor, o en un local host, esta barra de la ruta significa la
raíz del proyecto, es decir, la carpeta superior del proyecto.

Muchas veces ya no vas a necesitar tu hacer ese dos puntos arriba (../), dos puntos arriba (../), o
meterte en la subcarpeta, te basta usar rutas relativas a la raíz.

<p>
<a href="/destino.html">Destino</a>
</p>

¿Qué significa slash (/), la raíz del proyecto. ¿cuál es la raíz del proyecto? El dominio. Es mucho
más práctico. Entonces yo no tengo que decir la ruta partiendo desde la carpeta del archivo origen,
sino que uso las rutas relativas a la raíz.

4.3 Los marcadores

<ul>
<li><a href="#infancia">Infancia</a></li>
<li><a href="#juventud">Juventud</a></li>
<li><a href="#exito">Éxito</a></li>
</ul>
<h2 id="infancia">Infancia</h2>
<h2 id="juventud">Juventud</h2>
<h2 id="exito">Éxito</h2>

Son enlaces a partes dentro de la misma página o partes de otra página externa.

¿Cómo se hacen los marcadores?

El destino es un # (hash) con un texto, y ese texto debe coincidir con un id en la misma página.
Entonces cuando yo haga clic en el marcador, me va a llevar al lugar de la página que tenga ese id.

35
Atributo target
<a href="/destino.html#capitulo2" target="_blank">Destino. Capitulo 2</a>

El atributo target tiene una opción de valor '_blank' que me permite abrir el enlace o el marcador en
una nueva pestaña y así no salir de nuestra página. Entonces el usuario, cuando haga clic, se va a
otra página pero no deja la mía. La recomendación es que cada vez que pongas un enlace a una
página de otra persona, de otra empresa, siempre pongas target=”_blank”, de esa manera nunca
salen de tu página, y los enlaces externos se van a abrir en otra página. Pero cuando sean enlaces de
tu propia página no pongas target=”_blank”.

5. IMÁGENES

5.1 Imágenes en HTML

Tipos y formatos de imágenes

Tenemos dos tipos de imágenes vector que es código y mapa de bits que son píxeles. Dentro de los
mapas de bits tenemos jpg y png. Los jpg son excelentes para fotos y nada más, los png puede
servir para iconos, pueden servir para imágenes con transparencia, imágenes con texto. Y también
tenemos el formato webp de Google, que supuestamente reemplaza a jpg y png juntos y es más
liviano pero solamente funciona en google chrome. Y por último tenemos los gif, que practican hoy
en día prácticamente solo se usan para animaciones y para memes. En los tiempos antiguos de la
web, esta estaba llena de gift porque era la única manera de crear animaciones.

Como se inserta una imagen

Con el elemento <img>. El editor me ha me ha auto completado dos atributos el atributo src y el
atributo alt. En src ponemos la ruta de la imagen. Y alt es para poner un texto alternativo. Ese texto
alternativo lo usan los lectores de pantalla, para gente con problemas visuales o que no puede ver,
ese es otro concepto que se llama accesibilidad.

Una página que me gustaría recomendarles es pexels.com. Las fotos que encuentras en esta página
son libres de derechos de autor.

<body>
<img src="https://www.pexels.com/photo/aerial-photography-of-house-field-and-
trees-covered-with-snow-3540375/" alt="foto aerea de casa">
</body>

Podemos poner en src la ruta absoluta de alguna de estas fotos, y aparece en nuestra página. Esto
tiene el problema de que la ruta de la imagen está en otro servidor, si en algún momento el dueño de
este otro servidor decide borrar esa imagen, te quedaste sin imagen, nos daría el error 404, que es
cuando se tiende a traer un recurso que no existe. Entonces que sería lo recomendable sería
descargar esa imagen y ponerla en mi proyecto. Es recomendable siempre crear una carpeta img.
Salvo que sea el favicon, no lo pongas en la raíz del proyecto, crea una carpeta aparte.

36
 <body>
<img src="img/casa.jpg" alt="foto aerea de casa">
</body>

5.2 Viewport y device Pixel Ratio

Cuando ponemos una sola imagen todo es muy fácil, pero en algunas ocasiones vamos a necesitar
más de una imagen. Se puede acceder a tu web desde una computadora o desde un teléfono. Para
una computadora con monitor full hd, tú pones una imagen de 1920 píxeles de ancho. Esa imagen
es demasiado grande para un teléfono.

Seguramente has visto que este teléfono tiene 2560 píxeles de ancho y entonces no sería muy
grande la imagen. El detalle es que una cosa es la cantidad de píxeles que tenga una pantalla de un
teléfono y otra el viewport.

Este teléfono tiene como pixeles 1920 x 1080 píxeles, full hd, o sea en teoría este teléfono tiene la
misma cantidad de píxeles que esta pantalla de pc. Pero en el viewport, (El viewport, en un pc, es el
tamaño de la ventana que abrimos, no de la pantalla. Igual en un movil. En el movil no
dimensionamos la ventana de la aplicación, sino que esta es toda la pantalla, pero sí le damos
comportamiento de viewport y por eso tiene su resolución independiente de la resolución de la
pantalla del dispositivo) y eso es muy importante, este teléfono tiene una resolución de 360 x 640
píxeles. ¿Qué significa? que tiene más píxeles de los que realmente muestra, (que el viewport y la
pantalla tienen resoluciones diferentes) eso permite que se vuelva más nítida la imagen (creo que
sirve para que el texto se vea mejor, que no se vea muy pequeño).

Google chrome tiene una una funcionalidad con f12, puedes elegir ver la página en un movil, y ahí
te dice la resolución de su viewport.

El viewport es el espacio que tienes para diseñar tu aplicación, o tu página web. Entonces si tú
quieres realmente pensar en los tamaños que debes poner para tu aplicación o tu página web, debes
entender el tamaño del viewport.

Y aquí entra algo muy importante el device pixel ratio. Vamos a la consola de herramientas de
desarrollador de Chrome (f12 y console), y si introducimos devicePixelRatio, nos devuelve su
valor actual de la página que tengamos. Voy a hacer un zoom 125 150, vamos a poner de nuevo
devicePixelRatio, devuelve 1,5; Zoom 200, devuelve 2. Estamos viendo acá la relación que hay
entre píxeles reales y píxeles de viewport. Sí es 3, te está diciendo: por cada pixel del viewport,
realmente hay 3 píxeles reales.

por eso que se ve tan nítido no sé si me entienden la idea de por cada punto real hay tres en realidad
por eso es que si tú me tomas una foto no ves los puntitos como si no puedes ver entre su
computadora y por eso es que cuando miren cuando yo me puse en modo iphone 10 y le puse de
vice pixel radio me dio 3 significa que el iphone 10 tiene esa relación en otras palabras a ver si me
cantaron

Pregunto: El iphone 10 tiene 375 píxeles de viewport, pero tú sabes que tienen más píxeles reales.
Si yo le pongo una imagen de 375 píxeles al iphone 10 ¿se va a ver nítido o no?.

37
Respuesta: Por cada pixel de viewport, requiere 3 píxeles, por lo tanto tú para que se vea nítido en
el iphone 10 necesita es una imagen de 3 veces ese tamaño.

Por eso es muy importante este concepto del device pixel ratio, te dice esa relación. Entonces si
tiene un ratio de 3 multiplico su viewport por 3 y esa es la resolución de la imagen que necesito.

El problema con esto es que no todos los dispositivos tienen 3 de device pixel ratio, la computadora
tiene uno siempre, salvo que sea una super avanzada, pero por lo general tiene uno no necesita más.
Entonces necesito una imagen del tripe para el teléfono, otra imagen para la computadora, una
imagen para los teléfonos de gama alta, otra imagen para los teléfonos de gama baja, es tremendo
este asunto. ¿Como resolvíamos eso antes? con javascript preguntábamos ¿cuál es el
devicePixelRatio de ese teléfono? Tanto, entonces mandan esta imagen. Pero ahora también
tenemos opciones con con html.

5.3 Picture y atributo srcset

Cuando tú necesitas más de una imagen ya tienes un nuevo atributo en html que se llama srcset. Src
viene de source, fuente, ruta y un set es un conjunto. Entonces es como decir un conjunto de
orígenes. Entonces miren como lo hacen ustedes, la sintaxis es tan sencillo como decirle: vas a usar
esta imagen cuando tengas este devicePixelRatio (1.5x) y vas a usar esta otra, cuando tengas este
otro devicePixelRatio (2x). Pero es necesario tener tambien un atributo src, como respaldo.

<img src="foto-100.jpg"
srcset="foto-150.jpg 1.5x, goto-200.jpg 2x"
alt="" with="100" height="150">

O también podemos usarlo para el tamaño del viewport. Para un vewport de 800px de ancho
(800w), u otro de 1300px de ancho (1300w)

<img src="img/perritos.jpeg"
srcset="img/mochuelo.jpeg 800w, img/ardilla.jpeg 1300w" >

Ahora al hacer Zoom con control +, cambia la imagen que sale. Control cero es el zoom al 100%,
sale la imagen por defecto; Ctrl +, la imagen 2, y más zoom y sale la imagen 3.

Así podemos tener para tamaños grandes, una foto muy grande, para tamaños pequeños una foto
más pequeña, que no consuma muchos recursos. Tú podrías mandar a un teléfono de gama baja que
tú sabes que va a tener un devicePixelRatio de 1, una imagen más pequeña y para un iphone 10 o
un galaxy s7,que tiene 3 de devicePixelRatio mandarle una imagen más pesada.

Etiqueta picture
Por último tenemos algo similar que es la etiqueta <picture> . Es muy parecida. Tiene varios
elementos <source>, cada uno para una imagen diferente y por último tiene un elemento <img>.

Es muy parecido con la diferencia de que <picture> usa las media query de CSS. Un ejemplo muy
básico:

38
 <picture>
<source srcset="img/mochuelo.jpeg" media="(min-width: 500px)">
<source srcset="img/perritos.jpeg" media="(min-width: 800px)">
<img src="img/ardilla.jpeg" alt="foto de ardilla">
</picture>

Miren mi código, tengo dos source y un img por defecto, la imagen por defecto es cuando no se
cumple ninguna de las otras condiciones.

Analicemos el código: imagen1, para tamaños mayores a 500; imagen 2, para tamaños mayores a
800 y por último la imagen por defecto, para cualquier otra situación que no coincida con las
anteriores. Bien, el detalle es ¿porque nunca aparece la imagen 2? Sencillo, porque lee el código de
arriba hacia abajo, entonces primero lee la imagen 1, esta imagen cumple la condición para el
navegador, es decir ¿tiene como min-width, 500 píxeles la pantalla? la respuesta es sí y se acabó.

Saben que cuando si tienes una condicional con varios else con el primer true sale de la condicional,
ya no busca en los siguientes, por más que más hayan otras condiciones que se vuelvan true, con la
primera condicional sale. Cumplió la primera entonces nunca evalúa la siguiente.

Ahora como quiero que evalúe está, pues entonces la pongo arriba. Pongo primera la más grande,
entonces cuando esté por debajo de 800 la primera no se va a cumplir y va a buscar la siguiente.

La pregunta que muchos se harán es pero ¿estás descargando las tres imágenes del servidor? no
solamente descarga la que coincida con la condición, nada más. Porque si descargara las tres
imágenes no tienen ninguna gracia, en vez de estar ahorrando ancho de banda estaríamos
desperdiciando.

Así terminamos la parte de imágenes, para repasar muy rápido:

Tenemos <img src , cuando es una sola imagen y se acabó, por ejemplo el logo.

Si tú necesitas más de una imagen puedes usar la misma etiqueta img pero con el atributo srcset, y
simplemente tú le pones para que devicePixelRatio va a ser, o para que el tamaño de pantalla va a
ser y ya está.

Si necesitas hacer más variaciones con media queries usas <picture> y ahí le indica la media
query min-with, min with y el valor por defecto.

6. SEMÁNTICA Y MICRODATOS

6.1 Microdatos y OpenGraph

La semántica es parte de html, los microdatos, no. Son como un añadido a html pero es muy
importante. Qoogle lo usa. Se acuerdan que hace un rato vimos las recetas de arroz con pollo
buscamos a un futbolista y google nos daba hasta fichas completas, eso se hace con microdatos y
todo eso vamos a ver.

39
Un ejemplo cuál es la capital del perú lima hace unos años si tú decías esa pregunta google google
respondía con resultados de búsqueda con resultados de búsqueda buscando esa frase cuál es la
capital del perú ahora google es capaz de entender la pregunta y te responde pongamos otro ejemplo
cuando me deje en ridículo frente a ustedes pero yo creo que sí va a funcionar quién escribió harry
potter fantástico me responde la pregunta, ya no solamente me busca el resultarían o no me busca
<article>s me responde la pregunta. esto es como magia negra da miedo esta búsqueda de alguno de
ustedes supuesto nacimiento y me sale con la foto de usted de seguro.

¿cómo se logra llegar a ese nivel? es muy amplio vivimos en una época en la que se habla de
inteligencia artificial es un tema muy amplio en el que no vamos a entrar, pero una de las cosas que
nos ayudan a tener una web tan bien estructurada, en la que un buscador sea capaz de buscar en
datos tan específicos como la edad, es a través de los microdatos ¿que son los microdatos? son
atributos que tú le das al contenido, para decirle qué cosa es cada elemento.

por ejemplo vamos a suponer que tú haces una tienda de zapatillas online. entonces tú tienes tus
artícle, cada <artícle> es una zapatilla con su precio, varios <article>. muy bien le pones por ahí la
marca, marca tal, color tal, pero eso solamente es como para css, es decir, vamos al código y ahora
me van a entender.

<article>
<h2>Zapatilla deportiva</h2>
<img src="zapatilla1.jpg" alt="Foto zapatilla1">
<p>Marca: <span>Nike</span></p>
<p>Precio: <span>300</span></p>
</article>

Esto es muy bonito y funciona le podemos poner clases y con ccs hacemos un diseño muy bonito.
El detalle es que un buscador como google, o cualquier otro otro otra tecnología que maneje por
ejemplo big data o que maneje inteligencia artificial, que hacen análisis de grandes cantidades de
datos, grandes cantidades de datos, nunca va a saber que eso es una zapatilla. Salvo que lea el texto,
lea el contenido y tenga tenga la capacidad para leer el contenido y almacenar esa info. Pero por los
atributos, por las etiquetas, no tiene la capacidad. Este es un h2, este es un <article>, por ningún
lugar dice que sea una zapatilla. ¿Significa que deberíamos tener una etiqueta zapatilla? No, aunque
en realidad se podría con web componentes, pero es un tema muy amplio que implica javascript
avanzado.

Lo que podemos hacer es usar microdatos. Los microdatos nos permiten decirle a cualquier
buscador o cualquier motor de big data o de inteligencia artificial, decirle: esto, es este <article> es
una zapatilla; este, es la marca de la zapatilla; esto, es el precio de la zapatilla.

Si tenemos una tienda de libros digitales, entonces debemos tener: el libro; el año; el autor; la
cantidad de páginas. Entonces todo eso también serían <article>s , con un h2, con un img.
Necesitamos formas de decirle a un buscador qué cosa es cada elemento. Y esos son los microdatos
para eso vamos a ir a una página llamada schema.org. Esta define un conjunto de estándares para
definir los microdatos. Vamos acá a la documentación/ Getting started with schema. Aqui un
ejemplo:

40
 <div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August
16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Al agregar itemscope, está especificando que el HTML contenido en el bloque <div> ... </div> es
sobre un elemento en particular.

Pero no es tan útil especificar que se está discutiendo un elemento sin especificar qué tipo de
elemento es. Puede especificar el tipo de elemento utilizando el atributo itemtype inmediatamente
después del itemcope.

Esto especifica que el elemento contenido en el div es de hecho una película, como se define en la
jerarquía de tipos de schema.org. Los tipos de elementos se proporcionan como URL, en este caso
http://schema.org/Movie.

Itemscope, itemtype, son solamente atributos. entonces cuando usamos el atributo Itemscope, lo
que estamos diciendo es: Todo este conjunto, todo este elemento es una familia de schema. ¿qué es
un schema? Una familia de datos, por ejemplo un esquema sería un libro, otro esquema sería un
usuario, otro esquema sería una empresa. Tú le estas diciendo: este es un Itemscope, es decir, todo
esto es un ítem que vamos a meterle de microdatos. Con el atributo itemtype tú le vas a decir qué
tipo de schema es: Esto es una película. Y luego con itemprop, tú le empiezas a decir qué cosa es
cada elemento, por ejemplo este es el nombre de la película; el director. De esta manera ya estamos
yendo más allá de la simple etiqueta, ya estamos diciendo qué cosa es cada elemento: género; tráiler
, con su link. Entonces si tú buscas tráiler de esta película, google te va en contra de ese link.

Y eso en resumen es todo. Lo importante es ver el vocabulario “Using the schema.org vocabulary”.
Una lista completa de todos los tipos (full list of all item types): Una cosa; una acción; un trabajo
creativo; por ejemplo un artículo de noticias; un reporte; un artículo escolar; un post en social
media.

vamos a hacer un schema que sea artículo de blog sobre este curso de html 5.2, en la universidad
nacional mayor de san marcos, este viernes y sábado, bla bla bla bla. Digamos que eso es una
noticia en un un blog, digamos que sea la página de la facultad. Entonces tendríamos que ir a
schema.org y buscar el tipo que más se acerque a lo que tú quieres mostrar. Hay un montón, por
ejemplo un evento, si tú vas a promocionar un evento, un evento de empresa, un evento para niños...
Entonces vamos aquí a blog y miren: propiedad about, sobre qué es el tema; propiedad autor.

Lo que vamos a hacer es que sea un artículo en el blog donde vamos a copiar este esta url de
schema donde esta esta categoria de blog, y vamos a la etiqueta padre, al nivel superior y la
pegamos en Itemscope itemtype; y vamos a ponerle por ejemplo autor. Entonces vamos acá y en
una etiqueta <p> dentro de <footer> le ponemos itemprop=”autor”, como atributo de <p>

41
 <article itemscope itemtype="https://schema.org/Blog">
<h2>Curso de HTML 5.2 en UNMSM</h2>
<p>Este viernes y sábado</p>
<footer>
<p itemprop="author">A. Padilla</p>
</footer>
</article>

Esto es algo muy básico, pero de esta manera ya estamos creando esquemas más específicos de
contenido. Para saber si está bien, porque no basta copiar y pegar, google tiene algo llamado
herramienta de pruebas de datos estructurados. ¿Qué haces con esta herramienta de google?
pegas tus datos estructurados, es decir tu html, con él con el schema y google te va a decir si lo has
hecho bien o si tienes errores que corregir.

Y google primero me dice, 0 errores, 0 advertencias; me está diciendo que esto es un blog y me está
diciendo que el autor es A. Padella. Entonces pueden hacer eso, si están haciendo una página, con
los datos de la empresa, o los datos del producto. No cuesta mucho y el beneficio es muy grande a
nivel de Seo. E incluso Google también tiene su propia documentación que tú puedes leer para ir
más allá en datos estructurados o microdatos, que es lo mismo.

OpenGraph
Eso es para google pero no podemos negar que hoy por hoy hay otra empresa tan poderosa en
gestión de contenidos como google que es facebook. Esta tiene algo llamado Open Graph.

Open Graph es un protocolo de facebook, que facebook utiliza para saber los elementos de tu
página. Si pegamos en facebook un enlace con OpenGraph puede reconocer sus datos estructurados
y añadirlos al link, como la imagen que aparece.

¿Y como facebook sabe? Porque yo se lo he dicho. En facebook la información se la damos a

través de Open Graph.

Miren lo que tú debes hacer para operar es muy sencillo, en la página del protocolo Open Graph,
https://ogp.me/ vemos los ejemplos.

En primer lugar este prefijo que va en la etiqueta html, esto es lo básico:

<html prefix="og: http://ogp.me/ns#">

Luego en las etiquetas meta, tú le pones como property el valor og: y el tipo de dato que vas a
especificar por ejemplo title, url, type, image, etc. y luego en content=”” específicas el contenido.

<meta property="og:title" content="The Rock" />

<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />

A lo que quiero llegar es que la manera de implementar open graph es tan sencilla como eso.

42
Vamos a Ed.team, vamos a hacer un control U, para mirar el código y vamos a buscar, control f,
“og:” . Miren esto es un sitio real con un montón de og... tambien hay para twitter, es lo mismo pero
para twitter. Miren esto es lo importante og: image y la url. Vamos a copiar y a abrirla, es la imagen
se mostró cuando lo compartía en facebook. Existe una herramienta llamada sharing debugger de
facebook que te permite saber como se va a compartir el link en facebook. Te dice los datos que ha
recibido, todos los og:

7. TABLAS

7.1 Tablas HTML

Las tablas se usan para mostrar datos de manera tabular. El reporte de calificaciones de los
estudiantes, el primer lugar, el segundo lugar, cuantos sacaron en el primer semestre, y cuántos
sacaron en segundo, etc.

Antes las tablas se usaban para maquetar, para diseñar la estructura de una página y ya no. Html no
se usa para diseño, pero se usa para estructurar contenidos, por lo tanto si tú usas las tablas para
diseño lo estás haciendo mal, pero si tú usas una tabla para estructurar contenido que debe ir de esa
manera, pues ahí lo estás haciendo bien.

Una tabla tiene columnas y filas, cada una de estas intersecciones donde se cruza una columna y
una fila es una celda. Vamos al código.

Etiquetas <table> , <tr> y <td>

Para hacer una tabla usas un elemento <table> dentro de ese elemento se van a poner las tablas.
Hay muchos elementos pero vamos a lo básico.

El elemento <tr> que significa table row, fila. Las columnas, sin embargo, en html no existe ese
concepto, es un poco raro pero de verdad no existe, lo que existe es el concepto de celda <td>, que
significa table data es decir es el lugar donde proponen datos. Entonces vamos a hacer un horario de
clases. Empezamos con las asignaturas de la primera hora.Creamos una fila <tr> y dentro cinco
celdas <td> con las asignaturas.

Cuando lo abrimos en el navegador aparece como un párrafo, no se ven las celdas de la tabla. Para
verlas le pongo en <table> , el atributo border=”1”, ojo, esto no lo deberías hacer nunca, para eso
existen propiedades de CSS para las filas y columnas.

43
 <table border="1">
<tr>
<td>HTML</td>
<td>PHP</td>
<td>Javascript</td>
<td>Python</td>
<td>CSS</td>
</tr>
</table>

HTML PHP Javascript Python CSS

Podrías hacer tu horario, pero ten en cuenta que tienes que recordar el orden. En el código
realmente no hay un orden de columnas, solamente hay filas y luego tú tienes que acordarte que las
celdas corresponden unas con otras según su orden.

Encabezado y partes de la tabla <th>, <thead>, <tbody> y <tfoot>

Cabecera es donde se indica el tipo de dato o de información de cada columna, por ejemplo en el
horario, lunes, martes, etc. deberían ser cabeceras. Para que eso sea está <th> que vendría de table
heading , o encabezado de tabla. El navegador lo pone en negrita por defecto para tener una guía
visual.

Si tú usas un encabezado vas a necesitar encerrarlo en un elemento <thead> y ya lo tenemos

completamente separado. Pero ojo si es un elemento <thead> , necesitas un elemento <tbody> para
el cuerpo de la tabla. Añadimos en boy la siguiente hora de clases.

En algunos casos que necesitas poner conclusiones, como un pie de la tabla, tenemos el elemento
<tfoot> . Se usa para poner abajo la suma o el total en una tabla contable. En este caso no tiene
mucho sentido usarlo porque el ejemplo es un horario. pero yo sé que ustedes tienen entonces igual
tr y vamos a inventarnos algún algún <tfoot> , créditos.

Lunes Martes Miercoles Jueves Viernes

HTML PHP Javascript Python CSS

Java SQL Algoritmos Angular PWA

6 créditos 3 créditos 4 créditos 2 créditos 7 créditos

44
 <table border="1">
<thead>
<tr>
<th>Lunes</th>
<th>Martes</th>
<th>Miercoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>PHP</td>
<td>Javascript</td>
<td>Python</td>
<td>CSS</td>
</tr>
<tr>
<td>Java</td>
<td>SQL</td>
<td>Algoritmos</td>
<td>Angular</td>
<td>PWA</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>6 créditos</td>
<td>3 créditos</td>
<td>4 créditos</td>
<td>2 créditos</td>
<td>7 créditos</td>
</tr>
</tfoot>
</table>

7.2 Agrupación de celdas

Agrupar celdas de la misma fila

Hay situaciones en las que nosotros vamos a querer agrupar celdas. Un recreo que va a lo largo de
los cinco días. Entre la primera y la segunda hay que crear un nuevo <tr> y dentro un <td> , uno
nada más, porque va a ser uno a lo largo de la fila.

45
 <tr>
<td>Recreo</td>
</tr>

Vamos a ver qué sucede:

Lunes Martes Miercoles Jueves Viernes

HTML PHP Javascript Python CSS

Recreo

Java SQL Algoritmos Angular PWA

6 créditos 3 créditos 4 créditos 2 créditos 7 créditos

Está raro pero no da error, o sea, tú podrías tener una tabla en la que haya filas que tengan más
celdas y filas con menos celdas. Obviamente no es lo correcto tampoco. En este caso lo que
deberíamos hacer es usar en <td> un atributo llamado colspan=”5”. El atributo colspan lo que hace
es indicar cuántas columnas va a ocupar esta celda. Por defecto una columna es a una celda.
Entonces yo le debería poner 5.

<tr>
<td colspan="5">Recreo</td>
</tr>

Agrupar celdas de la misma columna

Vamos a suponer que en mi horario tengo algunas clases que tienen dos horas, entonces sería el
atributo rowspan.

Añadimos una segunda hora de clases antes del recreo con dos clases en la semana que ocupan dos
horas.

1º Eliminamos los repetidos en la fila inferior.

2º ponemos en <td> el atributo rowspan=”2”

46
 <tr>
<td rowspan="2">HTML</td>
<td>PHP</td>
<td rowspan="2">Javascript</td>
<td>Python</td>
<td>CSS</td>
</tr>
<tr>
<td>Go</td>
<td>Big Data</td>
<td>Diseño UX</td>
</tr>

Lunes Martes Miercoles Jueves Viernes

PHP Python CSS

HTML Javascript
Go Big Data Diseño UX

Recreo

Java SQL Algoritmos Angular PWA

6 créditos 3 créditos 4 créditos 2 créditos 7 créditos

Título de la tabla con <caption>

Existe un elemento específico para darle el nombre a las tablas, es <caption> y obviamente va
dentro de la tabla, porque es un elemento de las tablas.

<table border="1">
<caption>Horario</caption>
<thead>

Estilos con CSS

Me gustaría meterle un poquitín de css ¿como se hace? ponemos en <head>

<link rel="stylesheet" href="styles.css">

CSS para empezar es fácil, a un nivel avanzado sí se pone complejo.

Vamos a crear aquí una nueva hoja de estilos llamada style.css y lo único que vamos a hacer es:

47
 Llamar al elemento <table> y decirle border-collapse: collapse; eso que hace que las celdas que
están separadas (como con doble linea) junta la doble linea en una sola.

a los <td> vamos a darle border : 1px solid #ccc; que es un gris suave (obviamente es
recomendable quitar el atributo border=”1” del html)

En la cabecera <th> vamos a decirle background: #444; color: #fff; que es blanco para el texto.

Hacemos que todos los <td> y los <th> van a tener un text_align: center; y padding: 0.5em;

table {border-collapse: collapse; }

td {border : 1px solid #ccc;}
th{background: #444;
color: #fff; }
td, th{text-align: center;}

Tenemos una tabla completamente semántica, está bien marcada y además con estilos.

Dar diseño a filas

Yo puedo darle color a una celda o a una fila.

<tfoot>
<tr style="background: yellow">

No es una buena idea poner el estilo en la etiqueta html, pero solamente por rapidez, con fines
didácticos. Actualizo y la fila del <tfoot> se pone amarillo.

Dar diseño a columnas. <colgroup> y <col>

Es muy fácil cuando son filas, porque hay un elemento <tr> que abarca todo, pero cuando fueran
columnas, ya no es nada sencillo. ¿como lo haces? ¿una por una? Porque cada celda <td> ,está en
un <tr> .Tendrías que ir manualmente o podrías con javascript recorrer la tabla y buscar la última
celda de cada fila etc. Sin embargo, html te permite ir a una columna específica de la siguiente
manera (este es un dato muy desconocido):

<table border="1">
<caption>Horario</caption>
<colgroup>
<col>
<col>
<col>
<col>
<col style="background: yellow">
</colgroup>

48
En el inicio de la <table>,(puede ser en cualquier lugar pero se acostumbra al inicio, por orden)
vamos a crear un elemento <colgroup> y creamos tantos elementos <col> como columnas haya.
Entonces cada uno de estos <col> representa una de las columnas de nuestra tabla. Si yo le pongo a
ésta lo de hace un rato, lo pondrá amaríllo.

No hay ningún problema, si tú quieres colorear alguna columna específica usa el elemento
<colgroup> y un <col> por cada columna.

Ahora mira, otro tip. Si tú vas a colorear solamente la última, entonces no hay necesidad de que
pongas cuatro <col>'s antes de la que te interesa. Basta que pongas una pero con el atributo
span=”4” . <col span="4"> (Es como el colspan de antes pero se quita el col, por llamarse la
etiqueta igual)

<table border="1">
<caption>Horario</caption>
<colgroup>
<col span="4">
<col style="background: yellow">
</colgroup>

8. FORMULARIOS

8.1 Formularios HTML

Los formularios permiten enviar datos, recibir datos del usuario. Hasta ahora nosotros hemos visto
en html, cómo marcar datos, marcar contenido, estructurar contenido, pero los formularios van más
allá, porque permiten que el usuario envíe data. Hay interacción, es decir, el usuario puede escribir
su nombre, su contraseña. Cuando inicias sesión en facebook, o en tu correo electrónico, hay un
formulario. Y esos datos los recibe un servidor y los procesa un servidor, ya no es html, es un
lenguaje en el back-end, puede ser php, Javascript etc. Pero los recibe un lenguaje en el servidor y
los valida, porque si tú no válidas un formulario puedes ser víctima de los bots, que son programas
que bombardean formularios, puede inscribir a 200 mil personas falsas, imagínese el trabajo de
estar buscando quién es real dentro de todos ellos. Por eso es muy importante validar un formulario,
eso lo hace el back-end.Eso no lo puede hacer html. Html solamente da la estructura del formulario.
Html te da algunas herramientas de validación, pero son muy básicas y muy fáciles de de burlar,
pero igual te ayuda.

49
Elementos html: <form>, <input>, <label>, <button>
Todo esto comienza con la etiqueta <form> que tiene un atributo llamado action. Este indica que
archivo va a procesar este formulario, a cual archivo se envía el formulario, por ejemplo form.php.

<form action="form.php">

Eso le compete al back-end, si tú estás haciendo front-end, el back-end te dirá a dónde debes
apuntar el formulario. También hay otro atributo llamado method, que indica cómo se van a enviar
los datos, por post, por get... pero eso es otra historia que se escapa de html. Yo solamente quiero
enseñarles cómo estructurar los formularios.

Los formularios tienen campos, que son cada elemento donde tú recibes datos. El campo más básico
es el <input>, incluso lo puedes escribir sin atributos. El <input> es la casilla donde el usuario
escribe datos.

El atributo type es el que determina qué tipo de input es. Hay muchísimos tipos de input:
contraseña; correo electrónico; edad o muchos tipos de valores. Y ahí es donde viene el detalle de
validar. No hay que validar sólo por seguridad, también para no tener un dolor de cabeza con los
datos. Si tú quieres un DNI, tienes que validar que sean números.

El tipo de input más común es el de tipo texto. Se escribe así: <input type="text"> . Como el
input de tipo text es el más común, puedes omitir ese type=”text”.

Con eso ya tienes el formulario más sencillo. Y puedes poner un botón que diga 'enviar', y ya tienes
un formulario:

<h1>Formularios</h1>
<form>
<input>
<button>Enviar</button>
</form>

El elemento <label> le da el título a un campo.

<form>
<label for="nombre">Usuario</label>
<input id="nombre">
<button>Enviar</button>
</form>

50
Miren que hay un atributo for , es el que conecta el <label> con el atributo id del <input> al cual
corresponde. Si en el navegador, yo hago clic en el input se pone de un color azul el borde.
Igualmente, si hago clic en el texto del label (al lado de la casilla) también se pone azul el input, y
eso me demuestra que están conectados.

Otro detalle. Hay otra forma más cómoda. Tú podrías omitir los atributos for e id. Simplemente
pones el <input> dentro de <label> :

<label>Usuario
<input>
</label>

Otro detalle muy importante con los formularios es que todos los campos deben tener un atributo
name. El atributo name, es el identificador único de este campo.

Esos datos van a un back-end y se van a almacenar en una base de datos. El back-end necesita saber
de todos los datos que recibe, cual es el usuario, cuál es la contraseña, cuál es la edad, cual es el
correo electrónico etc. Eso se lo decimos con el atributo name :

<label>Usuario
<input name="username">
</label>
<label>Contraseña
<input type="password" name="password">
</label>

Tengan en cuenta que los inputs son en línea, por eso se ve todo seguido. La mejor solución a esto
es usar un <div>, que solamente es un contenedor para darle estructura visual, para maquetar. La
otra opción sería usar un <br> que es un salto de línea, pero es la opción menos elegante.

<form>
<div>
<label>Usuario
<input name="username">
</label>
</div>
<div>
<label>Contraseña
<input type="password" name="password">
</label>
</div>
<button>Enviar</button>
</form>

51
El elemento <button> se usa para enviar un formulario, sin embargo es más normal usar un input
tipo submit, que es para enviar: <input type=”submit”>. Automáticamente toma el texto 'enviar'
pero tú podrías ponerle otro, con el atributo value , por ejemplo “iniciar sesión”.

<!-- <button>Enviar</button> -->

<input type="submit" value="Iniciar sesión">

Los value son los valores de los formularios, el dato.

<input name="username" value="Álvaro">

Entonces el atributo value es el dato, normalmente está vacío porque nosotros esperamos que el
usuario lo llene con algo, pero en algunos casos podríamos darle un valor predeterminado. El
atributo value guarda el valor de cada campo.

Ejemplo de Javascript con el atributo value

El atributo value se utiliza mucho cuando interactuamos con los formularios por Javascript, porque
a través del atributo value leemos en tiempo real lo que está escribiendo el usuario.

Por ejemplo podemos hacer lo siguiente:

En input name=”username” vamos a ponerle un Id=”username”

<input id="username" name="username" value="Álvaro">

Vamos a crear un elemento <script> con un sencillo script

<script>
document.getElementById('username1') .addEventListener('Keyup', e => {
console.log(e.target.value) })
</script>

Es fácil de leer, estoy seleccionando un elemento que tenga el id='username' dentro del documento.
Ahora vamos a escuchar un evento, el evento va a ser Keyup , un evento es cualquier interacción
del usuario, un clic, un scroll, teclas que pulse, un Keyup es cada vez que el usuario suelta una
tecla, obviamente previamente la pulsó; e.target es el elemento en el cual se ejecuta ese evento; y
value es el valor del input.

Vamos a ver si lo he hecho bien. Ponemos la consola del navegador, y al escribir en el campo de
id=”username”, la consola lo muestra. (nota: no me sale este resultado, supongo que no estará bien
transcrito mi código)

52
8.2 Tipos de input
Hemos visto hemos visto el input de tipo text; el tipo password; el tipo submit, para enviar el
formulario.

Pero hay más: El input tipo email

<div>
<label>E-mail
<input type="email">
</label>
</div>

Actualizo y ingreso el correo y envío con enter, que es igual enviar cuando está dentro del
formulario (salvo que el programador de la página web haya desactivado con javascript). Pero ¿qué
pasa si ingreso algo que no es correo? Dice que falta el signo @ . Es decir, con solamente ponerle el
tipo email, ya el navegador me está validando el campo.

Ahora, yo podría hacer esto entrar a los elementos (con f12 en el navegador) y allí cambiar el tipo a
texto y ya lo puedo enviar aunque no sea email. Moraleja, las validaciones con html son solamente
ayudas, son muy fáciles de burlar. Pero no es que no sean útiles son muy útiles, porque esos
mensajes (como eso de que no tiene @) nos evitamos tener que programarlos con Javascript. El
navegador lo hace por mí. Igual el back-end tiene que validarlo. No se confíen del todo pero igual
usen estas validaciones.

Si quieres una fecha, también hay el <input type=”date”> y nos pide: día, mes, año. Incluso va a
salir un calendario.

Otro tipo: <input type=”number”> que tienen un widge para subir o bajar el numero.

Atributo placeholder
Los inputs que tienen un campo para escribir, como estos con la casilla, (no todos lo tienen, algunos
son solo para hacer clic), tienen un atributo llamado placeholder. Entonces se podría omitir el
<label> , y ponerle placeholder=”Su nombre”.

<input name="username" placeholder="Su nombre">

Actualizo y miren: 'Su nombre' dentro de la casilla. Y cuando yo escribo, el placeholder desaparece.
Eso lo podíamos hacer antes pero solamente con Javascript.

8.3 Otros elementos de formularios. Campos de selección y atributos

<fieldset> y <legend>
cuando tú tienes muchos datos muchos campos el formulario se puede hacer demasiado extenso y
aburrido. Aquí entra el concepto llamado usabilidad o experiencia de usuario. Cuando diseñamos
una web debemos tenerlo en cuenta.

53
Para eso está el elemento llamado <fieldset>, que nos permite agrupar campos, meter varios
campos en una especie de contenedor. Voy a poner el nombre y el email dentro del <fieldset>

<fieldset>
<legend align="right"> Tus datos personales</legend>
<div>
<input name="username" placeholder="Su nombre">
</div>
<div>
<label>E-mail
<input type="email">
</label>
</div>
</fieldset>

Quedó como un contenedor. Eso lo pueden manejar con CSS para que se vea diferente.

Tenemos también un elemento llamado <legend> que va dentro de <fieldset> , con el que le das un
nombre a esta caja, por ejemplo 'tus datos personales'. A la etiqueta <legend> se le puede poner el
atributo align, para indicar el lugar donde debe aparecer la leyenda. Por ejemplo, align=”right”.

Tipos Checkbox y radio

Hay dos tipos de input (en realidad hay más, pero voy a explicar solamente los dos más usuales)
que no son para escribir, sino, para dar clic. Checkbox y radio

<fieldset>
<legend>Tus pasatiempos</legend>
<label> <input type="checkbox">Deporte</label>
<label> <input type="checkbox">Cine</label>
<label> <input type="checkbox">Música</label>
<label> <input type="checkbox">Leer</label>
</fieldset>

Yo puedo escoger uno o varios, esta es la ventaja de un checkbox. Puedo activar uno o todos.

El tipo radio es parecido, pero no te permite activar varios. Todas las opciones que vamos a poner
tienen que tener el atributo name con el mismo valor. Un ejemplo: elegir el sexo de la persona.

54
 <fieldset>
<legend>Tu género</legend>
<label><input type="radio" name="gender">Hombre</label>
<label><input type="radio" name="gender">Mujer</label>
<label><input type="radio" name="gender">Prefiero no
decirlo</label>
</fieldset>

Entonces para opciones únicas, el input radio y para opciones múltiples, el input de tipo checkbox.

Listas de selección con <select>

Algo similar para elegir opciones, lo podemos hacer con el elemento <select>. <select> es una lista
de opciones, entonces cada opción es un elemento <option>

Con el elemento <optgroup> agrupamos elementos, cuando es una lista muy grande de opciones.
Y dentro del <select> podrías ponerle el atributo multiple (Sino se pone es una lista desplegable).
Al ponerle el atributo múltiple, incluso la forma en que se presenta cambió, porque yo puedo
presionando control escoger varias opciones. Es un poco incómodo, si vas a hacer eso creo que es
mejor usar un checkbox, porque hasta para el usuario no le queda claro como usarlo. Pero a veces
hay tantas opciones, que si tú pones un checkbox son muchísimos y es mejor meterlas en <select>
porque es un cuadrito. Y hay formas con Javascript filtrarlos, por su primera letra por ejemplo.

55
 <fieldset>
<legend>Select y lista de opciones</legend>
<label for="country">Escoge tu país</label>
<select name="country" id="country" multiple>
<optgroup label="America">
<option value="pe">Perú</option>
<option value="co">Colombia</option>
<option value="ve">Venezuela</option>
</optgroup>
<optgroup label="Europa">
<option value="es">España</option>
<option value="it">Italia</option>
</optgroup>
</select>
</fieldset>

Elemento <textarea>
El elemento <textarea> , es para escribir mensajes largos, por eso automáticamente me pone
columnas y filas (y el name, que ya lo saben). También podemos añadir un placeholder.

<fieldset>
<legend>Elemento textarea</legend>
<label>Carta de presentación
<textarea name="textogrande" id="" cols="30" rows="5"
placeholder="Escribe tu carta"></textarea>
</label>
</fieldset>

56
Atributos importantes
El atributo required. Hay casos en que tú quieres que un campo sea obligatorio, es decir, que el
usuario no puede enviar el formulario sin ese campo. Vamos a decir que no puede ingresar si no
pone la contraseña (es muy obvio, pero las cosas hay que ponerlas) .

<div>
<label>Contraseña
<input type="password" name="password" required>
</label>
</div>

Obviamente, todos los que no digan required significa que son opcionales y el usuario puede
saltarselos. Actualizo, intentó enviar y me pide que complete ese campo. Ok, lo completo y ya
puedo enviarlo.

El atributo readonly , significa que el campo es solamente de lectura, y tú no puedes cambiarlo, por
ejemplo:

<label>Cantidad que va a comprar

<input type="number" value="2" readonly>
</label>

9. MULTIMEDIA

9.1 Videos en HTML

Antes de html5 los elementos multimedia, es decir, audio y vídeo solamente podían reproducirse
utilizando flash. Flash hacía cosas dentro de un entorno cerrado, es decir, tú usabas un programa
para hacer reproductores, para hacer animaciones y ese programa te exportaba un paquetito, un
archivo y lo metías en la página, o sea, no era el navegador el que lo ejecutaba, era el paquetito que
tú metías. Pero a partir de html5 el navegador tiene capacidades multimedia solito, sin necesidad de
más. Puedes reproducir audio y vídeo directamente desde el navegador. Así que veamos:

Es tan sencillo como poner <vídeo src ..> y se acabó. Con el atributo controls le añades los
controles de reproducción.

<body>
<video src="media/The_Flying_Swans.mp4" controls></video>
</body>

El códec más usado para vídeo es h264. Hace unos años hubo una guerra muy grande entre mozilla
y google chrome, estoy hablando desde el año 2010 más o menos, que fue la guerra de los códecs,
porque h264 era propietario y ellos promocionaban uno que era que iba a ser opensource, pero
lamentablemente h264 siempre era mejor, daba mejor calidad de vídeo en menos espacio, es el
códec estándar de la web. H264 te va a garantizar que se va a reproducir sin ningún problema en

57
cualquier navegador. Tienes otra opción la otra opción si tú quieres que se reproduzca siempre sin
problemas, es subirlo a youtube o a vimeo porque ellos tienen sus propios algoritmos de
codificación, lo subes a youtube, lo dejas que youtube lo procese luego lo descargas. Usas youtube
como un compresor de vídeo, funciona, porque ellos ya saben. A veces con los videos hay
problemas con la codificación y el video no puede por ejemplo usar la barra de desplazamiento.

Otra cosa. Cuando yo le quite el controls (eso es un problema común cuando uno comienza con
vídeo en html) ustedes van a ver solamente la el frame inicial. Es frecuente que el primer frame sea
negro porque hay un efecto fade in. Parece un error, pero si le pones controls ya le puedes dar a
play y ya no está negro.

Y también hay un atributo llamado autoplay creo que es obvio lo que significa.

(Ahora google tiene una política de no permitir el autoplay para evitar el abuso de publicidad. Hay
que desactivar su política desde el enlace interno chrome://flags/#autoplay-policy o mutear el video
con el atributo muted=”muted”)

<video autoplay muted="muted">

<source src="media/The_Flying_Swans.mp4" type="video/mp4">
</video>

Puedes ponerle un poster, es decir, una imagen en lugar del primer frame.

<video controls autoplay poster="img/perritos.jpeg">

Botones de reproducción con Javascript

Con javascript tú podrías crear un reproductor de vídeo a medida.

Vamos a f12 de Chrome; En elementos, seleccionamos el video en el viewport. (Ahora este

elemento seleccionado en la consola y lo identificamos con 0); En la consola ponemos: $0.play(), y
elvideo se reproduce; Ponemos $0.pause(). Vemos que podemos manejar el video con Javascript.

Entonces yo podría quitarle el controls y poner un botón play y otro pausa. Añadimos un pequeño
<script> muy pequeño. Meto el vídeo en la constante vídeo. Y lo mismo para el play y para pausa.
Ahora estoy escuchando cuando el usuario haga clic y entonces el vídeo se va a reproducir. es fácil
vídeo punto play. Y la misma historia para el botón pause.

58
 <script>
const video=document.getElementById('video');
const play=document.getElementById('play');
const pause=document.getElementById('pause');

play.addEventListener('click' , () =>{
video.play() })
pause.addEventListener('click' , () =>{
video.pause() })
</script>

Si los botones aparecen pequeños podemos hacer un poquitín de CSS en <head>, para reducir el
tamaño del video.

<style>
video{
width:500px;
}
</style>

Para cerrar con esto del vídeo, si tú quieres chismosear las propiedades: Vas a Elements y
seleccionas el video;Vas a console y pones console.dir($0); Y la misma consola te va a mostrar
todas las propiedades que hay y todos los métodos.

9.2 Audio en HTML

Para el audio es muy similar:

<audio src="media/aud.mp3" controls></audio>

Si no se pone el atributo controls no se ve nada ni le podemos dar a reproducir. De la misma

manera que con vídeo tiene el atributo autoplay (que ahora está desactivado por defecto).

Ahí tenemos vídeo y audio nativo, no necesitas más. Si tú quieres más funciones, tienes
reproductores ya hechos, por ejemplo vídeojs es un es un framework para crear reproductores con
javascript. Otro que es excelente flowplayer. A veces necesitas más funciones, por ejemplo:
velocidad de reproducción, que reproduzca un x2, x3; avanzar 10 segundos, retroceder 10 segundos;
enviar al ChromeCast

59
10. INTERACTIVIDAD Y CONTENIDO EMBEBIDO

10.1 Contenido interactivo en HTML5.2

Con interactividad me refiero a elementos que reaccionen de alguna manera con lo que el usuario
hace. Habíamos visto algo básico de interactividad con algunos elementos de formulario, o sea,
respondían de alguna manera muy básica a lo que nosotros hacíamos, pero técnicamente no era
interactividad porque solamente insertan datos, que luego son enviados a un servidor.

Hay dos elementos de interactividad en la última especificación 5.2 de HTML que son los
siguientes:

El elemento <details>
Crea un acordeón, sin necesidad de Javascript. Un acordeón es un widget que se expande o se
cierra. Por ejemplo un título que al hacer click en el título se expande y muestra descripción;
vuelves a hacer clic en el título y la descripción se contrae. Ya tenemos ese tipo de widgets en html
purito sin tener que programar nada.

Para ponerle un título tengo elementos <summary> , resumen (si no lo ponemos, automáticamente
el navegador está poniendo el texto detalles). Ponemos un párrafo dentro que será la descripción
que se desplegará al hacer click en la flecha. Es prácticamente un contenedor no estás limitado un
párrafo, puedes poner los elementos que tú quieras imágenes etc.

<details>
<summary>HTML</summary>
<p>Lenguaje de marcado de hipertexto</p>
</details>

El elemento <dialog>
Es una ventana modal, sin necesidad de Javascript. Se diferencia de un pop-up en que este es una
instancia del navegador, una nueva ventana del navegador, como hacer control n; Pero una ventana
modal es una ventana dentro de la misma página, pertenece a la página de donde sale, es del mismo
documento pero está oculto y con algún botón con alguna acción, tú lo muestras o lo ocultas.

<dialog open>
<h2>Curso HTML5 Desde Cero</h2>
<p>Precio: S/ 134.00</p>
<p>Profesor: Álvaro Felipe</p>
</dialog>

Sin el atributo open en el navegador no se ve, ese es el chiste. Si yo le pongo el atributo open ya sí
se ve.

60
Voy a llevarme este <dialog> al inicio, justamente después de <body>

Está encima de todo. Lo cubrió, es un modal. Un modal que simplemente se abre con el atributo
open. Si quito el atributo y actualizo, esto nunca existió.

Vamos a programar con una línea de javascript este modal.

Vamos a necesitar algún botón que muestre el modal (podría ser cualquier elemento, h1, cualquiera
da lo mismo), y le damos con id, que es como se seleccionan los elementos. Tambien necesitamos
detectar el elemento <dialog>, así que también le damos un id.

Y vamos hacer un pequeño script al final del </body> .

Detectamos el modal, detectó el elemento por su id y el botón. y ahora cuando presione el botón
ponemos el atributo open a true. Ahora para cerrarlo es la misma historia solamente tú tienes que
definir qué botón lo cerrará.Vamos a poner dentro de este <dialog> un botón cerrar id= “close” . Y
para cerrar este modal en vez de setAtribute, removeAtribute. Aquí le estoy asignando un atributo
y aquí se lo estoy quitando.

61
 <body>
<dialog id="modal">
<h2>Curso HTML5 Desde Cero</h2>
<p>Precio: S/ 134.00</p>
<p>Profesor: Álvaro Felipe</p>
<button id="close">Cerrar</button>
</dialog>
<button id="boton">Abrir modal</button>
<h1>Contenido interactivo</h1>
<details>
<summary>HTML</summary>
<p>Lenguaje de marcado de hipertexto</p>
</details>
<script>
const dialogo=document.getElementById('modal');
const boton1=document.getElementById('boton');
const boton2=document.getElementById('close');
boton1.addEventListener('click',()=>{
dialogo.setAttribute('open','true')
})
boton2.addEventListener('click',()=>{
dialogo.removeAttribute('open')
})
</script>
</body>

10.2 Contenido embebido en HTML

El contenido embebido es cuando tú te traes contenido de otro lugar y lo metes en tu página web. El
ejemplo más clásico, pues meter un vídeo de youtube. Estos tiene una opción de insertar, vamos a
compartir / insertar (embed), y te da este código:

<iframe width="560" height="315"

src="https://www.youtube.com/embed/NdDGMCss6LY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Tú puedes personalizarlo pero vamos primero a lo básico que es el código. Pegamos el código que
me dio youtube en nuestra página. Actualizo y ahí está. Solamente hemos copiado y pegado, pero
vamos a examinar qué cosa hemos pegado, que hay en ese código que hemos pegado. Hay un
elemento <iframe> . Este te permite traerte toda una página web con toda su estructura de
documento. ¿Como? Simplemente <iframe> , el width y el height ; src con la url de página que
nos estamos trayendo; y aquí ya son algunas algunos otros atributos. Pero lo importante es
simplemente el <iframe> y el src

62
 <iframe src="http://catrilandia.ga" frameborder="0"></iframe>

Algunas páginas no se permiten mostrar en un iframe porque no son del mismo origen, en pocas
palabras, por seguridad, o sea si estuvieras dentro del mismo dominio, sí me permitiría. Obviamente
Youtube, permite insertar en otras páginas.

Pero fíjense, independientemente de que lo imprima o no, si vamos con f12 a inspeccionar
elements, vemos que el html de la página que hemos puesto en <iframe> trae toda la estructura del
documento, trae la página completa, con todos sus scripts, sus estilos, está todo, absolutamente
todo, no es que se trabajó un pedacito, un <iframe> se trae completamente una página web. Y eso
es uno de los de las aplicaciones más usadas para traernos contenido externo.

Otro caso que es muy usado google maps, los mapas insertados en una página web eso se hace con
un <iframe>. En google maps compartir / insertar, y copiamos y pegamos. Muchos servicios tienen
la posibilidad de insertar contenido de esa manera. Otro muy conocido, instagram. Lo mismo
puedes hacer con vídeos o artículos de facebook, de twitter y de muchos servicios en internet.

Iincluso hay cosas que necesitarían programar y tú sin programar las puedes poner en tu página,
ejemplo un formulario de contacto. Con lo que ustedes aprenden en este curso pueden crear una
página web, pero una página web en la que el usuario solamente mira, si quieres un formulario de
contacto donde la gente te pueda escribir tienes que programarlo y necesitas un back-end para que
reciba los datos y los envíe a un correo, pués hay servicios en internet que te dan todo eso, por
ejemplo, Wufoo, que te permite meter formularios como <iframe> entonces tu con Wufoo creas tu
formulario, le dices nombre, correo, mensaje, y ya Wufoo se encarga de mandar los correos
notificando cuando alguien te escribió, y de mandarle un correo de la persona que escribió y gratis,
obviamente tiene planes gratis y si tú quieres más correos al mes ya pagas.

Otro, Disqus es un servicio para tener comentarios en tu página web.

Hoy por hoy hay un resurgimiento de las páginas estáticas, hay mucha gente que siente que el
desarrollo web se ha vuelto muy complejo, que para hacer un 'hola mundo' ahora tienes que
instalarte como 20 librerías. Pero hay proyectos que no necesitan tanta complejidad y les basta una
página estática html, css y Javascript y se acabó no necesitas más, y de verdad venden. Si quiero
comentarios le meto Disqus y ya está. Claro hay hay sitios que requieren una programación
compleja, por ejemplo la app de Ed.team, que requiere mucha programación, porque hay usuarios,
hay permisos, hay gente que compra, etc. Pero si lo tuyo solamente es mostrar información, una
página estática te basta y a través de <iframe> puedes meter formularios, comentarios de facebook,
mapas, comentarios de Disqus, y vuelves a una página estática, realmente interactiva prácticamente
sin programar nada.

11. CIERRE DEL CURSO

11.1 ¿Cómo mantenerse actualizado.

En la tecnología mantenerse actualizado es un reto. ¿cómo estar actualizado en html cuando cambia
mucho? Te voy a dar alguna una serie de tips, algunas páginas que tú deberías revisar o suscribirte,
para que siempre estés al tanto de lo que está pasando.

63
La W3C
Es el world wide web consortium. sn la organización que se encarga de hacer los estándares web
html, css (de javascript no se encarga de una organización llamada ECMA ), de la Api web,
de todo lo que hemos visto, local storage, geolocalización, el DOM etc. de muchas otras Apis, de
SVG, de accesibilidad, de muchas cosas. Así que uno de los lugares donde hay que mirar es la
W3C. Sin embargo leer sus especificaciones es una experiencia muy fea. Es muy denso, muy
complejo de entender. Pero es importante que lo sepas, ahí está la documentación.

Y vamos a ver: acá dice standars, los estándar son las especificaciones que hacer la W3C. A la
derecha Current estatus, el estado actual de cada lenguaje, vamos a html, miren este es el estado
actual de html el html5.2. No es tan difícil estar actualizado si sabes dónde buscar.

En la esquina inferior izquierda vas a encontrar dos botones, uno Pop out sidebar que te muestra
este índice que es enorme. Pero vámonos por hasta el final. Están los cambios en esta nueva
especificación. Te vas hasta el final y no pagas un curso. Lo importante es que tú sepas dónde
encontrar esos cambios. El elemento diálogo es una nueva característica, pero lo más importante de
las nuevas características de html 5.2 no está en los elementos, está en la Api de pagos, poder
recibir pagos directamente por html, a través de la api de pagos; y también una Api para el
contenido seguro, para encriptar contenidos, para que no se los roben y lo vendan. Ya se está
trabajando en contenidos encriptados para proteger contenido con derecho de autor.

También acá dice features removed, o sea, qué cosas en esta versión ya hemos sacado.

La WHATWG
Web Hypertext application technology working group. Ellos crearon html5, porque la W3C quería
matar a html. Hay una bronca grande entre la W3C y la WHATWG. La WHATWG incluso acusa a
la W3C de copiarle descaradamente su especificación. A este punto alguno dirá ¿hay dos
especificaciones? Sí, es la cosas más locas del mundo pero hay dos especificaciones la de la W3C y
la de la WHATWG. ¿A cual le hacemos caso? En teoría deberíamos hacerle caso a la WHATWG,
porque son los que han demostrado un trabajo más estandarizado, es más su documentación es más
fácil de leer, y eso te dice mucho. La gente de Mozilla dice que las dos especificaciónes son muy
parecidas, pero cuando hay una diferencia prefieren hacerle caso a la WHATWG. Otra diferencia
para la WHATWG no existen números no existen números de versión, para ellos es html living
estándar, es decir, un estándar vivo. Son muchas diferencias de pensamiento entre ambos. Sus
actualizacones son más frecuentes. Es mucho más fácil de leer mucho más entendible. También
acusan a la W3C de copiarlos.

Caniuse.com
Es una página que te permite saber el soporte de los navegadores para ciertas tecnologías y saber si
hay algún problema. Cuando tú buscas algo en canisue, te muestra la especificación arriaba, en un
link al lado del título que pone LS. Y siempre te lleva a la WHATWG. Abajo también te dice
algunas notas, algo que vale la pena destacar. También los problemas conocidos, es decir los bugs,

64
con los casos de funcionamiento anormal. Recursos , acá vas a tener articulos muy chéveres que tú
puedes leer si quieres profundizar sobre un tema.

Si tú quieres saber de algo de web, uno de los mejores lugares es canisue, porque no solamente es
para ver el soporte los navegadores, también es para ver especificación, también es para ver
artículos importantes, también es para ver si hay bugs, notas etc. También se actualiza cada día con
las últimas noticias, se puede volver una especie de lectura diaria. También tiene un Index of
features muy completo

MDM
Mozila development network, es la fundación, que está detrás de mozilla firefox, pero más allá del
navegador ha hecho un trabajo enorme con la documentación. ¿Pero porque tengo que ir a la
documentación de mozilla, estando las otras? Ellos se esfuerzan por hacer una documentación más
ordenada, más legible, no tan desordenada como la de la W3C. Microsoft y Google han decidido
apoyar a la mdm, porque normalmente Microsoft tenía también su mdm era Microsoft development
networkn, y también google tiene sus artículos de google development, es como similar, pero han
decidido apoyarlo y hacer que sea un único lugar principal para el conocimiento web.

Como ven mdm es el mejor lugar para estar actualizado con web, caniuse también, la WHATWG es
la especificación, que siempre son un poco más densas, son más técnicas, la documentación de la
mdm también es técnica, pero es un poquito más suave de digerir. Si tú te quieres poner técnico e ir
más a profundidad te vas a la WHATWG, y si quieres volverte loco y sacarte la cabeza contra la
pared, te vas a la W3C, pero lamentablemente también toca porque si ellos sacan una especificación
también es importante.

Entonces a partir de ahora ustedes ya no dependen de un curso, ya tienen las herramientas para ser
autosuficientes.

65