Tema 5, Bloque 3 - HTML Flashcards

1
Q

¿Cuál de las siguientes etiquetas HTML se corresponde con una palabra destacada?

  • b
  • strong
  • i
  • em
A

strong

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿Cuál es la semántica de la etiqueta i?

  • Texto en cursiva sin significado especial
  • Texto resaltado respecto a su contexto, sin importancia especial
  • Texto enfatizado con respecto al contexto
  • Texto con voz o tono alternativo al resto
A

Texto con voz o tono alternativo al resto

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

¿Cuál es la semántica de la etiqueta b?

  • Fragmento de texto enfatizado con respecto a la frase que lo contiene
  • Texto que llama la atención, sin importancia destacable
  • Texto importante o con palabras clave
  • Fragmento de texto resaltado
A

Texto que llama la atención, sin importancia destacable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

¿Cuál es la semántica de la etiqueta u?

  • Texto para nombres propios o escritura incorrecta intencionada
  • Texto con importancia dentro del contexto
  • Texto enfatizado dentro del contexto
  • Texto resaltado
A

Texto para nombres propios o escritura incorrecta intencionada

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿En cuál de estas situaciones se podría usar apropiadamente la etiqueta small?

  • Texto con alguna aclaración o puntualización menor dentro de la frase
  • Texto con menos importancia dentro la frase
  • Definición de término entre paréntesis
  • Inserción de contenido de otra fuente
A

Texto con alguna aclaración o puntualización menor dentro de la frase

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

¡Cuál de estas etiquetas sirve para indicar texto con posible cambio de dirección respecto al texto del entorno?

  • bdo
  • bdi
  • rti
  • rto
A

bdi

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Respecto a la etiqueta pre…

  • Sirve para representar código y no preserva espacios y saltos de línea tal y como se introdujeron
  • Pone el texto en cursiva
  • Sirve para representar código y preserva espacios y saltos de línea tal y como se introdujeron
  • Representa la salida de un programa
A

Sirve para representar código y preserva espacios y saltos de línea tal y como se introdujeron

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Respecto a la etiqueta code…

  • Sirve para representar código y no preserva espacios y saltos de línea tal y como se introdujeron
  • Pone el texto en cursiva
  • Sirve para representar código y preserva espacios y saltos de línea tal y como se introdujeron
  • Representa la salida de un programa
A

Sirve para representar código y no preserva espacios y saltos de línea tal y como se introdujeron

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

¿Para qué sirve la etiqueta ruby?

A

Para añadir anotaciones fonéticas relativas a la pronunciación de caracteres de Asia oriental

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

¿Para qué sirve la etiqueta data?

A

Añade información equivalente orientada a máquinas

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Qué es y para qué sirve “colgroup”?

A

Es una etiqueta HTML para especificar el formato/opciones “gráficas” de un grupo de columnas en una tabla HTmL

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Secciones de una tabla HTML vienen dadas por las etiquetas:

  • th, tb, tf
  • theader, tbody, tfooter
  • thead, tbofy, tfooter
  • thead, tbofy, tfoot
A

thead, tbofy, tfoot

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

¿Con qué etiqueta especificamos una celda dentro de un tr?

A

Con la etiqueta td

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

¿Cuáles son los atributos que permiten fusionar filas y columnas de la tabla?

A

rowspan y colspan

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

¿Cómo se especifican las celdas de cabecera?

  • Con td dentro de un th representando una fila de cabecera
  • Con thead dentro de un tr representando una celda de cabecera
  • Con th dentro de un tr representando una celda de cabecera
  • Con td dentro de un tr representando una celda de cabecera
A

Con th dentro de un tr representando una celda de cabecera

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

¿Qué indica el atributo “scope”?

A

Especifica si una celda de cabecera lo es para la columna, fila o grupo de columnas y filas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

