COMO

HowTo Home

Menus

Barra de ícones Ícone do menu Acordeão Abas Abas Verticais Cabeçalhos da guia Guias de página inteira Guias ao passar o mouse Navegação superior Topnav responsivo Barra de navegação com ícones Menu de pesquisa Barra de pesquisa Barra Lateral Fixa Navegação da página Barra lateral responsiva Navegação em tela cheia Menu fora da tela Botões de navegação lateral Barra lateral com ícones Menu de rolagem horizontal Menu Vertical Navegação inferior Navegação inferior responsiva Links de navegação da borda inferior Links de menu alinhados à direita Link do menu centralizado Links do menu de largura igual Menu Fixo Barra deslizante na rolagem Ocultar a barra de navegação na rolagem Reduzir a barra de navegação ao rolar Barra de navegação fixa Barra de navegação na imagem Suspensões suspensas Clique em listas suspensas Lista suspensa em cascata Suspensão no Topnav Suspensão no Sidenav Lista suspensa da barra de navegação de resp. Menu de subnavegação Soltar-se Megamenu Menu Móvel Menu cortina Barra lateral recolhida Painel lateral recolhido Paginação Migalhas de pão Grupo de botões Grupo de botões verticais Barra Social Fixa Navegação de pílulas Cabeçalho responsivo

Imagens

Apresentação de slides Galeria de apresentação de slides Imagens modais Caixa de luz Grade de imagem responsiva Grade de imagens Galeria de guias Desvanecimento da sobreposição de imagem Slide de sobreposição de imagem Zoom de sobreposição de imagem Título da sobreposição de imagem Ícone de sobreposição de imagem Efeitos de imagem Imagem em preto e branco Texto da imagem Blocos de texto de imagem Texto de imagem transparente Imagem de página inteira Formulário na imagem Imagem do herói Desfocar imagem de fundo Alterar Bg na rolagem Imagens lado a lado Imagens arredondadas Imagens de avatar Imagens responsivas Centro de imagens Miniaturas Borda ao redor da imagem Conheça o time Imagem Fixa Virar uma imagem Agite uma imagem Galeria de portfólio Portfólio com Filtragem Zoom de imagem Lupa de Imagem Controle deslizante de comparação de imagens Favicon

Botões

Botões de alerta Botões de contorno Botões divididos Botões animados Botões de desvanecimento Botão na imagem Botões de mídia social Leia mais Leia menos Botões de carregamento Botões de download Botões de pílula Botão de notificação Botões de ícone Botões Próximo/Anterior Mais botão na navegação Botões de bloqueio Botões de texto Botões redondos Botão de rolagem para o topo

Formulários

forma de login Formulário de inscrição Formulário de pagamento Formulário de Contato Formulário de login social Formulário de registro Formulário com ícones Boletim de Notícias Formulário empilhado Formulário responsivo Formulário pop-up Formulário embutido Limpar campo de entrada Ocultar setas numéricas Copiar texto para a área de transferência Pesquisa animada Botão Pesquisar Pesquisa em tela cheia Campo de entrada na barra de navegação Formulário de login na barra de navegação Caixa de seleção/rádio personalizado Seleção personalizada Interruptor Marque a caixa de seleção Detectar Caps Lock Botão de gatilho ao entrar Validação de senha Alternar visibilidade da senha Formulário de várias etapas autocompletar Desativar preenchimento automático Desativar a verificação ortográfica Botão de upload de arquivo Validação de entrada vazia

Filtros

Lista de filtros Filtrar Tabela Elementos de filtro Filtro suspenso Lista de classificação Tabela de feitiços

Tabelas

Mesa listrada de zebra Mesas de centro Tabela de largura total Tabelas lado a lado Tabelas responsivas Tabela de comparação

Mais

