HTML5 e CSS3

Minha apostila de revisão de HTML e CSS.

Sumário
 Modulo 1..............................................................................................................................1
Media: Imagens, Vídeos e Audios............................................................................................5
 Modulo 2..............................................................................................................................7
Cores no CSS...........................................................................................................................7
Anatomia das Fontes................................................................................................................8
Classes e Id.............................................................................................................................11
Modelo de caixas....................................................................................................................12
Variáveis em CSS...............................................................................................................14
Responsividade..................................................................................................................15
Modulo 3....................................................................................................................................16
Imagens no fundo da pagina...................................................................................................16
Tabelas...................................................................................................................................18
Modulo 4....................................................................................................................................21
Iframes...................................................................................................................................21
Formulários............................................................................................................................23

 Modulo 1

Internet: a primeira rede surgiu na guerra fria, chamada arpanet. Evoluiu para internet e tinha o
intuito de proteger centros militares.
O Tim Berners-Lee criou a rede HTTP, criou o WWW que é subrede do HTTP, e criou a
linguagem de marcação de hiper texto HTML
O computador funciona com sinais, na computação é o 0 e 1, que são ondas com e sem sinal, os
dígitos 0 e 1 é chamado de bit: binary digit.
Um dado é representado por 8 bits, que é chamado de byte, EX: a sequência 01000001 = é a
letra A. código multibyte UTF-8
1024 bytes = 1KB kilobytes 2 elevado a 10
1024 KB = 1MB
1024 MB = 1GB
1024 GB = 1 TB
1024 TB = 1 PT penta bytes
1024 PT = 1 EB exa bytes
Domínio: é único, paga anualmente, vários TLDs(.com, .gov, .br...)
Hospedagem: espaços para armazenar arquivos, pago mensalmente, espaço, memoria, recursos.
URL: localizador de recurso único. Endereço para apontar para um lugar,
Protocolo: htpps://

Front- end = cliente size\ lado do cliente = HTML, CSS, JS...

Back-end= server size \ lado do servidor = PHP, Node...

HTML: linguagem de marcação de hipertexto; conteúdos: textos, imagens, vídeos, tabelas.

CSS: folhas de estilos em cascata; Design: cores, sombras, tamanho, posicionamento.
JS: interações: menus, animações, popups, validações.
Estrutura básica do documento HTML:
Head: é a cabeça
Body: o corpo
H1: definimos o título <h1> </h1> em hierarquia até o H6
P: definimos o paragrafo <p> </p>
Adicionando emojis: coloca assim: &# e o código do emoji
Br: o br quebra a linha
Imagens: Primeiro baixe a imagem, jogue na pasta do site html, dentro do body coloque img,
depois dentro do src pressione a tecla ctrl+space e selecione a imagem
Ícone na guia: primeiro baixamos o icon no favicon.io, onde podemos converter a logo para
arquivo ponto ico depois colocamos o icon no head, em cima title colocando link : favicon
Negrito: usamos a tag b (não semântica) ou a tag strong que é semântica
Itálico: tag i (não sematica)
Texto marcado: tag mark
texto grande e pequeno: usamos a tag small e a big para palavras grandes e pequenas (a big
está absoleta)
Texto Deletado: texto fica riscado no meio tag del texto deletado
Texto inserido: o texto vai ficar subiliado <ins> texto subiliado</ins> mas tambem pode-se
usar a teg u (não semântico) </p>
Texto subscrito e sobescrito
<p>H²0 com essa teg o 2 fica um pouco pra baixo</p>

<p>10 ⁴ com essa o 4 fica um pouco pra cima</p>

Tag line-height : 2em refere-se ao espaçamento entre as linhas do paragrafo
Tag Pré e Code: a code serve para escrever códigos de linguagens de programação no site e o
pre é para fiar indentado(ele segue o as identacao que colocamos )
Tag q = serve para quando usamos uma citação no site
Tag blockquote = é para uma citação mais completa
Tag abbr: serve para, por exemplo, colocarmos uma sigla e quando passarmos o mouse mostrar
o resultado = estou estudando <abbr title= “HiperText Markup Linguage”>HTML<
/abbr>

