Website

Como Criar um Site

Um dos primeiros passos de como obter uma identidade digital é criando um site. Com os avanços da criação de sites, agora temos inúmeras maneiras de como criar um site, nós podemos usar sistemas de gerenciamento de conteúdos, um construtor de sites ou usando o método antigo criando a partir do zero. Neste tutorial, nós vamos falar das três possibilidades de como fazer um site.

Não se preocupe caso nunca experienciou como criar um site antes pois vamos passar por todos os processos juntos neste tutorial.

O que você precisa saber antes de criar um site

Você precisa saber que você não vai acertar na primeira. E nem na segunda. E talvez nem na terceira… e essa é a mágica da internet. Ela te permite testar infinitamente e ajustar as ferramentas e recursos para atender o seu objetivo. Mas tenha isso em mente, essa disposição em aprender e se reciclar a cada dia nesse mundo digital que morre e nasce a cada minuto com diversas funcionalidades.

Convencido e preparado pra lançar seu projeto online? Então vamos lá!

1 Defina o objetivo do seu projeto

É preciso definir o seu projeto online e o que você espera dele. Pra isso separamos algumas categorias.

  • Site  – Seu site pode ser institucional, para divulgar atividades, compromissos, missões e valores da sua empresa, bem como um site de notícias do seu bairro ou de prestação de serviços.
  • Blog – Blog de viagens, de gastronomia ou eventos regionais. Tenho certeza que você é fiel a pelo menos um blog, não é?
  • E-commerce – no português claro, estamos falando de loja virtual. Se você quer vender produtos, possibilitar transações financeiras online, é aqui que você se encaixa. E na internet você tem uma loja 24h, sem precisar de vendedores e gastos com estrutura física.

2 Crie um Sitegrama

como criar um sitegramaSitegrama é a estrutura do seu site, que vai te ajudar a visualizar como será o seu projeto. É importante para entender a dimensão que seu site pode atingir e enxergar novas possibilidades para crescimento no futuro.

Com isso definido, é hora de começar!

Etapa 1 – Escolhendo a Plataforma

Como disse antes, há três formas de como criar um site grátis passo a passo:

    1. Vamos pela CMS: O Sistema de gerenciamento de conteúdo e imagem como ferramentas avançadas que pode ser usado para construir e gerenciar sites e os conteúdos que os compõem. Quando se trata de CMSs, existem três líderes de mercado que são o WordPress, Drupal e Joomla! Todos os três são gratuitos e código aberto mas o WordPress é de longe, é a mais frequentemente CMS adotada. Todos os três sistemas foram desenvolvidos usando PHP, todos os três fazem uso de temas e templates para customização visual e todos os três são dirigidos pela própria comunidade. Mesmo que Joomla! e Drupal não possam competir com o WordPress quando se trata de usabilidade, simplicidade e manutenção, tamanho da comunidade e a disponibilidade de plugins e temas gratuitos etc. Para alguém com pouca experiência de como criar um site, o WordPress é a escolha mais óbvia.
    2. Utilizando Construtor de Sites: O mundo da automação chegou a um novo patamar quando os construtores de sites vieram a existência. No começo, as opções de customização independente da funcionalidade e design eram muito limitadas, mas agora há muito que se pode fazer com a função arrastar e soltar em um construtor de sites moderno. Comparado com CMSs e codificar sites do zero, Construtores de sites são muito rápidos e eficientes indiscutivelmente perfeito para pessoas com falta de experiência em desenvolvimento de sites e não querem passar muito tempo no processo de desenvolvimento.
    3. Como Criar um site do início: A terceira opção a sua disposição é para criar um site desde o zero. Este processo deve idealmente intrigar usuários que tenham no mínimo uma experiência básica de desenvolvimento. As tecnologias utilizadas neste tutorial de como se construir um site estável serão HTML e CSS.

Etapa 2 – Obtendo Hospedagem e Domínio

