• es
  • de

Ejercicios de referencia

Ejercicios de HTML

Ejercicios de HTML

Crear un elemento de párrafo HTML

Título: Crear un elemento de párrafo HTML
Descripción: Crear un elemento de párrafo HTML
Instrucciones para el estudiante:  Crear un elemento de párrafo HTML mediante la etiqueta <p>. Asegúrate de cerrar la etiqueta.
Archivo para los estudiantes (index.html):  
Archivo de solución: <p></p>
Código de evaluación: // Get all 'p' elements from the HTML page
var s=document.querySelectorAll("p");
// Check if the page has 'p' elements
if(s.length==0) {
return "You haven't created any p tags";
}
// Check the page has exactly 1 'p' element
else if(s.length!=1) {
return "You have to create 1 p tags";
}
// Return true since there are no errors
else {
return true;
}

Crear un título

Título: Crear un título
Descripción: Dar un título a la página HTML
Instrucciones para el estudiante: Crear un elemento de título HTML. Puedes utilizar cualquier texto para el título.
Archivo para los estudiantes (index.html):  
Archivo de solución: <title> My Web Page </title>
Código de evaluación: // Get the 'title' of the HTML page
var s=document.querySelector("title");
// Check if the 'title' has been defined
if(s==null) {
return "You haven't created the title tag";
}
// Check the contents of the 'title'
else if(s.text.trim()!="My Web Page") {
return "Title of the page should be 'My Web Page'";
}
// Return true since there are no errors
else {
return true;
}

Crear un hiperenlace

Título: Crear un hiperenlace
Descripción: Crear un hiperenlace
Instrucciones para el estudiante:  Crear un hiperenlace mediante el elemento <a>. Asegúrate de añadir texto al enlace y de que este dirija al sitio web que elijas.
Archivo para los estudiantes (index.html):  
Archivo de solución: <a href='www.google.com'> Google </a>
Código de evaluación: // Get the first 'a' element in the HTML page
var s=document.querySelector("a");
// Check if it exists
if(s==null) {
return "You haven't created a link tag";
}
// Check if the 'a' element points to a URL
else if(s.href.trim().length==0) {
return "href should point to some url";
}
// Check if the 'a' element contains text
else if(s.text.trim().length==0) {
return "Add some description text to your link";
}
// Return true since there are no errors
else {
return true;
}

Agregar una imagen a una página web

Título: Agregar una imagen a una página web
Descripción: Agregar una imagen a una página web
Instrucciones para el estudiante: Agregar una imagen mediante la etiqueta <img> y establecer el origen de la imagen en https://udemy.programmr.com/someimage.jpg (en inglés)
Archivo para estudiantes (index.html):  
Archivo de solución: <img src="https://udemy.programmr.com/someimage.jpg"/>
Código de evaluación: // Get the first 'img' element in the HTML page
var s=document.querySelector("img");
// Check if it exists
if(s==null) {
return "You haven't created a img tag";
}
// Check if the 'img' element points to a source
else if(s.src.trim().length==0) {
return "didn't find the src attribute";
}
// Check the URL of the image’s source
else if(s.src.trim()!="https://udemy.programmr.com/someimage.jpg") {
return "src should point to https://udemy.programmr.com/someimage.jpg";
}
// Return true since there are no errors
else {
return true;
}

Coloca un elemento con un hiperenlace

Título: Coloca un elemento con un hiperenlace
Descripción: Coloca un elemento de imagen con un hiperenlace para poder hacer clic sobre él
Instrucciones para el estudiante: El código que aparece a continuación contiene una etiqueta <img>. Tienes que colocar una etiqueta <a> en la imagen para convertirla en un hiperenlace. Haz que el hiperenlace dirija a https://udemy.com
Archivo para los estudiantes (index.html): <img src="https://udemy.programmr.com/someimage.jpg"/>
Archivo de solución: <a href="https://www.udemy.com">
<img src="https://udemy.programmr.com/someimage.jpg"/>
</a>

Código de evaluación: // Get the first 'a' element in the HTML page
var s=document.querySelector("a");
// Check if it exists
if(s==null) {
return "You haven't created a link tag";
}
// Check the URL of the anchor
else if(s.href.trim()!="https://www.udemy.com/") {
return "href should point to https://www.udemy.com/";
}
// Check if the anchor element has child elements
else if(s.children.length==0) {
return "Didn't find any child element inside hyperlink";
}
// Check if the anchor element has exactly one child element
else if(s.children.length>1) {
return "Hyperlink should contain only one child element IMG";
}
// Check if the child element is an image
else if(s.children[0].tagName!="IMG") {
return "The element inside link must be an IMG";
}
// Return true since there are no errors
else {
return true;
}

