Curso completo de HTML - seu PRIMEIRO SITE DO ZERO para iniciar em PROGRAMAÇÃO!

Você já pensou em criar as Suas Próprias Páginas na web o HTML para quem não sabe ele é exatamente o esqueleto ele que marca o que quer cada elemento em um site então se você é um estudante de programação ou alguém que é muito curioso e quer aprender a fazer isso o HTML É sim o primeiro passo para você começar no universo da programação web fica até o final desse vídeo comigo porque você vai aprender tanto na teoria Quanto na prática a grande mais maoria de todos os conceitos que existem nessa linguagem de marcação tão

usada o HTML e lógico do zero para você que não sabe [Música] nada o que que é um site Afinal nada mais nada menos do que alguns arquivos que foram escritos em código em linguagens de programação que Estão guardados em algum lugar no mundo Esse lugar é chamado de servidor então quando a gente acessa um site aqui da nossa Casa por exemplo o Google a gente manda o nosso computador aqui o nosso navegador Safari Google Chrome Manda uma requisição lá pro servidor do Google e ele nos responde com todos os arquivos que vão compor a

página do Google que no caso alguns desenvolvedores devem ter feito e subido lá o arquivo naquele servidor quando chega aqui no nosso navegador na nossa casa ele monta como se fosse um quebra-cabeça toda a página Web seguindo ali as instruções que foram Escritas com com HTML com CSS com JavaScript E no caso para diferenciar um pouco o que que é cada coisa né o HTML ele é o esqueleto é a estrutura da página o CSS ele vai estilizar colocar cores colocar fundo deixar a nossa página mais bonita Então é como se fosse a pele e

o JavaScript é como se fosse um músculo ele que vai trazer a dinamicidade pras nossas páginas então ao in vez da gente escrever um parágrafo estático que vai sempre aparecer na Nossa página com JavaScript a gente consegue mudar isso mudar Talvez o parágrafo por dia colocar informações novas quando clicar em algum botão alguma coisa acontecer enfim isso é o básico assim do de como funciona a web que que é um site como entrar e onde que que é servidor que que é cliente se você quiser se aprofundar tem um vídeo meu aqui no canal falando

só sobre isso ele está bem atualizado então não deixa de conferir seja agora ou seja também Depois aí do vídeo visto então que um site é um conjunto aí de arquivos HTML CSS JavaScript vamos entender o que que esses arquivos T de dif do que que a gente tá acostumado a ver como por exemplo um arquivo ali de texto quando a gente vai escrever um trabalho pra faculdade que que tem de diferente num arquivo HTML para mostrar essa diferença para vocês eu vou literalmente mostrar como que é um arquivo de texto Então que a Gente

tá acostumado seja no Word Aqui eu entrei no Google Docs por exemplo para estruturar nosso texto a gente vai precisar de um título de parágrafos e cada um deles tem uma formatação um pouquinho diferente então por exemplo se eu quiser colocar um título eu posso vir aqui nos Styles e olha só tem title aí tem subtitle tem heading também que é uma outra forma da gente colocar um título um subtítulo heading 2 heading 3 e quando a gente seleciona alguma dessas Opções olha só a formatação do nosso texto muda ela tá aqui maiorzinha para mostrar

que é um título aqui um parágrafo ele vai começar a ficar um pouquinho menor e a gente vai escrevendo aí o nosso texto podemos também adicionar imagem mudar as cores grifar colocar em Itálico em e no final o que que a gente faz vai em file e vai lá e Salva esse nosso documento Então deixa eu ver aqui onde que é o save acho que a gente faz download né direto e Olha só ele me dá várias opções de extensões de arquivos Então como que a gente pode salvar tem esse aqui que é de texto

plain text né que é um texto normalzão que é pon TXT a extensão temos como salvar também em PDF ppdf Então se a gente salva o que que acontece ele já vem ó o nome do é que eu não tinha colocado o nome né mas vem o nome aqui do nosso documento unid of documents P TXT porque é uma extensão é um arquivo de texto no HTML pessoal por mais que Vocês achem assim que programação é um bicho de sete cabeças não é tão diferente ao invés da gente utilizar o Word o Google Docs para

escrever a gente vai utilizar um editor de código normalmente aí o vs code no caso do HTML mas existem outros também se você quiser dar uma olhada e pesquisar nesse vídeo a gente vai utilizar esse daí aí e já está aqui na descrição para quem quiser baixar e eu também tenho um vídeo aqui no canal explicando passo a passo caso Fique alguma dúvida aí ao longo do vídeo que vocês estão vendo aqui então para um documento de texto da faculdade a gente usa o Word para escrever HTML e fazer uma página Web a gente usa

o vs code se no Word a gente coloca aqui um heading para poder configurar a formatação de título heading 2 subtítulo no HTML pra gente também poder escrever o título da nossa página escrever parágrafos no nosso site que vocês sabem que também existe né bem parecido assim com uma com Um documento de texto se você pensar em um site de notícias por exemplo temos título temos parágrafo no HTML ao inv vez da gente selecionar aqui em alguma ferramenta que vai mostrar pra gente heading 2 heading 1 title a gente vai utilizar tags e ao salvar

o nosso documento HTML ao invés de utilizarmos as extensões P TXT pdoc ppdf a gente vai usar pon HTML para dizer que é um arquivo HTML Pois é pessoal essa daí vai ser a nossa base aí para começar a Escrever o nosso primeiro código então vamos preparar o nosso ambiente no tal do vs code e começar a codar de fato e enquanto eu vou abrindo aqui o vs code eu vou também dar umas instruções de como que vai funcionar este vídeo aqui porque Muito provavelmente ele vai estar bem longo que eu já tô imaginando tô

começando a gravar mas eu sei que vai ficar longo nesse vídeo do início ao fim a gente vai desenvolver um projeto então ao invés de eu ficar aqui falando Conceitos ai porque para título é isso pra imagem é aquilo e só mostrar cada uma das coisas eu montei um projeto inteiro de html pra gente fazer do início ao fim então presta atenção em tudo e você ainda vai conseguir construir e visualizar tudo que o HTML faz em uma página como eu já falei também em vídeo anteriormente para mim essa é a melhor forma de aprender

né é uma forma de você ter a educação baseada em projetos e não apenas de forma Teórica segunda coisa que vocês precisam saber tudo que eu vou falar é muito importante e nem tudo vai estar no projeto final porque pode ter coisa que eu vou falar que a gente poderia usar mas aí a gente vai preferir usar outra coisa então tem um caderno tem aí um bloco de anotação pode ser digital pode ser físico para você não perder nenhuma das informações aqui que vai ser muito importante terceira coisa vá na sua velocidade aqui no YouTube

você consegue Colocar mais rápido ou você consegue colocar mais lento também e sempre que você for aí escrever no seu computador o que eu estou falando aqui no vídeo pode pausar pode com calma porque o importante é você entender como tudo funciona para começar aí a sua carreira na área de tecnologia quarta coisa ao longo do vídeo eu vou fazer algumas observações sobre boas práticas que que significa isso podem ser coisas que não Obrigatoriamente você deve fazer mas que São coisas importantes para você se destacar com uma pessoa que vai entrar aí no mundo da

programação e número cinco no final eu vou deixar alguns desafios para vocês então além do projeto que a gente vai desenvolver e entender todos os conceitos de html Vocês também vão ter que fazer isso em casa é como se fosse uma lição de casa que vai te diferenciar de um programador mediocre para um programador que vai se destacar aí no universo da programação e Se você já tá nesse universo de programação e quer estudar ainda de forma mais aprofundada inclusive outras linguagens gente eu recomendo muito a plataforma da alura eu vou deixar aqui na descrição

também esse link que eu vou deixar ch ele tem 15% de desconto Então se você for fazer a matrícula ou coisa do tipo não esquece de usar esse link que tá aqui não é com cupom é pelo link mesmo e nessa plataforma Você assina uma vez e você tem acesso a todos os cursos Que tem lá dentro assim de todas as tecnologias que vocês conseguem imaginar é muito importante para quem tá aí começando os estudos então eu quando estava na faculdade a lura era assim desejo de consumo de todo mundo que estava estudando porque a

gente conseguia estudar a matéria da faculdade e ainda Por exemplo quando eu entrei no estágio eu tinha que estudar coisa além também tinha na lura enfim é uma plataforma que anda contigo assim do Lado para te ajudar em todos os momentos além deles terem um universo de ferramentas então tem a lri que é uma inteligência artificial que ajuda nos estudos tem o s Days of code também que são desafios de sete dias de cada linguagem não deixe de acessar só para vocês terem uma ideia do que que rola no universo aí da lura Então pega

o seu café deixa a sua mesa limpa e bora começar a estudar Já baixei então então aqui o nosso visual Studio code como eu Falei para vocês é o editor de código que a gente vai usar para escrever HTML se precisar de mais ajuda vai no vídeo de vs code que vocês vão entender perfeitamente e eu vou criar uma nova pasta para o nosso projeto isso é muito importante porque se a gente começar a criar arquivos aleatórios no nosso computador vai ficar tudo muito bagunçado então eu vou clicar aqui em Open vou colocar uma pasta

meu site e vou clicar em Abrir eu entrei na Pasta meu site aqui no computador lembrando eu tô usando o Mac Mas se você tiver usando Linux ou Windows também você pode seguir o mesmo passo a passo se tiver algum problema alguma algum detalhe que vocês podem perceber que pode estar estranho deixa aqui nos comentários mas eu não acredito que vai ter nenhuma diferença assim nessa nesse vídeo aqui especificamente Beleza quando eu cliquei abrir a pasta já está aparecendo aqui no canto esquerdo meu Site vou clicar nesse iconeinstagram esse nome porque esse é o nome

padrão que a gente utiliza quando a gente vai começar um novo projeto com HTML pessoal e lembrando ponto HTML é a extensão do nosso arquivo para facilitar o nosso desenvolvimento e deixar ele bonitinho também eu vou baixar duas extensões no visual Studio code aqui para baixar a extensão A gente vai nesse ícone de quadradinhos extensions eu vou primeiro baixar Live server que é essa primeira Opção aqui ó que tem o ícone roxinho clicar em install porque a gente com isso vai criar um servidor local simples e conseguir visualizar a nossa página enquanto a gente vai

escrevendo o código a gente já vai ver como isso funciona e vou baixar também a extensão balerini theme que é o tema coloridinho aqui pro vs code que eu sou apaixonada quem desenvolveu foi o alfa um dos administradores lá da comunidade do Discord que provavelmente vai estar na descrição e gente assim são exatamente as cores do canal o marronzinho o rosinha com azulzinho com verdinho com amarelinho que eu acho lindo então ó clico em instal e já mudou completamente a cor do nosso vs code O legal é que enquanto você vai escrevendo HTML por exemplo

