HTML – AULA 2Microlins - Web e Design – Capítulo 2Rondonópolis 14 de Maio de 2011Mayza de Oliveira@mayzaoliveiramayza.deol...
FORMATANDO TEXTO Formatar o texto é alterar as suas propriedades    deixando-o  com   a aparência desejada. Podemos   fo...
FORMATANDO BLOCOS DE TEXTOTAG <PRE></PRE>A tag <pre></pre> mantém o texto da mesma maneira que foi digitado, exibindo-o n...
FORMATANDO BLOCOS DE TEXTOTAG <PRE></PRE><body>          <pre>          00000000000000000000000000000000000000000000      ...
FORMATANDO BLOCOS DE TEXTOTAG <BLOCKQUOTE></BLOCKQUOTE>   Usado para formatar citações longas:<body>     <blockquote>    ...
FORMATANDO BLOCOS DE TEXTOTAG <ADDRESS></ADDRESS>   Utilizada para endereços e para assinar o    documento:<body>     Env...
FORMATANDO BLOCOS DE TEXTOTAG <BLINK></BLINK>   Utilizada para fazer com que o texto apareça    piscando na tela:<body>  ...
FORMATANDO FRASESTAG <CITE></CITE>   Utilizada para citações curtas, títulos de livros,    filmes, etc:<body>     Assisti...
FORMATANDO FRASESTAG <CODE></CODE>   Utilizada para indicar trechos de códigos de    programas:<body>     <code>         ...
FORMATANDO FRASESTAG <DFN></DFN>   Utilizada para indicar a definição de uma palavra:<body>     NASA: <dfn> National Aero...
FORMATANDO FRASESTAG <EM></EM>   Utilizada para indicar ênfase a um trecho    específico:<body>     Não basta respirar, é...
FORMATANDO FRASESTAG <KBD></KBD>   Utilizada para indicar uma entrada via teclado:<body>     Para ler mensagens recebidas...
FORMATANDO FRASESTAG <SAMP></SAMP>   Utilizada para indicar uma sequência de    caracteres:<body>     O resultado do prim...
FORMATANDO FRASESTAG <STRONG></STRONG>   Utilizada para dar ênfase ao trecho escolhido:<body>     Antes de enviar um e-ma...
FORMATANDO FRASESTAG <VAR></VAR>   Utilizada para indicar variáveis ou valores que o    usuário deverá escrever:<body>   ...
ESTILOS FÍSICOS   A formatação física especifica diretamente os    estilos que se quer para o texto: Itálico Negrito S...
ESTILOS FÍSICOSTAG <B></B>   Utilizada para formatar o texto em negrito:<body>     <b>Dia das mães:</b> compre um     pre...
ESTILOS FÍSICOSTAG <I></I>   Utilizada para formatar o texto em itálico:<body>     Palavras em inglês, como     <i>webdes...
ESTILOS FÍSICOSTAG <TT></TT>   Utilizada para formatar o texto com espaçamento    uniforme:<body>     <tt> Sábado, 14 de ...
ESTILOS FÍSICOSTAG <U></U>   Utilizada para deixar o trecho escolhido sublinhado:<body>     <u> Atenção </u>: não mexa no...
ESTILOS FÍSICOSTAG <STRIKE></STRIKE>   Utilizada quando se quer aplicar um risco sobre o    trecho escolhido:<body>     A...
ESTILOS FÍSICOSTAG <BIG></BIG>   Utilizada para formatar o trecho escolhido com uma    fonte um pouco maior:<body>     Fo...
ESTILOS FÍSICOSTAG <SMALL></SMALL>   Utilizada para formatar o trecho escolhido com uma    fonte um pouco menos:<body>   ...
ESTILOS FÍSICOSTAG <SUB></SUB>   Utilizada para formatar um bloco de texto no estilo    subescrito:<body>     C <sub>3</s...
ESTILOS FÍSICOSTAG <SUP></SUP>   Utilizada para formatar um bloco de texto com    estilo sobre-escrito:<body>     Delta =...
FORMATANDO FONTES   Para formatar fontes, alterando suas propriedades    e aplicando atributos, devemos utilizar as tags:...
FORMATANDO FONTESTAG <FONT></FONT>   Utilizada para alterar a maioria das propriedades    das fontes. Todo o conteúdo que...
TAG <FONT></FONT>ATRIBUTOS color=“valor”: Ajusta a cor do texto; face=“nomeDaFonte1, nomeDaFonte2”: Especifica  o tipo f...
FORMATANDO FONTESTAG <DIV></DIV>   Utilizada para formatar a forma de alinhamento de    um bloco de texto. Ao utilizar es...
FORMATANDO FONTESTAG <DIV></DIV><body>     <div align=justify>              A www ou World Wide Web (Rede deAlcance Mundia...
CARACTERES ESPECIAIS   Alguns caracteres não são identificados pelo    HTML, por isso, devem ser inseridos códigos que   ...
EXERCÍCIO   Crie um novo documento HTML e implemente todas as tags aprendidas    na aula de hoje, bem como os atributos c...
EXERCÍCIO<div></div>                 <samp></samp><font></font>               <strong></strong>                           ...
Próximos SlideShares
Carregando em…5
×

HTML Formatando Textos

3.351 visualizações

Publicada em

Slide da 2ª Aula de HTML do curso de Web e Design na MIcrolins - Centro de formação Profissional

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.351
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
57
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML Formatando Textos

  1. 1. HTML – AULA 2Microlins - Web e Design – Capítulo 2Rondonópolis 14 de Maio de 2011Mayza de Oliveira@mayzaoliveiramayza.deoliveira@gmail.com
  2. 2. FORMATANDO TEXTO Formatar o texto é alterar as suas propriedades deixando-o com a aparência desejada. Podemos formatar de palavras a até blocos de texto utilizando algumas tags.
  3. 3. FORMATANDO BLOCOS DE TEXTOTAG <PRE></PRE>A tag <pre></pre> mantém o texto da mesma maneira que foi digitado, exibindo-o no mesmo formato no navegador:
  4. 4. FORMATANDO BLOCOS DE TEXTOTAG <PRE></PRE><body> <pre> 00000000000000000000000000000000000000000000 000000000000000000________000000000000000000 00000000000000________________00000000000000 0000000000________________________0000000000 00000__________________________________00000 00________________________________________00 00000__________________________________00000 0000000000________________________0000000000 00000000000000________________00000000000000 000000000000000000________000000000000000000 00000000000000000000000000000000000000000000 </pre></body>
  5. 5. FORMATANDO BLOCOS DE TEXTOTAG <BLOCKQUOTE></BLOCKQUOTE> Usado para formatar citações longas:<body> <blockquote> “A emoção mais antiga e mais forte da humanidade é o medo, e o mais antigo e mais forte de todos os medos é o medo do desconhecido.” (H.P. Lovecraft) </blockquote></body>
  6. 6. FORMATANDO BLOCOS DE TEXTOTAG <ADDRESS></ADDRESS> Utilizada para endereços e para assinar o documento:<body> Envie criticas e sugestões para: <address> mayza.deoliveira@gmail.com </address></body>
  7. 7. FORMATANDO BLOCOS DE TEXTOTAG <BLINK></BLINK> Utilizada para fazer com que o texto apareça piscando na tela:<body> <blink>Atenção</blink></body>
  8. 8. FORMATANDO FRASESTAG <CITE></CITE> Utilizada para citações curtas, títulos de livros, filmes, etc:<body> Assisti<cite>Matrix</cite>umas oito vezes!</body>
  9. 9. FORMATANDO FRASESTAG <CODE></CODE> Utilizada para indicar trechos de códigos de programas:<body> <code> for (x=0); cl &&(!feof(stdin)); x++ </code></body>
  10. 10. FORMATANDO FRASESTAG <DFN></DFN> Utilizada para indicar a definição de uma palavra:<body> NASA: <dfn> National Aeronautics and Space Administration </dfn></body>
  11. 11. FORMATANDO FRASESTAG <EM></EM> Utilizada para indicar ênfase a um trecho específico:<body> Não basta respirar, é <em> preciso </em> viver.</body>
  12. 12. FORMATANDO FRASESTAG <KBD></KBD> Utilizada para indicar uma entrada via teclado:<body> Para ler mensagens recebidas, digite <kbd> pine –i </kbd></body>
  13. 13. FORMATANDO FRASESTAG <SAMP></SAMP> Utilizada para indicar uma sequência de caracteres:<body> O resultado do primeiro applet é: <samp> Hello World! </samp></body>
  14. 14. FORMATANDO FRASESTAG <STRONG></STRONG> Utilizada para dar ênfase ao trecho escolhido:<body> Antes de enviar um e-mail, confira o campo <strong> “Assunto:”! </strong></body>
  15. 15. FORMATANDO FRASESTAG <VAR></VAR> Utilizada para indicar variáveis ou valores que o usuário deverá escrever:<body> No campo login, escreva <var> administrador </var></body>
  16. 16. ESTILOS FÍSICOS A formatação física especifica diretamente os estilos que se quer para o texto: Itálico Negrito Sublinhado Riscado Tamanho do texto
  17. 17. ESTILOS FÍSICOSTAG <B></B> Utilizada para formatar o texto em negrito:<body> <b>Dia das mães:</b> compre um presente para a melhor mãe do mundo!</body>
  18. 18. ESTILOS FÍSICOSTAG <I></I> Utilizada para formatar o texto em itálico:<body> Palavras em inglês, como <i>webdesigner</i>, fazem parte do nosso dia a dia.</body>
  19. 19. ESTILOS FÍSICOSTAG <TT></TT> Utilizada para formatar o texto com espaçamento uniforme:<body> <tt> Sábado, 14 de março de 2011</tt></body>
  20. 20. ESTILOS FÍSICOSTAG <U></U> Utilizada para deixar o trecho escolhido sublinhado:<body> <u> Atenção </u>: não mexa nos fios!</body>
  21. 21. ESTILOS FÍSICOSTAG <STRIKE></STRIKE> Utilizada quando se quer aplicar um risco sobre o trecho escolhido:<body> A resposta correta é: Sim <strike>Não</strike></body>
  22. 22. ESTILOS FÍSICOSTAG <BIG></BIG> Utilizada para formatar o trecho escolhido com uma fonte um pouco maior:<body> Fonte normal, <big> fonte maior </big>.</body>
  23. 23. ESTILOS FÍSICOSTAG <SMALL></SMALL> Utilizada para formatar o trecho escolhido com uma fonte um pouco menos:<body> Fonte normal, <small>Fonte menor</small>.</body>
  24. 24. ESTILOS FÍSICOSTAG <SUB></SUB> Utilizada para formatar um bloco de texto no estilo subescrito:<body> C <sub>3</sub> H <sub>6</sub> O</body>
  25. 25. ESTILOS FÍSICOSTAG <SUP></SUP> Utilizada para formatar um bloco de texto com estilo sobre-escrito:<body> Delta = b <sup>2</sup> -4ac</body>
  26. 26. FORMATANDO FONTES Para formatar fontes, alterando suas propriedades e aplicando atributos, devemos utilizar as tags: <font></font> <div></div>
  27. 27. FORMATANDO FONTESTAG <FONT></FONT> Utilizada para alterar a maioria das propriedades das fontes. Todo o conteúdo que estiver dentro dessa tag terá características definidas pelos atributos.<body> <font face=“Times New Roman”> Bom dia! </font></body>
  28. 28. TAG <FONT></FONT>ATRIBUTOS color=“valor”: Ajusta a cor do texto; face=“nomeDaFonte1, nomeDaFonte2”: Especifica o tipo fonte para o texto; size=“valor”: Especifica o tamanho da fonte;<font face=“Arial, Verdana, Tahoma” size=5color=“#000000”> Texto formatado por atributos</font>
  29. 29. FORMATANDO FONTESTAG <DIV></DIV> Utilizada para formatar a forma de alinhamento de um bloco de texto. Ao utilizar essa tag, todas as tags que estiverem dentro da tag <div> serão afetadas. Atibutos da tag <div></div> Align - alinha o texto na tela, com os valores: Left: esquerda; Right: direita; Center: centralizado; Justify: justificado.
  30. 30. FORMATANDO FONTESTAG <DIV></DIV><body> <div align=justify> A www ou World Wide Web (Rede deAlcance Mundial), também conhecida como Web, éum sistema de documentos de hipermídiainterligados e executados na internet. Para visualizara informação, pode-ser usar um programa decomputador chamado navegador para descarregarinformações de servidores Web e mostrá-los na telado usuário. </div></body>
  31. 31. CARACTERES ESPECIAIS Alguns caracteres não são identificados pelo HTML, por isso, devem ser inseridos códigos que serão interpretados pelo navegador, exibindo o caractere correspondente. Caractere Entidade < &lt; > &gt; & &amp;
  32. 32. EXERCÍCIO Crie um novo documento HTML e implemente todas as tags aprendidas na aula de hoje, bem como os atributos correspondentes. Este exercício tem como objetivo mostrar a utilização das tags juntas e como podem ser implementadas de forma encadeada (uma tag dentro da outra). Exemplo:<div aligh=justify> <blockquote> “A emoção mais antiga e mais forte da humanidade é o medo, e o mais antigo e mais forte de todos os medos é o medo do desconhecido.” (H.P. Lovecraft) </blockquote></div>
  33. 33. EXERCÍCIO<div></div> <samp></samp><font></font> <strong></strong> <var></var><pre></pre> <b></b><blockquote></blockquote> <i></i><address></address> <tt></tt><blink></blink> <u></u><cite></cite> <strike></strike> <big></big><code></code> <small></small><dfn></dfn> <sub></sub><em></em> <sup></sup><kbd></kbd>

×