Curso HTML módulo 3 - Conceitos básicos CSS
1 gostou150 visualizações
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.
Curso HTML módulo 3 - Conceitos básicos CSS
- 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>
- 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
- 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