Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Bloque2 > HTML y CSS > Flashcards

HTML y CSS Flashcards

1
Q

¿Que puerto usa Mysql?

A

3306

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

¿Que hace el sniffer de red?

A

Captura el trafico de la red

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

¿ Que atributo de HTML5 se encarga de identificar un elemento?

A

id. Tiene que ser unico

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

¿Que es IANA?

A

Internet asigned numbers authority. Supervisa la asignacion global de direcciones IP.

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

¿Que es la ICANN?

A

Corporacion de internet para la asignacion de nombres y números

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

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

A

Blink

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

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

A

Blink

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

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

A

Quantum

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

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

A

Blink

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

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

A

Webkit

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

¿Qué es Chromium?

A

base de código abierto para crear un navegador web

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

¿Qué frameworks JS de desarrollo web modelo vista modelo de vista (MVVM) conoces?

A

Angular, React, Vue.js, Ember.JS

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

¿Qué es XmlHttpRequest ?

A

es una interface empleada para realizar peticiones HTTP y HTTPS a servidores web

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

¿Qué son librerías/bibliotecas JS?

A

jquery, dojo, yui, EXTJS, Prototype y Mootools

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

¿Cómo trabaja AJAX?

A

En segundo plano y asíncrona

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

¿Cuáles son algunos preprocesadores de CSS?

A

LESS, SASS y STYLUS

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

Lenguajes de alto nivel que usa JS

A

Typescript, Coffeescript, ES6

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

Herramientas de gestores de dependencias

A

Bower, Yarn, npm

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

Herramientas de automatización de tareas

A

Gulp y Grunt

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

Herramientas de plantillas de proyecto

A

yeoman

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

Inicio de pagina de HTML5

A

<!DOCTYPE html>

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

Etiquetas de estructura semántica en HTML5

A

<header> <nav> <section> <article> <asider> <footer>
</footer></asider></article></section></nav></header>

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

¿Para que se usa la etiqueta <main>?

A

para añadir contenido principal

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

Definición de etiqueta <section>

A

agrupación del contenido del que trata la pagina

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

Definición de etiqueta <article>

A

Contenedor de bloques de contenido que se consideran independientes del sitio web y pueden ser vistos, reutilizados y distribuidos por separado

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

Definición de <asider></asider>

A

información tangencial que tenga que ver con la información principal.

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

Definición de <figure></figure>

A

agrupar y etiquetar el contenido multimedia

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

Definición de <b></b>

A

Trozo de texto para recalcar atención sobre él, con fines utilitarios

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

Definición de etiqueta <i></i>

A

fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual (cursiva resaltado visual)

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

Definición de etiqueta <strong></strong>

A

fragmento de texto importante

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

Definición de etiqueta de HTML4 <Div>

A

etiqueta genérica de bloque

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

Definición de etiqueta de HTML4 <span></span>

A

Contenedor generico en linea

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

Definicion de etiqueta de HTML4 <pre>

A

conservar el formato

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

Definición de etiqueta de HTML4 <table>

A

Para hacer una tabla

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

Definición de etiqueta de HTML4 <blockquote>

A

Añadir citas

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

Definición de etiqueta de HTML4 <ul>

A

para añadir listas sin ordenar

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

Definición de etiqueta de HTML4 <ol>

A

Para añadir listas ordenadas

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

Definición de etiqueta de HTML4 <dl>

A

añadir listas de definición

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

Definición de etiqueta de HTML4 <a></a>

A

Para enlaces e hipervinculos

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

Definición de etiqueta de HTML4 <iframe>

A

Dentro de una pagina meter el contenido de otra

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

Definición de etiqueta de HTML4 <embed></embed>/<object></object>

A

Para añadir recursos externos, ej. insertar pdf

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

Definición de etiqueta multimedia de HTML4 <canvas></canvas>

A

Para añadir lienzo para dibujar

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

Definición de etiqueta multimedia de HTML4 <svg></svg>

A

