Como fazer um website
Aprenda a criar um site responsivo que funcionará em todos os dispositivos, PC, laptop, tablet e telefone.
Crie um site do zero
Um "rascunho de layout"
Pode ser sábio desenhar um rascunho de layout do design da página antes de criar um site:
Barra de navegação
Conteúdo Secundário
Algum texto algum texto..
Conteúdo principal
Algum texto algum texto..
Algum texto algum texto..
Algum texto algum texto..
Rodapé
Primeiro passo - página HTML básica
HTML é a linguagem de marcação padrão para a criação de sites e CSS é a linguagem que descreve o estilo de um documento HTML. Vamos combinar HTML e CSS para criar uma página web básica.
Nota: Se você não conhece HTML e CSS, sugerimos que comece lendo nosso Tutorial HTML .
Exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Exemplo explicado
- A
<!DOCTYPE html>
declaração define este documento como HTML5 - O
<html>
elemento é o elemento raiz de uma página HTML - O
<head>
elemento contém meta-informações sobre o documento - O
<title>
elemento especifica um título para o documento - O
<meta>
elemento deve definir o conjunto de caracteres como UTF-8 - O
<meta>
elemento com name="viewport" faz com que o site fique bem em todos os dispositivos e resoluções de tela - O
<style>
elemento contém os estilos do site (layout/design) - O
<body>
elemento contém o conteúdo da página visível - O
<h1>
elemento define um título grande - O
<p>
elemento define um parágrafo
Criando o conteúdo da página
Dentro do <body>
elemento do nosso site, usaremos nosso "Layout Draft" e criaremos:
- Um cabeçalho
- Uma barra de navegação
- Conteúdo principal
- Conteúdo secundário
- Um rodapé
Cabeçalho
Um cabeçalho geralmente está localizado na parte superior do site (ou logo abaixo de um menu de navegação superior). Geralmente contém um logotipo ou o nome do site:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Em seguida, usamos CSS para estilizar o cabeçalho:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Barra de navegação
Uma barra de navegação contém uma lista de links para ajudar os visitantes a navegar pelo seu site:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Use CSS para estilizar a barra de navegação:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Contente
Crie um layout de 2 colunas, dividido em um "conteúdo secundário" e um "conteúdo principal".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Usamos CSS Flexbox para lidar com o layout:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Em seguida, adicione consultas de mídia para tornar o layout responsivo. Isso garantirá que seu site fique bem em todos os dispositivos (desktops, laptops, tablets e telefones). Redimensione a janela do navegador para ver o resultado.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Dica: Para criar um tipo diferente de layout, basta alterar a largura do flex (mas certifique-se de que soma 100%).
Dica: Você quer saber como funciona a regra @media? Leia mais sobre isso em nosso capítulo CSS Media Queries .
Dica: Para saber mais sobre o Módulo de Layout de Caixa Flexível, leia nosso capítulo CSS Flexbox .
O que é dimensionamento de caixa?
Você pode criar facilmente três caixas flutuantes lado a lado. No entanto, quando você adiciona algo que aumenta a largura de cada caixa (por exemplo, preenchimento ou bordas), a caixa será quebrada. A box-sizing
propriedade nos permite incluir o preenchimento e a borda na largura total (e altura) da caixa, garantindo que o preenchimento fique dentro da caixa e que não quebre.
Você pode ler mais sobre a propriedade box-sizing em nosso CSS Box Sizing Tutorial .
Rodapé
Por fim, adicionaremos um rodapé.
<div class="footer">
<h2>Footer</h2>
</div>
E estilize:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Parabéns! Você construiu um site responsivo do zero.
Espaços W3Schools
Se você deseja criar seu próprio site e hospedar seus arquivos .html, experimente nosso construtor de sites gratuito , chamado W3schools Spaces :