O documento discute conceitos básicos de HTML, incluindo como personalizar elementos usando ID e classe, semântica HTML5, CSS para estilização, e exemplos de navegação.

1. Curso HTML

2. Como buscar e personalizar
um elemento HTML
Diferença entre ID, Classe e outros

3. Revisão

4. HTML Semântico
As novas tags do HTML5 trazem novos significados
semânticos para usarmos em elementos HTML
HTML com estrutura baseada no significado de seu conteúdo

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

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

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

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

9. O que é CSS
(Folhas de estilo em cascata)
Como os elementos HTML devem ser exibidos
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

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

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

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

13. 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)

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

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

16. Sintaxe
seletor: é um elemento da marcação HTML

17. 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)

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

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

21. Um HTML múltiplos estilos
https://www.w3schools.com/css/css_intro.asp

22. CSS Colors
<h1 style="color: red;">Título vermelho com nome da cor</h1>
<p style="color: #ff0000;">Parágrafo em vermelho hexadecimal</p>
<p style="color: (255, 0, 0);">Outro parágrafo em vermelho com RBG</p>

23. CSS Border
border: 5px solid red;
border width
border style
border color

24. CSS Margins
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
top 25px, right 50px, bottom 75px, left 100px
margin: 25px 50px 75px 100px

25. CSS Padding
padding: 25px 50px 75px 100px;

26. CSS Height and Width
height: 200px;
width: 50%;
background-color: powderblue;

27. The float Property
float: left;
float: right;

28. Navigation Bars
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray

29. Curso HTML
Como buscar e personalizar um elemento HTML
Diferença entre ID, Classe e outros