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.

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).

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:

• Planos de Hospedagem

Vejam os outros planos de hospedagem:

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).

• 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:

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

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

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

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.

• Baixar PDF: Apostila HTML + CSS Progressivo

Ler Tutorial

Box Model (Modelo de Caixas) em CSS - Margin, Padder e Border

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso Curso de CSS, vamos falar de um dos conceitos mais importantes sobre o CSS, o de Box Model (ou Modelo das Caixas).

Com a ideia apresentada neste artigo, entenderemos mais sobre layouts mais bonitos e profissionais, com colunas, espaçamentos, margens e outras ideias que fazem parte do Box Model em CSS.

• Fazer download da Apostila de HTML + CSS

Box Model em CSS - O Modelo de Caixas

Neste tutorial, não iremos estudar especificamente alguma propriedade do CSS ou nova tag, muito menos mostrar códigos e exemplos.

Vamos estudar algumas ideias e conceitos que nos farão entender melhor como funcionar o CSS, como ele age no HTML, e como ambos "vêem" cada elemento que inserimos no código HTML & CSS.

Box em inglês significa caixa, e é, basicamente, isso que cada elemento de um site é, é tudo uma espécie de caixa, no sentido de ser um retângulo, um bloco é a melhor definição.

Olhe nosso site, nossa Apostila HTML Progressivo.

Ele é todo composto por caixas, por retângulos ou blocos.

Veja, tem um bloco lá em cima, com o nome do site e uma frase logo abaixo.

Abaixo, colado, tem um bloco com os links de navegação, com as sessões e tutoriais.

Na esquerda tem um bloco com anúncio do AdSense, outros cursos, dicas de livros etc.

Na direita, há um bloco com os tutoriais mais visitados, e acima deste bloco há um pequeno bloco do G+, do Google Plus.

Dentro do nosso artigo, que é uma caixa, box ou bloco, há diversos blocos menores.

O título (uma tag <h1>) é um bloco retangular.

Cada parágrafo é uma caixa também, ela tem seu espaço para ocupar.

Uma figura com sua legenda também é um box, encaixado no restante do conteúdo.

O importante de se entender aqui é: as tags, elementos e tudo mais no HTML, quando são renderizados pelo navegador, o que vai ser visto são blocos, são boxes que vão se encaixando em cima, do lado, abaixo do outro, formando o layout de um site. Viu isso?

Elementos do Box Model - De que é feito o Modelo de Caixas

Ok, já sabemos e visualizamos o box model, e sabemos que o layout é a disposição e organização desses blocos, dessas caixas.

Agora vamos entrar em detalhe sobre cada um desses elementos, de cada caixa/box, e saber do que elas são compostas e como funcionam.

Cada caixa é composta por 4 elementos:

• conteúdo (content) do elemento, que pode ser um texto do parágrafo, imagem etc
• padding (acolchoamento ou enchimento, em inglês), fica imediatamente ao redor do conteúdo
• border (bordas) são linhas que delimitam o elemento, podendo aparecer em um ou mais direção (cima, baixo e nas laterais)
• margin (margens) é o espaçamento entre os elementos, ou seja, entre as caixas ou tags (boxes)

Veja a seguinte imagem para entender melhor o box model:

Fonte da Imagem: w3schools.com

Padding, Border e Margin: top, bottom, left e right

Ao longo dos próximos tutoriais de CSS, iremos estudar bastante sobre estas 3 propriedades padding, border e margin, pois eles não são importantes, seu uso é simplesmente  obrigatório e essencial na criação de qualquer de um layout profissional para qualquer site que você venha a fazer.

O flexível CSS no permite usar somente um, outro ou todos desses elementos.

E podemos formatar a região superior (top), inferior (bottom), esquerda (left) e direita (right) de cada um deles.

Veja na figura como é a ordem das caixas, que envolvem qualquer elemento de conteúdo:

Embora o CSS nos permita alterar somente uma ou outra caixa e seus valores, os que não forem claramente definidos nas folhas de estilo, serão renderizados de acordo com as propriedades padrão de cada navegador do usuário.