Para saber como criar um site, imagine um prédio, como qualquer construção, ela precisa ter um endereço pelo qual os usuários podem acessá-lo e também um lugar onde residir. Para conseguir publicar seu site na internet, você precisa de uma Hospedagem de sites, e para dar um endereço acessível ao seu site você precisa conseguir um domínio. Vamos dar uma olhada juntos, um por um:

Escolhendo uma Hospedagem de sites

Um bom provedor de serviços de hospedagem ajudará a garantir que seu site atenda os padrões desejados de qualidade, eficiência e disponibilidade. A Hostinger fornece hospedagens de sites a preços surpreendentemente baratos, mantendo os padrões acima mencionados (e muito mais!). Aqui estão algumas das muitas razões pelas quais você deve se juntar aos milhões de clientes que já escolheram a Hostinger:

  • Hostinger é otimizada para o WordPress (WP CLI, WordPress Caching etc).
  • Você obtém um construtor de sites muito fácil de usar que permite você arrastar e soltar conteúdo para criar um site perfeito.
  • Um site PHP funcionará com facilidade na hospedagem do Hostinger. É é muito favorável aos desenvolvedores. Você pode executar Laravel, CodeIgniter, integrar perfeitamente com seu GIT e obter acesso SSH aos seus servidores.
  • Certificado SSL também é provido pela Hostinger.
  • Um teste gratuito de 30 dias para permitir que você obtenha uma experiência prática de todos os serviços antes de fazer uma compra.
  • Se você optar pelo pacote de hospedagem Premium, você receberá um domínio grátis.
  • Você pode ter quantos endereços de email que quiser, sim eles tão ilimitados!
  • Caso esteja sofrendo algum problema ou tiver dúvidas, a nossa equipe de suporte estará disponível 24/7 para ajudá-lo.
  • Com apenas um clique, você pode instalar todos as CMSs famosas incluindo WordPress, Joomla!, Drupal, etc.

Escolhendo o Nome do domínio

Simplificando, domínio é o nome de seu Site. É o que você colocou de endereço do seu navegador e apertou enter para visitar. O Google.com é um domínio e Facebook.com também.

Escolher um bom nome de domínio também é fundamental pois é algo que seus usuários usarão para se referir ao seu site, se você não entender isso. Aqui estão algumas dicas do que você precisa saber antes de escolher um:

  • Mantenha o Nome Curto: ninguém quer visitar um EndereçoComNomeDeDominioGigantesco.com
  • Seja específico com o nome: seu domínio deve dar uma ideia do que sua empresa faz.
  • Escolha as extensões de domínio corretas: as extensões de domínio são as partes do domínio que vem após o ponto final (.). Um domínio .com é uma escolha universal, mas dependendo das suas necessidades ou da natureza de seu site, você pode ter de escolher uma opção diferente.
  • Como você se sente quando pronuncia o domínio? Seu nome de domínio deve ser fácil de pronunciar para que seja fácil abordar conversas

Assim como os serviços de hospedagem, a Hostinger também fornece serviços de registro de domínio. Você pode usar este verificador de nomes de domínio para escolher um nome de domínio.

Hostinger - como criar um site

O que é ainda melhor é que se você escolher optar por um plano de hospedagem Business ou Premium, você vai receber seu domínio gratuitamente, completamente de graça. Nós também vendemos os seguintes domínios .xyz a um preço inacreditável de R$3,99 ao ano!

Etapa 3 – Criando um Site

Então a base está pronta e agora a diversão começa. Agora que você sabe onde seu site será hospedado e qual o nome de domínio você vai usar, você pode começar a criar seu próprio site. Nós explicamos todos os três métodos (utilizando o WordPress, Construtor de sites e a partir do zero) abaixo escolha sua opção que mais lhe será útil e vamos em frente!

Opção 1 – Criando um Site WordPress:

Se você está lendo isso, então você escolheu o melhor caminho para construir seu site. Nós acreditamos que você fez a escolha certa! Vamos começar com os passos:

Instalando WordPress

Instalar o WordPress é tão simples que você não vai nem precisar clicar muitas vezes. O Auto instalador faz todo o trabalho pesado pra você; embora também tenhamos adicionado uma maneira manual de instalar o WordPress utilizando o FTP.

Instalando via Auto instalador
  1. Faça o Login em sua conta de Hospedagem do painel de controle, clique no ícone do instalador automático.
  2. No campo de pesquisa fornecido , digite WordPress. Quando você vêr a última versão no resultado da pesquisa, clique.
  3. Digite a URL ( você pode deixar em branco caso queira configurar o WordPress na Raiz do nome de domínio) Idioma, nome de usuário, senha, e mail, título do WordPress, WordPress Tagline (slogan do seu site) e pressione o botão instalar.

instalando wordpress com a hostinger

É Isso! O WordPress já está instalado.

É altamente improvável que o Auto-instalador não funcione em seu caso, mas se porventura não der, ou se gostaria de realizar a instalação manualmente, então você pode também instalar o WordPress manualmente usando o FTP para transferir os arquivos. Siga esses passos:

Instalando via FTP
  1. Baixe a versão mais recente do WordPress no site oficial e descompacte o arquivo.
  2. Utilize um cliente FTP para fazer o upload dos arquivos para sua conta de hospedagem. Uma escolha recomendada serão o FileZilla, mas você pode também usar qualquer outro cliente. Todos os detalhes FTP que você precisar serão encontrados na seção de acesso FTP em sua conta. Caso necessite ajuda com qualquer coisa relacionada a FTP, confira esse tutorial aqui.
  3. Uma vez feito isso, faça o login no painel de controle para criar o banco de dados MySQL que será utilizado para armazenar as informações que seu site precisa. No painel de controle de sua conta Hostinger, vá para seção de bancos de dados MySQL. Quando solicitado, insira os seguintes detalhes: Nome do banco de dados, usuário e senha do banco de dados depois clique em Criar e você está pronto!instalando via ftp4.Como um quarto passo, você precisa agora executar o assistente de instalação de 5 minutos. Todas as etapas anteriores são pré-requisitos desta etapa, portanto, certifique-se que todos os arquivos foram carregados para o banco de dados que foi criado antes de prosseguir. Você terá que executar os 6 passos seguintes para concluir a instalação:
    1. Selecione sua linguagem e clique em Continuar.
    2. Agora você deve informar os detalhes do banco de dados. Como já o criamos, clique no botão Continuar.
    3. Aqui você deve preencher às credenciais do banco de dados MySQL e o nome da hospedagem. Para verificar o nome de seu Host, clique na mesma seção de Banco de Dados MySQL que fica no painel de controle de sua conta Hostinger.
    4. Uma vez que tudo foi inserido clique no botão Enviar.
    5. O WordPress agora vai testar sua conexão com a base de dados se estiver tudo certo, você pode clicar em Executar o Instalador.
    6. Agora, entre com o Título de seu site, o nome de usuário, senha e email e clique em Instalar o WordPress.wordpress instalado via ftp

O WordPress agora está instalado em sua hospedagem e você podem fazer o login na área do Admin. Caso esteja procurando por mais maneiras de instalar o WordPress, você pode conferir nosso tutorial mais abrangente aqui.

Configurando o WordPress

Agora que colocamos a instalação na lista de tarefas feitas, podemos falar sobre a configuração do nosso recém-criado site WordPress. Vamos dar uma olhada  em algumas das configurações com as quais você deve começar:

Exclua a página padrão, publique e comente:
  • Um post padrão “Olá mundo” deve ser criado após a instalação. É uma boa ideia excluí-lo imediatamente. Para fazer isso, vá para Postagens -> Todas as postagens e a exclua.
  • Agora vá até Páginas -> Todas as páginas e exclua a página de exemplo.
  • Finalmente, vá para a seção Comentários e elimine o comentário padrão.
