Aula 2

Elementos Block:

Os elementos block são aqueles que ocupam toda a largura disponível e começam numa nova linha. Alguns exemplos de elementos block incluem:

• <p> - parágrafo
• <div> - divisão genérica
• <h1> a <h6> - cabeçalhos
• <ul> e <ol> - listas não ordenadas e ordenadas
• <li> - itens de lista
• <table> - tabela
• <form> - formulário

Elementos Inline:

Os elementos inline são aqueles que ocupam apenas o espaço necessário e não começam uma nova linha. Alguns exemplos de elementos inline incluem:

• <a> - âncora (link)
• <span> - divisão genérica
• <strong> e <em> - texto enfatizado
• <img> - imagem
• <input> - campo de entrada
• <button> - botão

As media tags em HTML permitem especificar recursos de mídia, como imagens, vídeos ou áudios, para serem exibidos de acordo com as características do dispositivo do utilizador.

<img> Tag:

A tag <img> é utilizada para exibir imagens em uma página web. É um elemento inline que não requer uma tag de fecho e tem um único atributo src que especifica a URL da imagem.

<picture> Tag:

A tag <picture> é utilizada para fornecer várias versões de uma imagem com diferentes resoluções ou formatos para diferentes dispositivos ou condições de visualização. Ela contém uma ou mais tags <source> e uma tag <img>.

<picture>
	<source media="..." srcset="...">
	<source media="..." srcset="...">
	<img src="..." alt="...">
</picture>

<source> Tag:

A tag <source> é utilizada dentro da tag <picture> para especificar uma fonte de mídia alternativa para a imagem. Ela pode incluir o atributo srcset, que especifica uma lista de URLs para imagens em diferentes resoluções, e o atributo type, que especifica o tipo MIME da imagem.

É importante notar que a tag <img> dentro da tag <picture> serve como um fallback para browsers que não suportam a tag <picture> ou quando nenhuma das tags <source> corresponde ao dispositivo do utilizador.

<audio>

A tag <audio> é usada para incorporar conteúdo de áudio nas páginas web. Pode conter uma ou mais tags <source> para diferentes formatos de áudio e uma mensagem de fallback entre as tags de abertura e fecho para navegadores que não suportam a reprodução de áudio HTML5. Exemplo:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  O seu navegador não suporta o elemento de áudio.
</audio>

<video>

A tag <video> é usada para incorporar conteúdo de vídeo nas páginas web. Assim como a tag <audio>, pode conter uma ou mais tags <source> para diferentes formatos de vídeo e uma mensagem de fallback para navegadores que não suportam a reprodução de vídeo HTML5. Exemplo:

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  O seu navegador não suporta o elemento de vídeo.
</video>

Em resumo, a principal diferença entre a tag <img> e a tag <picture> é que a última permite fornecer várias versões de uma imagem para diferentes condições de visualização, enquanto a primeira é usada simplesmente para exibir uma única imagem.

A tag <input> é usada para criar vários tipos de campos de entrada de dados em formulários web. Alguns dos principais tipos de input incluem:

• Text: para entrada de texto.
• Password: para entrada de password, onde os caracteres são ocultados.
• Checkbox: para seleção de uma ou mais opções de uma lista.
• Radio: para seleção única entre várias opções.
• File: para upload de ficheiros.

É importante atribuir valores adequados aos atributos name e id para garantir que os dados do formulário sejam processados corretamente.

<select>

A tag <select> é usada para criar menus de seleção em formulários web. Contém uma ou mais tags <option>, que representam as opções disponíveis para seleção. Exemplo:

<select id="fruta" name="fruta">
  <option value="maca">Maçã</option>
  <option value="banana">Banana</option>
  <option value="laranja">Laranja</option>
</select>

O atributo name é crucial para identificar o valor selecionado quando o formulário é submetido.

Ao criar formulários com <input> e <select>, é importante considerar:

• A acessibilidade, garantindo que os utilizadores possam interagir com os campos facilmente.
• A validação dos dados, utilizando atributos como required, minlength e maxlength para garantir a integridade dos dados submetidos.
• A usabilidade, fornecendo feedback claro e orientações sobre como preencher os campos corretamente.

As tags de tabela em HTML são utilizadas para organizar e exibir dados tabulares de forma estruturada. As principais tags de tabela incluem:

<table>

A tag <table> é utilizada para criar uma tabela. Contém uma ou mais linhas, que por sua vez contêm células de dados representadas pela tag <tr>. Exemplo:

<table>
  <tr>
    <td>Celula 1</td>
    <td>Celula 2</td>
  </tr>
  <tr>
    <td>Celula 3</td>
    <td>Celula 4</td>
  </tr>
</table>

<th>

A tag <th> é utilizada para criar cabeçalhos de coluna ou linha em uma tabela. Deve ser utilizada dentro de uma tag <tr>. Exemplo:

<tr>
  <th>Nome</th>
  <th>Idade</th>
</tr>

<td>

A tag <td> é utilizada para criar células de dados em uma tabela. Deve ser utilizada dentro de uma tag <tr>. Exemplo:

<tr>
  <td>João</td>
  <td>30</td>
</tr>

Ao optar por uma tabela em HTML, é importante considerar as seguintes preocupações:

• A acessibilidade, garantindo que a tabela seja compreensível e navegável por utilizadores com deficiências visuais ou de mobilidade.
• A responsividade, tornando a tabela legível e utilizável em diferentes dispositivos e tamanhos de ecrã.
• A semântica, utilizando as tags de tabela de forma adequada e significativa para representar corretamente a estrutura dos dados.

As tabelas são mais apropriadas quando os dados a serem exibidos possuem uma estrutura tabular clara e organizada, como calendários, listas de preços, dados estatísticos, entre outros.