ele vai destacando que isso se chama syntax Highlight isso tem para várias linguagens inclusive no ballerini theme que ele vai destacando O que que é Uma tag O que que é uma e no JavaScript por exemplo uma variável uma função que que é cada coisa para você não se perder na hora que você tá desenvolvendo Então bora começar a escrever o nosso código eu não sei se você sabe talvez você seja muito novo aí no universo da programação mas toda vez que a gente começa a aprender uma linguagem a gente precisa primeiro de tudo aprender

a como mostrar na tela de alguma forma a frase olá mundo ou no inglês hello world então eu Vou fazer exatamente isso vamos ver o que que acontece se eu simplesmente escrever esse texto aqui no nosso vs code sem nada sem tag essas coisas todas que eu já vou explicar o que que é eu vou salvar dar um control S Command S aqui no caso do Mac e ó pra gente utilizar o tal do Live server que eu falei que queria um servidor local pra gente visualizar nossa página a gente clica bem aqui embaixo eu

vou até dar um zoom para ficar um pouco mais claro para Vocês vai que tem alguém vendo aí pelo celular né pode estar menor o vídeo tem algo escrito aqui embaixo go Live Vá ao vivo Run server a gente clica aqui e ele já vai abrir pra gente ó ele falou que o servidor tá rodando na porta 5501 Beleza a gente pode até fechar aqui essas notificações e ele abre pra gente no navegador que a gente deixou padrão a nossa página e gente já apareceu aqui olá mundo então simplesmente se a gente cria um arquivo

pon HTML a gente escreve Um texto e a gente bota para rodar o servidor localzinho ali o Live server a gente já tem algo escrito a gente já tem um pequeno site né um site muito básico mas gente já tem aqui um site escrito Alam mundo mas porém todavia não é tão simples assim como Eu mencionei para vocês no HTML a gente precisa marcar o que que é cada coisa no nosso site Olha só isso aqui é uma imagem isso aqui é um título isso aqui é um parágrafo pra gente fazer isso a gente precisa

Utilizar as Tais das tags HTML então a gente não pode sair escrevendo holam mundo e deixar dessa forma a gente precisa colocar esse holam mundo dentro de uma tag que fale que isso aqui é um título por exemplo a gente pode utilizar tag de título e como que a gente faz isso eu vou pular linha só para mostrar a estrutura da tag para vocês a gente escreve H1 Ué por que que H1 heading lembra que lá no Word no Dogs a gente tinha visto que heading era um título Exato aqui no no HTML a gente

usa H1 para dizer que a gente tá colocando um título aí a gente faz o quê Já tá aparecendo para mim aqui algo escrito H1 emet abbreviation Se eu der enter ele automaticamente vai criar a tag para mim e o que que é a tag é esse sinal de menor que H1 maior que E aí ele tem de novo a mesma coisa só que dessa vez com uma barra e o que O que que a gente precisa fazer a gente precisa colocar o texto que vai ser o nosso título entre Essas duas estruturas então eu

copiei e Colei o ham mundo aqui dentro do nosso H1 abertura e o H1 fechamento então eu vou salvar e olha só ele mudou completamente se eu se não tiver mudado de uma forma rápida você pode dar aqui o F5 e ele já vai mudar Olha mudou até a formatação o olá mundo agora tá de fato como um título E aí isso que a gente precisa fazer pessoal a gente precisa sempre marcar cada elemento que a gente vai colocar na nossa página HTML é uma Linguagem de marcação é hypertext markup language HTML e uma coisa

legal também uma curiosidade é que a gente não tem apenas o H1 que é o título principal da página a gente também tem o H2 eu vou dar um enter porque a gente vai utilizando aí esse atalho Zinho chamado emet que eu acho que é bem legal e ele já vem com vest code aí eu vou colocar aqui ó tudo bem como um subtítulo aí a gente a gente tem também o H3 Tudo e você e a gente vai ter H4 também h5 ótimo e o h6 Então a gente tem do H1 até o h6

vamos entender Qual que é a diferença de cada um beleza vou salvar vou voltar lá pra nossa página já não carregou tem que dar aqui o refresh então o H1 ele é o título ele até deixa maior o nosso o nosso texto aqui na página O H2 já é tipo um subtítulo o H3 é um subtítulo do subtítulo o também o ótimo quanto maior for o número do H Menor vai sendo não apenas o tamanho do Texto mas também a prioridade A Hierarquia dele na nossa página inclusive já falando de boas práticas daqui a pouco

a gente vai ver isso no projeto mesmo a gente utiliza apenas um H1 por página para mostrar que realmente isso aqui que tá escrito dentro do H1 é um título é é de grande importância não tem mais nada esse é o texto aí mais importante que tem a partir daqui a gente já pode utilizar mais uma vez O H2 aí pode ter vários subtítulos para criar Tópicos na nossa página então às vezes você vai criar um site de notícias você pode colocar no H1 ali o nome da página de notícias E aí Cada notícia o

título de cada notícia pode ser com H2 beleza mas porém todavia precisamos começar a desenvolver uma página HTML de verdade também não é só sair escrever escrevendo título e subtítulo assim a gente precisa passar algumas outras informações para a nossa página Web aí com o nosso HTML pro navegador de quem for abrir a nossa Página entender algumas outras informações a gente tem que estruturar a nossa página HTML de uma forma profissional e não apenas desse jeito assim saindo escrevendo qualquer coisa então eu vou apagar aqui agora que a gente já entendeu a estrutura de de

uma tag HTML né que tem abertura fechamento e a do fechamento tem a barra a primeira coisa para fazer o nosso projeto de verdade que agora é uma página Web real é a gente adicionar o tal do Dog Type HTML vamos fazer isso aqui então eu então coloco aquele sinal de menor que e olha só a primeira coisa que ele aparece aqui já é a opção do Doc Type que eu tinha falado para vocês e é exatamente isso tem esse exclamação o DOC Type é em letra maiúscula E aí tem o espaço tem o HTML

gente isso daqui é a primeira coisa que tem que ter no nosso documento vai ficar lá em cima não tem jeito e para que que serve pr a gente escrever isso ele que vai dizer qual que é a versão do HTML que a gente tá utilizando no caso é o HTML5 que é o último que saiu isso aqui nem é chamado de tag na verdade É de fato uma declaração Então tem que aceitar tem que colocar a segunda coisa agora é uma tag que é a tal da tag raiz é o elemento raiz do nosso

projeto é a tag HTML E aí gente tudo o que a gente for colocar no nosso documento tem que tá entre essas duas tags Você pode até já até deixar um espação assim e aí no final do projeto a gente volta e deixa Mais organizadinho mas tudo que a gente vai escrever a partir de agora é dentro desse HTML Porque tudo que tiver aqui dentro vai ser um código HTML agora o que que a gente precisa fazer a gente precisa separar informações que não vão aparecer no nosso site que na verdade vão ser informações que

apenas o navegador precisa ler chamados metadados das informações que visualmente vão aparecer do corpo da nossa página então essa parte onde a gente coloca os tais Dos metadados que vão colocar informação de como a gente vai estilizar os nossos elementos informações de tipo qual que é o título de fato do nosso projeto Qual que é a descrição do nosso projeto sabe quando a gente pesquisa no Google e aparece lá o título da página com a descrição isso tudo não aparece de fato às vezes assim na página que a pessoa entra Mas isso tá lá na

hora que a gente busca por essa página no Google essas informações que não visualmente aparecem Na página em si mas que precisam estar de alguma forma no nosso documento elas são os metadados e a gente vai colocá-las dentro de uma tag chamada head é a cabeça do nosso documento já a parte visual o corpo da página com as imagens os textos os títulos a gente coloca dentro da tag Body Então a gente vai ter essas novas essas duas novas tags head head e Body então também já tô dando enter já tá autoc completando Deixando aqui

para pra gente poder preencher mais uma observação de boas práticas quando a gente está adicionando tags dentro uma das outras o que vai acontecer de montão que vão ser elementos filhos esse aqui por exemplo é o HTML ele abre e temos dois filhos aqui temos a tag Head e temos a tag Body a gente dá um Tab a gente deixa organizadinho porque Isso facilita na hora da gente desenvolver mais tarde de outra pessoa também vai desenvolver em Cima do nosso projeto isso é muito importante pessoal e se chama identação e se você visualizar aqui esse

Tab ele equivale a quatro espaços aqui no meu caso mas se você for nas configurações do vscode como eu mostrei naquele vídeo do vscode você também consegue alterar isso agora vendo essa estrutura se você já viu Muito provavelmente se você tá pesquisando agora um pouco mais sobre programação e tudo mais você já deve ter visto essa tatuagem aqui que a pessoa Coloca a tag de fechamento do r a de início do Body Então agora você já sabe da onde que vem isso daí é do atml isso mesmo bora então escrever os tais dos nossos metadados

aqui dentro da nossa tag R então eu já pulei uma linha aqui para ficar um pouco mais organizado Não tem problema Pode ser na mesma linha ou pode ser separado eu prefiro pular já que a gente vai escrever várias tags aí de metadados e para começar vamos escrever o título da nossa página a Gente vai usar a tal da tag title então eu escrevo title eu dou o enter ele já preencheu para mim aqui o título do nosso projeto vai ser o quiz para program isso mesmo pessoal a gente vai fazer um quiz um questionário

bem legal cheio de perguntas e que eu quero só ver se vocês vão saber responder também aí depois vocês vão poder testar os seus colegas e para salvar eu dou aqui o comand s e vamos ver como está o nosso site aqui no Safari eu vou dar um Refresh Ué cadê o título gente lembrem-se do que eu falei a parte visual do site a gente vai escrever dentro do b e como que a gente tinha escrito título anteriormente com total do H1 essa tag title vai dizer apenas como um dado para os navegadores de quem

for entrar na nossa página qual é o título do projeto e se vocês prestarem um pouquinho de atenção olha só tá aqui tá aqui na nossa página vou até dar um e não adianta dar um comando demais acho Que ele não dá zoom na na página de qualquer forma mas tá escrito na aba quis para programadores se vocês forem em qualquer outro site aqui no YouTube Provavelmente tem um título também esse título ao meta dado que está na tag head de quem desenvolveu as páginas aí do YouTube do do Google seja de qual for vamos

então adicionar aquela descrição que eu falei para vocês também é o metadado nesse caso a gente vai utilizar a tag meta vou dar um enter e olha só Ela não fechou dessa vez a tag meta ela é uma tag vazia ela não tem um conteúdo dentro que nem a gente fez aqui em title Ué Rafa Mas então como que a gente vai escrever a descrição a gente vai utilizar de atributos para poder fazer isso por quê Porque a tag meta ela é a tag de metadados em si ela não é exatamente é descrição ela vai

