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

CONTEÚDO AULA TARDE 13h - 17h

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;

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:

Sublime Text;
Notepad++;
Atom;
O que vamos usar durante as aulas é o Visual Studio Code;

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

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

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;
Ótimo site guia para estudos - desenvolvido por aluna da reprograma;
RGB, RGBA, Hexadecimal;
Dicas de links sobre Display

(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

Languages

Language:HTML 86.9%Language:CSS 13.1%