You are on page 1of 26

HTML

HTML
CSS
Javascript
ASP
ASP.NET
PHP
JAVA
HTML O html é a linguagem básica da WWW. A maioria dos
documentos da Internet encontar-se escrita em HTML,
dai a sua importância.

O HTML é uma linguagem de marcas como <p>,</p>,


<table>,<form> e outras cujo significado se ira explicar.
HTML ESTRUTURA DO CODIGO

O Código tem uma estrutura predefinida que utiliza marcas


como <html>, <head>, <body>. Estas devem ser
fechadas usando / assim devemos fechar as marcas

</html>, </head>, </body>

Os conteúdos HTML são colocados entre as marcas:

<body> e </body>
HTML <html>
<head>
<title>
um título para o documento
</title>
</head>
<body>
Este é o seu primeiro documento feito em HTML.
</body>
</html>

A estrutura inicia-se com <html> e acaba com </html>.


O conteúdo do cabeçalho, entre <head> e </head>não e visível.
O conteúdo, entre <title> e </title> aparece na barra de titulo do navegador.
O conteúdo apresentado, entre <body> e </body> é o texto :
Este é o seu primeiro documento feito em HTML
HTML FORMATAR TEXTO
O texto pode ser formatado inserindo-o entre as
marcas adequadas:

<html> Todas as marcas devem ter


<body> o fecho correspondente
<b>Este texto aparece a negrito</b> é indiferente colocar as
<i> Este texto aparece em itálico marcas na mesma linha ou
</i> não.
O texto seguinte aparece
<sup> sobrescrito </sup>
</body>
</html>
SEPARAR LINHAS NO TEXTO
HTML Para criar mudanças de linha, usamos marcas separadoras, como
<br>, ou um par separador <p> </p>

<html><head><title></title></head>
<body>
<p> esta linha e a seguinte
não aparecem separadas</p>
<p> esta linha e a seguinte </p>
<p> já aparecem separadas</p>
esta linha e a seguinte <br>também
embora com um espaço mais pequeno

<pre> A marca pre


permite apresentar este texto tal e qual está escrito
</pre>
</body>
</html>
HTML TIPOS DE LETRA, TAMANHO E COR

O Texto é formatado utilizando o parâmetro style na


marca <p>
<html><body>
<p> O texto da linha seguinte </p>
<p style="font-family:verdana; font-size:100%; color:blue">
aparece formatado com outra cor e fonte
</p>
</body></html>

Ao parâmetro font-family atribui-se o valor Verdana


Ao parâmetro font-size o valor 100%
Ao parâmetro color o valor blue
CODIGOS DE CORES EM HTML
HTML
Em Html utilizamos a especificação no formato RGB
com a notação #RRGGBB

<p style="color: #FF0000; margin-left: 20px">


Isto é um parágrafo Linha com texto vermelho
</p