Configuração de Fuso Horário e idioma do site:
  • Vá para Configurações -> Geral  e configure sua zona horária e idioma.
Comentários WordPress

Todas as configurações relacionadas aos comentários pode ser encontradas em Configurações->Discussões no painel do administrador WordPress. Dependendo de suas necessidades você pode:

  • Permitir ou desautorizar as pessoas de publicar comentários sobre novos artigos.
  • Decida se deseja adotar comentários manualmente ou não.
  • Configure as notificações por e mail para comentários.
  • Mostrar Avatares ou não

Dica Pro: Você também pode desativar comentários para páginas ou postagens específicas. Para fazer isso, siga estas etapas:

  1. Clique em todas as postagens/ páginas da área wp-admin.
  2. Agora, clique em Editar rápido para a página pertinente.
  3. Em baixo das Tags, você verá uma opção que diz Permitir comentários. Basta desativá-lo e você será feito.
  4. Se deseja fechar comentários em uma publicação após um período de tempo específico.
Ajustando as configurações de mídia

Depois de terminar com esta etapa, o seu site WordPress terá melhor gerenciamento de imagem. Por padrão, depois de fazer o upload de uma imagem, serão criadas várias versões com diferentes tamanhos, que é uma prática muito ineficiente. Para mudar isso, siga estes passos:

  1. Vá para Configurações -> Mídia.
  2. No tamanho da miniatura, coloque 0 para largura e altura. Mantenha a opção “cortar miniatura para as dimensões exatas” desmarcada (Normalmente as miniaturas são proporcionais)
  3. No tamanho médio coloque 0 para ambos, largura e altura.
  4. Para tamanho grande, ajuste a largura e altura para 0.
  5. Verifique a opção “organizar meus uploads mensais e pastas baseadas em anos” e clique em Salvar alterações.
Desativando navegação do diretório:

Este é um dos ajuste mais técnicos que vai percorrer um bom caminho aprimorando a segurança de seu site. Para desativar a navegação do diretório, você terá que editar o arquivo .htaccess. Para isso siga esses passos:

  1. Conecte-se à sua conta de hospedagem usando qualquer cliente de arquivo (por exemplo FileZilla)
  2. Localize o arquivo .htaccess  e baixe-o.
  3. Abra e adicione a seguinte linha de código no final do arquivo:
  4. Clique em Salvar.
  5. Agora re upe o arquivo usando o cliente FTP.

Customizando site WordPress

A estética visual do seu site é tão importante quanto o próprio conteúdo. Os temas do WordPress permitem que você personalize o design e as perspectivas do seu site de acordo com suas necessidades. Por outro lado, os plugins do WordPress permitem que você torne seu site mais funcional. Examinaremos as duas opções, uma a uma.

Instalando temas WordPress

O WordPress tem uma grande comunidade contribuinte, de modo que o número de temas gratuitos e pagos disponíveis é gigantesco! A grande maioria dos temas gratuitos do WordPress podem ser encontrada aqui. Sites como ThemeForest são o lar de uma infinidade de temas gratuitos e pagos também. Se não podem escolher o tema certo para seu site, confira nossa lista dos 33 melhores temas gratuitos do WordPress.

Instalar temas no WordPress não é difícil. Siga os passos:

  1. Clique na seção Aparências na área do Administrador.
  2. Clique em Adicionar Novo Botão.
  3. Você pode pesquisar os temas disponíveis e selecionar aquele que você mais gostar, clique em instalar e em seguida ativar para mudar o tema recém-selecionado.

Se você deseja adicionar um tema novo que tenha comprado, siga os passos:

  1. Vá para Aparência e clique no botão Adicionar Novo.
  2. O arquivo do tema deve estar em forma impressa. Uma vez solicitado, você navega e faça o upload.
  3. Uma vez que o Upload for concluído, clique no botão Ativar e seu tema será exibido.

