Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

BLOQUE III > T8 - HTML5 > Flashcards

T8 - HTML5 Flashcards

(38 cards)

Start Studying
1
Q

Características de HTML4

A
  • CSS más avanzado
  • Vanilla JavaScript
  • Tecnología AJAX (XHR): enviar y recibir datos del servidor sin recargar la página.
  • Librerías JS (ej. jQuery): colecciones de funciones que simplifican el uso de JavaScript.
  • Manejo del DOM directo: modificación manual de los elementos HTML desde JavaScript.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿En qué mejora HTML5?

A
  • Semántica y api’s
  • CSS3 con RWD (Responsive Web Design)
  • Preporocesadores CSS (LESS, SASS, STYLUS…)
  • Frameworks JS (MVMV)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

¿Para que sirven los Frameworks JS (MVMV)?

A

Para ESTRUCTURAR APLICACIONES WEB, separando
- la lógica de negocio (Modelo)
- la presentación (Vista)
- la interacción (ViewModel o Controlador)

facilitando el desarrollo, mantenimiento y escalabilidad.

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

Ejemplos de Frameworks JS (MVMV)

A
  • Angular (Google)
  • React (Facebook)
  • Vue
  • Ember
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿Qué es la transpilación? ¿Qué tipos hay?

A

Es el proceso de convertir código fuente de un lenguaje de programación a otro, manteniendo la misma funcionalidad.

Ejemplos:
- TypeScript
- CoffeeScript
- ES6 / ECMAScript 2015

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

¿Por qué 3 elementos fundamentales está formado un navegador web?

A
  • Intérprete o motor de renderizado
  • Un intérprete de JS (JavaScript)
  • Funcionalidades predefindas
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

¿Qué es un motor de renderizado? Da ejemplos:

A

Es un software que interpreta y dibuja el contenido de una página web (HTML, CSS, JavaScript) en la pantalla del usuario.

  • Chrome, Edge y Ópera: Blink
  • Firefox: Gecko
  • Safari: Webkit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

¿Para qué sirve la instrucción: <!DOCTYPE html>?

A

Para RENDERIZAR una página WEB en el modo de compatibilidad u que no se producan errores con HTML

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

¿Quién se encargaba en el pasado de la estandarización de HTML?

A

W3C aunque quedó obsoleto por su lentitud

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

¿Quién se encarga en el actualidad de la estandarización de HTML?

A

WHATWG: Web Hypertext Application Technology Working Group

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

¿Cómo se define HTML (HyperText Markup Language)?

A

Es un lenguaje de marcado o de etiquetas que permite incluir o hacer referencia a todo tipo de información.

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

¿Cómo se accede al código HTML de una página web?

A
  • Con la combinación de teclas CTRL + U.
  • Botón derecho inspeccionar.
  • CTRL + SHIFT + I y accediendo a la pestaña Elements
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

¿Cómo es la estructura de una etiqueta de HTML?

A

<etiqueta>**contenido**</etiqueta>

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

¿Para qué sirve la semántica de HTML?

A

La semántica en HTML5 se refiere a usar etiquetas que describan el significado del contenido, separando la estructura (HTML) de la presentación (CSS), para mejorar la comprensión y accesibilidad de la página.

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

Estructura de una etiqueta en HTML

A

[< etiqueta atributo = “valor” > contenido </etiqueta>]

Ejemplo:
[< p class=”texto-rojo” > Hola Mundo< / p >]

  • Etiqueta: < p >
  • Atributo: class
  • Valor: “texto-rojo”
  • Contenido: Hola Mundo
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

¿Qué 3 tipos de atributos existen en HTML?

Study These Flashcards
A

Existen 3 tipos de atributos dependiendo de sus valores:

  • Conjunto de valores: sólo se permiten unos valores concretos. Cualquier otro valor diferente, no será válido.
  • Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto.
  • Valores booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false).

En HTML5 un atributo sin valor (solo el atributo) significa verdadero

17
Q

