Como criar um site?

Se atualmente a internet nos fornece uma incrível variedades de sites e serviços, tanto para o laser, quanto para trabalho e estudo, devemos isso a um inglês chamado Tim Berners-Lee. Foi este cara que no final da década de 1980 e inicio da de 1990 desenvolveu a World Wide Web. Entenda que a rede, a internet, já existia, mais foi esse cara que consegui estabelecer a primeira conexão com troca de página como conhecemos hoje.

Crie um site profissional em apenas 24 horas.

Como a internet funciona?

É importante entender como a internet funciona antes de criar a primeira página. Entenda então que a rede mundial de computadores, a internet, é uma ampla rede de computadores (como uma LAN house gigantesca) com milhões de computadores, smartfones, entre outras parafernálias tecnológicas conectadas a ela.

Para que exista a efetiva troca de dados entre as máquinas conectadas nessa rede, um padrão deve ser adotado. Ao padrão adotado damos o nome de protocolo, no caso da Web o protocolo é o HTTP (Hypertext Transfer Protocol), seria algo como protocolo de transferência de hipertexto.

Hipertexto, é como são chamados os texto com ligações lógicas (links) entre eles. Para estruturar este hipertexto, utiliza-se a linguagem de marcação chamada de HTML (HyperText Markup Language), e para dar um estilo próprio na apresentação dos hipertextos utiliza-se o CSS (Cascading Style Sheets).

O cliente é chamado de web browser ou navegador. Ele que é responsável por fazer a requisição a um web server ou servidor, que por sua vez, envia como resposta ao navegador os arquivos, que quando processados pelo navegador serão mostrados como uma bela página web.

Vamos resumir isso em um gráfico:

web_esquema
O navegador solicita uma determinada página, o servidor recebe esta requisição e retorna os arquivos necessários para que o navegador monte a página, então a página é montada e mostrada na tela do usuário.

HTML, CSS e JavaScript

As linguagens que estão presentes numa página web são estas três. Resumidamente, o HTML é a estrutura, o CSS é a estilização e o JavaScript manipula o HTML deixando ele mais dinámico.

HTML

O HTML é a linguagem de marcação de páginas web. Ela é baseada em elementos que compõem uma página web. Cada elemento são por, sua vez, formados pelo seu conteúdo encapsulado por tags de abertura e fechamento. As tags são palavras reservadas do HTML envolvidas no sinal de menor e maior. Exemplo:

<p>Sou um elemento</p>

O exemplo anterior é um elemento de paragrafo do HTML, formados pela tag de abertura(<p>), conteúdo (Sou um elemento) e tag de fechamento (</p>). Existem também elementos que podem conter outros elementos. Exemplo:

<body>
    <p>Sou um elemento</p>
<body>

Agora temos o elemento de corpo do HTML (), envolvendo o elemento de paragrafo.

A seguir vamos criar nossa primeira página web com o código a seguir:

<!doctype html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title>Título da página</title>
	</head>
	<body>
		<h1>Codinome Developer</h1>
		<p>
			<img src="logo.png" alt="Logo do Codinome Developer">
			<br>
			<button type="button" onclick="apresentar()">Apresente-se</button>
		</p>
	<body>
</html>

Para escrever sua primeira página, copie e cole o código acima em um editor de texto, como o Bloco de Notas do Windows, e salve com o nome de index.html.

Capturar0
Editando uma página html no bloco de notas do Windows
Capturar
Quando salvar a página com o nome index.html, não esqueça de mudar o campo da codificação para UTF-8.
Capturar3
Finalmente a página aparece no navegador desta forma.

A versão atual do HTML é o HTML5, e para ver uma lista com todas as tags que você vai precisar para criação de páginas acesse https://www.w3schools.com/html/default.asp.

CSS

O CSS é responsável por posicionar e estilizar os elementos de uma página web na tela do navegador. É o CSS a principal ferramenta para deixar uma página atrativa, pois ele define o posicionamento dos elementos que compõem o layout da página, e também define cores, fontes, espaçamentos, etc. Agora vamos pegar nosso arquivo index.html e dar algum estilo nele.

...
                <title>Título da página</title>
		<style>
			body {
				background-color: #FFEEBB
			}
			h1 {
				text-align: center;
				font-family: Verdana, Arial, sans-serif;
				color: #333333;
			}
			p {
				text-align: center;
			}
			img {
				width: 200px;
			}
		</style>
	</head>
...
Capturar4
Este é o resultado final quando alterando o arquivo index.html como descrito anteriormente.

JavaScript

Já falei sobre a linguagem de programação JavaScript em um artigo anterior (para ler clique aqui). O JavaScript é responsável por deixar a página web mais dinâmica, dando a possibilidade de executar ações após um clique do usuário por exemplo. Vamos acrescentar um botão no nosso index.html e dar a ele alguma ação.

...
  <p>
    <img src="logo.png" alt="Logo do Codinome Developer">
    <br>
    <button type="button" onclick="apresentar()">Apresente-se</button>
  </p>
  
    function apresentar() {
	var nome = window.prompt("Qual o seu nome?"); 
	window.alert("Olá "+nome+"!!!");
    }
  
<body>
...
Capturar5

Agora ao clicar no botão ele exibe uma caixa para que o usuário ente com o seu nome e após o clique no botão [Ok] é mostrada uma mensagem de boas vindas ao usuário.

Backend

Não é apenas de páginas web que um site é feito, você vai precisar trabalhar com alguma linguagem de programação para fazer o tratamento adequando dos dados e armazenar estes dados em um banco de dados. Estas linguagens podem ser Java, PHP ou até o JavaScript com NodeJS. Falei de JavaScript numa postagem anterior, veja:

Que fique claro apenas que HTML e CSS não são linguagens de programação, são respectivamente, linguagem de marcação para definir os elementos da página e linguagem de estilização para trabalhar o layout e design das páginas.

Conclusão

Se você esperava aprender a desenvolver um site em apenas um artigo de blog, sinto ter te decepcionado 😥

Para construir um site completo é necessário algum estudo e perseverança, fora o entendimento das linguagens, banco de dados e infraestrutura de servidor, é necessário saber um pouco de web design para obter um resultado profissional.

Outra alternativa é partir para ferramentas que te mantenham longe do código fonte, como WordPress por exemplo. Mas a sua personalização e implementação de novas funcionalidades vai ser bem limitado.

Código fonte do exemplo no github: https://github.com/CodDev2018/pagina_web_exemplo

Livros

2 comentários em “Como criar um site?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Este site utiliza o Akismet para reduzir spam. Saiba como seus dados em comentários são processados.