OL = listas ordenadas (colocamos um li para os itens da lista)

 Colocamos o start para dizer qual numero\letra\romanos vai iniciar

 No type colocamos o tipo numero\letra\romanos

UL = listas não ordenada – que não tem ordem definida

 No type colocamos o tipo do símbolo = disc\circule\square

Podemos colocar listas dentro de outras e colocar ol dentro de ul e vice

 Aninhamento = uma coisa dentro de outra

Tag= DL listas de definição (tipo um dicionário)

 Colocamos dento do dl um dt e um dd para o nome do termo e o significado

Tag list-style-type:

 Tag para por um ícone diferente na frente dos elementos da listas:

 No emojipedia tem
Tag list-style-position:

 Quando colocamos inside; a lista fica para dentro

Tag columns: 2;

 Aqui podemos por quanto colunas queremos

Tag a = links externos e internos

 No href colocamos a url o links para onde vamos quando clicado

 Usamos o target=”_blank” para o link ser aberto em outra aba e _self para própria
pagina
 Para links internos colocamos o nome da pagina no href
 No rel dos links internos colocamos next e prev para a pagina próxima e anterior
Link para download
  Usamos a tag a e colocamos download = “onomedoarquivo.pdf” e depois o
type=“application/pdf”para o tipo de arquivo que será baixado.

Media: Imagens, Vídeos e Audios

Tag Picture = para colocarmos varias imagens a partir do souce, no souce escolhemos o media
type
Assim:
<Picture>
<source media=”(max-width: 750px)” srcset= ‘imagens/foto-p.png’ type=’image/png’>
<source media=”(max-width: 1050px)” srcset= ‘imagens/foto-m.png’ type=’image/png’>
<img src=’imagens/foto-g.png’ alt=’imagem flexivel’>
</picture>
Bom, o que aconteceu aqui foi dentro do Picture colocamos o img para uma imagem grande
carregar em telas grande, para as imagen serem carregadas em tela media ou pequena
colocamos source (do menor ao maior tamanho, de baixo pra cima)

 No media colocamos a sua largura mínima ou máxima

 No srcset a foto
 No type o tipo da foto: png, jpg..
Conclusão: para que o nosso site fique responsivo e abra em diversos dispositivos precisamos
colocar outras versões da imagem com diferentes tamanhos, para abrir em telas diferentes.

Tag áudio: para por áudio no site

 Colocamos o source
 No src colocamos o arquivo de áudio
 Formatos de áudio: mp3, mpeg, ogg
 No type é o formato do áudio ex: áudio/mp3
 No <áudio > colocamos o preload(para o tipo de carregamento do audio)
 O autoplay
 O controns para mostrar os controles que conhecemos de áudio
 O loop para quando o áudio terminar começar de novo
Tag vídeo: para por vídeo no site

 Colocamos o source, no src o arquivo do vídeo

 No type é o formato do vídeo ex: video/ mp4
 Colocamos o mesmo vídeo(cada um em um source) em formatos diferentes para maior
compatibilidade
Vídeos do Youtube no site

 Acesse o vídeo > clique em compartilhar > e em incorporar

Para editar esse vídeo no css:

 Colocamos o iframe em uma div

 Sugere criar uma classe
 No css fazemos assim:
Div.video{
Position: relative;
Padding-bottom: 50%;
}
div.video > iframe{
position: absolute;
top: 5%
left: 5%
width: 90%
heigth:90%
}
Colocamos o position nos dois ai podemos configurar o iframe.
Colocando CSS no site

 Podemos colocar o style na tag que queremos estilizar Ex: <main style=
“background-color: black”>
 Podemos colocar o style no head abaixo do title.
 E a melhor forma é criando um arquivo CSS e linkando ele no head do HTML
(link:css)

@charset “UTF-8” = regra de compatibilidade de acentuação (usamos

geralmente em cima nos arquivos css externos por não terem essa regra)
  Modulo 2
Cores no CSS
 Hexadecimal: #0000ff – azul em hexadecimal
 RGB (0, 0, 255) – azul em rgb= (Red, Green e Blue)
 HSL (240, 100%, 50%) azul em hsl (matiz, saturação e luminosidade)