Ou seja, é uma prática importante e profissional definir e formatar o padding, border e margin, e os lados que compõe essas boxes em CSS (top, bottom, left e right).

Ler Tutorial

Estilos CSS em Listas: As Propriedades list-style-type e list-style-position (Tutorial)

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso Curso de CSS, vamos aprender como aplicar estilos em listas, tanto as listas ordenadas (<ol>) como as não ordenadas (<ul>), através das propriedades list-style-type (para alterarmos os tipos de listas) e da list-style-position (posição dos bullets e números).

Lembrando que caso deseje transformar seus estudos de HTML em uma profissão e começar a ganhar dinheiro criando sites, sugerimos que faça o seguinte curso e obtenha seu certificado de Webmaster (tudo online), para poder atuar na área:

• Apostila HTML Progressivo: Fazer download

CSS em Listas: A propriedade list-style-type

Já aprendemos, no tutorial de HTML sobre listas, a usar as tags <ul>, <ol> e a <li> (estude agora, se não tiver estudado ou não se lembrar).
Com elas, criamos listas simples (com os bullets), listas numeradas e ordenadas alfabeticamente.

Porém, como sempre, o HTML puro tem suas limitações, e o pior: elas variam de navegador para navegador, ou até mesmo dependendo do sistema operacional e dispositivo.

Mas, como tudo, o CSS nos permite definir e estilizar do jeito que mais nos convém, e não seria diferente para as listas, já que são elementos importantíssimos e extremamente usados na criação de sites.

A formatação das listas usando CSS é feita, basicamente, usando duas propriedades de estilo.
O "list-style-type" nos permite escolher estilos de listas que podem ser:

Lista não-ordenada: <ul>

Podemos usar três tipos de listas não ordenadas, com disco (disc), quadrado (square) e círculo (circle), que são os possíveis valores da propriedade list-style-type.
Vejamos a sintaxe:

list-style-type: disc

list-style-type: square

list-style-type: circle

Uma lista que apresenta três itens (<li>), cada um com o bullet em formato diferente, é feita usando o seguinte código de CSS e HTML:

<ul>
 <li style="list-style-type: disc">Lista com disc</li>
 <li style="list-style-type: square">Lista com square</li>
 <li style="list-style-type: circle">Lista com circle</li>
</ul>

Cujo efeito é:

• Lista com disc
• Lista com square
• Lista com disco

Lista ordenada: <ol>

Caso queiramos usar alguma tipo de lista que forneça uma ordem ou numeração, devemos usar a tag <ol>, onde os itens podem ser:

• decimal (decimal)
• decimal com zero na frente (decimal-leading-zero)
• numeração romana minúscula (lower-roman)
• numeração romana maiúscula (upper-roman)
• alfabeto minúsculo (lower-alpha)
• alfabeto maiúsculo (upper-alpha)

Vejamos um exemplo de código HTML & CSS que mostra todos os tipos de listas ordenadas:

<ol>
 <li style="list-style-type: decimal">Lista com decimal</li>
 <li style="list-style-type: decimal-leading-zero">Lista com decimal-leading-zero</li>
 <li style="list-style-type: lower-roman">Lista com lower-roman</li>
 <li style="list-style-type: upper-roman">Lista com upper-roman</li>
 <li style="list-style-type: lower-alpha">Lista com lower-alpha</li>
 <li style="list-style-type: upper-alpha">Lista com upper-alpha</li>
</ol>

O efeito é:

1. Lista com decimal
2. Lista com decimal-leading-zero
3. Lista com lower-roman
4. Lista com upper-roman
5. Lista com lower-alpha
6. Lista com upper-alpha

Posição da Lista em CSS: A propriedade list-style-position

O CSS é uma linguagem de estilo tão poderosa, que ela trabalha até mesmo em pequenos detalhes, nos possibilitando fazer tudo que quisermos com nossos sites.

Um belo exemplo disso é a propriedade list-style-position, que nos permite posicionar o local do bullet (círculo, quadrado ou disco) ou da numeração/ordem alfabética da lista.

