Como criar um site: Conheça os passos essenciais

A internet pode ajudar você de diversas maneiras. Graças a ela você pode ter um blog pessoal, um canal de vídeos, uma loja virtual e um site para divulgar o seu negócio.  

É comum acreditar que o processo de criação de um site é demorado. Quem é leigo no tema imagina que aquela quantidade de textos, vídeos e informações leva tempo para ser organizada.

Felizmente a criação de um site não é mais uma missão apenas para quem domina técnicas de programação. Existem no mercado ferramentas que tornam esse trabalho acessível para qualquer pessoa.

Os passos para criar um site


Antes de ter um site para chamar de seu, é relevante estar a par de alguns conceitos básicos, como, por exemplo, domínio e hospedagem.

Lembre-se que criar um site não é apenas organizar textos, imagens e vídeos em uma página. O seu site deve ter um endereço e ficar armazenado em algum lugar.

E é aí que entram em cena o registro do domínio e a escolha da hospedagem de sites.

Os tipos de site


Um dos primeiros passos para a criação de um site é saber qual é o propósito dele e a qual público ele será destinado. É por isso que existem diferentes tipos de sites. São eles:

Institucionais


Eles são os mais indicados para a divulgação de uma empresa ou uma marca. Geralmente possuem poucas páginas e contam apenas com as informações básicas do seu negócio.

Portal

Apresentam um grande número de conteúdo em mídias variadas. Eles são frequentemente utilizados por grandes veículos de comunicação e devem contar com um avançado plano de hospedagem.

Loja virtual


Também chamado de e-commerce, possui o seu sistema projetado para possibilitar, de maneira rápida e segura, a venda de diferentes produtos.


Os tipos de hospedagem de sites


A hospedagem corresponde ao serviço que armazena os dados que constituem um site. Empresa como a Hostinger e a Weblink disponibilizam hospedagem de sites barata e confiável. .

Lembre-se que o tipo de hospedagem a ser escolhida vai depender do tipo do seu site, bem como dos seus objetivos com ele. Sites institucionais, por exemplo, são compatíveis com planos de hospedagem mais simples e com recursos básicos.

No entanto, sites como lojas virtuais e portais, que normalmente contam com elevado tráfego, demonstram bom desempenho com planos dotados de mais recursos técnicos.

Os tipos de hospedagem são:

Hospedagem compartilhada


Esse é o tipo de hospedagem mais comum e também o mais utilizado. Ao adquirir esse serviço, você compartilha o mesmo servidor com vários outros sites.

Ela é a mais utilizada porque geralmente é a que apresenta um preço mais acessível, bem como é adequada para vários tipos de sites e projetos.

VPS


É a sigla para Virtual Private Server, que em português significa  “Servidor Virtual Privado”.

Esse tipo de hospedagem de sites apresenta mais recursos que uma compartilhada, por isso ela é a mais indicada para sites de médio porte.

Servidor Dedicado


Como o próprio nome demonstra, esse é um servidor dedicado exclusivamente para o seu site. Algo bem diferente do que ocorre com a hospedagem compartilhada.

O Servidor Dedicado é o recomendado para sites grandes, tais como portais e lojas virtuais.


O seu endereço na internet


Se a hospedagem trata do lugar onde o seu site vai ser armazenado, o domínio é o endereço dele. O domínio é o nome do seu site e é por meio dele que as pessoas acessam o seu site nos navegadores.

As empresas de web hosting também disponibilizam em seus serviços registros de domínio. No caso da Weblink, dependendo do plano que você escolher, é possível ter um domínio gratuito.

Antes de criar um domínio para o seu site, é necessário saber se ele está disponível. Nesse caso, uma das maneiras para descobrir tal disponibilidade é utilizar ferramentas de pesquisa que algumas empresas de hospedagem de sites oferecem.

As dicas para escolher um domínio adequado para o seu site são:

Palavras-chaves


Escolher um domínio que contenha algum termo ou palavra referente ao seu negócio é uma alternativa interessante. Além disso, a sua marca ou o seu produto pode ser o nome do seu site.

Escrita de fácil memorização

Aqui vale a máxima do “menos é mais”. Muito é dito que um domínio deve ser criativo e diferente. Porém, o mais importante é ele ser facilmente lembrado.

Por isso, entre um nome criativo, diferenciado, e um nome simples, mas marcante, opte pela segunda opção.

Números


É bom evitá-los, pois eles podem causar confusão quando você diz o nome do seu site, deixando o usuário indeciso se é para ser escrito por extenso ou não.

Um bom domínio deve ser assimilado de maneira imediata.

Conclusão sobre criar um site


Os passos essenciais para a criação de um site passam pela escolha dos seus objetivos, bem como da hospedagem de sites mais adequada, do domínio e da plataforma ideal.

Portanto, se você não sabe por onde começar siga essas dicas, dessa maneira, o seu projeto na web tem todas as condições de prosperar.
Ler Tutorial

Hospedagem de Sites - Onde fazer? Qual a melhor?

Atendendo muitos pedidos, neste tutorial vamos esmiuçar o tema Hospedagem.