ser utilizada para vários metadados e a gente precisa explicar que neste caso a gente quer utilizar o metadado de Descrição e o que que são esses atributos que a gente põe dentro da nossa tag literalmente dentro da tag e isso vale não apenas para tags vazias que não fecham mas também aqui existem atributos pro title mas a gente vai ver aqui primeiro nesse meta a gente vai colocar esse um atributo chamado name isso daqui é do HTML com o name a gente vai colocar o igual e a gente vai escrever qual metadado que a gente

vai colocar aqui no caso é description em Inglês mesmo porque ele tem que entender que esse met dada de descrição e aonde a gente põe o conteúdo a gente vai colocar um outro atributo chamado content ele já até deixou aqui pronto pra gente e aqui dentro a gente vai colocar a descrição de fato do nosso site que vai ser um quiz interativo para testar seus conhecimentos salvei legal isso daí gente infelizmente a gente não vai visualizar quando a gente salvar e Entrar aqui no nosso site porque como eu falei é um metadado isso vai servir

para quando alguém entrar na nossa página o navegador da pessoa entender que o título é esse o descrição é esse quando pesquisarem no Google nosso site além dessa desse metadado de descrição temos também o metadado de keywords né então tipo aquelas tags né as palavras chave para poder achar temos também metadado de autor se vocês verem aqui a gente tem esse name author e a gente coloca no Content o meu nome por exemplo que eu sou o autor da página aqui pra tal da keywords a gente coloca keywords E aí a gente coloca Quais são

as palavras chave aqui no content também mas no caso eu vou deixar apenas a description pra gente deixar aqui Prontinho no nosso projeto dentro do R E no fim do vídeo eu vou até mostrar para vocês gente o negócio secreto Onde vocês vão ver outros metadados bem legais também para utilizar mas eu vou deixar mais pro Final para não ficar muita informação aqui porque é um pouco avançado sabe quando a gente terminar o vídeo terminar o projeto Vocês já vão estar muito mais confortáveis aí com essa linguagem e vai ser mais fácil de entender bora

então começar a parte visual do nosso site dentro do Body a forma mais comum da gente dividir um site se você for entrar assim na grande maioria deles hoje em dia é cabeçalho conteúdo principal E também o rodapé existem as três tags Para cada uma dessas coisas então a gente consegue escrever essas três tags aqui dentro do Body E aí dentro de cada uma delas a gente vai fazendo visualmente o conteúdo do nosso site Então a gente vai adicionar uma tag chamada header diferente de head pessoal header é cabeçalho em inglês é diferente do head

O head era lá pros metadados a gente vai colocar aqui a tag Main que é pro conteúdo principal e a gente vai colocar aqui a tag footer que é para o Nosso roda pé então a tag Pie vai ser o bor que vai falar olha tudo que tiver aqui dentro vai ser a parte visual do nosso no site o corpo da nosssa página e aí a gente vai dividir em três espaços Vamos então começar a desenvolver o nosso cabeçalho do nosso Quiz para programadores se a gente salvar e olhar aqui a nossa página ainda não

apareceu nada e não é só porque a gente não escreveu texto aqui é porque de fato essas tags header Main e footer elas são Tags semânticas elas não são tags de elementos específicos tipo título parágrafo elas realmente servem pra gente dividir o conteúdo da nossa página Então tá tudo certo dentro do header agora que a gente vai começar a escrever cada um dos elementos cada um com a sua própria tag esse negócio de utilizar tags semânticas ao invés da gente sair escrevendo todos os elementos e tal é muito importante primeiro para aqueles mecanismos de busca

do Google mesmo eles Ranquei melhor páginas que usam essas tags semânticas de forma correta e também para acessibilidade Tem muita gente que utiliza leitores de tela que fazem a a leitura mesmo em voz de todo o conteúdo da página e separando a nossa página em cabeçalho conteúdo principal roda pé Esse leitor de tela vai conseguir entender o que que é cada coisa de uma forma bem melhor assim como usar apenas um H1 na nossa página que é a primeira coisa que a gente vai fazer Vamos colocar o título da nossa página dentro aqui do nosso

cabeçalho Então vou colocar H1 agora o título visual mesmo e vou colocar Kiss interativo para programadores se eu salvar e for no nosso navegador era só já aparece Quiz interativo para programadores Então vamos começar a escrever todas as perguntas aí a introdução do nosso Quiz bonitinho acho que a gente pode até já escrever uma pequena descrição do que Que é esse Quiz para escrever uma descrição Zinha assim embaixo do título no nosso cabeçalho eu vou colocar um parágrafo e para escrever o parágrafo a gente coloca uma tag P então tudo que tiver dentro dessa tag

vai ser o parágrafo teste seus conhecimentos em programação e veja qual pontuação você consegue fazer ponto de exclamação a gente vai escrevendo e o nosso código ele vai indo muito pra direita a gente tem que sempre voltar Existe uma coisa que você pode fazer para poder quebrar vai ficar um pouquinho talvez mais poluído mas se você es colocar Alt z ou option Z ele vai quebrar e aí a gente vai ter todo esse conteúdo aqui dentro da própria página se você achar isso melhor legal conseguimos então desenvolver o nosso cabeçalho a gente colocou o ele

colocou um parágrafo Zinho também vamos agora colocar o nosso conteúdo principal eu vou salvar e só mostrar para vocês Como que ficou Olha só Quiz interativo para programadores seus conhecimentos em programação n nosso parágrafo super legal agora dentro do nosso conteúdo principal eu vou abrir aqui de novo a tag M pra gente escrever as coisas por dentro a gente vai adicionar mais tags semânticas para poder separar mais o conteúdo por quê Porque no conteúdo principal Gente esse Quiz que a gente vai fazer vai ter várias perguntas vai ter lá depois no final uma tabela para

Você ver os seus resultados ados Quais são as respostas corretas também para cada pergunta se a gente deixar isso também tudo jogado dentro só de uma tag M vai ficar muito poluído então o que que a gente vai fazer a gente vai utilizar uma tag chamada section essa tag section ela também é semântica para dividir o nosso conteúdo em sessões Então a gente vai utilizar uma section pra introdução uma section para pergunta um uma section para pergunta dois e Assim vai então eu vou escrever aqui essa section né como vocês podem perceber o HTML ele

usa o inglês pra gente poder escrever os nossos os códigos então sessão section E aí eu vou abrir ela aqui dentro também Essa section vai ser da introdução e o que que a gente pode colocar dentro dela primeiro de tudo a gente quer colocar um titulo Zinho para essa sessão falando que ali é introdução mesmo então eu vou colocar um H2 Lembrando que a gente só Pode um H1 por página então aqui a gente vai usar de subtítulo para cada section do conteúdo principal a vez de colocar introdução vou colocar sobre esse Quiz aí a

gente vai adicionar alguns parágrafos para explicar como que esse Quiz vai funcionar aqui eu já já escrevi três paragrafo inhos pessoal porque como eles são um pouquinho compridinhos é eu já deixei eles prontos e eu vou colar direto no nosso código já vou explicar para vocês o que que está acontecendo Olha só aqui temos um parágrafo este Quiz foi desenvolvido para testar seus conhecimentos em programação como linguagem de programação conceitos básicos e mais e olha só o segundo parágrafo ele ficou nada e dentado ele ficou lá no canto esquerdo eu posso dar um Tab dois

tabs três Tabs quatro tabs E aí ele vai ficar na alinhado onde ele deveria dentro da section e irmão do H2 mesma coisa com o terceiro parágrafo um copio tudo dá um Tab dois tabs três tabs Quatro tabs para ficar alinhadinho e São só parágrafos explicando assim esse Quiz foi desenvolvido para testar seus conhecimentos como linguagem né você encontrará diferentes tipos de perguntas você pode escrever o que você achar mais legal ou pode copiar aqui também agora a gente vai se aprofundar um pouquinho mais vamos modificar esses três parágrafos para conhecer algumas tags um pouco

diferentes que vão destacar algumas partes dos textos isso é muito Importante pessoal a gente vai ver boas práticas aqui também a primeira delas é a tag strong ela serve para destacar um texto de alguma forma Então se a gente coloca e parte ali do parágrafo por exemplo eu quero destacar este Quiz para mostrar Olha esse Quiz aqui eu quero destacar só essas duas palavrinhas dentro do parágrafo eu coloco então ele dentro ó vou escrever aqui a tag Strong que é forte mesmo e ele já fechou aqui né eu vou tirar o fechamento Vou colocar Aqui

no final do Este quiz e ele vai entender que isso aqui gente é para destacar eu vou salvar e já mostrar como tá lá no nosso navegador olha só aqui temos O H2 do sobre esse Quiz né aqui a gente estava no header aqui a gente tem o Main aí a gente colocou uma section que tem isso tudo dentro aqui temos O H2 e aqui temos três parágrafos você percebe que eles pularam linha automaticamente né porque a gente colocou três parágrafos diferentes e Este Quiz ele está com um pouquinho de vou até dar um um

zoomzin assim para ficar um pouco mais claro ele já está em porque a gente colocou dentro da tag strong tem problema colocar dentro do parágrafo a tag strong não a gente usa desta forma Além disso também a gente tem a tag em e essa tag em eu vou colocar aqui por exemplo esse linguagem de programação ela também serve para destacar o texto mas é um destaque menos hierárquico do que a tag Strong é como se o strong fosse isso aqui é muito importante e aqui é isso aqui é importante é um destaque no texto um

pouco secundário se eu salvar e a gente for no nosso navegador a gente vai ver que u é ao invés deixar em que nem o strong fez ele deixou em Itálico linguagem de programação o m então ele serve para deixar em Itálico Então pessoal na verdade quando a gente tá falando sobre visual sobre Itálico colorido vermelho branco a gente Faz essa estilização na linguagem SSS que é a linguagem de estilização eu já dei esse resuminho aí para vocês no início do vídeo o strong e o em eles são tags para destacar que isso é importante

ponto final lembrando de acessibilidade de seo disso tudo mas tem um detalhe o HTML tem duas tags para isso existe a tag B que é a tag que deixa eu vou até trocar aqui o strong pelo tal do B eu vou salvar e mostrar para vocês olha só ela serve para deixar ch em e a gente tem também a tag I que deixa o texto em Itálico Então ela basicamente parece que faz a mesma coisa que o strong né O B parece que faz a mesma coisa que o strong e o i parece que faz

a mesma coisa que o em mas não isso aí é puramente visual então assim isso é bem menos utilizado mas bem menos mesmo utilizado no no dia a dia a gente usa muito mais o strong e o em mas não por causa da parte visual Apenas quando qu a gente quer estilizar e destacar Mas Também quando a gente quer dar essa ênfase importante beleza pessoal vamos deixar esse strong e esse M que eu achei muito legal da gente aprender outra tag importante quando a gente tá falando aí de parágrafos e tudo mais é a tag