¿Cuáles son las etiquetas con semántica para estructurar una web HTML5?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Respecto a la etiqueta header, selecciona la(s) correcta(s):

  • Sólo debe aparecer una vez en la página
  • Puede aparecer repetidas veces
  • Sólo puede aparecer por encima de una etiqueta article
  • header es el equivalente a h1,,h2,etc en HTML4
A

Sólo hay una correcta: Puede aparecer repetidas veces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

La caraga carga de un script sin bloquear la de la página se especifica dentro de la etiqueta script con el atributo…

  • no-defer
  • async
  • onload
  • sync
A

async

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

¿Qué etiqueta genera un desplegable al hacer un click, sin ser una lista de selección?

A

details

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

El título de un desplegable “details” se especifica con

  • Atributo title
  • Etiqueta title dentro de details
  • Etiqueta summary dentro de details
  • Atributo caption
A

Etiqueta summary dentro de details

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

¿Qué atributo permite editar directamente en el browser el contenido de, por ejemplo, un p, y toma los valores “true”, “false” o “” (equivalente a “true”)?

A

contenteditable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

¿Para qué sirve el atributo hidden?

A

Para esconder el elemento sin dejar ni siquiera el espacio que ocuparía.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

¿Qué etiqueta permite crear una zona dibujable “on the fly” via javascript o eventos?

A

canvas

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

¿Para qué sirve la etiqueta template?

A

Para crear contenido que no se mostrará tras la carga de la página y que se podrá mostrar usando JavaScript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

¿Qué representa la etiqueta dialog?

A

El elemento HTML representa una caja de diálogo u otro componente interactivo, como inspector o ventana.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Con respecto a la etiqueta dialog, selecciona la incorrecta:

  • El atributo open indica que el diálogo está activo y disponible para interactuar.
  • Cuando el atributo open no está asignado, no debe mostrarse al usuario.
  • El atributo open puede tomar los valores “true” o “false”
  • La etiqueta puede usarse para encerrar un formulario
A

El atributo open puede tomar los valores “true” o “false”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Con respecto a la etiqueta label, selecciona la incorrectas

  • Lectores de pantalla leerán en alto la etiqueta cuando se activa el focus sobre el elemento
  • Al hacer click sobre ella, se activará el elemento correspondiente
  • Hace referencia mediante for=”id_element” a un elemento concreto
  • Un campo de entrada ha de estar entre la etiqueta label de apertura y de cierre
A

Un campo de entrada ha de estar entre la etiqueta label de apertura y de cierre

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

¿Cómo se especifican valores concretos para el slider de un input range?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Selecciona el tipo de input para el siguiente elemento:

A

text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

Selecciona el tipo de input para el siguiente elemento:

A

date

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Selecciona el tipo de input para el siguiente elemento:

A

password

33
Q

Selecciona el tipo de input para el siguiente elemento:

A

radio

34
Q

Selecciona el tipo de input para el siguiente elemento:

A

tel

35
Q

Selecciona el tipo de input para el siguiente elemento:

A

range

36
Q

Selecciona el tipo de input para el siguiente elemento:

A

email

37
Q

Selecciona el tipo de input para el siguiente elemento:

A

checkbox

38
Q

Selecciona el tipo de input para el siguiente elemento:

A

number

39
Q

Selecciona el tipo de input para el siguiente elemento:

A

color

40
Q

Selecciona el tipo de input para el siguiente elemento:

A

submit

41
Q

Selecciona el tipo de input para el siguiente elemento:

A

reset

42
Q

Selecciona el tipo de input para el siguiente elemento:

A

textarea

43
Q

¿cómo construirías este elemento?

A
44
Q

¿cómo construirías este elemento?

A
45
Q

¿Cuál de los siguientes incluye un tipo de input inexistente en HTML5?

  • date, time, tel, hidden, reset, image, search
  • month, time, tel, hidden, reset, submit
  • datetime-local, file, week, month, url
  • number, password, image, option
