Curso de introducción al desarrollo web: HTML y CSS (2/2)

 Cómo se define la presentación de una página web

Aprende a definir la presentación de una página web con HTML y CSS, aprendiendo qué son selectores básicos y cómo se usan

Ángel trabaja desarrollando Webs en HTML. Hasta ahora solo trabajaba en la definición de las estructuras y contenidos de las páginas web, pero para avanzar en su carrera, quiere complementar su formación aprendiendo a utilizar la tecnología CSS.

Ayuda a Ángel indicándole cuáles son los elementos que componen una regla de CSS y en qué orden se escriben. Haz clic con el ratón y mantenlo pulsado para arrastrar los elementos hasta colocarlos en el orden correcto.

• Selector
• Propiedad
• Separador :
• Valor

Claudia está desarrollando su propia página web para su tienda de venta de electrodomésticos siguiendo un manual de HTML y CSS. Su amigo Andrés, que la está ayudando, le ha comentado que hay varias formas de aplicar reglas CSS en HTML, pero que tiene que intentar que el acoplamiento sea el mínimo.

Selecciona, de entre las siguientes opciones, la que Claudia no debería utilizar a la hora de aplicar CSS a su Web HTML.

• La etiqueta <style>.
• El atributo style.
• La etiqueta <link>
• 
  

Julia está impartiendo un curso sobre los usos y herramientas de HTML. Los nuevos usos de las etiquetas han permitido reducir el acoplamiento que existe entre HTML y CSS, además de facilitar herramientas de cambio para los contenidos de las páginas web.

Aparte de reducir el acoplamiento que existe entre HTML y CSS, teniendo en cuenta la etiqueta style (que es la que marca el estilo de la página web): ¿qué otras cosas que pueden ayudarnos crees nos dirá Julia sobre los nuevos usos a la hora de diseñar nuestra página web?

• 
  Cambiar el color de letra.
• Cambiar el tamaño de letra.
• Cambiar el color de fondo.
• Cambiar de idioma.

Guillermo trabaja en el departamento de atención al cliente de una gran empresa de software. En los últimos meses ha recibido un gran volumen de preguntas sobre el uso de HTML y cuál de las tres etiquetas es más recomendable utilizar para reducir el acoplamiento entre HTML y CSS, por lo que ha decidido escribir la respuesta en Twitter para resolver todas las dudas que se planteen.

Indica cuál es el mensaje que va a poner Guillermo.

• Con la etiqueta “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.
• Con la etiqueta “link” reducimos al máximo el acoplamiento que existe entre HTML y CSS.
• Con el atributo “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

Comprueba tus conocimientos

David acaba de empezar a trabajar en una empresa de creación y diseño de páginas web. Aún está aprendiendo cómo utilizar las herramientas que ofrece HTML. Ahora mismo está aprendiendo a utilizar los selectores básicos fundamentales.

Ayuda a David a identificar cuál es la finalidad de cada uno de estos selectores.

Pregunta 1 de 4

Hace referencia a todos los elementos de un mismo tipo.

• .clase
• Identificador
• CSS
• tipo

Pregunta 2 de 4

Atributo global común a todas las etiquetas HTML.

• .clase
• Identificador
• CSS
• tipo

Pregunta 3 de 4

No es un selector básico.

• .clase
• Identificador
• CSS
• tipo

Pregunta 4 de 4

Se aplica a aquellas etiquetas cuyo atributo ID coincida con el texto tras #.

• .clase
• Identificador
• CSS
• tipo
• 
  

Patricia quiere utilizar de forma independiente el pseudo-selector de CSS :link en todos los enlaces de su página. No obstante, Patricia quiere saber más sobre las características de este selector y tiene las siguientes dudas.
Ayúdale a resolverlas seleccionando la opción correcta.

Pregunta 1 de 4
Este selector no puede utilizarse solo. 

• Verdadero
• Falso

Pregunta 2 de 4
Suele ir acompañado del selector a de la forma a :link.

• Verdadero
• Falso

Pregunta 3 de 4
Nunca se utiliza acompañado de clases e identificadores.

• Verdadero
• Falso

Pregunta 4 de 4
Puede usarse en anidamientos y con selectores básicos.

• Verdadero
• Falso

Marta contrató un servicio de diseño web hace un par de años. Ahora que se ha formado y puede hacerlo ella misma quiere cambiar su Web a colores más actuales. Está pensando en su público. Quiere hacerla más atractiva pero sin perder su esencia ya que podría ser contraproducente realizar un cambio radical y que perder su identidad. Está analizando cómo realizar estos cambios en CSS.

Indica, de las siguientes afirmaciones cuáles son verdaderas a la hora de realizar estos cambios.

Pregunta 1 de 4

Los espacios de color pueden variar según el dispositivo.

• Verdadero
• Falso

Pregunta 2 de 4

Se pueden representar en caracteres decimal y hexadecimal a la vez.

• Verdadero
• Falso

Pregunta 3 de 4

Debes utilizar cuantos más colores, mejor.

• Verdadero
• Falso

Pregunta 4 de 4

En CSS los colores se representan mediante "color name".

• Verdadero
• Falso

Jaime está trabajando en un proyecto web de notable envergadura. Quiere evitar que con el tiempo se acumulen gran cantidad de formatos específicos para diversos documentos. Esto puede ser un problema a futuro ya que, al hacer modificaciones al código, se le pueden escapar detalles, por lo que va a utilizar selectores avanzados en las anotaciones de estilo.
¿Cuáles de las siguientes opciones atienden a este criterio?
 

• (>)
• (-)
• (+)
• (<)
• ([ ])
• (~)

Antonio y Pablo están hablando sobre las funcionalidades de CSS3. Antonio dice que con las “pseudo clases” de CSS3 se facilita el aplicar estilos a los elementos a través de los selectores con la misma condición se facilita.

Identifica del siguiente listado cuál o cuáles de las “pseudo clases” se han mantenido de la versión CSS2.

• first-child
• last-child
• nth-child
• nth-last-child

Pregunta 1 de 4

Las actualizaciones de CSS se llaman: 

• Versiones.
• Niveles.
• Ediciones.
• Las anteriores respuestas no son correctas.

Pregunta 2 de 4

En CSS, ¿qué pseudo clase se emplea para definir una propiedad cuando el cursor del ratón se sitúa sobre un elemento? 

• :active.
• :hover.
• :over.
• :on.

Pregunta 3 de 4

En CSS, para definir el color del borde de un elemento se emplea la propiedad: 

• background-color.
• border-color.
• margin-color.
• padding-color.

Pregunta 4 de 4

En CSS, la expresión ".elemento" es un selector. 

• De clase.
• De elemento.
• De identificador.
• Las anteriores respuestas no son correctas.