Vamos te explicar o que é, como funciona, para que serve, como escolher um serviço para hospedar seu site ou blog (Wordpress, por exemplo), bem como te dizer qual o melhor serviço de hospedagem, com um preço bem acessível.

Ao final, avaliamos as principais empresas que oferecem esse tipo de serviço, e recomendamos a que consideramos, de longe, a melhor custo benefício para quem quer criar, trabalhar e viver de um blog.

Onde fazer hospedagem do blog wordpress

Hospedagem de Sites - O que é?

Durante todo nosso Curso de HTML e CSS, guardamos todos nossos códigos em arquivos do tipo .html e .css, para folha de estilos. Em caso de código JavaScript, por exemplo, usamos arquivos de texto com a extensão .js .

Esses arquivos, bem como as imagens, estão armazenadas em nossos computadores.
Podemos dizer que elas estão hospedadas em nossa máquina, não é verdade?

Do mesmo jeito é todo e qualquer site da internet, como blogs Wordpress ou blogspots.
Sim, esse texto que você está lendo está hospedado em alguma máquina, no caso, nos servidores do Google.

Quando você acessa um site, sua máquina faz uma requisição, ou seja, pede arquivos HTML, de imagens, scripts e tudo mais, para algum servidor, ou seja, para um serviço de hospedagem.

Simples, não?

Hospedagem de Sites - Como escolher ?

Quando você abre algum site que você fez em seu computador, ele carrega de forma praticamente instantânea, não é?

E o motivo é simples: os dados estão em sua máquina, ali do lado, na memória.
Nem de internet precisa.

Porém, ao acessar um site externo, vai depender de uma série de fatores.
E calma, na próxima parte deste tutorial, já vamos te dar mastigado nossa melhor opinião sobre serviço de hospedagem, baseada nos quesitos abaixo:
  1. Velocidade: esse é o mais importante. A hospedagem tem que ter uma boa conexão, pra enviar rapidamente as páginas, imagens, vídeos e todo tipo de informação do seu site.
  2. Capacidade de armazenamento: Isso vai variar de acordo com o tamanho de seu blog ou site. Se for algo, estilo, um jornal local, com funcionários criando vários artigos por dia, ou um site de jogos online, aí vai precisar de bem mais memória. Caso seja para um site mais 'pessoal', como para viver de blogs, a indicação que fizemos é perfeita para este propósito (ela é ilimitada)
  3. Domínio: domínio é a URL, o endereço do site, nosso domínio é htmlprogressivo.net
  4. Uptime: é o tempo que o seu site fica no ar, essa taxa tem que ser alta. A do serviço que vamos indicar, é 99,9% do tempo garantido
  5. Suporte: não importa seu nível de conhecimento, sempre vamos precisar de supor, pra pedir ajuda, tirar uma dúvida ou mesmo pedir pra que eles resolvam algum pepino
  6. Custo benefício: tem que ser barata, caber no seu bolso, no seu projeto. De nada adianta você ganha mil reais com um site por mês, se vai pagar 700 de hospedagem, tem que ser uma bem em conta

Qual o melhor serviço de hospedagem ?

Após muito pesquisar, entrar em contato com grandes empresas (como Hostgator, King Host, Locaweb etc), em contato com amigos usuários, a escolher foi bem fácil e unânime sobre o melhor custo-benefício: a hospedagem da Hostinger.

Se não quiser mais ler, ou está apressado, querendo mergulhar de cara no seu projeto de viver de seu blog, pode contratar sem medo algum o serviço da Hostinger (clique aqui).

Melhor custo benefício de hospedagem para blog e Wordpress

Abaixo, vamos mostrar um pouco as vantagens que nos fizeram eleger e indicar este serviço de hospedagem, em relação aos outros.

Hostinger - Vantagens e Benefícios

  • Preço

Vamos ser honestos, de início, o mais importante é a grana, o valor que temos que pagar.
Isso foi o que mais me chamou atenção, de início.

Eles tem preços para hospedagem de todos os valores, e o mais bacana é que tem algum para seu perfil. Muitas outras empresas tinham taxas únicas ou parecidas (e altas), seja você dono de um pequeno blog ou grandioso site, paga o mesmo.

Exemplo:

Como hospedar um site bom e barato

  • Planos de Hospedagem

Vejam os outros planos de hospedagem:

Como hospedar um site grande de negócioHospedagem ilimitada

Quando começar a ter mais tráfego, sites, projetos...com um pouco a mais, você já vai migrar para esse serviço premium.

Caso queira se tornar uma empresa, ou vai fazer um site para uma grande companhia ou negócio, o plano Business é absurdamente em conta. Outas empresas que hospedam sites assim, chegam a cobrar milhares e milhares de reais.

Destrinchando e explicando um pouco melhor os planos:

Plano mais simples para um site:
  • 1 Website
  •  10 GB Espaço em Disco
  •  100 GB de Limite de Tráfego
  •  1 Banco de Dados MySQL
  •  1 Usuário FTP
  •  1 Conta de Email
  •  Criador de sites Simples de Usar
  •  Painel de Controle Potente
  •  Gerenciador de acesso Intuitivo