BR ela serve pra gente Pular linha ou quebrar linha Break BR eu posso colocá-la aqui por exemplo ó no segundo parágrafo temos você encontrará ponto final desafi com ess Kiss E se eu quiser por exemplo que nesse parágrafo o desafi com esse Fique na linha seguinte a gente apenas adiciona essa tag eu vou dar um espaço do ponto senão ele vai criar outra coisa coloco BR e olha só o emet já colocou para mim e se eu salvar ele pulou aqui a linha então a gente ó você desafi com esse Quiz também dentro de um

parágrafo só a gente conseguiu Pular linha e meio que criar dois parágrafos e a última tag que eu quero mostrar para vocês aqui dentro de parágrafo né que a gente tá vendo na introdução é a abbr de Abbreviation quando a gente gente utiliza alguma palavra que é uma abreviação de outra a gente pode usar essa tag para quando a gente passar o mouse por cima de uma abreviação por exemplo a gente tem aqui o HTML o CSS se a gente passa o mouse por cima ela pode mostrar pra gente é uma abreviação do quê o

HTML a gente passa por cima e aparece é hypertext markup language CSS é cascading Style sheets Então vamos fazer isso vamos utilizar essa tag para Conhecer para isso então eu venho aqui lá no início do do HTML eu coloco abbr dou enter e olha só ele já abriu e fechou para mim o fechamento eu vou colocar depois do HTML né porque essa é a palavra que é abreviação e aqui ele já colocou para mim o atributo title então eu vou escrever dentro desse atributo title né entre aspas porque quando a gente tá colocando textos nomes

a gente sempre coloca entre aspas que nem a gente fez ali no Head ó no description n A gente vai colocar o hypertext pera aí hypertext markup langage eu nem sei se esse T ele é maiúsculo ou não eu vou deixar ele com maiúsculo só para mostrar o HTML e eu vou fazer a mesma coisa ali com o CSS abbr vou dar o enter vou colocar o fechamento da tag depois do CSS e vou colocar aqui o cascading Style sheets que é em português é folhas de estilo em Cascatas E esse HTML como eu falei

o CSS como eu falei para vocês ele serve para estilizar Vamos então ver se funcionou passei o mouse por cima do HTML hypertext Marc Olha que legal gente isso aqui é muito muito específico assim é muito legal do HTML e raramente eu vejo as pessoas conhecendo essa tag e sabendo como utilizá-la então é muito legal que vocês já estão aprendendo bora então começar aí as perguntas do nosso Quiz a gente já tem a introdução já tem tudo Bonitinho uma coisa que eu posso fazer aqui que a gente pode fazer né na verdade quando a gente

tá desenvolvendo no visual Studio code é quando a gente Pass Mouse por cima aqui do lado esquerdo das tags existe uma setinha para baixo a gente consegue clicar nelas e ele minimiza não é que ele apaga tudo que tá dentro ele minimiza para poder diminuir um pouco a visualização dos códigos então por exemplo aqui no r a gente já desenvolveu o que a gente Queria a gente pode Minimizar essa tag Head e deixar guardadinha aqui no Body no caso não porque a gente está desenvolvendo todo o body mas a gente já fez tudo que a

gente precisava aqui no cabeçalho vamos minimizar o cabeçalho o m a gente ainda vai escrever né a gente tá fazendo ali tudo que é do conteúdo principal mas a section de introdução a gente já escreveu então vamos minimizá-la pra gente agora poder criar uma nova section que agora vai ser a Primeira pergunta um detalhe também muito legal que a gente pode usar aqui são os comentários como a gente vai criar uma série de sections Se não me engano são umas oito perguntinhas diferentes aqui no nosso Quiz porque a gente vai ver muitas tags diferentes a

gente pode adicionar esses tags Dos comentários para dizer o que que cada coisa faz o que que cada sex faz esses comentários são trechos de código que não são renderizados pelo navegador o Navegador da pessoa quando ele vai entrar no nosso site ele nem lê o que que tá dentro do comentário a gente pode escrever o que a gente quiser é literalmente comentário e para utilizá-lo ó eu vou colocar um comentário aqui em cima do section para escrever que esse essa sessão é para a introdução Então olha só eu vou colocar o mai o menor

que a gente coloca o ponto exclamação e dois tracinhos e olha só ele já criou um comentário aqui para mim Eu coloco dentro disso aqui desses dois tracinhos aqui primeiro tem exclamação no segundo não tem mas tudo que eu escrevi aqui dentro gente não vai ser lido Então vou colocar introdução Vou salvar e olha só não mudou nada não aparece nada de introdução aqui agora então eu vou pular a linha do fechamento da section de introdução e vou escrever um comentário de ã pergunta um e nessa pergunta a gente Vai conhecer o formato de múltipla

escolha Então vou colocar aqui já pergunta um múltipla escolha então vamos escrever aí dentro dessa section a nossa pergunta número um pra pergunta em si eu posso utilizar um H2 que vai ser um subtítulo mas ele vai ficar lá em destaque grandão e a pergunta um gente é muito simples é só para vocês irem aquecendo pergunta um dois pontos qual linguagem é usada para estruturar páginas Web aí eu deixo isso tudo dentro do H2 se você não sabe ainda essa resposta eu recomendo que você vote ao minuto zero desse vídeo pessoal porque tá bem simples

Tá bem na cara tá bem fácil agora pra resposta a gente vai escolher qual é a forma de entrada do usuário nesse caso o formato que a gente está escolhendo né de entrada do usuário são aquelas que tem a bolinha E aí opção bolinha opção bolinha opção E aí você escolhe uma das bolinhas pra resposta a Gente começa então escrevendo esse formato aí de múltipla escolha para colocar quatro opções aí de linguagem pra pessoa escolher com a tag fora de formulário eu vou tirar esse atributo Action porque a gente não vai precisar utilizar aqui nesse

vídeo e eu vou abrir essa tag forme pra gente poder colocar aí o nosso a nossa múltipla escolha sempre que a gente for colocar algum input em que o usuário ele entra com alguma informação seja de texto múltipla Escolha qual for a gente usa essa tag form porque que nem tinha ali o Action depois quando você vai aprender JavaScript e tal você vai lidar com o envio dessas informações para algum lugar então por isso que a gente sempre coloca dentro dessa tag form pro input né o a entrada do usuário poder est organizado de uma

forma correta e eu acabei de dar um spoiler né o input a entrada do usuário é a tag input mesmo e ele já colocou aqui pra gente o atributo Type Então a gente tem o input do tipo texto mas não é esse que a gente vai utilizar pessoal a gente quer múltipla escolha em inglês eles chamam de radio Button é botão Radio e pra gente dizer aqui no nosso na nossa tag input que a gente quer esse tipo a gente só escreve Radio Beleza eu vou salvar vou entrar aqui olha só ele criou pra gente

já uma bolinha então eu eu selecionei agora não tá não dá nem para deselecionar porque a gente não tem outras opções para ele Tipo deixar em branco de novo e a gente precisa escrever também qual que é a sua opção né ter uma legendinha aqui para poder entender qual opção que a gente tá selecionando a gente vai ter que escrever alguns outros atributos aqui pro nosso input quais são eles primeiro deles é o valor então quando a gente for enviar essa informação lá pro nosso JavaScript e tal a gente tem que entender qual valor tá

sendo enviado quando a pessoa clica ali e nesse caso Eu vou colocar aqui a a o atributo vue que é o do valor eu vou colocar a linguagem Python então eu escrevi ela aqui bonitinha se a pessoa clica na bolinha e envia esse formulário o valor enviado vai ser Python se ela clica nessa bolinha temos também o ID que também ele vai servir para interagir lá com o JavaScript Mas é para interagir com a opção em si e aí o ID eu quero colocar pergunta um opção a porque a gente vai ver vários ids aí

ao longo das Oito perguntas que a gente vai adicionar E aí o ID de cada uma delas vai ficar relacionado com o número da pergunta e a opção Nesse caso a pergunta um opção a E também o name que vai linkar Qual que é a pergunta que a gente tá fazendo o name vai ser pergunta um Então tudo tem que est relacionado na hora que a gente for enviar as informações entendeu esses atributos infelizmente a gente tem que colocar e entender isso daí posteriormente mais tarde salvei ué mas Mesmo então colocando todos esses atributos eu

escrevi até o valor aqui Python não foi o escrito realmente pessoal o escrito a gente precisa escrever em uma tag Label de legenda mesmo e aí ela vai ser uma legenda para quê olha só a gente já vai utilizar aqui nesse caso o ID do nosso input então a gente coloca aqui pergunta um opção a E aí ele já vai colocar tudo que tiver escrito de conteúdo dentro do Label para esse botãozinho aqui então eu vou Colocar Python Vou salvar vamos ver olha só já colocou o Label Python linkado com o nosso Radio Button da

pergunta um opção a vamos fazer isso então para mais três linguagens eu vou correr o vídeo aqui mais rápido mas é literalmente copia e cola e eu já vou mostrar para vocês o que que eu vou alterar ó copiei e colei agora o que que eu tenho que mudar o valor e o id o name vai ser a mesma pergunta é a pergunta um pros quatro só que o valor de cada uma Delas vai depender da opção aqui eu vou colocar o HTML o valor HTML e aqui a opção vai ser a perguntar uma opção

b e o Label vai ser a pergunta um opção b e a gente vai escrever HTML na tela o mesmo aqui para JavaScript vou colocar perguntar uma opção C E aqui vai ser pro c o Label e a gente vai escrever JavaScript e aqui no final eu vou colocar linguagem Ruby E aí a gente coloca perguntar uma opção d o Label vai ser para perguntar uma opção de escrito rubby salvei e olha só que legal pessoal já temos Então as quatro opções de radio Button e agora como elas todas estão com o name pergunta um

se a gente seleciona um delas a gente pode selecionar a outra e automaticamente vai limpar a anterior porque eles todos têm uma name um e eles sabem que só pode escolher uma delas se a gente quiser também aqui tá tudo na mesma linha Mas a gente pode colocar Olha só se a gente Coloca um BR para quebrar linha salve a gente volta aqui ó olha só já quebramos linha do Python pro HTML a gente pode colocar um BR então no final do Label de cada uma das quatro opções aqui no javascrip também a gente pode

colocar no rubby para pular linha pra próxima pergunta de qualquer forma deixar padronizado e olha só que legal Beleza bora pra pergunta dois aprender mais tags diferentes e dessa vez ó primeiro eu vou na verdade Minimizar aqui essa Section né A gente já desenvolveu Vamos colocar o comentário de que é a pergunta dois e esse vai ser o formato de texto vou criar a nossa section Então dentro dela eu vou colocar mais um input e desse dessa vez a gente vai deixar o Type text só que a gente tá com input aqui ó o Type

