organize the information of the video-articles

This commit is contained in:
Jesús
2019-04-12 11:59:11 -05:00
parent c864a650de
commit 4f9419993e
22 changed files with 142 additions and 55 deletions

View File

@@ -16,6 +16,8 @@ Title: Codificación HTML5
# Codificación HTML5 4/32
La etiqueta `<span>` se utiliza para agrupar elementos en línea en un documento.
<details markdown="span">
<summary>Mostrar Más</summary>
Código de ayuda:
@@ -23,7 +25,9 @@ Código de ayuda:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
~~~~
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
</details>
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,15 @@ Title: Etiqueta a
# Etiqueta a 9/32
Si el elemento `a` tiene un atributo href, entonces representa un hipervínculo (un ancla de hipertexto).
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<a>` en la [w3schools][w3school]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3school]: https://www.w3schools.com/tags/tag_a.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,16 @@ Title: Etiqueta article
# Etiqueta article 13/32
Representa una sección de una página que consta de una composición que
forma parte independiente de un documento, página o sitio.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<article>` en la [w3schools][w3-article]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-article]: https://www.w3schools.com/tags/tag_article.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,16 @@ Title: Etiqueta aside
# Etiqueta aside 14/32
Representa una sección de una página que consiste en una información que está relacionado tangencialmente
con la información de alrededor del elemento aparte, y que podría considerarse separado de la información principal.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<aside>` en la [w3schools][w3-aside]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-aside]: https://www.w3schools.com/tags/tag_aside.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,13 +15,18 @@ Title: Etiqueta nav ul ol li
# Etiqueta nav ul ol li 8/32
- El elemento de navegación «nav» es una sección que contiene enlaces a otros documentos o partes del documento actual.
- El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante.
- El elemento ol representa una lista de artículos, donde los artículos han sido ordenados intencionalmente.
- El elemento li representa un elemento de lista.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<nav>` en la [w3schools][w3-nav]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<ul>` en la [w3schools][w3-ul]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<ol>` en la [w3schools][w3-ol]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<li>` en la [w3schools][w3-li]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-nav]: https://www.w3schools.com/tags/tag_nav.asp
@@ -29,3 +34,5 @@ Title: Etiqueta nav ul ol li
[w3-ol]: https://www.w3schools.com/tags/tag_ol.asp
[w3-li]: https://www.w3schools.com/tags/tag_li.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,16 @@ Title: Etiqueta section
# Etiqueta section 12/32
Representa un documento genérico o sección de aplicación. En este contexto, una sección es una agrupación
temática de la información, normalmente con un encabezado, posiblemente con un pie de página.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<section>` en la [w3schools][w3-section]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-section]: https://www.w3schools.com/tags/tag_section.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,13 +15,19 @@ Title: etiquetas p y span
# Etiquetas p y span 10/32
El elemento `p` representa un párrafo y el elemento `span` no significa nada por sí solo,
pero puede ser útil cuando se usa junto con los atributos globales,
por ejemplo: class, lang o dir.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<p>` en la [w3schools][w3-p]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<span>` en la [w3schools][w3-span]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-p]: https://www.w3schools.com/tags/tag_p.asp
[w3-span]: https://www.w3schools.com/tags/tag_span.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,13 +15,18 @@ Title: Etiquetas strong y em
# Etiquetas strong y em 11/32
La etiqueta `strong` brinda una gran importancia a un parráfo, una palabra o una frase y
`em` representa el énfasis del estrés de sus contenidos.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<strong>` en la [w3schools][w3-strong]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<em>` en la [w3schools][w3-em]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-strong]: https://www.w3schools.com/tags/tag_strong.asp
[w3-em]: https://www.w3schools.com/tags/tag_em.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -16,11 +16,15 @@ Title: Header
# Header HTML5 5/32
Header representa el "encabezado" de un documento o sección de un documento.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más información sobre la etiqueta `<header>` en [w3schools][header]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[header]: https://www.w3schools.com/tags/tag_header.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@@ -15,13 +15,23 @@ Title: hgroup
# Hgroup HTML5 7/32
Hgroup fue una etiqueta que apareció en HTML5, su función es agrupar las
etiquetas de títulos las `h`. Pero desde las versión 5.1 de HTML ya no se
recomienda debido a que tener demasiadas `h` de un mismo tipo traen problemas
de SEO.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Etiqueta hgroup en desuso.</p>
<p class="mb-0">Este elemento fue removido de la especificacion HTML5 (W3C), por favor no usar más.</p>
<p class="mb-0">Referencia: [https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup][mozilla-web]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Este elemento fue removido de la especificacion HTML5 por la W3C, por favor no usar más.</p>
<p class="mb-0">Referencia en [mozilla developers][mozilla-web]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[mozilla-web]: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup
[validator]: https://validator.w3.org/
*[HTML]: Hyper Text Markup Language
*[HTML5]: Hyper Text Markup Language version 5
*[SEO]: Search Engine Optimization
*[W3C]: World Wide Web Consortium