Se você quer um tutorial mais detalhado sobre a instalação de temas, você pode verificar este tutorial aqui

Customizando Temas WordPress

Se você conhece como editar arquivos de códigos, então você pode personalizar os temas instalados manualmente. Isso envolve modificação do código escrito dentro de um arquivo CSS (Folha de estilos em cascata) que é responsável por fazer cumprir o Layout de seu site. Para fazer isso, siga essas etapas:

  1. Vá para Aparência no painel de controle WP e então clique em Editor.
  2. Agora clique em Style.css e o editor com o arquivo deve abrir.
  3. Você pode fazer tantas edições quiser, dependendo das suas necessidades e desejos e depois salve os arquivos clicando no Atualizar Arquivo.

Você também pode customizar seus temas modificando o conteúdo do arquivo Functions.php. Ao fazer isso, você pode adicionar, excluir e modificar recursos, funcionalidades e aspectos de design em seu tema. O arquivo de funções do tema e adicionando o código PHP,  o tema pode ser personalizado. Você pode ler mais sobre functions.php aqui.

Instalando Plugins WorDpress

Os Plugins tornam a vida de um proprietário de site muito mais fácil, são muitos os benefícios no curto prazo e no longo prazo para o seu site. Pela simples instalação de um plugin, você pode adicionar funcionalidades ao seu site sem ter que escrever um código ou alterar os arquivos de configuração. Assim como os temas, existem milhares de plugins WordPress gratuitos e também pagos disponíveis. Aqui estão alguns que são os essenciais para seu site!

  • Wordfence Security: Este plugin manterá seu site seguro e longe do alcance de potencial hackers. Do firewall a defesa de ameaças de segurança, este plugin é completo. Você pode encontrar mais informações sobre ele aqui.
  • Google XML Sitemaps:O plugin oficial do Google para geração automática de mapas de sites XML irá ajudá-lo a melhorar otimização de mecanismo de pesquisa.
  • Yoast SEO: Um dos Plugins de SEO mais populares do WordPress, Yoast SEO tem mais de 5 milhões de instalações ativas. Seja meta-tag ou análise de página, com o Yoast SEO, você não terá mais problemas com correções de SEO.
  • Contact Form 7: O Contact Form 7 pode gerenciar vários formulários de contato, além de permitir a personalização dos formulários e do conteúdo de e-mails, de modo flexível.

Instalar o Plugin WorDpress é igualmente fácil a instalação de temas para seu site WP. Siga as etapas para instalar:

  1. Passe o mouse sobre Plugins no menu principal.
  2. Clique no botão Adicionar Novo.
    como instalar plugins wordpress
  3. No campo de busca que aparece, entre com o nome do plugin que deseja instalar.
  4. Clique em Instalar Agora.
  5. Quando a instalação terminar, clique em Ativar.
  6. Caso tenha comprado um plugin premium você não vai encontrá-lo no diretório oficial e terá que carregar manualmente os arquivos, para fazer isso, siga esses passos:
    1. Clique em Adicionar novo quando passar o mouse perto dos plugins
    2. Agora clique no botão Carregar plugin no topo.
    3. Clique em pesquisar e selecione o arquivo de plugin arquivado.
    4. Quando o upload estiver completo instale o plugin como antes e depois o ative.

Para um guia mais abrangente de como instalar plugins no WordPress, clique aqui.

Adicionando Conteúdo ao WordPress

No WordPress o conteúdo pode ser adicionado de duas formas, você pode criar uma nova postagem ou pode escolher uma nova página. A diferença entre os dois reside no fato de que os posts pode ser divididos em categorias e pode ser marcadas e ou arquivadas. Os posts normalmente são entradas de blogs ou artigos que são exibidos em ordem cronológica em seu site e pode ser referidos como conteúdo sensível ao tempo. Por outro lado as páginas estáticas como por exemplo a área de contatos e páginas como “entre em contato conosco”.