Plano Premium:
  • Número de Sites Ilimitado
  •  Espaço em Disco SSD Ilimitado
  •  Tráfego Ilimitado
  •  Bancos de Dados Ilimitados
  •  Usuários FTP Ilimitados
  •  Contas de Email Ilimitadas
  •  Criador de sites Simples de Usar
  •  Painel de controlePotente
  •  Gerenciador de Acessos intuitivo
  •  WordPress 2X Mais Rápido
  •  Domínio Grátis (no plano anual)
Plano Business, para empresas e/ou grandes sites e portais:
  • Número de Sites Ilimitado
  •  Espaço em Disco SSD Ilimitado
  •  Tráfego Ilimitado
  •  Bancos de Dados Ilimitados
  •  Usuários FTP Ilimitados
  •  Contas de Email Ilimitadas
  •  Criador de sites Simples de Usar
  •  Painel de controlePotente
  •  Gerenciador de Acessos intuitivo
  •  WordPress 4X Mais Rápido
  •  Domínio Grátis (no plano anual)
  •  Backups Diários
  •  Equipe de Sucesso do Cliente 24/7 
  • 2x Processamento e Memória
  • Certificado SSL grátis, garantindo segurança de sites e melhor SEO (no plano anual)

  • Largura de Banda

A largura do plano mais barato e simples, é  100 Gb, que é algo simplesmente perfeito para quem vai iniciar um blog.

Muito dificilmente vai precisar disso. E se precisar, já vai ter um tráfego tão grande que já vai estar ganhando dinheiro suficiente para partir para outro nível de hospedagem.

  • Wordpress

Falou em blog, viver de sites...falou em Wordpress.
Essa, na minha opinião, é um dos pontos mais fortes da Hostinger, ela é totalmente voltada para quem vai usar essa plataforma para trabalhar.

Já vem inclusa no cPanel (local onde vai configurar e usar sua hospedagem) várias opções para Wordpress, você literalmente instala, configura e bota no ar com poucos cliques.

Você vai usar tudo sem precisar mexer em código ou configurações avançadas, e se tiver problema, só falar com o suporte, tem sempre algum santo paciente online (enchi o saco de alguns com perguntas bem bobas, e responderam de boa - acho que são monges).

Qual o melhor serviço de hospedagem barata para Wordpress blog


  • Domínio e E-mail

A Hostinger oferece ela mesmo um serviço de domínio, com direito a um gratuito (baita economia e mão na roda).

Você também vai ter sua conta de e-mail. Isso pode soar estranho no começo, mas em vez de usar:
zezinho @ gmail.com

Você vai ter um
contato @ seusite.com.br

E olha...isso para uma impressão de profissionalismo, que vou te contar...já vi gente com medo de fazer negócio, comprar algo (como produtos de afiliados), porque o e-mail da pessoa era Yahoo, Hotmail, Gmail etc (nada contra, mas uma conta própria de e-mail passa muito mais segurança, se pretende fazer vendas em seu site, outro ponto positivo pra Hostinger).

  • Reclame Aqui

Antes de comprar qualquer produto ou serviço, busque a qualificação dele no Reclame Aqui.
Para quem não conhece, é um site de reclamações, como sugere o nome.

Pessoas vão lá quando tem problema com a empresa, e toda companhia tem seus problemas, não tem como fugir, o grande segredo é: eles resolvem o problema? Rápido?

A Hostinger recebeu um selo especial lá, o RA 1000, como umas das empresas de melhores reputações, pois responde praticamente todo mundo em um curto prazo de tempo e deixam os clientes satisfeitos. Esse pontou contou bastante para eleger eles como a melhor hospedagem de sites.

  • Migração gratuita do seu site

Tem seu site em outra empresa de hospedagem, ou mesmo num Blogger da vida?
Relaxa, deixa que a galera do Hostinger migram ele para você, de graça, em até 72h, sem estresse ou problema algum.

E migram da maneira correta, de modo que você não perde nenhuma visita, rankeamento no Google, etc.

  • SLL grátis

Atenção, protocolo SLL já virou fator de rankeamento do Google!

SLL é um protocolo voltado para segurança, os sites que tem possuem a URL: https://...
Os que não tem: http://

Ele é uma camada de segurança a mais e se tornou obrigatório. Mas muitas hospedagens por aí não fornecem esse serviço. A Hosstinger sim, e de graça, e eles instalam o protocolo pra você.

  • Número de clientes

Nas nossas pesquisas sobre a melhor hospedagem para sites, boa e barata, encontramos muuuuitos serviços pequenos, de pequenas empresas, alguns de até uma ou duas pessoas.

Ok, são bons. Mas é uma estrutura pequena, podem a qualquer hora parar de trabalhar com isso, entrar de férias ou outro problema qualquer.

A Hostinger já tem mais de 30 milhões de usuários pelo mundo. É uma empresa muito grande. Não é a maior, e isso é bom, pois justamente por isso oferece preços mais competitivos.


  • Teste Garantido e Gratuito


E pra finalizar, algo que achei bem ousado.

Leve seu site para os serviços de hospedagem da Hostinger, e se não gostar ou não achar que vale a pena o preço pago, você pode cancelar sem custo algum. Isso mesmo, vai, testa e se não gostar, cancela, tem seu dinheiro de volta e é simples assim.