Circulo cromático

 Cores primarias: azul, amarelo e vermelho

 Cores secundarias: verde, laranja e violeta
 Cores terciarias: amarel-esvediado, azul-esverdiado, azul-arroxeado, amarelo-alanjado,
vermlho-alarangado, e vermelho-arroxeado
Cores complementares = opostas com contraste
Cores análogas = cores irmãs perto

Colorzila: extensão para pegar cores de sites

 * = o asterisco refere-se á as configurações globais da CSS

Tag Backgroud-color = por cor no fundo

Tag background image: linear-gradient:( ) = por grandiente no site

 Dentro dos parênteses colocamos a direção do gradiente

 (Tô right/left/bottom/top)
 Depois da direção colocamos as cores do gradiente
 Na frente das cores podemos por o quanto por cento que ele deve aparecer 10%
blue
 Use o *{height: 100%;} para que o degrade não fique zembrado
Tag background-attachment: fixed = é para ficar fixo o fundo
Tag Color: por cor em algum elemento

Anatomia das Fontes

 Altura x = é altura do x minúsculo
 Altura das maiúsculas
 Ascendente = parte que vazou pra cima
 Corpo = altura das fontes contando com maiúsculas, minúsculas e vazamentos.
Serifa: pezinho das fontes que nos ajuda ler
Grifo: é a letra\caractere
Fonte: conjunto de grifos
Família tipográfica: variações dos grifos = light, normal, semibord, bord...

Para textos muitos longos é recomendável usar fontes serifadas

Monoespacada: mesmo espaço dos caracteres
Sans-serife: fontes que não tem serifa
Tag Font-family: por a família da font no site

 Logo após do nome da fonte, colocamos outras genéricas

 Se uma não funcionar a outra vai (safe cometions\combinações seguras)
Tag fint-size: tamanho da fonte

 Medidas absolutas (cm, mm, in, px, pt, pc)

 Medidas relativas (em, ex, rem, vw, vh)
 Usamos o em ( 1 em é 16px)
Tag font-weight : refere-se ao peso da font

 Colocamos: normal, lihght, bold, bolder

 Ou colocamos de 100 a 900
Tag font-style: é para a font for normal ou itálico

Tag text-decoration: underline = para ficar sublinhado e none para tirar o sublinhado
 Shorthand = significa uma mãozinha, serve para simplificar varias configurações em
uma só.
Para usar o shorthand para configurar as font usamos nessa ordem:
 Font style, font-weigth, font-size e font famliy.
 Fazemos assim :
 Font: (italic bold 3em DM sans);

Colocando fontes no CSS do Google Fonts

 Acessamos o google fonts

 Clicamos na font
 Clicamos nas variações das fonts que queremos e
 Clicamos em import
 Copiamos o import url e colamos no topo do CSS
Assim:
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
Font-family: ‘Bebas Neue’, sans-serife;

Colocando Fontes Baixadas

 Baixamos a fonte
 Criamos a regra:
 @font-face{
Font-family: “MS Gothic”; */Aqui colocamos o nome da font*/
Src: (‘msgothic.otf’) format(opentype);
/*aqui o arquivo do font que deve estar na
} mesma pasta do html, recomenda criarmos um
pasta
No font-face podemos colocar as demais configurações do sóweight,
font, pata fontes*/
size e tal
/*no format colocamos o tipo de arquivo da
 Podemos capturar fontes em sites através da extensãofont*/
fonts (opentype
ninja é OTF, trutype é TTF...)
 Podemos capturar fontes em imagens através do site whatsfonts

Tag text-align = serve para alinhar o texto: center, left, right, justifify
Tag Text-indent: 30px = serve para colocar endentação no começo do paragrafo

Classes e Id

Id = serve para identificar/personalizar um determinado elemento

 No html fazemos assim:

 <h1 id=”principal”> Titulo Principal do Site</h1> na tag colocamos o id e seu nome
  No CSS chamamos ele assim:
 #principal { com um jogo da velha
 }

Classes: serve para classificar/personalizar um determinado elemento só de forma múltipla, ou