Crear una lista ordenada

Título: Crear una lista ordenada
Descripción: Crear una lista ordenada con tres elementos
Instrucciones para el estudiante: Utiliza la etiqueta <ol> para crear una lista ordenada. La lista debe contener tres elementos (los elementos de la lista deben estar entre etiquetas <li>).
Archivo para los estudiantes (index.html):  
Archivo de solución: <ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
</ol>

Código de evaluación: // Get the first 'OL' element
var s=document.querySelector("ol");
// Get all 'LI' elements
var r = document.querySelectorAll("li");
// Check if it exists
if(s==null) {
return "Oops, try again. Make sure you add your ordered list using ol tags.";
}
// Check if there are 3 'LI' elements in the HTML page
else if(r.length!=3) {
return "Oops, try again. Does your ordered list have three list items?";
}
// Return true since there are no errors
else {
return true;
}

Crear una lista desordenada

Título: Crear una lista desordenada
Descripción: Crear una lista desordenada con cuatro elementos
Instrucciones para el estudiante: Crear una lista desordenada con la etiqueta <ul>. La lista debe contener cuatro elementos (los elementos de la lista deben estar entre etiquetas <li>).
Archivo para los estudiantes (index.html):  
Archivo de solución: <ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Código de evaluación: // Get the first 'UL' element
var s=document.querySelector("ul");
// Get all 'LI' elements
var r = document.querySelectorAll("li");
// Check if the 'UL' element exists
if(s===null) {
return "Oops, try again. Make sure you create your ordered list using ul tags.";
}
// Check there are 4 'LI' elements in the page
else if(r.length!=4) {
return "Oops, try again. Does your ordered list have 4 list items?";
}
// Return true since there are no errors
else {
return true;
}

Añadir un comentario HTML

Título: Añadir comentarios a una página HTML
Descripción: Añadir comentarios a una página HTML
Instrucciones para el estudiante: El código que se muestra a continuación contiene una línea “”. Tienes que convertir esta línea en un comentario HTML válido.
Archivo para los estudiantes (index.html): <!DOCTYPE html>
<html>
<head>
<title>An Exercise Page</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
Make me into a comment.
<p>But leave me visible to the user!</p>
</body>
</html>

Archivo de solución: <!DOCTYPE html>
<html>
<head>
<title>An Exercise Page</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body>
<!--Make me into a comment.-->
<p>But leave me visible to the user!</p>
</body>
</html>

Código de evaluación: // Check the text content of the 'body' element
if(document.body.textContent.trim()!="But leave me visible to the user!") {
return "Oops try again. Your html should show only 'But leave me visible to the user!' text";
}
else {
for(i=0;i<document.body.childNodes.length;i++){
// Check if the text "Make me into a comment." has
// been marked as a n HTML comment
if(document.body.childNodes[i].nodeType==8){
if(document.body.childNodes[i].textContent.trim()=="Make me into a comment.")
return true;
} else {
continue;
}
}
return "Oops, try again. didn't find any comment node"
}

Crear un encabezado vacío

Título: Crear un encabezado vacío
Descripción: Crear un encabezado con la etiqueta <H1> sin texto
Instrucciones para el estudiante: Utiliza una etiqueta <H1> para crear un encabezado. No añadas texto en el encabezado
Archivo para los estudiantes (index.html):  
Archivo de solución: <h1></h1>
Código de evaluación: // Get all'H1' elements
var h1=document.getElementsByTagName("h1");
// Check if an 'H1' element exists
if(h1.length===0) {
return "Oops! try again. make sure you have created the h1 tag";
}
// Return true since there are no errors
return true;

Crear un encabezado con texto

Título: Crear un encabezado HTML de nivel 1
Descripción: Crear un encabezado con la etiqueta <H1>
Instrucciones para el estudiante: Utiliza una etiqueta <H1> para crear un encabezado. Utiliza cualquier texto para el encabezado.
Archivo para los estudiantes (index.html):  
Archivo de solución: <h1>text</h1>
Código de evaluación: // Get all 'H1' elements in the HTML page
var h=document.getElementsByTagName("h1");
// Check if the page contains at least 1 'H1' element
if(h.length===0) {
return "Oops, try again. It looks like you haven't added any h1 tag to the page!";
}
// Check if the 'H1' element contains some text
else if(h[0].innerHTML.trim()==="") {
return "Oops, try again. It looks like there's no text between your h1 tags.";
}
// Return true since there are no errors
else {
return true;
}