Vídeo em tela cheia Caixas modais Excluir modal Linha do tempo Indicador de rolagem Barras de progresso Barra de Habilidade Controles deslizantes de intervalo Dicas de ferramentas Exibir elemento flutuante Pop-ups Dobrável Calendário HTML inclui Lista de afazeres Carregadores Classificação por estrelas Avaliação do utilizador Efeito de sobreposição Fichas de contato Cartões Virar cartão Cartão de perfil Cartão do produto Alertas Chamar Notas Rótulos Círculos Estilo RH Cupom Listar Grupo Lista sem marcadores Texto responsivo Texto recortado Texto brilhante Rodapé Fixo Elemento pegajoso Altura igual Clearfix Flutuadores responsivos Lanchonete Janela de tela cheia Desenho de rolagem Rolagem suave Rolagem Gradiente BG Cabeçalho Fixo Encolher cabeçalho na rolagem Tabela de preços Paralaxe Proporção da tela Iframes responsivos Alternar gostar/não gostar Alternar ocultar/mostrar Alternar modo escuro Alternar texto Alternar classe Adicionar turma Remover classe Classe ativa Vista em Árvore Remover propriedade Detecção off-line Encontrar Elemento Oculto Redirecionar página da Web Zoom ao passar o mouse Flip Box Centralizar verticalmente Botão central em DIV Transição ao passar o mouse Setas; flechas Formas Link para Download Elemento de altura total Janela do navegador Barra de rolagem personalizada Ocultar barra de rolagem Mostrar/Forçar a barra de rolagem Aparência do dispositivo Borda editável de conteúdo Cor do espaço reservado Cor de seleção de texto Cor do marcador Linha vertical Divisores Animar ícones Temporizador de contagem regressiva Máquina de escrever Em breve página Mensagens de bate-papo Janela de bate-papo pop-up Tela dividida Depoimentos Contador de Seções Apresentação de slides de cotações Itens de lista que podem ser fechados Pontos de interrupção típicos do dispositivo Elemento HTML arrastável Consultas de mídia JS Marcador de sintaxe Animações JS Comprimento da String JS Exponenciação JS Parâmetros padrão JS Obter URL atual Obter tamanho atual da tela Obter elementos Iframe

Local na rede Internet

Crie um Site Gratuito Faça um site Faça um site estático Faça um site (W3.CSS) Faça um site (BS3) Faça um site (BS4) Faça um site (BS5) Criar e visualizar um site Crie um site de árvore de links Criar um portfólio Crie um currículo Faça um site de restaurante Faça um site de negócios Faça um Webbook Site central Seção de contato Sobre a página Cabeçalho grande Exemplo de site

Rede

Layout de 2 colunas Layout de 3 colunas Layout de 4 colunas Grade de Expansão Exibição de grade de lista Layout de Coluna Mista Cartões de coluna Esquema Zig Zag Esquema do blogue

o Google

Gráficos do Google Fontes do Google Pareamentos de fontes do Google Configuração do Google Analytics

Conversores

Converter peso Converter temperatura Converter comprimento Velocidade de conversão

Blogue

Obter um trabalho de desenvolvedor Torne-se um desenvolvedor front-end.

Como fazer um site estático

Um site estático tem conteúdo fixo

Não requer linguagens de programação para construir um.

É a forma mais fácil de criar um site.

Sites estáticos são construídos em HTML, CSS e JavaScript.

Comece gratuitamente »

Por que criar um site estático?

Sites estáticos são rápidos e fáceis de criar.

É barato hospedar.

Sites estáticos são seguros.

É divertido e você pode criar sites incríveis com HTML, CSS e JavaScript.


O que eu preciso saber para construir um site estático

HTML, CSS e JavaScript são as linguagens básicas para construir qualquer site.

  1. Crie a estrutura com HTML. A primeira coisa que você precisa aprender é HTML, que é a linguagem de marcação padrão para criar páginas da web.
  2. Aprenda HTML »
  3. Estilo com CSS. O próximo passo é aprender CSS, para definir o layout da sua página da web com belas cores, fontes e muito mais.
  4. Aprenda CSS »
  5. Torne-o interativo com JavaScript. Depois de estudar HTML e CSS, você deve aprender JavaScript para criar páginas da web dinâmicas e interativas para seus usuários.
  6. Aprenda JavaScript »

A melhor maneira de aprender é ser prático. Comece a construir hoje!


Crie um site estático com o W3Schools Spaces

O Spaces é um local pessoal onde você pode criar e experimentar códigos e hospedar seu site.

Com o Spaces, você pode criar sites estáticos com HTML, CSS e JavaScript.

Tudo o que você precisa diretamente no navegador.

Saber mais "

Como eu começo

Existem duas maneiras de começar a construir um site estático.

Construindo do zero ou usando um modelo .


Criando uma página estática do zero

Leia aqui como criar um site estático do zero Como criar uma página da Web


Construindo com um modelo

Começar com modelos é uma boa maneira de se inspirar e aprender.

Temos modelos prontos que você pode usar. aqui estão alguns exemplos:

Existem muitos modelos de sites estáticos disponíveis no W3Schools Spaces. Eles podem ser carregados diretamente no serviço.

Iniciar "

* não é necessário cartão de crédito

Modelo de blog de moda

Modelo de Portfólio de Fotos

Modelo de paralaxe


Espaços W3Schools

Espaços W3Schools

Build your static website with W3Schools Spaces.

Get Started for Free