Text e eu não escrevi a pergunta a pergunta ela vai ser dentro de um H2 a gente tem que escrever ela em cima do input que vai ser pergunta dois e essa já vai ser um pouquinho mais Difícil essa daqui vocês tem que ter assistido aquele vídeo de O que é internet e web para poder responder na URL https 2 bar bar vou colocar o Google com colocar o www aqui no começo também p gooogle.com o trecho entre aspas google.com é o eu vou deixar um espacinho a pessoa tem que responder o que que é

esse trecho Olha só ur google. comom é o E aí a gente tem aqui o nosso input pra pessoa escrever é o site é o URL o r e aí eu quero só ver Se vocês sabem qual que é a resposta antes da gente chegar no final desse vídeo com escrevendo as respostas aqui no nosso site mas assim a gente já tinha colocado o input aqui e eu esqueci gente eu falo falo falo mas eu mesmo esqueci porque eu já tava tão feliz de mostrar que o input era o text a gente precisa colocar esse

input sempre dentro de um form e eu falei para vocês que a gente não vai usar o Action aqui nesse vídeo eu vou até tirar e vou colocar o input Dentro desse for aí a gente precisa identar tudo bonitinho de novo e adicionar aqueles outros atributos de ID e tudo mais então eu vou colocar o id que vai ser a pergunta dois nesse caso a gente tinha anteriormente colocado os ids como pergunta 1 a né pergunta 1 B só que como não tem opção a b c a gente deixa só o ID como P2 porque

é só esse input que tem o name vai ser pergunta dois e o velho pessoal o velho aqui a gente não Adiciona por qual que é o valor que vai ser enviado lá pro nosso banco de dados aqui a gente tinha o valor pyon HTML a gente precisa pegar o valor que o usuário entrar ele que vai dizer qual que é o valor aí do que que ele quer escrever ver nesse caso porque é um texto Então a gente não adiciona o velho mas tem uma coisinha legal que a gente pode fazer aqui tá um

espaço meio em branco até nem dá para ver direito né que dá para escrever a gente pode Colocar aquele textinho um pouquinho clarinho mostrando digite aqui n a gente utiliza o qu para fazer isso a gente não coloca dentro do input a gente não usa Label Nesse caso a gente utiliza um atributo chamado Place holder que é como se fosse tipo uma escritinha padrão enquanto a pessoa não escreveu nada e aí eu coloco de de Digite sua resposta três pontinhos salvar e olha só que legal Digite a sua resposta já tá aparecendo ali legal pessoal

já vimos agora também Como colocar um input de texto vou Minimizar aqui a nossa section e vamos para a pergunta número três pergunta três e dessa vez a gente vai entender como funciona o input de senha que é bem legal também Principalmente quando você tá querendo começar a escrever uma página de login uma página de cadastro em que a pessoa precisa de fato escrever aquela senha e ficar aquelas bolinhas ninguém conseguir ver quem tá em volta então vamos aprender a fazer isso Novamente eu coloco aqui uma section dentro dela eu vou colocar o H2 que

vai ser a nossa pergunta aqui é uma pergunta um pouco lúdica só pra gente aprender esse input mesmo pergunta três Escreva um exemplo de senha forte nesse caso né mais para testar para ver se você também concorda que uma senha forte Ela tem que ter número tem que ter maiúscula minúscula tem que ter caracter especial tem que est separado né não tem algumas regrinhas aí que seriam interessantes da Pessoa quando tá criando uma senha colocar E aí embaixo a gente vai criar o nosso form vai tirar o Action vai pular linha e vai criar o

nosso input neste caso o Type ao invés de ser text ao invés de ser Radio vai ser password sempre em inglês a gente vai colocar o id dele que vai ser a p3 também é a única opção o name também vai ser pergunta TR e assim eu vou salvar assim como no texto a gente pode colocar um Place holder também Olha que legal Aqui no Mac o Safari né ele já tem até aquele negócio de salvar senha automaticamente e tudo mais a gente pode colocar aqui o Place holder ã digite uma senha três pontinhos aí

ele também fica aqui lembrando que o velho nesse caso também quem vai colocar é o usuário bora pra pergunta número quatro colocar aqui também um comentário minimizei a pergunta três pergunta 4at aqui a gente vai aprender a utilizar entrada de data que também é bem legal gente difícil de Ver as pessoas também saberem que tem isso tudo de coisa para fazer no HTML a gente vai criar a nossa section vai criar o nosso H2 e escrever a nossa pergunta quatro pergunta Quatro em que ano o HTML lançou sua primeira versão essa daqui eu também quero

ver quem sabe porque eu acho que eu não mencionei no vídeo Vamos colocar o nosso form vamos tirar o nosso Action aqui dentro do form a gente Coloca o nosso input E qual vai ser o type Date adicionamos o nosso id pra pergunta quatro o name pergunta quro também e a gente pode salvar ir lá no nosso navegador e olha só que legal gente a gente seleciona a data que a gente quiser eu acho que não tá pegando aqui para vocês conseguirem ver na tela mas testem aí ó ele abre um um calendario Zinho Deixa

eu ver se eu consigo mostrar vou até diminuir um pouquinho só o navegador só para vocês Conseguirem visualizar o que eu estou querendo dizer olha só aqui embaixo ó ele abre um calendario Zinho para você poder selecionar muito legal isso também é é interessante quando você tá fazendo login de algum usuário você vai criar também e qual é a data de nascimento da pessoa você pode colocar esse tipo de input e lógico tudo aqui estilizar com o CSS posteriormente bora então pra pergunta cinco vou Minimizar aqui o nosso section vou colocar o comentário Da pergunta

cinco e a gente vai ver o formato de seleção múltipla V p a linha section vou criar o nosso H2 para a nossa pergunta e olha só pergunta cinco quais dessas tecnologias são consideradas essa é uma pegadinha linguagens de programação aqui é um pouquinho diferente pessoal vamos também utilizar a tag form para poder colocar as nossas entradas do usuário colocamos o nosso input e o Type ele vai Ser checkbox e ele vai ser bem semelhante a radi mas o A grande diferença do checkbox é que você consegue selecionar mais de uma opção e não apenas

uma ali com a bolinha a gente vai ter também o ID para cada uma delas Então a gente tem pergunta cinco opção a a gente tem o name que vai ser pergunta c e a gente vai colocar o velho em cada uma das opções porque não vai ser o usuário que vai escever qualquer velho que ele quer A gente consegue já pré-definir então eu vou colocar aqui JavaScript por exemplo como primeira opção e embaixo a gente vai ter que colocar o Label tambémm semelhante ao que a gente já tinha feito aqui vai ser o Label

para pergunta cinco opção a e eu vou colocar JavaScript para ficar escrito na tela Então olha só só pra gente já ver como que vai ficando só que é aquele Quadradinho que a gente consegue selecionar e dis selecionar mais de um então eu vou fazer isso para Mais três aí linguagens vou deixar o vídeo correndo rápido e vocês podem fazer aí em casa também e Pronto terminei aqui vou salvar vou olhar aqui o nosso navegador Olha que legal a gente consegue selecionar mais uma opção a gente já vai ver quais são as respostas dessas perguntas

todas bora então ver mais uma forma de interagir com o usuário vamos para a pergunta número seis e essa eu acho muito legal isso Também você pode fazer muito no seu site que é para upload de arquivo então quando a gente vai ali por exemplo no Drive a gente faz upload de arquivo para poder salvar na nuvem do Google seja onde for a gente só pega e arrasta ou a gente clica em fazer upload É exatamente esse tipo de input que a gente vai fazer aqui então eu vou colocar o nosso section vou colocar o

H2 e a pergunta vai ser Faça o upload de um arquivo contendo código HTML então o mais importante aqui né nesse tipo de Pergunta assim quando você for ver se a pessoa tá fazendo certo é que esse arquivo tem a extensão pon HTML se você quiser ir ainda mais a fundo é que esse arquivo ele tenha lá o doct Type lá no começo tem a estrutura HTML com o headb e tudo mais e como que a gente faz esse e uploader de arquivo né a gente coloca também um Forme a gente pula a linha aqui

e vai pôr um input só que o input é do tipo file ao invés de text a gente também coloca o ID que vai ser da pergunta seis também coloca um name que vai ser pergunta seis e aí o velho também vai ser o que o usuário colocar ali de arquivo então eu vou salvar e gente olha que legal aí eu clico aqui em escolher arquivo e olha só ele já entra aí no meu Explorer de passas e eu posso selecionar o arquivo que eu quiser ó eu vou pegar Esse index HTML e mandar Beleza

entendeu Você pode brincar assim com os seus colegas com a pessoa com quem você for mostrar essa página e ele já coloca aqui qual que era o arquivo que você envi viou bora pra pergunta sete a gente tá tá quase acabando o nosso Quiz vou minimizar a section da pergunta seis colocar aqui né de eu n Nem coloquei e upload de arquivo pergunta set vai ser menu suspenso é aquele drop Down isso é muito Usado por exemplo quando você tá no e-commerce Aí você coloca aquele menuzinho lateral você clica eí tem as opções de roupa

de boné E aí você vai colocando cada vez mais opções Isso é tipo um drop Down né que a gente chama o menu hambúrguer e a gente vai aprender a fazer isso aqui no HTML então a gente cria Nossa section coloca o noss H2 pergunta 7 selecione o atributo do input que define o seu tipo essa aqui também pessoal se vocês não Souberem a resposta Vou colocar aqui o form vou tirar o Action e dessa vez a gente não vai usar a tag input a gente vai usar tag select E aí essa tag ela já

vai preencher aqui também com os atributos name ID a gente vai fazer exatamente a mesma coisa que vai ser pergunta set o ID vai ser P7 E aí gente funciona de uma forma um pouco diferente essa tag select do input a gente vai ter uma tag select para várias tags dentro dela chamada options a select é o menu Suspenso mesmo e aí as tags dentro dela option vão ser todas as nossas opções e aí dentro das options que a gente vai colocar os valores mesmo então eu vou colocar aqui primeiro a nossa tag option e

o valor vai ser Vamos colocar o id e aí a gente escreve ID né como opção Olha só eu já vou vir aqui olha que legal o drop Down já tá sendo criado aqui a gente criou o drop Down então com select a opção ID já tá aqui vamos colocar outras options Então vou colocar Option ã o valor pode ser o Type né esse é um outro atributo do input que a gente coloca aqui de opção da nossa pergunta ó o Type a gente pode colocar também outra option ã o atributo Place holder também a

gente pode escrever aqui Place holder que é o que vai aparecer de fato na tela e assim por diante se vocês quiserem adicionar outras opções também pode mas olha que legal que fica né pessoal a gente vai selecionando ele vai mudando e com o cheque Zinho já oitava e última Pergunta essa daqui gente essencial vocês aprenderem a mexer tá porque é como a gente adiciona imagens dentro do nosso site a gente vai a partir de uma imagem responder a pergunta então eu vou colocar aqui que que a pergunta o vai ser de imagem né com