Há dois locais (e valores) possíveis das lista:
inside - A lista faz parte do texto
outsite - A lista é separada, indentada, do texto

Vejamos um exemplo onde a lista faz parte do conteúdo, pois usam,os list-style-position: inside

<ol>
 <li style="list-style-position: inside">Os bullets dessa<br />lista estão
  <br />dentro do conteúdo<br />de texto
 </li>
 <li style="list-style-position: inside">Note como<br />a numeração da lista
  <br />faz parte do texto<br />
 </li>
</ol>

O efeito deste código HTML & CSS é:

1. Os bullets dessa
   lista estão
   dentro do conteúdo
   de texto
2. Note como
   a indentação da lista
   faz parte do texto, sem margem entre o bullet e o texto
   

Agora veja o que ocorre com os bullets caso usemos list-style-position: outside

<ul>
 <li style="list-style-position: outside">Os bullets dessa<br />lista estão
  <br />fora do conteúdo<br />de texto
 </li>
 <li style="list-style-position: outside">Note como<br />os bullets da lista
  <br />não faz parte do texto<br />
 </li>
</ul>

O resultado é:

• Os bullets dessa
  lista estão
  fora do conteúdo
  de texto
• Note como
  os bullets da lista
  não faz parte do texto
  

Neste ´ultimo caso, a numeração/bullets ficam à parte, em local diferente do texto.

Ler Tutorial

Como Indentar (Espaçar) a Primeira Linha em CSS - A Propridade text-indent

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste breve tutorial de nossa apostila de CSS, vamos iniciar nossos estudos sobre indentação , que são maneiras de se formatar um texto para ficar mais agradável e legível para o leitor.

Para introduzir tais assuntos, vamos começar mostrando e explicando a propriedade do CSS text-indent.

• Estude offline: Apostila HTML + CSS

Indentação, Espaçamento e Organização em HTML & CSS

Você já parou pra notar que raramente vai encontrar um texto que é colado na lateral de sua tela?

Sempre existe um espaçamento, uma região em branco entre a borda da tela, borda da lateral ou uma distância entre outro elemento até o início texto.

Também existe um espaçamento entre parágrafos (tags <p>) e entre linhas (<br>).
Embora esses espaços não alterem o conteúdo do texto, eles são de vital importância para qualquer site.

Na verdade, não só para sites.

Imagine você ler um livro sem parágrafos, sem quebra de linha, sem um espaçamento ou divisão.
Seria algo extremamente cansativo e enfadonho.

Além de não ser interessante esteticamente, uma página sem espaçamento e organização traz um agravante para os sites: o leitor vai abrir seu site, irá ver aquele amontoado de texto desordenado e vai rapidamente fechar seu site.

Se ele tiver achado seu site pelo Google, você vai ficar com uma imagem 'suja' no buscador, que percebeu que o leitor não gostou de seu site, e você vai acabar perdendo posições no rankeamento dos sistemas de buscas.

Logo, um texto bonito, agradável e organizado irá fazer com que os leitores gostem, compartilhem e retornem para seus sites.

Em nossos tutoriais de CSS iremos aprender como indentar a primeira linha, distância entre parágrafos, distância até as bordas superior, inferior e laterais, distância entre texto e imagem, e uma porção de outras propriedades que nos auxiliam, de maneira simples, a deixar nossos sites bem organizados.

Como Indentar a Linha - text-indent: px, em, pt

A propriedade text-indent, do CSS, serve para definirmos uma espaçamento antes da primeira palavra, na primeira linha de um bloco de texto.

A sintaxe em CSS é:

text-indent: n medida;

Onde "n" é um número e "medida" é a medida do tamanho, que pode ser em px (pixel), pt ou em.
Essas medidas foram melhor explicadas no tutorial sobre a propriedade font-size do CSS.

Para que a primeira palavra de todo parágrafo fique indentada de uma distância 5 pixels:

p{
  text-indent: 5 px;
}

Para que todas tags H1 fiquem indentadas em 2em:

h1{
  text-indent: 2em;
}