Atributos IMPORTANTES

Study These Flashcards
A
  • id: identificador de elemento (tiene que ser único)
  • class: clases de estilo definidas en las CSS (interna y externa)
  • title: información al pasar el ratón por encima
  • translate yes/no (indica si la información debe ser traducida)
  • style especificar estilos aplicados directamente a la etiqueta (inline)
  • dir definir la dirección del texto (para idiomas que se leen de derecha a izquierda por ej)
  • lang definir el idioma de la página/elemento
  • tabindex define el orden del foco usando el tabulador
18
Q

¿Qué es una etiqueta?

Study These Flashcards
A
  • Etiqueta: Es el contenedor de todo, como < p >
19
Q

¿Qué es un atributo en HTML?

Study These Flashcards
A

Atributo: información adicional sobre la etiqueta, como class

20
Q

¿Qué es un valor?

Study These Flashcards
A

Valor: Especifica un atributo, como “texto-rojo”.

21
Q

¿Qué es el contenido?

Study These Flashcards
A

Contenido: Es lo que aparece dentro de la etiqueta, como el texto mostrado en la página, como Hola Mundo.

22
Q

Etiquetas de HTML4 importantes.

Study These Flashcards
A
  • < figure > ilustraciones con información autocontenida.
    Pueden servir para anotar imagenes, vídeos, tablas,
    texto, etc.
  • < figcaption> Define un pie de foto o descripción para un < figure>
  • < b> texto en negrita
  • < i> texto en cursiva
  • < strong> resaltar (ej negrita)
  • < mark> resaltar (ej subrayado)
  • < time> contenido de fecha y hora con formato
  • < details> y < summary> zona colapsable de información
  • < dialog> cuadros de dialogo
  • < search> indicar zona de busqueda
  • < progress> progreso de un proceso
  • < meter> representa una medida
  • < output> la salida de un proceso/calculo
  • < embed> incrustar recursos externos
23
Q

Etiquetas de HTML5 importantes.

Study These Flashcards
A
  • < div> agrupación de tipo bloque/caja/capa “genérico”
  • < span> agrupación en línea “genérico”
  • < table> < th> < tr> < td> < tfoot> < thead> < tbody> representa datos en dos o mas dimensiones
  • < p> Párrafo
  • < pre> conserva formato
  • < blockquote> citas
  • < ul> y < ol> listas.
  • < li> elemento de una lista
  • < dl> lista descriptiva
  • < dt> términos.
  • < dd> descripciones
  • < a> enlace a recursos (html, pdf, …)
  • < img> imágenes
  • < iframe> incrustar contenido navegable de web externa
  • < object> incrustar recursos externos
  • < h1> < h2> < h3> < h4> < h5> < h6> Encabezados tipo < form> < input>
  • < code> trozos de código fuente (ej. Java)
  • < kbd> representa una combinación de teclado
  • < var> variable de un trozo de un programa
  • < hr> Línea horizontal de separación de párrafos
  • < br> Salto de línea

< form>: Define un formulario en HTML, que se usa para recoger datos del usuario.

< input>: Es un campo dentro del formulario donde el usuario puede introducir datos. Se usa para diferentes tipos de entradas, como texto, botones, contraseñas, etc.

24
Q

Etiquetas semánticas ¿Qué són? Da ejemplos:

Study These Flashcards
A

Son aquellas que definen claramente el propósito de un bloque de contenido dentro de una página, lo que mejora la accesibilidad y la comprensión

  • < article> es un contenedor de bloques de contenido independientes del sitio web. Pueden ser vistos, reutilizados y distribuidos por separado. Está permitido anidar artículos dentro de secciones y al revés.
  • < section> representa una agrupación del contenido del que se trata en la página.
  • < aside> representa información tangencial, ligeramente relacionada con el contenedor.
  • < footer> representa el pie de un documento o contenedor.
  • < header> representa el encabezado de un documento o contenedor.
  • < main> contenido principal del documento (*).
  • < nav> zona con enlaces de navegación en el ámbito de nuestro site.
