Ejercicio asincrónico Diseño Web

Algoritmos y Programación

•
Engenharias

hm_gomez_92
11/9/2023
¡Este material tiene más páginas!
Entonces, ¿te gustó este material?
Ayude a animar a otros estudiantes a mejorar el contenido
¿Te gustó este material? ¡Compartir! 🧡
Algoritmos y Programación

4275 Materiales compartidos
Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Vista previa del material en texto
Visual Studio Code
Es un editor de código que nos va a facilitar escribir HTML, CSS y Javascript de una forma muy amigable. Existen más editores, como Sublime Text, Atom, Brackets, etc.
Descargar: https://code.visualstudio.com/
4.1.5
1
Recomendamos seleccionar todos los casilleros
¡Perfecto!
Ya tenemos instalado el Visual Studio Code.
¡Ya tenemos todo instalado!
Empezamos con HTML
4.1.6
13
HTML
Es un lenguaje de marcado. Su función es estructurar los elementos que componen un sitio web (textos, imágenes, botones, etc.) de una forma jerárquica.
Volvamos a ver a ver el ejemplo del
principio de la clase…
14
- ¡Manos a la obra! -
Vamos a armar nuestro primer sitio web y a seguir aprendiendo sobre las <etiquetas>.
15
Nuestra meta!
1er paso
17
1er paso 
(Empieza la tarea)
Crear la carpeta y el primer archivo HTML
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
18
1. Creamos en nuestro escritorio una carpeta y le ponemos de nombre “tutorial”. Aquí guardaremos todos nuestros archivos del sitio web. Para crear la carpeta hacemos "click derecho" > "Nueva carpeta"
19
2. Abrimos el programa “Visual Studio Code” y hacemos click en “Abrir carpeta” u “Open folder”.
20
3. Buscamos en el "Escritorio" y seleccionamos la carpeta "tutorial" que creamos en el primer paso.
21
Primero tildamos la casilla y luego hacemos clic en el botón azul que dice "Yes, I trust the authors" (Si, confío en los autores)
22
4. Ya abierta la carpeta ahora vamos a crear nuestro primer archivo haciendo click en "New file..." (Nuevo archivo)
4.1.3
23
5. Una vez creado nuestro archivo tenemos que guardarlo con el nombre de “index.html”. Para guardarlo vamos a "File" (Archivo) > "Save" (Guardar). Este archivo index.html es el archivo que siempre un navegador web va a intentar iniciar cuando se lo envíe a una dirección, ya lo veremos...
24
5. Una vez creado nuestro archivo tenemos que guardarlo con el nombre de “index.html”. Esto es muy importante porque los navegadores webs están configurados para siempre primero intentar buscar e interpretar el archivo index.html
25
6. Ahora vamos a escribir dentro del archivo “html:5” y a presionar la tecla TAB del teclado.
Visual Studio Code trae integrado un plug-in que se llama Emmet. Este permite escribir código HTML de una forma más rápida utilizando atajos. Para crear nuestra documento base de HTML 5 vamos a primero escribir: "html:5" y luego, presionar la tecla TAB. De esta forma veremos que se crea automaticamente la estructura base. Importante, el archivo en el que estemos trabajando deber estar guardado con la extensión "archivo.html", sino Emmet no funcionará.
26
6. Ahora vamos a escribir dentro del archivo “html:5” y a presionar la tecla TAB del teclado.
Visual Studio Code trae integrado un plug-in que se llama Emmet. Este permite escribir código HTML de una forma más rápida utilizando atajos. Para crear nuestra documento base de HTML 5 vamos a primero escribir: "html:5" y luego, presionar la tecla TAB. De esta forma veremos que se crea automaticamente la estructura base. Importante, el archivo en el que estemos trabajando deber estar guardado con la extensión "archivo.html", sino Emmet no funcionará.
27
6. Ahora vamos a escribir dentro del archivo “html:5” y a presionar la tecla TAB del teclado.
Visual Studio Code trae integrado un plug-in que se llama Emmet. Este permite escribir código HTML de una forma más rápida utilizando atajos. Para crear nuestra documento base de HTML 5 vamos a primero escribir: "html:5" y luego, presionar la tecla TAB. De esta forma veremos que se crea automaticamente la estructura base. Importante, el archivo en el que estemos trabajando deber estar guardado con la extensión "archivo.html", sino Emmet no funcionará.
28
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
</body>
</html>
index.html
7. A partir de aquí, iremos modificando y añadiendo código. 
Ésta es la base de un archivo HTML. ¡Vamos muy bien! :)
4.1.3
29
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<body>
</body>
</html>
index.html
8. Actualizamos el “lang” a “es”. Esto indica que nuestro sitio web va a contener textos en español. Esta etiqueta será leida por los motores de búsqueda, como Bing o Google, para anticipar y filtrar el idioma del sitio.
4.1.3
30
2do paso
31
.
2do paso
Modificar metadatos
en el <head>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan
32
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
</body>
</html>
index.html
9. Actualizamos el contenido de la etiqueta <title> escribiendo nuestro Nombre y Apellido. La etiqueta <title> se utiliza dentro del <head> y nos permite indicarle al navegador web qué nombre queremos que muestre en la pestaña cuando se abra este archivo html.
4.1.3
33
3er paso
34
.
3er paso
Añadir un título y un párrafo en el <body>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan
35
.
LOS ENCABEZADOS
Los encabezados HTML o “headings” son las etiquetas que conocemos como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Un encabezado HTML, es una etiqueta de título que utilizamos dentro de una página web para resaltar la temática y sub-temáticas del contenido.
La jerarquía con la que se usan es de suma importancia para el entendimiento de nuestra web por parte de los buscadores.
36
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
</body>
</html>
index.html
10. La etiqueta <h1> se usa para indicar títulos dentro del sitio y la etiqueta <p>, para indicar párrafos. Estas etiquetas deben ir siempre dentro del <body>. A su vez, las etiquetas <h1> existen en varios tamaños <h1>, <h2>, <h3> (hasta el <h6>). Esto está pensado para poder diferenciar títulos de subtítulos, siendo <h1> el nivel más alto y <h6> el nivel más bajo.
37
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
38
A continuación abriremos nuestro archivo “index.html” haciendo doble clic. También puedes hacer clic derecho > Abrir o usar la opción de Abrir con > Microsoft Edge.
39
40
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Pueden hacer <a href="https://www.microsoft.com">click aquí</a> para visitar el sitio web de Microsoft.
</p>
</body>
</html>
11. Creamos un segundo párrafo y añadimos una etiqueta <a>, que nos permitirá crear un hipervínculo. Esta etiqueta tiene un atributo y es “href=”. En él, ndicaremos cuál es la dirección que queremos que se abra. 
Los “atributos” se escriben en la etiqueta de <apertura> y son valores adicionales que algunas etiquetas soportan. La etiqueta <a>soporta muchos más, aquí usamos “href” para indicar la URL del sitio web al cual queremos redireccionar.
41
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a> para visitar el sitio web de Microsoft.
</p>
<hr>
</body>
</html>
Las etiquetas <hr> se usan para insertar una línea horizontal divisora de texto. No es necesario indicar el cierre de estas etiquetas </hr> porque generalmente no se usan para contener ningún otro elemento... (sí, son una excepción a la regla... Qué rebeldes, ¿no? Hay algunas más, pero no se preocupen que son muy pocas las rebeldes)
42
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a> para visitor el sitio web de Microsoft.
</p>
<hr>
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar texto y nos va a permitir ver cómo se comporta. El sitio web es 
<a href="https://es.lipsum.com/">Lorem Ipsum</a>.
</p>
</body>
</html>
Aquí añadimos un título nuevo, pero utilizando la etiqueta <h2> ya que será un subtítulo. Automáticamente el tamaño del texto será un poco más pequeño que el <h1>. Por otro lado, añadimos un párrafo con <p> y una URL a un sitio que vamos a utilizar para crear texto de relleno. Este sitio web es muy útil para simular el aspecto de los textos de nuestros sitios webs.
43
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Completar con Nombre y Apellido</title>
</head>
<body>
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a> para visitor el sitio web de Microsoft.
</p>
<hr>
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris, accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus. Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi. Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
Vamos a sitio web: https://es.lipsum.com/ (o cualquier otro) Seleccionamos y copiamos un párrafo (ctrol+C) volvemos a nuestro código y pegamos (ctrl+V). También podemos hacerlo con click derecho y pegar.
4.1.3
44
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a> para visitor el sitio web de Microsoft.
</p>
<hr>
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris, accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi. Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
Las etiquetas </br> se usan para insertar un salto de línea y no hace falta indicar su apertura (sí, son del grupo de las rebeldes estas también) porque no se van a usar nunca para contener otros elementos.
4.1.3
45
<body>
<!-- Esto es un comentario interno. No se muestra en pantalla -->
<h1>Mi primer título</h1>
<p>Mi primer párrafo con información</p>
<p>
Mi segundo párrafo. Puedes hacer <a href="https://www.microsoft.com">click aquí</a> para visitar el sitio web de Microsoft.
</p>
<hr>
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris, accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi. Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
Por último, aquí añadimos a nuestro código un comentario interno. Como verán, se escribe de un modo distinto, utilizando <!-- como apertura y --> como cierre. Los comentarios se utilizan internamente, para hacer anotaciones entre quienes trabajan con el código. No salen nunca impresos en pantalla al cargar el sitio web. En códigos muy largos sirven para entender mejor el código HTML.
4.1.3
46
Ahora vamos a añadir ”clases”. Las clases se usan para asignar un mismo estilo a muchas etiquetas. Es una forma de reutilizar y reducir código a la hora de escribir. Las ”clases” en CSS se indican con un “.” (punto) al principio y luego se les añade un nombre a criterio personal.
Para usar la Clase, vamos a una etiqueta dentro del <body> y añadimos el atributo “class=“ más el nombre de la clase que elijamos. Presten atención que en HTML la clase no se escribe con un punto al principio como en CSS.
A una misma etiqueta se le pueden asignar infinitas clases. Para hacerlo, simplemente hay que separarlas con un “ “ (espacio). Es importante respetar minúsculas y mayúsculas, debe ser idéntico a como está escrita la clase en CSS para que HTML pueda encontrarla y cargar las propiedades.
Las listas en HTML nos permiten definir semánticamente un conjunto de elementos que tienen mejor sentido juntos que separados. Un ejemplo de esto puede ser una serie de pasos para realizar algo o la descripción de propiedades de un objeto.
Actualmente existen 3 tipos de listas:
1- Ordenada.
2- Desordenadas o No ordenadas.
3- Descriptivas.
<ol> lista ordenada.
Define un conjunto de elementos con jerarquía.
<ul> lista no ordenada.
Define un conjunto de elementos relacionados pero sin jerarquía.
<dl> lista descriptiva.
Encierra un conjunto de términos y descripciones.
LAS LISTAS
<li> elemento de lista.
Se usa en listas ordenadas y no ordenadas para definir un elemento de lista.
50
<h2>Ingredientes para hacer torta frita</h2>
<ol>
 <li> 1 kilo de harina </li>
 <li>2 cucharadas de grasa vacunao manteca</li>
 <li>2 vasos de agua templada</li>
 <li>1 cucharada de sal</li>
 <li>Aceite de girasol para freír</li>
 <li>Disfrutar</li>