para añadir grafico vectorial ( manera de generar grafico y que no se pixele al cambiar de tamaño)

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

Definición de etiqueta multimedia de HTML4 <track></track>

A

Añadir subtitulos a nuestros videos o audios

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

¿Puede haber mas de una etiqueta <main>?

A

Si, pero todas las etiquetas menos 1 tienen que tener el apellido hidden

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

¿A qué se refieren estos productos: WebKit, Blink, Gecko?

A

Motor de renderización

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

¿Mediante que API podemos manipular los elementos de un documento HTML?

A

DOM (Document Object Model)

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

¿Cúal es la declaración de un documento HTML5?

A

‹!DOCTYPE html›

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

Cuando vemos un texto inicial dentro de una caja de texto (que se elimina en cuanto hacemos click sobre ella) en un formulario, ¿que atributo se ha utilizado?

A

placeholder

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

¿Como se llama a la técnica mediante la cual podemos realizar peticiones al servidor para traernos información (en formato JSON, XML,…) y realizar una actualización exclusivamente de una parte del documento HTML?

A

AJAX. El objeto principal se llama xmlHttpRequest

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

Nombre tres frameworks MVVM

A

Angular
ReactJS
VUE

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

Nombre dos herramientas de gestión de dependencias asociadas con el desarrollo web

A

bower
npm

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

¿Cómo se llama al tipo de producto que convierte un lenguaje de script como TypeScript (que no entiende el navegador) a uno que si entiende, como es el caso de JavaScript?

A

transpiler

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

Nombre dos herramientas de automatización de tareas asociadas al desarrollo web

A

gulp
grunt

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

Si tenemos un texto con saltos de linea, etc y queremos conservar exactamente ese formato, ¿qué etiqueta hay que utilizar?

A

pre

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

Nombre 4 etiquetas semánticas estructurales

A

section
article
nav
aside

55
Q

¿Para que sirve el atributo “dir” ?

A

Para especificar la dirección del texto. Para idiomas como el arabe, etc

56
Q

Nombre 9 API’s de HTML5

A

Geolocation
Canvas
WebSockets
Server Sent Events
File
Web Storage
WebWorker
IndexedDB
Drag and Drop

57
Q

¿Cual es la etiqueta que representa a un contenedor en linea?

A

span

58
Q

¿Para que sirve la etiqueta svg?

A

Para insertar graficos vectoriales

59
Q

¿Cual es la declaración para asociarle al documento una hoja de estilos?

A

‹link rel=”stylesheet” href=”estilos.css”›

60
Q

¿Como podría especificar una versión alternativa de su pagina, como por ejemplo una versión en PDF en frances?

A

‹link rel=”alternate” hreflang=”fr” type=”application/pdf” href=”pagina.pdf”›

61
Q

¿Existe alguna forma de utilizar atributos personalizados dentro del documento HTML?

A

Los atributos data-*

62
Q

¿Existen algun(os) atributos específicos para mejorar la accesibilidad de nuestras páginas?

A

Si, se denominan aria-* y el atributo role

63
Q

Nombre tres funciones del API del DOM para poder seleccionar elementos dentro de la página

A

document.getElementById(id)
document.getElementByTagName(tag)
document.querySelector(selector)

64
Q

¿Que es un polyfill ?

A

Es un plugin (libreria js) para poder simular una determinada feature (API de HTML5) que no está implementada de forma nativa en ese navegador que estamos utilizando

65
Q

Si queremos poner un texto en negrita, ¿que etiqueta deberiamos de utilizar?

A

Con ‹strong›
recordar que ‹b› ha cambiado su signifcado por algo mas semantico como “Bring Attention”

66
Q

¿Cuales son los dos atributos que nos permiten asociarle estilos a una etiqueta?

A

class (clase de estilos definida en un css externo o en el bloque style del head de la pagina)
style (estilo inline)

67
Q

En HTML5, ¿se pueden seguir utilizando frames?

A

