Html iniciante

Introdução ao HTML
parte 2
segunda-feira, 20 de agosto de 12

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.

A tag <pre></pre> mantém o texto da mesma
maneira que foi digitado, exibindo-o no mesmo
formato no navegador
<pre>
<pre>
Text in a pre element
is displayed in a ﬁxed-width
font, and it preserves
both spaces and
line breaks
</pre>

Usado para formatar citações longas:
<blockquote>
<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>

Envie criticas e sugestões para:
<addres>
<address>
mauricioberte@gmail.com
</address>

Utilizada para fazer com que o texto apareça
piscando na tela
<blink>
<body>
<blink>Atenção</blink>
</body>

Utilizada para citações curtas, títulos de livros,
ﬁlmes, etc
<cite>
<body>
<cite>The Scream</cite> by Edward Munch. Painted
in 1893.
</body>

Utilizada para indicar trechos de códigos de
programas
<code>
<code>
for (x=0); cl &&(!feof(stdin)); x++
</code>

Utilizada para indicar a deﬁnição de uma palavra
<code>
<body>
NASA:<dfn> NationalAeronauticsand Space
Administration </dfn>
</body>

Utilizada para indicar ênfase a um trecho
especíﬁco
<em>
<body>
Não basta respirar, é <em> preciso </em>viver.
</body>

Utilizada para indicar uma entrada via teclado
<kbd>
<body>
Para ler mensagens recebidas, digite
<kbd> pine –i </kbd>
</body>

Utilizada para indicar uma sequência de
caracteres
<samp>
<body>
O resultado do primeiro applet é:<samp> Hello
World! </samp>
</body>

Utilizada para dar ênfase ao trecho escolhido
<strong>
<body>
Antes de enviar um e-mail, conﬁra o campo<strong>
“Assunto:”!</strong>
</body>

Utilizada para indicar variáveis ou valores que o
usuário deverá escrever
<var>
<body>
No campo login, escreva <var>administrador </var>
</body>

Estilos Físicos

Estilos Físicos
A formatação física especiﬁca diretamente os
estilos que se quer para o texto:

Estilos Físicos
• Itálico

Estilos Físicos
• Itálico
• Negrito

Estilos Físicos
• Itálico
• Negrito
• Sublinhado

Estilos Físicos
• Itálico
• Negrito
• Sublinhado
• Riscado

Estilos Físicos
• Itálico
• Negrito
• Sublinhado
• Riscado
• Tamanho do texto

Utilizada para formatar o texto em negrito
<b>
<body>
<b>Dia das mães:</b> compre um presente para a
melhor mãe do mundo!
</body>

Utilizada para formatar o texto em itálico
<i>
<body>
Palavras em inglês, como <i>webdesigner</i>, fazem
parte do nosso dia a dia.
</body>

Utilizada para formatar o texto com
espaçamento uniforme
<tt>
<body>
<tt> Sábado, 11 de Agosto de 2012</tt>
</body>

Utilizada para deixar o trecho escolhido
sublinhado
<u>
<body>
<u> Atenção </u>: não mexa nos ﬁos!
</body>

Utilizada quando se quer aplicar um risco sobre
o trecho escolhido
<strike>
<body>
A resposta correta é: Sim <strike>Não</strike>
</body>

Utilizada para formatar o trecho escolhido com
uma fonte um pouco maior
<big>
<body>
Fonte normal, <big> fonte maior </big>
</body>

Utilizada para formatar o trecho escolhido com
uma fonte um pouco menor
<small>
<body>
Fonte normal, <small> fonte menor </small>
</body>

Utilizada para formatar um bloco de texto no
estilo subescrito
<sub>
<body>
C <sub>3</sub> H <sub>6</sub> O
</body>

Utilizada para formatar um bloco de texto com
estilo sobre-escrito
<sup>
<body>
O terreno tem 200m<sup>2</sup> de área toral
</body>

Formatando Fontes
• Para formatar fontes, alterando suas
propriedades e aplicando atributos,
devemos utilizar as tags:
• <font></font>
• <div></div>

Utilizada para alterar a maioria das propriedades
das fontes.Todo o conteúdo que estiver dentro
dessa tag terá características deﬁnidas pelos
atributos.
<font>
<body>
<font face=“Times New Roman”>
Exemplo de tipo de fonte
</font>
</body>

