/on20-tet-s2-html-css

Primary LanguageHTML

logo reprograma

Tema da Aula

Turma Online 20 - Todas em Tech | Front-end | Semana 2 | 2022 | Professora Jaqueline de Almeida

Bem-vindas a turma 20 do Bootcamp de Front-end do Todas em Tech! Hoje vocês vão navegar pelo mundo do HTML e CSS, conhecendo os principais fundamentos. Vamos juntas, com tranquilidade e muita diversão em três encontros durante esta semana.

Instruções

Antes de começar, vamos organizar nosso setup.

  • Fork esse repositório
  • Clique no botão code
  • Abra o seu GitBash
  • Digite o comando:
     pwd
  • Entre no seu desktop:
     cd desktop
  • Clone o fork na sua máquina: basta abrir o seu terminal e digitar:
     git clone url-do-seu-repositorio-forkado
  • Digite o comando ls para encontrar o seu repositório:
     ls
  • Copie o nome do repositorio e entre na pasta clonada:
     cd on20-tet-s2-html-css
  • Crie uma branch com o seu nome:
     git checkout -b seu-nome
  • Digite o comando para abrir o projeto no vscode:
     code .

Resumo aula sábado!

O que veremos na aula de hoje?

Conteúdo

HTML

Tags básicas

   div, p, h1, script, link

HTML semântico

  header, nav, footer, main, sections, header, aside

Links em âncora

  href="#"

Formulários

form, input, placeholders, checkbox, radiobuttons, buttons

Tabelas

thead, tbody, td, th, tr

CSS

Diferentes formas de adcionar estilo à página

  • Tag Style
  • Link para folha de estilo

Importando fontes externas (ex: Google Fonts)

Método BEM

Como nomear as suas classes.

Seletor

.class #id elemento atributo

Propriedades de Estilo no CSS

  • Dimensões de elementos (largura, altura) - (width, height)
  • Margens e espaçamentos (margin, padding, border)
  • Fontes e suas cores, famílias, tamanhos e ênfases
  • Cores de fundo, transparências e gradientes
  • Alinhamento de elementos
  • Propriedades display (none, block, inline, inline-block e flex)
  • Propriedade border-box
  • Medidas usadas no CSS (px e %)
  • Sombra

HTML

O que é?

HTML é uma abreviação de Hyper Text Markup Language (linguagem de marcação em hipertexto). Não é 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. Os sites, nos seus primórdios, eram basicamente feitos de html puro! Bonito #sqn 🙃.

Como ganha vida?

Antes de começar a codar, você precisa criar o arquivo html:

  • index.htm

Depois, arquivo criado, você inicia com a estrutura básica:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Quem lembra da música: "cabeça, ombro, joelho e pé?" É neste flow que o html se estrutura.

Meta Tags

Elas servem para você organizar a sua página, mas sem que o usuário veja.

Lá ficam:

  • lang: linguagem que o navegador vai interpretar;
  • charset: indica a formato de codificação de caracteres
  • viewport: indica que a visualização da página é adequada para responsividade;
  • title: titulo da sua página - aqui consegue ver.

Aqui você ainda inclui o link para o seu css e para fontes.

Tags

Dentro do body, incluimos as tags (etiquetas) que referenciam o conteúdo incluido no html. Exemplo:


<p>conteúdo</p>

Algumas tags precisam ser abertas e fechadas, para que estejam certas, como no exemplo acima. Outras são autocontidas, não precisando de tag de fechamento:


<img href="">
Tags Básicas
Tags HMTL O que faz?
html, head, body Utilizada para definir a relação entre o documento e algum recurso externo (head)
link Utilizada para definir a relação entre o documento e algum recurso externo (head)
meta Utilizada para inserir metadados (informaçõe) a respeito de um documento HTML (head)
title Define o titulo do documento (head)
main Representa o conteúdo de maior relevância dentro de uma página (body)
header Utilizada para representar o cabeçalho do documento (body)
nav Utilizada para definir um conjunto de links de navegação (body)
section Utilizada para criar seções dentro de um documento e geralmente contém um título (body)
article Utilizada para fazer um artigo dentro de um conteúdo, geralmente se utiliza um título e são idependentes (body)
div tag de divisão (body)
a Utilizada para inserir links (body)
h1 a h6, p Tags para definir textos. H1 a h6: Tags para títulos. p: Tag utilizada para inserir parágrafos (body)
img Utilizada para insetir imagem
aside Seções muitas vezes representadas como barras laterais, relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo

Comentários em HTML:

HTML semântico

Semântica é um estudo a respeito do significado/sentido de palavras, frases ou expressões dentro de um contexto. No programação ela está relacionada ao significado de uma parte do código. EX: Qual a finalidade/função que esse elemento tem no HTML? O HTML semântico torna as informações de um site bem explicadas para o computador, facilitando o entendimento de leitores de acessibilidade, e ajudando mecanismos de pesquisa a captarem palavras-chave importantes que identificam a página com mais facilidade, indexando como preferência nas buscas.

Bloco BEM

Algumas tag são mais semãnticas do que outras e é importante ficar atenta a elas.

Leia mais aqui:

Identação

⚠️ Identar o código é deixar ele organizado de uma maneira que facilite a sua leitura e de outros desenvolvedores que leiam os eu código. Para indentar, segure a linha de código e aperte tab.

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 dos seletores. É de cima para baixo! 󠁢

Há três formas para incluir o código CSS em um documento HTML:

  • Interno
<p style="color: blue">Parágrafo com fonte azul.</p>
<p>Esse outro parágrafo não é azul, a não ser que
exista <span style="color: red">CSS em outro lugar</span>.</p>
  • Interno
<head>
  <style type="text/css">
    seletor { propriedade: valor; }
  </style>
</head>
  • Link externo

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
</html>

Dentro do arquivo .css, a anatomia é:

seletor {
  propriedade: valor;
}
Exemplo:

p {
  color: red;
}

Comentários em CSS:

/* Sou um comentário CSS */

Seletores

Classes e ids são atributos que podem ser inseridos em qualquer tag dentro da tag body. Eles são atributos de nomeação, sendo class muito usada para referência em CSS e id para Javascript, mas o id também pode ser utilizado no CSS quando você quer estilizar um conteúdo de html muito especifico. Uma diferença entre os dois é que podem haver várias classes com o mesmo valor, ao passo que ids devem ser únicos.

  • Classes : chamadas com ponto no CSS.
 <section class="titulo-principal">
  • Id : chamadas com hastag
 <section id="imagens-centrais">
  • Elemento : chamando o elemento/tag direto no CSS.
<img>
  • Atributo: incluindo a tag + o atributo entre parênteses :
a[href]

Pseudo-classes

  • Dinâmica: controlam o estado do elemento
:hover
  • Estruturais: seleciona um elemento da estrutura do código
:firs-child

Principais propriedades

