SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
AG8 Informática 
3ª PARTE 
38 
CAPÍTULO 06 
Este capítulo abrangerá : 
1. Tags de formatação de texto lógicas e físicas 
2. Texto pré-formatado 
3. Endereços, citações e comentários
AG8 Informática 
TAGS DE FORMATAÇÃO 
Assim como em um editor de texto, em HTML você poderá utilizar 
efeitos em seu texto. Como já percebeu os comandos, tags, trabalham em 
contêiner. 
Alguns destes comandos já foram introduzidos no capítulo anterior. Os 
39 
principais comandos de estilo: 
TAG SINTAXE FUNÇÃO 
STRONG <strong>texto</strong> Similar ao negrito 
TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento 
regular 
BIG <big>texto</big> Aumenta a fonte e aplica negrito 
SMALL <small>texto</small> Reduz e altera a fonte 
SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo 
SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo 
BLINK <blink>texto</blink> Faz com que o texto pisque 
NEGRITO <b>texto</b> Aplica o estilo negrito 
ITÁLICO <I>texto</I> Aplica o estilo itálico 
SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns 
browsers esta tag não funciona) 
Estes são os mais utilizados, porém há outros que merecem atenção. 
Para alterar a formatação de um texto em HTML existem dois tipos de 
estilos que devem ser observados: o estilo lógico e o estilo físico.
AG8 Informática 
40 
1. ESTILO LÓGICO 
As tags deste tipo indicam como o texto destacado deve ser utilizado e 
não como será apresentado. Este estilo não indica como o texto será 
formatado e sim como será utilizado no documento. Não é possível garantir 
que um texto destacado que utilize tags deste tipo sempre será apresentado 
em negrito ou itálico, por exemplo. Dependerá do browser. 
Algumas tags de estilo lógico utilizadas em HTML padrão: 
<EM> 
Indica que os caracteres deverão ser enfatizados de alguma forma. De 
forma diferente do restante do texto. Geralmente em itálico 
<STRONG> 
Esta tag enfatiza ainda mais que a anterior. Em negrito. 
<CODE> 
Esta tag indica um código de exemplo a ser exposto. 
<SAMP> 
Esta tag indica texto de exemplo. Quando você quer dar um exemplo 
de endereço para a Internet sem criar link.
AG8 Informática 
41 
2. ESTILOS FÍSICOS 
Este estilo de tag realmente altera a formatação do texto, no estilo 
anterior você não possui garantia que o texto irá ser visualizado da forma que 
planejou. Neste estilo ele será visualizado da forma que atribuir as tags a ele. 
Algumas tags de estilo físico para HTML padrão: 
<B> </B> coloca o texto em negrito 
<I> </I> coloca o texto em itálico 
<TT> </TT> fonte de máquina de escrever com espaçamento 
uniforme. 
<u> </u> coloca o texto sublinhado 
<S> </S> coloca o texto tachado 
<BIG> </BIG> o texto irá aparecer maior que o restante ao redor 
<SMALL> </SMALL> o texto irá aparecer menor que o restante ao redor 
<SUB> </SUB> coloca o texto subscrito 
<SUP> </SUP> coloca o texto sobrescrito
AG8 Informática 
Optando por utilizar tags do estilo físico, caso o navegador não 
reconheça uma das tags ele a irá substituir por outra equivalente ou ignorará a 
formatação. 
42 
3. TEXTO PRÉ-FORMATADO 
O texto de uma arquivo em HTML é formatado através das tags. Mas 
você possui a opção da tag <PRE> </PRE> para estabelecer uma formatação 
através de um editor de texto e que esta formatação permaneça na sua página 
html. 
O texto pré-formatado é excelente para apresentar código-fonte com 
seus espaçamentos adequados. Este recurso pode ser utilizado para criar 
tabelas mas não é recomendável. 
Uma observação importante é que, ao usar tags de estilo ou vínculo, não 
tags de elemento, neste espaço elas irão funcionar normalmente. 
SINTAXE: 
<PRE> 
TEXTO 
TEXTO 
TEXTO 
</PRE> 
4. CITAÇÕES E COMENTÁRIOS 
A tag <BLOCKQUOTE> é utilizada na criação de citações longas que 
não devem ser aninhadas em parágrafos.. A tag <CITE> destaca citações 
curtas. 
Um exemplo: 
<BLOCKQUOTE> 
"O mercado de webdesign é um dos segmentos de design com maior potencial 
de crescimento para os próximos anos. Estima-se um crescimento de no 
mínimo 50% ao ano até 2005. E, na corrida rumo a esse novo eldorado, as 
agências de propaganda mais uma vez largaram na frente dos escritórios de 
design, investindo primeiro em estruturas especializadas para atender á 
demanda do mercado (...)". 
Maria Edicy Moreira. 
</BLOCKQUOTE>
AG8 Informática 
43 
Visualização no Internet Explore 5 
Visualização no Netscape 4.51 
Caso queira fazer comentários a respeito do seu código HTML apenas 
como referência pessoal e não para ser exibido em suas páginas você deverá 
fazer o comentário da seguinte forma:
AG8 Informática 
44 
<!- -comentário- - > 
5. ENDEREÇOS 
Esta tag é utilizada para identificar autorias de sua página. Geralmente 
são apresentadas na parte inferior de cada página. Mostra quem confeccionou 
aquela página, com quem o leitor deve entrar em contato caso queira ter 
alguma informação ou fazer alguma observação. Estes endereços são 
precedidos de um fio <hr>, que ainda veremos, e você poderá utilizar a tag 
<br> para separar linhas. 
<ADDRESS> TEXTO</ADDRESS> 
Vejamos um exemplo: 
<HR> 
<address> 
Cassia.teixeira@bol.com.br<br> 
A serviço de Ag8 Informática Ltda - Me<br> 
Última atualização: 10 de Janeiro de 2000<br> 
Todos os direitos autorais são reservados<br> 
</address> 
Esta é uma excelente forma de garantir que as pessoas entrem em 
contato com você caso necessitem e também uma forma de estar melhorando 
a sua HP (Home Page) através de sugestões. 
6. A TAG <BLINK> 
O texto que se encontrar entre estas tags irá aparecer piscando. 
Dependendo da versão do Netscape, esta tag somente terá efeito sobre o texto 
se ele estiver sendo visualizado através do Netscape, esse efeito terá uma 
dessas características: 
1. texto ficará piscando em intervalos regulares 
2. Um bloco cinza ou branco ficará piscando atrás do texto. 
Este recurso geralmente é utilizado para chamar a atenção do leitor 
sobre uma determinada parte do texto.
AG8 Informática 
O problema do efeito piscando é que ele chama atenção 
excessivamente sobre aquela parte do texto tirando a atenção do leitor do 
restante do texto. A maioria dos projetistas web consideram este efeito feio, 
desagradável e irritante. Em HTML poderíamos colocá-lo como se fosse passar 
a colher com bastante força no fundo de uma panela de alumínio. Já imaginou? 
45 
EXERCÍCIOS 
1. Os comandos de formatação podem ser combinados para aplicar mais de 
um efeito ao mesmo tempo? 
2. Coloque os comandos HTML abaixo para que o texto tenha o seguinte 
efeito: 
Tutorial de HTML 
3. Crie uma página HTML sobre algo que goste de fazer, e que faça muito 
bem, e queira ensinar a outras pessoas. Um tutorial usando todas as tags 
vistas até então. Utilizando principalmente todos os comandos de 
formatação. 
4. Por que a tag Blink não é bem aceita pela maioria dos projetistas de 
páginas Web? 
5. Qual a utilidade da tag de pré-formatação e qual sua sintaxe? 
6. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade? 
ANOTAÇÕES

