1. Fundamentos do HTML
1.1. Introdução ao módulo
1.1.1. O que você irá aprender
1.1.1.1. O que é HTML e como usá-lo
1.1.1.2. Principais elementos e tags HTML
1.1.1.3. Listas e tabelas
1.1.1.4. Formulários e seus componentes
1.1.1.5. Recursos do HTML 5
1.1.1.6. Semântica e acessibilidade
1.1.1.7. Boas práticas e otimizações
1.1.2. Requisitos para acompanhar o módulo
1.1.2.1. Navegador web moderno e atualizado
1.1.2.2. Visual Studio Code (ou outro editor de código)
1.2. Estrutura de uma página web
1.2.1. Uma página web é composta de duas partes principais, o **head** e o **body**
1.2.2. A tag <head> define os meta dados do documento, ou seja, informações sobre o próprio documento
1.2.3. O <head> é feito **para o navegador,** para que ele "conheça melhor" a página HTML em questão
1.2.4. A tag <body> contém todo o conteúdo visível do documento
1.2.5. O <body> é feito **para os usuários,** ele é a página em si
1.3. O que é HTML e como usá-lo
1.3.1. O que é HTML?
1.3.1.1. *HyperText Markup Language*, ou Linguagem de Marcação de HiperTexto
1.3.1.1.1. **Curiosidade:** hipertexto significa um conjunto de textos entre os quais um usuário pode navegar usando links, o que costumava ser o principal uso da internet nos seus primeiros anos de existência
1.3.1.2. É uma linguagem usada para criar uma estrutura de elementos e suas informações, mais precisamente, os elementos de uma página web
1.3.1.3. Criada entre 1989 e 1990 para o compartilhamento de pequisas científicas entre Tim Bernes-Lee (físico inglês e autor da linguagem) e seus colegas de trabalho
1.3.2. Como funciona?
1.3.2.1. Através de arquivos de texto com a extensão **.html**
1.3.2.2. Usando o que chamamos de **tag**, que representam os elementos que queremos exibir na página web
1.3.2.3. Existem muitos tipos de elementos no HTML
1.3.2.3.1. Títulos, parágrafos, listas, tabelas, etc
1.3.2.3.2. Imagens, vídeos, áudios, etc
1.3.2.3.3. Formulários, caixas de texto, botões, etc
1.3.2.3.4. Divisores, cabeçalhos, rodapés, etc
1.3.2.4. Uma tag é algo como: **<p>Isso é uma tag</p>**
1.3.2.5. Uma tag pode ter **atributos**, que são características especiais de um determinado elemento
1.3.2.6. Uma tag com um atributo é algo como: **<p id="paragrafo-principal" >Isso é uma tag com atributo</p>**
1.3.3. Recursos importantes para ajudar nos estudos
1.3.3.1. Documentação da MDN: https://developer.mozilla.org/pt-BR/docs/Web/HTML
1.3.3.2. Guias da w3schools: https://www.w3schools.com/html/html_intro.asp
1.4. Formatos e otimização de imagens
1.4.1. É importante que uma página web esteja sempre otimizada
1.4.1.1. Páginas pesadas demoram para carregar, gerando uma experiência ruim
1.4.1.2. Páginas pesadas consomem mais dados, o que é ruim para quem tem dados limitados
1.4.2. Um dos aspectos que mais pode atrapalhar uma página web são suas imagens
1.4.3. Como otimizar as imagens?
1.4.3.1. Utilize os formatos corretos
1.4.3.1.1. JPEG: formato de mais qualidade, porém mais pesado
1.4.3.1.2. PNG: formato inferior ao JPEG, mas que pode ser comprimido mantendo a qualidade
1.4.3.1.3. WEBP: formato criado especificamente para a web pelo Google, oferece o melhor equilibrio entre qualidade e tamanho reduzido
1.4.3.1.4. SVG: formato usado para vetores, que são imagens geométricas super leves e que podem escalar para qualquer tamanho
1.4.3.2. Utilize os tamanhos corretos
1.4.3.2.1. Imagens grandes demais ficam pesadas e pequenas demais ficam pixeladas
1.4.3.2.2. Se necessário, use o atributo "srcset" para definir diferentes versões da imagem para diferentes dispositivos
1.4.3.3. Comprima a imagem, se possível
1.5. O que são formulários
1.5.1. Os formulários em HTML são estruturas que permitem a coleta de informações dos usuários, como nome, e-mail, senha, comentários, etc.
1.5.2. Eles são compostos por elementos HTML que possibilitam a criação de campos de entrada, botões de envio e outras funcionalidades interativas.
1.5.3. Olhando de forma simples, a comunicação na web ocorre de duas formas: obtendo dados (como uma página ou uma imagem) e enviando dados. Os formulários são os principais responsáveis pela segunda.
1.5.4. Os formulários são compostos por
1.5.4.1. Uma tag <form> com os atributos "action" e "method"
1.5.4.2. Campos a serem preenchidos, como <input> ou <select>
1.5.4.3. Um botão para enviar, ou "submeter", o formulário: <button type="submit">Texto</button>
1.6. Recursos modernos no HTML 5
1.6.1. Versão mais atual do HTML
1.6.2. Novidades
1.6.2.1. novas **tags semânticas,** como <header>, <nav>, <section>, <article>, <aside>, <footer>, etc.
1.6.2.1.1. tornam a página mais clara e significativa para ferramentas de acessibilidade e para mecanismos de busca (SEO)
1.6.2.2. melhorias nos **elementos de formulário,** como input com novos tipos (por exemplo, email, tel, date) e atributos (como required, placeholder, pattern)
1.6.2.3. novas tags <audio> e <video> para incorporar **áudio e vídeo** na página
1.6.3. Links úteis
1.6.3.1. Tag de vídeo HTML5: https://www.w3schools.com/html/html5_video.asp
1.6.3.2. Tag de áudio HTML5: https://www.w3schools.com/html/html5_audio.asp
1.6.3.3. Semantica no HTML 5: https://www.w3schools.com/html/html5_semantic_elements.asp
1.6.3.4. Documentação dos tipos de input: https://www.w3schools.com/html/html_form_input_types.asp
1.6.3.5. Simulando os tipos novos de input: https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html
1.7. WAI-ARIA e atributos de acessibilidade
1.7.1. Acessibilidade: garantir inclusão digital e acesso igualitário a informações e serviços na web
1.7.2. Os quatro pilares da acessibilidade segunda a WCAG (*Web Content Acessibility Guidelines*)
1.7.2.1. **Perceptível:** garantir que os conteúdos sejam apresentados de maneira clara e adaptável, permitindo a personalização.
1.7.2.1.1. conteúdos alternativos
1.7.2.1.2. apresentação personalizável
1.7.2.1.3. contraste na apresentação
1.7.2.2. **Operável:** facilitar a interação e a navegação, tornando a web utilizável por diversos dispositivos e tecnologias assistivas.
1.7.2.2.1. uso através do teclado
1.7.2.2.2. facilitar localização e navegação
1.7.2.3. **Compreensível:** tornar a informação e o funcionamento dos elementos claros e fáceis de entender.
1.7.2.3.1. textos legíveis e compreensíveis
1.7.2.3.2. correção e prevenção de erros
1.7.2.4. **Robusto:** criar conteúdos que possam ser interpretados de forma consistente por uma variedade de agentes do usuário.
1.7.2.4.1. zelar pela compatibilidade
1.7.3. O que é WAI-ARIA?
1.7.3.1. *Web Accessibility Initiative - Accessible Rich Internet Applications*
1.7.3.2. Tem como objetivo estender as capacidades dos elementos HTML para torná-los mais acessíveis e interativos
1.7.3.3. Adiciona o suporte a tecnologias assistivas, como leitores de tela, por meio de atributos ARIA
1.7.4. Alguns exemplos práticos
1.7.4.1. Tonrnar as imagens acessíveis adicionando um texto alternativo (atributo "alt") para descrever a imagem
1.7.4.2. Usar corretamente os títulos (h1, h2, h3, etc) para estruturar o conteúdo e facilitar a navegação para leitores de tela
1.7.4.3. Criar formulários acessíveis usando rótulos (elemento "label") associados aos inputs do formulário
1.7.4.4. Usar cores para garantir contraste suficiente e permitir a distinção de elementos por usuários com deficiência visual
1.7.4.5. Tornar links e botões claros e descritivos para facilitar a compreensão do conteúdo e não usar ícones sem um rótulo
1.7.4.6. Utilização dos atributos "label", "role", "state" e "property" do WAI-ARIA para melhorar a semântica e comportamento de elementos
1.8. Encerramento
1.8.1. O que você aprendeu
1.8.1.1. O que é HTML e como usá-lo
1.8.1.2. Principais elementos e tags HTML
1.8.1.3. Listas e tabelas
1.8.1.4. Formulários e seus componentes
1.8.1.5. Recursos do HTML 5
1.8.1.6. Semântica e acessibilidade
1.8.1.7. Boas práticas e otimizações
2. *Cascading Style Sheets*, ou folhas de estilo em cascata
3. Fundamentos do CSS
3.1. Introdução ao Módulo
3.1.1. O que você irá aprender
3.1.1.1. O que é e como usar o CSS
3.1.1.2. Cores e estilos básicos
3.1.1.3. Posicionamento
3.1.1.4. Seletores
3.1.1.5. Tipografia
3.1.1.6. Unidades de medida
3.1.1.7. Especificidade
3.1.1.8. etc
3.1.2. Requisitos
3.1.2.1. HTML5
3.1.2.2. Navegador web e editor de código
3.2. O que é CSS e como usá-lo
3.2.1. Linguagem usada para definir os estilos em um documento HTML
3.2.2. Pode ser incluido no documento de 3 modos
3.2.2.1. Com o atributo style, por exemplo: **<h1 style="color: red;">Título Vermelho</h1>**
3.2.2.2. Com a tag style, por exemplo: **<head>** ** <style>h1 { color: red; }</style>** **</head>**
3.2.2.3. Com a tag link apontando para um arquivo CSS, por exemplo: **<link rel="stylesheet" href="style.css">**
3.2.3. Estrutura de um código CSS usando como exemplo o código: **h1 { color: red; }**
3.2.3.1. **h1** é o **seletor**, ou seja, o termo que seleciona qual parte do documento terá esse estilo
3.2.3.2. As chaves **{ }** delimitam o **bloco de declarações,** ou seja, onde começam e terminam os estilos a serem aplicados no(s) elemento(s) selecionado(s)
3.2.3.3. A declaração **color: red;** define um estilo. Declarações são sempre compostas por duas partes, a **propriedade** e o **valor**, separadas por vírgula, e finalizadas por ponto e vírgula
3.2.3.4. Exemplo: **seletor** { **propriedade: valor;** **outra-propriedade: valor;** **}**
3.3. Cores no CSS
3.3.1. No CSS podemos trabalhar com cores em vários formatos
3.3.2. Usando nomes de cores
3.3.2.1. Exemplo: **h1 { color: red; }**
3.3.2.2. **Não recomendado,** pois não há uma garantia de padronização das cores
3.3.2.3. Implementado pelo navegador
3.3.3. Usando os códigos das cores
3.3.3.1. Forma **recomendada,** pois especifica a cor exata a ser usada de forma precisa
3.3.3.2. Códigos RGB
3.3.3.2.1. Utiliza a função **rgb( )** do CSS para processar uma cor a partir dos valores de vermelho (R), verde (G) e azul (B)
3.3.3.2.2. Exemplo: **h1 { color: rgb(255, 0, 0); }**
3.3.3.3. Códigos hexadecimais
3.3.3.3.1. Utiliza a numeração hexadecimal para especificar cores no formato RGB de forma abreviada
3.3.3.3.2. O formato usado é **#RRGGBB**, e os valores são convertidos de hexadecimal para decimal
3.3.3.3.3. Obs.: números hexadecimais representam os valores decimais de 0 a 15, porém usando os algarismos **0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F**
3.3.3.3.4. Exemplo: **h1 { color: #FF0000; }** Onde: FF = 255 00 = 0 00 = 0
3.3.3.4. Códigos HSL
3.3.3.4.1. Formato diferente, porém muito útil para manipulação de cores
3.3.3.4.2. Utiliza o esquema de tonalidade, saturação e brilho, ou *Hue*, *Saturation* e *Lightness*, para definir uma cor
3.3.3.4.3. Assim como no rgb, o CSS também possui uma função **hsl( )**
3.3.3.4.4. Exemplo: **h1 { color: hsl(0, 100%, 50%); }**
3.3.4. Dica: use uma ferramenta de seletor de cores, ou *color picker*
3.4. Especificidade
3.4.1. A especificidade determina a ordem de prioridade das regras CSS que se aplicam a elementos HTML.
3.4.2. Ordem de aplicação das regras
3.4.2.1. Pelo formato de cascata do CSS os estilos são aplicados em uma ordem
3.4.2.2. Regras definidas inline têm a maior especificidade.
3.4.2.3. Regras em arquivos externos são aplicadas por último e têm menor especificidade.
3.4.3. Especificidade de seletores
3.4.3.1. Seletores universais têm baixa especificidade.
3.4.3.2. Seletores de tipo têm uma especificidade maior que os universais.
3.4.3.3. Seletores de classe e atributo têm maior especificidade que os seletores de tipo.
3.4.4. Combinações de seletores
3.4.4.1. Quando múltiplos seletores se aplicam a um elemento, suas especificidades se somam.
3.4.4.2. A ordem dos seletores também importa em casos de empate na especificidade.
3.4.5. !important
3.4.5.1. O "!important" sobrepõe todas as outras regras de especificidade.
3.4.5.2. Evite o uso excessivo de "!important" para não prejudicar a manutenção do código.
3.4.6. Resumão
3.4.6.1. Ordem da cascata
3.4.6.1.1. **Estilos Inline:** Estilos definidos diretamente no elemento HTML usando o atributo style.
3.4.6.1.2. **IDs:** Seletores com IDs específicos, como #myElement.
3.4.6.1.3. **Classes, Pseudo-classes e Atributos:** Seletores com classes (*.myClass*), pseudo-classes (*:hover*, *:nth-child()*) e seletores de atributos (*[type="text"]*)
3.4.6.1.4. **Elementos e Pseudo-elementos:** Seletores que se referem a elementos HTML (*div, p*) e pseudo-elementos (*::before*, *::after*)
3.4.6.2. Pontuações de especificidade
3.4.6.2.1. Estilos Inline (1000 pontos)
3.4.6.2.2. IDs (100 pontos)
3.4.6.2.3. Classes, Pseudo-classes e Atributos (10 pontos)
3.4.6.2.4. Elementos e Pseudo-elementos (1 ponto)
3.5. Encerramento
3.5.1. O que você aprendeu
3.5.1.1. O que é e como usar o CSS
3.5.1.2. Cores, background, bordas, etc
3.5.1.3. Posicionamento com display, margem, preenchimento, etc
3.5.1.4. Seletores e especificidade
3.5.1.5. Tipografia (fontes, textos, pesos, famílias, etc)
3.5.1.6. Principais unidades de medida (px, rem, em, deg, vw e vh, %, etc)
3.5.1.7. Como construir sites completos usando CSS
3.5.2. Próximos passos
3.5.2.1. CSS Avançado: flexbox, grid, media queries, responsividade, etc
3.5.2.2. Frameworks CSS: Bootstrap, Bulma, TailwindCSS, etc
3.5.2.3. Linguagem de programação JavaScript