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!

SdevLab – Tutorial | Edição de Arquivos HTML

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

Dando continuidade aos tutoriais, vamos aprender a editar arquivos.html com algumas tags de formatação, que modificam as saídas dos elementos.

Nota: Já faz um tempo que a maioria dos profissionais web não utilizam tags de formatação no código, a prática correta e recomendada pelo W3C é utilizar um arquivo CSS para fazer as formatações que envolvem estilização e deixar o html só para ‘moldar’ a página, mas como a idéia destes tutoriais é explicar como usar html, não vamos nos prender neste paradigma por enquanto.

Para deixar o tutorial mais prático, vou postar as tags de formatação em 3 blocos (tags de formatação de texto, tags de saída e tags de definição, citação e aspas). Abaixo de cada bloco segue seu respectivo código de exemplo:

Tags de edição de texto

Tag	Descrição
<b>	Exibe o texto em negrito.
<big>	Exibe o texto “grande”, maior que o tamanho padrão.
<em>	Exibe o texto em itálico.
<i>	Exibe o texto em itálico.
<small>	Exibe o texto pequeno, menor que o tamanho padrão.
<strong>	Exibe o texto de forma quase idêntica ao negrito.
<sub>	Define um texto subescrito.
<sup>	Define um texto sobrescrito.
<ins>	Exibe o texto sublinhado. (A tag <u> também funciona)
<del>	Exibe o texto riscado.

Vale lembrar que cada uma das tags acima (assim como do restante do tutorial) deve vir acompanhada pelo seu par, o texto que eu quiser aplicar o efeito deve vir entre elas, por exemplo <b> Este texto em negrito </b>.
Outra coisa que pode ser citada é que algumas tags hoje não mais utilizadas, como <s>, <strike> e <u> tem efeitos quase idênticos (para não falar idênticos) a de outras tags citadas na tabela acima, se tiver curiosidade teste! Neste tutorial só vão ser abordadas as tags mais comuns, ele não contém a lista completa mas tem uma boa parte dela (no decorrer da série outras tags serão apresentadas).

Para finalizar o primeiro bloco, vamos ao exemplo. Abra o Notepad (Bloco de Notas) e cole o código abaixo:

<html>
   <head>
      <title>
           Teste 3
      </title>
   </head>
   <body>
      <p>
           <b>
                Este é um texto em negrito.
           </b>
      </p>
      <p>
           <big>
                Este é um texto "grande", mas diferente dos vistos com a tag 
                h1 por exemplo.
           </big>
      </p>
      <p>
           <em>
                Este é um texto efatizado.
           </em>
      </p>
      <p>
           <i>
                Este é um texto em itálico.
           </i>
      </p>
      <p>
           <small>
                Este é um texto "pequeno", o oposto da tag big.
           </small>
      </p>
      <p>
           <strong>
                Este texto foi reforçado com a tag <strong>, quase 
                idêntico ao negrito.
           </strong>
      </p>
      <p>
           <sub>
                Este é um texto subescrito.
           </sub>
      </p>
      <p>
           <sup>
                Este é um texto sobrescrito.
           </sup>
      </p>
      <p>
           <ins>
                Este é uma frase sublinhada.
           </ins>
      </p>
      <p>
           <del>
                Este é um texto riscado.
           </del>
      </p>
   </body>
</html>

Salve o arquivo como teste3.html e execute no navegador para ver o resultado. Faça novos testes tentando misturar os efeitos em um texto para descobrir novas combinações!

Tags de Saída (Computer Output)

Tag	Descrição
<code>	Define um trecho de código.
<kbd>	Define uma entrada de texto.
<samp>	Define um exemplo de código.
<tt>	Define um texto datilografado.
<var>	Define uma variável
<pre>	Define uma área de texto pré-formatada.

Estas tags são frequentemente utilizadas para exemplificar linhas de código e termos de computação em textos, artigos ou páginas html.  Segue o exemplo, que deve ser copiado e colado no Bloco de notas e salvo como teste4.html:

<html>
   <head>
      <title>
           Teste 4
      </title>
   </head>
   <body>
      <p>
           <code>
                Este é um exemplo de 'linha de código' utilizado para 
                exemplificar códigos em textos html.
           </code>
      </p>
      <p>
           <kbd>
                Esta é uma entrada de texto.
           </kbd>
      </p>
      <p>
           <samp>
                Isto é um exemplo de código de programa.
           </samp>
      </p>
      <p>
           <tt>
                Este é um exemplo de texto 'datilografado'.
           </tt>
      </p>
      <p>
           <var>
                Isto é um exemplo de variavel.
           </var>
      </p>
      <p>
           <pre>
                Este é um texto pré formatado, aqui
eu posso dar um enter
sem me preocupar com a tag br
           </pre>
      </p>
   </body>
</html>

Citações, aspas e tags de definição

Tag	Descrição
<abbr>	Define uma abreviação.
<acronym>	Define um acrônimo.
<address>	Define um endereço.
<blockquote>	Define um “parágrafo”.
<q>	Coloca o texto entre aspas.
<cite>	Define uma citação
<dfn>	Coloca o texto como uma definição.

As tags da tabela acima são utilizadas para dar destaque à textos. Para entender melhor cada uma delas copie o código abaixo e cole no Bloco de Notas, salve o arquivo como teste5.html:

<html>
   <head>
      <title>
           Teste 5
      </title>
   </head>
   <body>
      <p>
           <abbr>
                Isto é uma abreviação.
           </abbr>
      </p>
      <p>
           <acronym>
                Define um acrônimo.
           </acronym>
      </p>
      <p>
           <address>
                Rua exemplo. Esta tag define um endereço.
           </address>
      </p>
      <p>
           <blockquote>
               Da o efeito de uma 'apertada' na tecla tab do computador.
           </blockquote>
      </p>
      <p>
           <q>
                Da um destaque ao texto também, colocando ele entre aspas.
           </q>
      </p>
      <p>
           <cite>
                Este texto é uma citação.
           </cite>
      </p>
      <p>
           <dfn>
               Este texto é uma definição.
           </dfn>
      </p>
   </body>
</html>

OBS: Se você seguiu os exemplos, percebeu que algumas tags não tinham efeito no navegador. Isto acontece porque perderam seu uso durante o tempo e não foram incluídas em versões posteriores de html (as famosas tags deprecated). Um bom exercício seria entrar neste site de referência de tags do W3Schools e conferir quais são estas tags!

Com isto fechamos a parte básica de formatação de arquivos html. No próximo tutorial vamos aprender a modificar o estilo da fonte, seu tamanho, cor e o alinhamento do texto completando assim 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!

Fonte de pesquisa: w3schools.com/html