O valor padrão desse espaçamento é 0.
Assim, se colocar um valor positivo, iremos espaçar a primeira linha e caso usemos um valor negativo estaremos recuando o texto, veja o seguinte código:

<div style="text-indent: 5px;">Este texto usa indentação de 5 pixels</div>
<div style="text-indent: 0px;">Indentação de 0 pixels (espaçamento padrão)</div>
<div style="text-indent: -4px;">Este texto usa indentação de -4 pixels</div>

Tem o seguinte efeito:

Este texto usa indentação de 5 pixels

Indentação de 0 pixels (espaçamento padrão)

Este texto usa indentação de -4 pixels

Ler Tutorial

Como alinhar um texto em CSS - A propriedade text-align: left, right, center e justify - Tutorial

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de CSS de nosso curso, iremos aprender a usar uma propriedade bem simples, a text-align, mas extremamente útil e usada, que serve para alinharmos os textos de um site na posição esquerda (left), direita (right), centralizada (center) ou justificada (justify).

Ler Tutorial

Tutorial de CSS - Formatação de Textos

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial inicial desta seção sobre Formatação de Textos em CSS, vamos explicar melhor o que é formatar um texto, como isso pode ser feito, a importância e propriedades que iremos estudar em nossa apostila de CSS.

• Apostila HTML Progressivo: Fazer download

CSS , Textos e A Nova Web

A internet está se tornando cada dia mais visual e auditiva, é bem comum vermos vídeos, assistir programas de televisão, futebol ao vivo, conversar com amigos via hangout, ver um show de sua banda favorita, filmes, seriados e outras coisas mais interativas.

Outro fator que ajudou bastante esse crescimento das mídias foi o fato da banda de internet no Brasil ter aumentado consideravelmente e os preços terem caído. Hoje em dia, até pessoas mais humildes têm acesso as redes sociais através de celulares.

Porém, embora esta mudança esteja ocorrendo, uma coisa nunca mudou e nunca vai mudar: os textos.
Antigamente, na década de 90, imagem era luxo, praticamente toda a rede era texto.
Os textos ainda continuam, mas surgiram novas mídias.

Sempre existirá textos em sites de notícias, pessoas que preferem ler e escrever nas redes sociais, instruções para preencher um formulário, campos de login e senha, fóruns de discussão, livros em pdf, tutoriais de programação, códigos de programação etc etc.

Podemos ficar aqui durante longos parágrafos falando sobre a importância dos textos e do seu uso, mas seria perder tempo, basta olhar os sites que acessa e ver a importância deles.
E se eles estão presentes em sites, é necessário saber estilizar e formatar textos através de CSS.

CSS em Textos

Qual a última vez que leu um texto sem formatação?
Um site inteiro com a mesma cor, fonte, tamanho, sem parágrafos, divisões, tags de cabeçalhos ?

Imagine um livro inteiro, sem divisão de capítulo, espaçamento de parágrafos, com títulos e rodapé com fonte de mesmo tamanho do texto comum.
É atrativo, é interessante, te motiva a ler?

Ora, um site toda igual, sem divisões lógicas e de design, é igualmente desestimulante.
Usar cor vermelha para notícias, verde para a seção de esportes e laranja para a seção de fofoca não é estética, é design, é marketing. Atrai, chama atenção, faz as pessoas passarem mais tempo em seu site.

Estilizar textos não é estética, ter senso e conhecimentos em fontes, cores e tamanho.é obrigatório, não é à toa que iremos disponibilizar diversos tutoriais de CSS sobre textos.

Lembre-se que fizemos a formatação de textos em HTML, porém, somente com HTML você precisa estilizar cada texto, cada cabeçalho e cada região de seu site.
O que é algo quase que humanamente impossível de se fazer em grandes portais nos dias de hoje.

Mas como vimos na seção sobre Tutorial Básico de CSS, podemos selecionar, identificar e estilizar tags, divisões, identificadores e praticamente qualquer região de qualquer página de um site.
Com um simples código podemos definir a fonte de todas as páginas, a cor de cada título, como se comporta os links quando passamos o mouse e outras infinidades de estilos e efeitos, tudo graças ao CSS.

Com apenas uma folha de estilos você diz como será a seção de moda de seu site, a cor que cada título vai ter, a fonte, o que acontece com o link ao ser clicado, como é o menu lateral com as notícias de esporte, pode colocar uma fonte em itálico em todas as citações de famosos ou políticos e o que mais sua criatividade (e estudo em CSS) permitir.

Tutorial de CSS sobre Formatação de Textos

Agora que já está bem ciente da importância da formatação de textos com CSS, vamos mostrar o que iremos aprender com estes tutoriais sobre o assunto em nossa apostila de CSS.

É importante que você estude, entenda bem e pratique todos os exemplos e exercícios que iremos apresentar, pois estilização de textos com CSS é algo de extrema importância para qualquer pessoa que queria aprender a criar sites.

Dentre outros assuntos, iremos estudar sobre:

• Como aplicar itálico, negrito e sublinhado em textos
• Cores em fontes (color), em hexadecimal, RGB e por nome da cor
• Definir tamanho da fonte (font-size), em pixels, porcentagem, palavras (small, larg etc) e ems
• Família de fonte (font-family), como Arial, Times New Roman, Sans-serif, Helvetica etc
• Fontes monoespaçadas
• Fontes decoradas (text-decoration)
• Fontes maiúsculas e minúsculas (text-transform, font-variant)
• Alinhamento (text-align), margem (margin-) e indentação (text-indent)
• Espaçamento entre letras e palavras (word-spacing e letter-spacing)
• Espaçamento entre linhas de um texto (line-height)
• Listas (list-style-type, list-style-position e list-style-image)

Ou seja, temos bastante estudo pela frente, muitos tutoriais de CSS para aprender :)

Ler Tutorial

Seletores descendentes em CSS - Tutorial

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste Tutorial de CSS de nosso curso, iremos aprender um importante tipo de seletor em CSS, os seletores descendentes, que estão intimamente ligados com o conceito de tags aninhadas.

• Baixar PDF: Apostila HTML + CSS Progressivo

Tags descendentes em HTML

Bem no início de nosso curso de HTML, falamos sobre as tags aninhadas, e mostramos como funciona a hierarquia das tags em um documento .html, que possui tags dentro de outras tags.


Se você também estudou o tutorial no início do curso sobre indentação e hierarquia de tags, vai entender fácil o conceito de descendência, pois está intimamente relacionado com a forma que você dispõe as tags dentro de seu documento HTML.


Vejamos um exemplo de código HTML:

<html> 
 <head>
 <title>Tutorial de CSS: Tags descendentes</title>
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
 </head>
 
 <body>
 </body>

</html>

Note a hierarquia.
A tag principal é a <html>, diretamente dela temos duas tags, a <head> e a <body>.
Então a head e a body são tag descendentes da tag html.
Vamos chamar a tag html de tag pai, ou tag ancestral.

Agora vamos entrar na <head>.
É fácil ver que de dentro dela temos duas tags: <title> e a <link>.
Ou seja, as tags title e link são descendentes da tag head, pois estão dentro dela.
Chamemos a head de tag pai ou ancestral.

Por fim, se a title e a link estão dentro da tag head, também estão dentro da tag html.
Logo, <title> e <link> também são tags descendentes da tag <html>.

Bem óbvio e simples, não?
Essa hierarquia e descendência é ferramenta muito poderosa para aplicarmos estilos com CSS a determinadas tags descendentes, que é o que veremos de agora em diante neste tutorial de CSS.

Seletores Descendentes em CSS

Agora que vimos o que são tags descendentes em HTML, vamos aprender como tirar proveito dessa hierarquia de tags para conseguir aplicar estilos especificamente em algumas tags descendentes de outras.

Os seletores descendentes servem para aplicar estilo CSS somente em tags específicas que são descendentes de outras tags que vamos especificar também.

A sintaxe para o uso de descendent selectors em CSS é:

tag-Ancestral tag-Descendente {
   regras: CSS;
}

