Html iniciante

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

Transcript of Html iniciante

Page 1: Html iniciante

Introdução ao HTMLparte 2

segunda-feira, 20 de agosto de 12

Page 2: Html iniciante

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.

segunda-feira, 20 de agosto de 12

Page 3: Html iniciante

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 elementis displayed in a fixed-widthfont, and it preservesboth      spaces andline breaks</pre>

segunda-feira, 20 de agosto de 12

Page 4: Html iniciante

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>

segunda-feira, 20 de agosto de 12

Page 5: Html iniciante

Envie criticas e sugestões para:

<addres>

<address> [email protected]</address>

segunda-feira, 20 de agosto de 12

Page 6: Html iniciante

Utilizada para fazer com que o texto apareça piscando na tela

<blink>

<body>

<blink>Atenção</blink>

</body>

segunda-feira, 20 de agosto de 12

Page 7: Html iniciante

Utilizada para citações curtas, títulos de livros, filmes, etc

<cite>

<body> <cite>The Scream</cite> by Edward Munch. Painted in 1893.</body>

segunda-feira, 20 de agosto de 12

Page 8: Html iniciante

Utilizada para indicar trechos de códigos de programas

<code>

<code> for (x=0); cl &&(!feof(stdin)); x++</code>

segunda-feira, 20 de agosto de 12

Page 9: Html iniciante

Utilizada para indicar a definição de uma palavra

<code>

<body> NASA:<dfn> NationalAeronauticsand Space Administration </dfn></body>

segunda-feira, 20 de agosto de 12

Page 10: Html iniciante

Utilizada para indicar ênfase a um trecho específico

<em>

<body> Não basta respirar, é <em> preciso </em>viver.</body>

segunda-feira, 20 de agosto de 12

Page 11: Html iniciante

Utilizada para indicar uma entrada via teclado

<kbd>

<body> Para ler mensagens recebidas, digite <kbd> pine –i </kbd></body>

segunda-feira, 20 de agosto de 12

Page 12: Html iniciante

Utilizada para indicar uma sequência de caracteres

<samp>

<body> O resultado do primeiro applet é:<samp> Hello World! </samp></body>

segunda-feira, 20 de agosto de 12

Page 13: Html iniciante

Utilizada para dar ênfase ao trecho escolhido

<strong>

<body> Antes de enviar um e-mail, confira o campo<strong> “Assunto:”!</strong></body>

segunda-feira, 20 de agosto de 12

Page 14: Html iniciante

Utilizada para indicar variáveis ou valores que o usuário deverá escrever

<var>

<body> No campo login, escreva <var>administrador </var></body>

segunda-feira, 20 de agosto de 12

Page 15: Html iniciante

Estilos Físicos

segunda-feira, 20 de agosto de 12

Page 16: Html iniciante

Estilos Físicos

A formatação física especifica diretamente os estilos que se quer para o texto:

segunda-feira, 20 de agosto de 12

Page 17: Html iniciante

Estilos Físicos

A formatação física especifica diretamente os estilos que se quer para o texto:

• Itálico

segunda-feira, 20 de agosto de 12

Page 18: Html iniciante

Estilos Físicos

A formatação física especifica diretamente os estilos que se quer para o texto:

• Itálico

• Negrito

segunda-feira, 20 de agosto de 12

Page 19: Html iniciante

Estilos Físicos

A formatação física especifica diretamente os estilos que se quer para o texto:

• Itálico

• Negrito

• Sublinhado

segunda-feira, 20 de agosto de 12

Page 20: Html iniciante

Estilos Físicos

A formatação física especifica diretamente os estilos que se quer para o texto:

• Itálico

• Negrito

• Sublinhado

• Riscado

segunda-feira, 20 de agosto de 12

Page 21: Html iniciante

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

segunda-feira, 20 de agosto de 12

Page 22: Html iniciante

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>

segunda-feira, 20 de agosto de 12

Page 23: Html iniciante

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>

segunda-feira, 20 de agosto de 12

Page 24: Html iniciante

Utilizada para formatar o texto com espaçamento uniforme

<tt>

<body> <tt> Sábado, 11 de Agosto de 2012</tt></body>