Propriedades CSS
background background-imagem, backgroun-color
text text-align, font-family, font-size, text-decoration, font-size, text-transform
layout width, margin, padding, display(inline-block, lex, block
cor color
decoração box-shadow, border

Tamanho de fontes

Medidas absolutas

centimento (cm), mm(milimetro), in(polegada), px(pixel), pt(ponto), pica (pc)

Medidas relativas

  • Em: relativa ao tamanho atual da fonte. Muda os elementos filhos, de acordo com o tamanho dos elemento-pai; 1em é 16px;
  • Ex: Altura x da fonte;
  • Rem: relativo a fonte configurada na raiz, no html e/ou body;
  • Vw: view port - largura da view port da fonte, de acordo com o dispositivo;
  • Vh: largura da view port

O W3c recomenda o uso de px e em.

Tamanho de imagens

No tamanho da imagem, o valor médio de largura de 1500 e 72px de resolução sendo uma boa opção para não pesar a sua página. Sites pesados não são indexados pelo Google, ou seja, não aparece nas buscar iniciais.

O tamanho pode ser alterado em px ou porcentagem, nos atributos width e height.

Método BEM

A sigla BEM significa block, element, modifier, que são os três pilares do método BEM. É uma metodologia de criação de nomes para classes, tornando esse processo mais prático, lógico, e rápido. "O BEM ajuda o desenvolvedor a criar pedaços reutilizáveis do códido, tornando o processo de nomeação no HTML e CSS mais prático lógico e rápido." Bruna Gil Ele facilita o entendimento da hierarquia e ação do código, criando um padrão.

Vamos facilitar a vida, né?

Bloco BEM

Esquema de nomenclatura

 bloco__elemento_modificado-nome_modificador-valor

Nomes em letras latinas minúsculas.

Palavras são separadas por um hífen (-).

.titulo-principal

O nome do bloco e o nome do elemento são separados por dois underlines (__).

.header__logo { } 
.header__imagem { }
.header__pesquisar { }
.header__menu { }

<form class= "search-form">  
    <input class="search-form__input">
  
    <button class="search-form__button">Pesquisar</button> 
</form>

O modificador é separado do nome do bloco ou elemento por um único sublinhado (_).

.header__navigation { }
  .header__navigation_secondary { }
  .header__navigation_primary { }

O valor do modificador é separado do nome do modificador por um único sublinhado (_).

Bloco

  • É único e independente
  • Não deve haver dois ou mais blocos com mesmo nome.
  • É o primeiro componente a ser idealizado e construído, carregando consigo os comportamentos e estilos mais genéricos
  • O bloco pode conter elementos ou outros blocos.

Bloco BEM

Bloco BEM

Bloco BEM

Elemento

  • Está diretamente atrelado a um Bloco.
  • Não pode ser utilizado sem um Bloco.
  • Depende de outras estruturas no código para “existir”
  • Vamos dar uma olhada nesse outro exemplo de código.

Elemento BEM

Na imagem abaixo, temos um formulário (form) que é um bloco com dois elementos input e buttton

Elemento BEM

<form class= "search-form">  
    <input class="search-form__input">
  
    <button class="search-form__button">Pesquisar</button> 
</form>

Modificador

  • É opcional.
  • Pode estar atrelado tanto a um Bloco como a um Elemento.
  • Carrega caraterísticas específicas de aparência, estado ou comportamento (“Como esse bloco é? O que esse elemento faz?”)
  • Um de seus principais usos é quando temos blocos ou elementos com estruturas iguais, mas com estilos ou estados diferentes.

Modificador BEM

Nomenclaturas alternativas

  • Tracinhos (--)
nome-do-bloco__nome-do-elemento--modificador
  • Estilo CamelCase (inicia com a letra minúscula)
blockName-elemName_modName_modVal
  • Estilo React (inicia com a letra maíuscula)
BlockName-ElemName_modName_modVal

Você pode montar um próprio sistema de nomenclatura, desde que separe a interface em blocos, elementos, modificadores. Ou seja, seguindo a arquitetura do Método BEM.

CSS é assim...Respira que vai dá certo

No inicio e no meu do aprendizado de CSS é um pouco como tentativa e erro. Com a prática, vamos acertando para que, ao longo do processo a gente pegue o jeito e seja mais simples e fácil. Praticar, estudar, pesquisar! Com o tempo você pega o jeito!

Modificador BEM

Fontes externas

O CSS tem fontes padrões que são utilizadas na construção da página. Mas você pode estilizar as fontes através de um link externo adcionado no head do html.

A ferramenta mais utilizada para esta estilização é o Google Fonts:

Google Fonts

Dev Tools

Dá um crtl + f12 e vamos embora! O Devtools é uma ferramenta do navegador que permite a inspeção do código. Com ele você consegue verificar o html e css de qualquer página. Você pode ver as aplicações do código, copiar (sim!, é possivel), mas também ter como inspiração para a sua página. Ali também você pode fazer alterações para verificar como fica a aplicação na sua página e depois aplicar no seu código.

⚠️O navegador mais recomendado para esta inspeção é o Google Crohme.

Documentação

A leitura da documentação é essencial para o aprendizado de HTML e CSS. A documentação te auxilia a tirar dúvidas, corrigir bugs/erros e trazer novos elementos no seu código.

A documentação mais famosa é a da Mozilla.

Documentação HTML Documentação CSS

E ainda tem o W3 Schools que é responsável pelo HTML e CSS.

W3 Schools

Resumo aula de quarta-feira!

O que veremos na aula de hoje?

Formulário

Um formulário no HTML é representado pela tag form:

<form> Esta é uma tag de formulário </form>

Esta tag pode receber alguns atributos específicos como o atributo method, que vai definir o método HTTP com que o formulário HTML irá lidar, que pode ser o método Get ou Post. Recebe tbm o atributo action que através de uma URL, vai definir o local para onde serão enviados os dados recolhidos nos formulários.

<form method="post" action="/receber_dados.php">
...
</form>
Tags Formulário
input Campo de entrada onde o usuário pode inserir dado
label Tag de rótulo/legenda para um campo do form
textarea Campo de entrada para texto de várias linhas
fildset Define um grupo de campos
legend Título para um conjunto de campos
select Define uma lista de opções selecionáveis
option Define cada opção dentro do select

Formulário

Formulário

Exercícios

Material da aula

Links Úteis

Já que é para estudar...

Material Complementar - em Vídeo

Desenvolvido com 💜