Si, pero solo el ‹iframe›

68
Q

¿Con que atributo se puede editar de forma online un parrafo por ej?

A

Con el atributo contenteditable=”true”

69
Q

¿Como se puede incrustar un video(reproductor) en una pagina html?

A

‹video src=”movie.ogg” controls=”controls”›‹/video›

70
Q

¿Qué tres parámetros (atributos) se relacionan con el “Modelo de Caja” ?

A

margin
border
padding

71
Q

¿Qué tipo MIME representa a una hoja de estilos?

A

text/css

72
Q

¿Para qué sirve el siguiente selector? [title] { … }

A

selecciona todas las etiquetas a que tengan definido el atributo title

73
Q

¿Para que sirve el siguiente selector?

[lang] { … }

A

selecciona todas las etiquetas que tengan definido el atributo Lang

74
Q

¿Cómo se definen reglas específicas para adaptarse a un dispositivo móvil por ej.?

A

@media only screen and (max-width:640px) { … }

75
Q

¿Qué se toma como referencia cuando decimos position:fixed?

A

La referencia es el documento siendo (0,0) la esquina superior izquierda

76
Q

¿Qué se toma como referencia cuando decimos position:absolute?

A

La referencia es el contenedor en el que este definida la etiqueta afectada por este estilo

77
Q

Nombre dos preprocesadores CSS

A

less
sass

78
Q

Nombre tres frameworks CSS

A

bootstrap
foundation
materialize

79
Q

Nombre dos at-rules

A

@charset
@font-face

80
Q

¿Para qué sirve el siguiente selector?

table , a { … }

A

Se aplicarán los estilos sobre las etiquetas table y sobre a

81
Q

¿Para qué sirve el siguiente selector?

table a { … }

A

Se aplicarán los estilos sobre las etiquetas a que estén dentro de una table (en cualquier nivel de profundidad)

82
Q

¿Para que sirve el siguiente selector?

.texto { … }

A

Se aplicarán los estilos sobre todas las etiquetas que hayan declarado su atributo class de esta forma:

‹etiqueta class=”texto”› …

83
Q

¿Cuál es es selector que se refiere a un elemento en base a su identificador?

A

identificador { … }

84
Q

¿Para qué sirve este selector y comó se le denomina?

a:hover { … }

A

Se le denomina pseudo-clase y en este caso el significado es: se aplicarán estilos sobre los enlaces al pasar el raton por encima

85
Q

¿Para qué sirve este selector y cómo se le denomina?

p::first-letter { … }

A

Se le denomina pseudo-elemento y en este caso el significado es: se aplicarán estilos sobre la primera letra de los párrafos

86
Q

¿Para qué sirve la siguiente declaración en un archivo css externo por ej?

p { color:red !important; }

A