A

La cuarta: option no es un tipi de input

46
Q

¿Cómo crearía esta lista de selección?

A
47
Q

¿Cuál es el efecto de especificar un datalist mediate list=”datalist_id” en un input de tipo text?

A

Nos aparecen sugerencias extraídas de entre la lista debajo del cuadro de texto a medida que introducimos texto

48
Q

¿Cuál es la diferencia entre un datalist y un select?

A

El primero sólo es para especificar sugerencias y no aparece en la página renderizada, mientras que en el primero aparece en la página y tenemos que elegir entre las opciones.

49
Q

¿Cuáles son los valores por defecto de los atributos min y max cuando no se especifican en un elemento meter y un progress?

A

0 y 1

50
Q

Selecciona la respuesta correcta. Son atributos globales de los input:

  • form=id (es nuevo de HTML5)
  • autofocus
  • readonly
  • maxlength/minlength=nº caracteres
  • required (obligatorio)
  • autocomplete=”on”
  • pattern=expresión
  • todos los de arriba
A

Todos los de arriba

51
Q

¿Para qué sirve el atributo global accesskey y cómo funciona?

A

provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios. La combinación para activar el accesskey depende del navegador (ver adjunto).

52
Q

¿Para qué sirve un input type=”image”?

A

Es una forma alternativa de definir un botón de submit usando una imagen

53
Q

¿Para qué sirve el atributo global tabindex?

A

Contiene un valor numerico que indica el orden de foco de los distintos objetos de la pagina (con el tabulador)

54
Q

¿Cuál de los siguientes no es una opción a añadir al submit en HTML5?

  • formaction=”url”
  • formnovalidate (enviar sin validar)
  • formmethod (“get/post/dialog”)
  • formtarget=”_blank”
  • formenctype (“text/plain”, “application/x-www-form-urlencoded” (default), “multipart/form-data”)
  • formencoding (“text/plain”, “application/x-www-form-urlencoded” (default), “multipart/form-data”)
A

formctype

55
Q

Seleccione la respuesta incorrecta con respecto al atributo wrap de un textarea:

  • Indica si debe partir el texto en lugar de poner una barra deslizante, y puede tomar los valores “true” o “false”
  • Puede ir acompañado de los atributos ncols y nrows
  • El valor “soft” es por defecto e indica que el textarea no se wrapea al enviar el formulario
  • Se usa para especificar si el texto contiene nuevas líneas cuando se envía el formulario, en cuyo caso se encesita especificar simultáneamente el valor ncols
A

Indica si debe partir el texto en lugar de poner una barra deslizante, y puede tomar los valores “true” o “false”

56
Q

¿Cuál es la diferencia entre las etiquetas img y picture?

A

picture se puede usar para especificar otra imagen/tamaño de imagen si el tamaño de la visualización cambia una vez cargada la página. Además, se puede usar para especificar imágenes en diferent4es formatos para que el navegador cargue el formato que entienda

57
Q

¿Cómo funcionan los atributos srcset y sizes de img?

A

srcset especifica un ratio en píxeles (con una x al final) o bien la acnhura de un conjunto de imágenes (con w al final), de tal forma que el navegador selecciona la óptima: srcset=”img1 px, img2 px, img3 px”.

Con sizes se puede especificar cuál debería ser el tamaño de la imagen usando una media query, ,ej: sizes=”(min-width: 900px) 1000px, (max-width: 900px) and (min-width: 400px) 50em”

58
Q

Dentro de la etiqueta picture, ¿cómo se especifican las imágenes usando media queries?

A
59
Q

¿Cómo se pueden crear gráficos vectoriales?

  • Mediante la etiqueta canvas y javascript
  • Mediante la etiqueta svg y javascript
  • Mediante svg y elementos xml dentro de ella
  • Mediante svg con varios atributos
A

Mediante svg y elementos xml dentro de ella

60
Q

