T8 | Front-end | 2019 | Semanas 2 | Fundamentos de HTML e CSS
Plano de aulas para a semana do dia 19/08/2019 - 23/08/2019, sobre HTML e CSS básico. Este arquivo será alimentado conforme o andamento das aulas (:
- Apresentação
- Combinados
- Preparando ambiente de desenvolvimento - Introdução a editores de texto
- Pastas
- Atalhos (identar os textos, mudar o tema, comentário, adicionar automaticamente, montar o template automaticamente)
- Introdução HTML e CSS
- O que é linguagem de marcação
- HTML vs. HTML5
- Elementos HTML: tags
- Blocos
<div>- background-image; background-color
- Blocos
- Comentários no HTML
- Adicionando links de arquivos externos
<link>no<head>do documento HTML - Adicionando imagens
<img>e seus atributossrcealt) - O que é CSS?
- Diferentes formas de adicionar estilo à página
- Tag
<style> - Importar arquivo style.css através da tag
<link>
- Tag
- Importando fontes externas (ex.: Google Fonts)
- Estilo padrão (default) da página
- Uso de classes e identificadores nas tags
- Propriedades de estilo no CSS:
- Dimensões de elementos (largura, altura)
- Margens e espaçamentos (margin, padding)
- Fontes e suas cores, famílias, tamanhos e ênfases
- Cores de fundo, transparências e gradientes
- Revisão de conceitos aula anterior
- Dúvidas
- Fundamentos HTML e CSS
- Criando links
<a>e seus atributoshref - Projetando a página - wireframe
- Hierarquia de Títulos (
<h1>a<h6>) - Parágrafos (
<p>) - Lorem ipsum (preenchendo espaços de texto)
- Método BEM - como nomear suas classes
- Seletores de elementos, classes e identificadores no CSS
- Seletores por referência e pseudo seletores
- Sobrescrita e precedência no CSS
- Criando links
- Revisão de conceitos aula anterior
- Dúvidas
- Fundamentos HTML e CSS
- Usando # para criar dead links
- Links externos e links internos
- Formulários (form, input, placeholders, checkbox, radio buttons, buttons)
- Tags semânticas (header, nav, footer, sections, entre outras)
- Span
- Propriedades de CSS
- Bordas
- Alinhamento de elementos
- Propriedades display (none, inline, inline-block e flex)
- Mãos no código
- Exercício - Form
- Revisão de conceitos aula anterior
- Dúvidas
- Fundamentos HTML e CSS
- Listas ordenadas e não ordenadas (
<ul>,<ol>e<li>) - Propriedades de estilo no CSS:
- Propriedade border-box
- Cores RGB, RGBA e HEX Code
- Medidas usadas no CSS (px, %)
- Listas ordenadas e não ordenadas (
- Revisão de conceitos aula anterior
- Dúvidas
- Fundamentos HTML e CSS
- Mãos no código
- Exercício - Landing Page Final
Iniciaremos com assuntos básicos de estrutura, nomenclatura e anatomia de HTML e CSS.
- Editores de texto e organização de pastas;
- HTML: anatomia e introdução de tags;
- CSS: anatomia e introdução de propriedades;
- Classes, id;
Para se modificar um arquivo .html e .css, precisamos de editor de texto. Apesar de que um simples bloco de notas pode ser a ferramenta para criação desses arquivos, vários softwares foram lançados no mercado para gostos dos programado res, oferecendo facilidades e plugins para facilitar o desenvolvimento. Alguns famosos e notáveis são:
- Sublime Text;
- Notepad++;
- Atom;
- O que vamos usar durante as aulas é o Visual Studio Code;
A estrutura de pastas básicas é:
css style.css img imagem.jpg index.html Ou seja, uma pasta com um arquivo index.html na raiz e duas pastas: uma css para inserção de nossos estilos .css e outra img, para inserção de nossas imagens.
HTML é uma abreviação de Hyper Text Markup Language (linguagem de marcação em hipertexto). Ou seja, não se trata de uma linguagem de programação, pois não tem lógica (algoritmos, processos etc). Ele cria a estrutura de uma página ou aplicação web, determinando a separação de layout e seu conteúdo.
Documentos .html possuem tags de estruturação básica:
<!doctype html>
<html>
<head></head>
<body></body>
</html>Internamente, as tags html possuem uma anatomia básica também:
<nome-da-tag atributo="valor do atributo">
conteúdo
</nome-da-tag>Comentários em HTML:
<!-- Isso é um comentário. Comentários em qualquer linguagem são pedaços de código que são ignorados na renderização (na leitura do computador), mas são úteis para entedimento humano -->CSS é abreviação de Cascading Style Sheet (folha de estilos em cascata). É a linguagem que define estilos para o HTML, portanto, não se trata de linguagem de programação. CSS tem "cascata" no nome, devido a sua forma de determinar a propriedade de um elemento - levando em consideração hierarquia de seletores e de chamadas de estilo (inline, internal e external).
Para fazer o link de um arquivo .css em um documento .html, devemos inserir a tag no do documento, com o href do caminho do arquivo.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body></body>
</html>Dentro do arquivo .css, a anatomia é:
seletor {
propriedade: valor;
}Exemplo:
p {
color: red;
}Comentários em CSS:
/* Sou um comentário CSS */ATENÇÃO! Não esqueçam de indentar o código! Isso ajuda na sua legibilidade, manutenção e colaboração com outros desenvolvedores. Para indentar, selecione a linha do código e aperte tab.
Classes e ids são atributos que podem ser inseridos em qualquer tag dentro da . Eles são atributos de nomeação, sendo class muito usada para referência em CSS e id para Javascript (apesar de que há outras boas práticas no mercado atualmente). Uma diferença entre os dois é que podem haver várias classes com o mesmo valor, ao passo que ids devem ser únicos.
Verificar os arquivos de exercícios para vê-los em prática.
| HTML | CSS |
|---|---|
| Tags de estrutura: !doctype, html, head, body | Propriedades de background: background-imagem, background-color |
| Tags no head: meta (charset), title, link | Propriedades de texto: text-align, font-family, font-size, text-decoration, font-size, text-transform |
| Tags de divisão: div | Propriedades de layout: width, margin, padding, display (inline-block) |
| Tags de texto: h1 ao h6, p | Propriedade de cor: color |
| Tag de link: a | Propriedade de decoração: box-shadow, border |
| Tag de imagem: img |
Macete de centralização: apenas para elementos block.
- Definir um tamanho para seu elemento através da propriedade width;
- Definir margin: 0 auto;
O conteúdo da Aula 01 foi criado coletivamente e você pode ver o conteúdo original e completo aqui