Embed Size (px)
DESCRIPTION
Slide da 2ª Aula de HTML do curso de Web e Design na MIcrolins - Centro de formação Profissional
Citation preview
HTML – AULA 2 Microlins - Web e Design – Capítulo 2
Rondonópolis 14 de Maio de 2011
Mayza de Oliveira
@mayzaoliveira
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.
FORMATANDO BLOCOS DE TEXTO
TAG <PRE></PRE>
A tag <pre></pre> mantém o texto da
mesma maneira que foi digitado,
exibindo-o no mesmo formato no
navegador:
FORMATANDO BLOCOS DE TEXTO
TAG <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>
FORMATANDO BLOCOS DE TEXTO
TAG <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>
FORMATANDO BLOCOS DE TEXTO
TAG <ADDRESS></ADDRESS>
Utilizada para endereços e para assinar o
documento:
<body>
Envie criticas e sugestões para:
<address>
</address>
</body>
FORMATANDO BLOCOS DE TEXTO
TAG <BLINK></BLINK>
Utilizada para fazer com que o texto apareça
piscando na tela:
<body>
<blink>Atenção</blink>
</body>
FORMATANDO FRASES
TAG <CITE></CITE>
Utilizada para citações curtas, títulos de livros,
filmes, etc:
<body>
Assisti<cite>Matrix</cite>umas oito
vezes!
</body>
FORMATANDO FRASES
TAG <CODE></CODE>
Utilizada para indicar trechos de códigos de
programas:
<body>
<code>
for (x=0); cl &&(!feof(stdin)); x++
</code>
</body>
FORMATANDO FRASES
TAG <DFN></DFN>
Utilizada para indicar a definição de uma palavra:
<body>
NASA: <dfn> National Aeronautics and
Space Administration </dfn>
</body>
FORMATANDO FRASES
TAG <EM></EM>
Utilizada para indicar ênfase a um trecho
específico:
<body>
Não basta respirar, é <em> preciso </em>
viver.
</body>
FORMATANDO FRASES
TAG <KBD></KBD>
Utilizada para indicar uma entrada via teclado:
<body>
Para ler mensagens recebidas, digite <kbd> pine –i </kbd>
</body>
FORMATANDO FRASES
TAG <SAMP></SAMP>
Utilizada para indicar uma sequência de
caracteres:
<body>
O resultado do primeiro applet é:
<samp> Hello World! </samp>
</body>
FORMATANDO FRASES
TAG <STRONG></STRONG>
Utilizada para dar ênfase ao trecho escolhido:
<body>
Antes de enviar um e-mail, confira o campo <strong> “Assunto:”! </strong>
</body>
FORMATANDO FRASES
TAG <VAR></VAR>
Utilizada para indicar variáveis ou valores que o
usuário deverá escrever:
<body>
No campo login, escreva <var>
administrador </var>
</body>
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
ESTILOS FÍSICOS
TAG <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>
ESTILOS FÍSICOS
TAG <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>
ESTILOS FÍSICOS
TAG <TT></TT>
Utilizada para formatar o texto com espaçamento
uniforme:
<body>
<tt> Sábado, 14 de março de
2011</tt>
</body>
ESTILOS FÍSICOS
TAG <U></U>
Utilizada para deixar o trecho escolhido sublinhado:
<body>
<u> Atenção </u>: não mexa nos fios!
</body>
ESTILOS FÍSICOS
TAG <STRIKE></STRIKE>
Utilizada quando se quer aplicar um risco sobre o
trecho escolhido:
<body>
A resposta correta é: Sim <strike>Não</strike>
</body>
ESTILOS FÍSICOS
TAG <BIG></BIG>
Utilizada para formatar o trecho escolhido com uma
fonte um pouco maior:
<body>
Fonte normal, <big> fonte maior
</big>.
</body>
ESTILOS FÍSICOS
TAG <SMALL></SMALL>
Utilizada para formatar o trecho escolhido com uma
fonte um pouco menos:
<body>
Fonte normal, <small>Fonte
menor</small>.
</body>
ESTILOS FÍSICOS
TAG <SUB></SUB>
Utilizada para formatar um bloco de texto no estilo
subescrito:
<body>
C <sub>3</sub> H <sub>6</sub> O
</body>
ESTILOS FÍSICOS
TAG <SUP></SUP>
Utilizada para formatar um bloco de texto com
estilo sobre-escrito:
<body>
Delta = b <sup>2</sup> -4ac
</body>
FORMATANDO FONTES
Para formatar fontes, alterando suas propriedades
e aplicando atributos, devemos utilizar as tags:
<font></font>
<div></div>
FORMATANDO FONTES
TAG <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>
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=5
color=“#000000”>
Texto formatado por atributos
</font>
FORMATANDO FONTES
TAG <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.
FORMATANDO FONTES
TAG <DIV></DIV>
<body>
<div align=justify>
A www ou World Wide Web (Rede de
Alcance Mundial), também conhecida como Web, é
um sistema de documentos de hipermídia
interligados e executados na internet. Para visualizar
a informação, pode-ser usar um programa de
computador chamado navegador para descarregar
informações de servidores Web e mostrá-los na tela
do usuário.
</div>
</body>
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
< <
> >
& &
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>
EXERCÍCIO
<div></div>
<font></font>
<pre></pre>
<blockquote></blockquote>
<address></address>
<blink></blink>
<cite></cite>
<code></code>
<dfn></dfn>
<em></em>
<kbd></kbd>
<samp></samp>
<strong></strong>
<var></var>
<b></b>
<i></i>
<tt></tt>
<u></u>
<strike></strike>
<big></big>
<small></small>
<sub></sub>
<sup></sup>
