O documento discute as principais tags HTML, incluindo tags para cabeçalhos, parágrafos, links, imagens, vídeos, áudio, tabelas e listas. Ele também cobre elementos como iframes, comentários e valores de exibição de blocos e em linha.
4. O que é HTML?
Hypertext Markup Language
(Linguagem de Marcação de Hipertexto)
Publicação de conteúdo
(texto, imagens, vídeos, áudio etc) na web
5. Facilitar a manipulação dos elementos
Fornece ferramentas para o CSS e o
Javascript fazerem seu trabalho da melhor
possível
Semântica com menos códigos
Retro compatibilidade
9. HTML Headings (cabeçalhos)
<h1> define o título mais importante. <h6> define o título menos importante:
<h1>Esse é o cabeçalho 1</h1>
<h2>Esse é o cabeçalho 2</h2>
<h3>Esse é o cabeçalho 3</h3>
<h4>Esse é o cabeçalho 4</h4>
<h5>Esse é o cabeçalho 5</h5>
<h6>Esse é o cabeçalho 6</h6>
10. HTML Paragraphs (parágrafos)
Um parágrafo em HTML é definido com a tag <p>:
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
11. Elementos de formatação em HTML
<p>Os elementos de <strong>formatação</strong> foram projetados
para exibir tipos especiais de texto</p>
● <b> - texto em negrito
● <strong> - Texto importante
● <i> - texto itálico
● <em> - texto enfatizado
● <mark> - texto marcado
● <small> - Texto pequeno
● <del> - Texto excluído
● <ins> - Texto inserido
● <sub> - Texto de subscrito
● <sup> - Texto do sobrescrito
12. Elementos vazios
Os elementos HTML sem conteúdo são chamados de elementos vazios
<br> define uma quebra de linha
<br> define uma linha horizontal
<p>Este é um parágrafo<br /> com quebra de linha.</p>
<hr />
<p>Este é outro parágrafo.</p>
O HTML5 não exige que os elementos vazios sejam fechados. Mas se você quer uma
validação mais rigorosa, ou se você precisa tornar seu documento legível por analisadores
XML, você deve fechar todos os elementos HTML corretamente.
13. HTML Links
Um link em HTML é definido com a tag <a>:
<a href="https://sae.digital/">Este é um link</a>
<a href="pagina2.html">Este é um link</a>
<a href="#id">Este é um link</a>
15. HTML Media
HTML Images
As imagens em HTML são definidas com a tag <img>
O arquivo de origem (src), texto alternativo (alt), largura e altura são
fornecidos como atributos:
<img src="saedigital.png" alt="SAE Digital" width="556"
height="358">
16. HTML Images
Tag <figure>
<figure> marcar uma foto em um documento
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Legenda</figcaption>
</figure>
17. HTML Media
HTML Video
Os Vídeos em HTML são definidas com a tag <video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Seu navegador não suporta a tag video.
</video>
18. HTML Media
HTML Audio
Os Vídeos em HTML são definidas com a tag <audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Seu navegador não suporta a tag áudio.
</audio>
19. HTML Media
HTML Plug-ins
O elemento <object> é suportado por todos os navegadores
Define um objeto incorporado (embed) dentro de um documento HTML
Incorporar plug-ins como: Java, leitores de PDF, Flash Players
<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="pagina2.html"></object>
<object data="saedigital.png"></object>
https://www.w3schools.com/html/html_object.asp
20. Citações HTML e elementos de citação
Define uma seção que é citada de outra fonte
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
21. HTML Tables
Uma tabela HTML é definida com a tag <table>
Linha <tr>
Cabeçalho <th>
Célula de tabela <td>
Célula em mais de uma coluna colspan
Célula mais de uma linha rowspan
22. HTML Lists
Uma lista desordenada:
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
23. HTML Lists
Uma lista ordenada:
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>
24. HTML Iframes
Um iframe é usado para exibir uma página da Web
dentro de uma página da Web
<iframe src="pagina2.html" height="200" width="300"></iframe>
25. Tags de comentário HTML
Você pode adicionar comentários à sua fonte HTML
usando a seguinte sintaxe:
<!-- Escreva seu comentário aqui -->
26. Bloco HTML e elementos em linha
Cada elemento HTML tem um valor de exibição padrão
dependendo do tipo de elemento que é
O valor de exibição padrão para a maioria dos elementos
é em bloco ou inline