Interessante, não? Só consigo pensar em uma coisa: tem que ter um serviço muito bom e muito barato de hospedagem de blogs, para oferecer isso.

Qual a melhor hospedagem para meu site ou blog ?

Depois de algumas semanas de pesquisas, enviando e-mail, lendo material, notas no Reclame Aqui, gente falando no Facebook etc, não tivemos dúvidas em eleger o melhor serviço de hospedagem, de acordo com o custo benefício.

Claro, tem melhores, como um servidor dedicado da Amazon, mas é muito caro. Para quem está começando, como é o foco dos estudantes aqui do HTML Progressivo, de longe a Hostinger é a empresa mais indicada:

Que hospedagem contratar, barata e boa



Ler Tutorial

10 Dicas Matadoras para Ganhar Dinheiro com Seu Blog

Como ganhar dinheiro com meu blogAtualmente muitas pessoas querem saber como é possível levantar uma renda no universo web e como ganhar dinheiro na Internet.

Uma das formas reais de ganhar dinheiro na internet é fazendo um blog.

Porém, antes de começar o seu projeto vale conhecer algumas dicas importantes que trouxemos neste post.


Ler Tutorial

Curso de Webmaster Online com Certificado - Como criar sites

Curso online de Webmaster com certificadoNeste artigo de nossa Apostila de HTML e CSS, vamos dar uma importante dica para quem deseja levar a sério nossos tutoriais de HTML e CSS e quer se tornar um Webmaster profissional, para trabalhar criando sites.

Falaremos, em detalhes, sobre o que é um webmaster, o que ele faz, onde, como trabalha, o que deve estudar, como entrar no mercado de trabalho e se trabalhar na criação de sites.



Ler Tutorial

Tutorial de CSS em Vídeo Aula - Estilização de Link

Neste Tutorial de CSS em Vídeo Aula, vamos mostrar dois vídeos que falam sobre a estilização de links através do CSS.

Veremos como alterar sublinhado, cores, plano de fundo, imagens linkadas etc.

Ler Tutorial

Curso de HTML Grátis, Online em Vídeo Aula

Neste tutorial, iremos dar uma ótima dica sobre um Curso de HTML, totalmente gratuito, online e feito através de vídeo aulas, do professor Gustavo Guanabara.


Quer trabalhar em CASA criando sites? Obtenha seu CERTIFICADO do Curso de HTML!


Ler Tutorial

CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas

Neste Tutorial de CSS de nosso curso, vamos aprender um pouco mais como estilizar links através do CSS.
Tutorial de CSS. Curso de HTML online grátis completo. Apostila para download
Botão criado estilizando links com CSS

Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do webmaster / webdesigner.




Fazer download da Apostila de HTML + CSS


Já estudamos diversas maneiras de estilizar links, e no tutorial passado estudamos sobre as propriedades link, hover, visited e active dos links.

Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.

E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.
Ler Tutorial

Links em CSS - As propriedades link, visited, hover e active

