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 criar um site grátis


Construa e hospede seu site com o W3Schools Spaces.

Comece com seu site gratuito em apenas alguns cliques.

Tudo o que você precisa diretamente no navegador.

É fácil de usar - experimente!

Comece gratuitamente »

Crie seu primeiro site com o W3Schools Spaces

O W3Schools Spaces é um lugar pessoal onde você pode construir e experimentar códigos e hospedar seu próprio site.

Com o W3Schools Spaces você pode construir com HTML, CSS e JavaScript.

Edite o código diretamente no seu navegador.

Carregue e hospede seus arquivos e imagens.

Comece a aumentar sua presença online hoje!


Por que construir com os Espaços W3Schools?

O Spaces é feito por desenvolvedores web para desenvolvedores web.

  1. A interface é simples e fácil de usar.
  2. Hospede e edite seus arquivos diretamente no navegador.
  3. Modelos gratuitos.

É grátis para começar e você não precisa inserir seu cartão de crédito.


Editar e visualizar código

O editor é fácil de usar - o que ajuda você a se concentrar nas coisas mais importantes.

Verifique a capacidade de resposta do seu site com as diferentes alternativas de visualização.

Visualize as alterações em seu site, ao vivo!


Construa de qualquer lugar

Hospede seus arquivos e imagens na nuvem.

Mantenha-se organizado criando uma estrutura com pastas.

Tudo o que você precisa diretamente no navegador.


Modelos gratuitos

Navegue e use nossos modelos de sites responsivos.

Modifique, salve, compartilhe e use-os em seus projetos.

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

Espaços W3Schools

Build your own website with W3Schools Spaces.

Get Started for Free