comentário vamos adicionar a nossa section vou colocar o H2 que vai ser a pergunta pergunta oito qual linguagem de programação é representada pelo logotipo abaixo aí aqui que a gente vai adicionar uma Imagem pessoal eu acho isso tão legal a tag para adicionar imagem é a tag IMG ela também é vazia ela não abre e fecha E aí quais são os atributos que vieram aqui o src e o alt o src é o CCE Então qual que é o endereço da imagem que a gente vai adicionar Existem algumas formas da gente na verdade adicionar a

imagem esse src a gente pode colocar por exemplo uma url que é uma url já de uma imagem eu vou até dar um exemplo para vocês ó o github eu acho isso tão legal Que eles fazem não sei se você conhece github Se não conhecer tudo bem quando você entra no meu perfil assim do github mesmo você pode colocar apenas ponto png no final e ele dá pra gente a URL da imagem se a gente coloca isso daqui por exemplo lá no nosso vs code a gente salva a gente consegue visualizar a imagem direto é

muito legal esse é essa é uma forma né ou uma outra forma é a gente de fato colocar a imagem que a gente quiser aqui dentro da nossa pasta E é o que a gente vai fazer eu vou mostrar para vocês eu já fiz aqui o download da imagem que eu queria e eu vou arrastar direto pro vs code aqui de dentro do meu Explorer e olha só que legal ele já até abriu uma uma aba aqui né do arquivo da imagem eu posso fechar voltar aqui pro meu index HTML e aí como que eu

consigo falar que esse é o arquivo que eu quero colocar eu coloco aqui dentro do src o perg 8.jpg eu salvo olho lá no meu no meu no Meu Explorer e olha só já tá aqui um detalhe é que às vezes você pode criar uma pasta para colocar todas as as imagens às vezes chamada de assets né Isso aqui é uma pasta posso mandar aqui para dentro o meu arquivo vou mover Vou salvar e agora não aparece mais por quê Porque o endereço da deonde tá minha imagem o caminho dela tá errado agora eu vou

ter que caminhar pelas passas então eu coloco aqui um ponto um barra aí eu vou entrar na pasta assets esse barra é De entrar em pasta e aí entrando na pasta assets eu vou em perg 8.jpg então eu salvo e eu venho aqui agora sim aparece então por isso é sempre bom tomar um cuidadinho assim em qual lugar que está a sua imagem ou não você pode deixar na rez do projeto já que a gente só tem um arquivo HTML tá tudo certo ou não essa pasta vs code aqui ele criou automático Talvez não tenha

criado aí para você ao longo do tempo eu nem tinha percebido que estava aqui E esse Atributo Alt é para escrever um texto alternativo quando a sua imagem não for carregada por algum motivo e também PR acessibilidade Então quem não consegue visualizar a a sua imagem pode com o leitor de tela saber o que do que que se trata então eu posso colocar aqui no Alt logotipo de uma linguagem de programação né porque não vou também D resposta só porque não está aparecendo a imagem Vou salvar e olha só que legal continua aqui A imagem

out ela de fato vai aparecer só nessas situações aí que eu citei PR vocês e aí pr gente colocar o input do usuário né Porque só tá aparecendo a imagem a gente vai colocar o input né a entrada do usuário a gente pode colocar o input do tipo texto mesmo a gente coloca aquele nosso idez de pergunta oito a gente coloca o name pergunta oito também E aí o valor ele vai ser o que o usuário vai colocar a gente pode até colocar um Place holder ã Digite sua Resposta Olha só já temos aqui eu

vou até na verdade pular de linha eu acho deixa eu colocar um BR aqui depois da nossa imagem e aí a gente consegue escrever a resposta embaixo tem uma coisa também bem legal além de da tag imagem que é a tag Figure quando a gente tá colocando por exemplo um questionário mesmo que nem a gente tá fazendo sabe no vestibular que às vezes tem até é a legenda da foto assim imagem número um sei lá é mapa da Ásia sabe um negócio Assim a tag que a gente usa para isso é a tag Figure E

aí a gente coloca a nossa tag image dentro dessa tag Figure eu vou mostrar aqui para vocês porque eu acho bem legal de conhecer também vou pular a linha aqui vou fechar a Figure aqui embaixo Vou salvar nada vai mudar mas agora a gente vai poder utilizar dentro dessa tag Figure a tag fig caption E aí caption é da legenda mesmo e aí eu coloco figura um logotipo de uma Linguagem de programação ué Rafa mas a gente colocou ali no Alt esse mesmo texto gente o alt serve para uma coisa essa legenda aqui serve para

outra essa legenda olha só ela vai aparecer tá vendo É bem Daquele jeitinho vestibular que fica escrito embaixo Qual que é a legenda e essa daqui é a tag exata específica para isso é a tag Figure legal pessoal Gente é muita coisa que vocês estão aprendendo nesse vídeo aqui tá vocês sabem que tudo que a gente tá Vendo parece que é feito para vocês fazerem apenas um questionário mas gente isso aqui é tudo vocês têm que entender como criar a sua ideia de página Web ah página de login Quais que são as entradas aqui de

usuário que eu vou usar entendeu Você tá aprendendo todos os elementos HTML para poder se virar saber fazer a sua página mesmo acabou Óbvio que não pessoal Chegamos na pergunta oito Mas a gente ainda tem conceito para aprender e aí o que que eu fiz eu criei Uma tabela de pontuação pra gente aprender a montar tabelas com HTML e eu também montei uma lista com as respostas pra gente também aprender a lidar com listas Então vamos fazer exatamente isso eu vou fechar aqui a nossa section isso tudo a gente vai continuar fazendo dentro do nosso

conteúdo principal do Main então eu vou colocar aqui o comentário que agora a gente vai colocar a nossa tabela de pontuação a gente vai abrir uma Section eu vou colocar o título né das tabela de pontuações também acho que pontuação também quero mostrar aqui embaixo né Depois das nossas perguntas todas e agora bora montar a nossa tabela e como que a gente vai fazer isso a gente utiliza a tag vou abrir aqui e agora a gente vai começar a montar a nossa tabela a tabela no HTML como a gente monta ela é montada por linhas

então a gente cria uma tag de linha coloca cada uma das dos itens Dentro da linha aí depois a gente volta e cria mais uma tag de linha e aí dentro dessa outra tag de linha vão ter os itens dessa segunda linha terceira tag de linha aí vão ter os itens dentro dessa linha e qual que é a tag de linha a tal da tr que é table row row de linha em inglês Então dentro dela a gente vai colocar cada um dos itens que a linha vai ter quantos itens a gente vai fazer a

gente pode fazer dois que aí pode ter a pontuação e o que que essa pontuação Significa E aí para cada célula cédula eu não sei célula eu acho da tabela da linha que são duas agora no caso a gente vai utilizar TD que vai ser table data é é data de informação mesmo então aqui a gente vai colocar pô se a pessoa tirou por exemplo zer a 2 aí na segunda table data então aqui a gente coloca a pontuação na seguinte a gente coloca o que significa Então a gente vai falar que não desista Não

desista cada tentativa é uma Oportunidade de você aprender vamos salvar e só ver como que tá ficando Olha só Ele montou pra gente ah Calma lá que eu coloquei o TD para fora aqui ó Ixe eu dupliquei eu nem tinha percebido que eu tinha feito isso deixa eu tirar esse 02 e aqui o segundo TD eu vou fechar aqui no final né do cada tentativa Vou salvar pronto olha só tem aqui a informação número um e a informação número dois estão na mesma linha São duas informações diferentes mas gente não dá Para ver que é

uma tabela O que que a gente pode fazer aqui dentro da nossa tag table a gente pode adicionar um atributo que é o border assim a gente coloca uma borda nessa tabela para visualizar o que que é cada coisa e essa border pode ser um Olha só agora a gente já consegue entender o que que é o que que é cada coisa né Se eu colocar por exemplo uma border 5 Olha como fica mais grossa eu gosto mais no border um pra gente poder visualizar que é uma tabela Mas não ficar tão grosseira assim olha

que legal agora a gente precisa criar outras linhas agora PR pontuação TR a qu depois 5 a depois quem tira oito que acerta todas também o que que significa para isso a gente vai ter que criar uma nova TR né como eu falei vocês a gente vai por linhas Então temos a linha um aqui vai ser a linha dois a gente vai colocar TR ou qu você ainda Precisa melhorar ponto que tal estudar mais sobre Programação aí salvar só para ver como que tá ficando olha só já criamos a segunda linha aí a gente com

TR vai criar a terceira e a quarta também que vai ser de c a s e a de o A de 5 a s a gente coloca bom seu conhecimento em programação está satisfatório e a de oito vou colocar perfeito você está muito bem informado sobre programação Vamos colocar assim vou salvar e olha só tchã Opa algo quebrou aqui é ó eu acho que Tirei um menor que Pronto agora ficou bonitinho a gente ainda pode também colocar um cabeçalho para essa nossa tabela Pois é pessoal a tag table dentro dela a gente colocou aqui meio

que o corpo da tabela com as informações a gente pode dividir ela em cabeçalho da tabela corpo da tabela e rodapé da tabela igual a gente faz com HTML como que a gente faz isso para o cabeçalho a gente coloca t r tem que tomar um Cuidado porque aqui é R lá não era aí a gente vai colocar aqui o cabeçalho que a gente ainda não colocou depois do t a gente coloca tb que aí sim é tudo que a gente estava adicionando até o momento eu vou copiar o TB e colocar lá no final

da nossa última linha que a gente tinha escrito e agora a gente vai ter que identar porque tá tudo para uma linha para baixo né vou colocar a identação uma Tab pra frente e agora a gente tem que escrever o nosso cabeçalho ó nada Mudou perfeito Vamos colocar então uma linha pro nosso cabeçalho a gente vai utilizar o TR também para isso e para as informações a gente não usa o TD a gente usa o th de ter ré ainda gente isso daqui tem que aprender Tem que decorar não tem jeito com o tempo vocês

vão pegando aqui eu vou colocar a pontuação e aqui em seguida eu vou colocar a avaliação salvar olha só que legal porque aí aparece de uma forma diferente aqui Quando você usa o th né como é o header e lá embaixo a gente pode inclusive também colocar um TF que vai ser o roda pé eu coloco o TR que vai ser a linha e coloco TD E aí dentro desse TD eu vou colocar eu quero colocar na verdade só uma informação eu quero que a informação do rodapé ela ocupe o tamanho inteiro ali da linha