seja, você poderá criar várias classes, diferente do id.

 No HTML fazemos assim:

 <h1 class=”titulo”> Titulo Principal do Site</h1> na tag colocamos o class e seu nome
 No CSS chamamos assim:
 .titulo { com um ponto na frente do nome da classe
 }

Pseudoclasse: refere ao estado do elemento, chamamos ele com o dois pontos e o nome da
psedoclasse assim:

 H2:hover{
Color: blueviolet; nesse caso o h2 vai ficar nessa cor quando passarmos o mouse.
}
:hover essa pseudoclasse serve para quando passar mouse acontecer algo, se relaciona ao estado
de um elemento; mais informações ex020

Tag transition-duration: 1s ou 0.5s;

 Serve para por uma transição, para usar em um :hover por exemplo.

:visited aqui a psedoclasse visited quer dizer que o a (link) for visitado ou clicado ficar uma
configuração diferente, pode mudar a cor dele por exemplo
:active essa psedoclasse é para quando o link ficar ativo/clicado

Filho: usamos o > assim: div > p {} nesse exemplo podemos fazer alterações
exclusivamento no paragrafo que esta dentro da div

Escondendo um elemento com o :hover

Display: none serve para não mostrar,
Display: block serve para mostrar
Display: inline-block; serve para por na mesma linha
::after usamos o dois ponto para pseudo elementos, o affter é para adicionar algo no final ou
depois que nesse caso vai ser do link*/
content: '→'; aqui vai ser a coisa que vai ser adicionada
::before
content: '←'; /*o before é para antes*/ aqui vai ser a coisa que vai ser adicionada
# = id
. = class
: = pseudoclasse
:: = pseudo elemento
> filho\clildren+

Modelo de caixas

 No html e css tudo que é exibido na tela é em forma de caixa, e pode estar uma dentro
da outra, termo que usamos é aninhamento.

 Height: é a altura, modificamos a altura do box de algum elemento

 Width: é a largura
 Border: é a borda do box
 Padding: é o espaço entre a borda do box
 Margin: é o espaço para fora do box
 Outline: é um traçado fora da borda do box do elemento
 Configuramos os lados também: left,top,bottum e right.

Tipo de box:

 Box-level: a tag div,h1,main,form,p... é um box level; ele quebra a linha e usa o

tamnho inteiro

 Inline-level: a tag span,a,small,Strong,button… é um inline level ; ele nao quebra a

linha, e continua na mesma linha

Podemos mudar um box se ele for box-level podemos mudalo para inline usando o display:
inline ou block para ao contrario.

 No devtools do google podemos visualizar a nossa pagina, e lá podemos ver os box de

cada elemento. (botão direito do mouse, e em inspecionar.)

Podemos simplificar usando shortheand nas tags pading,margin,border,outline...

Assim:

 Padding: 10px 10px 20px 10px; cada lado um valor, ao inves de usar o padding-left,
bottom, top e right…

 Padding 10px; usando assim todos os lados serão do mesmo valor

 Para o margin mesma regra

 Outiline: 5px dashed blue aqui colocamos primeiro a largura, tipo do outiline e a co
aqui colocamos primeiro a largura, tipo do outiline e a cor
Grouping Tags – Tags semânticas para montar o site

 Header = cabeçalho do site

Nav = menu do site

 Main = conteúdo principal

Section = sessões do site
Article = conteúdo independente (artigo)
Aside = conteúdo periférico relacionado ao artigo

 Footer = rodapé do site

Essas tags são tipos as divs só que semânticas

Podemos por essas tags dentro de outras

Tag box-shadows = sombra de caixa, serve para por sombra

 Colocamos assim:
 Box-shadows: 1px 1px 1px black; tamanho\deslocamento da sombra e depois a cor
 Podemos colocar a sombra pelo devtoos também
 Quando colocamos insert a sombra fica para dentro
Tag border-radius = arredondar a borda da caixa

 Colocamos assim:
 Border-radius: 10px 10px 10px 10px;
 Ou só um valor ou só dois para alterar só alguns dos lados