Neste tutorial de nosso Curso de HTML & CSS, vamos aprender a trabalhar exclusivamente em cima dos links, e veremos uma gama de possibilidades de estilização dos hiperlinks através do CSS (especificamente, através das propriedades link, visited, hover e active.



CSS em Links - Por que estilizar ?

Os dois principais pilares da internet são, sem dúvidas, a informação e a ligação desses dados.
De nada adianta um importante centro de pesquisas fazer estudos e descobertas, se não tiver como compartilhar essas informações com outras pessoas e instituições.
E quando falamos em compartilhar informações, estamos falando dos links.
Os links são os responsáveis por levar uma pessoa de um local da rede para outro.
Quando queremos mostrar algo para alguém, passamos o link.

Quando queremos mostrar pro leitor que ele pode se informar mais sobre um assunto em outra página, fazemos isso criando um link.
Ou seja, o link tem o efeito de ligar uma página na outra, e esse conceito é um dos mais importantes em termos de criação de sites.

Por links serem tão especiais, é natural que devamos destacar, mostrar para os leitores e deixar bem claro que aquilo é um link, é um elo, uma âncora que poderá levar ele para outro local, onde ele poderá obter mais informação.

E é isso que iremos fazer neste tutorial de CSS, que é destacar, tratar diferente os links.
Como sempre, com o CSS nós temos bem mais flexibilidade e recursos do que com o HTML puro.




Existem quatro tipos de comportamentos de links.
O primeiro é antes de de interagirmos com o link, quando não clicamos nem passamos o mouse e é a primeira vez que vemos aquele link.

O segundo comportamento é quando passamos o mouse em cima do link.

A terceira interação ocorre quando estamos clicando no link.

E por fim, a última possibilidade de interação com links é quando nos deparamos com um link cuja página de destino já foi visitada por nós.





A propriedade link do CSS

A primeira interação com os links é feita através do seletor pseudo-classe :link
Quando colocamos esse seletor em uma tag <a>, é porque vamos estilizar aquele link somente quando o usuário não tiver interagido com o link.

Assim, se quisermos que um link tenha a cor azul antes de ser clicado, fazemos:

a:link { 
        color: #00F; 
}

A propriedade hover do CSS

Caso usemos o seletor :hover na tag <a>, a estilização feita nesse elemento terá efeito quando passarmos o mouse em cima dele.

Por exemplo, para que o link que antes era azul, se torne verde ao pousarmos o mouse em cima, o código CSS é:

a:hover { 
        color: #0F0; 
}

A propriedade visited do CSS

Com certeza você já notou que ao entrar em alguns sites, os links que você já visitou a página de destino tinha um aspecto diferente.

Por exemplo, geralmente os links que você nunca visitou são azuis e os links que você já visitou são vermelhos.

Para definirmos a estilização de um link que já foi clicado, usamos a propriedade :visited
Assim, para o link visitado ser vermelho, usamos o código:

a:visited { 
        color: #F00; 
}

A propriedade active do CSS

Por fim, uma ferramenta pouco conhecida e usada é o seletor :active, que irá atuar na estilização DURANTE o ato de clicar.

Como geralmente esse ato é bem rápido, essa propriedade é pouquíssimo usada.
Para ver ela funcionando, clique no link e segure, e verá que a estilização do CSS para :active foi realmente definida.

Por exemplo, para que um link se torne da cor preta durante o ato de clicar, usamos o código CSS:

a:active { 
        color: #FFF; 
}
Ler Tutorial

Tutorial de HTML5 - Imagens e Figuras: < figure > e < figcaption >

Neste tutorial de Imagens, vamos aprender como inserir figuras, imagens e fotos usando o HTML5.
Vamos ver o que há de novo e traçar um paralelo sobre o uso de imagens no antigo HTML e no CSS.
Ler Tutorial

Imagens em CSS - Borda, Margem, Espaçamento, < img >, Alinhamento e Formatação

Neste Tutorial de CSS sobre Imagens, vamos mostrar como formatar figuras em nossos sites, criando bordas, alinhando com o texto e como inserir legendas (caption).
Ler Tutorial

Background em CSS - Como Alterar Plano de Fundo (Tutorial de CSS: background-image, color, repeat, position e attachment)

Neste tutorial de CSS, vamos falar da propriedade background e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.
Ler Tutorial

Vídeo Aula (Tutorial de CSS) - Fontes em CSS

Nesta excelente vídeo aula da Universidade XTI, vamos ver uma lição sobre a estilização de fontes em CSS, através da propriedade font e suas variações, para complementar os tutoriais que estudamos aqui em nosso Curso de HTML e CSS.

Ler Tutorial

Tutorial de CSS sobre Imagens e Figuras

Neste tutorial de CSS de nosso curso, vamos introduzir a seção sobre Imagens em CSS.

Embora já tenhamos falado no assunto em nosso Tutorial de HTML sobre Imagens, porém o que é possível de fazer em CSS, se comparado somente ao HTML, é até covardia comparar, o CSS simplesmente no permite fazermos que quisermos com as imagens, posição, alinhamento, bordas, espaçamentos e uma série de outras possibilidades.
Ler Tutorial

Propriedade float - Como Posicionar Elementos na Esquerda ou Direita (Tutorial de CSS)

Neste tutorial de CSS, vamos aprender uma das propriedades mais importantes e usadas na estilização de sites, o float.

Como ele vamos ter total controle sobre o posicionamento de todo e qualquer elemento de nossos sites, nos possibilitando a criação de layouts mais profissionais, usando o CSS, de uma maneira bem simples.
Ler Tutorial

As Propriedades width e height - Como Definir Altura e Largura (Tutorial de CSS)

Neste tutorial de CSS, iremos aprender duas das propriedades mais importantes para se criar um site: width e height, que servem para definir a largura e altura de qualquer elemento HTML.


Ler Tutorial

A Propriedade CSS display: none, inline-block, list-item e table

Neste tutorial de CSS, vamos falar de mais alguns valores e funções da propriedade display do CSS, como o none, inline-block, list-item dentre outros.


A Propriedade CSS - display

Em nosso artigo passado sobre a propriedade display do CSS - Elementos inline e block, introduzimos o conceito de display, que é uma propriedade do CSS que é responsável pela maneira como os elementos de seu site serão exibidos.
(display, em inglês é exibir, mostrar)

Aprendemos dois importantes conceitos, de inline e block, que são a maneira na qual os elementos se comportam, em sua forma padrão no HTML, onde é possível mudar essa maneira que eles agem com o CSS, especificamente com os códigos display: inline e display: block, em sua folha de estilos.

Basicamente, os elementos que tem display: block por padrão, são aqueles que são renderizados no browser como um bloco, com uma quebra (espaçamento) de linha acima e abaixo.
Exemplos destes tipos de elemento são as tags de cabeçalho H (h1, h2, h3, h4, h5 e h6), parágrafo <p> e a tag <div>.

Já os elementos do tipo display: inline, não possuem essa quebra, esse espaçamento que o isola do conteúdo que vem antes e depois, em seu site.
Exemplos desse tipo são as tags <b> de negrito, itálico <i> e a span.

Para mais detalhes, exemplos e códigos veja o tutorial sobre display inline e block, que indicamos no início deste tutorial.
Agora vamos estudar outras funções dessa propriedade display.



A propriedade CSS display: none

A função do display: none, no começo, é no mínimo estranha: ela simplesmente esconde o elemento em questão. Sim, dá pra ver pelo nome "none" (nada, nenhum) de display: none.

Experimente o seguinte código HTML, onde temos dois parágrafos.
O primeiro está ok, é um parágrafo normal.
Já o segundo parágrafo, colocamos um estilo CSS, através da propriedade display e do valor "none", então quando você testar e rodar seu documento HTML, vai ver apenas o primeiro parágrafo:

<p>Tutorial de CSS - Curso HTML Progressivo</p>
<p style="display: none;">Este parágrafo somente webmasters que sabem CSS vão ver :)</p>

