b3t8 - HTML5 Flashcards by Daniel Pelado

Con qué etiqueta empiezan los archivos html 5?

< ! DOCTYPE html>

How well did you know this?

Not at all

Perfectly

Dentro del bloque head, qué etiqueta sirve para añadir palabras clave para la indexación?

meta name=”keywords”

How well did you know this?

Not at all

Perfectly

Qué etiqueta sirve para cargar una hoja de estilos a una página html 5? Qué dos atributos principales tiene?

How well did you know this?

Not at all

Perfectly

Con qué etiqueta se carga una hoja de estilos alternativa?

How well did you know this?

Not at all

Perfectly

Con qué etiqueta se establece el título de la pestaña del navegador? Dentro de qué nodo se coloca?

Título, dentro del nodo head

How well did you know this?

Not at all

Perfectly

Qué atributo se usa en la etiqueta para indicar dónde se tiene que abrir el enlace? Qué opciones se usan para abrirlo en una pestaña nueva y en la misma ventana?

Se usa el atributo target

_blank: Abre el enlace en una nueva ventana o pestaña del navegador.
_self: Abre el enlace en la misma ventana o marco donde se encuentra el enlace (valor predeterminado si no se especifica).
_parent: Abre el enlace en el marco principal que contiene la página que contiene el enlace.
_top: Abre el enlace en la ventana completa del navegador, reemplazando cualquier marco existente.

How well did you know this?

Not at all

Perfectly

Qué atributo y cómo se usa en la etiqueta para navegar a otra parte del documento?

href”#identificador”

How well did you know this?

Not at all

Perfectly

Etiqueta: fragmento de texto enfatizado respecto a la frase que lo contiene

em:

En el examen no se puedeem> copiarp>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto importante o palabras clave

Strong:

Texto con una palabra destacadastrong>p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo

mark:

A continuacion viene un texto resaltadomark>p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual

There is a certain je ne sais quoii> in the air.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto que llama la atención pero sin importancia destacable (fines utilitarios)

The frobonitorb> and barbinatorb> components are fried.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto para nombres propios o escritura incorrecta intencionada

The seau> is full of fish.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)

<s>Precio antiguo del producto: $3.99 per bottles>

How well did you know this?

Not at all

Perfectly

Etiqueta: contenedor in-line sin significado especial (sirve para aplicar estilo al texto o agrupar elementos en línea)

span

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…

cite:

In the words of <cite class=”formato”>Charles Bukowskicite> - …

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto in-line con una cita corta
Con qué atributo se tiene que apuntar a la URL de donde se saca la cita?

El SEO es una disciplina que obsesiona a muchos expertos digitales sin embargo hay que tener en cuenta que <q cite=”https://francescricart.com/a-que-me-dedico-mejoro-webs-y-escribo-en-ellas/”>Es a tu audiencia a quien debes satisfacer y no a google.cite>.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Subíndice y superíndice

sup:

El resultado de 210sup> es 1024

sub:

Tenemos que hallar el valor de Xasub> en la ecuacionp>

How well did you know this?

Not at all

Perfectly

Etiqueta: Anotaciones menores pequeñas puntualizaciones

small:

Information obtained from <a href=”https://example.com/about.html”>example.coma> home page.small>

How well did you know this?

Not at all

Perfectly

Etiqueta: Termino definido en el texto circundante

dfn:

El <dfn id=”muro-de-berlin”>muro de Berlindfn> fue parte de la frontera…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Abreviatura o acrónimo

abbr:

El término <abbr title=”Kilómetro”>Kmabbr> es una unidad de longitud.

How well did you know this?

Not at all

Perfectly

Etiqueta: Salto de línea (nueva línea)

How well did you know this?

Not at all

Perfectly

Etiqueta: Entrada de información del usuario (generalmente, combinación de teclado)

kbd:

Pulsa las teclas <kbd>CTRLkbd>+<kbd>Tkbd>…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Salida de información de un programa informático

samp:

Cuando ingresé el comando, la computadora respondió <samp>Error: comando no encontradosamp>. Estoy perdido…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Variable (contexto matemático o informático)

var: \...donde \avar\> representa la longitud de la hipotenusa, y \bvar\> y \cvar\> representan las longitudes de los otros dos lados.p\>

Etiqueta: Indica una fecha/hora legible para humanos, con formato para máquinas opcional

\4 de Enerotime\>

Etiqueta: Información equivalente orientado a máquinas/programas

data: \Producto: \TV LED Full HDdata\>p\>

Etiqueta: Fragmento de código de un lenguaje de programación

code: con "pre" tiene la ventaja de que se respetará el formato: espacios, saltos de linea, etc \Deberías declarar la función así: \

function cambiarColor(elemento, evento) { ... }code\>, donde el

contenido de la función es representado por los puntos suspensivos.p\>





29



Anotaciones Ruby. Se utilizan para añadir anotaciones foneticas para la pronunciación de caracteres de Asia Oriental. Se suelen colocar encima del texto anotado




ruby
rt
rp:

\

漢 \Kanrt\>

字 \jirt\>

漢 \(rp\>

\Kanrt\>

\)rp\>

字 \(rp\>

\jirt\>

\)rp\>

ruby\>






30



Etiqueta: para dar un texto descriptivo a una tabla




Caption






31



Etiqueta: para agrupar visualmente varias celdas, por ejemplo con colores




colgroup, dentro del elemento table, hermano de thead o tbody

\

\

\

colgroup\>






32



Etiqueta: para indicar que es la cabecera de una tabla




\

\

\Destinoth\>

\En autoth\>

\En trenth\>

\En bicicletath\>

tr\>

thead\>






33



Etiqueta: para indicar visualmente el pie de la tabla




\

\

\Promedioth\>

\1 h 24 minth\>

\1 h 22 minth\>

\6 h 54 minth\>

tr\>

tfoot\>






34



Etiqueta: para indicar el cuerpo de una tabla




tbody: 

\

\

\Nueva Yorkth\>

\1 h 51 mintd\>

\1 h 22 mintd\>

\8 h 53 mintd\>

tr\>

\

\Allentownth\>

\1 h 11 mintd\>

\-td\>

\6 h 9 mintd\>

tr\>

\

\Readingth\>

\1 h 12 mintd\>

\-td\>

\5 h 40 mintd\>

tr\>

tbody\>






35



Etiqueta: fila de una tabla




tr

\

\Nueva Yorkth\>

\1 h 51 mintd\>

\1 h 22 mintd\>

\8 h 53 mintd\>

tr\>






36



Etiqueta: celda de una tabla




td: 

\

\Nueva Yorkth\>

\1 h 51 mintd\>

\1 h 22 mintd\>

\8 h 53 mintd\>

tr\>






37



Etiqueta: celda de una tabla pero con un formato resaltado, de cabecera ya esté en cabecera o no




th: 
\

\Allentownth\>

\1 h 11 mintd\>

\-td\>

\6 h 9 mintd\>

tr\>






38



Con qué etiquetas se da información al usuario cuando la tabla es compleja




caption, figcaption si la tabla es un elemento figure






39



Qué atributos de td sirve para indicar cuántas celdas a la derecha o abajo debe ocupar la celda?




colspan
rowspan






40



Qué es el elemento header y en qué se diferencia del head




In general, it may be said as a container element which may contain an introductory or a navigational content.

header element has nothing to do with the head element. And, it does not introduce any new section, but it is the head of a section.






41



Etiqueta: zona con enlaces de navegacion en el ambito de nuestro site




Nav






42



Etiqueta: representa una agrupación del contenido del que se trata en la pagina




Primera sección de la web
\

Primera sección de la web

\ Artículo 1 article\>

\ Artículo 2 article\>

\ etc article\>

section\>






43



Etiqueta: es un contenedor de bloques de contenido que se consideran independientes del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado, como por ejemplo, en la sindicación.




Primera sección de la web
 Artículo 1 
 Artículo 2 
 etc






44



Etiqueta: Representa información tangencialmente/ligeramente relacionada con el contenedor section/main/article/...




aside:

\

\ Texto 1 del aside p\>

\ Texto 2 del aside p\>

\ etc p\>

aside\>






45



Etiqueta:
representa el pie de un documento o contenedor section/main/article/...




footer

\

Todos los derechos reservados © 2020

footer\>






46



- Etiqueta: para ejecutar un script js
- Un atributo para ejecutar el script tan pronto esté disponible pero sin bloquear la carga del documento
- Un atributo para ejecutar el script cuando la página se haya terminado de cargar




scritp:  
- async (se ejecutará el script tan pronto como esté disponible pero sin bloquear la carga del documento)
- defer (se ejecutará el script cuando la pagina haya terminado de cargar)






47



Etiqueta: Es un bloque que tiene por defecto un comportamiento desplegable
Dentro, tiene una etiqueta para el título que se verá antes de desplegar




**details**:

 \

\<**summary**\>Más informaciónsummary\>

\Nombre del sujetoh2\>

\

details\>






48



Etiqueta: para mostrar un mensaje emergente




dialog:

\

\¡Hola, soy un mensaje!p\>

\





49



Atributo: Permite hacer cambios al usuario, pero afectan únicamente al DOM generado en cliente




contenteditable

\

Este contenido se puede editar por el usuario directamente en el browser

p\>






50



Atributo: para ocultar un elemento
Similar al comportamiento de display:none, no deja ni el espacio que ocuparía el elemento




hidden

\

Texto que está oculto

div\>






51



Etiqueta: Nos permite definir una zona de dibujo usada por el usuario o por algun(os) algortimos a traves de javascript+eventos




canvas:

\





52



```
Etiqueta: Existe un mecanismo interesante de reutilizacion llamado templates (hay que usar javascript para clonar la plantilla). Ej:
 var plantilla = document.getElementById("plantillaCapa");
 var clon = plantilla.cloneNode(true);
 document.body.appendChild(clon);
```




\