Ou seja, a "tag-Descendente" está dentro, aninhada, da "tag-Ancestral".
Você pode ter milhões de tags do tipo "tag-Descendente" em vários documentos .html, mas somente as que estiverem dentro da tag "tag-Ancestral" é que vão receber o estilo.

Exemplo de uso de Seletores Descendentes em CSS

Vamos criar um site básico, dividido em três partes: o cabeçalho (header), o conteúdo (content) e o rodapé (foot), através de divisões com a tag <div>.

Nosso código HTML fica:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de CSS - Seletores Descendentes</title>
 <meta name="description" content="Tutorial de CSS sobre descendent selectors">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

 <body>
 <div id="header">
  <h1>Este cabeçalho h1 está no cabeçalho</h1>
 </div>

 <div id="content">
  <h1>Este cabeçalho h1 está no conteúdo</h1>
 </div>

 <div id="foot">
  <h1>Este cabeçalho h1 está no rodapé</h1>
 </div>
 </body>

</html>

Note que existem três tags de cabeçalho H1.
Vamos colocar na cor vermelha as tags de cabeçalho H1, o código CSS é bem simples:

h1 {
   color: red;
}

Mas, e se quisermos que somente a tag H1 do conteúdo seja vermelho?
Poderíamos identificar ela, colocando um seletor do tipo ID ou CLASS, mas fazer isso em todas as páginas de um site daria muito trabalho.

A saída é usar seletores descendentes.
Note que o H1 que queremos estilizar com CSS está dentro da div do tipo "content", como usamos ID dentro desta div, temos que usar o # antes do "content". Veja como fica o código CSS:

#content h1 {
 color: red;
}

Ou seja, somente as tags h1 que estão dentro (descendentes) da #content é que ficarão da cor vermelha.

E se quisermos que todas as tags H1 sejam azuis, e somente a do conteúdo seja vermelha?
Ora, primeiro aplicamos a regra para deixar todos os H1 em azul, em seguida a regra CSS para deixar os H1 que estão dentro da div "content" em vermelho.
Nossa folha de estilos será estilo.css:

h1 {
 color: blue;
}

#content h1 {
 color: red;
}

Vamos para um outro exemplo.
Vamos escrever "Tutorial de CSS do HTML Progressivo" dentro de uma tab H2 e fora.
Em ambos casos, queremos que a sigla CSS esteja em itálico.
Agora o mais importante: somente a palavra CSS que está dentro da tag H2 deve ser da cor amarela.

O código HTML para este trecho de nosso site é:

<h2>Tutorial de <i>CSS </i> do HTML Progressivo</h2>
<p>Tutorial de <i>CSS </i> do HTML Progressivo</p>

E o código CSS de nossa folha de estilos se torna:

h2 i{
 color: yellow;
}

Assim, só a tag i que está dentro da tag  h2 é que vai ser estilizada.
Teste, rode e veja o resultado.

Assim, vemos que, através do uso de Seletores Descendentes em CSS, podemos atingir o elemento específico X que está dentro da tag Y, de modo que todos os elementos X que estão fora da tag Y não sejam afetados.

Ler Tutorial

Class selector - Criando seu próprio seletor de classe em CSS

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de CSS, iremos aprender um dos conceitos mais importantes e usados desta linguagem de estilo: o seletor class, que irá nos proporcionar uma incrível flexibilidade e poder sobre cada trecho de código de nossos sites.

Ler Tutorial

Seletores em CSS: Como definir onde o CSS vai atuar

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Como pudemos ver em nosso tutorial sobre Efeito Cascata em CSS, há diversas regras, prioridades e maneiras de se colocar um estilo em qualquer trecho de nosso código HTML.

Vamos agora entrar em mais detalhes no local, na tag ou propriedade, em que queremos estilizar, através de um estudo mais aprofundado sobre o seletor em CSS.

Ler Tutorial

Vídeo aula - Sintaxe e uso do CSS em sites

Neste tutorial de nosso curso de CSS vamos mostrar como é a sintaxe de escrita do CSS, usada para aplicar estilo aos elementos de nosso HTML.