Adicionando uma nova postagem ou página no WordPress:

Para criar uma nova postagem em seu site WordPress, siga os passos:

  1. Passe o mouse sobre Posts ou  Páginas dependendo do que quer criar. E clique em Adicionar Novo.
  2. Agora forneça os detalhes de sua postagem/ página. O conteúdo da postagem virá na caixa abaixo. Você pode formatar seu texto ou adicionar imagens usando a barra de ferramentas disponível.primeiro post wordpress3. Você tem as seguintes meta-boxes disponíveis a sua disposição a direita na tela:
  • Publicar: Você pode salvar a postagem como um rascunho e visualizá-lo antes de publicá-lo, você pode alterar a visibilidade e o status de sua postagem e assim que você clicar em Publicar, sua postagem irá entrará online.
  • Tags: utilizando tags, você pode adicionar tags  a suas postagens. Mas esta opção só está disponível para postagens.
  • Imagem Destaque: Isso permite que adicione uma imagem
  • destacada à sua postagem. A posição da imagem podem variar de acordo com seu tema.
  • Categorias: Atribua sua postagem a uma categoria usando está seção. Se você deseja criar uma nova categoria, clique no botão + Adicionar Nova Categoria. Está opção também não está disponível para páginas.
Adicionando uma página estática

Quando você adiciona suas postagens ao site WordPress, por padrão, ele mostrará os mais recentes posts em ordem cronológica reversa na página inicial de seu site. Muitas vezes é preferível que tenha uma página frontal estática para que seu site receba seu visitante primeiro, em vez de uma lista de postagens logo que o site carrega. Criar uma página frontal estática é simples e fácil. Siga os passos:

  1. Faça o login na área do Administrador WordPress.
  2. Vá para Paginas-> Adicionar nova pagina.
  3. Entitule a primeira página como Home.
  4. É possível que seu tema atual permite que você altere a estética de sua página inicial; se assim for, escolha os modelos na caixa do painel de atributos da página.
  5. Você pode adicionar o conteúdo desejado na caixa de conteúdo e clicar em publicar
  6. Agora vá para Configurações -> Leitura.
  7. Escolha a opção Página estática e a partir do menu suspenso selecione Início.
  8. Clique em Salvar alterações.

Há muito mais do que você podem fazer com o WordPress e tentamos cobrir muitos tópicos fundamentais que devem ser suficientes para se familiarizar com o CMS e criar seu primeiro site. Para saber mais, visite o códice oficial do wordPress ou confira este abrangente tutorial WordPress.

Como criar um site com um Construtor de Sites

Outra maneira de como criar um site no Hostinger é usar o construtor de sites. É perfeito para as pessoas que não querem mexer com o código ou instalar o CMS.

O recurso Arrastar e soltar torna extremamente simples de usar – você pode colocar qualquer tipo de informação: texto, imagens, tabelas, galerias ou formulários em seu site facilmente.

O construtor de sites Hostinger vem com mais de 100 modelos impressionantes que você pode escolher e é um mecanismo de busca responsiva padrão. Isso significa que seu site ficará sempre com a melhor exibição em dispositivos móveis e desktop sem nenhum esforço extra. Siga as instruções abaixo para criar um site usando o construtor de sites.

Faça login no painel de controle do Hostinger. E depois, a partir do painel, role para a seção do site e clique em Website Builder.

Você receberá uma lista de modelos. Eles serão categorizados para sua facilidade no lado esquerdo.

criador de sites hostinger

Você pode clicar no botão Visualizar para ter uma ideia de como o site irá procurar pela Template ou clique em Selecionar para continuar.

Para sua ajudá. Um painel de Etapas irá aparecer no lado direito. Você pode seguir a maneira recomendada ou também podem pressionar o ponto de interrogação verde para ver a explicação do menu do construtor.

