O documento discute conceitos básicos de HTML, incluindo cabeçalhos, parágrafos, formatação de texto, links, imagens, vídeos, áudio, tabelas, listas e comentários. Também aborda conceitos de CSS como vinculação de folhas de estilo e sintaxe básica de seletores, propriedades e valores.

1. Curso HTML

2. HTML Semântico
W3C
Identação de código
Conceitos básicos de CSS

3. Revisão

4. HTML Headings (cabeçalhos)
<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>

5. HTML Paragraphs (parágrafos)
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

6. Elementos de formatação em HTML
● <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

7. Elementos vazios
<p>Este é um parágrafo<br /> com quebra de linha.</p>
<hr />
<p>Este é outro parágrafo.</p>

8. HTML Links
<a href="https://sae.digital/">Este é um link</a>
<a href="pagina2.html">Este é um link</a>
<a href="#id">Este é um link</a>

9. HTML Media
HTML Images
<img src="saedigital.png" alt="SAE Digital" width="556"
height="358">

10. HTML Images
Tag <figure>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Legenda</figcaption>
</figure>

11. HTML Media
HTML 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>

12. HTML Media
HTML 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>

13. Citações HTML e elementos de citação
<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>

14. HTML Tables
<table>
<tr>
<td>Café</td>
<td>Chá</td>
<td>Leite</td>
</tr>
</table>

15. HTML Lists
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>

16. HTML Lists
<ol>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ol>

17. Tags de comentário HTML
<!-- Escreva seu comentário aqui -->

18. 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

20. HTML Semântico
As novas tags do HTML5 trazem novos significados
semânticos para usarmos em elementos HTML
<header>
<footer>

21. HTML Semântico
HTML com estrutura baseada no significado de seu conteúdo

22. HTML Semântico
Benefícios:
Facilidade de manutenção e compreensão do documento
Significado independente da sua apresentação visual

23. HTML Semântico
Benefícios:
Um usuário cego pode usar um leitor de tela para ouvir a página
Robôs de busca como o Google também são leitores não visuais
http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-
acessibilidade-web-fasciculo-I.html

24. Padrões e documentação
http://www.w3c.br/Materiais/PublicacoesW3C

25. Identação de código
Organização
Leitura
Manutenção

26. O que é CSS
Cascading Style Sheets
(Folhas de estilo em cascata)
Descreve o estilo de um documento HTML
Como os elementos HTML devem ser exibidos

27. CSS resolveu um grande problema
O HTML nunca foi projetado para conter tags para formatar uma
página da web!
O HTML foi criado para descrever o conteúdo de uma página da
Web, como:
<h1>Este é um título</h1>
<p>Este é um parágrafo.</p>

28. Efeito cascata
Estabelecimento de uma prioridade para aplicação
da regra de estilo a um elemento

29. Efeito cascata
1. folha de estilo padrão do navegador do usuário;

30. Efeito cascata
2. folha de estilo do usuário (customização do navegador);

31. Efeito cascata
3. folha de estilo do desenvolvedor;
a) estilo externo (importado ou linkado)
b) estilo incorporado (definido na seção head do
documento)
c) estilo inline (dentro de um elemento HTML)

32. Efeito cascata
4. declarações do desenvolvedor com !important
5. declarações do usuário com !important

33. Vinculando folhas de estilo à documentos
Como usar?
1. Externas;
2. Incorporadas;
3. Em escopo;
4. Inline.
http://maujor.com/tutorial/insetut.php

34. Sintaxe
seletor: é um elemento da marcação HTML
identificado pelo seu nome (por exemplo: <p>, <h1>, <form>)
pelo nome de uma classe (por exemplo: .topo, .principal, .menu)
pelo nome de um identificador ID (por exemplo: #tudo, #auxiliar, #rodape)
ou por qualquer outro identificador CSS de elementos ou trechos da marcação HTML,
genericamente denominados de seletores CSS.

35. Sintaxe
propriedade: é a propriedade do elemento HTML ao qual será
aplicada a estilização definida no valor (por exemplo: tamanho da
fonte, cor do texto, altura do elemento)

36. Sintaxe
valor: é a característica específica a ser assumida pela
propriedade (por exemplo: letra tipo arial, cor azul, fundo verde,
altura igual a 300px)

37. Sintaxe
Ao conjunto propriedade: valor denominamos declaração CSS.

38. Curso HTML
Revisão primeira aula,
Tags mais utitlizadas