Esse valor none da propriedade CSS display é muito útil quando aliada com algum efeito, principalmente de programação através de JavaScript.
Por exemplo, você passa o mouse em cima de um link ou menu, e aparece outra coisa, como uma imagem.

Antes a imagem era display: none, pois não aparecia.
Então você passa o mouse em alguma região, o JavaScript detecta e transforma ela em display: inline ou display: block e a dita cuja se torna visível.
Você tira o mouse de lá, e o elemento se torna display: nome, sumindo novamente.

Faz sentido agora o display none?
Usaremos ela, no futuro, em nosso curso de CSS, para criar belos efeitos só usando CSS.



Propriedade CSS display: inline-block

Como o próprio valor "inline-block" da propriedade display CSS pode sugerir, essa opção é uma espécia de mistura, um pouco de uma e outra característica da display:inline e display:block.

O que a propriedade e valor dizem é que iremos trabalhar com um bloco, mas um block inline.
Ou seja, nessa propriedade display do CSS, um típico bloco terá comportamento de inline.
Assim, ele vai ter algo antes ou depois (algum conteúdo ou elemento), e adjacente, na mesma linha.

É um bloco, um elemento block, mas que age como se fosse inline (um bloco ao lado de outros elementos, ele não tem aquela quebra de linha nem antes nem depois do bloco).

Vamos mostrar isso na prática, criando um bloco chamado 'meuBloco' através de uma div (que é display: block, por padrão):

<body>
Este texto vem antes do bloco 'meuBloco' 
<div class="meuBloco">
 Este é um bloco comum, com texto.<br />
 É uma div (block por default). <br />
 Porém, está como display: inline-block; <br />
 Logo, se comportará como inline. <br />
</div>
Este texto vem depois do bloco 'meuBloco'. <br>
Notaram como o bloco, que é uma < div > se comporta como se fosse inline?
 </body>

Agora vamos aplicar um estilo CSS a este bloco, colocando uma borda para identificarmos e um texto dentro:

.meuBloco{
 border: solid;
 display: inline-block;
}

Rode e veja o resultado:
Tutorial de CSS sobre a propriedade display


Propriedade CSS display: list-item

Ao usar a propriedade display com o valor "list-item" você está querendo dizer que aquele elemento em questão faz parte de uma lista, uma típica lista que estudamos em nossos tutoriais de Formatação de Textos em HTML e CSS.

Ou seja, não importa o elemento que você selecionou (uma tag div, span, uma tag de cabeçalho h1, uma imagem, link ou que quiser), irá se comportar como o item de uma lista.

Propriedade CSS display: table

Assim como podemos fazer qualquer elemento se tornar se comportar como o item de uma lista, através da propriedade CSS display: list-item, podemos fazer o mesmo com tabelas.

Usando a propriedade CSS display: table, o elemento vai se portar como uma <table>.

Propriedade CSS display com elementos de tabela

Se lembrar bem de nossos estudos de Tabelas em HTML, ela possui diversos elementos únicos, como os de coluna e linha.

Pois bem, como podemos fazer qualquer elemento se portar como um do tipo <table>, também podemos fazer ele se comportar como um dos membros de uma tabela.
Veja as possibilidades da propriedade display com valores de elementos de tabela:

  • display: caption
  • display: cell
  • display: column
  • display: row
  • display: table- column-group
  • display: table-header-group
  • display: table-footer-group
  • display: table-row-group

Iremos usar e falar sobre ela em nossos tutoriais sobre tabelas em CSS.
Ler Tutorial

A Propriedade display em CSS: Elementos inline e block - Tutorial

Em nossos tutoriais sobre o modelo das caixas (Box Model) em CSS pudemos ver como os elementos do layout de um site são caixas, ou blocos, que vão se encaixando, se acomodando e formando um site.

Mas, como tudo no CSS, é possível também alterar como essas caixas são exibidas em um site, e isso será feito através da propriedade display em CSS.



Propriedade CSS display - Como os elementos são exibidos

Que os elementos de um site são blocos, ou retângulos e vão se encaixando entre si através de configurações de HTML e CSS para formar um layout, estamos careca de saber.

Inclusive, ao estudar as propriedades marginborder e padding vimos que é possível fazer diversas mudanças nessas "caixas", como espaçá-las, colocar bordas com diversos tipos de efeitos e até aumentar seu espaçamento interno.

Mesmo com essas possibilidades, essas caixas continuam a ser caixas, blocos retângulos.
O que a propriedade CSS display faz é mudar como essas caixas vão se comportar.