Atributos - <font>
• color=“valor”:
Ajusta a cor do texto;
• face=“nomeDaFonte1, nomeDaFonte2”:
Especiﬁca o tipo fonte para o texto;
• size=“valor”:
Especiﬁca o tamanho da fonte;
<font face=“Arial,Verdana,Tahoma” size=5 color=“#000000”>
Texto formatado por atributos
</font>

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.
<div>
Atibutos da tag <div></div>
Align - alinha o texto na tela, com os valores:
• Left: esquerda;
• Right: direita;
• Center: centralizado;
• Justify: justiﬁcado.

exemplo - <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>

Links ou hiperlinks são meios de ligação entre
páginas web ou entre locais dentro da mesma
página (âncoras).
Um link é reconhecido em uma página por estar
em cor normalmente diferente do resto do
texto e, ao passar com o mouse sobre esse
texto o cursor muda para uma mão apontando
para o link.
Links

<a href="#"> Link </a>
<a href="index.html"> Clique Aqui </a>
Este exemplo criará um link que acessa a página
web de nome index.html que está na mesma
pasta do documento atual. Para linkar paginas
alocadas na mesma pasta do servidor web não se
necessita colocar o endereço completo.

O comando <a href> pode deﬁnir, usando o parâmetro
target, onde a pagina web irá abrir quando o usuário
clicar no link.
Seus atributos mais usados são:
O parâmetro TARGET
target="_self" - Abre a nova página na janela
atual.
target="_blank" - Abre a nova página sempre
em nova janela.
<A HREF="aula.html" Target="_blank"> Aula</A>

Este parâmetro tem a função de pôr uma
mensagem em cima de um link.
Tem a mesma ﬁnalidade do parametro ALT usado
em imagens.
Para visualizar a mensagem do link basta deixar o
ponteiro do mouse em cima do link por alguns
segundos.
O parâmetro TITLE
<a href="aula.html" TITLE="Estude HTML"> Aula</a>

Este recurso serve para fazer links que acessam locais da
própria pagina web.
Se você está fazendo uma página muito grande e que será
dividida em vários tópicos pode-se dar um endereço de
referência a cada um deles para serem acessados
rapidamente por meio de links que são geralmente
dispostos no inicio do documento (como um índice).
Em outras palavras uma Âncora é uma referência dentro
de uma página HTML que pode ser acessada por um link.
Para se criar uma âncora em algum lugar da página deve
se dar um nome de referência para o link poder acessá-
lo.
Âncoras

Este nome de referencia é uma palavra que você mesmo
cria. Note que este comando ﬁca invisível aos visitantes. Ele
apenas marca um local da página web para que os links (estes
sim visíveis e provavelmente dispostos no início da página)
possam acessá-los.
Para se criar o link que acessará a âncora usa-se o comando:
Criando a Âncora:
<A NAME="nome de referencia">
<A HREF="#nome de referência"> Texto do Link </A>

Este nome de referencia é uma palavra que você mesmo
cria. Note que este comando ﬁca invisível aos visitantes. Ele
apenas marca um local da página web para que os links (estes
sim visíveis e provavelmente dispostos no início da página)
possam acessá-los.
Para se criar o link que acessará a âncora usa-se o comando:
Criando a Âncora:
<A NAME="nome de referencia">
<A HREF="#nome de referência"> Texto do Link </A>
Atenção: sinal de cerquilha (#) deve
anteceder o nome de referência do
link, pois avisa ao browser que ele irá
procurar uma âncora.

Para exibir uma imagem em uma página, você
precisa usar o atributo src.
Src signiﬁca "Source".
O valor do atributo src é o URL da imagem que
você deseja exibir.
Imagens
<img src="caminho_da_imagem" />

Atributos - <img>
• ALT - Texto alternativo
• WIDTH - Largura
• HEIGHT - Altura
• BORDER - Borda
• ALIGN - Alinhamento

Exemplo
<IMG SRC="imagem" ALT="descrição" WIDTH="300"
HEIGHT="200" BORDER= "2" ALIGN= "left"

Logo da Empresa
Rua dos bobos, nº 0
Bairro centro
Xanxerê - SC
Julano de Tal
Gerente de vendas

Html iniciante

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Html iniciante

Html iniciante