Para forzar a que los parrafos tengan texto en color rojo aunque haya cualquier otra regla (por ej. en el bloque con mayor prioridad/especificidad que intente cambiarlo

87
Q

¿A que elementos se le aplica la “especificidad”?

A

A los selectores

https://specificity.keegan.st/ (buenísimo)

88
Q

¿Qué propiedad(es) de las siguientes no se herendan entre etiquetas padre e hijos sin tener que forzarlo?
color
font-family
margin
text-align

A

El margin no se hereda por defecto, el resto si

89
Q

¿Cómo se fuerza a heredar de tu etiqueta padre el valor que tuviera su propiedad float?

A

selector { float:inherit; }

90
Q

¿Qué diferencia fundamental tienen estas dos declaraciones?

display:none
visibility:hidden

A

Aunque las dos provocan que se oculte el elemento, display:none no deja el hueco que ocuparia el elemento y visibility:hidden si deja ese espacio “en blanco”

91
Q

¿Cómo podríamos preparar el contenido de una pagina para que se imprimiera lo mejor posible?

A

Modificando todo tipo de estilos de los elementos de la pagina de cara a imprimirse y usando por ej la regla @page para definir todo lo relativo al comportamiento de las paginas en impresión

Con @media print { … } dentro del bloque de la pagina
‹link rel=”stylesheet” type=”text/css” href=”/estilos-impresion.css” media=”print”/›

92
Q

¿Con que etiqueta podríamos hacer uso de fuentes tipográficas externas?

A

@font-face

93
Q

¿Qué tipo de unidad de media es “em” y que significa?

A

Es una unidad de medida relativa respecto de la fuente actual (contando con la herencia !ojo! )

94
Q

¿Cuál de las siguiente medidas es relativa?

px
cm
rem
pt

A

rem es una unidad de medida relativa a la fuente definida en la raiz (etiqueta html)

95
Q

¿Qué representa la propiedad z-index?

A

Con z-index, que acepta valores numéricos, podemos definir la altura/profundidad de nuestras capas (div por ej). Es decir, pasamos de ver una página en 2D a 3D

96
Q

¿Para que se utiliza el atributo class?

A

Son clases de estilos definidas en las CSS

97
Q

¿Que hace el atributo title?

A

te da informacion al pasar el raton por encima

98
Q

¿Que nos dice el atributo translate?

A

Si es traducible o no

99
Q

¿Que dice el atributo style?

A

Nos habla de estilos aplicados directamente en la etiqueta (inline)

100
Q

¿Que hace el atributo tabindex?

A

establece el orden de movimiento cuando usamos el tabulador

101
Q

¿Para que se utiliza la API File?

A

Para subir ficheros

102
Q

¿Para que se usa la API Webworker?

A

Para lanzar una tarea en segundo plano

103
Q

¿Para que se utiliza la API Websocket o Server Sent Events?

A

información que se manda sin que el cliente refresque una pagina. ej: estas cogiendo un hotel y te mandan un mensaje que te dice que el hotel ya no tiene habitaciones.

104
Q

¿Cual es el tipo mime de CSS?

A

text/css

105
Q

Nombra 4 frameworks de CSS

A

Bootstrap, Foundation, Bulma y Materialize

106
Q

Cascada de importancia cuando dos o mas reglas coinciden en el mismo elemento, ordenados de mas importante a menos.

A
  1. Estilos relacionados con el documento.
  2. Estilos especificados por el usuario
  3. Estilos por defecto del navegador.
    Todo esto cambia si en algun caso se ha puesto la etiqueta !important, que pasaria a ser el numero uno en importancia.
107
Q

Atributos principales de la etiqueta form

A
  • action (url del servicio/programa que procesara los datos del formulario)
  • method (metodo segun el protocolo HTTP de envio, tipicamente en un form tendriamos GET o POST)
108
Q

¿Que tipo de producto es Blink?

A

Motor de renderizado (procesa HTML + CSS)
* es un componente del navegador chromium y derivados y fue el sustituto de Webkit.

109
Q

Uso de la etiqueta <header> y <head>

A

head: etiqueta que sirve para especificar metadatos, enlazar css…
header: etiqueta semantica que indica zonas de cabecera en un documento main, section…

110
Q

Uso de la etiqueta <pre> y <code></code>

A
  • pre: conservar el formato (saltos de linea, etc) de un parrafo
  • code: para especificar que un texto es un bloque de lenguaje de programacion
111
Q

¿Como se enlaza una hoja de estilos con una pagina HTML?

A

<link></link>

112
Q

Enumera 6 posibles valores para el atributo “type” de <input></input>

A

Password, tel, email, number, time, color

113
Q

Uso del atributo placeholder

A

texto que ponemos dentro de la caja como ayuda contextual, desaparece cuando el usuario escribe dentro

114
Q

¿Como se especifica que un <input></input> es obligatorio?

A

atributo required
*ojo con la sintaxis de los atributos boolean, tiene mucha relacion con la pseudoclase: invalid :valid

115
Q

¿Cuando usamos el atributo “style” o “class”?

A
  • Style lo usamos para dar estilo a un elemento (inline) particular
  • Class cuando queremos definir un estilo “reutilizables” y asignables a un conjunto de elementos
116
Q

Etiquetas utilizadas para crear una tabla

A

“<table> <tr> <td> <th>
otras: <caption> <thead> <tfoot>”

117
Q

¿Como se especifica que al cargar la pagina el foco se situe sobre un <input></input> especifico?

A

autofocus

118
Q

Formas de añadir una imagen a una pagina HTML

A

<img></img>

<picture>
<svg>
<figure>
</figure></svg></picture>

119
Q

Funcion del API Web Worker, Web Storage y Server-Sent Events

A

WW - lanzar tareas asincronas y no bloquear el hilo principal del navegador.
WS - capacidad desde javascript para guardar datos “clave-valor” en una pestaña o en el navegador.
NOTA: los objetos que se usan en este API se llama sesionstorage y localstorage
SSE: Envio de notificaciones desde al servidor al cliente (PUSH)

120
Q

Uso de la etiqueta <ul> ¿Alguna alternativa?

A

Lista no ordenada
* la alternativa mas semantica seria la etiqueta <menu> (hijos de tipo li…)

121
Q

Uso de la etiqueta <search> y <h7></h7></search>

A

<search> define una zona de busqueda (semantica)
<h7> no existe
</h7></search>

122
Q

Propiedades que definene el “modelo de caja”

A

margin (TRBL), border (tamaño estilo y color ;ej. 2px dashed red) y padding (

123
Q

¿Como se define el selector para un elemento cuyo valor de atributo “id” es “abc”?

A

”
#abc {
estilos;
}
“

124
Q

¿Como podemos poner en color rojo todos los parrafos que haya directamente dentro de un div?

A

div>p {
color: red;
}

125
Q

¿En que consiste el mecanismo de la herencia?

A

Que los hijos heredan de forma automatica ciertas properties del padre
* font-size es de las properties mas importantes que se heredan

126
Q

¿En que consiste el posicionamiento “sticky”?

A

Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la pagina

127
Q

¿Cual es la utilidad de un preprocesador CSS? ¿y de un framework CSS? ejemplos

A

Preprocesador: Ayudar al desarrollador a confeccionar hojas de estilo con una sintaxis mas potente que CSS
* tenemos que realizar un proceso de traduccion a css porque el navegador no entiende estos lenguajes.
Ejemplos: less sass stylus.

Frameworks: conjunto de clases de estilos predefinidas (posicionamiento, botones, componentes…)
Ej: Bootstrap, TailWind, Material, Foundation….

128
Q

¿Como se especifica que queremos en cursiva una fuente en CSS?

A

font-style: italic;

129
Q

¿Como podemos hacer pata que los parrafos empiecen por mayuscula?

A

p {
text- transform: capitalize;
}

p::first-letter {
text-transform:uppercase;
}

130
Q

¿Podemos asignarle dos clases de estilos diferentes a un cierto elemento?

A

“si <elemento class=’‘clase1 clase2’’>
“

131
Q

¿Podemos importat dentro de una css el contenido de otra?

A

@import url(“…/estilos.css”)

132
Q

¿Como se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolucion?

A

“@media screen and (min-width:900px){
}

133
Q

¿Como se pueden aplicar estilos a los enlaces cuando pasas el raton por encima?

A

a:hover {
}

134
Q

Si tenemos dos selectores que afectan a un <button> uno en estilos1.cc y otro en estilos2.css) ¿Cuál tendrá mas preferencia?</button>

A

Sin mas datos, tendría mas preferencia el ultimo que haya “enlazado” (link rel=… href=…)

135
Q

¿Para que usamos la declaración !important?

A

Para aumentar la prioridad de ese estilo dentro de la cascada

136
Q

Significado de las unidades rem, em, vw, vh

A

rem: unidad relativa a la raíz (etiqueta <html>)
em: unidad relativa al tamaño que heredas del padre

Bloque2 (5 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions