Baixar para ler offline
Desenvolver Organizar Elementos Sit.pptx
- 1. Introdução HTML Definição deelementos estruturais. Importância para a criação de sites. Objetivo da apresentação: explorar como planejar e organizar elementos para criar experiências intuitivas.
- 2. Estrutura Básica deum Site HTML como a base de qualquer site. CSS para estilização. JavaScript para interatividade.
- 3. Tag HTML Uso da tag<html>. Estrutura básica: <head> e <body>. Exemplo de estrutura HTML simples.
- 4. Uso da Tag •A tag<html> é a raiz de qualquer documento HTML. Ela define que o conteúdo dentro dela é um arquivo HTML e é obrigatória em todos os documentos HTML. Todos os outros elementos devem estar contidos dentro dessa tag. •Estrutura Básica •Um documento HTML geralmente é dividido em duas partes principais: •<head>: Contém metadados sobre o documento, como título, links para estilos, scripts, e outras informações que não são exibidas diretamente na página. •<body>: Contém todo o conteúdo visível da página, como textos, imagens, links e outros elementos que os usuários interagem.
- 5. Exemplo de EstruturaHTML Simples •Explicação do Código: •<!DOCTYPE html>: Informa ao navegador que este é um documento HTML5. •<html>: Marca o início do documento HTML. •<head>: • Contém o <title> que define o título exibido na aba do navegador. •<body>: • Contém o cabeçalho <h1> com a mensagem de boas-vindas. • Um parágrafo <p> com um texto descritivo. •Este exemplo ilustra uma base simples e funcional que pode ser expandida para criar páginas mais complexas.
- 6. Cabeçalho do Site •Uso da tag <header>. • Inclui logo, menu de navegação e links. • Exemplo prático de código.
- 7. Uso da tag <header> •Atag <header> é usada para definir a parte superior de uma página web, geralmente contendo elementos importantes como o logo, o menu de navegação e links. Ela ajuda a organizar o conteúdo de forma semântica, deixando claro que essas partes são essenciais para a navegação do site. •Aqui está um exemplo simples de código: •html •O logo é inserido com a tag <img>. •O menu de navegação é criado dentro da tag <nav>, com links para diferentes seções do site.
- 8. Corpo do Site •Uso da tag <main>. • Localização do conteúdo principal. • Exemplo prático de uso.
- 9. Uso da tag <main>. •Atag <main> é usada para envolver o conteúdo principal de uma página. Ela ajuda a identificar a área mais importante do site, diferenciando o conteúdo central das outras partes como cabeçalho, rodapé e barras laterais. O conteúdo dentro da tag <main> deve ser único para a página e não deve se repetir em outras partes do site. •Aqui está um exemplo simples de código: •html •A tag <main> envolve o conteúdo principal da página. •Dentro dela, temos um título principal (<h1>) e uma seção (<section>) com informações adicionais.
- 10. Rodapé do Site • Usoda tag <footer>. • Inclui informações como direitos autorais e links úteis. • Exemplo de rodapé em código.
- 11. Uso da tag <footer>. Atag <footer> é usada para definir o rodapé de uma página. Normalmente, ela contém informações adicionais, como direitos autorais, links úteis, informações de contato e outras seções complementares. Aqui está um exemplo simples de código: •A tag <footer> envolve o conteúdo do rodapé. •Dentro dela, temos um texto com o símbolo de copyright e um menu de navegação com links para seções importantes, como política de privacidade e termos de uso.
- 12. Organização de Navegação Usoda tag <nav>. Criação de menus acessíveis. Exemplo com links navegáveis.
- 13. Uso da tag <nav>. •Atag <nav> é usada para criar menus de navegação em uma página. Ela ajuda a organizar links de forma acessível, permitindo que os usuários encontrem facilmente as seções principais do site. Usar <nav> melhora a estrutura do conteúdo e facilita a navegação, especialmente para leitores de tela. •Aqui está um exemplo simples de código: •A tag <nav> envolve o menu de navegação. •Dentro dela, temos uma lista não ordenada (<ul>) com links (<a>) para diferentes seções do site. Esses links são navegáveis e direcionam o usuário para áreas específicas da página.
- 14. Divisões de Conteúdo • Usodas tags <section> e <article>. • Diferenças entre ambas. • Exemplo de estrutura de conteúdo.
- 15. Uso das tags <section>e <article>. •As tags <section> e <article> são usadas para organizar o conteúdo de forma semântica, mas com objetivos diferentes: • <section>: Representa uma seção genérica de conteúdo, geralmente usada para agrupar temas relacionados dentro de uma página, como capítulos ou grupos de conteúdo. Pode conter outros elementos como títulos, parágrafos e listas. • <article>: Representa um conteúdo independente, que pode ser reutilizado ou distribuído de forma autônoma, como postagens de blog, artigos de notícias ou comentários. •Diferenças: • <section>: Geralmente usada para dividir o conteúdo em partes temáticas. • <article>: Usada para conteúdos autossuficientes e independentes. Exemplo de código
- 16. •A tag <section>é usada para agrupar o tema "Notícias Recentes". •Dentro dessa seção, as tags <article> são usadas para conteúdos independentes, como artigos sobre notícias e atualizações. Exemplo de código
- 17. Barra Lateral • Uso datag <aside>. • Exemplo de barra lateral com links e widgets. • Benefícios para organização.
- 18. Uso da tag <aside>. •Atag <aside> é usada para representar conteúdo relacionado, mas que não é essencial para a compreensão do conteúdo principal. Normalmente, é usada para criar barras laterais, widgets, links relacionados ou outras informações complementares, como anúncios ou links para outras páginas. •Benefícios: •Organização: A tag ajuda a separar conteúdos complementares sem interferir na estrutura principal. •Acessibilidade: Melhora a navegação, permitindo que o conteúdo adicional seja facilmente encontrado. A tag <aside> cria uma área lateral com links relacionados e um widget de clima, separando o conteúdo adicional da área principal.
- 19. Listas em HTML •Tipos de listas: ordenadas (<ol>) e não ordenadas (<ul>). • Exemplo de lista com links.
- 20. Tipos de listas:ordenadas (<ol>) e não ordenadas (<ul>) •As tags <ol> e <ul> são usadas para criar listas em HTML: •<ol>: Lista ordenada, onde os itens são numerados. •<ul>: Lista não ordenada, onde os itens são marcados com pontos ou outros símbolos. •<ol> cria uma lista numerada de links. •<ul> cria uma lista com marcadores, contendo links também. Exemplo com links
- 21. Trabalhando com Links • Usoda tag <a>. • Diferença entre links internos e externos. • Exemplo prático de navegação entre páginas.
- 22. Uso da tag <a>. Atag <a> é usada para criar links em HTML. Ela permite que o usuário navegue para outra página ou seção dentro da mesma página, ou até mesmo para um site externo. Diferença entre links internos e externos: •Link interno: Direciona para uma seção ou página dentro do mesmo site. Usa um caminho relativo (sem "http://"). •Link externo: Direciona para uma página em outro site. Usa o endereço completo (URL). •O link interno leva o usuário para uma seção dentro da mesma página (#home é um identificador de uma âncora na página). •O link externo abre o site "Example" em uma nova aba (target="_blank").
- 23. Imagens no HTML • Usoda tag <img>. • Atributos importantes: src, alt. • Exemplo com imagem responsiva.
- 24. Uso da tag <img>. •Atag <img> é usada para inserir imagens em uma página HTML. Os principais atributos dessa tag são: •src: Define o caminho ou URL da imagem a ser exibida. •alt: Fornece uma descrição alternativa da imagem, útil para acessibilidade e caso a imagem não seja carregada. •O atributo src define o arquivo da imagem ("logo.png"). •O atributo alt descreve a imagem ("Logo da Empresa"). •O estilo max-width: 100%; height: auto; torna a imagem responsiva, ou seja, ela se ajusta automaticamente ao tamanho da tela, sem perder a proporção.
- 25. Formatação de Texto •Tags como <h1> a <h6>, <p>, <strong>, <em>. • Exemplo de hierarquia de títulos.
- 26. Tags como <h1>a <h6>, <p>, <strong>, <em>. •As tags <h1> a <h6> são usadas para definir títulos e subtítulos em HTML, com <h1> sendo o título principal (mais importante) e <h6> o menos importante. As tags <p>, <strong> e <em> são usadas para definir parágrafos e dar ênfase ao texto. •<h1>: Título principal da página. •<h2> a <h6>: Subtítulos, com níveis de importância decrescentes. •<p>: Define um parágrafo de texto. •<strong>: Aplica ênfase forte ao texto (geralmente exibido em negrito). •<em>: Aplica ênfase ao texto (geralmente exibido em itálico). <h1> é o título principal. <h2> e <h3> são subtítulos hierárquicos. <p> contém um parágrafo com texto enfático usando <strong> e <em>.
- 27. Tabelas no HTML USODA TAG <TABLE>. ESTRUTURA BÁSICA COM <THEAD>, <TBODY>, <TR>, <TD>. EXEMPLO PRÁTICO DE TABELA.
- 28. Uso da tag <table>. Atag <table> é usada para criar tabelas em HTML. Ela é composta por várias tags que organizam o conteúdo de maneira estruturada: •<thead>: Define o cabeçalho da tabela. •<tbody>: Define o corpo da tabela, onde os dados são exibidos. •<tr>: Define uma linha na tabela. •<td>: Define uma célula de dados em uma linha. <thead> contém o cabeçalho com títulos das colunas. <tbody> contém os dados reais da tabela, organizados em linhas e células com <tr> e <td>.
- 29. Formulários no HTML • Usoda tag <form>. • Elementos como <input>, <textarea>, <button>. • Exemplo prático de formulário.
- 30. Uso da tag <form>. •Atag <form> é usada para criar formulários em HTML, permitindo que o usuário envie dados para um servidor. Dentro de um formulário, podemos usar diferentes elementos como: •<input>: Define campos de entrada para dados, como texto, senhas, e botões. •<textarea>: Cria um campo de texto multilinha para entrada de informações maiores. •<button>: Cria um botão para submeter o formulário ou realizar uma ação. <form> define o formulário, com o atributo action indicando para onde os dados serão enviados e method especificando o método de envio. <input> é usado para capturar o nome do usuário. <textarea> é usado para capturar uma mensagem. <button> é o botão que submete o formulário.
- 31. Design Responsivo • Usode Media Queries no CSS. • Exemplo de site responsivo para diferentes telas.
- 32. Grid Layout • Definiçãode grid. • Exemplo de código para layout responsivo.
- 33. Flexbox • Uso doFlexbox para organizar elementos. • Exemplo de layout com Flexbox.
- 34. Semântica no HTML •Importância da semântica. • Tags semânticas: <header>, <footer>, <article>, etc.
- 35. Otimização para Motoresde Busca (SEO) • Uso de meta tags. • Importância de boas práticas no HTML.
- 36. Acessibilidade em Sites •Uso de alt em imagens. • Aria-labels para elementos interativos.
- 37. Uso de FrameworksCSS • Exemplos: Bootstrap, Tailwind. • Benefícios e exemplos práticos.
- 38. Trabalhando com CSSInline, Interno e Externo • Diferenças entre as abordagens. • Exemplo prático de cada tipo.
- 39. Elementos Multimídia • Usodas tags <audio> e <video>. • Exemplo de código com conteúdo multimídia.
- 40. Uso de Scriptsem Páginas HTML • Uso da tag <script>. • Inclusão de arquivos JavaScript.
- 41. Estruturas de Diretórios •Organização de arquivos do projeto. • Exemplo prático de estrutura.
- 42. Validando Código HTML •Ferramentas para validação. • Benefícios da escrita de código limpo.
- 43. Introdução a HTML5 •Novas funcionalidades do HTML5. • Comparativo com versões anteriores.
- 44. Exemplo Prático: PáginaSimples • Construção de uma página simples com cabeçalho, conteúdo e rodapé.
- 45. Melhores Práticas • Escrevendocódigo limpo. • Comentários para documentação.
- 46. Ferramentas de Desenvolvimento •IDEs como VS Code. • Extensões para HTML e CSS.
- 47. Uso de CDN •O que é CDN. • Benefícios de carregar recursos externamente.
- 48. Introdução ao JavaScriptem Sites • Uso básico do JavaScript. • Exemplo prático de interatividade.
- 49. Testando o Site •Ferramentas de teste. • Verificação de responsividade e desempenho.
- 50. Publicando o Site •Uso de hospedagem gratuita. • Plataformas como GitHub Pages.
- 51. Exemplo Prático: FormulárioCompleto • Construindo um formulário funcional.
- 52. Trabalhando com ComponentesReutilizáveis • Importância da reutilização de código. • Exemplo prático com includes.
- 53. Debugging em HTML •Uso do inspetor de elementos. • Ferramentas para depuração.
- 54. Planejamento de Projetos •Importância de wireframes. • Exemplo prático de planejamento.
- 55. Conclusão • Resumo daslições aprendidas. • Próximos passos para aprofundar os conhecimentos.