Variáveis em CSS
:root = psedoclasse, é a raiz da arvore do documento, tudo que fazemos nela vai servir pro
documento inteiro.

 E nela que colocamos as variáveis

  Usa o - - na frente
 O nome da variável
 --cor1: black
 E para chamar é assim:
 Color: var(--cor1)
 Podemos criar variáveis de cor, fontes...
 Assim:
 --fonteprincipal: “DM Sans” Sans;

* {}= asterisco no CSS é para selecionar e editar todos os elementos

Responsividade

Tag max-width e min-whidth: refere-se a largura mínima e máxima

 Usando eles assim:

 Min-width: 320px;
 Max-width: 800px;
 Assim a largura máxima do conteúdo será 800 e a mínima 320 para uma melhor
visualização da pagina
 Em imagens podemos colocar um width: 100%; que ela vai se adaptar também ou
podemos usar varias imagens como vimos lá na picture

Modulo 3

Git e GitHub

 Git = software gerenciador de versões como repositório local

 GitHub = serviço para gerenciar versões também só que na nuvem como repositório
remoto
 Instalamos no PC o Git e o Github desktop nessa ordem.
 Quando alteramos nosso código o atualizamos clicando em commit to main
 Imagens no fundo da pagina
Tag background-image: url()

 Na URL colocamos a nossa imagem

Tag background-repeat:

 Repeat é para repetir a imagen

 No-repeat para não repetir
 Repeat x e y é para a imagem repetir no exo em pé e deitado.
Tag background-position:

 Colocamos as opções: left, top, center, bottom

 Colocamos essas direções :

 Ex: backgound-position: top left

 Ou background-position: center center
Se colocarmos a imagem no body, ela vai achatar e não vai encaixar direito para isso
colocamos o :

 Heigth: 98vh;
 Vh é o tamanho da tela do navegador, tamanho da viewport

Tag background-size: aqui vamos configurar o tamanho da nossa imagem

 Podemos colocar o tamanho em pixels ou em %

 Auto
 Contain: ele adapta o tamanho da tela sem cortar, ou seja, ela vai achatar em telas
menores.
 Cover: ele preenche o tamanho da tela cortando, não vai achatar, os lados vão ser
recortados para preencher o fundo.
Tag background-attchament: (vinculo)

 Colocamos nele:
 Scroll: aqui o fundo vai rolar junto com conteúdo
 Fixed: junto com o cover de cima ela fica fixo
 Usando ele agente cria o efeito paralax

Shorthand do background:

 Nessa regra/ordem:
 Color > image > position > repeat > size > attchament
 Assim:
 Background: black url() center center no-repeat cover fixed

 Todos vai funcionar menos o cover(size), porque os navegadores ainda não
aceitam
 Por isso adicionamos ele fora do shorthand.

Centralizar caixas/box
Na horizontal usamos o margin: auto mas e na vertical?

 Primeiro colocamos o position: relative no caixa maior/de fundo

 Colocamos position: absulute na box que queremos centralizar
 Nela colocamos:
 Left:50%
 Top:50%
 Por causa dos positions podemos mexer no top e left
 Transform: translate(-50%, -50%)
 Por fim o transforme usando o translete, e os 50 por cento negativo o box vai ficar
exatamente no meio da caixa tanto verticalmente e horizontalmente

Tag: text-transform: uppercase: transformas as letras em maiúsculas.

Tag: font-variant: small-caps; é para tornar as letras todas em maiúsculas, sendo as
primeiras um pouco maior.

Tabelas

Tag Table: criar tabelas no html

Hierarquia tabelas simples:

 Table = tabelas
 Table rows: linhas de tabela
 Table header = cabeçalho de tabela
 Table data = dado da tabela
se não sequirmos a hierarquia a tabela vai ficar errada
Caption – colocamos
dentro do table, é tipo a
Hierarquia tabelas grandes: legenda da tabela.

 Table
 Thead= cabeça da tabela
 TBody= corpo da tabela
 Tfoot = rodapé da tabela fazemos assim:
 <table>
 Thead – cabeça
Tr – primeira linha
Th – titulo th
Th –titulo th
tr
thead
tbody
tr – segunda linha
td – dado td
tr
Para dizer pro navegador qual titulo é de qual coluna ou linha no th (titulo da linha)
tbody
colocamos o scope= row ou col (coluna/linha) </table>
Efeito zebrado:

