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.
Um exemplo:
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 |
- Documentação HTML;
- Documentação CSS;
- Guia HTML para iniciantes;
- Guia CSS para iniciantes;
- Sobre HTML semântico;
- Tutorial sobre formulários HTML;
- Sobre seletores CSS e pseudo-classes;
- Sobre a propriedade box-sizing;
- Conceitos básicos de flexbox;
- Calma senhora - ótimo site guia para estudos - desenvolvido por aluna da reprograma;
Dicas extra
- Sobre Lorem Ipsum;
- Nomes de cores Html-CSS;
- Extensão conta-gotas, visualiza cores utilizadas pelo site no inspetor de código;
- Extensão para visualizar fontes usadas pelo site;
Dicas de links sobre Display flex
- tutorial MDN
- tutorial maujor
- tutorial w3schools
- tutorial medium 1
- tutorial medium 2
- tutorial css-tricks
Sites úteis para buscar por imagens e layout
- Google Fonts;
- Flat UI Colors - paleta de cores;
- Coolors - paleta de cores;
- FlatIcon - download de icones;
- FontAwesome - download de icones dentre outros;
- Unsplash - site para download imagens;
- Imagens de Fundo - site para download imagens;
- FreePik - Site para download de imagens;
- Nappy - site com imagens de pessoas negras e marrons;
- Canva - banco de imagens - possível modificar e personalizá-las;
- Pixabay - banco de imagens;
- Negativespace - banco de imagens;
- Pexels - banco de imagens;
Vídeos pra quem gosta de vídeos - estudos
- Dica de tipografia - Largura do texto - 2min;
- Background simples mas pode ser que não;
- Flexbox in 15 Minutes - em inglês;
- CSS Grid layout e Flexbox - um pouco mais avançado;
- Entenda o POSITION;
- Position in 9 Minutes - em inglês;
Jogos pra quem é de jogos - de CSS!! :)
- Flexbox Froggy - Jogo do Sapinho; pra aprender flexbox;
- CSS Diner - Jantando com CSS; pra aprender sobre como usar seletores em CSS;
- Flexbox Defense - Defendendo o CSS; outra forma de aprender flexbox;
Bons estudos, galera!