barra de controle hostinger

O modelo deve ter algum conteúdo falso padrão carregado no site. A primeira coisa que você deve fazer é mudá-lo para descrever o que seu site é sobre. Você pode fazer isso clicando em qualquer lugar onde o texto está escrito. Você também pode alterar a cor, formatação, ou tamanho do texto utilizando a barra de ferramentas de edição.

criador de sites zyro

Para adicionar um novo texto, você pode clicar na opção Texto no menu e arrastá-lo para qualquer lugar na tela.

Para adicionar uma nova imagem, você pode clicar em Imagem e em seguida, arraste na tela. Assim que você soltar o cursor uma janela será aberta, através da qual você vai poder escolher a imagem. Uma vez carregado você pode arrastá-la para se adequar aos seus desejos.

Você pode adicionar um novo menú utilizando a opção Menu da barra de ferramentas. Uma vez criado você pode modificar diferentes itens do menu.

Você também pode adicionar mapas ou integrações de redes sociais usando arrastar e soltar.

Com a seleção Avançada, você obtém opções como Skype, Musica, HTML, Calendários e AdSense etc…

A seção Comércio você encontrará ferramentas e os mais populares gateways de pagamento. Use os se desejar criar um site E-commerce.

O botão Auto-Layout no topo da página vai ajudar a aninhar todos os elementos da tela automaticamente e salva-lo da concepção manual. No entanto, caso não goste do resultado, sempre há como desfazer, clicando no botão Desfazer.

Quando você fizer todas as alterações e ajustes que queria, você pode publicar o site clicando no botão Publicar no canto superior esquerdo. Você também pode salvá-lo como rascunho clicando em Salvar Rascunho.

Como criar um Site do zero

Nesta seção, mostraremos como criar um site estático a partir do zero, usando  HTML e CSS. Um site estático é aquele que não muda independente do usuário que acessa e tem um conteúdo fixo. Pode ter suas vantagens e suas desvantagens; Vamos dar uma olhada em alguns deles:

Pros:

  • Os sites estáticos são rápidos.
  • Os sites estáticos não são vinculados a nenhum banco de dados.
  • Facilmente fácil de configurar em comparação com as suas contrapartes dinâmicas.

Contra:

  • Leva mais tempo para gerenciar e fazer upload de conteúdo
  • Não há como disponibilizar nenhum conteúdo dinamicamente para o usuário.

Também você vai precisar de um editor de código. Alguns dos melhores editores são:

  • Notepad++
  • TextWrangler
  • Sublime Text

Começando com a página HTML Básica

Hypertext Markup Language (HTML)é uma linguagem de marcação para criar páginas da web.

Abra o editor de código que você está usando e cole este no arquivo vazio.

Abra o arquivo salvo em seu navegador. Obviamente a página vai parecer à primeira vista, ridiculamente feia, nada parecido com o que você imagina para seu primeiro site. Mas isso é tudo que é preciso para criar uma página de site básica. Vamos continuar para melhorar isso.Agora, clique em salvar como em seu editor de código e salve o arquivo com uma extensão .html (por exemplo Site.html)

Adicionando CSS para melhorar aparência

O CSS em inglês significa Cascading Style Sheets ou Folha de estilos em cascata, que permite você, criar seu site e implementar estilos consistentes ao longo dele. Com isso, você pode utilizar fontes para áreas específicas de seu site, alterar cores para algumas seções ou alterar um plano de fundo de seu site etc…

Para criar uma folha de estilos, abra um novo arquivo de texto e guarde-o com o nome Style.css. Ele deve ser salvo no mesmo diretório que possui o arquivo HTML de sua página principal Para fazer com que o arquivo de índice leia as sugestões de design do arquivo CSS, estabeleça um link entre os dois adicionando está linha dentro da tag <head>. assim:

Até agora, tudo que fizemos foi vincular o arquivo CSS e o arquivo HTML. vamos agora dividir nosso site em 5 sessões e duas colunas usando o CSS. Insira o seguinte código em seu arquivo CSS:

Os valores de fundo podem controlar a cor das diferentes seções e você pode alterá-las de acordo com seus próprios desejos. Então, temos cinco seções na página: container, cabeçalho, barra lateral, corpo e rodapé. Os nomes das seções indicam suas funções, a área do contêiner cobre basicamente todo o site e sua largura pode ser alterada para 1000px se desejado, mas você deve garantir que você altere as dimensões das outras seções para fazer tudo alinhado. Você pode configurar a largura, as alturas e as cores de todas as seções de acordo com seus próprios desejos e, uma vez feito, atualize o arquivo da sua página inicial para isso:

Aqui, como pode ver, nós usamos a tag <div> para dividir nosso site em duas sessões diferentes e definindo a ID, nós também estabelecemos considerações de design específicas para eles, que serão lidas a partir do arquivo CSS.

criando site com a hostinger

Há muito mais que você pode conseguir utilizando apenas o CSS e o HTML.

Brincando com as Fontes

Se você não adicionar nenhuma especificação no arquivo CSS ou no HTML, você verá um texto exibido no tipo de fonte padrão de seu computador, normalmente serão Times New Roman. Usando o CSS no entanto, você pode mudar os estilos de fontes para estarem de acordo com o que deseja para o site.

Quando você adiciona a linha de código acima em sua folha de estilo (após a sessão #conteúdo), ele fará com que o texto do parágrafo use a fonte Open-Sans e o tamanho do texto será mantido em 18px.

Adicionando hyperlinks

Ao fazer um site, as vezes você precisa se conectar a um site externo ou a uma parte diferente do seu próprio site. Este link que, quando clicado, leva você a uma seção diferente em seu próprio site ou a um externo, é chamado de hiperlink. O “href” especifica o destino do link enquanto a tag <a> define os links. Não se preocupe, compartilharemos um exemplo:

Adicione esta tag: <a href=”https://www.google.com”> Ir para o Google </a> para o corpo do seu site, aparecerá como Ir para o Google e quando um visitante clicar nela, eles serão levados para a página inicial do Google.

Adicionando imagens

Com o HTML, é tão fácil quanto usar uma etiqueta e fazer referência a sua imagem. A marca <img> permite que você adicione imagens. Veja como usá-la:

Dentro da vírgula seguinte a src, você vai adicionar a localização da imagem. Neste caso, a imagem deve estar no mesmo diretório do seu arquivo índice. A linha que segue alt só será exibida no navegador se a imagem não puder ser carregada.

Criando Tabelas

Organizar informações muitas vezes se torna parte do design ou requisito funcional e no HTML, você também pode fazer isso utilizando tabelas. Usando a tag <table>. Para especificar um cabeçalho na tabela você usa a tag <th> (table Header) e para uma linha, você deve usar a tag <tr> (table row) para os dados do quadro, utilize a tag <td>.

Após aplicar o código acima, seu site deve ficar assim:

criar site - resultado final

Quando você está trabalhando com HTML e CSS, as possibilidades de jogar e tornar o seu site mais funcional e mais agradável de forma estética são infinitas. Nós apenas abordamos alguns dos conceitos mais fundamentais que você deveria estar ciente para começar e criar seu próprio site a partir do zero. A Internet está cheia de ótimos tutoriais e ferramentas interativas que ajudarão a aprender a codificar:

Conclusão final

Neste tutorial, pretendemos ajudar os iniciantes a colocar as mãos em uma tela com construtores de sites e mostrar como criar um site usando o WordPress ou mesmo do zero. Seja qual for o caminho que você tenha escolhido para criar seu site, esperamos que você tenha entendido direito e desejar-lhe a melhor sorte para executá-lo e mantê-lo.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$5
56
/mês

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!