HTML Flashcards
O que é uma TAG em HTML?
Uma pagina divide seus elementos HTML em Tags, exemplo:
<h1>Isso é uma tag</h1>
HTML é uma linguagem interpretada ou compilada? Explique a diferença de cada
HTML é uma linguagem interpretada, não compilada. Isso significa que o navegador lê o
código HTML e o renderiza diretamente na página web, ao invés de compilar o código em um programa
executável como em outras linguagens de programação. Isso permite que as páginas HTML sejam
carregadas e renderizadas rapidamente, e também torna o desenvolvimento e a depuração mais
simples, pois é possível ver as alterações em tempo real ao atualizar a página no navegador
Pra que serve a <meta></meta> ?
É usada para informar ao navegador que o documento está
usando a codificação de caracteres UTF-8. Esta codificação inclui quase todos os caracteres de todos
os sistemas de escrita humanos e é o padrão de codificação de caracteres do HTML 5. Sem esta
declaração, o navegador pode não ser capaz de corretamente interpretar e exibir o texto.
Sobre elementos(tags) HTML:
O que faz a <h1> até <h6> ?
Define títulos de diferentes níveis, o h1 é o principal e vai diminuindo:
<h1>Título de Nível 1 (h1)</h1> <h2>Título de Nível 2 (h2)</h2> <h3>Título de Nível 3 (h3)</h3> <h4>Título de Nível 4 (h4)</h4> <h5>Título de Nível 5 (h5)</h5> <h6>Título de Nível 6 (h6)</h6>
Sobre elementos(tags) HTML:
O que faz a <p>?
Define um parágrafo
Sobre elementos(tags)HTML:
O que faz a <a>?</a>
As tags <a> criam links para outras páginas da web ou endereços de email.
O atributo href especifica o destino do link. Pode ser um URL (endereço de uma página na web) ou um endereço de email.
O texto entre as tags de abertura e fechamento <a> é o texto clicável que aparece na página, também conhecido como âncora.</a></a>
<a>Página 1</a>
Sobre elementos(tags)HTML:
O que faz a <img></img>?
A tag <img></img> é usada para exibir imagens na página.
O atributo src especifica o caminho para a imagem. Pode ser um caminho relativo para uma imagem local no mesmo diretório do arquivo HTML ou um URL para uma imagem externa na web.
O atributo alt fornece um texto alternativo para a imagem, que é exibido se a imagem não puder ser carregada ou para usuários com deficiência visual.
A tag <img></img> não possui uma tag de fechamento, é uma tag vazia que não contém conteúdo adicional.Exemplo:
<img src="https://www.example.com/imagem.png" alt="Descrição da Imagem Externa">
Sobre elementos(tags)HTML:
O que faz a <div>?
A <div> é usada para criar contêineres para diferentes seções da página.
Cada <div> é atribuída uma classe CSS, que é usada para aplicar estilos específicos a esses elementos.
<div>
<p>Rodapé da página.</p>
</div>
Sobre elementos(tags)HTML:
O que faz a <span>?</span>
A tag <span> é usada para envolver partes específicas do texto que você deseja estilizar ou manipular.
A classe CSS .destaque é definida no cabeçalho da página para estilizar o texto dentro de um <span> com a classe destaque.
A palavra “span” dentro do <span> com a classe destaque será exibida em negrito e vermelho de acordo com os estilos definidos.
Também é demonstrado o uso de estilos embutidos diretamente no atributo style do <span>, que altera a cor do texto para azul</span></span></span></span>
<style>
/* Estilo para realçar o texto dentro do span */
.destaque {
color: red;
font-weight: bold;
}
</style></head>
<body>
<h1>Exemplo de Uso da Tag span</h1>
<p>Este é um exemplo de como usar a tag <span> para destacar parte do texto.</p>
<p>Por exemplo, podemos usar a tag <span>span</span> para destacar esta palavra em negrito e vermelho.</p>
<p>Também podemos usar o <span>span</span> com estilos embutidos diretamente no atributo de estilo.</p>
</body>
</html>
</span></p></body>
Sobre elementos(tags)HTML:
O que faz a <ul> e <li>?
A tag <ul> é usada para criar uma lista não ordenada.
Dentro da <ul>, cada item da lista é representado pela tag <li>.
No primeiro <ul>, criamos uma lista de compras com quatro itens.
No segundo <ul>, temos uma lista de tarefas com três itens.
A ordem dos itens na lista não ordenada não é importante. Eles são apenas itens em uma lista.
<ul>
<li>Maçãs</li>
<li>Bananas</li>
<li>Laranjas</li>
<li>Morangos</li>
</ul>
Sobre elementos(tags)HTML:
O que faz a <ol> e <li>?
Em HTML, <ol> e <li> são elementos usados para criar listas ordenadas (listas numeradas) e não ordenadas (listas com marcadores), respectivamente.
<ol> é a abreviação de "ordered list" (lista ordenada). Esse elemento é usado para criar uma lista na qual os itens são numerados automaticamente, geralmente começando de 1.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li> é a abreviação de "list item" (item de lista). Este elemento é usado para definir cada item dentro de uma lista, seja uma lista ordenada <ol> ou uma lista não ordenada <ul>.
</ul></ol></li></ol>
Sobre elementos(tags)HTML:
O que fazem as tags <table>, <tr> e <td>?
<table> é usada para definir a estrutura da tabela, <tr> é usada para definir linhas dentro dessa tabela, e <td> é usada para definir células de dados dentro das linhas.
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
</td></tr></table>
Sobre elementos(tags)HTML:
O que faz a tag <th>?
É usada para definir cabeçalhos de uma tabela. Ela representa uma célula de cabeçalho em uma tabela e é usada para rotular as colunas ou as linhas de uma tabela, dependendo de onde é colocada.
<table>
<tr>
<th>Código</th>
<th>Descrição</th>
</tr>
<tr>
<td>001</td>
<td>Produto A</td>
</tr>
<tr>
<td>002</td>
<td>Produto B</td>
</tr>
</table>
Nesse exemplo, <th> é usado para definir os cabeçalhos das colunas, “Código” e “Descrição”.
Sobre elementos(tags)HTML:
O que fazem as tags <form>, <input></input>,
<label>?</label>
<form>: Define um formulário HTML que pode conter vários elementos de entrada, como campos de texto, botões, caixas de seleção, entre outros.
<form>
<!-- Elementos de entrada vão aqui -->
</form>
<input></input>: É usado para criar controles interativos dentro de um formulário, como campos de texto, botões, caixas de seleção, etc.
<input></input>
<input></input>
<input></input>
<label>: Define um rótulo descritivo para um elemento de entrada em um formulário. É útil para acessibilidade, pois conecta o texto descritivo ao campo de entrada correspondente.
<label>Nome de usuário:</label>
<input></input>
</label></form>
Sobre elementos(tags)HTML:
O que faz a tag <button>?</button>
Cria um botão clicável
<button>Enviar</button>
<button>Clique-me</button>
Sobre elementos(tags)HTML:
O que fazem as tags <select> e <option>?</option></select>
As tags <select> e <option> são usadas em conjunto para criar menus de seleção (também conhecidos como dropdowns) em formulários HTML.</option></select>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Sobre elementos(tags)HTML:
O que faz a tag <textarea>?</textarea>
Define um campo de entrada de texto de várias linhas
Sobre elementos(tags)HTML:
O que fazem as tags <header>, <main>,
<footer>?
</footer>
<header> é usado para o cabeçalho da página, <main> é usado para o conteúdo principal, e <footer> é usado para o rodapé. Essas tags ajudam a organizar semanticamente o conteúdo de uma página da web, facilitando a compreensão e manutenção do código.
</footer></main></header>
Sobre elementos(tags)HTML:
O que faz a tag <nav>?
A tag <nav> em HTML é usada para definir uma seção de navegação em uma página da web. Ela é destinada a conter links de navegação que ajudam os usuários a se deslocarem pelo site ou para outras partes da página.
<nav>
<ul>
<li><a>Página Inicial</a></li>
<li><a>Sobre</a></li>
<li><a>Produtos</a></li>
<li><a>Contato</a></li>
</ul>
</nav>
Sobre elementos(tags)HTML:
O que faz a tag <article>?
A tag <article> é usada para envolver um conteúdo que pode ser distribuído e reutilizado de forma independente de outras partes do site. Isso significa que um <article> deve ser capaz de ser isolado e entendido sem depender do restante do conteúdo da página.
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo...</p>
<footer>
<p>Publicado em: <time>25 de Março de 2024</time></p>
</footer>
</article>
Neste exemplo, o <article> envolve todo o conteúdo do artigo, incluindo o título, o conteúdo e informações de rodapé, como a data de publicação. Isso permite que o artigo seja tratado como uma unidade independente, o que é útil para indexação por mecanismos de busca e para acessibilidade, facilitando a navegação e compreensão do conteúdo da página.
Sobre elementos(tags)HTML:
O que faz a tag <section>?
A tag <section> é genérica e pode ser usada para envolver qualquer tipo de conteúdo relacionado, como artigos, posts de blog, grupos de informações, entre outros.
<section>
<h2>Serviço 1</h2>
<p>Descrição do Serviço 1...</p>
</section>
<section>
<h2>Serviço 2</h2>
<p>Descrição do Serviço 2...</p>
</section>
<section>
<h2>Serviço 3</h2>
<p>Descrição do Serviço 3...</p>
</section>
este exemplo, cada <section> envolve um conjunto de informações relacionadas a um serviço específico, facilitando a organização e compreensão do conteúdo da página.
Sobre elementos(tags)HTML:
O que faz a tag <aside>?
O conteúdo dentro da tag <aside> é normalmente apresentado em um formato que é separado do conteúdo principal, como uma barra lateral, uma caixa de informações relacionadas ou um bloco de conteúdo destacado.
<main>
<article>
<h1>Título do Artigo</h1>
<p>Conteúdo do artigo...</p>
</article>
</main>
<aside>
<h2>Artigos Relacionados</h2>
<ul>
<li><a>Artigo Relacionado 1</a></li>
<li><a>Artigo Relacionado 2</a></li>
<li><a>Artigo Relacionado 3</a></li>
</ul>
</aside>
A tag <aside> é útil para ajudar a organizar e estruturar o layout de uma página da web, especialmente quando se trata de fornecer informações complementares ou secundárias aos visitantes do site.
Sobre elementos(tags)HTML:
O que fazem as tags <figure> e</figure>
<figcaption>?
</figcaption>
<figure>: A tag <figure> é usada para envolver qualquer tipo de conteúdo de mídia, como imagens, gráficos, diagramas, vídeos, etc. Ela cria uma relação semântica entre o conteúdo de mídia e sua legenda. Por exemplo:
figure>
<img></img>
<figcaption>Legenda da imagem</figcaption>
</figure>
O uso das tags <figure> e <figcaption> ajuda a melhorar a acessibilidade e a compreensão do conteúdo de mídia em uma página da web, fornecendo descrições contextuais e legíveis por máquina para elementos de mídia. Além disso, essas tags também ajudam os mecanismos de busca a entenderem melhor o conteúdo das páginas, o que pode ser benéfico para o SEO (otimização para mecanismos de busca).
</figcaption></figure></figure>
Sobre elementos(tags)HTML:
O que faz a tag <iframe>?
A tag <iframe> em HTML é usada para incorporar outro documento HTML dentro de uma página da web. Ela cria uma área retangular que exibe o conteúdo de outro documento HTML, como uma página da web externa, um vídeo, um mapa, entre outros tipos de conteúdo.
O conteúdo dentro de um <iframe> é definido pelo atributo src, que especifica a URL do documento a ser incorporado.
<iframe></iframe>
Título da Página
Este é um parágrafo de exemplo. Lorem ipsum dolor sit amet...