Vídeo de Ricardo López Arriaga Bueno Clase 1 Prsentación del material didáctico.@rickylobu en YouTube
Vídeo de Ricardo López Arriaga Bueno Clase 2 Instalación IDE VScode y 1er ejemplo.@rickylobu en YouTube
Vídeo de Ricardo López Arriaga Bueno Clase 3 HTML 5.@rickylobu en YouTube

Primer Ejercicio

Esto es un parrafo


HTML: Lenguaje de etiquetado de hipertexto

Escrito por: Ricardo López Arriaga Bueno

"HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web." MDN Web Docs

Tarea: Parte de tu tarea es leer la investigación de este material didáctico para el desarrollo de aplicaciones Web de donde se saco la siguinete cita, el documento es: Historia y fundamentos de la Web

"Timothy Berners-Lee en 1991, quien trabajaba en el CERN, crea la World Wide Web, que es una forma de relacionar hipertexto. También crea el llamado HTML (Hypertext Markup Language), siendo el lenguaje de etiquetado de marca, la estructura principal de una página web actual. Para la cual creó HTTP (protocolo de transferencia de hipertexto, para transmitir datos entre las páginas web). Además, crea la llamada URL (localizador uniforme de recursos, una forma de indicar la dirección de una página web determinada). URL (Universal Resource Locator), que es la dirección de una página web como la conocemos hoy en día con 'www.' Entendiendo qué es la World Wide Web, básicamente es la forma de localizar cualquier documento en cualquier computadora conectada a la red, incluso buscando por palabras clave." Historia y fundamentos de la Web

Para profundizar en el tema consulta la historia de la Web en W3C. W3C marca los estandares de HTML y CSS, una cita relevante para que visiten la página sería:

"La plataforma continúa expandiéndose, pero los usuarios de la web se han unido hace mucho tiempo en torno a HTML como la piedra angular de la web. Muchas más tecnologías que el W3C y sus socios están creando amplían la web y le dan toda su fuerza, incluyendo CSS, SVG, WOFF, WebRTC, XML y una variedad cada vez mayor de API." W3C Web Standards

Entidades HTML