Weitere ähnliche Inhalte

Was ist angesagt? (19)

Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Html
HtmlHtml
Html
 
Curso html
Curso htmlCurso html
Curso html
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Html
HtmlHtml
Html
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
Html
HtmlHtml
Html
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Seo Training
Seo Training Seo Training
Seo Training
 
Xhtml
XhtmlXhtml
Xhtml
 
Aula1
Aula1Aula1
Aula1
 
SEO Otimização de conteúdo - agencia ativi
SEO Otimização de conteúdo - agencia ativiSEO Otimização de conteúdo - agencia ativi
SEO Otimização de conteúdo - agencia ativi
 
Aula 3 - HTML
Aula 3 - HTMLAula 3 - HTML
Aula 3 - HTML
 
Codificações basicas em HTML e XML
Codificações basicas em HTML e XMLCodificações basicas em HTML e XML
Codificações basicas em HTML e XML
 
Html básico 1
Html básico 1Html básico 1
Html básico 1
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
NW Games Brasil - Manual de Identidade Visual
NW Games Brasil - Manual de Identidade VisualNW Games Brasil - Manual de Identidade Visual
NW Games Brasil - Manual de Identidade Visual
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
 

Andere mochten auch

3.leitura resultados saresp
3.leitura resultados saresp3.leitura resultados saresp
3.leitura resultados sarespEduardo Mendes
 
