Page 1

Vamos programar em HTML? O HTML Hypertext Markup Language


Introdução 

O HTML serve para criar páginas de Internet. Podemos criar sites e home pages. O HTML pode ser usado também e blogs.


Introdução 

O HTML pode ser criado no Bloco de Notas, mas quando salvo tem que colocar a extensão .htm ou .html Existem programas que facilitam a criação do HTML tal como o Dreamweaver.


Estrutura principal <html> <head> <title>Título da página </title> </head> <body> ... Textos Imagens Etc ... </body> </html>


Estrutura principal

HTML <html> Inicia o documento HTML

</html> Termina o documento HTML


Estrutura principal

Head <head> Onde começa e </head> termina a cabeça do documento. Entre ela tem o título da página entre <title> e </title>


Estrutura principal O

mesmo

mostrada

título na

da

barra

página de

título

será do

navegador ao lado do nome do próprio navegador.


Estrutura principal

Body Entre <body> e </body> (corpo do documento) vocês irão criar sua página em HTML propriamente dita, colocando fotos, textos, etc.


Tag <Body> 

Tudo que estiver contido em <BODY> será mostrado na janela principal do browser; <BODY> pode conter:        

Cabeçalhos; Parágrafos; Listas; Tabelas; Links para outros documentos; Imagens; Formulários; Animações, vídeos, sons e scripts embutidos.


Tag <Body> 

Podem ser utilizados:      

BACKGROUND - Imagem de fundo; BGCOLOR - Cor de fundo; TEXT - Cor do texto; LINK - Cor do link; VLINK - Cor do link já visitado; ALINK - Cor do link quando “clicado”.


Exemplo <HTML> <HEAD> Elementos do cabeçalho </HEAD> <BODY BGCOLOR="#00FFFF" TEXT="#00000" LINK="#FF00FF" ALINK="#FF69B4" VLINK=“#FFB6C1" BACKGROUND="URL"> <b>Exemplo de atributos da Tag body </b> </BODY> </HTML>


Estrutura principal Programas próprios para edição HTML 

Esta estrutura pode já vir pronta dependendo do local onde vocês o forem fazer. Em programas próprios para edição de HTML geralmente não precisam escrever isto.


Texto


Formatação de texto 

A partir de agora vão aprender a alterar: tamanho

Fonte

Cor

etc.


Formatação de texto Para deixar o texto em negrito

<b>Texto ou bloco de texto</b>


Formatação de texto Para deixar o texto em itálico

<i>Texto ou bloco de texto</i>


Formatação de texto Para deixar o texto em sublinhado 

<u>Texto ou bloco de texto</u>


Formatação de texto Para deixar o texto em riscado 

<s>Texto ou bloco de texto</s>

Ou 

<strike>Texto ou bloco de texto</strike>


Formatação de texto Para deixar o texto em subscrito 

A fórmula da água é : H2O

H<sub>2</sub>O


Formatação de texto Para deixar o texto em sobrescrito 

Aquele homem vendeu um terreno de: 600m2

600 m<sup>2</sup>.


Formatação de texto Pode-se misturar também, se quisermos 

<u>Texto ou <b>bloco de <i>texto</u> </i></b>

Vai ficar assim : Texto ou bloco de texto 


Formatação de texto Tudo o que se abre tem que ser fechado!

<b> => </ b>


Formatação de texto 

Para alterar o tamanho da fonte, tenha em mente uma coisa : As fontes por padrão tem tamanho 3

(que não seria o mesmo tamanho 3 do Word) 

No HTML o tamanho das letras varia entre o número 1 e 7.


Formatação de texto <font size=4>Texto texto</font> 

ou

conjunto

de

Onde se encontra o número 4, poderá colocar um número de 1 a 7.


Formatação de texto 

Os tamanhos de HTML ficam mais ou menos assim : HTML

Word

1

7

2

10

3

12

4

14

5

18

6

24

7 ou +

36


Formatação de texto 

Podem parecer poucas opções, mas com programas de edição de texto, é possível escolher outras opções de tamanhos.


Formatação de texto 

É possível também ampliar o texto ou diminuir, baseando-se no último <font size> usado.


Formatação de texto 

Vamos supor que usaram <font size=3> então utilizam

na

próxima

<font

oportunidade

size=+1>

aumentado para 4.

e

terão


Formatação de texto 

Se utilizarem <font size= - 2> onde era antes <font size=5> ele diminuirá para 3. Podem diminuir até chegarem a font size 1 e aumentar até o limite de 7.


Formatação de texto 

Para fazerem a formatação da fonte, têm que ter o nome completo da fonte antes de tudo. Têm que ter consciência também que essa fonte poderá ou não ter o efeito desejado, dependendo de qual for e dependendo do usuário.


Formatação de texto 

Se escreverem <font face=”Arial”> por exemplo, vão escolher a fonte Arial para ser usada na página. No lugar das aspas, podem colocar outro nome de fonte, desde que o nome esteja completo.


Formatação de texto É possível misturar tamanho e tipo de fonte no mesmo código 

<font size=5 face=”Verdana”>Texto ou bloco de texto</font>


