C1 - HTML

Full Stack amb React

¿Qué es el HTML?

El HTML (HyperText Markup Language) es un lenguaje de marcas. Nos sirve para estructurar los contenidos y dotarlos de significado. Utilizamos el HTML para decirle a la máquina qué es cada cosa dentro de un contenido.

Full Stack amb React

Concierto de The Roberts

Ya están a la venta en la web de CompraTickets 
las entradas para el concierto de The Roberts 
el 12-05-21 a las 20.30. 
Recuerda que estará prohibido fumar en el recinto 
y será obligatorio llevar la mascarilla puesta 
durante todo el concierto.

Para más información, llama al 671928372.

<h1>Concierto de <a href="https://the-roberts.com">The Roberts</a></h1>
<p>Ya están a la venta en la web de
<a href="https://compratickets.com/buy/the-roberts-19830039812">CompraTickets</a> las entradas para el
concierto de <a href="https://the-roberts.com">The Roberts</a>
<time datetime="2021-05-12T20:30">el 12-05-21 a las 20:30</time>.
</p>
<p>Recuerda que estará <strong>prohibido fumar</strong> en el recinto y será obligatorio
<strong>llevar la mascarilla puesta</strong> durante todo el concierto.
</p>
<p>Para más información, llama al <a href="tel:+34671928372">671928372</a>.</p>

Por ejemplo, no es lo mismo darle a una máquina esto:

Que darle esto:

Concierto de The Roberts

Ya están a la venta en la web de CompraTickets 
las entradas para el concierto de The Roberts 
el 12-05-21 a las 20.30. 
Recuerda que estará prohibido fumar en el recinto 
y será obligatorio llevar la mascarilla puesta 
durante todo el concierto.

Para más información, llama al 671928372.

Full Stack amb React

Las etiquetas

Se llama lenguaje de marcas porque utilizamos marcas para englobar partes del contenido y darles significado. A dichas marcas las llamamos etiquetas HTML o elementos HTML.

Una etiqueta siempre se escribe entre los símbolos

< y >, en minúsculas: <p>, <ul>, <h1>

La mayoría de las etiquetas pueden contener en su interior texto o más etiquetas. En ese caso, delimitamos su contenido con una etiqueta de apertura y otra de cierre, por ejemplo:

Full Stack amb React

<p>Esto es un párrafo de texto</p>
<ul>
  <li>Esto es una lista</li>
  <li>de elementos</li>
  <li>donde no importa</li>
  <li>el orden de éstos</li>
  <li>y alguno lleva un <a href="http://unaweb.com">enlace</a> en su interior</li>
</ul>

Otras etiquetas no pueden contener nada dentro. En estos casos la etiqueta puede escribirse de dos maneras:

<p>
  Con todos ustedes, una flor: <img src="flor.jpg">
</p>

<p>
  Con todos ustedes, una flor: <img src="flor.jpg" />
</p>

Full Stack amb React

Los atributos

<a href="https://www.google.es" target="_blank" title="Link a Google">Ir al buscador</a>

Full Stack amb React

Las etiquetas pueden ir acompañadas de atributos. Los atributos se componen de un nombre y un valor, y se escriben siempre en la etiqueta de apertura:

Los nombres de los atributos se escriben en minúsculas, y el valor siempre va entre comillas dobles.

Algunos atributos son booleanos: no tienen un valor asociado, simplemente están o no están:

<button type="submit" disabled>Enviar</button>

<button type="submit">Enviar</button>

Full Stack amb React

Estructura de un documento HTML

Un documento HTML siempre parte de una estructura básica y obligatoria, que tiene los siguientes elementos:

El doctype (Document Type Declaration): es una etiqueta especial que le dice al navegador que el documento es de tipo HTML, y va en la primera línea.
La etiqueta madre de todas las demás (elemento raíz): <html>
Tiene un atributo lang para indicar en qué idioma están los contenidos.
La etiqueta <head>: sirve para darle al navegador información sobre los contenidos, pero no tiene contenidos. Lo que haya aquí dentro no se verá en el navegador.
La etiqueta <body>: aquí dentro irá todo el contenido de la web.

<!DOCTYPE html>

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

</html>

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

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

  	</body>
</html>

Full Stack amb React

¿Qué hay dentro del <head>?

Algunos de los elementos o etiquetas que vamos a utilizar más frecuentemente dentro del <head> son:

