HTML

hypertext markup language - linguagem de marcação de hipertexto

[Atributo fornece informação adicional];
O atributo está indicando um valor;
Toda tag é igual uma caixa, ela precisa receber um valor;
Tag é "igual" uma variável, ela precisa receber um valor pra ter uma função.

Hoje não é necessário "atributo" + "valor" para essa tag a nível de javascript.
Toda vez que abro uma tag, eu dou espaço para uma função.

Usuário-servidor

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Server-side acontece no servidor via computador remoto que vai trabalhar com o protocolo http, que assim que o client-side solicitar algo, o servidor vai enviar o resultado.

Usuário/cliente - apache/http - servidor.

O próprio servidor tem suas pastar no computador do anfitrião/localhost
um vendedor/servidor que [não] tem produto.

O usuário não terá acesso as informações.

"Content Management System" (CMS) - Sistema de gereciamento de conteúdo.

htmlobjetos; cssarte; phpinteração;

"Fechei um paragrafo".

"Título"

Eu digo que estou dentro de uma página html.

cabeçalho

html> head> title

Html>cabeçalho/head>tittle>corpo/body

obs: h1/título

h2/subtitulo

Autotag

Tudo que tiver dentro do <center> vai ficar centralizado.

negão/negrito

sublinhado

Atributo = dizer o caminho = direção

img do tipo jpg

Código do tipo javascript

Você fez a tag, mas não colocou a imagem dentro do arquivo mestre.

Altura e largura

é uma direção

é uma direção

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

CSS

1 forma

h1 do tipo tamanho da fonte: 15 px; color

2 forma

3 forma

Pra linkar o arquivo externo do css com o html.

estão na mesma pasta.

organizando

obs: muito conteúdo no [css], tem que organizar via 'link css'.
css e html responsivo, ou seja, cada um cuida do seu quadrado em pasta e arquivo.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Discriminando os títulos estilo condição [mod].

2 tipos paletas de cores.
Color em apenas em texto.

Background

Antes

Depois

Cores hexadecimal HTML.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Div é um espaço em branco.

Existem vários [tipos] de div.
class = tipo

Ela só vai aparecer se for definir um tamanho pra ela ⬇

⬇

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Entrada do tipo "checkbox" e nome "idosos".
obs: "idosos" nada a ver com o código, *mas posso estar errado.
obs: estudar [select].

quebra linha

{pasta é ~ de arquivo, vscode abre pasta e acessa arquivo}

obs: "center" está absoleto, por isso deixou de funcionar via centralização de vídeo, eu tive que usar outra linha de código chamada "div".

Div do tipo texto alinhado pra o centro.

Css diretamente na pasta html.

h1 tem um tamanho de fonte do tipo 50px e cor azul.

Div é uma tag. obs: "espaço em branco".

O Certo é [class]

</video>

</div>

"quadrado classe e nome vídeo".

source: para indicar o formato de vídeo.
src: para indicar o caminho do local do arquivo de mídia.

Formato de vídeo do tipo mp4

quadrado do tipo video.

É um link do tipo "folha de estilo" e o caminho é "./assets[...]"

A string entre aspas é relevante para o navegador, exceto quando você usa o "estilo.css", antes da "{" você pode colocar qualquer coisa, exemplo: ".vida{}"

Tijolos e artes separados.

<input type="checkbox" name="Idosos"/> servidor

idosos: rótulo

Quando se coloca "class" tanto faz o nome.

Layout do Airbnb: font circular e cereal.

1348x59 = 60 pix ~

2: Toda essa 'div' vai ser adaptável.

3: A direção é em linha.

4: "que o alinhamento de cima e baixo, que o contrário do row, pq row é linha, o contrário de linha é uma coluna.

"align-item:center;" a coluna vai ser no centro.

obs: justify-content; vai alinhar na linha, o texto que estiver dentro.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Pega dentro dessa 'class' topo o 'paragrafo' b

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Resulta até agora.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

antes

depois

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Modificando para virar um 'hover'
obs: 'hover' só conseque colocar numa 'class'
Pega dentro dessa 'class' topo o 'paragrafo' b

-obs: mudança visual

Só conguimos colocar o 'hover' dentro de uma 'class'

Eu acho que é por uma questão de organização, já que em 'class' eu posso rotular do jeito que eu quero.

Outro maneira:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

url:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

0bs: tem uma diferença entre topo (que é "quadrado/div) e topo-texto (que é apenas texto). {lógica sintática}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

A div apenas envolve a imagem para que os recursos/assets do css seja aplicado.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Flexbox é uma tecnologia criada pelo css para que consigamos trabalhar com div/quadradros adaptáveis a max e min do usuário. obs: que se adaptadam a qualquer tamanho tela, exemplo: pc, tablet, celular.

exemplo: flex-direction row ele mexe com itens

O HTML sempre trabalha com a 'div' uma debaixo da outra.

A 'div' ficou flexivel aqui; 'ajuste dinâmico'.

obs: azul: 'div' genérica; vermelho: 'div' item

Div genérica está ligada com o ajuste física, enquanto a "div" nichada está ligada com o que está dentro, como o texto.

"Eu não vou alinhar na linha, eu vou alinhar em forma de coluna".

Ele quis dizer que é um embaixo do outro, como uma coluna faz.
Pra centralizar infelizemente tem que ficar em forma de coluna:

O fundo-imagem com o setup flex + o fundo-menu é um quadrado sobreposto numa imagem + fundo-menu-logo que é um logo sobreposto em fundo-imagem e fundo-menu.
Um quadrado sobreposto em outro quadrado.

Tudo é um mesmo CARALHO.

Cada jogo é um jogo, ou seja, a cada nova 'div' requer fazer o pareamento com o CSS para configurar a a tecnologia 'flex'.
Aqui eu fiz uma nova 'div' e estou sobrepondo outra 'div' para poder fazer o 'setup flex'.

Mesmo que o 'logo' fundo esteja dentro da 'div' genérica, não significa que ele é 'flex', apenas quando eu abro uma 'div' dentro de outra 'div', como é o caso de logo-fundo > logo-setup > loguinho.