então não quero dividir em duas informações eu vou escrever então aqui o texto boa sorte na próxima na próxima aí Eu vou salvar e vou olhar aqui Vixe mas não não rolou ele tá preso aqui nessa primeira informação Ele tá esperando que eu crie mais uma outra TD ali pra segunda parte da linha então o que que eu posso fazer se eu quiser ocupar duas colunas né aqui dentro do meu TD eu posso vir com o atributo c Pan e eu coloco que eu quero ocupar duas colunas entendeu esse co spam é das colunas o

número de colunas que eu quero ocupar aí a gente salva volta aqui e olha só Pronto agora ele tá ocupando o texto inteiro dá até PR escrever mais coisa boa sorte na próxima estude mais para melhorar sei lá algo assim Aí fica mais bonitinho já ocupa um pouco mais de espaço muito legal né pessoal muita informação aqui sobre tabelas com HTML vou fechar aqui a nossa section da tabela e agora agora a gente vai ver listas que vai ser a lista de respostas pois é agora chegou a hora de vocês verem que que vocês foram

aí pensando e Entendendo sobre programação se o que vocês colocaram de pergunta faz sentido ou não faz vou colocar o título que vai ser verifique suas respostas Vou salvar vamos ver como que tá ficando legal e agora pessoal pra gente criar listas a gente vai utilizar duas principais tags a primeira que vai dizer que aqui vai ser uma lista e a segunda para cada item Então a primeira T que a gente vai ver é a ul que vai criar uma lista pra gente mas né se eu Salvar não vai aparecer nada ela só tá dizendo

que vai ser uma lista E aí dentro dela a gente vai colocar cada item então ela vai criar como se fosse com aquele asterisco um pouco mais pra frente né de uma forma de lista mesmo e aí cada item a gente vai colocar li então a resposta da pergunta um né que vai ser o primeiro item qual que era HTML Vou salvar vamos voltar aqui olha só HTML a resposta da pergunta dois era Domínio exato pessoal google.com é o domínio na URL a terceira era da senha então você pode colocar um negócio muito doido assim

com caracter especial letra maiúscula minúscula né é um exemplo na verdade de senha forte a a quarta é o ano de 1991 que foi lançado primeira versão do HTML inclusive tá aqui no meu quadrinho 1900 91 muito bonitinho por sinal eu amo esses três quadrinhos aqui de frontend html CSS JavaScript no formato de b housee a resposta da quinta Pergunta era apenas JavaScript e Java porque HTML e CSS não são linguagens de programação HTML é linguagem de marcação e CSS de estilização a próxima pergunta era do arquivo Então vamos colocar aqui que o arquivo deve

ter extensão P html a a próxima o atributo do nosso input que definiu tipo é o atributo Type e a última aquele lá é o logotipo da linguagem Java Vou salvar e olha só Apareceu aqui já em lista Olha que legal que bonitinho que aparece mas porém todavia gente tá meio ruim de visualizar assim né como que a gente sabe que a um é aquela lá e aqui qual que é o número mesmo da resposta sabe a gente tá usando botõezinhos a gente também pode usar listas numeradas aqui quando a gente coloca o l a

gente tá falando de listas não numeradas Então são só as que tem a bolinha para listas numeradas a gente usa ol a gente só muda isso pessoal ao Invés do ul a gente coloca ol Vou salvar e olha só que legal o um é pro HTML o dois pro domínio e assim por diante Então são esses dois tipos de lista legais que você já pode aí aprender a fazer outra coisa legal de lista é que você pode alinhar listas umas dentro das outras também mas uma coisa que eu também quero Quero mostrar para vocês e

que dificilmente eu vejo as pessoas sabendo que é muito legal é que não necessariamente você precisa visualizar Já as respostas Porque se alguém vai ali brincar Seu amigo vai responder as perguntas tal chega um pouco aqui na oito já tá quase Vendo qual que são as respostas dá pra a gente deixar ela clicável né para quando apenas a gente clicar as respostas aparecerem como que a gente pode fazer isso a gente pode utilizar a tag details eu vou colocar então ó essa eu vou colocar a lista né dentro do o a gente não precisa esconder

eu vou colocar aqui ó a tag details que Vai ser de detalhes vou colocar dentro aqui opa vou colocar vou fechar Ela ali no final da nossa lista vou identar melhor aqui tudo Vou salvar e olha só tá escrito detalhes isso aqui já é padrão Tá mas esse detalhes não é legal né de aparecer O legal é que ah gente tá funcionando a gente clica no setinha ele abre apenas quando a gente clica então é bem melhor assim na hora de ver respa Mas a gente pode mudar essa esse detalhes aqui a Gente pode colocar

outra coisa escrita então embaixo da tag detalhes antes da lista a gente coloca a tag summary que aí vai ser o Sumário e aqui a gente vai escrever o que a gente quer que apareça então pode ser um clique aqui para ver as respostas do quiz Vou salvar e olha só que legal agora tá escrito clica aqui para ver as respostas do quiz você clica e aí sim aparecem as respostas elas não ficam já de cara gente quanta coisa incrível que vocês estão vendo em tentão Pouco temp tempo sabe o vídeo é Comprido mas é

o conhecimento de html que eu tenho eu te dou certeza de que muita gente que trabalha hoje no mercado nem soube de algumas tags que tem aqui nem sabe que existe mais um conhecimento gente importantíssimo de html que vocês TM que ter é de formulários ué Rafa mas formulários não é ali com a tag for que a gente fez ali para cada input cada pergunta sim pessoal mas assim no caso ali do quiz a gente separou meio que Individualmente cada pergunta para quando a gente fosse enviar as informações cada uma delas ser analisada de forma

separada quando a gente quer criar um formulário em que todas as respostas elas vão ser enviadas de uma forma conjunta e todos eles meio que são pra mesma coisa por exemplo quando você tá fazendo ali um menu de cadastro ou de login ou agora que a gente vai fazer um formulario Zinho de feedback pra pessoa poder escrever o Nome poder escrever ali o que que ela achou e tudo mais isso tudo pode ser enviado junto de uma forma só então a gente vai colocar tudo dentro de uma P só de formulário e no final a

gente vai ver como a gente faz um botão que aí esse botão vai enviar as informações até agora a gente estava só com a pessoa escrevendo a pessoa clicando no no nas bolinhas nas caixinhas com esse formulário aqui que a gente vai ver a gente vai colocar um botãozinho Então Bora entender como que funciona vou colocar aqui também um comentário pra nossa última section do m a gente ainda vai fazer o roda pack a gente vai colocar então o formulário de feedback vamos também colocar tudo dentro de uma section vou colocar o título H2 do

nos dê o seu feedback Vou salvar vamos ver como que tá ficando é nos dê o seu feedback e aqui a gente vai colocar todo o nosso formulário dentro da tag form vou tirar esse Action também vou abrir a Tag e vamos colocar então o nosso primeiro input que vai ser do tipo texto que vai ser para o nome da pessoa colocar aqui o ID que vai ser name também o name que vai ser name né a gente pode colocar dessa forma né para ao invés da gente colocar de novo em perguntas e tal que

era mais pro Quiz aqui a gente tá colocando pro formulário Vou salvar e olha só só tem aqui o nosso input a gente precisa de novo colocar o Label dessa vez eu quero colocar o Label Em cima do input né a gente coloca nome aí a pessoa escreve o nome embaixo então ele vai ser for name E aí aqui a gente coloca nome dois pontos Opa pra pessoa poder digitar o nome dela nome Olha só e aqui agora Ou a gente pode também colocar um BR para quebrar a linha e a pessoa colocar embaixo pode

ser meu mas eu gostei eu acho que eu gostei na mesma linha vou deixar assim mesmo vamos colocar também aqui eu vou copiar e colar só porque é a Mesma estrutura é Label e input né eu vou colocar agora pra pessoa entrar com o e-mail dela aí aqui ela vai colocar e-mail ID vai ser e-mail e o name também do input vc email vamos salvar e olha só aqui a gente pode fazer uma quebra de linha né entre os dois inputs eu vou colocar aqui um BR aí aqui pode ser nome e-mail vai ficar mais

legal mas uma coisa um detalhezinho aqui quando a gente tá lidando com e-mail gente é que o tipo Aqui de texte tudo bem a gente pode colocar tipo texto a pessoa pode entrar com o texto mas existe um tipo do input que é só para e-mail que é o Type e-mail mesmo então aqui na hora de verificar as informações né quando você for enviar o seu formulário ele pode ver a pessoa colocou ar e tudo mais o formato e-mail mesmo por isso que é tão legal a gente usar os tipos certos para as informações certas

também aí a gente pode conhecer um novo que vai ser para Comentários com comment eu Eu não sei porque eu tô colocando em inglês né Eu acho que eu vou colocar nome mesmo aqui e no primeiro e aí o segundo e-mail faz parte né o ID também eu vou colocar nome e aí é que a gente coloca aqui comentários para ficar mais português comentários aí embaixo a gente coloca o nosso input de comentários mas os comentários ele não vai ser do tipo texto Porque pô eu quero escrever um Comentário maior né ah deixa eu colocar

o Lab comentário vou pular linha aqui também do e-mail embaixo do input do e-mail comentários ele tem que ter um um espaço maior né a gente precisa de uma caixa de texto e não apenas isso daqui a gente faz um comentário Às vezes a gente quer colocar várias informações então ao inv vez da gente usar esse input type text a gente vai utilizar uma tag chamada text area que aí vai ser uma área de texto mesmo eu vou salvar só Para vocês verem aqui como que funciona Opa essa essa é essa tag aqui a gente

tem que fechar Deixa eu só fechar porque você viu que apareceu ali dentro do text um monte de informação olha só que tá for section pronto aí olha só que legal gente esse text area até dá para no navegador mesmo a gente abrir fechar Mas uma coisa que é importante da gente fazer aqui além de adicionar os atributos de ID que vai ser de comentários o name também vai ser Comentários a gente consegue colocar o número de colunas e de linhas que a gente quer pro tamanho dessa nossa área de texto e como que a

gente faz isso a gente coloca aqui rows que vai ser de linhas posso fazer umas quatro linhas mais ou menos eu salvo Olha só como já tá maior e eu posso fazer as colunas que pode ser umas 50 colunas vamos ver como fica olha só ficou bem maior e bem mais legal também aí eu posso até pô um Place holder também digite seus comentários Aqui tchã agora eu acho que o comentário ficou meio estranho ele aqui para baixo eu vou colocar vou pular linha da Label comentários para a própria caixa de texto acho que vai

ficar melhor é ó aí sim fica um pouquinho melhor né E uma coisa que é legal se a gente quiser deixar até mais bonitinho assim o nosso formulário a gente pode utilizar uma tag envolvendo o formulário para meio que juntar todas essas informações então aqui embaixo do form que vai ser a Field Set ele vai criar um uma áre Zinha paraas nossas perguntas desse formulário vou copiar vou levar lá para baixo também eh fechar aqui antes do nosso formulário Vou salvar e olha só que legal ele até colocou uma bordinha para mostrar que aqui a