Aliás, display, em inglês, significa exibir, e através da propriedade CSS display iremos selecionar como os elementos de um site serão exibidos e como vão se relacionar entre site.

No decorrer de nossos tutoriais de CSS, vimos basicamente dois tipos de propriedade CSS display, que foram os display block e display inline, que vamos explicar melhor agora.




O que são elementos em bloco (block) e em linha (inline) no CSS

Um importante tipo de caixa é o do tipo bloco (block box), exemplos desse tipo de display são os parágrafos <p>.
Lembre-se que quando usamos esta tag, ela cria um bloco, uma divisão, que separa o parágrafo do que estiver acima e do que estiver abaixo.

Como exemplo, vamos escrever "Tutorial de CSS", mas vamos colocar o "de" entre as tags <p> e </p>, o código HTML é:
Tutorial <p>de</p> CSS

Se testarem o resultado, verão que a palavra "de" foi isolada, tem um bloco só para ela, uma divisão abaixo e acima, além de tomar toda a largura (width) disponível.

O mesmo ocorre com a tag <div>, testem o seguinte código:
Tutorial <div>de</div> CSS

O resultado é o mesmo:
Tutorial
de
CSS

Um outro tipo comum de tipos de caixa, são as do tipo inline, ou em linha.
Se nos elementos do tipo block havia uma divisão acima, abaixo e pegava todo o espaço lateral, o mesmo não ocorre nos elementos inline, como o nome sugere, esses elementos ficam na mesma linha.

O exemplo mais clássico é de negrito <b>.
Veja, vamos colocar somente a palavra "de" entre as tags <b>:
Tutorial de CSS

O mesmo ocorre com a tag <i>, que dá o efeito de itálico:
Tutorial de CSS


As Propriedades CSS display: inline e display: block

Ok, vimos que algumas tags são do tipo block por padrão, como as de parágrafo e as divs.
Já outras, como as de negrito <b>, itálico <i> e a <span> são inline, pois são renderizadas na mesma linha.

Isso no HTML, no padrão.
Como sempre, o CSS nos dá a incrível flexibilidade e poder de mudar o que quisermos, e isso vai ficar ainda mais claro quando aprendermos sobre a propriedade display do CSS.

Basicamente, usando a propriedade display com o valor inline, estamos dizendo para o CSS exibir aquele elemento como se fosse inline, e caso usemos a propriedade display com o valor block, aquele elemento vai ser exibido como se fosse naturalmente block, ou seja, com uma divisão abaixo, acima e ocupando toda a largura (width).

Como usar a propriedade CSS display: inline

Por exemplo, as tags de cabeçalho H1, H2, H3 etc, são todas do tipo display: block, por padrão.
Vamos mudar isso?

No seu documento HTML teste o código:

<h1>Tutorial </h1>
<h2>de </h2>
<h3>CSS</h3>

Agora em sua folha de estilos experimente fazer:

h1, h2, h3{
 display: inline;
}

O resultado vai ser que estas tags ficarão uma ao lado da outra, onde antes, sem o uso de display inline, elas ficariam uma abaixo da outra.

Como usar a propriedade CSS display: block

E assim como fizemos na propriedade anterior, para transformar um elemento display block em display inline, o contrário é possível e análogo, bem simples.

Por exemplo, alguns defacers, hackers que costumam invadir sites para alterar sua aparência apenas, costumam 'bagunçar' os sites, deixando-os feios, e uma maneira bem simples de fazer isso é através da propriedade display.

Por exemplo, as tags de negrito <b> e itálico <i> são elementos display inline por padrão, afinal seria extremamente incômodo ter uma divisão, uma quebra de linha antes e depois de cada palavra em negrito, seria uma bagunça.

Por exemplo, o código HTML dessa frase: Tutorial de CSS
É:

<b>Tutorial</b> <i>de</i> <u>CSS</u>

Adicionando o simples código CSS em sua folha de estilos:

b, i, u {
 display: block;
}

Você já faria com que todas as palavras em negrito, itálico e sublinhadas se tornassem do tipo display block. Simples e poderoso, esse CSS, não?

Mais propriedades CSS display

Para nossos propósitos atuais, de nossos tutoriais básicos de CSS, entender o que é, como funciona e como usar o display: inline e o display: block é, por hora, suficiente.
Porém, a propriedade display vai muito mais além e nos fornecesse diversas opções no quesito de 'exibir' (display) algum elemento de nosso site.

No decorrer de nosso Curso de HTML e CSS iremos estudar as outras possibilidades existentes da propriedade display em detalhes, mas por hora iremos dar um pequeno resumo sobre o que é possível fazer com essa fantástica propriedade do CSS display.
Ler Tutorial

A propriedade margin do CSS - Tutorial sobre como usar margens

Neste artigo de nossa apostila de CSS, iremos falar sobre o último, e provavelmente mais usado, elemento que compõe a Box Model (Modelo das Caixas), que são as margens, através do estudo da propriedade margin.



Margem em CSS - A Propriedade margin

Se estiver acompanhando nosso curso de HTML e CSS desde o início, certamente sabe que esta não é a primeira vez que abordamos o tema margens, pois tratamos de margem em parágrafos, onde vimos como espaçar os parágrafos entre si, tanto acima como abaixo.

