Introducción a la Estructura y Funcionalidad de Páginas Web
A continuación, se presentan una serie de preguntas y respuestas que cubren los fundamentos del desarrollo web, incluyendo la estructura de documentos HTML, el uso de etiquetas, la interacción con navegadores y la introducción a JavaScript para dibujo y animación.
Sección 1: Fundamentos de HTML y Navegadores
¿Qué extensión tienen los ficheros web?
.html
Si abrimos un fichero web con el navegador y sin cerrarlo lo abrimos con un editor, ¿nos da algún error?
No. De hecho, en este modo podremos modificar la página web al mismo tiempo que la vemos.
Si ahora lo modificamos en el editor, ¿el navegador mostrará los cambios directamente o hay que hacer algo antes?
Para que se muestren los cambios en el navegador, deben ocurrir dos cosas:
- Guardar los cambios realizados en el fichero HTML que estamos modificando y, posteriormente, recargar la página web para que se apliquen los cambios.
- Verificar si en la caché del navegador se ha guardado la configuración antigua y no se actualiza a la nueva. En este caso, se debe borrar la caché o usar otro navegador.
Verdadero o Falso: Afirmaciones sobre Páginas Web
Antepón una ‘V’ o una ‘F’ a las siguientes afirmaciones según sean Verdaderas o Falsas:
- F Se puede hacer una página web con un editor como Writer.
- F Las páginas web suelen tener la extensión .html o .htm.
- V La etiqueta
<HTML>, con la que empieza el código HTML de las páginas web, se puede escribir en mayúsculas o en minúsculas. - V Las páginas web terminan con la etiqueta
</html>. - V Las páginas web pueden tener fotos y enlaces a otras páginas.
- V Pulsando
Ctrl+Upodemos ver el código HTML de cualquier página web. - V Si pulsamos dos veces sobre un fichero .html, este se abrirá con un navegador.
- V Si pulsamos con el botón derecho sobre un archivo .html y luego en «abrir con» un editor, podremos editar dicho archivo.
- F La etiqueta
<span style="background: #ffff00">Antonio</span>escribe en la página web «Antonio» con fondo amarillo. - V La etiqueta
<span style="background: pink">Antonio</span>escribe en la página web «Antonio» con fondo rosa.
Sección 2: Introducción a JavaScript (LC2) – Dibujo y Animación
¿Con qué signo de puntuación terminan todas las funciones o comandos?
;
¿Cuántos argumentos o parámetros tiene el comando o función ellipse(200,200,300,300);?
Cuatro.
¿Para qué sirve cada uno de los parámetros de la función ellipse?
Los parámetros de la función ellipse(x, y, ancho, alto); definen la posición (x, y) y las dimensiones (ancho, alto) de la elipse.
¿Para qué sirve la función background();?
Para modificar el color de fondo del área de dibujo.
¿Para qué sirve la función fill();?
Se usa para activar y definir el color de relleno de las formas.
¿Para qué sirve la función noFill();?
Se usa para desactivar el relleno de las formas.
¿Para qué sirve la función strokeWeight();?
Para definir el grosor de las líneas y contornos.
¿Para qué sirve la función stroke();?
Para activar y definir el color del contorno.
¿Para qué sirve la función noStroke();?
Para desactivar el color del contorno.
Emparejamiento de Funciones de Dibujo
Une con flechas:
ellipse();-> elipsesquare();-> cuadradorect();-> rectángulocircle();-> círculoline();-> línea
Emparejamiento de Funciones y sus Propiedades
Une con flechas:
background();-> color de fondofill();-> color de rellenonoFill();-> desactiva el color de rellenostrokeWeight();-> grosor de las líneas y contornosstroke();-> color de contornonoStroke();-> desactivar color de contorno
Sección 3: Conceptos Clave de HTML y CSS (LC3 y LC4)
¿Qué etiqueta pone el texto en negrita?
La etiqueta <strong>.
¿Qué significan las siglas HTML?
Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto).
¿Qué significan las siglas CSS?
Cascading Style Sheets (Hojas de Estilo en Cascada).
¿Qué etiqueta ponemos en la primera línea de una página web para decirle al navegador que el lenguaje que está leyendo es HTML?
La etiqueta <!DOCTYPE html>.
¿Para qué sirve la etiqueta <!DOCTYPE html>?
Para que la página web sepa que el lenguaje que está leyendo es HTML5.
¿Qué significa que las etiquetas vienen en pares, una de inicio y una de cierre?
Significa que siempre hay dos etiquetas: una para abrir el comando y otra para cerrarlo. Por ejemplo: <html> abre la web y </html> la cierra.
¿Qué significa que las etiquetas se pueden anidar? Pon un ejemplo.
Significa que se pueden colocar unas etiquetas dentro de otras para mantener el orden y evitar errores en la página web. Ejemplo: <b></b> se colocan juntas para que no se produzcan errores y esté más ordenado.
¿Para qué sirve la etiqueta <title>? ¿Dónde va? Pon un ejemplo.
La etiqueta <title> sirve para destacar una frase y que aparezca como título en la pestaña o ventana del navegador. Generalmente se coloca dentro de la etiqueta <head>.
Ejemplo: <head><title>Mi Página Web</title></head>
¿Para qué sirve la etiqueta <body>? ¿Dónde va?
Muestra el cuerpo del contenido de la página web y generalmente se coloca después de la etiqueta <head>.
¿Para qué sirve la etiqueta <p>? ¿Dónde va? Pon un ejemplo.
Se usa para definir un párrafo. Generalmente se coloca donde se quiera aplicar un párrafo dentro del <body>.
Ejemplo: <body><p>Este es un párrafo de ejemplo.</p></body>
¿Qué son los encabezados? ¿Cuántos tamaños de encabezados existen? ¿Cuáles son? Pon un ejemplo.
Los encabezados se usan para añadir títulos con diferente nivel de importancia y tamaño. Existen seis tamaños, desde <h1> (el más grande) hasta <h6> (el más pequeño).
Ejemplo: <h1>Texto más grande</h1>
¿Qué etiqueta se usa para poner una imagen en una página web? Pon un ejemplo.
Se usa la etiqueta <img>. Ejemplo: <img src="ruta/a/la/imagen.jpg" alt="Descripción de la imagen">
¿Qué etiqueta se usa para poner un hipervínculo? Pon un ejemplo.
Se usa la etiqueta <a>. Sirve para redirigir a otro lugar, como un enlace.
Ejemplo: <a href="#primero">Ir a la sección primero</a>
Verdadero o Falso: Repaso de HTML y CSS
Antepón una ‘V’ o una ‘F’ a las siguientes afirmaciones según sean Verdaderas o Falsas:
- Con la etiqueta
<strong>el texto se pone en negrita. - V Las siglas CSS significan “Hojas de Estilo en Cascada”.
- V En la primera línea de una página web normalmente podemos encontrar
<!DOCTYPE html>. - F La etiqueta
<h1>sirve para poner el encabezado más pequeño que hay. - V La etiqueta
<p>sirve para poner párrafos en el cuerpo de la página web. - F Con
<img src="http://bit.ly/PK1euu">se coloca la imagen del enlace en la página web. - F Con
<a href="https://www.iesgbrenan.org"><img src="http://bit.ly/PK1euu"></a>colocamos una imagen en la página web y hacemos que esta imagen sea un hipervínculo a la página web del instituto. - V Con
<a href="https://www.iesgbrenan.org"><img src="http://bit.ly/PK1euu"></a>colocamos una imagen en la página web y hacemos que esta imagen sea un hipervínculo a la página web del instituto.
Sección 4: Etiquetas Adicionales y Estructura (LC5)
¿Para qué sirve la etiqueta <br>?
Produce un salto de línea de texto.
¿Para qué sirve la etiqueta <em>?
Se usa para darle énfasis al texto que se encuentre dentro de esta etiqueta.
Sección 5: Repaso General de Estructura HTML (LC8)
Antepón una ‘V’ o una ‘F’ a las siguientes afirmaciones según sean Verdaderas o Falsas:
- F Las etiquetas de HTML se encierran entre los llamados paréntesis angulares que son los signos de mayor y menor (< y >).
- V Muchas de las etiquetas de HTML se usan por pares: una de apertura y otra de cierre, que es igual que la de apertura pero con una barra ‘/’ justo después de ‘<‘ (p.ej.
<html>y</html>). - F El título de la página web se coloca con la etiqueta
<title>dentro de<body>y aparece en la parte superior de la ventana del navegador. - V En HTML los párrafos se colocan entre las etiquetas
<p>y</p>. - V Los navegadores ignoran los saltos de línea y los espacios escritos en HTML cuando hay más de uno consecutivo, representándolo como si solo hubiese un espacio.
- V Las etiquetas de encabezado (
<h1>,<h2>…<h6>) sirven para poner títulos a los párrafos y deben ir antes de los mismos y, por tanto, fuera de las etiquetas de párrafo (<p>). - V Algunas etiquetas (como
<img>o<a>) tienen atributos o parámetros. - V Los atributos o parámetros de las etiquetas tienen la siguiente estructura:
nombre="valor", por ejemplo:src="https://www.kasandobox.org/images/rabbit.png".