1.ot saresp cht ativuidade 2 síntese autores
1.ot saresp cht ativuidade 2 síntese autores1.ot saresp cht ativuidade 2 síntese autores
1.ot saresp cht ativuidade 2 síntese autoresEduardo Mendes
 
P pts analise do saresp
P pts analise do sarespP pts analise do saresp
P pts analise do sarespGildo Moitinho
 
Saresp relatorio-pedagogico-ciências da natureza-2010
Saresp relatorio-pedagogico-ciências da natureza-2010Saresp relatorio-pedagogico-ciências da natureza-2010
Saresp relatorio-pedagogico-ciências da natureza-2010Cristina Carvalho
 
Banco de questões SARESP
Banco de questões SARESPBanco de questões SARESP
Banco de questões SARESPDani Pimenta
 

Andere mochten auch (8)

3.leitura resultados saresp
3.leitura resultados saresp3.leitura resultados saresp
3.leitura resultados saresp
 
1.ot saresp cht ativuidade 2 síntese autores
1.ot saresp cht ativuidade 2 síntese autores1.ot saresp cht ativuidade 2 síntese autores
1.ot saresp cht ativuidade 2 síntese autores
 
SARESP
SARESPSARESP
SARESP
 
P pts analise do saresp
P pts analise do sarespP pts analise do saresp
P pts analise do saresp
 
Matriz referencia
Matriz referenciaMatriz referencia
Matriz referencia
 
Saresp relatorio-pedagogico-ciências da natureza-2010
Saresp relatorio-pedagogico-ciências da natureza-2010Saresp relatorio-pedagogico-ciências da natureza-2010
Saresp relatorio-pedagogico-ciências da natureza-2010
 
Ppt dia do saresp 2013
Ppt dia do saresp 2013Ppt dia do saresp 2013
Ppt dia do saresp 2013
 
Banco de questões SARESP
Banco de questões SARESPBanco de questões SARESP
Banco de questões SARESP
 

Ähnlich wie Formatação de texto e tags em HTML

ebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfRMartinxxx
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozerJBSO
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5Leandro Santos
 
Html completo
Html completoHtml completo
Html completoEMSNEWS
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Marcelo Mattos
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptxssusercbd9c4
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e cssmario_venancio
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfElsioDeMelo
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 

Ähnlich wie Formatação de texto e tags em HTML (20)

ebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdf
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Html manual
Html manualHtml manual
Html manual
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Html 01
Html 01Html 01
Html 01
 
Aula 02
Aula 02Aula 02
Aula 02
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html completo
Html completoHtml completo
Html completo
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdfT2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
T2Ti-ERP-3-Introducao-as-Tecnologias-Web.pdf
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
Manual completo de_html 01
Manual completo de_html 01Manual completo de_html 01
Manual completo de_html 01
 
HTML5 - (02) Estrutura Básica - DOCTYPE e Charsets
HTML5 - (02) Estrutura Básica - DOCTYPE e CharsetsHTML5 - (02) Estrutura Básica - DOCTYPE e Charsets
HTML5 - (02) Estrutura Básica - DOCTYPE e Charsets
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Manual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdfManual de HTML TIC 2020.pdf
Manual de HTML TIC 2020.pdf
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 

Mehr von Alvaro Gomes

Museu nacional de história natural e da ciência
Museu nacional de história natural e da ciênciaMuseu nacional de história natural e da ciência
Museu nacional de história natural e da ciênciaAlvaro Gomes
 
Luís Vaz de Camões Vida e Obras
Luís Vaz de Camões Vida e Obras Luís Vaz de Camões Vida e Obras
Luís Vaz de Camões Vida e Obras Alvaro Gomes
 
Ética Deontológica Técnico Administrativo
Ética Deontológica Técnico AdministrativoÉtica Deontológica Técnico Administrativo
Ética Deontológica Técnico AdministrativoAlvaro Gomes
 
Revolução Industrial - O Ponto de Viragem
Revolução Industrial - O Ponto de ViragemRevolução Industrial - O Ponto de Viragem
Revolução Industrial - O Ponto de ViragemAlvaro Gomes
 
Linux Commandos Cheat
Linux Commandos CheatLinux Commandos Cheat
Linux Commandos CheatAlvaro Gomes
 
Flash android using livesuit
Flash android using livesuitFlash android using livesuit
Flash android using livesuitAlvaro Gomes
 
13 Things the Government doesn´t want you to know
13 Things the Government doesn´t want you to know13 Things the Government doesn´t want you to know
13 Things the Government doesn´t want you to knowAlvaro Gomes
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorAlvaro Gomes
 
Como transformar o router thomson num print server
Como transformar o router thomson num print serverComo transformar o router thomson num print server
Como transformar o router thomson num print serverAlvaro Gomes
 
Drivers ADB Android
Drivers ADB AndroidDrivers ADB Android
Drivers ADB AndroidAlvaro Gomes
 
ROM china original (Shenzhen)
ROM china original (Shenzhen)ROM china original (Shenzhen)
ROM china original (Shenzhen)Alvaro Gomes
 
Reinstalar actualizar el sistema operativo android
Reinstalar actualizar el sistema operativo androidReinstalar actualizar el sistema operativo android
Reinstalar actualizar el sistema operativo androidAlvaro Gomes
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorAlvaro Gomes
 
H4dummies (translated to portuguese)
H4dummies (translated to portuguese)H4dummies (translated to portuguese)
H4dummies (translated to portuguese)Alvaro Gomes
 
Algoritmos e estructura de dados
Algoritmos e estructura de dadosAlgoritmos e estructura de dados
Algoritmos e estructura de dadosAlvaro Gomes
 

Mehr von Alvaro Gomes (20)

Museu nacional de história natural e da ciência
Museu nacional de história natural e da ciênciaMuseu nacional de história natural e da ciência
Museu nacional de história natural e da ciência
 
Luís Vaz de Camões Vida e Obras
Luís Vaz de Camões Vida e Obras Luís Vaz de Camões Vida e Obras
Luís Vaz de Camões Vida e Obras
 
Ética Deontológica Técnico Administrativo
Ética Deontológica Técnico AdministrativoÉtica Deontológica Técnico Administrativo
Ética Deontológica Técnico Administrativo
 
Revolução Industrial - O Ponto de Viragem
Revolução Industrial - O Ponto de ViragemRevolução Industrial - O Ponto de Viragem
Revolução Industrial - O Ponto de Viragem
 
Linux Commandos Cheat
Linux Commandos CheatLinux Commandos Cheat
Linux Commandos Cheat
 
Flash android using livesuit
Flash android using livesuitFlash android using livesuit
Flash android using livesuit
 
Websearch
WebsearchWebsearch
Websearch
 
13 Things the Government doesn´t want you to know
13 Things the Government doesn´t want you to know13 Things the Government doesn´t want you to know
13 Things the Government doesn´t want you to know
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injector
 
Como transformar o router thomson num print server
Como transformar o router thomson num print serverComo transformar o router thomson num print server
Como transformar o router thomson num print server
 
Drivers ADB Android
Drivers ADB AndroidDrivers ADB Android
Drivers ADB Android
 
