Faça uma cafeteria localizando o site: 9 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-02-01 14:42

Neste Instructable, vou mostrar como fazer um site simples exibindo cafeterias perto de você, usando o Google Maps, HTML e CSS

Suprimentos

Um computador

Um editor de texto (eu uso Atom)

Uma conexão wi-fi

Etapa 1: Escolha um Editor de Texto

Eu uso o Atom, que pode ser baixado aqui. Depois de baixado, abra um novo projeto

Etapa 2: Crie seu novo projeto

1. Abra o Atom
2. Achar arquivo
3. No arquivo, clique em novo
4. no canto inferior esquerdo (mac) haverá um botão para criar uma nova pasta
5. nomeie sua pasta '' Mapa do site '
6. Pressione para abrir no canto inferior direito

Etapa 3: Crie seu Index.html

1. Adicione um novo arquivo em sua pasta (no atom, clique com o botão direito na pasta e pressione novo)
2. Nomeie este arquivo 'Index.html'
3. Adicione esta estrutura HTML básica, que é usada em todos os projetos HTML:

Etapa 4: Obtenha seu mapa

1. Visite o Google Maps aqui: Google Maps
2. Procure por café
3. você deve obter todos os cafés em sua área geral
4. clique nas três linhas ao lado do café
5. encontrar compartilhar ou incorporar mapa
6. selecione embed map
7. Escolha o tamanho do mapa (usei grande) e finalize sua localização
8. pressione cópia HTML

Etapa 5: adicionar ao site

1. Volte para o arquivo HTML.
2. entre as duas tags '', insira este código:

'

CAFÉS PERTO DE VOCÊ

'O CÓDIGO INCORPORADO DO GOOGLE MAPS'

'

Etapa 6: visualizar

Essa é a primeira parte feita!

salve o arquivo e encontre-o em seu computador, clique duas vezes nele e ele será aberto em seu navegador padrão para ser visualizado.

Etapa 7: faça com que pareça melhor

1. Entre as duas '' tags, adicione 'Cafeterias perto de mim'
2. Adicione um novo arquivo da mesma maneira que você criou 'Index.html', mas nomeie-o como 'Style.css'
3. de volta ao seu arquivo HTML, escreva este código acima do seu título,"
4. Acesse imagens do google e baixe um clipart fofo de uma xícara de café
5. Adicione a imagem à pasta que contém o resto de nossos arquivos
6. no arquivo CSS, escreva o seguinte código: 'body {
7. imagem de fundo: url (O NOME DA IMAGEM);
8. tamanho do fundo: capa;
9. }'

Etapa 8: Fazendo com que tenha uma aparência melhor Pt2

1. se salvarmos e visualizarmos agora, podemos ver que o plano de fundo do site agora está coberto com nossas xícaras de café
2. Infelizmente, é difícil ler nosso título
3. Portanto, no CSS, abaixo do 'corpo {}', adicione o seguinte código: h1 {
4. cor de fundo = rgb (255, 255, 255);
5. tamanho da fonte = 40px;
6. }

Etapa 9: REVISÃO

É isso! Você Terminou. Você aprendeu o básico de HTML, CSS e código embutido. Muito bem. Você pode editar o código para torná-lo adequado ao seu gosto e exibi-lo em um mapa de tudo o que você quiser. A partir daí, você pode continuar sua jornada de construção de site e melhorando para sempre.