segunda-feira, 20 de agosto de 12

Page 25: Html iniciante

Utilizada para deixar o trecho escolhido sublinhado

<u>

<body> <u> Atenção </u>: não mexa nos fios!</body>

segunda-feira, 20 de agosto de 12

Page 26: Html iniciante

Utilizada quando se quer aplicar um risco sobre o trecho escolhido

<strike>

<body> A resposta correta é: Sim <strike>Não</strike></body>

segunda-feira, 20 de agosto de 12

Page 27: Html iniciante

Utilizada para formatar o trecho escolhido com uma fonte um pouco maior

<big>

<body> Fonte normal, <big> fonte maior </big></body>

segunda-feira, 20 de agosto de 12

Page 28: Html iniciante

Utilizada para formatar o trecho escolhido com uma fonte um pouco menor

<small>

<body> Fonte normal, <small> fonte menor </small></body>

segunda-feira, 20 de agosto de 12

Page 29: Html iniciante

Utilizada para formatar um bloco de texto no estilo subescrito

<sub>

<body> C <sub>3</sub> H <sub>6</sub> O</body>

segunda-feira, 20 de agosto de 12

Page 30: Html iniciante

Utilizada para formatar um bloco de texto com estilo sobre-escrito

<sup>

<body> O terreno tem 200m<sup>2</sup> de área toral</body>

segunda-feira, 20 de agosto de 12

Page 31: Html iniciante

Formatando Fontes

• Para formatar fontes, alterando suas propriedades e aplicando atributos, devemos utilizar as tags:

• <font></font>

• <div></div>

segunda-feira, 20 de agosto de 12

Page 32: Html iniciante

Utilizada para alterar a maioria das propriedades das fontes. Todo o conteúdo que estiver dentro dessa tag terá características definidas pelos atributos.

<font>

<body> <font face=“Times New Roman”> Exemplo de tipo de fonte </font></body>

segunda-feira, 20 de agosto de 12

Page 33: Html iniciante

Atributos - <font>• 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>

segunda-feira, 20 de agosto de 12

Page 34: Html iniciante

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: justificado. segunda-feira, 20 de agosto de 12

Page 35: Html iniciante

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>

segunda-feira, 20 de agosto de 12

Page 36: Html iniciante

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

segunda-feira, 20 de agosto de 12

Page 37: Html iniciante

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

segunda-feira, 20 de agosto de 12

Page 38: Html iniciante

O comando <a href> pode definir, 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>

segunda-feira, 20 de agosto de 12

Page 39: Html iniciante

Este parâmetro tem a função de pôr uma mensagem em cima de um link.

Tem a mesma finalidade 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>

segunda-feira, 20 de agosto de 12

Page 40: Html iniciante

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

segunda-feira, 20 de agosto de 12

Page 41: Html iniciante

Este nome de referencia é uma palavra que você mesmo cria. Note que este comando fica 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>

segunda-feira, 20 de agosto de 12

Page 42: Html iniciante

Este nome de referencia é uma palavra que você mesmo cria. Note que este comando fica 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.

segunda-feira, 20 de agosto de 12

Page 43: Html iniciante

Para exibir uma imagem em uma página, você precisa usar o atributo src.

Src significa "Source".

O valor do atributo src é o URL da imagem que você deseja exibir.

Imagens

<img src="caminho_da_imagem" />

segunda-feira, 20 de agosto de 12

Page 44: Html iniciante

Atributos - <img>

• ALT - Texto alternativo

• WIDTH - Largura

• HEIGHT - Altura

• BORDER - Borda

• ALIGN - Alinhamento

segunda-feira, 20 de agosto de 12

Page 45: Html iniciante

Atributos - <img>

• ALT - Texto alternativo

• WIDTH - Largura

• HEIGHT - Altura

• BORDER - Borda

• ALIGN - Alinhamento

segunda-feira, 20 de agosto de 12

Page 46: Html iniciante

Exemplo

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

segunda-feira, 20 de agosto de 12

Page 47: Html iniciante

Logo da Empresa

Rua dos bobos, nº 0Bairro centroXanxerê - SC

Julano de TalGerente de vendas

segunda-feira, 20 de agosto de 12