Tema 5, Bloque 3 - HTML Flashcards
¿Cuál de las siguientes etiquetas HTML se corresponde con una palabra destacada?
- b
- strong
- i
- em
strong
¿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
Texto con voz o tono alternativo al resto
¿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
Texto que llama la atención, sin importancia destacable
¿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
Texto para nombres propios o escritura incorrecta intencionada
¿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
Texto con alguna aclaración o puntualización menor dentro de la frase
¡Cuál de estas etiquetas sirve para indicar texto con posible cambio de dirección respecto al texto del entorno?
- bdo
- bdi
- rti
- rto
bdi
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
Sirve para representar código y preserva espacios y saltos de línea tal y como se introdujeron
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
Sirve para representar código y no preserva espacios y saltos de línea tal y como se introdujeron
¿Para qué sirve la etiqueta ruby?
Para añadir anotaciones fonéticas relativas a la pronunciación de caracteres de Asia oriental
¿Para qué sirve la etiqueta data?
Añade información equivalente orientada a máquinas
¿Qué es y para qué sirve “colgroup”?
Es una etiqueta HTML para especificar el formato/opciones “gráficas” de un grupo de columnas en una tabla HTmL
Secciones de una tabla HTML vienen dadas por las etiquetas:
- th, tb, tf
- theader, tbody, tfooter
- thead, tbofy, tfooter
- thead, tbofy, tfoot
thead, tbofy, tfoot
¿Con qué etiqueta especificamos una celda dentro de un tr?
Con la etiqueta td
¿Cuáles son los atributos que permiten fusionar filas y columnas de la tabla?
rowspan y colspan
¿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
Con th dentro de un tr representando una celda de cabecera
¿Qué indica el atributo “scope”?
Especifica si una celda de cabecera lo es para la columna, fila o grupo de columnas y filas.
¿Cuáles son las etiquetas con semántica para estructurar una web HTML5?
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
Sólo hay una correcta: Puede aparecer repetidas veces
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
async
¿Qué etiqueta genera un desplegable al hacer un click, sin ser una lista de selección?
details
El título de un desplegable “details” se especifica con
- Atributo title
- Etiqueta title dentro de details
- Etiqueta summary dentro de details
- Atributo caption
Etiqueta summary dentro de details
¿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”)?
contenteditable
¿Para qué sirve el atributo hidden?
Para esconder el elemento sin dejar ni siquiera el espacio que ocuparía.
¿Qué etiqueta permite crear una zona dibujable “on the fly” via javascript o eventos?
canvas
¿Para qué sirve la etiqueta template?
Para crear contenido que no se mostrará tras la carga de la página y que se podrá mostrar usando JavaScript
¿Qué representa la etiqueta dialog?
El elemento HTML representa una caja de diálogo u otro componente interactivo, como inspector o ventana.
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
El atributo open puede tomar los valores “true” o “false”
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
Un campo de entrada ha de estar entre la etiqueta label de apertura y de cierre
¿Cómo se especifican valores concretos para el slider de un input range?
Selecciona el tipo de input para el siguiente elemento:
text
Selecciona el tipo de input para el siguiente elemento:
date
Selecciona el tipo de input para el siguiente elemento:
password
Selecciona el tipo de input para el siguiente elemento:
radio
Selecciona el tipo de input para el siguiente elemento:
tel
Selecciona el tipo de input para el siguiente elemento:
range
Selecciona el tipo de input para el siguiente elemento:
Selecciona el tipo de input para el siguiente elemento:
checkbox
Selecciona el tipo de input para el siguiente elemento:
number
Selecciona el tipo de input para el siguiente elemento:
color
Selecciona el tipo de input para el siguiente elemento:
submit
Selecciona el tipo de input para el siguiente elemento:
reset
Selecciona el tipo de input para el siguiente elemento:
textarea
¿cómo construirías este elemento?
¿cómo construirías este elemento?
¿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
La cuarta: option no es un tipi de input
¿Cómo crearía esta lista de selección?
¿Cuál es el efecto de especificar un datalist mediate list=”datalist_id” en un input de tipo text?
Nos aparecen sugerencias extraídas de entre la lista debajo del cuadro de texto a medida que introducimos texto
¿Cuál es la diferencia entre un datalist y un select?
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.
¿Cuáles son los valores por defecto de los atributos min y max cuando no se especifican en un elemento meter y un progress?
0 y 1
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
Todos los de arriba
¿Para qué sirve el atributo global accesskey y cómo funciona?
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).
¿Para qué sirve un input type=”image”?
Es una forma alternativa de definir un botón de submit usando una imagen
¿Para qué sirve el atributo global tabindex?
Contiene un valor numerico que indica el orden de foco de los distintos objetos de la pagina (con el tabulador)
¿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”)
formctype
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
Indica si debe partir el texto en lugar de poner una barra deslizante, y puede tomar los valores “true” o “false”
¿Cuál es la diferencia entre las etiquetas img y picture?
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
¿Cómo funcionan los atributos srcset y sizes de img?
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”
Dentro de la etiqueta picture, ¿cómo se especifican las imágenes usando media queries?
¿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
Mediante svg y elementos xml dentro de ella
¿Qué sucede al especificar el atributo sandbox sin valor en un iframe?
Todas las características se deshabilitan por defecto
¿Cómo se podría restringir el uso de micrófono y servicios de geolocalización dentro de un iframe?
Con allow=”microphone ‘none’ ; gelocalization ‘none’”
¿Cómo se podría permitir el envío de formularios y ejecución de scripts dentro de un iframe?
Con el atributo sandbox=”allow-forms allow-scripts”
´Como se puede proporcionar código in-line a un iframe?
Mediante el atributo srcdoc, ej: srcdoc=”
Hola
”
¿Con qué etiqueta de las siguientes no podemos incrustar un recurso externo?
- embed
- object
- video
- map
map - sirve para definir un mapa de zonas en una imagen y poner por ejemplo enlaces diferentes al picar en cada zona
Nombra 6 atributos de la etiqueta vídeo y su funcionalidad
- poster=url (imagen de portada)
- autoplay (comienza a reproducir el video inmediatamente). Podemos empezar en un segundo concreto con src=”video.mp4#t=15
- loop (una vez acaba vuelve a reproducirlo)
- muted (sin sonido)
- controls (muestra controles de reproduccion)
- preload (con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video.
¿Cómo podemos añadir una pista de subtítulos ee un fichero aparte trabajando con la etiqueta video?
Con track kind=”subtitles” label=”Subtítulos en español” src=”subs-es.vtt” srclang=”es”
¿Para qué sirve la etiqueta figure?
Esta etiqueta especifica material auto-contenido, como un exto, fotos,, etc que se puede anotar desde dentro con la etiqueta figcaption.
¿Cuál es la diferencia entre las etiquetas cite, quote y q?
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
¿Cómo se crea una lista de definición?
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.
¿Qué representa la etiqueta main y cuántas puede haber en el documento HTML?
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.
¿Con qué etiqueta se especifica la pronunciación de los caracteres asiáticos dentro de una etiqueta ruby?
Con rt y rp
¿Cuál es el motor de renderizado de Edge, Chrome y Opera?
Blink
Nombra cuatro frameworks front-end
Angular, Ember.js,, VUE.js y ReactJS
¿Cómo se llama el método para hacer peticiones AJAX?
XhtmlHttpRequest
¿Cómo se pueden aplicar atributos persoanlizados en HTML5?
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.
Nombra una librería que permita detectar las características de la API de HTML5 que soporta nuestro navegador
MODERNIZR
¿Cuál es el motor de renderizado de Firefox?
Gecko/Quantum
¿Cuál es el motor de renderizado de Safari?
Webkit
¿Qué son los polyfills?
Son librerías de javascript que nos permiten emular características de la API de HTML5 no disponibles en nuestro navegador
