SdevLab – Tutorial | Edição de Arquivos HTML 2

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Edição de Arquivos HTML – parte 2

No primeiro tutorial que tratamos o tema formatação de arquivos, não nos preocuparmos com detalhes como cor, fonte, tamanho e posicionamento. Este é o objetivo deste tutorial.
Nele não serão exibidas todas as técnicas de formatação em detalhes, será passado somente o “caminho das pedras” e vai de cada um pesquisar mais e treinar para entender melhor.

Alinhamento

Nós podemos mudar a posição de um texto em relação à uma tabela, podemos mudar a posição do site inteiro em relação ao navegador, tudo vai depender da nossa necessidade. Outra vez vou lembrar que não se usa fazer estas alterações diretamente no código html, a recomendação é fazer todas as alterações envolvendo estilo e aparência do site no arquivo CSS, que futuramente estarei postando aqui também.

Basicamente podemos alinhar um elemento de página horizontalmente em 3 posições, direita, esquerda e centro. Para trabalhar com alinhamento, não utilizamos uma tag específica, e sim um atributo que algumas tags tem em comum, que é o align.
Assim como em outros atributos, o align deve vir seguido de algum acompanhamento, que é a posição que eu desejo mandar meu elemento, experimente copiar o trecho de código abaixo e colar em qualquer um dos exemplos que já fizemos até agora:

<p align="center">

Esta tag alinha o conteúdo do parágrafo centralizado na página, teste este atributo em linhas e colunas de uma tabela para ver o resultado, e tente também utilizar outras posições como left e right (note que o nome da posição deve ser escrito em inglês!).

Para trabalhar com alinhamento vertical o procedimento é bastante parecido, no lugar de center, left e right, usaremos as posições top (topo), bottom (baixo) e middle (meio), e o atributo que gerencia as posições não vai mais ser o align, e sim o valign. Segue outro trecho de exemplo:


<table>
   <tr>
      <td valign="top">
         <p align="center">
               Este parágrafo está centralizado horizontalmente, e alinhado 
               ao topo da coluna verticalmente, tente outras posições!
         </p>
      </td>
   </tr>
</table>

Formatação de textos

Falando um pouco agora sobre formatação de textos (para finalizar este assunto), vou mostrar como alterar o tamanho, tipo da fonte e a cor.  Como eu não vejo melhor maneira de explicar, vou direto ao exemplo depois dou os detalhes:


<p>
   <font color="#ffffff">
      <font size="2">
         <font face="Arial,Helvetica, sans-serif">
              Exemplo.
         </font>
      </font>
   </font>
<p>

Como vocês perceberam temos uma tag “mãe” que trada da formatação de textos em todos os aspectos, que é a tag font. Apartir dela podemos mudar cor, tamanho e estilo dos textos. O primeiro bloco, que trata da cor é bastante simples, basta colocar o atributo color e a cor seguindo o padrão hexadecimal.
O tamanho da fonte ja é quase auto-explicativo, basta colocar o atributo size seguido do tamanho desejado.
Para finalizar, para alterar a fonte usa-se o atributo face, e neste vale lembrar uma coisa, pode-se usar a fonte diretamente ou a família de fontes. No nosso trecho de exemplo eu usei uma família porque caso não tenha a fonte desejada (Arial) o navegador vai usar outra fonte daquela família (“Família das fontes sem-sefiras”). Uma outra observação importante é não utilizar fontes muito “exóticas” porque caso o navegador não possua esta fonte, sua página pode não sair da forma que você à projetou.

Um último comentário a respeito de formatação de textos é que no exemplo eu utilizei um bloco para cada coisa, mas podemos unir tudo utilizando a tag font somente uma vez, conforme o exemplo abaixo:

<p>
   <font color="#ffffff" size="2" face="Arial, Helvetica,sans-serif">
        Exemplo.
   </font>
<p>

Fundo da página (background)

Para finalizar o tutorial, vou agora mostrar como modificar o fundo das nossas páginas.
O fundo de uma página pode ser uma cor ou uma figura, e eu posso utilizar este conceito para modificar também as cores de fundo de tabelas (o atributo é o mesmo, a diferença vai na tag que eu estou utilizando). Vamos ao exemplo para facilitar:

<body bgcolor="#ffffff">

Esta tag possibilita eu trocar a cor do fundo da minha página, o esquema de cores é o mesmo que eu utilizo para as fontes e já foi explicado neste tutorial. Uma coisa que vale ser dita é que dentro de body eu posso definir também a cor do texto da minha página toda, bastando para isso fazer como no trecho abaixo:

<body bgcolor="#FFFFFF" text="#000000">

Isto facilita porque caso você queira uma cor diferente é melhor fazer desta maneira do que aplicar a cor em todos os textos que a página tiver.
Para fechar, o trecho abaixo mostra como colocar uma imagem de fundo na página:

<body bgimage="http://www.teste.com.br/imagem.jpg">

Note que para garantir que a imagem seja carregada corretamente eu utilizei todo o caminho de uma imagem que estava hospedada em uma página na internet. Caso a imagem que você vai utilizar esteja no mesmo diretório que a sua página está salva, basta utilizar o nome da imagem seguido de sua extensão.

Aqui fechamos a parte de formatação.

Até o próximo tutorial!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

2 comentários sobre “SdevLab – Tutorial | Edição de Arquivos HTML 2

  1. Pingback: SdevLab – Tutoriais | Link « Sanoj's devLab
  2. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

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

Logotipo do WordPress.com

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

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s