Html Flashcards

1
Q

¿Qué funcionalidad realiza AJAX ?

A

Realiza peticiones en segundo plano sin recargar toda la página al servidor para obtener información concreta. De este modo las páginas son más usables

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

Enumera librerías AJAX

A

JQuery, Dojo, Yui, ExtJS, Prototype, MooTools

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

¿Que es un motor de renderizado?

A

Es software del navegador que toma HTML y CSS y muestra el contenido ya formateado

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

Motor de renderizado de Chrome

A

Blink

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

Motor de renderizado de Firefox

A

Gecko

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

Motor de renderizado de Safari

A

WebKit

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

Motor de renderizado de Edge

A

EdgeHTML, aunque usara Blink

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

Motor de renderizado de Internet Explorer

A

Trident

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

Novedades de HTML5

A

Etiquetas semánticas y etiquetas dedicadas a multimedia

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

Editores de html5

A

Sublime, Atom, Visual Studio Code

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

Preprocesadores de CSS

A

LESS, SASS, STYLUS. Extienden la funcionalidad básica de css

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

Frameworks para el manejo de JavaScript

A

Angular, ReactJS, VUE.JS, EmberJS

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

Nuevos lenguajes de scripting más sencillos que JavaScript

A

TypeScript, CoffeeScript, Es6

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

Gestores de dependencias, automatización de tareas, plantillas de proyecto

A
  • Bower: gestor de paquetes
  • Yarn: gestor de dependencias
  • NPM: gestor de paquetes
    -Gulp: automatización de tareas
  • Yeoman: automatización de tareas, administrador dependencias, ejec pruebas unitarias
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

¿Cómo es la declaración de una página HTML4?

A

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
DOCTYPE y HTML pueden estar en mayúsculas o minúsculas, ya que funciona en ambos casos

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

¿Como es la declaración de inicio de documento en HTML5?

A

<!DOCTYPE html>

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

¿Como es un comentario en HTML ?

A

<!- - Comentario - - >

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

Header - características

A

-Etiqueta semántica
-Dentro del body
-Representa el principio del cuerpo, información introductoria o un set de links navegables
- Contiene uno o mas elementos de cabecera (de h1 a h6)
- Logos o iconos
- Información de autores
- Se pueden tener varios Header en un doc HTML
- No se puede posicionar en el footer , etiqueta address u otro Header

<header>
<h1>hola</h1>
<p> esto es un párrafo>
</Header>
</p></header>

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

Nav - Características

A

-Sección que contiene enlaces de navegación, mayormente bloques mayores
- No todos los enlaces tienen que estar en un nav, pueden estar en el footer

<nav>
<a href = “www.Google.es”> HTML</a>
<a href = “www.w3c.com”>W3C</a>
</nav>

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

Etiqueta Section - Características

A
  • Define una sección genérica del documento
  • Su función es estructurar semánticamente un documento para que un agente de un usuario lo interprete y lo distinga de div

<section>
<h2>WWF HISTORY</h2>
<p>The World Sidecar Fund for nature is an international organization…..</p>
</section>

<section>
<h2>hola</h2>
<p>contenido</p>
</section>

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

Etiqueta Article - Características

A
  • Composición autocontenida en un doc, pagina o app que se quiera distribuir o reutilizar independientemente, por ejemplo en una redifusion. Esto puede ser un articulo de una revista, periódico, entrada de blog, comentario de un usuario

<article>
<h2>articulo</h2>
<p>bla bla </p>
</article>

<article>
<h2>articulo 2</h2>
<p>bla bla 2</p>
</article>

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

Etiqueta aside - Características

A

-Contenedor para contenido secundario o lateral relacionado con el contenido principal (widgets, menús de navegación, biografías de autor)

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

Etiqueta footer - Características

A
  • Define un pie para un documento o sección
  • Suele contener info del autor, copyright, contacto, mapa del sitio, botón de vuelta arriba, contenido relacionado
  • Puede haber varios footer en un documento

<footer>
<p>contenido</p>
<p>mas contenido</p>
</footer>

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

Etiqueta figure - Características

A
  • Especifica ilustraciones, diagramas, fotos
  • El contenido esta relacionado con el resto, pero su posición es independiente y si se quita, no debería afectar al resto del documento.
  • la etiqueta <figcaption> se usa para añadir un pie a la imagen al elemento <figure></figure>

<figure>
<img src=“partenon_atenas.jpg”>
<figcaption>Partenon de Atenas</figcaption>
</figure>

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

Etiqueta b - Características

A
  • El significado cambia respecto a HTML4
  • Especifica texto en negrita sin importancia extra
  • Debería usarse como último recurso, cuando no haya otra más apropiada (como <strong>, <em><mark>)</mark></em></strong>

<p> esto es un texto normal <b>esto es texto en negrita</b></p>

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

Etiqueta i - Características