View File

@@ -16,12 +16,15 @@ Title: Introducción a HTML5
# Introducción a HTML5 1/32
HTML tiene una nueva versión desde hace unos años, hablamos de la versión 5 del mismo.
Trayendo consigo nuevas etiquetas, las llamadas etiquetas semánticas.
<details markdown="span">
<summary>Mostrar Más</summary>
<ul class="ml-3">
<li>[Respositorio oficial][html]{:target="_blank" rel="noopener noreferrer"} de HTML</li>
<li>[w3schools][w3c]{:target="_blank" rel="noopener noreferrer"}</li>
<li>[Documentación de la W3C][w3c.org]{:target="_blank" rel="noopener noreferrer"}</li>
<li>[Documentación][w3c.org]{:target="_blank" rel="noopener noreferrer"} de la W3C</li>
<li>[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</li>
</ul>
</details>
@@ -30,3 +33,6 @@ Title: Introducción a HTML5
[w3c]: https://www.w3schools.com/html/default.asp
[w3c.org]: https://www.w3.org/TR/html/
[validator]: https://validator.w3.org/
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,19 @@ Title: Nuevas etiquetas de HTML5
# Nuevas etiquetas de HTML5 2/32
Las nuevas etiquetas de HTML5 ahora son semánticas, es decir que dan
sentido a la información escrita en una página web.
Podéis revisar en los enlaces de abajo o consultar en
[mozilla developers][mozilla-html5]{:target="_blank" rel="noopener noreferrer"}.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más información sobre HTML5 en [w3schools][w3c-html5]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Un [Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3c-html5]: https://www.w3schools.com/html/html5_intro.asp
[mozilla-html5]: https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
[validator]: https://validator.w3.org/
*[HTML5]: Hyper Text Markup Language version 5
*[W3C]: World Wide Web Consortium

View File

@@ -16,9 +16,14 @@ Title: Sintaxis HTML5
# Sintaxis HTML5 3/32
En HTML5 se maneja una sintaxis simple sin tantos dolores de cabeza.
También coloco un enlace al [validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
para testear el código :).
A continuación se muestra la sintaxis básica.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
Estructura básica:
~~~~{.html}
<!doctype html>
<html lang="en">
@@ -33,3 +38,5 @@ Title: Sintaxis HTML5
</details>
[validator]: https://validator.w3.org/
*[HTML5]: Hyper Text Markup Language version 5
*[W3C]: World Wide Web Consortium

View File

@@ -15,11 +15,16 @@ Title: Títulos en HTML5
# Títulos en HTML5 6/32
En el vídeo se explica de la importancia de las etiquetas
de título o también llamadas encabezados por su nombre en inglés
**heading**
<details markdown="span">
<summary>Mostrar más</summary>
<p class="mb-0">Más información sobre las etiquetas `h` en [w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Un [Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[titles]: https://www.w3schools.com/hTml/html_headings.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium