Slides

HTML Formatando Textos

Description
1. HTML – AULA 2Microlins - Web e Design – Capítulo 2Rondonópolis 14 de Maio de 2011Mayza de Oliveira@mayzaoliveiramayza.deoliveira@gmail.com 2. FORMATANDO TEXTO…
Categories
Published
of 33
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Related Documents
Share
Transcript
  • 1. HTML – AULA 2Microlins - Web e Design – Capítulo 2Rondonópolis 14 de Maio de 2011Mayza de Oliveira@mayzaoliveiramayza.deoliveira@gmail.com
  • 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. 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. 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. 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. 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. 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. 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. 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. FORMATANDO FRASESTAG <DFN></DFN> Utilizada para indicar a definição de uma palavra:<body> NASA: <dfn> National Aeronautics and Space Administration </dfn></body>
  • 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. FORMATANDO FRASESTAG <KBD></KBD> Utilizada para indicar uma entrada via teclado:<body> Para ler mensagens recebidas, digite <kbd> pine –i </kbd></body>
  • 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. 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. 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. 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. 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. 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. 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. ESTILOS FÍSICOSTAG <U></U> Utilizada para deixar o trecho escolhido sublinhado:<body> <u> Atenção </u>: não mexa nos fios!</body>
  • 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. 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. 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. 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. 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. FORMATANDO FONTES Para formatar fontes, alterando suas propriedades e aplicando atributos, devemos utilizar as tags: <font></font> <div></div>
  • 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. 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. 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. 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. 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. 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. 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>
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks