INSTRUCCIONES:
- Para poder realizar esta actividad debes haber realizado los cursos previos junto con haber visto los videos online correspondientes a la experiencia 1.
- Para realizar esta actividad debes realizar un fork de este repositorio, luego clonar el fork y corregir los errores de código de manera local con sublime.
- Luego guarda los cambios y súbelos a tu repositorio de github.
- Luego de pusheados los últimos cambios, sube el link de Github en el desafío de la sección correspondiente en la plataforma.
Comencemos
##Ejercicio 1:
Además de encontrar el error de escritura de código, escribe el código necesario para que la página web quede con la estructura necesaria para HTML5.
Hint: Puedes utilizar el validador de la w3c para verificar el resultado
https://validator.w3.org/#validate_by_input
<p> <span> hola </p> </span>##Ejercicio 2:
¿Cuál es el error en el siguiente archivo HTML?
<!DOCTYPE html>
<html>
<body>
<title></title>
</body>
<head>
<p> hola ! </p>
</head>
</html>##Ejercicio 3: ¿Qué le falta al siguiente código para que no se vean esos caracteres extraños en la página?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Mi nombre es Antonio Núñez López</p>
</body>
</html>
##Ejercicio 4:
¿Qué le falta al siguiente código para que el título de la página (en el tab), se vea exactamente como en la imagen ?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>##Ejercicio 5: ¿Qué error hay en la estructura de la siguiente página web?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="">
</head>
<h1> Título 1 </h1>
<body>
</body>
</html>##Ejercicio 6: ¿Por qué no se ven los saltos de línea? Se pide implementar los cambios necesarios para que visualmente se pueden ver los párrafos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio recusandae culpa, repellat ex nobis, qui. Quidem id amet, cumque, porro, et nulla provident, quis eum sequi excepturi incidunt similique voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci officiis ipsum rem quos. Placeat, pariatur rerum velit iste aliquid blanditiis sunt nesciunt distinctio vel, iure dolorum possimus expedita in non!
</body>
</html>##Ejercicio 7:
Encontrar los errores en la siguiente página web y corregirlo, el texto que debe aparecer en pantalla es Párrafo 1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p Párrafo 1> </p>
</body>
</html>##Ejercicio 8:
Encontrar el error en la siguiente página web y corregirlo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<p> hola </p>
</head>
<body>
</body>
</html>##Ejercicio 9:
Encontrar los errores en la siguiente página web y corregirlo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="Soy un link"> www.google.cl </a>
</body>
</html>##Ejercicio 10:
Encontrar el error en la siguiente página web y corregirlo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p color="red"> Párrafo rojo </p>
</body>
</html>##Ejercicio 11:
Encontrar el error en la siguiente página web y corregirlo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<p style="color:red> Párrafo rojo </p>
</body>
</html>
##Ejercicio 12:
Corrige la estructura de la siguiente página web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1> Hola </h1>
Lorem ipsum dolor sit amet, consectetur adipisicing Tempore praesentium dolorum incidunt vitae deserunt quam exercitationem assumenda hic corrupti beatae numquam, labore explicabo quisquam ratione optio necessitatibus impedit porro vero!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quisquam unde dicta nulla tempora! Ad, modi eveniet dicta necessitatibus aut distinctio minus tenetur hic, delectus, doloremsuscipit doloribus ab eius.
</p>
</body>
</html>##Ejercicio 13:
¿Cuál es el error?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1> Título !! </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, velit dolorem laudantium odio neque temporibus magnam praesentium unde doloremque perferendis ratione mollitia rem, consequuntur vitae soluta ex suscipit nobis optio!
</p>
<img alt="logo.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, dolorem praesentium quidem ex aut odit architecto, impedit, eveniet pariatur nam, sed cum qui natus. Quod consequuntur mollitia, a voluptas. Accusamus.
</p>
</body>
</html>##Ejercicio 14:
¿Qué le falta al href del link para que te redirecciones al link deseado?
Además debes lograr que la imagen funcione como un segundo link redirigiendo a Google.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<a href="www.desafiolatam.com">link a Desafío Latam!</a>
<img alt="logo.png">
</body>
</html>##Ejercicio 15: Hay una foto en la carpeta images, la cual no carga 😰 se pide arreglar la carga.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="/llama.png">
</body>
</html>##Ejercicio 16: La estructura de la siguiente página web tiene diversos errores, puedes encontrarlo y arreglarlos?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="logo.png">
<a href="http://www.google.cl"> hola </a>
</img>
</body>
</html>##Ejercicio 17:
Corrige todos los errores (Hint: Son 8)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<body>
<meta charset="utf-8">
<link rel="stylesheet" href="">
<h1> Hola </h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet voluptate voluptas odit, sapiente soluta consectetur consequuntur ex est dolores laboriosam repudiandae unde repellat velit quo voluptatibus consequatur perferendis, tempore sunt!
</p>
<a href="desafiolatam.com" ><img alt="logo.png"> </a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ex, enim ipsum sequi. Dignissimos libero unde repellendus fugit quidem asperiores, veritatis aliquid vel, a eveniet praesentium labore quia dolor, accusamus?
</p>
</body>
</head>
<html>##Ejercicio 18:
A veces arreglar un error no es suficiente 😁. En este caso hay dos errores que tienes que modificar para que el texto aparezca con fondo negro y las letras rojas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 2 errores </title>
</head>
<body>
<p style="calor:red background-color:black"> ¿Los encontraste? </p>
</body>
</html>##Ejercicio 19:
¿Qué cambiarías o agregarías al código para que sólo el primer párrafo sea rojo?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Cascada !! </title>
</head>
<body>
<div style="color:yellow">
<p> Goooooood byeeeee !! </p>
<p> Holaaaa !!! </p>
</div>
</body>
</html>##Ejercicio 20:
Agrega estilo en el head (no inline), para que los párrafos sean de color verde.
<!DOCTYPE html>
<html>
<head>
<head> Go Green </head>
</head>
<body>
<p> Hellowww </p>
<p> Además recuerda siempre agregar la codificación </p>
</body>
</html>##Ejercicio 21:
Hay un error en el CSS y uno en el HTML, corrígelos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="color:yellow">
<p> Goooooood byeeeee !! </p style="color:red">
<p> Holaaaa !!! </p>
</div>
</body>
</html>##Ejercicio 22:
Corrige los errores para que el color por defecto sea amarillo y el color del segundo párrafo sea rojo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style="color:yellow">
</head>
<body>
<div>
<p> Hellowww </p>
<p class="color:red"> Lorem ipsum dolor sit amet. </p>
</div>
</body>
</html>##Ejercicio 23:
¿Cuál es el error?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
<p> {
color: green;
}
</style>
</head>
<body>
<div>
<p> Hellowww </p>
<p> Lorem ipsum dolor sit amet. </p>
</div>
</body>
</html>##Ejercicio 24:
Agrega al código el CSS necesario para que todos las etiquetas divs tengan color de fondo amarillo, y que sólo el primer párrafo tenga la letra de color rosado.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<div>
<p> Hellowww </p>
</div>
<div>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Goooooood byeeeee !! </p>
</div>
</body>
</html>##Ejercicio 25:
Agrega estilos en el ejercicio para que la primera imagen tenga un tamaño (ancho y alto) de 500 pixeles y la segunda tenga un ancho y alto máximo de 500px:
Probar con el navegador achicando la pantalla, ¿Cuál es la diferencia?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="images/logo.png" alt="logo desafio latam" >
<img src="images/logo.png" alt="logo desafio latam" >
</body>
</html>##Ejercicio 26:
Corrige los errores y además modifica el código para que sólo al etiqueta h1 tenga la tipografía Slabo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
font-family: 'Slabo 27px', serif;
</style>
</head>
<body>
<img src="images/logo.png" alt="logo desafio latam" >
<h1> Deafío Latam </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quaerat beatae architecto possimus explicabo ex, temporibus, reprehenderit, deserunt alias excepturi quidem molestias, magnam hic asperiores sapiente animi. Ex, provident, consectetur! </p>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
</body>
</html>