Flashcards
HTML5
Cards in this deck (32)
- 1Quais são os novos significados semanticos das tags 'i' e 'b' tags em HTML5?A tag 'i' representa no texto uma 'voz alternativa' ou 'humor'.
A tag 'b' representa um texto fora do estilo convencional. - 2Quais são bons exemplos para se usar a tag 'i'?-Designações taxonomicas.
-Termos Tecnicos
-Frases em outras linguas
-Um pensamento - 3Quais são bons exemplos para se usar a tag 'b?- Palavras chaves em um documento.
-Nome dos produtos em um review.
-Palavras Acionáveis em um software interativo.
-Article Lead - 4Qual os significados das tags 'em' e 'strong' em HTML5?O 'em' tag agora significa 'Ênfase no estresse'.
A tag 'strong' agora significa 'Importância Forte'
Exemplo:
Make sure to sign up before the day of the event,
September 16, 2013 - 5Como funciona a tag em HTML5 e qual a diferença entre e ?'The section element represents a generic document or application section'.
Definition section ^
Section vs Div
Uma não possui um significado semantico, mas a tem. Ela é usada para fazer um grupamento de conteúdo com temas relacionados.
Para entender se podemos substituir uma por devemos nos perguntar, todo esse conteúdo é relacionado?
Compro por exemplo a área de uma galeria ou catalogo, normalmente sections tem uma heading tag, mostrando que é um grupo. - 6Como funciona a tag em HTML5 e como podemos utiliza-la?'A group of introductory or navigational aids. ' W3C SPECIFICATION.
-Podemos ter varias em uma page.
- Apesar de usualmente aparecer no topo do documento ou sessão, sua definição é pelo conteúdo em vez de sua posição.
é para o HTML4
no HTML5 usamos:
Podemos colocar uma header dentro de uma section, devemos focar no contéudo e não nas posições. - 7Como funciona a tag em HTML5 e como podemos utiliza-la?'The footer element represents a footer for its nearest ancestor sectioning contet or sectioning root element.' - W3C SPECIFICATION
como header, o footer element não depende somente do posicionamento, mas sim do contéudo.
HTML4 - OLD:
,
podemos fazer um footer de uma em particular. - 8Como funciona a tag em HTML5 e como podemos utiliza-la?'Initially, the HTML5 spec defined the aside element as being "tangentially related to the content surrounding it." '
Contéudo tangivel relacionado ao redor significa que não é diretamente relacionado, mas expande o conteúdo que o cerca.
Usando em um elemento ele pode ser relacionado com esse particular .
Quando usamos fora de um , o elemento pode ficar mais relacionado ao site, como um sidebar mesmo.
-Pode ser substituido: - 9Como funciona a tag em HTML5 e como podemos utiliza-la?'The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.' - W3C SPECIFICATION.
The nav element is intended for 'Major navigation.'
ANTES: - 10Como funciona a tag em HTML5 e como podemos utiliza-la?article - 'The Article element represents a complete, or self-contained, composition in a document, page, aplication or site and that is, in principle, independently distributable or reusable, e.g. in syndication. ' W3C SPECIFICATION
Essencialmente um é um outro tipo de . É usado para Conteúdos relacionados independentes.
para definir se é um relacionado independente temos que nos perguntar, podemos syndicar o contéudo em um RSS ou Atom feed?
Exemplo Article:
Blog Post
Novas historias
News
Um comentario em um post
Um Review - 11Como funciona a tag em HTML5 e como podemos utiliza-la?'The main element represents the main content of the body of a document of application' - W3C SPECIFICATION.
O conteúdo da tag consiste em um contéudo diretamente relacionado com o topico central do documento ou funcionalidade central da aplicação.
-Não queremos mais de um em nosso documento.
-Não queremos um dentro de um , , , ou elements. - 12Como funciona em HTML5 e como podemos utiliza-la?'the element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document's meaning'
Um comoum uso para a tag é para uma imagem DENTRO de um - 13Como funciona em HTML5 e como podemos utiliza-la?'The figcaption is a element that represents a caption or legend for a figure'
Então se temos uma element, vamos adicionar nossa :
Description - 14Como funciona em HTML5 e como podemos utiliza-la?'The element represents either a time on a 24 hours clock, or a precise data in the proleptic Gregotian calendar, optionally with a time and time-zone offset.' W3C SPECIFICATION
2013-09-16
usamos o datatime='' para obter o formato desejado:
09/16/2016 - 15O que acontece se um navegador não suporta um novo tipo de do HTML5?ele transforma por padrão a para 'text.'
- 16Como funciona em HTML5 e como podemos utiliza-la?'The input element with a type attribute whose value is 'search' represents a one-line plain-text edit control for entering one of more search terms.' W3C.
então para fazer um elemento assim vamos criar:
//que já vai gerar um input box onde podemos limpar o contéudo com um x lateral, adicionalmente, há um suporte extra na versão mobile, pois o teclado do celular ganha o nome de 'search', ajudando na usabilidade, como no safari mobile. - 17Como funciona em HTML5 e como podemos utiliza-la?O input email se parece bastante com um input de texto regular, mas com algumas funções adicionais em mobile devices.
em HTML4:
para HTML5:
E novamente em navegadores como o safari mobile, teremos mais funções relacionadas adicionadas as nossas teclas para facilitar a usabilidade. - 18Como funciona em HTML5 e como podemos utiliza-la?O input 'url' funciona de forma muito parecida com uma entrada de texto regular, mas com algumas funcionalidades adicionais nas versões mobile.
Então novamente no mobile safari, vamos ter um keyboard com funcionalidades mais especificas como '/', '.com' - 19Como funciona em HTML5 e como podemos utiliza-la?O input do tipo 'date' representa um controlador que configura o valor do elemento como uma string que representa uma data.
// HTML4
//HTML5
retorna um design conveniente para selecionar uma data.
//já no mobile safari, vamos ter o 'data picker' padrão do ios. - 20Como funciona em HTML5 e como podemos utiliza-la?O 'tel' input se parece muito com o regular text input, mas possui algumas funcionalidades de usabilidade mobile devices.
HTML5
,
e então em nosso mobile safari, veremos que o teclado se transforma em um telefone para digitar e não no teclado convencional. - 21Como funciona em HTML5 e como podemos utiliza-la?É um tipo de input que nos permite definir um valor que vai representar um numero.
vai gerar um elemento onde podemos aumentar e diminuir o seu valor com 2 botões laterais. (como no site da winnfit)
Já em um navegador mobile como o safari o teclado muda para entradas do tipo numéricas. - 22Como funciona em HTML5 e como podemos utiliza-la?'O elemento input do tipo 'range' representa um controle impreciso para configurar o valor de uma string que representa um numero. '
Então o que vamos ter aqui é um slider que permite alterar o valor (aparece bastante em sites na área de filtrar produtos, uma bolinha que desliza. ) - 23Como funciona os , , , em HTML5 e como podemos utiliza-la?O input 'month' traz um datapicker para seleção de um mes, e o week para uma semana, o input do 'time' vai nos permitir selecionar alguma data (dia) e também UM HORÁRIO!
- 24Qual a diferença entre os inputs do tipo: 'datatime-local' vs 'datetime'O Datetime-local não possui associação com fuso horários.
O datetime possui. - 25Como funciona os em HTML5 e como podemos utiliza-la?O elemento input que possui o tipo de atributo 'color' representa um color-well control, para configurar o elemento com uma string que representa uma cor simples.
Vamos obter um toggle que nos permite selecionar um cor.
/*** FIM DOS INPUT TYPES ***/ - 26Quais são os novos elementos de que vemos no HTML5?-Datalist
-Keygen
-Output - 27Como funciona em HTML5 e como podemos utiliza-la?Exemplo de utilização:
(list e id precisam ser iguais para que o link funcione propriamente juntos)
//a estrutura é muito similar com o , podem o resultado é um que possui os valores predeterminados e sugere ao usuario esses valores conforme ele começa a digitar. - 28Quais são as novas atribuições de forms do HTML5?O html5 nos trás uma grande variedade de atributos de forms:
Placeholder, autofocus, autocomplete, required, pattern, list, multiple, novalidate, formnovalidate, form, formaction, formenctype, formmethod - 29Como funciona o atributo 'placeholder'?O atributo placeholder nos permite especificar uma mensagem e mostrar isso dentro de uma input, esconder a messagem quando começam a digitar e retornar quando o foco é perdido no input. - Quando o input continua em branco -
- 30Como funciona o atributo 'autofocus'?O atributo autofocus vai automaticamente focar em específicos inputs quando a pagina for renderizada:
para utilizar, vamos preciar apenas adicionar autofocus no elemento que queremos:
Então quando a pagina for carregada o elemento terá foco automatico. - 31Como funciona o atributo 'required'?Se nos adicionarmos a uma form HTML5 o atributo 'required' quando a form for submetida o usuario será notificado caso tenha algum erro como um campo em branco.
assim o usuario é obrigado a preencher para então submeter a , retornando uma mensagem falando para ele preencher o campo. - 32Como funciona o atributo 'pattern'?O atributo 'pattern' aceita uma expressão regular javascript que pode ser usada para validar uma form field que se encaixa com certo padrão.
exemplo:
o que queremos nesse padrão são 3 digitos de 0-9.
Information
- Description
- asa Technical Skills (Front-End Foundations ) Flashcards on HTML5, created by Victor Bini on 05/01/2017.
- Created by
- Victor Bini
- Views
- 4
- Rating