Caracteres especiais


 

Caracteres especiais HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final.


 

Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caracter


Acentuação 

 

&lt; < &gt; > &amp; & Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português: Entidade Caracter


Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente.


Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo: <HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ... 


Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo:   

&copy;, que é o símbolo © &reg; para ® &sect; para §.


Também se pode usar sequências com códigos ASCII. Por exemplo:  

&#191;Qué pasa, señor? ¿Qué pasa, señor?


Formatação de texto Também é possível escolher a cor da fonte : 

<font color=red face=”Arial”>Texto ou bloco de texto</font> A cor será sempre em Inglês.


Formatação de texto Alguns exemplos de cores possíveis          

Blue (azul) Cyan (Azul ciano) Red (Vermelho) Yellow (Amarelo) Pink (Rosa) Orange (Laranja) Black (Preto) White (Branco) Gray (Cinza) Green (Verde)


Formatação de texto 

Para personalizar cores

usa-se hexadecimal (código que vai do 1 ao 9 e do A ao F). 

No total é usado 3 conjuntos de 2 dígitos que vai do 00 até o FF cada um.


Formatação de texto Onde 

#000000 é branco

#FFFFFF é preto.


Formatação de texto 

Os 2 primeiros dígitos são equivalentes a cor vermelha. Deixando #FF0000, portanto, fica vermelho.


Formatação de texto 

Os 2 dígitos do meio é equivalente a cor verde.

Deixando #00FF00, portanto, fica verde.


Formatação de texto 

Os 2 dígitos finais é equivalente a cor azul. Deixando #0000FF, portanto, fica azul.


Formatação de texto 

O código hexadecimal seria usado no lugar do nome da cor em inglês e com aspas.

ou 

<font color=”#12345F”>Texto com cor personalizada</font>


Formatação de texto

Por fim o efeito Marquee que faz o texto andar na página Esse código tem um efeito dividido em duas partes : 

<marquee behavior=efeito>Texto marquee</marquee>


Formatação de texto

Primeiro efeito 

Texto anda lateralmente, por um espaço pré definido e depois some e aparece do outro lado. <marquee behavior=scroll width=20%>Txt Marquee</marquee>


Formatação de texto 

<marquee behavior=scroll width=20%>Txt Marquee</marquee>

Podes substituir neste caso o 20% por outra percentagem que achar melhor (de 0 a 100).


Formatação de texto 

<marquee behavior=scroll width=20%>Txt Marquee</marquee> Deixando 20% por exemplo, ele vai mostrar o texto andando num espaço de 20% da largura da página.


Formatação de texto 

<marquee behavior=slide direction=right>Marquee</marquee> Agora vão fazer um marquee que vai em numa direcção e pára quando chegar no fim.


Formatação de texto 

<marquee behavior=slide direction=right>Marquee</marquee> Deixando right, ele vai até a direita e pára lá no fim. Se colocar left, vai para o sentido contrário e pára também.


Formatação de texto 

<marquee behavior=slide direction=right>Marquee</marquee> Não se esqueça que quando quiserem que vá até o fim e pare, usam behavior=slide e no lugar de width, é direction.


Formatação de texto 

<marquee behavior=scroll width=20%>Txt Marquee</marquee> Quando quiserem que o aviso ande sem parar, desapareça e volte do outro lado, é width e não direction e é behavior=scroll.


Hiperligações


Hiperlinks e figuras

<html> <body> <a href="ficheiro1.htm">este texto</a> liga a um ficheiro <a href="http://www.clix.pt/">este texto</a> liga a um sítio na WWW <a href="ficheiro1.htm" target="_blank">este texto</a> liga a um ficheiro e abre uma janela nova </p> </body> </html> A marca <a> (âncora) tem um parâmetro href=..., com a referencia da hiperligação, e fecha com a marca</a> . O parâmetro target=“_blank” abre o conteúdo numa nova janela


HIPERLIGAÇÕES PARA LOCAIS ESPECIFICOS Quando se pretende que a hiperligação aponte para um local especifico do documento temos que: -

-

No documento que é destino na hiperligação, definir o local do texto onde a ligação aponta <a nome=“local1”> Definir a hiperligação para esse local <a href=“ficheiroDestino.htm#local1>


Imagens


INSERIR IMAGENS As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem.

<html> <body> <p>Inserir uma imagem: <img src="metal.gif" border="0" width="50" height="100"> </p> </body> </html>


INSERIR IMAGENS As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem

<html> <body> <p>Inserir uma imagem em movimento: <img src="agua.gif" border="0" width="50" height="100"> </p> </body> </html>


INSERIR IMAGENS As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem

<html> <body> <p>Inserir uma imagem de outra pasta: <img src="../imagens/arvore.gif" width="50" height="100"> </p> </body> </html>


INSERIR IMAGENS As imagens são inseridas através da marca img e correspondente parâmetro src que indica a localização da imagem

<html> <body> <p>Inserir uma imagem da WWW: <img src="http://web.mediateca.info/imagens/fogo.gif " width="50" height="100"> </p> </body> </html>


Atributos da Tag <img>  SRC - A localização da imagem a mostrar  ALIGN – Especifica como alinhar a imagem