A
  • Pone el contenido en otro tipo de voz o humor. Suele aparecer en cursiva
  • Se suele usar con contenido técnico, frase en otro idioma, pensamiento….
  • Solo ha de usarse cuando no se pueda usar em, Strong, Mark, cite, dfn

<p>esto es <i>texto en cursiva </i> </p>

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

Etiqueta Strong - Características

A
  • Define contenido con especial importancia. El contenido aparece en negrita

<p>este texto <strong>es importante</strong></p>

28
Q

Etiqueta time - Características

A
  • Define un tiempo especifico ( o fecha tiempo)
  • Traduce la hora a formato maquina para que los navegadores puedan añadir recordatorios de fecha en el calendario de los usuarios.

<p>Nota, tengo una cita el <time datetime=“15/08/1988”> cumpleaños</time> </p>

29
Q

Etiqueta var - Características

A
  • Se usa para definir una variable en programación o expresión matemática. Suele mostrarse en cursiva
  • <p>él área de un triangulo es 1/2 donde <var>b</var> es bla bla bla</p>
30
Q

Etiqueta kbd - Características

A
  • Para definir entrada de teclado (como atajos de teclado). Se suele mostrar con fuente Monospace.

<p>pulsa <kbd>ctrl </kbd> + <kbd>C</kbd> </p>

31
Q

Etiqueta Code - características

A
  • Se usa para definir un trozo de código de ordenador. Se muestra en fuente monospace

<p>El elemento de HTML <code>boton</code> define un botón clicable</p>

32
Q

Etiqueta div - características

A
  • Define una división o sección en un documento html
  • Se usa como contenedor de elementos, se puede incluir en el cualquier tipo de elemento
  • Es en bloque (Block)
33
Q

Etiqueta span - Caracteristicas

A
  • Es inline
  • Remarca una parte del texto o parte del documento
  • La diferencia con div es que este es inline y div es block
34
Q

Etiqueta table - Caracteristicas

A
  • Define una tabla en html
  • Una tabla html consiste en un elemento tabla y uno o mas elementos <tr><th> y <td >
  • Tr define una fila de una tabla
    -Th define la cabecera de una tabla
  • Td define una celda de una tabla

<table>
<tr>
<th>mes</th>
</tr>
<tr>
<td>enero</td>
</tr>
</table>

35
Q

Etiqueta Pre - características

A
  • contenido Pre formateado
  • preserva saltos de línea, espacios.
  • el texto se muestra tal y como se escribe en el código fuente de html
36
Q

Etiqueta Blockquote - características

A
  • Especifica una sección que es una cita de otra fuente
  • Los navegadores suelen intentar Blockquote

<p>hola</p>

<Blockquote cite=“www.Google.com”>este navegador es el mas famoso del mundo</Blockquote>

37
Q

Etiqueta ul - características

A
  • Lista no ordenada con símbolo

<ul>
<li>Café</li>
<li>Te</li>
</ul>

38
Q

Etiqueta ol - características

A
  • Lista ordenada numerada o alfabética
  • Se le puede indicar que empiece por un numero

<ol start=“50”>
<li>café</li>
<li> te </li>
</ol>

39
Q

Etiqueta dl - características

A

-Define una lista descriptiva
- Se usa en conjunción con la etiqueta dt (define términos, nombres) y dd (define cada termino)

<dl>
<dt>cafe</dt>
<dd>bebida caliente y negra</dd>
</dl>

40
Q

Etiqueta a - características

A
  • Define enlaces
  • Si no tiene atributo href, solo es un placeholder de un hiperlink
  • A no ser que se especifique el target (Blank o el otro) se abre en la misma ventana
  • Su atributo más importante es href que indica el link destinatario
    <a href=“www.Google.com”> visita Google</a>
41
Q

Etiqueta img - características

A
  • Para mostrar una imagen en html
  • Técnicamente las imágenes se linkan a las paginas web. Tiene dos atributos requeridos: src (especifica la ruta) y alt(especifica un texto alterno para la imagen si la imagen no se carga). También ha de especificarse el ancho y el alto
    <img src=“img.jpg” alt=“chica con jersey” with=“500” height=“100”><img></img>
42
Q

Etiqueta iFrame - caracteristicas

A
  • Especifica un marco inline que sirve para incrustar otro documento en el actual
  • Algunos atributos son allow (especifica la política del Iframe), allowfullscreen(permite pantalla completa), allowpaymentrequest(permitir llevar a plataformas de pago), height, loading, name
43
Q

Etiqueta embed - caracteristicas

A
  • Es un contenedor para recursos externos, como una pagina web, foto, media player
  • La mayoría de navegadores no soportan, por lo que se recomienda si es foto usar img, si es para mostrar html usar Iframe y video , la etiqueta video

<embed Type=“text/HTML” src=“snippet.html”>

44
Q

Etiqueta object - caracteristicas

A
  • Define un contenedor para un recurso externo, que puede ser una pagina web, media player, etc. mejor usar alguna de las etiquetas mencionadas en embed, es prácticamente igual en codigo