En HTML, algunos caracteres tienen un significado especial:

  • &lt; y &gt; representan los signos menor que (<) y mayor que (>)
  • &amp; representa el símbolo "Amperson" (&).
  • &quot; representa las comillas dobles (").
  • &apos; representa las comillas simples (').

Estructura de una página Web

╭☞( ͡ ͡° ͜ ʖ ͡͡°)╭☞ Quieres un buen consejo?

Se recomienda inspeccionar esta página con F12

<summary> se utiliza para crear un elemento desplegable que permite ocultar o mostrar contenido adicional.

Este es un bloque de código con <code> y <pre>


        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Título de la web</title>
            </head> 
            <body>
                <p>Esta es la estructura de una página Web</p>
            </body> 
        </html>

Cuadros de Dialogo:

Este es un cuadro de diálogo.

╭☞( ͡ ͡° ͜ ʖ ͡͡°)╭☞ Sería una buena idea investigar la etiqueta <template> ;D
y códigos Unicode, por ejemplo con F12 podrás ver el emoticone: ╭☞( ͡° ͜ʖ ͡°)╭☞

Lista de definiciones:
  1. HTML
    HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. MDN Web Docs
  2. CSS
    CSS (Cascading Style Sheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en HTML o XML. MDN Web Docs
  3. JavaScript
    JavaScript es un lenguaje de programación que permite implementar funciones complejas en páginas web. MDN Web Docs
  4. W3C
    El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares abiertos para asegurar el crecimiento a largo plazo de la Web. W3C
  5. CERN
    El CERN es la Organización Europea para la Investigación Nuclear, donde se creó la World Wide Web en 1989 por Tim Berners-Lee creador del HTML. CERN
  6. TypeScript
    TypeScript es un lenguaje de programación desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript que añade tipos estáticos opcionales. TypeScript
  7. Framework
    Un framework es una estructura de soporte en la que un software puede ser organizado y desarrollado. Proporciona una base sobre la cual los desarrolladores pueden construir programas para una plataforma específica. MDN Web Docs
  8. Angular
    Angular es una plataforma de desarrollo para construir aplicaciones web móviles y de escritorio. Es mantenida por Google y una comunidad de desarrolladores. Angular

Tablas:

Lenguajes de Este Curso
Lenguaje Función en la Web Organización de Estándar Estándar Actual Uso
HTML Estructura del contenido web W3C HTML5 Producción
CSS Estilo y diseño del contenido web W3C CSS3 Producción
JavaScript Interactividad y comportamiento del contenido web ECMA International ECMAScript 2024 Producción
TypeScript Superset de JavaScript con tipos estáticos Microsoft TypeScript 4.8 Desarrollo
Angular Framework para aplicaciones web Google Angular 18 Desarrollo

Formularios:

( ͡ ͡° ͜ ʖ ͡͡°) Te recomiendo también!

╭☞De tarea, investigar sobre métodos que se utilizan en los formularios: Métodos de petición HTTP (GET, POST, PUT, DELETE, etc...) en el sitio de MDN Web Docs: Métodos de petición HTTP y sobre los Códigos de estado de HTTP

╭☞Investiga también sobre "Validación de formularios" por ejemplo:
con required: Campo obligatorio.
pattern: Define una expresión regular para validar el formato de un campo.
min y max: Para limitar los valores en campos numéricos o de fecha.

La columna de sintaxis HTML no contiene los &lt;br&gt; = <br> para salto de linea, se recomienda inspeccionar con F12

Sintaxis y Renderizado de formularios
Sintaxis HTML Renderizado
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required placeholder="Introduce tu nombre">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required placeholder="Introduce tu correo">
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" required placeholder="Introduce tu contraseña">
<label for="fecha">Fecha de nacimiento:</label>
<input type="date" id="fecha" name="fecha">
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="mexico">México</option>
<option value="españa">España</option>
<option value="argentina">Argentina</option>
</select>
<label for="hobbies">Hobbies:</label>
<select id="hobbies" name="hobbies" multiple>
<option value="deporte">Deporte</option>
<option value="musica">Música</option>
<option value="lectura">Lectura</option>
</select>
<label for="suscripcion">Suscribirse a nuestro boletín:</label>
<input type="checkbox" id="suscripcion" name="suscripcion" checked>
<label for="color">Selecciona tu color favorito:</label>
<input type="color" id="color" name="color">
<label for="numero">Introduce un número:</label>
<input type="number" id="numero" name="numero" min="0" max="10" step="1" value="5">
<label for="rango">Selecciona un valor:</label>
<input type="range" id="rango" name="rango" min="0" max="100" step="10" value="50">
<label for="telefono">Número de teléfono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="123-45-678">
<label for="archivo">Selecciona un archivo:</label>
<input type="file" id="archivo" name="archivo">
<label for="url">Introduce una URL:</label>
<input type="url" id="url" name="url" placeholder="https://example.com">
<label for="buscar">Buscar:</label>
<input type="search" id="buscar" name="buscar" placeholder="Buscar...">
<label for="progreso">Progreso de carga:</label>
<progress id="progreso" value="70" max="100">70%</progress>
70%
<label for="nivel">Nivel de batería:</label>
<meter id="nivel" value="0.6" min="0" max="1">60%</meter>
60%

<input type="submit">: Úsalo cuando necesites un botón simple para enviar el formulario.

<input type="button">: Úsalo cuando necesites un botón que no envíe el formulario y que realice una acción específica mediante JavaScript.

<button>: Úsalo cuando necesites más flexibilidad, como añadir contenido HTML dentro del botón (por ejemplo, imágenes o íconos) o cuando necesites diferentes tipos de botones (submit, reset, button).

Multimedia

<audio>, <Video> y <iframe>

Reproductor de Audio "Kerido Auditor"

Canción de Frank T. "Kerido Auditor." YouTube, subido por Frank T - Topic .


Reproductor de Video "Queen"

Vídeo de Queen. "Don't Stop Me Now." YouTube, subido por Queen - Topic,

Reproductor de Video "2Cellos"

Vídeo de 2CELLOS. "Thunderstruck." YouTube, subido por 2CELLOS - Topic, .

<iframe> incrustación Vídeo de "YouTube"

Vídeo de Ricardo López Arriaga Bueno @rickylobu en YouTube

¿Quieres codificar? Playground MDN, IDE online

También puedes modificar esta página web en: Playground de MDN Docs Web

Pero te recomiendo como IDE en linea la página web: stackblitz.com

Ir a Playground