gente tem essa área dentro do for do formulário que engloba esse formulário e a gente pode até eu acho isso tão bonitinho colocar uma legenda para esse formulário utilizando o a tag Legend então eu coloco aqui ó Informaç informções de contato né que a pessoa vai entrar aí olha que legal gente informações de contato ficou no meio da linha tipo uma legenda dentro da linha que é o fio de set para englobar aí o nosso Formes eu não sei de vocês gente mas eu acho isso muito legal mesmo Achei acho muito bem feito assim o

nosso HTML e agora a gente conseguiu criar o cabeçalho a gente conseguiu criar o nosso conteúdo principal que vem até aqui a parte do feedback e a gente pode Criar finalmente o nosso rodapé o roda pé lembrando a gente já tinha escrito o footer já que a gente já terminou o m eu vou até minimizar o m vocês lembram qual Essa era estrutura Inicial gente que a gente começou lá no vídeo já fizemos o header já fizemos o m agora a gente vai fazer o footer então eu vou abrir aqui o espaço do nosso roda

pezinho aqui normalmente a gente coloca aquela parte de direitos né de contato também do autor da página web então eu Vou fazer isso utilizando os parágrafos que a gente já conhece aquela tag P eu vou colocar tipo quiz de programação todos os direitos reservados deixa eu colocar quiz de programação programadores acho que esse seria o texto né ponto todos os direitos reservados vamos ver como que vai ficar Vou salvar lá na nossa página vai est ó quid programadores todos os direitos reservados legal a gente pode colocar aquele simbolozinho também sabe Que mostra que é que

tem a a a acho que é de direito eu não consigo nem falar gente eu acho que é licença mesmo né a gente não aqui no caso não tem é um projeto mais lúdico Mas a gente pode colocar porque eu acho que é interessante vocês aprenderem uma coisa quando a gente vai utilizar algum caracter especial por exemplo se eu quisesse aqui no quiz de programadores colocar um menor q gente ferrou Como que eu faço que com que esse menor q apareça Na minha página se eu vier aqui ó já quebrou o meu HTML nem aparece

mais a frase como que eu consigo usar esse menor que entendeu se eu quero que isso apareça na minha página a gente vai utilizar o e- comercial e aí dependendo do caracter que é reservado do HTML né como esse menor q por exemplo que ele entende que a gente tá abrindo uma tag então por isso ele quebra tudo a gente coloca algum codigo Zinho referente a cada uma das a cada um dos símbolos que A gente quer pôr por exemplo se a gente coloca LT depois do e- comercial e salva a gente volta aqui e

ele mostra pra gente o menor que se eu coloco então por exemplo GT aí ele faz o outro símbolo o maior que e esse dos direitos reservados da licença Ele também é um símbolo desse que a gente coloca o e- comercial mas para ele é copy que é de copyright né se não me engano eu acredito ser que vai ser realmente sobre os direitos Aí da Página e olha só ele já vem com esse cezinho e assim que a gente consegue utilizar esses tipos de símbolo assim que são um pouco mais diferentes legal agora a

gente pode Além disso colocar o contato só que uma coisa que a gente ainda não viu gente até aqui do vídeo e também é muito importante de aprender no HTML é como que a gente consegue criar palavras clicáveis sabe quando tipo a gente quer tem sei lá saiba mais aqui aí a pessoa passa o mouse assim por cima do Saiba mais ele tem sublinhados até meio azulzinho a pessoa clica vai para outro site vai paraa outra aba Vamos aprender a fazer isso utilizando a tag a de âncora e eu vou escrever então Um textinho né

vou colocar um novo parágrafo para conhecer outros quizes clique aqui se a gente salvar e vir aqui não não tem muito não tá clicável esse clique aqui então o que que a gente precisa fazer a gente utiliza essa tag a que Eu mencionei que é de âncora a gente Vai fechá-la ali no final do aqui dentro do parágrafo mesmo e ela tem esse atributo href o href é onde a gente vai colocar PR onde que é para ir quando a gente clicar se a gente salvar a gente vem aqui no clica aqui e de fato

já tá até azulzinho só que a gente clica ele não vai para lugar nenhum porque ess HF tá vazio Se eu colocar por exemplo https 2 bar gooogle.com se eu clicar salvar né e vir aqui no nosso projeto e clicar em clique aqui ele me leva pro Google mas o Problema é que ele tá me levando pro Google e saindo da minha página a gente pode fazer com que ele abra uma nova Tab para poder ir para essa página para isso a gente adiciona um outro atributo além do href no nosso a que é o

target E aí o valor dele vai ser um underline Blank agora se a gente clicar aqui tchã ele abriu numa nova aba o nosso site do Google isso é muito legal esse a ele é muito especial por não apenas a gente pode fazer com que a pessoa Vá para uma Outra página mas por exemplo quando a gente tem mais de um arquivo HTML a gente tem sei lá é página do produto P HTML a gente pode fazer com que a pessoa ela vá para essa página do produto e aqui chegou a hora de mostrar para

vocês um uma uma dica um segredo muito especial pessoal quando você quer começar a criar um arquivo HTML seja index seja qualquer outra página que você queira clicar aí criar aí do seu site você coloca um ponto de Exclamação dá enter e ele cria toda aquela página aquela parte básica que a gente aprendeu com o HTML com o body com o Head e com o doct Type já aqui a gente vê que ele já tem um atributo HTML esse leng que é da linguagem que a gente tá escrevendo o nosso site ela vem com en

mas a gente como nosso o site ele é em português do Brasil a gente pode trocar para PTBR esse metadado aqui dentro do Head charset É do teclado que a gente tá utilizando esse utf8 e também a gente Tem esse metadado de viewport widget e tal é da resolução aí do navegador que vai aparecer pode deixar da forma como está já meio que padrão Aí você pode adicionar de novo é um title o o a descrição aqui é uma outra página eu tô vamos falar que é página de produto não eu vou colocar uma página

de eh sobre mim né acho que vai ser mais legal já que a gente tá fazendo Quiz não faz sentido ter um produto na página aqui sobre mim vou colocar o título também Sobre mim que vai aparecer lá na aba do nosso navegador ué mas como que a gente consegue visualizar essa página sobre mim aqui quando a gente vai na nossa URL ele tá mostrando aqui o servidorzinho assim que ele criou lá com o Live server mas ele coloca também Qual que é o arquivo que tá mostrando Se eu colocar o nome do arquivo sobre

mim pon HTML ele vai mostrar a página nova que a gente tá escrevendo ali dentro do projeto então ó já apareceu o title sobre mim eu vou Colocar aqui um um um borum H1 eu sou Rafaela balerine Vou salvar e olha só aqui é a página sobre mim obviamente eh se você quiser escrever parágrafo colocar imagem fazer um projeto novo esse é um dos Desafios que eu deixo aí para vocês é não apenas fazer uma página sobre mim mas tudo que vocês acham que seria muito pertin nente Mas o que eu quero mostrar agora que

eu acho mágico voltando ali no nosso index que é o do quiz como que a gente consegue então é Para conhecer outros quizes agora eu vou mudar para conhecer mais sobre mim clique aqui então vamos voltar lá pro nosso index para conhecer mais sobre mim clica aqui clicando a gente ainda tá indo pro Google como que a gente consegue clicar ir para uma nova página que a gente acabou de criar no nosso projeto a gente coloca o arquivo aqui então vou colocar sobremim P HTML salvo vamos ver agora vou dar até um refresh para que

funcione Clica aqui e olha só ele abriu essa nova página vou até fechar clicar de novo para mostrar para vocês que a gente programou Então agora você tem a faca e o queijo na mão você já aprendeu gente assim zilhões e zilhões de tags do HTML para poder criar uma página do zero e é isso que eu quero que você faça faz uma página inicial e começa a criar página de produtos com imagem de um produto legal que você quer mostrar você já sabe colocar imagem cria aí um formulário de Login o formulário de cadastro

vai treinando Você já tem agora o conhecimento de como o HTML funciona a partir de agora é só melhorar aprender o CSS para poder estilizar Porque de fato meu Deus do céu tá feio isso daqui eu sei que que eu eu quero que vocês gostem desse projeto mas não tá bonito tá um projeto muito básico né o html faz com que a página pareça básica por mais que não seja tá Por mais que a estrutura seja muito legal vocês conheceram Conceitos aqui que tem muita gente que não tem nem ideia mas para deixar bonitinho coloridinho

a gente tem que aprender CSS para deixar com bordinha para tudo ficar Centralizado para ter uma borda para não gente assim tudo é CSS visual e também vocês me perguntam Rafa Mas para onde estão indo essas informações todas gente para lugar nenhum vamos até adicionar um botão eu Quero mostrar PR vocês como que faz um botão né que a gente usa vou voltar ali No formulário de feedback a gente vai colocar um botão para enviar o o o feedback vou colocar dentro aqui do fio de set mesmo né que é essa áre Zinha com a

linha vou adicionar a tag Button Vou salvar e ele até cria aqui ó um botãozinho aqui eu posso colocar Tá Bem feinho né eu vou primeiro pular uma linha ali da do text area deixar ele aqui embaixo e vou escrever por exemplo em envie o feedback para escrever dentro do nosso botão mas gente eu clico ó nada Acontece ele fica na mesma página aqui é a magia do JavaScript que começa a acontecer se a gente coloca por exemplo um atributo on Click que é um atributo do HTML mesmo dentro dele a gente com JavaScript escolhe

o que que vai acontecer então por exemplo eu vou colocar um Alert que é um comando do JavaScript pessoal e vou colocar feedback enviado Vou salvar Pera que eu preciso colocar entre aspas simples feedback enviado eu fecho aqui as Aspas Eu coloquei aspas simples dentro ali do alert porque para usar as aspas duplas e aspas simples dentro tem que fazer isso aí gente é a coisa do JavaScript Vou salvar e vamos lá no nosso Quiz ver o que acontece se eu envio feedback Olha só feedback enviado isso é um Alert do JavaScript aí a gente

vai começar a aprender sobre isso tudo e de fato enviar essas informações lá para um banco de dados E aí poder fazer a verificação se a resposta tá certa se Não tá tudo isso pessoal a gente vai usar uma linguagem de programação que tem lógica que tem variáveis que vai ter isso tudo pra gente poder melhorar a nossa plataforma então se você gostou do conteúdo até aqui não esquece de deixar o like eu faço ele com muito carinho eu estudo para caramba para poder trazer tudo que cabe em um vídeo aqui para vocês e muito

em breve vai ter mais conteúdo de CSS de JavaScript de várias outras ferramentas que englobam aí o Universo de programação e não apenas essa parte visual do frontend já dando um spoiler Não esquece de se inscrever um beijo e até o próximo [Música] [Música] vídeo n [Música]