On10-HTML-CSS

Online-10 | Front-end | 2021 | Fundamentos de HTML e CSS

Plano de aula para o dia 20 e 24 de março, sobre HTML e CSS básico. Este arquivo será alimentado conforme o andamento da semana (:

AULA 20 MARÇO, SÁBADO, 9H - 17H

CONTEÚDO AULA MANHÃ 9h - 12h

html é a estrutura css é o estilo por cima

CONTEÚDO AULA TARDE 13h - 17h

É comum e normal errar muitas vez o CSS, aprendê-lo é um joguinho de paciência

AULA 24 MARÇO, QUARTA, 20h-22h

Meu primeiro formulário
- Elementos <form> <input> <label> <textarea> <select> <option> <button>
- atributos type for name placeholder
Mais algumas dicas importantes
- background-image
Tirar dúvidas da semana

Links úteis para estudo :)

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

(https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
(https://www.maujor.com/tutorial/propriedade-css-display.php)
(https://www.w3schools.com/cssref/pr_class_display.asp)
(https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-block-98480c987950)
(https://medium.com/collabcode/pare-de-chutar-e-aprenda-como-funciona-o-display-inline-4ccb7b77371d#.jww2dont9)
(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Sites úteis para buscar por imagens e layout

Vídeos pra quem gosta de vídeos - estudos

Jogos pra quem é de jogos - de CSS!! :)

Conteúdo - INTRODUÇÃO À HTML E CSS

Iniciaremos com assuntos básicos de estrutura, nomenclatura e anatomia de HTML e CSS.

HTML: anatomia e introdução de tags;
CSS: anatomia e introdução de propriedades;
Classes, id;

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

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

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 id

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.

Propriedades e tags

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;

lianaalice/On10-TodasEmTech-HTML-CSS