</ol>
Ingredientes para hacer torta frita
1. 1 kilo de harina
2. 2 cucharadas de grasa vacuna o manteca
3. 2 vaso de agua templada
4. 1 cucharada de sal
5. Aceite de girasol para freír
6. Disfrutar
Listas Ordenadas
51
<h2>Verduleria</h2>
<ul>
 <li>Limon</li>
 <li>Manzana</li>
 <li>Zanahorias</li>
 <li>Tomates</li>
 <li>Lechuga</li>
 <li>Rucula</li>
</ul>
Verdulería:
•Limón
•Manzana
•Zanahorias
•Tomates
•Lechuga
•Rúcala
Lista NO Ordenadas
52
<dl>
 <dt>Listas en HTML</dt>
 <dd>
Una lista es un párrafo que contiene una secuencia de artículos estructurados. HTML define tres tipos de listas: la lista ordenada, la lista no ordenada y la lista de definiciones</dd>
</dl>
Lista Descriptiva
Listas en HTML
Una lista es un párrafo que contiene una secuencia de artículos estructurados. HTML define tres tipos de listas: la lista ordenada, la lista no ordenada y la lista de definiciones.
<dt> especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento <dl> Es usualmente seguido por un elemento <dd>; sin embargo, múltiples elementos <dt> en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento <dd>.
53
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
54
4.1.3
55
Álbum de etiquetas desbloqueadas
	Raíz
	<html>
	Texto
	<h1>, <h2>,...<h6>
	<hr>
	<p>
	</br>
	<a>
	Secciones
	<body>
	<header>
	<nav>
	<aside>
	<main>
	<section>
	<article>
	<footer>
	<div>
	Extras
	<!DOCTYPE html>
	<!--Comentario-->
	Metadatos
	<head>
	<meta>
	<title>
	<style>
	<link>
	Imágenes
	<img>
