Skip to content

reprograma/On13-TodasEmTech-HTML-CSS

BranchesTags

Repository files navigation

On13-HTML-CSS

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

Aula dia 28 de Agosto, sobre HTML e CSS Básico

AULA 28 AGOSTO, SÁBADO, 9H - 17H

CONTEÚDO AULA MANHÃ 9h - 12h

  • Preparando estrutura de desenvolvimento juntas
    • Criando pastas e arquivos
  • Introdução e revisão - HTML
    • O que é linguagem de marcação de hipertexto? <!DOCTYPE html>
    • Elementos <head> e <body>
  • Intervalo - 15min
    • Elementos HTML: tags (etiquetas) e atributos
    • Tags semânticas, como e porque usá-las! (:
      • <header> <nav> <footer> <main> <section> <article> <ul> <ol> <li> <aside> <button> <h1> <h2> <h3> ...
    • <a> - links em âncora, e seu atributo href
  • Introdução CSS
    • CSS - Folha de estilo em cascata
      • Diferentes formas de adicionar estilo à página
        • A tag e atributo <style>
        • Importar arquivo style.css através da tag <link>
        • Importando fontes externas (ex.: Google Fonts) - um outro uso da tag <link>
    • Estilizando o CSS juntas - propriedades básicas color bg-color font-size font-family
    • Seletores CSS - .class #id elemento atributo
    • Especificidade com seletores, propriedades CSS e efeito cascata
    • Pseudo-seletores, ex: - :hover

CONTEÚDO AULA TARDE 13h - 17h

  • Dúvidas da manhã
  • Box-sizings (tamanho das caixas) e displays
    • Blocos <div> e elementos em linha <span>, <img>
    • Displays block, inline, inline-block
    • Mexendo em bordas, margens, preenchimentos e conteúdo
      - [x] border margin padding width height
      - [x] border-box vs content-box
  • Reset básico - mexendo nos estilos padrão de página
  • Display flex - o famoso Flexbox
    • Mães <div>as e filhas <div>inhas. Display na mãe, mexe as filhas.
    • Algumas propiedades e seus valores: justify-content align-items align-content flex-direction
  • Intervalo - 15min
  • Codando juntas
  • Retirar dúvidas, deixar o exercício para concluir até sexta e falar sobre materiais e jogos disponíveis :)

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

  • Meu primeiro formulário
    • Elementos <form> <input> <label> <textarea> <select> <option> <button>
    • atributos type for name placeholder
  • Tirar dúvidas da semana

Link do Dontpad da Aula

link para o arquivo dontpad;

Link da página contendo todos os sites desenvolvidos pelas alunas

Clique aqui para ver os sites desenvolvidos pelas alunas

Instruções para baixar o repositório

1. Entrar no repositório e fazer o fork do repositório On13-TodasEmTech-HTML-CSS

Link: Repositório

2. Clicar no botão CODE e copiar o link.

3. Abra o GitBash no seu desktop.

4. Siga os comando e seja feliz :)

4.1 Digite o comando:

       pwd

4.2 Caminhe até o desktop:

       cd desktop

4.3 Clone o repositório remoto na sua máquina:

      git clone link-do-repositorio

4.4 Entre na pasta clonada:

      cd On13-TodasEmTech-HTML-CSS

4.5 Crie uma branch com o seu nome:

      git checkout -b seu-nome

4.6 Digite o comando para abrir o projeto no vscode:

      code .

Estrutura básica

 📁 Nome-da-pasta
   |
   |-  📁 index.html
   |
   |-  📁 css
   |    |- 📁 style.css
   |
   |-  📄 imagens
   |    |- 📁 imagens.png

Ou seja, uma pasta com um arquivo index.html na raiz e duas pastas: uma css para inserção de nossos estilos "style.css e outra img, para inserção de nossas imagens.

Editores de texto

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 programadores, oferecendo facilidades e plugins para facilitar o desenvolvimento. Alguns famosos e notáveis são:

html é a estrutura css é o estilo por cima

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>

Tags autocontidas

A tag img é um bom exemplo, porque ela não possui um conteúdo interno, ela é o próprio conteúdo. Ela recebe atributos específicos para determinar o caminho da imagem e a descrição dela.

<nome-da-tag atributo="valor do atributo">

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 entendimento humano -->

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 semantico torna as informações de do site bem explicadas para o computador, facilitando o entendimento de leitores de acessibilidade, e ajudando que mecanismos de pesquisa captarem palavras-chave importantes para influenciar as pesquisas da página.

Fonte: medium.com/@eduagni/html5-entendendo-a-estrutura-e-a-sem%C3%A2ntica-db5f17808c7
TAGS HTML
html, head, body Tags de estrutura
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 título 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)
footer Utilizada para especificar o rodapé do conteúdo de um documento ou seçã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 inserir imagem (body)
aside Seções muitas vezes representadas como barras laterais, relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo

Clique para ver mais tags HTML

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.

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).

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

Inline

<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>

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 */

Classes e id

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 (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.

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. Ela divide e pensa na arquitetura da interface em em blocos, elementos e modificadores.

Esquema de nomenclatura

 bloco__elemento_monificado-nome_modificador-valor

  • Nomes em letras latinas minúsculas.

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

  • O elemento é separado do nome do bloco por um sublinhado duplo ( __).

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

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

Os três pilares

  • Bloco: Não deve haver dois ou mais bloco com o mesmo nome, eles são independentes, pode conter outros blocos ou elementos.

Fonte: en.bem.info/methodology

Fonte: en.bem.info/methodology

  • Elemento: Está diretamente ligado a um bloco, não pode ser utilizado sem um bloco, depende de outras estruturas no código para existir.

Fonte: en.bem.info/methodology

<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. Ele é usado para mudar a aparência, o comportamento ou o estado.
<div class="card">
  <p class="card__paragrafo">Este é um parágrafo</p>
  <p class="card__paragrafo card__paragrafo_vermelho">Este é um parágrafo vermelho</p>
</div>

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
  • Seu sistema de nomenclatura

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.

Propriedades CSS
Propriedades de background: background-imagem, background-color
Propriedades de texto: text-align, font-family, font-size, text-decoration, font-size, text-transform
Propriedades de layout: width, margin, padding, display (inline-block, flex, block)
Propriedade de cor: color
Propriedade de decoração: box-shadow, border

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

Criando um 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>
Algumas tags utilizadas dentro dos formulários
input Campo de entrada onde o usuário pode inserir dados
label Tag de rótulo/legenda para um campo do form
textarea Campo de entrada para texto de várias linhas
fieldset Difine 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

Exemplo de um formulário

Links úteis para estudo :)

(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/)

Dicas extra

Sites úteis para buscar por imagens e layout

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

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

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

2 stars

Watchers

1 watching

Forks

38 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 31
+ 17 contributors

Languages