25
Etiquetas **multimedia**
**< audio>** **< video src="video.webm" poster="presentacion.jpg" controls autoplay muted loop>** **< svg>**: etiqueta para gráficos vectoriales en XML **< map name="imagen-mapa">** **< area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">** **< area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">** **< area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">** **< /map>** **< track>** **< canvas>** lienzo para dibujar a través de una API.
26
Atributos interesantes de la etiqueta **MULTIMEDIA** de **"video"**:
* **poster="url"**: imagen de portada * **autoplay**: comienza inmediatamente, se puede especificar un segundo con `src="video.mp4#t=15"` * **loop**: reproduce nuevamente cuando termina * **muted**: sin sonido * **controls**: muestra los controles de reproducción * **preload="auto"**: precarga el video * **"metadata"** carga solo propiedades
27
¿Qué es la **extensibilidad** en HTML?
A la capacidad de **ampliar el lenguaje** para adaptarlo a nuevas necesidades, sin modificar su estructura básica. Podemos: * definir atributos * definir semántica en base a "unos tipos"
28
La **extensibilidad** en HTML. *DEFINIR ATRIBUTOS PERSONALIZADOS*
**data-xxx** *< data-categoria="articuloenoferta">*
29
¿Para qué sirve la API **dataset**?
Sirve para **poder leer** los atributos personalizados por **JavaScript** *< data-categoria="articuloenoferta">* pasará a ser *objecthold.dataset.categoria*
30
La **extensibilidad** en HTML. ¿Cuáles son las **3 etiquetas** para *DEFINIR SEMÁNTICA EN BASE A UNOS "TIPOS"*?
* item**scop** = indica que empieza un objeto con datos estructurados. * item**type** = especifica el tipo de objeto, usando una URL de schema.org → < section itemscope itemtype=”http://schema.org/Person”> (Person es la categoría) * item**prop**= Especifica qué propiedad del objeto se está describiendo (nombre, precio, autor, etc.). < section itemscope itemtype="https://schema.org/Book"> < h1 itemprop=**"name"**>El Principito< /h1> < p itemprop=**"author"**>Antoine de Saint-Exupéry< /p>< /section>
31
¿Para qué sirven las **etiquetas de *CABECERA*** < meta >?
* < meta name=**"keywords"** content="...">: palabras clave para buscadores (hoy en día casi no se usa). * < meta name=**"author"** content="...">: autor del documento. * < meta name=**"title"** content="...">: título del contenido (poco común, se usa más ). * < meta name=**"description"** content="...">: resumen del contenido, lo que muestra Google. * < meta name=**"viewport"** content="width=device-width, initial-scale=1">: **diseño responsive** (adaptado a móviles). * < meta **charset**="utf-8" >: **codificación de caracteres** (para que se vean bien tildes, ñ, etc.). </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='32' id='card-598886350'> <div class='header'> 32 </div> <div class='card-face question'> <div class='question-content'> ¿Para qué sirven las **etiquetas de *CABECERA*** < link >? </div> </div> <div class='card-face answer'> <div class='answer-content'> * < link rel=**"alternate"** **href=**"..." media=**"print"**>: versión para imprimir. * < link rel=**"alternate"** **hreflang=**"en" href="...">: versión en otro idioma (ej. inglés). * < link rel=**"stylesheet"** href=**"doc.css"**>: enlaza un archivo CSS externo. * < link rel=**"prev"** href="...">: página anterior (navegación por partes). * * < link rel=**"next"** href="...">: página siguiente. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='33' id='card-598886351'> <div class='header'> 33 </div> <div class='card-face question'> <div class='question-content'> ¿Para qué sirven las **etiquetas de *CABECERA*** < style >? </div> </div> <div class='card-face answer'> <div class='answer-content'> < style> ... < /style>: **CSS interno**, solo para esa página. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='34' id='card-598886352'> <div class='header'> 34 </div> <div class='card-face question'> <div class='question-content'> ¿Para qué sirven y cuáles son las **Etiquetas de formularios** en HTML? </div> </div> <div class='card-face answer'> <div class='answer-content'> Permiten crear **formularios interactivos** para que el usuario introduzca datos: * **< form>:** contenedor del formulario. * **< input>:** campo de entrada (texto, fecha, etc.). * **< label>:** etiqueta asociada a un campo (mejora accesibilidad). * **< select>:** lista desplegable. * **< button>:** botón (enviar, resetear, etc.). * **< textarea>:** campo de texto largo (multi-línea). * **< datalist>:** lista de sugerencias para un **< input>**. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='35' id='card-598886353'> <div class='header'> 35 </div> <div class='card-face question'> <div class='question-content'> Datos de *”`tipo`”* **< input** en formularios. ¿Como sería su semántica? </div> </div> <div class='card-face answer'> <div class='answer-content'> **Semántica**: < input type="..."> color, date, datetime, time, email, month, number, range, search, tel, url... </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='36' id='card-598886354'> <div class='header'> 36 </div> <div class='card-face question'> <div class='question-content'> Nuevos atributos para las **etiquetas** de formularios: </div> </div> <div class='card-face answer'> <div class='answer-content'> * **list:** asocia un <datalist> para sugerencias. * **autofocus:** enfoca automáticamente al cargar la página. * **autocomplete:** activa o desactiva sugerencias del navegador. * **min / max:** valores mínimo y máximo para number, date, etc. * **pattern:** expresión regular para validar el formato del texto. * **multiple:** permite seleccionar varios elementos (ej. múltiples archivos o correos). * **placeholder:** texto guía dentro del campo. * **required:** campo obligatorio. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='37' id='card-598886355'> <div class='header'> 37 </div> <div class='card-face question'> <div class='question-content'> ¿Qué son las **APis**? </div> </div> <div class='card-face answer'> <div class='answer-content'> Una API **(Application Programming Interface)** es una interfaz que permite que dos programas se comuniquen entre sí. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data-a-button-url='/sign-up?packId=22906890&returnTo=%2Fpacks%2F22906890%2Fsubscribe&source=preview-card&subject=BLOQUE+III' data-card-is-blurrable data-number='38' id='card-598886356'> <div class='header'> 38 </div> <div class='card-face question'> <div class='question-content'> ¿Qué nuevas **APis** existen? </div> </div> <div class='card-face answer'> <div class='answer-content'> * **WebSockets**: Comunicación bidireccional entre la aplicación y el servidor. * **Server-Sent Events**: Muy parecido al modelo de WebSockets pero solo para envio de mensajes desde el servidor al cliente (PUSH). * **Canvas**: Esta API proporciona un rectángulo en nuestra web en el que podemos usando JavaScript. Proporciona animación e interactividad. * **Indexed DB**: Permite el almacenamiento y recuperación de información en una base de datos local que reside en el equipo del usuario. Base de datos NoSQL. * **Web Storage**: Similar a Indexed DB. Session Storage y Local Storage. * **File**: control para la subida de ficheros. * **Web Workers**: Permite ejecutar scripts en background, sin interrupciones del usuario. * **Drag and Drop**: Permite que el usuario pueda arrastrar y soltar elementos. Por ejemplo, una imagen en la página web. * **Geolocation**: Obtiene la posición del usuario si da su consentimiento. Objeto geolocation, propiedad del objeto navigator. * **Selector**: CSS. Métodos .querySelector y .querySelectorAll. * **Microdata / Data Set**: extensibilidad. </div> </div> </div> </div> </div> </div> <div class='flashcards-sidebar'> <div class='sidebar-header'> <div class='react-component' id='flashcards-search-bar'> <div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div> </div> </div> <div class='sidebar-content'> <p class='deck-subject-heading'> <a class="decks-in-subject-link" href="/packs/bloque-iii-22906890"><span class="pack-name">BLOQUE III</span> (4 decks) </a></p> <ul class='deck-list-items'> <a class='deck-link ' href='/flashcards/t6-java-bases-19003222/packs/22906890'> <li class='deck-list-item'>T6 - JAVA [BASES]</li> </a> <a class='deck-link ' href='/flashcards/t6-java-19003191/packs/22906890'> <li class='deck-list-item'>T6 - JAVA</li> </a> <a class='deck-link selected' href='/flashcards/t8-html5-19003020/packs/22906890'> <li class='deck-list-item'>T8 - HTML5</li> </a> <a class='deck-link ' href='/flashcards/t8-css-app-web-19003088/packs/22906890'> <li class='deck-list-item'>T8 - (CSS) APP WEB</li> </a> </ul> </div> </div> </div> <div id='tooltip-controller'></div> <div data='{"packId":22906890,"source":"spaced-repetition-modal","subject":"BLOQUE III","resources":{"deckId":19003020,"packId":22906890},"returnTo":"/packs/22906890/subscribe"}' id='spaced-repetition-modal-controller'></div> <div id='banner-controller'></div> <div id='dialog-modal-controller'></div> <div class='band band-footer'> <div class='footer-main'> <ul class='sections'> <li class='section key-links'> <p class='section-heading'> Key Links </p> <ul class='options-list'> <li class='option'> <a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a> </li> <li class='option'> <a class="option-link" href="/companies">Corporate Training</a> </li> <li class='option'> <a class="option-link" href="/teachers">Teachers & Schools</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a> </li> <li class='option'> <a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a> </li> </ul> </li> <li class='section subjects'> <p class='section-heading'> Subjects </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a> </li> <li class='option'> <a class="option-link" href="/subjects/law">Law Education</a> </li> <li class='option'> <a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a> </li> <li class='option'> <a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a> </li> <li class='option certified-classes'> <a class="option-link" href="/learn">All Certified Classes</a> </li> </ul> </li> <li class='section company'> <p class='section-heading'> Company </p> <ul class='options-list'> <li class='option'> <a class="option-link" href="/about">About Us</a> </li> <li class='option'> <a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a> </li> <li class='option'> <a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a> </li> <li class='option'> <a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a> </li> <li class='option'> <a target="_blank" class="option-link" href="/careers">Careers</a> </li> </ul> </li> <li class='section find-us'> <p class='section-heading'> Find Us </p> <ul class='social-media-list'> <li class='option twitter-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option linkedin-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option facebook-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option youtube-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option pinterest-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option tiktok-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> <li class='option insta-badge group'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a> </li> </ul> <div class='get-the-app'> <div class='qr-code'> <img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" /> </div> <div class='app-badges'> <div class='badge apple-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> <div class='badge android-badge'> <a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a> </div> </div> </div> </li> </ul> </div> <div class='footer-blurb'> Brainscape helps you reach your goals faster, through stronger study habits. <br> © 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a> </div> </div> <script> if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') { __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {}; } </script> <script> window.addEventListener('load', () => { setTimeout(() => { const script = document.createElement('script'); script.src = "/pks/js/public-deck-cards-page-d0410d84e8b38e8511bf.js"; script.defer = true; document.body.appendChild(script); }, 0); }); </script> <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script> <script> document.addEventListener("mainSharedready", () => { GaHelper.setGaDimension("dimension1","No"); }); </script> <script type='application/ld+json'> {"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"T8 - HTML5"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Características de HTML4","acceptedAnswer":{"@type":"Answer","text":"- CSS más avanzado - Vanilla JavaScript - Tecnología AJAX (XHR): enviar y recibir datos del servidor sin recargar la página. - Librerías JS (ej. jQuery): colecciones de funciones que simplifican el uso de JavaScript. - Manejo del DOM directo: modificación manual de los elementos HTML desde JavaScript."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿En qué mejora HTML5?","acceptedAnswer":{"@type":"Answer","text":"- Semántica y api’s - CSS3 con RWD (Responsive Web Design) - Preporocesadores CSS (LESS, SASS, STYLUS…) - Frameworks JS (MVMV)"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Para que sirven los Frameworks JS (MVMV)?","acceptedAnswer":{"@type":"Answer","text":"Para ESTRUCTURAR APLICACIONES WEB, separando - la lógica de negocio (Modelo) - la presentación (Vista) - la interacción (ViewModel o Controlador) facilitando el desarrollo, mantenimiento y escalabilidad."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Ejemplos de Frameworks JS (MVMV)","acceptedAnswer":{"@type":"Answer","text":"- Angular (Google) - React (Facebook) - Vue - Ember"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es la transpilación? ¿Qué tipos hay?","acceptedAnswer":{"@type":"Answer","text":"Es el proceso de convertir código fuente de un lenguaje de programación a otro, manteniendo la misma funcionalidad. Ejemplos: - TypeScript - CoffeeScript - ES6 / ECMAScript 2015"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Por qué 3 elementos fundamentales está formado un navegador web?","acceptedAnswer":{"@type":"Answer","text":"- Intérprete o motor de renderizado - Un intérprete de JS (JavaScript) - Funcionalidades predefindas"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué es un motor de renderizado? Da ejemplos:","acceptedAnswer":{"@type":"Answer","text":"Es un software que interpreta y dibuja el contenido de una página web ( HTML, CSS, JavaScript ) en la pantalla del usuario. - Chrome, Edge y Ópera: Blink - Firefox: Gecko - Safari: Webkit"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Para qué sirve la instrucción: ?","acceptedAnswer":{"@type":"Answer","text":"Para RENDERIZAR una página WEB en el modo de compatibilidad u que no se producan errores con HTML"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Quién se encargaba en el pasado de la estandarización de HTML?","acceptedAnswer":{"@type":"Answer","text":"W3C aunque quedó obsoleto por su lentitud"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Quién se encarga en el actualidad de la estandarización de HTML?","acceptedAnswer":{"@type":"Answer","text":"WHATWG: Web Hypertext Application Technology Working Group"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo se define HTML (HyperText Markup Language )?","acceptedAnswer":{"@type":"Answer","text":"Es un lenguaje de marcado o de etiquetas que permite incluir o hacer referencia a todo tipo de información."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo se accede al código HTML de una página web?","acceptedAnswer":{"@type":"Answer","text":"- Con la combinación de teclas CTRL + U. - Botón derecho inspeccionar. - CTRL + SHIFT + I y accediendo a la pestaña Elements"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Cómo es la estructura de una etiqueta de HTML?","acceptedAnswer":{"@type":"Answer","text":"contenido"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Para qué sirve la semántica de HTML?","acceptedAnswer":{"@type":"Answer","text":"La semántica en HTML5 se refiere a usar etiquetas que describan el significado del contenido, separando la estructura (HTML) de la presentación (CSS), para mejorar la comprensión y accesibilidad de la página."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Estructura de una etiqueta en HTML","acceptedAnswer":{"@type":"Answer","text":"[\u003c etiqueta atributo = \"valor\" \u003e contenido ] Ejemplo: [\u003c p class=\"texto-rojo\" \u003e Hola Mundo\u003c / p \u003e] - Etiqueta: \u003c p \u003e - Atributo: class - Valor: \"texto-rojo\" - Contenido: Hola Mundo"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"¿Qué 3 tipos de atributos existen en HTML?","acceptedAnswer":{"@type":"Answer","text":"Existen 3 tipos de atributos dependiendo de sus valores: - Conjunto de valores: sólo se permiten unos valores concretos. Cualquier otro valor diferente, no será válido. - Valores libres: Son los atributos en los que puedes especificar un valor libremente, como una dirección URL o un texto. - Valores booleanos: Son los atributos que deben tener un valor verdadero (true) o un valor falso (false). En HTML5 un atributo sin valor (solo el atributo) significa verdadero "}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"T8 - HTML5"}]} </script> </body> </html>