Conozcan más etiquetas en w3school o Mozilla.
56
Es momento de tomar asistencia.
Recuerda que debes tener el 70% para aprobar el curso.
CSS
Es un lenguaje de hojas de estilo que permite modificar la apariencia de los sitios webs. Es complementario a HTML, le añade mejoras visuales.
58
.
selector
Elemento de nuestro HTML que deseamos aplicar estilos.
propiedad
Nombre de la propiedad CSS que queremos modificar.
valor
Valor que le asignamos a esa propiedad.
Sintaxis de CSS
59
Sintaxis de CSS
EN HTML 
EN CSS
60
4to paso
61
Interno
Colocamos nuestro código CSS dentro de la etiqueta <style></style> en el head de nuestro archivo HTML.
Externo
Usamos la etiqueta <link /> donde el attr rel indica la relación con el recurso y el attr href la ruta a nuestro archivo css. (Se usa actualmente)
En línea
Se coloca en el attr style del elemento/etiqueta HTML a modificar.
Como vincular CSS 
62
.
Dar estilo con CSS de forma externa
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
63
1. Hacemos click en el ícono para crear una carpeta nueva.
64
2. Le ponemos de nombre “assets” y la creamos apretando ENTER.
65
3. Vamos a dar click sobre la carpeta creada para ubicarnos en su directorio.
66
4. Volvemos a tocar el ícono para crear una nueva carpeta.
67
5. La nombramos “css” y damos ENTER para crearla.
68
6. Vamos a dar click en la carpeta “css” para ubicarnos dentro de ella.
69
7. Hacemos click en el ícono para crear un archivo nuevo.
70
8. Nombramos al archivo “style.css” y damos ENTER para crearlo.
71
9. Si hicimos todo bien, nos tiene que aparecer el archivo creado dentro de la carpeta “css” y tiene que abrirse automáticamente.
72
10. Esto indica que ya estamos trabajando dentro del archivo “style.css”
73
Selectores CSS
Universal
Selecciona todos los elementos de HTML.
Etiqueta
Se utiliza para seleccionar una etiqueta específica.
Clase
Selecciona todos los elementos html que contengan ese atributo class.
ID
Selecciona todos los elementos html que contengan ese atributo id.
74
11. Ahora vamos a poner todo el código CSS dentro de él. No es necesario colocar las etiquetas <style></style> porque esto ya no es un archivo “.html”, sino que es “.css” ;)
75
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
76
13. El sitio debe seguir viéndose igual, pero ahora el estilo está siendo cargado desde el archivo “style.css”... Pueden usar el “Inspector” para examinarlo mejor ;)
4.1.3
77
Álbum de etiquetas desbloqueadas
	Raíz
	<html>
	Texto
	<h1>, <h2>,...<h6>
	<hr>
	<p>
	</br>
	<a>
	Secciones
	<body>
	<header>
	<nav>
	<aside>
	<main>
	<section>
	<article>
	<footer>
	<div>
	Extras
	<!DOCTYPE html>
	<!--Comentario-->
	Metadatos
	<head>
	<meta>
	<title>
	<style>
	<link>
	Imágenes
	<img>
Conozcan más etiquetas en w3school o Mozilla.
78
5to paso
79
.
Insertar una imagen
con HTML
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
80
Ingresamos al sitio "www.unsplash.com”  para descargar una imagen que tenga buena calidad.
81
Buscamos paisajes escribiendo en inglés “landscape” en el buscador (pueden elegir la imagen que más les guste)
82
83
Hacemos click en una imagen
84
Hacemos click en la flechita para descargar la imagen.
85
Elegimos descargar en tamaño “Medium (1920x1200)”.
86
Creamos la carpeta “images” y ponemos dentro de ella la imagen que descargamos. Por último, cambiamos el nombre de la imagen para que sea “paisaje.jpg”. Esto es muy importante, será el nombre que usemos en HTML para leer la imagen. 
Recuerden que las minúsculas y las mayúsculas importan.
Ruta: assets/images/paisaje.jpg
87
<hr>
<img src="assets/images/paisaje.jpg" />
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris, accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi. Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
Arriba de nuestra etiqueta <h2> vamos a insertar una imagen utilizando la etiqueta <img>. Esta etiqueta tiene un atributo que es “src=“ para indicar la ruta a donde el archivo HTML debe ir a buscar la imagen para leerla.
88
<
<img src="assets/images/paisaje.jpg" alt="Paisaje de colinas con árboles y pastos" />
<h2>Mi segundo título pero algo más pequeño</h2>
<p>
Vamos a utilizar un sitio web que nos va a generar mucho texto y nos va a permitir rellenar espacios. Este sitio web es
<a href="https://es.lipsum.com/"> Lorem Ipsum</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra auctor quam, ut molestie eros bibendum eu. Aenean posuere aliquam nulla at pretium. Cras erat mauris, accumsan vel laoreet sit amet, scelerisque in ipsum. Vivamus sed nulla id erat sollicitudin tincidunt sit amet eu massa. Proin ultrices leo nec erat interdum rhoncus.
</br>
Suspendisse et congue sapien. Donec dictum eleifend nisi, sit amet euismod ex pellentesque eget. Sed eget volutpat arcu. Mauris at risus fringilla lectus facilisis aliquet sed sed nisi.Nam tristique egestas lectus eget euismod. Nulla fringilla massa ut blandit venenatis. Fusce eleifend congue euismod. Ut volutpat ornare luctus.
</p>
</body>
</html>
A su vez, las <img> usan un atributo “alt=" para dar una descripción escrita sobre la imagen. Este atributo sirve para que la gente que sufre de alguna discapacidad visual pueda pedirle al navegador que lea lo que hayamos escrito en el atributo “alt=“ y así saber, en este ejemplo, que hay una imagen sobre un paisaje de colinas con árboles y pastos. Esto que escribimos en “alt=“ también aparecerá escrito en caso de que la lectura de la imagen falle por algún motivo.
89
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
90
¡Vemos que la imagen aparece en el sitio! ¡Muy bien! Ahora vamos a ajustarla, porque es muy grande y sobresale de la pantalla. Aquí CSS nos ayudará a ajustar el estilo ;)
91
/* Etiquetas */
body {
background-color:powderblue;
}
img {
width:100%;
}
/* Clases */
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red;
}
En el ”style.css” asignamos la propiedad “width” (ancho) del 100%, para que todas las etiquetas “img” se ajusten al ancho total del “body”.
4.1.3
92
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
93
Ahora vemos la imagen completa y no “cortada” o “sobresalida” de la pantalla. Esto es porque se ajustó al 100% del <body>.
4.1.3
94
Álbum de etiquetas desbloqueadas
	Raiz
	<html>
	Texto
	<h1>, <h2>,...<h6>
	<hr>
	<p>
	</br>
	<a>
	Secciones
	<body>
	<header>
	<nav>
	<aside>
	<main>
	<section>
	<article>
	<footer>
	<div>
	Extras
	<!DOCTYPE html>
	<!--Comentario-->
	Metadatos
	<head>
	<meta>
	<title>
	<style>
	<link>
	Imágenes
	<img>
Para terminar de desbloquear todas las etiquetas les proponemos que sigan investigando en los siguientes sitios w3school o Mozilla.
95
6to paso
96
.
6to paso
Ajustar márgenes y bordes del <body>
¡Importante! No copiar y pegar el código desde este PowerPoint.
Hay que ir escribiendo todo directamente en el Visual Studio Code, porque algunos caracteres (como las comillas dobles y simples) fallan.
97
/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
background-color:powderblue;
}
img {
width:100%;
}
/* Clases */
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red;
}
index.html
style.css
Por último, vamos a modificar el “body”. Utilizaremos la propiedad “margin” con valor “50px” (cincuenta píxeles) para añadir márgenes externos y la propiedad “padding” con valor “50px 100px” para asignar márgenes internos.
98
/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
background-color:powderblue;
}
img {
width:100%;
}
/* Clases */
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red;
}
index.html
style.css
Cuando usamos margin o padding podemos asignar un valor distinto para cada borde.
margin: 50px; (los cuatro márgenes con el mismo valor)
2. margin: 50px 25px; (los márgenes superiors e inferiors de 50px y los márgenes laterals de 25px)
3. margin: 20px 25px 40px 10px; (un valor para cada margen. El orden sería: superior, derecho, inferior e izquierdo)
99
/* Etiquetas */
body {
margin: 50px;
padding: 50px 100px;
border: 1px solid black;
background-color:powderblue;
}
img {
width:100%;
}
/* Clases */
.textoCentrado {
text-align:center ;
}
.textoRojo {
color:red;
}
index.html
style.css
Finalizamos añadiendo la propiedad “border”, que nos permite añadir estilo al borde de un elemento. El primer valor que asignamos es el grosor del borde (1px); el segundo valor es el tipo de línea (solid o dashed) y, por último, el color del borde (black).
100
Ctrl+S para guardar
Recuerden siempre guardar los cambios que hicieron en el código para que se vean reflejados en el sitio web.
4.1.3
101
¡Lo logramoooooos! Felicitaciones :)
4.1.3
102
Aquí vemos que el ”margin” es el espacio externo del <body>. A su vez, vemos el borde negro del <body> con la propiedad “border”. Por último, vemos que el “padding” es el espacio interno entre el borde y el contenido del <body>
padding:
margin:
border:
4.1.3
103
Esto es el espacio
que ocupa el contenido
4.1.3
104
padding:
padding:
padding:
4.1.3
105
margin:
margin:
margin:
4.1.3
106
border:
4.1.3
107