Guia
Como fazer seu
próprio Ifood.
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Uma introdução básica às tecnologias web html, css e javascript. O html é responsável por definir o conteúdo da interface, o css é responsável pela aparência e o javascript é responsável pelo comportamento interativo. O documento aborda conceitos como tags html, atributos, estilização com css, criação de comandos personalizados em javascript, manipulação do html com javascript e operações básicas com variáveis. Além disso, o documento inclui exercícios práticos para aplicar os conhecimentos adquiridos, como corrigir um código html, implementar uma funcionalidade de personalização de conteúdo com base no nome do usuário e criar um cálculo de aluguel com base nas dimensões da sala.
Tipologia: Resumos
2023
1 / 44
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe Introdução ao HTML, CSS e JavaScript e outras Resumos em PDF para Geografia, somente na Docsity!
Guia
Como fazer seu
próprio Ifood.
Antes de mais nada, como eu começo a construir a interface de um
site? Que programa uso? Como vejo como está ficando?
O primeiro aprendizado que muita gente não sabe é: um site nada
mais é que um simples arquivo de texto, desses que criamos para
anotar alguma coisa. Logo, se é só um arquivo de texto, um dos
lugares mais simples onde podemos criar um site é com o Bloco de
Notas.
Criando meu primeiro site
Trocando de .txt para .html já faz seu computador entender que aquele seu arquivo agora é um site e deve ser
aberto no navegador.
Para voltar a editar esse arquivo, você pode arrastá-lo para cima de uma janela do Bloco de Notas, ou então clicar
com o botão direito → Abrir com → Bloco de notas. Agora você pode alterar o arquivo, salvar e atualizar no navegador
(com F5 por exemplo).
Quando salvamos um arquivo com o bloco de notas, por padrão, ele salva com a extensão .txt (por exemplo,
anotacoes.txt). É essa extensão que diz pro seu computador que esse arquivo é só um arquivo de texto normal.
Porém, podemos alterar essa extensão! Basta clicar com o botão direito e pedir para renomear. Aí é só trocar, por
exemplo, de .txt para .html.
*Caso no seu computador a extensão não esteja aparecendo nos nomes dos arquivos, basta abrir uma janela do
Explorador de Arquivos → Clicar em Exibir no menu do topo → Marcar "Extensões de nomes de arquivos"
Algumas tags aceitam configurações específicas
sobre como elas devem funcionar. Por exemplo, um
link precisa da configuração do endereço de destino.
Isso é informado usando atributos, dessa forma:
Uma outra tag que precisa de configuração é a tag
, que precisa do atributo src=”...” para
indicar o endereço da imagem:
Repare que algumas tags fogem à regra de ... pois não precisam ser fechadas. Por exemplo: as tags
e
não fazem sentido serem fechadas, pois uma imagem ou uma quebra de linha não tem início e fim
Atributos
...
Por exemplo, um link: ”>Ir para Globo
A estrutura básica do HTML é a seguinte:
Estrutura HTML
Meu título
Meu conteúdo
Para agrupar elementos em uma “caixa” no HTML,
podemos usar uma tag pra isso chamada div:
Introdução a CSS
... ...
Porém, você vai reparar que essa não muda em nada a aparência da página. Isso porque, por padrão, a
não tem nenhuma aparência definida. Ela é só uma caixa vazia, sem fundo, sem borda nem nada. Para
passarmos a estilizar nosso site, ou seja, definir a aparência dele, temos que usar uma outra tecnologia além do
HTML. Temos que usar a linguagem CSS. Enquanto o HTML é responsável por definir o conteúdo da interface, o CSS é
responsável pela aparência.
Para começarmos a escrever CSS temos que usar
uma tag
Meu conteúdo
Além de referenciar um elemento pelo nome da
sua tag, podemos ainda colocar um identificador no
elemento e referenciá-lo no CSS:
Meu título
Vai ter cor azul Esse vai ter cor preta normal Agora esse vai ter cor vermelha
Tags HTML que vimos:
Compilado de tags e propriedades CSS
... => Título principal da página (vai de h1 a h6) ... => Uma caixa para conter outros itens => Imagem
...
=> Parágrafo ... => NegritoExercícios:
1) Faça uma página com um título principal
“Hello World” seguido de um parágrafo escrito
“Meu primeiro HTML”.
(https://codesandbox.io/s/001-ola-
mundo-dcvw7)
Abaixo estão alguns exercícios para você
praticar o que aprendemos até aqui.
2) A página abaixo deveria ter um link que leva
para a home da melhor plataforma de estudos
de exatas do Brasil, mas não está funcionando.
Corrija o código da página abaixo para que, ao
clicar no link, o usuário seja redirecionado para
a página inicial do Responde Aí.
Além disso, troque o texto de dentro do link
por uma imagem com a **logo do Responde
Aí**. Você pode usar como logo a imagem no
endereço:
(www.respondeai.com.br/assets/new_
base/ra-logo-e29a793adfcc0f
9960e7468967c345c50d9a5ce2782fa63d
7e56f.png)
(https://codesandbox.io/s/002-link-
quebrado-f7jfr)
4) A página abaixo está muito sem graça!!!
Não tem cor e nenhum estilo nos textos...
Modifique-a para que todos os elementos h
tenham cor #fa4098 e sejam sublinhados,
enquanto todas as tags p tenham fonte de
20px, com texto itálico e cor#f2b138.
https://codesandbox.io/s/004-sem-graca-
9xmus
- Capítulo
- Capítulo