45
Q

Etiqueta audio - caracteristicas - MUY IMPORTANTE

A
  • Para incrustar contenido de audio
  • Contiene uno o mas source con diferentes fuentes. El navegador utilizará la primera que soporte.
  • El texto entre las etiquetas <audio> se mostrara solo en los navegadores que no lo soporten (como un alt).</audio>
  • Soporta tres formatos: MP3, WAV, OGG
  • Atributos importantes:
    • autoplay: autoplay - el audio comienza según este listo
    • controls: controls - se muestran los controles
    • Loop: loop - cuando acabe el audio empieza otra vez
    • muted : muted - no suena el audio
    • preload: audio / metadata/ none si y como el audio debe ser cargado cuando cargue la pagina
    • src: url : la url del fichero de audio
46
Q

Etiqueta video - Caracteristicas - MUY IMPORTANTE

A
  • Para incrustar video
  • Puede contener mas de un source, y el navegador tomara el primero que sea compatible
  • El texto entre etiquetas solo se mostrara si el navegador no es compatible
  • Formatos soportados: MP4, WebM y OGG
  • Atributos importantes:
    • autoplay
    • controls
    • height: píxeles:altura del reproductor
    • loop
    • muted
    • póster: url : imagen para mostrar mientras el video se descarga o hasta que se de al play
    • preload
    • src
    • with : píxeles: ancho
47
Q

Etiqueta track - caracteristicas

A
  • Especifica dentro de audio o video pistas de texto, como para indicar subtítulos, citas u otros archivos que contienen texto
  • Se formatean en WebVTT .vtt files
  • Atributos:
    • default:desautorizó: el track que se activa si las preferencias del usuario no indican otro
    • kind: caprinos/chapters/descriptions/metadata/subtitles: tipo de texto del track
    • label : el titulo
    • src
    • srcclang : language_code: especifica el lenguaje de la pista, obligatorio si el tipo son subtitulos
48
Q

Etiqueta canvas - caracteristicas

A
  • Para dibujar gráficos, dibujos
  • Solo es un contenedor, necesario js para poder pintar

<canvas with=“500” height=“400”</canvas>

49
Q

Etiqueta svg- caracteristicas

A

Para incluir Gráfico vectorial. En formato xml

50
Q

Etiqueta map - características

A
  • Un mapa de imágenes con áreas clickables
  • El atributo name obligar torio se asocia con la imagen para crear una relación entre ambas
  • El map contiene un numero de <área> que define las posibles áreas clickables</área>

<map name=“mapa del sitio”>
<área shape =“rect” coords =“34, 44,55” alt=“computer “ href=“computer.HTM”>
</map>

51
Q

Etiqueta details - caracteristicas

A
  • Especifica detalles adicionales que el usuario puede abrir y cerrar a demanda
  • Cualquier contenido se puede indicar en esta etiqueta
  • Suele ir con <summary > para especificar una cabecera visible

<details>
<summary>Epcot center</summary>
<p>bla bla</p>
</details>

52
Q

Etiqueta dialog - características

A
  • dialogo
53
Q

El atributo content editadle - caracteristicas

A
  • Especifica qué contenido es evitable

<p contenteditable =“true”>hola que tal</p>

54
Q

Etiqueta em - caracteristicas

A
  • Para enfatizar texto. El contenido se muestra en cursiva
  • Un lector pronunciara estos textos de manera mas fuerte

<p>Tu <em>perro</em>tiene que darse prisa</p>

55
Q

Etiqueta mark - caracteristicas

A
  • Para enfatizar texto como subrayador
56
Q

Etiqueta s - caracteristicas

A
  • muestra el texto tachado

<p> hola <s>que tal</s></p>

57
Q

Etiqueta u - caracteristicas

A
  • subrayado
58
Q

Etiqueta q - caracteristicas

A
  • cita con comillas
59
Q

Etiqueta sub - caracteristicas

A
  • Describe texto suscrito (en una línea, va lo que escribas como una línea por debajo, para escribir cosas como H2O)
60
Q

Etiqueta sup - caracteristicas

A
  • Pone texto un poco por encima del renglon
61
Q

Etiqueta small- caracteristicas

A
  • pone la letra mas pequeña
62
Q

Etiqueta dfn - caracteristicas

A

No la entiendo

63
Q

Etiqueta abbr- caracteristicas

A
  • Define abreviaturas o acrónimos como html, CSS, mr.

<p> The <abbr> title=“world health organization ”> WHO</abbr> as founded in 1978 </p>

64
Q

Etiqueta wbr- caracteristicas

A
  • Word break opportunity, establece donde en un párrafo sería Adela cuando poner un salto de línea. Esto sirve para que cuando llegue al final de un renglón a veces el navegador establece mal donde cortar
65
Q

Motor de renderizado más nuevo de Chrome

A

Quantum

66
Q

Motor de renderizado de Opera

A

Blink