HTML - HackMD

# HTML HTML é a abreviação de HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto. É uma linguagem de marcação utilizada para criar documentos que podem ser visualizados em navegadores web. O HTML é composto por uma série de tags que são utilizadas para estruturar o conteúdo do documento. Cada tag possui uma função específica, como definir um parágrafo, uma imagem, uma lista, uma tabela, um formulário, entre outras. ## Semantica A semântica em HTML é a maneira de fornecer significado e estrutura para o conteúdo em uma página da Web, por meio do uso de elementos HTML que refletem com precisão o tipo de conteúdo que está sendo apresentado. Cada elemento HTML tem uma função específica e uma semântica clara, que deve ser utilizada corretamente para que a página seja acessível e compreensível para usuários e também para ferramentas automatizadas, como mecanismos de busca e leitores de tela. A semântica em HTML ajuda a melhorar a acessibilidade da página, fornecendo informações precisas sobre o conteúdo e sua estrutura, permitindo que usuários com deficiências visuais, por exemplo, possam acessar o conteúdo por meio de leitores de tela. Na construção de um site, é importante utilizar as tags HTML com semântica correta para melhorar a acessibilidade, a usabilidade e a otimização para mecanismos de busca. Abaixo, estão algumas das principais tags e suas semânticas na construção de um site: - `<html>`: define o início e o fim do documento HTML; - `<head>`: contém informações sobre o documento, como o título da página e a ligação com arquivos externos de estilo e script; - `<meta>`: fornece metadados sobre a página, como a descrição e palavras-chave para mecanismos de busca; - `<title>`: define o título da página, que é exibido na barra de título do navegador; - `<body>`: define o conteúdo principal da página; - `<header>`: define o cabeçalho da página, geralmente contendo o logotipo, o menu e outras informações importantes; - `<nav>`: define a seção de navegação da página; - `<main>`: define o conteúdo principal da página; - `<section>`: define uma seção da página, como um artigo ou uma seção de comentários; - `<article>`: define um artigo independente e completo, como uma postagem de blog ou um artigo de notícias; - `<aside>`: define conteúdo relacionado ou secundário, como um bloco de anúncios ou um menu de categorias; - `<footer>`: define o rodapé da página, geralmente contendo informações de contato e direitos autorais. ## Tags 1. `<html>`: Define o início e o fim do documento HTML. 2. `<head>`: Contém informações sobre o documento HTML, como o título e os metadados. 3. `<title>`: Define o título do documento HTML que aparece na aba do navegador. 4. `<body>`: Contém todo o conteúdo visível do documento HTML. 5. `<h1>`-`<h6>`: Define cabeçalhos de diferentes níveis (do maior ao menor). 6. `<p>`: Define um parágrafo. 7. `<a>`: Define um hyperlink. 8. `<img>`: Define uma imagem. 9. `<ul>`: Define uma lista não ordenada. 10. `<ol>`: Define uma lista ordenada. 11. `<li>`: Define um item em uma lista. 12. `<table>`: Define uma tabela. 13. `<tr>`: Define uma linha em uma tabela. 14. `<th>`: Define uma célula de cabeçalho em uma tabela. 15. `<td>`: Define uma célula de dados em uma tabela. 16. `<form>`: Define um formulário. 17. `<input>`: Define um campo de entrada de dados em um formulário. 18. `<button>`: Define um botão clicável em um formulário. 19. `<select>`: Define uma lista suspensa em um formulário. 20. `<option>`: Define uma opção em uma lista suspensa. 21. `<code>`: Define um código formatado e alinhado 22. `<abbr>`: Define uma abreviação com uma explicação ## Formatação de Texto Em HTML, é possível formatar o texto de várias maneiras diferentes, incluindo negrito, itálico, sublinhado, cores, tamanho da fonte, entre outras opções. Para fazer isso, você pode usar tags HTML específicas que são projetadas para formatar o texto. 1. **Negrito:** `<b>` ou `<strong>` - Ambas as tags podem ser usadas para enfatizar o texto com negrito. A diferença é que `<strong>` é usada para marcar o texto com importância semântica, enquanto `<b>` é usada apenas para fins visuais. 2. **Itálico:** `<i>` ou `<em>` - Ambas as tags podem ser usadas para enfatizar o texto com itálico. A diferença é que `<em>` é usada para marcar o texto com importância semântica, enquanto `<i>` é usada apenas para fins visuais. 3. **Sublinhado:** `<u>` - Esta tag é usada para sublinhar o texto. 4. **Tachado:**`<s>` ou `<del>` - Ambas as tags podem ser usadas para tachar o texto, indicando que ele foi removido ou está obsoleto. A diferença é que `<del>` é usada para marcar o texto com importância semântica, enquanto `<s>` é usada apenas para fins visuais. 5. **Alinhamento:** `<div>` ou `<p>` - Ambas as tags podem ser usadas para alinhar o texto. A diferença é que `<div>` é usada para agrupar elementos e aplicar estilos a eles em conjunto, enquanto `<p>` é usada para definir um parágrafo e criar uma nova linha antes e depois do texto. ### Cabecalho Em HTML, as tags `<h1>` a `<h6>` são usadas para definir os títulos e subtítulos em uma página web. O "h" em `<h1>` a `<h6>` significa "heading" em inglês, que significa "cabeçalho" em português. Cada uma dessas tags representa um nível diferente de cabeçalho, com `<h1>` sendo o nível mais alto e `<h6>` o mais baixo. Isso significa que `<h1>` deve ser usado para o título principal da página e `<h6>` deve ser usado para subtítulos menos importantes. ``` <body> <h1>Título Principal</h1> <h2>Subtítulo</h2> <h3>Subtítulo Menor</h3> <h4>Subtítulo Menor</h4> <h5>Subtítulo Menor</h5> <h6>Subtítulo Menor</h6> </body> ``` ### Parágrafo **Um parágrafo em HTML é definido usando a tag `<p>`. Essa tag é usada para marcar um bloco de texto que representa um parágrafo.** `<p>Este é um exemplo de um parágrafo em HTML. Ele contém algum texto que será exibido como um bloco separado.</p>` ### Comentário Para comentar no codigo utilize o comando `` ``` <body>  <p> Tudo que o sol toca... </p> </body> ``` ## Listas Em HTML, existem três tipos de listas: * **listas ordenadas (`<ol>`)** * **listas não ordenadas (`<ul>`)** * **listas de definição (`<dl>`).** Cada item da lista é definido usando a tag `<li>`, que significa "item da lista". A lista ordenada (`<ol>`) é usada para criar uma lista numerada, onde cada item é numerado em ordem sequencial. O número padrão para cada item é um número arábico, mas você pode usar o atributo `type` para alterar o tipo de número, como letras maiúsculas ou minúsculas, números romanos maiúsculos ou minúsculos, entre outros. <ol type="a"> <li>Acordar <li>Escovar os dentes <li>Tomar café </ol> A lista não ordenada (`<ul>`) é usada para criar uma lista sem ordem numérica, onde cada item é precedido por um símbolo ou um marcador. O símbolo padrão para cada item é um ponto preto, mas você pode usar o atributo `type` para alterar o tipo de símbolo, como círculos, quadrados, entre outros. <ul type="disc"> <li> Pão </li> <li> Hamburguer </li> <li> Queijo </li> <li> Presunto </li> </ul> A lista de definição (`<dl>`) é usada para criar uma lista de termos e suas definições correspondentes. Cada item da lista é definido usando as tags `<dt>` (termo) e `<dd>` (definição). <dl> <dt>Termo 1</dt> <dd>Definição 1</dd> <dt>Termo 2</dt> <dd>Definição 2</dd> <dt>Termo 3</dt> <dd>Definição 3</dd> </dl> ## Links e Hiperlinks Links em HTML são usados para criar ligações entre diferentes páginas web e recursos on-line, permitindo que os usuários naveguem pela web com facilidade. Para criar um link em HTML, você precisa usar a tag `<a>` (anchor), que é seguida pelo atributo `href` (hypertext reference), que define o endereço da página web ou do recurso on-line ao qual o link leva. Dentro da tag `<a>`, você pode incluir o texto ou imagem que será clicado para seguir o link. **Link Padrão** <p> Acessando o <a href="https://www.youtube.com">youtube</a> </p> **Link Absoluto** -> Target='_blank' (abre numa nova aba) => Target='_self' (abre na mesma aba) <p> Acessando o <a href="https://www.youtube.com" target="_blank" rel="external">youtube</a></p> **Link Relativo** -> Leva para outra página/arquivo do site <p> 1° página do site. Acesse a 2° página clicando <a href="Links pag2.html" target="_self" rel="next">aqui</a> </p> **Links para Download** ```htmlembedded <ol> <li> Baixar o livro <a href="10 - Ligações em toda parte.pdf" download="10 - Ligações em toda parte.pdf" type="application.pdf">Ligações em toda parte</a> em pdf</li> <li> Baixar o livro <a href="10 - Ligações em toda parte.rar" download="10 - Ligações em toda parte.rar" type="application.zip">Ligações em toda parte</a> no formato zip</li> </ol> ``` ## Imagens Em HTML, as imagens são inseridas na página usando a tag `<img>`. A tag `<img>` é uma tag vazia, o que significa que não precisa de uma tag de fechamento. A tag `<img>` tem um único atributo obrigatório, que é o `src`, que especifica o caminho para o arquivo de imagem que você deseja exibir. ```htmlembedded <img src="caminho/para/imagem.jpg" alt="Descrição da imagem"> ``` O atributo `alt` é usado para fornecer uma descrição da imagem para usuários que não podem visualizar a imagem, como usuários com deficiência visual ou usuários com conexões lentas à internet. O valor do atributo `alt` deve ser uma descrição precisa do conteúdo da imagem. Além disso, existem vários outros atributos opcionais que você pode usar para especificar o tamanho da imagem, a largura e altura da imagem, a borda da imagem, entre outros. `<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" width="400" height="300" border="0">` Você também pode usar a tag `<figure>` para adicionar uma legenda à sua imagem. A tag `<figure>` envolve a tag `<img>` e a tag `<figcaption>` é usada para definir a legenda. <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-ctnvIdqmajwymQ9U9YB5-OOBfamIggoPaQ&usqp=CAU" alt="Descrição da imagem"> <figcaption>???</figcaption> </figure> **Ao inserir imagens em seu código HTML, é importante lembrar de otimizá-las para a web, usando formatos de arquivo apropriados e dimensionando-as para o tamanho correto e lembrar dos direitos autorais. Isso ajuda a garantir que suas páginas carreguem rapidamente e forneçam uma boa experiência do usuário.** ### Sites de Fotos e Ferramentas >**Banco de dados de fotos** - Google imagens (com filtro de direitos autorais) - [Pexels](https://www.pexels.com/pt-br/) - [Pixabay](https://pixabay.com/pt/) >**Ferramentas de edição** - [Compress Jpeg](https://compressjpeg.com/pt/) - [Easy Resize](https://www.easy-resize.com/pt/) - [Pixlr X](https://pixlr.com/br/x/) - [Ez Gif](https://ezgif.com/maker) - [Imagem Map](https://www.image-map.net) - Cria uma imagem com links atrelados em determinada coordenada >**Icones e Vetores** - [Flaticon](https://www.flaticon.com/br/) - [Icon archive ](https://www.iconarchive.com) ## Tabelas As tabelas em HTML são usadas para exibir dados em formato tabular. A tag principal para criar uma tabela em HTML é a tag `<table>`. Dentro da tag `<table>`, você precisa incluir uma ou mais tags `<tr>` para cada linha da tabela e dentro de cada tag `<tr>`, você precisa incluir uma ou mais tags `<td>` para cada célula da tabela. Pode-se usar a tag `<caption>` para adicionar um título à sua tabela. <table> <caption>Título da tabela</caption> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr> <td>João</td> <td>30</td> </tr> <tr> <td>Maria</td> <td>25</td> </tr> </table> A tag `<th>` é usada para definir o cabeçalho da tabela. A diferença entre `<th>` e `<td>` é que `<th>` é usado para cabeçalhos de coluna e `<td>` é usado para dados. Outros atributos que você pode adicionar à tag `<table>` incluem `border`, `cellspacing` e `cellpadding` para controlar a aparência da tabela. > Aqui, `border="1"` define a largura da borda da tabela, `cellspacing="0"` define o espaçamento entre as células da tabela e `cellpadding="5"` define o preenchimento dentro de cada célula da tabela. <table border="3" cellspacing="0" cellpadding="5" style="text-align: center;" width="200px"> <tr> <th>Nome</th> <th>Idade</th> </tr> <tr> <td>João</td> <td>30</td> </tr> <tr> <td>Maria</td> <td>25</td> </tr> </table> ## Iframes A tag `<iframe>` em HTML é usada para incorporar uma página da web em outra página da web. É útil quando você deseja exibir conteúdo de um site em outro site sem redirecionar o usuário para a página original. Por exemplo, você pode usar um `<iframe>` para incorporar um mapa do Google Maps em seu próprio site. `<iframe src="URL"></iframe>` <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d69949.9897518481!2d-43.26109176671408!3d-22.865614749906324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1683338301561!5m2!1spt-BR!2sbr" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> >Parâmetros - `src`: especifica a URL do conteúdo a ser incorporado no iframe. - `frameborder`: define se deve ser exibida uma borda ao redor do iframe. O valor padrão é 1 (exibe a borda), mas pode ser alterado para 0 (não exibe a borda). - `scrolling`: define se deve ser exibida uma barra de rolagem no iframe. O valor padrão é "auto", que exibe a barra de rolagem apenas quando necessário. Outras opções incluem "yes" (sempre exibe a barra de rolagem), "no" (nunca exibe a barra de rolagem) e "scroll" (sempre exibe a barra de rolagem, mesmo que não seja necessário). - `name`: define um nome para o iframe, que pode ser usado como destino de links ou como destino de redirecionamentos. - `sandbox`: define um conjunto de restrições de segurança para o iframe, como restrições de acesso a cookies, restrições de scripts, etc. - `allowfullscreen`: define se o iframe pode ser exibido em modo de tela cheia. O valor padrão é "false", mas pode ser alterado para "true". ## Tipos de Entradas Existem vários tipos de entradas que podem ser criadas em HTML usando a tag `<input>`. Alguns dos tipos mais comuns são: - `text`: cria um campo de texto simples onde o usuário pode digitar texto. - placeholder: Legenda que fica dentro campo de texto ```htmlembedded <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" placeholder="Digite seu nome"> ``` - `password`: cria um campo de texto onde o texto digitado é ocultado por asteriscos ou pontos para proteger a privacidade do usuário. ```htmlembedded <label for="senha">Senha:</label> <input type="password" id="senha" name="senha"> ``` - `email`: cria um campo de texto onde o usuário deve digitar um endereço de e-mail válido. ```htmlembedded <label for="email">E-mail:</label> <input type="email" id="email" name="email"> ``` - `number`: cria um campo de texto onde o usuário só pode digitar números. ```htmlembedded <label for="idade">Idade:</label> <input type="number" id="idade" name="idade"> ``` - `date`: cria um campo de entrada de data para que o usuário possa selecionar uma data no calendário. ```htmlembedded <label for="data-nascimento">Data de Nascimento:</label> <input type="date" id="data-nascimento" name="data-nascimento"> ``` - `time`: cria um campo de entrada de tempo para que o usuário possa selecionar uma hora do dia. ```htmlembedded <label for="hora-entrada">Hora de entrada:</label> <input type="time" id="hora-entrada" name="hora-entrada"> ``` - `checkbox`: cria uma caixa de seleção que o usuário pode marcar ou desmarcar. ```htmlembedded <label for="lembrar-me">Lembrar-me</label> <input type="checkbox" id="lembrar-me" name="lembrar-me"> ``` - `radio`: cria um botão de opção que permite ao usuário selecionar uma única opção de uma lista de opções. ```htmlembedded <label>Selecione uma opção:</label><br> <input type="radio" id="opcao1" name="opcao" value="opcao1"> <label for="opcao1">Opção 1</label><br> <input type="radio" id="opcao2" name="opcao" value="opcao2"> <label for="opcao2">Opção 2</label><br> <input type="radio" id="opcao3" name="opcao" value="opcao3"> <label for="opcao3">Opção 3</label> ``` - `submit`: cria um botão que envia o formulário para o servidor quando o usuário o pressiona `<input type="submit" value="Enviar">` - `reset`: cria um botão que redefine todos os campos do formulário para seus valores padrão quando o usuário o pressiona. `<input type="reset" value="Limpar">` ### Label A tag `<label>` é usada em HTML para associar um rótulo descritivo a um elemento de formulário. O rótulo geralmente contém o nome do campo que o elemento de formulário representa, tornando mais fácil para o usuário entender o que deve ser inserido no campo. O uso da tag `<label>` é recomendado para melhorar a acessibilidade do formulário, pois permite que o usuário clique no rótulo para selecionar o campo associado. Isso é especialmente útil em dispositivos móveis, onde os campos de formulário podem ser difíceis de selecionar com precisão. A tag `<label>` deve ter um atributo "for" que indica qual campo do formulário ela está associada. Esse atributo deve ter o mesmo valor do atributo "id" do campo correspondente. Alternativamente, o campo do formulário pode ser colocado dentro da tag `<label>` sem a necessidade de usar o atributo "for". ### TextArea A tag `textarea` em HTML é usada para criar um campo de texto multi-linha. É frequentemente usado em formulários para permitir que os usuários insiram texto longo, como comentários, mensagens ou descrições. - `name`: nome do campo (obrigatório); - `id`: identificador do campo (opcional); - `cols`: largura do campo em colunas de caracteres (opcional); - `rows`: altura do campo em linhas de caracteres (opcional); - `readonly`: indica se o campo é somente leitura ou não (opcional); - `disabled`: indica se o campo está desabilitado ou não (opcional); - `placeholder`: texto que é exibido como uma dica dentro do campo (opcional); - `required`: indica se o campo é obrigatório ou não (opcional); - `maxlength`: número máximo de caracteres permitidos no campo (opcional). - `resize`: impede o usuario de alterar o tamanho do textarea ## Formulário Formulários em HTML são usados para coletar informações dos usuários por meio de caixas de texto, botões, menus suspensos e outros elementos interativos. Quando um usuário preenche um formulário e envia as informações, elas podem ser processadas pelo servidor da web e armazenadas em um banco de dados ou enviadas por e-mail para o destinatário apropriado. A tag `<form>` é usada para criar um formulário em HTML. O formulário deve ser composto de vários elementos, como campos de entrada de texto, botões e menus suspensos, que são definidos usando outras tags HTML, como `<input>`, `<textarea>`, `<select>`, `<option>`, entre outras. O elemento `<form>` tem vários atributos que podem ser usados para especificar como o formulário deve ser processado e para onde as informações coletadas devem ser enviadas. Alguns dos atributos mais comuns incluem: - `action`: especifica a URL do script que processará o formulário quando ele for enviado. - `method`: especifica o método HTTP que será usado para enviar as informações do formulário. Os valores mais comuns são "GET" (envia na url - menos segurança) e "POST" (envia através do Body - mais segurança). - `name`: define um nome para o formulário, que pode ser usado para referenciar o formulário em JavaScript ou em outras partes do código HTML. - `target`: define o destino onde a resposta do formulário será exibida. Por padrão, a resposta é exibida na mesma janela ou guia em que o formulário foi enviado, mas pode ser alterada para uma janela pop-up ou uma nova guia. - `autocomplete`: (on/off) armazena as informações dos inputs e completa automaticamente ao retornar à página ```htmlembedded <h1>Formulário</h1> <form> <label for="campo_nome">Nome:</label> <input id="campo_nome" type="text" placeholder="Digite seu nome"> <label for="campo_sobrenome">Sobrenome:</label> <input id="campo_sobrenome" type="text" placeholder="Digite seu sobrenome"> <br> <br> <label for="senha">Senha:</label> <input id="senha" type="password" placeholder=""> <br> <br> <label for="email">Email:</label> <input id="email" type="email"> <br> <br> <hr> <h2>Animal de estimação</h2> <input type="radio" id="cachorro" name="Animal" value="Cachorro"> <label for="cachorro">Cachorro</label> <br> <input type="radio" id="gato" name="Animal" value="Gato"> <label for="gato">Gato</label> <br> <input type="radio" id="hamster" name="Animal" value="Hamster"> <label for="haster">Hamster</label> <hr> <h2>Opções de Comida</h2> <input type="checkbox" id="item1" name="item1" value="Arroz"> <label for="item1">Arroz</label> <br> <input type="checkbox" id="item2" name="item2" value="Feijão"> <label for="item2">Feijão</label> <br> <input type="checkbox" id="item3" name="item3" value="Batata"> <label for="item3">Batata</label> <br> <input type="checkbox" id="item4" name="item4" value="Salada"> <label for="item4">Salada</label> <br> <input type="checkbox" id="item5" name="item5" value="Frango"> <label for="item5">Frango</label> <br> <input type="checkbox" id="item6" name="item6" value="Bife"> <label for="item6">Bife</label> <hr> <h2>Escolha uma Cor</h2> <select name="cores"> <option selected disabled>Selecione uma cor</option> <option value="vermelho">vermelho</option> <option value="verde">verde</option> <option value="azul">azul</option> </select> <hr> <h2>Digite uma mensagem</h2> <textarea resize="none" name="mensagem" placeholder="Digite uma mensagem" rows="7" cols="30"></textarea> <br> <br> <input type="reset" value="Limpar"> <input type="submit" value="Enviar Formulário"> </form> </body> ``` ![](https://hackmd.io/_uploads/HkB1d8XNh.png) ## Audio A tag `audio` em HTML é usada para incorporar arquivos de áudio em uma página da web. Ela permite que você reproduza arquivos de áudio em vários formatos, como MP3, WAV e Ogg Vorbis, diretamente na página da web, sem a necessidade de usar plugins ou programas externos. <audio src="The Godfather Theme Song.mp3" controls></audio> - `src`: o URL do arquivo de áudio que será reproduzido; - `controls`: adiciona controles de reprodução, como botões de play, pause, volume e barra de progresso; - `autoplay`: faz com que o áudio comece a ser reproduzido automaticamente quando a página é carregada; - `loop`: faz com que o áudio seja reproduzido em loop, ou seja, repetidamente; - `preload`: especifica como o navegador deve pré-carregar o arquivo de áudio. Os valores possíveis são "auto", "metadata" e "none"; - `muted`: define se o áudio deve ser reproduzido sem som. O valor "true" desativa o som e "false" mantém o som habilitado; - `volume`: define o volume inicial do áudio, variando de 0.0 (mudo) a 1.0 (volume máximo); - `poster`: define uma imagem de pôster que será exibida enquanto o áudio não é reproduzido ou está sendo carregado. ## Video A tag `video` em HTML é usada para incorporar arquivos de vídeo em uma página da web. Ela permite que você reproduza arquivos de vídeo em vários formatos, como MP4, WebM e Ogg Theora, diretamente na página da web, sem a necessidade de usar plugins ou programas externos. - **Parametros semelhantes ao Audio** - `width` e `height`: define as dimensões do elemento `video`; - `playsinline`: permite que o vídeo seja reproduzido em linha em dispositivos móveis; - `controlslist`: define quais controles serão exibidos na interface do usuário. > Video hospedado no proprio site/arquivo <video src="Treta Luta.mp4" controls width="700" ></video> **Em relação a vídeos tem 4 formatos:** * mp4 * m4v * webm * Tende a ser o mais pesado e ruimzinho * ogv Dica é colocar todos os formatos caso não vá em algum navegador específico > Video hospedado externamente <iframe width="560" height="315" src="https://www.youtube.com/embed/m1KhyQulnbM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>