<title>: El título del documento. Aparecerá en la pestaña del navegador y también en favoritos cuando alguien guarde la página.
<meta>: Hay varios tipos de <meta>, y sirven para añadir metadatos sobre el documento. Todas son etiquetas sin contenido (no tienen apertura y cierre).
- charset: Sirve para establecer la codificación de caracteres del documento.
- viewport: Sirve para que la web se adapte a diferentes resoluciones (responsive).
- description: Sirve para resumir en pocas palabras los contenidos que va a presentar la web. La utilizan los buscadores para sus páginas de resultados.

Full Stack amb React

<link>: Sirve para asociar a la web un archivo diferente al .html . Son etiquetas sin contenido.
- favicon: El icono que aparece en la pestaña del navegador o en favoritos.
- estilos: Así cargaremos las hojas de estilos CSS correspondientes a nuestra página.
<script>: Sirve para asociar archivos JavaScript a nuestro documento HTML.

<head>
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Éste es el primer documento HTML que desarrollo en mi vida">
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Éste es el primer documento HTML que desarrollo en mi vida">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Éste es el primer documento HTML que desarrollo en mi vida">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="estilos.css">
    <title>Mi primer documento HTML</title>
</head>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Éste es el primer documento HTML que desarrollo en mi vida">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="estilos.css">
    <script src="scripts.js"></script>
    <title>Mi primer documento HTML</title>
</head>

Full Stack amb React

¿Qué hay dentro del <body>?

Para estructurar los contenidos de una web tenemos a nuestra disposición muchas etiquetas. Cada una va a dotar de distinto significado a cada parte de los contenidos. Es importante que elijamos bien las etiquetas que engloban cada porción de contenido, teniendo siempre presente qué es cada elemento, y no cómo se va a ver.

Por ejemplo, si quiero que un texto se vea en negrita y con un tamaño de letra grande, el primer impulso puede ser utilizar una etiqueta de encabezado (h1, h2, h3, h4, h5, h6), porque por defecto aparecen en negrita y con tipografía grande. Pero estamos en HTML: no estamos hablando por ahora de propiedades visuales. Eso se define en el CSS.

En el HTML tenemos que decirle al navegador qué es cada cosa. Si usamos una etiqueta h* de encabezado, significa que lo que va dentro es un encabezado, es decir, un pequeño texto que sintetiza y presenta los contenidos que van a continuación de él, independientemente de cómo se tenga que ver. Si la frase que queremos en negrita y grande no cumple este papel dentro del documento, entonces no será una etiqueta h*.

Full Stack amb React

<!-- INCORRECTO: -->
<p>En nuestra tienda podrás encontrar todos los artículos de hogar que necesitas y al mejor precio.</p>
<h4>¡Aprovecha nuestra oferta antes de que caduque!</h4>

<!-- CORRECTO -->
<h4>Artículos en oferta</h4>
<p>Te presentamos a continuación los artículos que tenemos este mes en oferta</p>

Full Stack amb React

Etiquetas para texto

Full Stack amb React

<p>Actualmente estamos viviendo una auténtica explosión con todo lo
relacionado con el <strong>frontend</strong>. Cada año ven la luz multitud de 
nuevas librerías, frameworks, herramientas que van nutriendo el
cada vez más amplio ecosistema que envuelve a <strong>JavaScript</strong>.</p>

Párrafo, un bloque de texto genérico

Voz en otro idioma, pero habitualmente se utiliza para los iconos

Texto importante

Encabezado, un texto que presenta los contenidos que van a continuación

Sección dentro de un texto, nos sirve para referirnos a una porción de texto desde el CSS o el JS.

<p>Actualmente estamos viviendo una auténtica explosión con todo lo
relacionado con el frontend. Cada año ven la luz multitud de 
nuevas librerías, frameworks, herramientas que van nutriendo el
cada vez más amplio ecosistema que envuelve a JavaScript.</p>

<p><i class="fas fa-asterisk"></i> Actualmente estamos viviendo una auténtica explosión con todo lo
relacionado con el <strong>frontend</strong>. Cada año ven la luz multitud de 
nuevas librerías, frameworks, herramientas que van nutriendo el
cada vez más amplio ecosistema que envuelve a <strong>JavaScript</strong>.</p>

