HTML5 - Português Flashcards
Quem criou o HTML?
Tim Berners-Lee
Quais is elementos da estrutura base do HTML5?
1) <!DOCTYPE html> informa que usa html
2) <html> tag root
3) <head> metadados, informações que são passadas para o browser sobre a nossa página
3.1) <title> aparece na aba do browser. Fica dentro do head</title>
5) <body> todo o conteúdo da página
Como se organizam os elementos da estrutura base do HTML5?
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Tag de títulos
<h1>
<h2>
<h3>
<h4>
<h5>
</h5></h4></h3></h2></h1>
Tag de parágrafo
<p>
</p>
Tag que coloca uma linha divisória na página
<hr></hr>
Tag que Deixa o texto em negrito
<strong> ou <b></b></strong>
Tag que
Tag que risca a palavra no meio
<s>
</s>
Tipos de listas no HTML
Ordenadas: 1, 2, 3 ….
Não ordenadas: não tem ordem
Tag para listas não ordenadas
<ul>
</ul>
Tag para criar listas ordenadas
<ol>
</ol>
Tag para os elementos filhos de listas ordenadas e não ordenadas
<li>
</li>
tag que dá um espaço entre linhas
<br></br>
O que significa o termo refatorar?
refazer partes do código
O que significa o termo identar?
organizar as hierarquias de colunas
Atalho CTRL+D, faz o que?
Selecionando uma palavra e apertando CTRL+D vc consegue selecionar todas as palavras iguais àquela
Quais são as duas principais tags para blocos de códigos?
<div> e <span>
</span></div>
O que faz a tag <div>?
Organiza um bloco de códigos
colocar ela em volta de blocos de códigos
sempre começa em uma nova linha e pega o máximo da tela que puder
O que faz a tag <span>?</span>
Organiza um bloco menor de código
não começa em uma nova linha e pega um espaço menor
Atributos html, o que são?
são palavras especiais usadas dentro da tag de abertura para controlar o comportamento do elemento. Os atributos HTML são um modificador de um tipo de elemento HTML. <tag name=’’valor’’></tag>
tag e atributo para incluir um link
____<a href=´´link´´> Texo que vc quer que apareça </a>.____
Se a <a>tag não tiver nenhum hrefatributo, ela será apenas um espaço reservado para um hiperlink.</a>
Qual é a tag usada para incorporar uma imagem em uma página HTML?
A <img></img>tag cria um espaço de retenção para a imagem referenciada. A <img></img>tag tem dois atributos obrigatórios:
src - Especifica o caminho para a imagem
alt - Especifica um texto alternativo para a imagem, se a imagem por algum motivo não puder ser exibida.
<img src=´´img/example.png´´> </img>
Dica: Para vincular uma imagem a outro documento, simplesmente aninhe a <img></img>tag dentro de uma tag <a> (veja o exemplo abaixo).</a>
Atributo que ao clicar no link, ele abre em uma nova página.
target=’’_blank’’
Estrutura básica geral de uma tabela
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<<thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</tbody>
</table>
</thead></thead></table>
Explicação da Estrutura básica geral de uma tabela
thead e tbody são tags semânticas que servem apenas para organização.
o tr introduz uma nova linha na tabela, o th ou td introduz o elemento das colunas dessa linha
para a tabela ter borda, é necessário incluir o parâmetro border=”1”
Para o título ficar logo acima da tabela, sem nenhum espaço entre eles, usa-se <caption> enquadrando a tag de títulos <h></h>
Estrutura de um forms no HTML
<form>
<label>First name:</label>
<input></input><br></br><br></br>
<label>Last name:</label>
<input></input><br></br><br></br>
<input></input>
</form>
action= {destino do forms}
<input></input>
A <input></input>tag especifica um campo de entrada onde o usuário pode inserir dados.
<label></label>
Sempre use a tag <label> para definir rótulos para <input></input></label>
Os diferentes tipos de entrada (<input></input>) são os seguintes:
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>
<input></input>(valor padrão)
<input></input>
<input></input>
<input></input>
Atributo autocomplete
Tag para criar uma lista de seleção suspensa
<select id=”cars”name=”cars”>
<option>Volvo</option>
<option>Saab</option>
<option>Fiat</option>
<option>Audi</option>
</select>
Tag que é usada para mostrar um vídeo em uma página da web.
<video>
<source></source>
<source></source>
Your browser does not support the video tag.
</video>
Descrição tags de vídeo
O controls atributo adiciona controles de vídeo, como reproduzir, pausar e volume.
É uma boa ideia sempre incluir atributos height e width. Se a altura e a largura não estiverem definidas, a página poderá piscar enquanto o vídeo é carregado
O <source></source>elemento permite que você especifique arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.
O texto entre as tags <video>e </video>só será exibido em navegadores que não suportam o <video>elemento.</video>
Para iniciar um vídeo automaticamente, use o autoplayatributo: <video>...</video>
Adicione muted depois autoplay para permitir que seu vídeo comece a ser reproduzido automaticamente (mas sem som):
O elemento HTML <audio></audio>
é usado para reproduzir um arquivo de áudio em uma página da web.
<audio>
<source></source>
<source></source>
Your browser does not support the audio element.
</audio>
O controlsatributo adiciona controles de áudio, como reproduzir, pausar e volume.
O <source></source>elemento permite que você especifique arquivos de áudio alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido.
O texto entre as tags <audio>e </audio>só será exibido em navegadores que não suportam o <audio>elemento.</audio>
O que são elementos semânticos?
O que são elementos semânticos?
Um elemento semântico descreve claramente seu significado tanto para o navegador quanto para o desenvolvedor.
Exemplos de elementos não semânticos : <div>e <span>- Não diz nada sobre o seu conteúdo.</span>
Exemplos de elementos semânticos : <form>, <table>, e <article>- Define claramente seu conteúdo.
Em HTML existem alguns elementos semânticos que podem ser usados para definir diferentes partes de uma página web:
Semântica: <section>
O <section>elemento define uma seção em um documento.
De acordo com a documentação HTML do W3C: “Uma seção é um agrupamento temático de conteúdo, normalmente com um título.”
Exemplos de onde um <section>elemento pode ser usado:
Capítulos
Introdução
Novos itens
Informações de contato
Semântica: <article>
O <article>elemento especifica conteúdo independente e independente.
Um artigo deve fazer sentido por si só e deve ser possível distribuí-lo independentemente do resto do site.
Exemplos de onde o <article>elemento pode ser usado:
Postagens no fórum
Postagens no blog
Comentários do usuário
Cartões de produto
Artigos de jornal
Semântica: <header>
O <header>elemento representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação.
Semântica: <header>
Elemento HTML <cabeçalho>
O <header>elemento representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação.</cabeçalho>
Um <header>elemento normalmente contém:
um ou mais elementos de título (<h1> - <h6>)
logotipo ou ícone
informações de autoria
Nota: Você pode ter vários <header>elementos em um documento HTML. No entanto, <header>não pode ser colocado dentro de um <footer>ou <address>outro <header>elemento.
Semântica: <footer>
O <footer>elemento define um rodapé para um documento ou seção.
Um <footer>elemento normalmente contém:
informações de autoria
Informações sobre direitos autorais
informações de contato
Mapa do site
voltar ao topo links
documentos relacionados
Você pode ter vários <footer>elementos em um documento.
Semântica: <nav>
O <nav>elemento define um conjunto de links de navegação.
Observe que NEM todos os links de um documento devem estar dentro de um <nav>elemento. O <nav>elemento destina-se apenas a grandes blocos de links de navegação.
Navegadores, como leitores de tela para usuários com deficiência, podem usar esse elemento para determinar se devem omitir a renderização inicial desse conteúdo.
Semântica: <aside>
O <aside>elemento define algum conteúdo além daquele em que está colocado (como uma barra lateral).
O <aside>conteúdo deve estar indiretamente relacionado ao conteúdo circundante.