¿Qué sucede al especificar el atributo sandbox sin valor en un iframe?

A

Todas las características se deshabilitan por defecto

61
Q

¿Cómo se podría restringir el uso de micrófono y servicios de geolocalización dentro de un iframe?

A

Con allow=”microphone ‘none’ ; gelocalization ‘none’”

62
Q

¿Cómo se podría permitir el envío de formularios y ejecución de scripts dentro de un iframe?

A

Con el atributo sandbox=”allow-forms allow-scripts”

63
Q

´Como se puede proporcionar código in-line a un iframe?

A

Mediante el atributo srcdoc, ej: srcdoc=”

Hola

64
Q

¿Con qué etiqueta de las siguientes no podemos incrustar un recurso externo?

  • embed
  • object
  • video
  • map
A

map - sirve para definir un mapa de zonas en una imagen y poner por ejemplo enlaces diferentes al picar en cada zona

65
Q

Nombra 6 atributos de la etiqueta vídeo y su funcionalidad

A
  1. poster=url (imagen de portada)
  2. autoplay (comienza a reproducir el video inmediatamente). Podemos empezar en un segundo concreto con src=”video.mp4#t=15
  3. loop (una vez acaba vuelve a reproducirlo)
  4. muted (sin sonido)
  5. controls (muestra controles de reproduccion)
  6. preload (con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video.
66
Q

¿Cómo podemos añadir una pista de subtítulos ee un fichero aparte trabajando con la etiqueta video?

A

Con track kind=”subtitles” label=”Subtítulos en español” src=”subs-es.vtt” srclang=”es”

67
Q

¿Para qué sirve la etiqueta figure?

A

Esta etiqueta especifica material auto-contenido, como un exto, fotos,, etc que se puede anotar desde dentro con la etiqueta figcaption.

68
Q

¿Cuál es la diferencia entre las etiquetas cite, quote y q?

A

cite muestra la referencia de algo (autor, obra, url, …). q es para un texto in-line (i.e. cita corta) citado de otra fuente, mientras que blockqoute es para un bloque de texto citado (serían anáologos a span y div, respectivamente). A ambos se les puede especificar la fuente con el atributo cite

69
Q

¿Cómo se crea una lista de definición?

A

La etiqueta dl cierra y abre la lista. Los términos a definir se añaden con dt y la definición se escribe dentro de un dd.

70
Q

¿Qué representa la etiqueta main y cuántas puede haber en el documento HTML?

A

Representa el contenido principila de la página; sólo puede haber 1, o en su caso las demás tiene que tener el atributo hidden.

71
Q

¿Con qué etiqueta se especifica la pronunciación de los caracteres asiáticos dentro de una etiqueta ruby?

A

Con rt y rp

72
Q

¿Cuál es el motor de renderizado de Edge, Chrome y Opera?

A

Blink

73
Q

Nombra cuatro frameworks front-end

A

Angular, Ember.js,, VUE.js y ReactJS

74
Q

¿Cómo se llama el método para hacer peticiones AJAX?

A

XhtmlHttpRequest

75
Q

¿Cómo se pueden aplicar atributos persoanlizados en HTML5?

A

Mediante atributos data-* (ej. data-codigo) → objeto.dataset.codigo o mediante las semánticas definidas en schema.org, ejemplo itemscope itemtype=”schema.org/Person”

En estas últimas, definimos la propiedad con itemprop=”image” o lo que sea.

76
Q

Nombra una librería que permita detectar las características de la API de HTML5 que soporta nuestro navegador

A

MODERNIZR

77
Q

¿Cuál es el motor de renderizado de Firefox?

A

Gecko/Quantum

78
Q

¿Cuál es el motor de renderizado de Safari?

A

Webkit

79
Q

¿Qué son los polyfills?

A

Son librerías de javascript que nos permiten emular características de la API de HTML5 no disponibles en nuestro navegador