<h1>JavaScript</h1>
<h2>La actualidad del frontend</h2>
<p><i class="fas fa-asterisk"></i> Actualmente estamos viviendo una auténtica explosión con todo lo
relacionado con el <strong>frontend</strong>. Cada año ven la luz multitud de 
nuevas librerías, frameworks, herramientas que van nutriendo el
cada vez más amplio ecosistema que envuelve a <strong>JavaScript</strong>.</p>
<h2>La evolución de JavaScript</h2>
<p><i class="fas fa-asterisk"></i> <strong>JavaScript</strong> nació en la década de los 90 como un 
lenguaje simple y flexible, y rápidamente se popularizó por la rapidez con la que se podían obtener
resultados visibles con él.</p>
<p>Sin embargo, durante años esa flexibilidad también jugó en su contra, porque si bien JS servía para
implementar interfaces de usuario interactivas, estaba muy limitado cuando nuestra aplicación empezaba
a <strong>escalar</strong></p>

<h1>JavaScript</h1>
<h2>La actualidad del frontend</h2>
<p><i class="fas fa-asterisk"></i> Actualmente estamos viviendo una auténtica explosión con todo lo
relacionado con el <strong>frontend</strong>. Cada año ven la luz multitud de 
nuevas librerías, frameworks, herramientas que van nutriendo el
cada vez más amplio ecosistema que envuelve a <strong>JavaScript</strong>.</p>
<h2>La evolución de JavaScript</h2>
<p><i class="fas fa-asterisk"></i> <strong>JavaScript</strong> nació en la década de los 90 como un 
lenguaje simple y flexible, y rápidamente se popularizó por la rapidez con la que se podían obtener
resultados visibles con él.</p>
<p>Sin embargo, durante años esa flexibilidad también jugó en su contra, porque si bien 
<span class="coloreado">JS</span> servía para implementar interfaces de usuario interactivas, estaba 
muy limitado cuando nuestra aplicación empezaba a <strong>escalar</strong></p>

Full Stack amb React

Etiquetas para enlaces

Full Stack amb React

Enlace

<a href="https://soundcloud.com/newhiphopdailyradio">Mi emisora de SoundCloud</a>

Full Stack amb React

Etiquetas para multimedia

Full Stack amb React

Imagen

<img src="https://pbs.twimg.com/profile_images/729675432375799809/mgwWE7v4_400x400.jpg" alt="Gatito con una bufanda">

Imagen con pie de foto

<figure>
    <img src="https://pbs.twimg.com/profile_images/729675432375799809/mgwWE7v4_400x400.jpg" alt="Gatito con una bufanda">
    <figcaption>Un gatito con una bufanda</figcaption>
</figure>

Reproductor de vídeo

Reproductor de audio

<video src="https://curso-react.mariogl.com/reggae-woman.mp4" controls></video>

<audio src="https://curso-react.mariogl.com/Full(Prod.%20Lotto).mp3" controls></audio>

Contenido empotrado (embed)

<iframe src="https://player.vimeo.com/video/393071502" width="640" height="360" frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Full Stack amb React

Etiquetas para listas

Full Stack amb React

<ul>

</ul>

Lista desordenada

<ol>

</ol>

Lista ordenada

<h2>Lista de la compra</h2>
<ul>
    <li>Tortitas de maíz</li>
    <li>Olivas aliñadas</li>
    <li>Manzanas golden</li>
    <li>Tomates cherry</li>
</ul>

<h2>Instrucciones</h2>
<ol>
    <li>Introducir nombre de usuario y contraseña</li>
    <li>Pulsar en el botón "Acceder"</li>
    <li>Aceptar la confirmación</li>
    <li>Marcar las casillas que interesen</li>
</ol>

Full Stack amb React

Etiquetas para agrupar

Full Stack amb React

Contenedor sin significado

Contenedor sin significado

Sección de contenido

Contenido principal

Links de navegación

Unidad de contenido principal independiente

Cabecera

Pie

Contenido relacionado

<body>
    <header>
        <img src="logo.png" alt="Logotipo" />
        <nav>
            <ul>
                <li><a href="/inicio">Inicio</a></li>
                <li><a href="/quienes-somos">Quiénes somos</a></li>
                <li><a href="/contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>Contacto</h1>
        <p>Si quieres contactar con nosotros puedes hacerlo a través del teléfono 931472727 o del correo electrónico
            info@gutierrez.com</p>
    </section>
    <section>
        <h2>Nuestra ubicación</h2>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2515.484921491329!2d2.223485513076701!3d41.42983481492872!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDHCsDI1JzQ2LjAiTiAywrAxMyczMC4wIkU!5e0!3m2!1ses!2ses!4v1612035329997!5m2!1ses!2ses"
            width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
            tabindex="0"></iframe>
    </section>
    <footer>
        <p>Copyright 2021</p>
        <p>Contenidos redactados por Rigoberto Gutiérrez</p>
    </footer>