Añadir un elemento de estilo

Título: Añadir un elemento de estilo a una página HTML
Descripción: Añadir un elemento <style> a una página HTML.
Instrucciones para el estudiante: Añadir un elemento de estilo en una página HTML mediante la etiqueta <style>. La etiqueta de estilo no debe tener contenido en este ejercicio.
Archivo para los estudiantes (index.html):  
Archivo de solución: <style></style>
Código de evaluación: // Get all 'style' elements in the HTML page
var styleElem=document.getElementsByTagName("style");
// Check if 'style' elements exist
if(styleElem.length==0) {
return "Oops, try again. You did not declared any style tag in your page."
}
// Return true since there are no errors
else {
return true;
}

Crear un botón seleccionable

Título: Crear un botón seleccionable
Descripción: Crear un botón seleccionable en la página HTML que registre un mensaje en la consola cuando se haga clic en él.
Instrucciones para el estudiante: Crear un botón en el cuerpo de la página HTML que se muestra en el editor a continuación. El botón no tiene que ser un hiperenlace, pero debe capturar el evento onclick y registrar un mensaje en la consola cuando se haga clic en él.
Debe aparecer el mensaje “Bienvenidos, amigos” en la consola cuando se haga clic en el botón.
Archivo para los estudiantes (index.html): <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a clickable button.</title>
</head>
<body>
<!-- Create the clickable button here -->
</body>
</html>

Archivo de solución: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to define a clickable button.</title>
</head>
<body>
<!-- Create the clickable button here -->
<button type="button" onclick="console.log('Welcome Friends')">Click Me!</button>
</body>
</html>

Código de evaluación: // Get all the buttons in the HTML page
var buttons=document.querySelectorAll("button");
// Check if at least 1 button exists
if(buttons.length===0) {
return "Oops, try again. Didn’t find any button element";
}
button=buttons[0];
// Ensure that no messages have been logged to the console
if(consoleOutput.loggedMessages.length>0) {
return "Oops, try again you should not print any message to the console before";
}
// Simulate clicking the button
button.click();
// Check if message(s) were logged to the console
if(consoleOutput.loggedMessages.length===0) {
return "You did not print any message to the console after click";
}
// Check the contents of the first logged message
if(consoleOutput.loggedMessages[0]!='Welcome Friends') {
return "Oops, try again. You should print correct message to the console after click";
}
// Return true since there are no errors
return true;

Utiliza el elemento fieldset en los formularios

Título: Utiliza un elemento fieldset para agrupar los elementos del formulario
Descripción: Utiliza un elemento fieldset para agrupar los elementos del formulario
Instrucciones para el estudiante: El código que aparece a continuación contiene un formulario que tiene dos elementos: Nombre y correo electrónico. Utiliza una etiqueta fieldset para agrupar estos elementos.
Archivo para los estudiantes (index.html): <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to groups related elements in a form</title>
</head>
<body>
<form>
Name: <input type="text" size="30" /><br /><br />
Email: <input type="text" size="30" /><br /><br />
</form>
</body>
</html>

Archivo de solución: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to groups related elements in a form</title>
</head>
<body>
<form>
<fieldset>
Name: <input type="text" size="30" /><br /><br />
Email: <input type="text" size="30" /><br /><br />
</fieldset>
</form>
</body>
</html>

Código de evaluación: // Get all 'input' elements in the HTML page
var inputs=document.querySelectorAll("input");
if(inputs.length==0) {
return "Oops, try again. Didn't find any input elements."
}
// Get the parent node of the first 'input' element
var f1=inputs[0].parentNode;
// Check the parent node is a 'fieldset' element
if(f1.tagName!="FIELDSET") {
return "Oops, try again. Did you forget to wrap elements with FIELDSET?";
}
// Check if all input elements are wrapped in the same
// 'fieldset' element
var f2=inputs[1].parentNode;
if(f1!=f2) {
return "Oops, try again. All inputs should be wrapped in single FIELDSET";
}
// Return true since there are no errors
return true;