<html> <head>
<style type="text/css"> Pagina com cor de fundo
body {background-color: #CC00CC}
p {margin-left: 20px}
</style>
</head> <body> </body> </html>
HTML • Por aqui as cores
HIPERLIGAÇÕES
HTML
<html> <body>
<p>
<a href="ficheiro1.htm">este texto</a> liga a um ficheiro </p>
<p>
<a href="http://www.clix.pt/">este texto</a> liga a um
sítio na WWW </p>
<p>
<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
HTML
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>
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:
<img src="metal.gif" border="0" width="50" height="100"> </p>

<p>Inserir uma imagem em movimento:


<img src="agua.gif" border="0" width="50" height="100"> </p>

<p>Inserir uma imagem de outra pasta:


<img src="../imagens/arvore.gif" width="50" height="100"> </p>

<p>Inserir uma imagem da WWW:


<img src="http://web.mediateca.info/imagens/fogo.gif" width="50" height="100"> </p>
</body> </html>
FORMATAR E ALINHAR IMAGENS COM TEXTO
HTML
<html><body>
<p> <img src =" imagem7.jpg " width="100" height="50"> uma imagem antes do texto
</p>
<p>uma imagem depois do texto <img src =" imagem8.jpg " width="100" height="50">
</p>
<p> <img src ="imagem1.jpg" align ="left" width="100" height="50">
Um parágrafo com uma imagem, em que a imagem está à esquerda graças ao atributo
align="left".
</p>
<p> <img src ="imagem2.jpg" align ="right" width="100" height="50">
Um parágrafo com uma imagem, em que a imagem está à direita graças ao atributo
align="right". </p>
<p> Uma imagem <img src ="imagem3.jpg" align="bottom" width="100" height="50">
no meio do texto alinhada por baixo</p>
<p> Uma imagem <img src ="imagem4.jpg " align="middle" width="100" height="50">
no meio do texto, a meia altura deste</p>
<p> Uma imagem <img src ="imagem5.jpg" align="top" width="100" height="50"> no
texto, alinhada por cima </p>
<p>Note-se que, por omissão, o alinhamento é feito por baixo:</p>
<p> uma imagem <img src ="imagem6.jpg " width="100" height="50"> no texto </p>
</body></html>
INSERIR IMAGENS COM HIPERLIGAÇÕES
HTML com a marca img e o correspondente parâmetro src

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

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

<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>
HTML ENDEREÇOS ABSOLUTOS E RELATIVOS

Existe muitas das veses a anecessidade de, a partir de um


ficheiro, indicar a localização de um outro ficheiro.
A localização de um ficheiro pode ser dada pelo seu URL ou
seja pelo endereço na WWW.

<a href=“http://webmail.sapo.pt/login.php3”>este
texto</a>
Liga a um sitio na WWW.</p>
HTML Referencia a imagens ou outros objectos.

As imagens podem ser indicadas pelo seu caminho obsoleto


ou relativo.

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

<p>Inserir uma imagem de outra pasta:


<img src="../imagens/cafe.gif" width="50" height="100"> </p>

<p>Referência absoluta a uma imagem:


<img src="/imagens/limonada.gif" width="50" height="80"> </p>

</body> </html>
HTML REFERENCIAS AO DOCUMENTO HTML

Tal como as imagens as hiperligações podem ter um


caminho relativo ou absoluto.

<html> <body>
<p>
<a href="/pasta/subpasta/ficheiro1.htm">este texto</a> liga-se a
um ficheiro usando um caminho absoluto </p>
<p>
<a href="../ficheiros/ficheiro2.htm">este texto</a> liga-se a um
ficheiro usando um caminho relativo </p>
</body> </html>
HTML 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>

Uma tabela com 2 linhas e 3 colunas


Para esconder as linhas da tabela substituir <table border="1"
Por <table border=“0">
HTML Criar tabelas dentro de tabelas

<html><body>
<p> aqui está uma tabela</p>
<table border="1"><tr>
<td><table
border="1"><tr><td>Carlos</td></tr><tr><td>
&nbsp;</td></tr></table></td>
<td>Ana</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
</body></html>
HTML Tabelas mais complexas

<html><body>
<p> aqui está a tabela</p>
<p> tem 3 linhas e 4 colunas</p>
<table border="1" bgcolor="red">
<tr><th>título 1</th><th colspan="3">título 2</th></tr>
<tr> <td bgcolor="blue">texto 1</td > <td
background="bola.jpg" >
</td><td>texto2</td><td>texto 3</td></tr>
<tr><td align="left" >texto 4</td> <td align="right">texto
5 </td>
<td>&nbsp&nbsp&nbsp texto 6
&nbsp&nbsp&nbsp&nbsp</td>
<td></td></tr> </table></body></html>
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>

Para dispor diversos elementos gráficos –blocos de texto


imagens numa pagina recorre-se frequentemente a tabelas
colocando esses elementos no interior das células.
HTML 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 <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>
HTML Molduras

<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 molduras
HTML
<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>
HTML O conteúdo do indice.htm é:

<html> <body>
<a href ="conteudo1.html" target ="mostra ">
Moldura 1</a><br>
<a href ="conteudo2.html" target ="mostra ">
Moldura 2</a><br>
<a href ="conteudo3.html" target ="mostra ">
Moldura 3</a><br>
</body></html>

You might also like