</body>

<body>
    <header>
        <img src="logo.png" alt="Logotipo" />
        <nav>
            <ul>
                <li><a href="/inicio">Inicio</a></li>
                <li><a href="/quienes-somos">Quiénes somos</a></li>
                <li><a href="/contacto">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Noticias</h1>
        <section>
            <article>
                <h2>Cinco jefas de la música urbana de ayer hasta hoy</h2>
                <img src="https://estaticos-cdn.elperiodico.com/clip/182cafe5-3274-4086-a817-35fd1b031c2f_alta-libre-aspect-ratio_default_0.jpg"
                    alt="londie, Somadamantina y Bad Gyal">
                <p>Junto a Chanel, en la década pasada, varias mujeres hicieron grande la ola del trap, dándole ya una
                    fuerza imparable en
                    España. Hasta ese momento, un sonido hecho por hombres. Pero el ejemplo de Chanel y otras artistas
                    pioneras, como
                    Somadamantina, fue esencial para que muchas otras mujeres se lanzaran a hacer música. De este tipo u
                    otra, pues es en
                    esa época en el que a todo se le ponía la etiqueta de trap. Hasta tal punto que 'Trap' acabó siendo
                    más que un estilo
                    musical, una escena.</p>
            </article>
            <article>
                <h2>Arlo Parks, la revolución de la empatía</h2>
                <img src="https://estaticos-cdn.elperiodico.com/clip/0eac085d-44c0-4e46-97a7-2d192a22ef02_alta-libre-aspect-ratio_default_0.jpg"
                    alt="La cantante londinense Arlo Parks">
                <p>Asistimos a una ola de talentos que leen la realidad desde regeneradores ángulos juveniles, acaso
                    poco maleados por
                    prejuicios y lenguajes antiguos, y ahí despunta una figura sensible, Arlo Parks, que canta a la
                    vulnerabilidad del alma
                    y de la mente acogiéndose a una sonoridad soul abierta a interferencias. Canciones que abrazan y
                    reconfortan a través de
                    la oscuridad, recalando en puertos vidriosos: depresión, patologías mentales, identidad sexual.</p>
            </article>
        </section>
    </main>
    <aside>
        <h3>Lo más visto</h3>
        <!-- Lista de noticias -->
    </aside>
    <footer>
        <p>Copyright 2021</p>
        <p>Contenidos redactados por Rigoberto Gutiérrez</p>
    </footer>
</body>

Full Stack amb React

Formularios

Full Stack amb React

Los formularios suponen un sistema muy importante para la entrada de datos por parte del usuario.

Nuestros elementos de formulario estarán dentro de una etiqueta <form>, que englobará todos los campos o controles donde el usuario introducirá los datos.

Generalmente, al final del formulario tendremos un botón que sirve para enviar los datos, para ello usaremos la etiqueta <button type="submit">.

<form>
  <!-- controles -->
  <button type="submit">Enviar</button>
</form>

Full Stack amb React

Formularios

Full Stack amb React

Gran parte de los controles de los formularios se crean con la etiqueta <input>, diferenciando el tipo de control con su atributo type.

También tenemos la etiqueta <textarea> para textos largos:

O la etiqueta <select> para un desplegable de varias opciones:

<option value="--">Opción 1</option>
<option value="--">Opción 2</option>

...

</select>

Full Stack amb React

Tablas

Full Stack amb React

Las tablas son estructuras que utilizaremos únicamente para datos tabulados.

Datos tabulados son aquellos que pueden presentarse en filas y columnas, de manera que todos los datos que pertenecen a la misma fila tienen relación entre sí, y todos los datos que pertenecen a la misma columna tienen relación entre sí.

No usaremos tablas cuando el criterio para usar filas y columnas sea meramente visual/espacial.

<table>
  <thead>
    <tr>
      <th>Marca</th>
      <th>Modelo</th>
      <th>Precio</th>
      <th>Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Honda</td>
      <td>CBF 600</td>
      <td>2000€</td>
      <td>Regulero</td>
    </tr>
    <tr>
      <td>Honda</td>
      <td>PS 125</td>
      <td>640€</td>
      <td>Malísimo</td>
    </tr>
    <tr>
      <td>Vespa</td>
      <td>GTS 300</td>
      <td>2250€</td>
      <td>Bueno</td>
    </tr>
  </tbody>
</table>

Full Stack amb React