Na verdade, as margens são muito usadas, principalmente por conta da propriedade margin, que é extremamente flexível, e nos permite definir as margens tanto em cima, abaixo e nas laterais, e de qualquer coisa.

O anúncio ao lado, por exemplo, tem um código CSS que define uma margem, um espaçamento do bloco de publicidade deste texto, para que não fiquem colados.

Em nosso Tutorial de Imagens em CSS, também iremos aprender a manipular imagens em um site, para definir seu local, margens, distâncias e espaçamentos, tudo através do nosso querido e todo poderoso CSS.

Se você já estudou a propriedade padding, vai entender logo o funcionamento da margin, pois podemos espaçar tanto acima (margin-top), abaixo (margin-bottom), na esquerda (margin-left) e pela direita (margin-right).





Embora essas propriedade do modelo de caixas (Box Model) do CSS se pareçam, elas são bem diferentes, com funções bem específicas.

A diferença de padding e margin

A princípio, parece um pouco confusa as funções da margin e da padding, mas vamos explicar bem isso agora, pois são coisas diferente, e você de ter tais conceitos bem definidos em sua mente.
Após a explicação iremos mostrar na prática a diferença da margin e da padding.

O segredo é: a margem atua fora da borda.
É isso que diferencia da propriedade padding do CSS, que faz um espaçamento interno no elemento, entre a borda e o elemento, mas internamente.

Ou seja, ela é o espaçamento externo, do lado de fora das bordas, sendo muito usada para distanciar um elemento de outro, como uma figura de um texto, duas figuras entre si, um jogo em JavaScript do restante do conteúdo do site etc.

Assim, você tem um elemento, ou uma caixa (um bloco) em seu site.
Coloque outro bloco. Ok, agora para separar um elemento de outro, você usa as margens, vai distanciá-los, dar um espaçamento externo entre os blocos.

Exemplo de código CSS com padding e margin

Vamos criar um simples exemplo, passo a passo.
Primeiramente crie seu documento HTML e sua folha de estilos.

Nosso site HTML ficou assim:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de CSS - A Propriedade margin</title>
 <meta name="description" content="Como usar margens através da propriedade margin do CSS, em sites HTML.">
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

 <body>
 </body>

</html>

Note que o nome de nossa folha de estilos é estilo.css.
Agora vamos criar um simples parágrafo dentro da tag <body>:

<p>Curso de CSS Completo !</p>

Vamos aplicar uma borda nesse parágrafo, uma largura de 100px e colocar a cor branca nesse bloco.
O código para você aplicar na folha de estilos CSS é:

p{
 border: solid;
 width: 100px;
 background: white;
}

Veja o resultado.
Agora vamos adicionar um padding, de 10px em cada lado, apenas adicione o seguinte código CSS na sua folha, ao elemento p:
padding: 10px 10px 10px 10px;

Abra seu site e veja o resultado do padding, um espaçamento INTERNO, dentro da borda!
Vamos agora adicionar uma tag div, que vai englobar o parágrafo <p> da <body>, vamos nomear essa div com o atributo class e dar o nome de "bloco".

O código fica:

<div class="bloco">
 <p>Curso de CSS Completo !</p>
</div>

Volte na folha para estilizarmos essa div. que vai ter uma borda de cor azul, largura 125px e fundo amarelo. Ou seja, adicione o seguinte código em sua folha de estilos:

.bloco{
 border: solid blue;
 width: 125px;
 background: yellow;
}

margin-left, margin-right, margin-top, margin-bottom e margin

Agora vamos adicionar as margens!
Adicione cada um dos seguintes códigos, um por você e você vai ver qual a utilidade da propriedade margin:

margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;

Você pode substituir todas essas linhas por uma só, assim como fizemos com a padding:

margin: 10px 10px 10px 10px;

Maneiras de uso da propriedade margin

A propriedade de margem do CSS possui algumas funcionalidade bacanas, para adicionamos margem de várias maneiras simples, e uma delas nós mostramos no exemplo imediatamente acima, quando colocamos quatro valores de tamanho em sequência.

Quando fazemos isso:
margin: Apx Bpx Cpx Dpx;

O valor A define a margem superior, o valor B define a margem direita, o valor C define a margem inferior e o valor D a margem da esquerda.

Já se você colocar somente um valor: margin: Apx ;
Esse valor A será as margens em todas direçõas (top, right, down e left)

Se colocar dois valores: margin: Apx Bpx ;
O primeiro valor, o "A" será a margem inferior e superior (bottom e left) e o segundo valor "B" será o valor das margens laterais (right e left)

E por fim, é possível colocar três valores: margin: Apx Bpx Cpx;
Onde o A é para margem superior, o B para as margens laterais e o valor C é a margem inferior.

Lembrando que pixel (px) é só uma das medidas, você pode usar porcentagem, pt, em etc.

Veremos melhor como usara a propriedade margin e suas propeidades específicas, margin-top, margin-right, margin-bottom e margin-left, quando aprendermos a colocar mais blocos em nossos sites, como imagens, vídeos etc.
Ler Tutorial

Tutoriais de HTML e CSS