RESULTADO:
Programa: Visual Studio Code.
Pasos previos:
1. Crear una carpeta con el nombre que prefieras.
2. Abrir Visual Studio Code.
3. Arrastrar la carpeta creada al Visual Studio Code.
4. Crear una nueva plantilla en “New File” y ponerle un nombre (ej. tutorial.html)
5. Dentro de la plantilla escribir html:5 y se creará una plantilla por defecto con un head (el encabezado de la pestaña) y un body (cuerpo donde se estructura el contenido de la web)
QUEDARÁ ASÍ:
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
CREAR CONTENEDOR:
1. En el body creamos un div (escribiendo div y pulsando TAB).
2. Al div le ponemos una clase para darle estilo con CSS, escribiendo class=“containter”.
3. Dejamos unos espacios dentro del div, donde incluiremos los links posteriormente.
EDITAR CONTENEDOR:
1. En el head escribimos style y pulsamos TAB.
2. Elegimos lo que queremos editar, en este caso nuestro div con la clase container. Por tanto, escribimos .container.
3. Seguidamente, escribimos creamos corchetes { } y dentro escribimos en código:
Cómo será la caja (display), el color (background), tipo de justificado (juntify-content), tipo de alineación (align-items), altura (height) y la dirección en la que se colocarán nuestras imágenes (flex-direction).
QUEDARÁ ASÍ:
"en">
"UTF-8">
"viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>.container {
display: flex;
background: silver;
justify-content: center;
align-items: center;
height: 100px;
flex-direction: row;
}
style>
head>
"container">
div>
body>
html>
CREAR LINKS CON IMÁGENES:
1. Dentro de nuestro div, creamos un link escribiendo a y pulsando TAB. En su interior pegamos la dirección web.
Ej. https://es.wikipedia.org/wiki/Fútbol_Club_Barcelona”>
2. Ahora, escribimos img y pulsamos TAB. Y ya podemos escribir la dirección de la imagen. Tras ella se cierra con
Ej. https://es.wikipedia.org/wiki/Fútbol_Club_Barcelona”>https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/640px-FC_Barcelona_(crest).svg.png” width=“50px” alt=“fcbarcelona”>
"en">
"UTF-8">
"viewport"content="width=device-width, initial-scale=1.0">
Documenttitle>
<style>
.container {
display: flex;
background: silver;
justify-content: center;
align-items: center;
height: <span class="hljs-number">100</span>px;
flex-direction: row;
}
style>
head>
<body>
<divclass=<span class="hljs-string">"container"</span>>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Real_Madrid_Club_de_F%C3%BAtbol"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"real_madrid"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/F%C3%BAtbol_Club_Barcelona"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_%28crest%29.svg/640px-FC_Barcelona_%28crest%29.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"fcbarcelona"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Inter_de_Miami"</span>><imgsrc=<span class="hljs-string">"https://a.espncdn.com/guid/68c59d9b-7197-356f-8418-52c0d216852c/logos/primary_logo_on_black_color.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"inter_miami"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Club_Am%C3%A9rica"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/en/thumb/c/c1/Club_Am%C3%A9rica_crest.svg/1200px-Club_Am%C3%A9rica_crest.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"club_america"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Atl%C3%A9tico_Nacional"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Atl%C3%A9tico_Nacional.png/250px-Atl%C3%A9tico_Nacional.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"atletico_nacional"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Al-Nassr_Football_Club"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/en/thumb/3/3f/Nassr_FC_Logo.svg/1200px-Nassr_FC_Logo.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"al_nassr"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Club_Atl%C3%A9tico_River_Plate"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Escudo_del_C_A_River_Plate.svg/1200px-Escudo_del_C_A_River_Plate.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"river_plate"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Club_Atl%C3%A9tico_Boca_Juniors"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/CABJ70.png/960px-CABJ70.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"boca_juniors"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Deportivo_T%C3%A1chira_F%C3%BAtbol_Club"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/commons/d/da/Dep.Tachira_Escudo.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"deportivo_tachira"</span>>a>
<ahref=<span class="hljs-string">"https://es.wikipedia.org/wiki/Club_Social_y_Deportivo_Colo-Colo"</span>><imgsrc=<span class="hljs-string">"https://upload.wikimedia.org/wikipedia/en/thumb/b/be/Colo-Colo.svg/1200px-Colo-Colo.svg.png"</span>width=<span class="hljs-string">"50px"</span>alt=<span class="hljs-string">"colo_colo"</span>>a>
div>
body>
html>
</code></pre>
