HDTutorial
PT

A reprodução carrega o leitor integrado do YouTube (modo de privacidade melhorada).

Como Criar um Site Usando HTML e CSS: Tutorial Passo a Passo para Iniciantes

4 271 531 visualizações 26 de outubro de 2018 17:39

Ver no YouTube
CanalWeb dev

Em resumo

Vai ser criado um cabeçalho de site simples do zero, usando apenas HTML e CSS num editor de texto. Este tutorial para iniciantes abrange a configuração de ficheiros, estilização com imagens, menus e efeitos interativos como estados hover —sem necessidade de experiência prévia em programação.

Passos principais

  1. Criar um ficheiro HTML e um ficheiro CSS ligado numa nova pasta
  2. Inserir uma imagem de fundo guardando-a na pasta e referenciando o seu caminho no CSS
  3. Ajustar a transparência da imagem e adicionar efeitos ao passar o rato com CSS
  4. Adicionar um logótipo, texto de boas-vindas e um botão clicável ao cabeçalho

Descrição do autor

Neste vídeo, você vai aprender a criar um site do zero usando HTML e CSS no Bloco de Notas ou qualquer editor de texto. Vou mostrar como fazer o cabeçalho do site, como adicionar uma imagem de fundo e criar um menu de navegação em HTML. Este é um tutorial completo para quem quer aprender desenvolvimento web com HTML e CSS desde o básico.

Aqui estão os passos desse tutorial de criação de sites em HTML:

1. Criar um arquivo HTML e um arquivo CSS em uma pasta

2. Vincular o arquivo CSS ao arquivo HTML

3. Adicionar uma imagem de fundo no site

Para isso, salve a imagem na mesma pasta e escreva o caminho completo da imagem no arquivo CSS para inseri-la no site

4. Criar um menu de navegação no site

5. Alterar a opacidade da imagem no site

6. Adicionar efeito ao passar o mouse com HTML e CSS

7. Inserir um logotipo no site usando HTML e CSS

8. Adicionar um título (texto de boas-vindas) no site

9. Criar um botão com HTML e CSS

Agora a parte superior do site já está pronta usando HTML e CSS!

Confira outros vídeos populares do meu canal:

Efeito de imagem ao passar o mouse incrível com HTML e CSS – Zoom entrada/saída || Desenvolvimento web
Explicação do posicionamento CSS com exemplos (estático, relativo, absoluto, fixo)
Efeito de imagem ao passar o mouse com CSS – Tutorial CSS – Efeito CSS3 ao passar o mouse
Como mudar a cor da seleção de texto em HTML e CSS
Como fazer uma animação de carregamento simples com CSS3
Como criar um formulário de contato com HTML e CSS
Como fazer um fundo de vídeo em tela cheia com HTML e CSS
Tutorial avançado sobre...

Sobre este tutorial

Web dev publicou este tutorial em vídeo de 17:39 em 26 de outubro de 2018. Foi visto 4 271 531 vezes no YouTube.

Canal
Web dev
Categoria
Educação
Duração
17:39
Publicado
26 de outubro de 2018
Visualizações
4 271 531
Gostos
71 574

Partilhar

Este tutorial noutros idiomas