Também iremos ver as diferentes maneiras na qual é possível aplicar CSS em nossos sites.

Ler Tutorial

O Efeito Cascata (Cascade) do CSS

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Neste tutorial de nosso curso de CSS explicaremos sobre um dos conceitos mais importantes e essenciais no estudo do Cascading Style Sheets, que é o efeito cascata.

Ler Tutorial

Vídeo aula de CSS - Introdução ao Cascading Style Sheets

Neste tutorial daremos início as dicas vídeo-aulas, mostrando as melhores aulas disponíveis gratuitamente no Youtube, que servirão de apoio ao material oferecido em nosso curso de CSS.

Ler Tutorial

Iniciando e criando um arquivo CSS - A tag < style > e o atributo type

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Agora que já explicamos o que é CSS e para que serve, você já deve estar convencido da importância e utilidade do CSS. É impossível ser um webmaster ou webdesigner profissional sem dominar completamente o uso dos estilos com CSS.

Neste tutorial de nossa apostila de CSS iremos iniciar nossos estudos, de fato, sobre o CSS, mostrando a tag <style> e o atributo type.

Ler Tutorial

CSS - O que é e para que serve

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Este é o tutorial inicial sobre CSS.
Se está aqui, partimos do pressuposto que você estudou todos os outros tutoriais sobre o 'basicão' HTML 4.

Embora muitas tags e ferramentas do antigo HTML já estejam em desuso, é de total importância que tenha-o estudado e criado, na mão, diversos sites em HTML, escrevendo cada letra de seu código-fonte.

Um estudo bem feito do antigo conceito de HTML fará você entender e evoluir com uma facilidade maior pelos caminhos do belo e útil CSS

Ler Tutorial

Frames em HTML - O que são e para que servem

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Nesta seção de nosso curso de HTML, iremos falar de uma das técnicas mais conhecidas e usadas por Webmasters quando o HTML 4.01 reinava na internet e atingiu seu ápice.

É um conceito muito conhecido e que foi bastante utilizado (e ainda é), por isso iremos dedicar alguns tutoriais em nossa apostila para o estudo dos frames.

Ler Tutorial

Como usar imagens em sites HTML de maneira correta

O HTML Progressivo agora faz parte do Programação Progressiva!

Este conteúdo foi atualizado e movido para o nosso novo endereço.

Redirecionando para: Clique aqui se não for redirecionado

Agora que já vimos como usar a tag img para exibir imagens, como mudar altura e largura de uma figura e até mostramos como alinhar imagens e textos, em nossa apostila de HTML, vamos fazer algumas considerações finais sobre o uso de imagens em nossos sites.

Vamos falar de regras básicas e muito importantes, que todos os Webmasters devem ter conhecimento.
Daremos algumas dicas de SEO (Search Engine Optimization) importantes, que fará você se beneficiar do uso de imagens para conseguir boas visitas e ficar bem visto pelo Google.

Ler Tutorial

Livro: Use a Cabeça - HTML com CSS e XHTML é bom ?

Neste artigo de nosso curso online HTML Progressivo, vamos analisar um dos livros mais famosos sobre HTML, XHTML e CSS, o famoso livro:
Use a Cabeça - HTML com CSS e XHTML

Vamos falar das principais informações sobre o livro, seus prós e contra, a quem é indicado bem como as principais informações que você irá aprender, caso estude por esse livro.






Adquira aqui seu livro Use a Cabeça - Html com Css e Xhtml

Ler Tutorial

Livro: Use a Cabeça - HTML com CSS e XHTML é bom ?

Neste artigo de nosso curso online HTML Progressivo, vamos analisar um dos livros mais famosos sobre HTML, XHTML e CSS, o famoso livro:
Use a Cabeça - HTML com CSS e XHTML

Vamos falar das principais informações sobre o livro, seus prós e contra, a quem é indicado bem como as principais informações que você irá aprender, caso estude por esse livro.






Adquira aqui seu livro Use a Cabeça - Html com Css e Xhtml

Ler Tutorial