em relação ao texto.  WIDTH - Define a largura da imagem  HEIGHT - Define a altura da imagem.  ALT - Texto que aparece quando é passado o rato sobre a imagem  BORDER - É um valor atribuído à largura da moldura da imagem (Contorno).


INSERIR IMAGENS COM HIPERLIGAÇÕES <html> <body> <p>Imagem com uma hiperligação para um ficheiro na pasta: <a href="nomeficheiro.htm"> <img border="0" src="rato.gif" width="50" height="100"> </a> </p> </body> </html>


INSERIR IMAGENS COM HIPERLIGAÇÕES <html> <body> <p>Inserir uma hiperligação para um ficheiro noutra pasta: <a href="../imagens/bufaloBig.gif"> <img src="../amostra/bufalo.gif" width="50" height="100"> </a> </p> </body> </html>


INSERIR IMAGENS COM HIPERLIGAÇÕES <html> <body> <p>Imagem com hiperligação para a WWW: <a href="http://www.google.com"> <img border="0" src="tigre.gif" width="50" height="100"> </a> </p> </body> </html>


Listas


Criar Listas 

Listas Desordenadas  

Tag utilizada <ul> Tag dos itens da lista é <li>

Listas Ordenadas  

Tag utilizada <ol> Tag dos itens da lista é <li>


Exemplo Lista Desordenada

<ul> <li>Café</li> <li>Leite</li> </ul>

• Café • Leite


Exemplo Lista Ordenada

<ol> <li>Café</li> <li>Leite</li> </ol>

1. Café 2. Leite


Tabelas


Tabelas  

Definidas pela tag <table> As tabelas estão divididas por:  

Linhas – tag <tr> (tr = table row, linha da tabela) Células – tag <td> (td = table data, célula da tabela com informação)

A tag <td> pode conter:     

Texto Imagens Listas Tabelas Etc...


Criar tabelas <html> <body> <p> aqui estรก uma tabela</p> <table border="1"> <tr><td>verde</td><td>azul</td><td> branco</td></tr> <tr><td>amarelo</td><td>branco</td>< td></td></tr> </table> </body> </html>


Exemplo - Tabelas <html> <head> </head> <body> <table border="1"> <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> <tr> <td>linha 2, célula 1</td> <td>linha 2, célula 2</td> </tr> </table> </body> </html>


Tabelas mais complexas <table border="1"> <tr> <td rowspan="2">Telefone:</td> <td>555 777 854</td></tr> <tr> <td>222 888 818</td></tr> </table>


Toca a trabalhar... tabela.htm

11 M贸dulo

Nota

Redes

Nota final


Frames


Frames 

Consegue-se visualizar mais do que um documento HTML na mesma janela de um browser; Cada documento HTML é chamado de frame; Cada frame é independente de todas as outras.


Tag - frameset 

A tag <frameset> define como se divide a janela em frames; Cada frameset define um conjunto de linhas (rows) ou colunas (cols); O valor atribuído às linhas ou colunas indica a área que estas ocupam no ecrã.


Tag - frame 

A tag <frame> define qual o documento HTML vai ser colocado em cada frame; Exemplo: <frameset cols="25%,75%">    <frame name=“topo” src="frame_a.htm"> <frame name=“principal” src="frame_b.htm"> </frameset>

Nota: O tamanho ocupado pelas frames podem também ser definidas por pixeis (cols=200,500) e uma das colunas pode ser definida para ocupar o espaço restante da janela (cols=25%,*).


Frames <html> <frameset cols="25%,50%,25%"> <frame src="ficheiro1.html"> <frame src="ficheiro2.html"> <frame src="ficheiro3.html"> </frameset> </html> Para criar molduras horizontais substituir a linha 2 por: <frameset rows="25%,50%,25%">


Criar apenas 2 frames <frameset cols="25%,75%"> <frame src="ficheiro1.html"> <frame src="ficheiro2.html"> </frameset> Molduras com mecanismo de navegação: <html> <frameset cols="120,*"> <frame src="indice.html"> <frame src="conteudo1.html" name="mostra"> </frameset> </html>


ď ş

Podemos criar um conjunto de frames de forma a conseguir o seguinte layout:


Toca a trabalhar...

50% - Horizontal

25% - Vertical

75% - Vertical


Formulรกrios


Criar formulรกrios <html><body> <form> Nome: <input type="text" name="nome"> <br> Apelido: <input type="text" name="apelido"> </form> </body></html>


Receber informação do visitante através do formulário. <html><body> <form action="mailto:endereco@algures.com" method="post" enctype="text/plain"> Nome: <input type="text" name="nome"><br> Masculino: <input type="radio" checked name="sexo" value="M"> <br> Feminino: <input type="radio" name="sexo" value="F"> <br> <select name="auto"> <option value="volvo">Volvo <option value="saab" selected>Saab <option value="audi">Audi </select> <br> <input type="reset" value="Limpar"> <input type="submit" value="Enviar"> </form> </body></html>


Redes de comunicação mód 4 (html)  
Advertisement
Read more
Read more
Similar to
Popular now
Just for you