ROM china original (Shenzhen)
ROM china original (Shenzhen)ROM china original (Shenzhen)
ROM china original (Shenzhen)
 
Reinstalar actualizar el sistema operativo android
Reinstalar actualizar el sistema operativo androidReinstalar actualizar el sistema operativo android
Reinstalar actualizar el sistema operativo android
 
Hackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injectorHackeando facebook com wireshark e cookie injector
Hackeando facebook com wireshark e cookie injector
 
H4dummies (translated to portuguese)
H4dummies (translated to portuguese)H4dummies (translated to portuguese)
H4dummies (translated to portuguese)
 
Algoritmos e estructura de dados
Algoritmos e estructura de dadosAlgoritmos e estructura de dados
Algoritmos e estructura de dados
 
HTML - Guia5
HTML - Guia5HTML - Guia5
HTML - Guia5
 
HTML - Guia4
HTML - Guia4HTML - Guia4
HTML - Guia4
 
HTML - Guia 3
HTML - Guia 3HTML - Guia 3
HTML - Guia 3
 
HTML - Guia 1 e 2
HTML - Guia 1 e 2HTML - Guia 1 e 2
HTML - Guia 1 e 2
 

Formatação de texto e tags em HTML

  • 1. AG8 Informática 3ª PARTE 38 CAPÍTULO 06 Este capítulo abrangerá : 1. Tags de formatação de texto lógicas e físicas 2. Texto pré-formatado 3. Endereços, citações e comentários
  • 2. AG8 Informática TAGS DE FORMATAÇÃO Assim como em um editor de texto, em HTML você poderá utilizar efeitos em seu texto. Como já percebeu os comandos, tags, trabalham em contêiner. Alguns destes comandos já foram introduzidos no capítulo anterior. Os 39 principais comandos de estilo: TAG SINTAXE FUNÇÃO STRONG <strong>texto</strong> Similar ao negrito TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular BIG <big>texto</big> Aumenta a fonte e aplica negrito SMALL <small>texto</small> Reduz e altera a fonte SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo BLINK <blink>texto</blink> Faz com que o texto pisque NEGRITO <b>texto</b> Aplica o estilo negrito ITÁLICO <I>texto</I> Aplica o estilo itálico SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns browsers esta tag não funciona) Estes são os mais utilizados, porém há outros que merecem atenção. Para alterar a formatação de um texto em HTML existem dois tipos de estilos que devem ser observados: o estilo lógico e o estilo físico.
  • 3. AG8 Informática 40 1. ESTILO LÓGICO As tags deste tipo indicam como o texto destacado deve ser utilizado e não como será apresentado. Este estilo não indica como o texto será formatado e sim como será utilizado no documento. Não é possível garantir que um texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou itálico, por exemplo. Dependerá do browser. Algumas tags de estilo lógico utilizadas em HTML padrão: <EM> Indica que os caracteres deverão ser enfatizados de alguma forma. De forma diferente do restante do texto. Geralmente em itálico <STRONG> Esta tag enfatiza ainda mais que a anterior. Em negrito. <CODE> Esta tag indica um código de exemplo a ser exposto. <SAMP> Esta tag indica texto de exemplo. Quando você quer dar um exemplo de endereço para a Internet sem criar link.
  • 4. AG8 Informática 41 2. ESTILOS FÍSICOS Este estilo de tag realmente altera a formatação do texto, no estilo anterior você não possui garantia que o texto irá ser visualizado da forma que planejou. Neste estilo ele será visualizado da forma que atribuir as tags a ele. Algumas tags de estilo físico para HTML padrão: <B> </B> coloca o texto em negrito <I> </I> coloca o texto em itálico <TT> </TT> fonte de máquina de escrever com espaçamento uniforme. <u> </u> coloca o texto sublinhado <S> </S> coloca o texto tachado <BIG> </BIG> o texto irá aparecer maior que o restante ao redor <SMALL> </SMALL> o texto irá aparecer menor que o restante ao redor <SUB> </SUB> coloca o texto subscrito <SUP> </SUP> coloca o texto sobrescrito
  • 5. AG8 Informática Optando por utilizar tags do estilo físico, caso o navegador não reconheça uma das tags ele a irá substituir por outra equivalente ou ignorará a formatação. 42 3. TEXTO PRÉ-FORMATADO O texto de uma arquivo em HTML é formatado através das tags. Mas você possui a opção da tag <PRE> </PRE> para estabelecer uma formatação através de um editor de texto e que esta formatação permaneça na sua página html. O texto pré-formatado é excelente para apresentar código-fonte com seus espaçamentos adequados. Este recurso pode ser utilizado para criar tabelas mas não é recomendável. Uma observação importante é que, ao usar tags de estilo ou vínculo, não tags de elemento, neste espaço elas irão funcionar normalmente. SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE> 4. CITAÇÕES E COMENTÁRIOS A tag <BLOCKQUOTE> é utilizada na criação de citações longas que não devem ser aninhadas em parágrafos.. A tag <CITE> destaca citações curtas. Um exemplo: <BLOCKQUOTE> "O mercado de webdesign é um dos segmentos de design com maior potencial de crescimento para os próximos anos. Estima-se um crescimento de no mínimo 50% ao ano até 2005. E, na corrida rumo a esse novo eldorado, as agências de propaganda mais uma vez largaram na frente dos escritórios de design, investindo primeiro em estruturas especializadas para atender á demanda do mercado (...)". Maria Edicy Moreira. </BLOCKQUOTE>
  • 6. AG8 Informática 43 Visualização no Internet Explore 5 Visualização no Netscape 4.51 Caso queira fazer comentários a respeito do seu código HTML apenas como referência pessoal e não para ser exibido em suas páginas você deverá fazer o comentário da seguinte forma:
  • 7. AG8 Informática 44 <!- -comentário- - > 5. ENDEREÇOS Esta tag é utilizada para identificar autorias de sua página. Geralmente são apresentadas na parte inferior de cada página. Mostra quem confeccionou aquela página, com quem o leitor deve entrar em contato caso queira ter alguma informação ou fazer alguma observação. Estes endereços são precedidos de um fio <hr>, que ainda veremos, e você poderá utilizar a tag <br> para separar linhas. <ADDRESS> TEXTO</ADDRESS> Vejamos um exemplo: <HR> <address> Cassia.teixeira@bol.com.br<br> A serviço de Ag8 Informática Ltda - Me<br> Última atualização: 10 de Janeiro de 2000<br> Todos os direitos autorais são reservados<br> </address> Esta é uma excelente forma de garantir que as pessoas entrem em contato com você caso necessitem e também uma forma de estar melhorando a sua HP (Home Page) através de sugestões. 6. A TAG <BLINK> O texto que se encontrar entre estas tags irá aparecer piscando. Dependendo da versão do Netscape, esta tag somente terá efeito sobre o texto se ele estiver sendo visualizado através do Netscape, esse efeito terá uma dessas características: 1. texto ficará piscando em intervalos regulares 2. Um bloco cinza ou branco ficará piscando atrás do texto. Este recurso geralmente é utilizado para chamar a atenção do leitor sobre uma determinada parte do texto.
  • 8. AG8 Informática O problema do efeito piscando é que ele chama atenção excessivamente sobre aquela parte do texto tirando a atenção do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradável e irritante. Em HTML poderíamos colocá-lo como se fosse passar a colher com bastante força no fundo de uma panela de alumínio. Já imaginou? 45 EXERCÍCIOS 1. Os comandos de formatação podem ser combinados para aplicar mais de um efeito ao mesmo tempo? 2. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito: Tutorial de HTML 3. Crie uma página HTML sobre algo que goste de fazer, e que faça muito bem, e queira ensinar a outras pessoas. Um tutorial usando todas as tags vistas até então. Utilizando principalmente todos os comandos de formatação. 4. Por que a tag Blink não é bem aceita pela maioria dos projetistas de páginas Web? 5. Qual a utilidade da tag de pré-formatação e qual sua sintaxe? 6. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade? ANOTAÇÕES