tr:nth-child(2n){ /*para colocar um efeito de 1 a sim outra não, usamos

essa pseudo classe e colocamos 2n*/

 Se colocamos odd é impar em inglês – todas as linhas impas vai ser diferente
 Even é par
Mais informações no EX023 – tabela002
Tag: border: colapse serve para juntar os blocos da tabela formando um só, que por padrão são
separados.
Tag vertical-align: diferente do text align essa tag alinha os elementos vertical mente

 Top
 Midle = meio
 Bottom

Cabeçalho da tabela fixa

 Primeiro colocamos position relative na table (tabela)

 Depois essas configurações:

thead >tr >th{ /*o cabeçalho que tem o tr(linha), dentro tem th(tiyulo). */
position: sticky; /*quer dizer grudada*/
top: -1;
background-color: rgb(144, 43, 226); /*aqui é para por a mesma cor que tinha no
background por que quando subimos subiu so o nome e a cor ficou.*/
Mesclar duas células / transformar em uma só

<td colspan="2">B</td>

 Colspan - para mesclar a coluna, vc coloca a quantidade

 Rowspan - para linhas

Scope serve para indicar os títulos dos seus dados correspondentes

<th colspan="3" scope="colgroup">Filmes</th>

 No scope colocamos no th (titulos) indicando a sua coluna ou linha
 Row para linha
 Col para coluna
 Colgroup e rowgroup para um grupo de coluna ou linha

Tag colgroup: colocamos dentro do table, para personalizar as colunas

 Dentro colocamos as colunas e a sua class assim

 <col class="cnome">
 Mais informações na tabela005 do ex023

Tornando a tabela um pouco responsiva

 Usando o:
 #container{
 Overflow-x: auto;
 Primeiro colocamos a tabela dentro de uma div e a classe container
 E no css colocamos o overflow-x para rolagem lateral
 Overflow significa transbordar
 Colocamos o auto para rolar especificamente só a tabela, por que ela ta dentro de uma
div.
 Modulo 4

Iframes
= frame significa quadro
 O i do iframe refere-se ao inline
 Uma possível tradução seria: quadro em linha

 <p>Estou estudando iframe acompanhe meus projetos no

 <iframe src="https://www.instagram.com/davimota_19/"
frameborder="0"></iframe>
 </p>

 Colocando a tag iframe ele vai por um quadro inline e mostrar dentro do quadro o link
que colocamos
 Nem todo site permite ser mostrado dentro do iframe com o github

Podemos colocar dentro do iframe o link para o site, caso o navegador não seje compatível. Se
não mostrar o quadro, irá mostrar o link, ou qualquer mensagem que colocarmos.

 Frameborder: é o a borda, em 0 ela não aparece.

 Podemos colocar heigth e widt para mudar o tamnho do iframe
 Mas se personalizarmos na CSS, ela que vai valer
 Por padrão ele vem no tamanho de 300x150
 Scolling = parâmetro para ativar a barra de rolagem(auto, yes ou no) alguns broser não
funciona

Podemos colocar uma pagina interna que nós criamos

 No src(pag002.html)
 É como se você tivesse uma pagina inteira, complexada dentro de um quadro(iframe)

Como colocar paginas dentro do iframe, so que alternando elas no nav

<iframe name="frame" >

 Temos que colocar o name no frame, para chamalo no nav

<li><a href="paginas-extras/pag001.html" target="frame">Primeira

Pagina</a></li>
 No link do nav colocamos o target frame, assim quando clicarmos no link a pagina
será aberta não, na tela inteira, mas sim no iframe
 <iframe " srcdoc="<h1>Escolha uma das Opções</h1>
 Como o parâmetro srcdoc= podemos colocar html dentro dele, e será mostrado dentro
do iframe

Iframes mais seguros

<iframe src="paginas-extras/pag004.html" frameborder="0"

sandbox="sandbox">
 Usando o sandbox = sandbox criamos uma proteção para ataque, com isso não vai pegar
informações(ele vai bloquear scipts, formulários...)
 Mais tem mais opções se quisermos permitir

referrerpolicy="no-referrer">
 Já esse faz com que o que tiver no iframe não vai ser coletado os dados

Formulários
Os forms permitem que os usuários enviem dados para o web site.
Formulário simples:

<form action="">
<p>Nome <input type="text" nome="nome" ></p>
<p>Sobrenome <input type="text" nome="sobrenome"></p>
<p><input type="submit" value="enviar"></p>
 </form>
 O input para por elemento que aí é um texto
 Type text para por uma caixa de texto
 submit é um botão
 Value: o nome dentro do botão

autocomplete=”off”: dentro do form podemos colocar para desativar o autocomplete de

quando clicarmos nos formulário e aparece uma sugestão

 podemos coloca-lo no próprio inpute e terá varias opções

Enviar dados do formulário

 No action colocamos o arquivo da linguagem que vamos mandar

 Quando clicarmos no submit enviar

<form action= "cadastro.js"

Fazer com que o nome e a caixa estejam relacionados.

 Usamos o label:

<p><label for="inome">Nome </label><input type="text" nome="nome"

id="inome" ></p>

<p><label for="isobrenome">Sobrenome</label> <input type="text"

nome="sobrenome" id="isobrenome"></p>
 Entre o nome e o sobrenome do nosso formulário colocamos o label, e no for
colocamos o seu id
 É DE SUMA IMPORTÃNCIA USAR O LABEL, PARA QUE O NAVEGADOR
SAIBA A RELAÇÃO O NOME E DA CAIXA, (DO LABEL E DO IMPUT)
Métodos de envio de dados

<form action="cadastro.js" autocomplete="off" method="post">

 Por padrão está no get
 No post é um pouco mais seguro ( os dados não aparece na url quando enviamos)

Mas não basta, para melhor segurança é preciso usar o HTTPS

Quando usar cada um?

 Post: quando os dados for sensíveis(cartões de credito,senha, cpf..)

 Get: com dados sem importância: (peso, altura...)
 Formulário de Login e Senha

<form action="" method="post">

<p> /*coloquei p, mas pode ser uma div*/
<label for="iusu">Usuário</label>
<input type="text" id="iusu" required>
</p>
<p>
<label for="isenha">Senha:</label>
<input type="password" name="senha" id="isenha" required>
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</p>
</form>
 Criei um form, liguei o texto usuário ao seu input, com o label
 Required: é o para ser obrigatório o preenchimento
 fiz o inpute do tipo passord: é para por senhas.
 Fiz o inpute do tipo reset é para limpar o que escrevemos

<input type="text" id="iusu" required minlength="5" maxlength="15">

 O mim e max lenfth é para ter o mínimo e máximo de caractere que agente tem que
digitar
 Ai nesse caso só é permitido se for no mínimo 5 caracteres e no máximo 15
 Size = 10, o size é para o tamanho das letras que queremos mostrar no imput

<input type="text" id="iusu" required minlength="5" maxlength="15"

placeholder="nome do usuário">

 o placeholder é uma dica do que o usuário deve escrever

<label for="imedia">Média</label>
<input type="number" name="media" id="imedia" placeholder="sua média"
min="0" max="10" step="0.1" required> <!--o number é para permitir
digitar somente números-->
 Type number é para permitir somente números na caixa
  Min e max é para colocar o máximo e minino dos números que vai ser digitado
 Step é para poder colocar números com virgula

input type="month"
 Input para mês

input type="date
 Para data

input type="time"
 Para hora

<input type="email"
 Para email

<input type="tel"
 Para telefone

pattern="^\[0-9]{4}-[0-9]{4}$">
 o pattern é para colocarmos por exemplo aquele tracos no meio do numero ou cpf
começa pelo ^ e termina com o $
para maior entendimento acessar o ex025 form 004

<form action="#" method="get" autocomplete="on">

<fieldset>
<legend>Dados pessoais</legend>
<p>
<label for="nome">Nome:</label>
<input type="text" id="nome" required minlength="5"
max="30">
</p>

 O fieldset serve para separar uma parte do formulário de uma areá especifica como
Filmes Favoritos
 O legend é para por o nome dessa área: Filmes Favoritos

Chebox:

<input type="checkbox" id="jov"> <label for="jov">Os Jovens Titâs</label>

<br>

 Input: checkbox é aquela caixinha que marca com um check

 Radio

<legend>Sexo</legend>
<input type="radio" id="mas" name="sexo" checked> <label
for="mas">Masculino</label> <br>
<input type="radio" id="fem" name="sexo"> <label
for="fem">Feminino</label>

 Inpute: radio é aquel botão que marcamos

 Quando quisermos que quando clicamos em um, desmarcar o outro é só colocar o
dois com o mesmo name
 Checked: é para aparecer logo marcado

Color

<label for="cor">Cor:</label>
<input type="color" name="cor" id="cor">
 Inpute color é para o usuário colocar a cor que ele quer
 Se colocarmos o value, podemos colocar em hexa a cor que vai aparecer

Range

<label for="nivel">Nível de sastifação:</label>

<input type="range" id="nivel" min="1" max="5" value="1">
 Esse inpute serve para colocarmos tipo um nível
 Por padrão ele é como se fosse de 0 a 100
 O min é para ir do 1
 O max é para ir até o 5 só
 E o value é o valor que ele vai aparecer

File

<label for="file">Foto de Perfil:</label>

<input type="file" id="file">
 é aquele inpute que pede um arquivo, por exemplo uma foto de perfi ou aquele de
enviar documento da faculdade

 Atenção: quanto usar esse input deve se usar o method post

 Select
O selete é para agente ter as opções e escolher uma delas dentro em um formulário
Assim:

<form action="get">
<p>
<label for="cida">Cidades:</label>
<select name="cida" id="cida">
<option value="SAJ">Santo Antonio de Jesus</option>
<option value="CA" selected >Castro Alves</option>
<option value="CAL">Cruz das Almas</option>
</select>
</p>
 Os options é as opções que você vai escolher dentro do select
 Selected: para selecionar uma opção para aparecer selecionado
  Se colocarmos os as opções dentro do group, será formado um grupo dentro das
seleções
 No label colocamos o nome desse grupo.

DataList
Outro exemplo de lista que aparece as opções para o usuário clicar, a diferença desse é que esse
o usuário tem a opção de digitar um coisa nova, uma coisa que não esteja na lista

<p>
<label for="prof">Profissaõ:</label>
<input type="text" id="prof" list="list">
<datalist id="list">
<option value="ADM"> Administrador</option>
<option value="TCI">Tecnico em Informática</option>
<option value="PRO">Professor</option>
</datalist>
</p>
 Criamos o input text
 Criamos o datalist
 Colocamos um id na datalist
 Colocamos list no input e o id
 Depois colocamos as opções
 Não presica colocar o value

Textarea

<label for="msg">Deixe sua Dúvida:</label> <br> <br>

<textarea name="msg" id="msg" cols="30" rows="10"></textarea>
 É para deixar uma área pro usuário digitar, tipo enviar um recado, comentário,
suporte
 Output
O input é para pegar,entrar
o output é para mostrar, sair

<p>
<label for="n1">Numéro 1</label>
<input type="number" id="n1" min="0" max="50" required
oninput="soma.innerHTML = Number(n1.value) + Number(n2.value)">
</p>
<p>
<label for="n2">Numéro 2</label>
<input type="number" id="n2" min="0" max="50" required
oninput="soma.innerHTML = Number(n1.value) + Number(n2.value)">
</p> // vai ser mostrado na soma desse html a soma dos valores do
N1 e do n2.
<p>
<label for="soma">Soma:</label>
<output id="soma">0</output>
 O output serve só para mostrar na tela, ou seja o que vai ser somado não será
enviado pelo http
 Colocamos o um código js dentro da tag para somar os valores
 Deve colocar nos dois input que vai pegar o valor

<p> <!--usando o output para mostrar o valor do range-->

<label for="ida">Sua Idade:</label>
<input type="range" id="ida" required min="0" max="70"
oninput="out.innerHTML = Number(ida.value)">
<output id="out">0</output>
</p>
 Aqui usamos ele no range e colocamos de novo o oninput... que é um evento para
uma função