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

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

  1. orkut.com.pt-br.facebook.com, sthyle.m.sonico.com, dreamiss.de.hi5.com,
    Acho maravilhoso poder alegrar aos olhos de meus amigos com belas mensagens.
    Gostaria muito de saber como por fotos minhas ou de amigos e escrever mensagem
    dentro ou fora das fotos com efeito colorido personalizado. Principalmente pra Orkut que nada aceitar.
    Quero que saibam que eu estou em depressão e agora brincando com minhas mensagens com essa aula que nos dão estou saindo da crise sem perceber.
    Portanto devo agradecê-los por isso também pois sou leiga na informática mas tenho
    formação superior mas mesmo assim tenho dificuldades e aqui consegui fazer uma
    montagem orientada por vocês, e foi digna de muitos elogios, fiquei muito feliz e aqui
    estou para agradecê-los.
    Irei divulgá-los em todos os locais que eu tenho acesso.
    Muito obrigada.
    Respeitosamente,

    Vera Lúcia Souza

    vlsm,santos

    • Oi Vera, tudo certo!
      Primeiro gostaria de agradecer ao incentivo, e queria lhe dizer que estou muito feliz em saber que meus posts serviram pra alguma coisa!
      Espero que você consiga resolver seus problemas o mais rápido possível!
      Sobre sua dúvida, para escrever mensagens dentro das fotos você precisa usar um programa de edição de imagens, agora pra colocar uma mensagem do lado da foto (ou em cima, embaixo) você pode usar as tags html de “formatação de texto”, tipo negrito, mudar a cor e tudo mais. Acredito que se você escrever uma página html simples e colar como post do orkut vai dar tudo certo porque o orkut interpreta html (se não me engano).

  2. Pingback: SdevLab – Tutoriais | Edição de Arquivos HTML 2 « Sanoj's devLab
  3. 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