Anda di halaman 1dari 21

HTML

HTML Hyper Text Markup Language

verso 1.0

Ana Lucas 2007

HTML

O que instalar e como


Para instalar o Apache, PHP e MySQL fazer o download a partir da
distribuio:
http://www.apachefriends.org/en/xampp.html
Instalar em C:\

verso 1.0

Ana Lucas 2007

HTML

Como correr os scripts no Internet


Explorer
Criar uma pasta Testes em:
C:\Xampp\htdocs\

Correr no Internet Explorer com o seguinte endereo:


http://127.0.0.1/testes/nome do script
ou
http://localhost/testes/nome do script

verso 1.0

Ana Lucas 2007

HTML

Documento bsico e os seus


componentes
A estrutura de um documento HTML apresenta os seguintes
componentes:
<HTML>
<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>
<BODY> texto, imagem, links, ...
</BODY>
</HTML>
As etiquetas HTML no so sensveis a maiusculas e minusculas.
Traduzindo: tanto faz escrever <HTML>, <Html>, <html>,
<HtMl>, ...

verso 1.0

Ana Lucas 2007

HTML

Cabealhos
H seis nveis de cabealhos em HTML, de <H1> a <H6>:
<H1>Este um cabealho de nvel 1</H1><H2>Este um cabealho de nvel 2</H2>
<H3>Este um cabealho de nvel 3</H3><H4>Este um cabealho de nvel 4</H4>
<H5>Este um cabealho de nvel 5</H5><H6>Este um cabealho de nvel 6</H6>
Esses cabealhos so mostrados da seguinte forma:

Este um cabealho de nvel 1


Este um cabealho de nvel 2
Este um cabealho de nvel 3
Este um cabealho de nvel 4
Este um cabealho de nvel 5
Este um cabealho de nvel 6

verso 1.0

Ana Lucas 2007

HTML

Quebras de Linha e Pargrafos


Quebras de Linha:
Quando queremos mudar de linha, usamos o elemento <BR>. Isso
s necessrio quando queremos uma quebra de linha em
determinado ponto, pois os browsers j quebram as linhas
automaticamente para apresentar os textos.
Com sucessivos <BR>, podemos inserir diversas linhas em branco
nos documentos.

Pargrafos
Para separar blocos de texto, usamos o elemento <P>
Pargrafo 1<P>Pargrafo 2.
verso 1.0

Ana Lucas 2007

HTML

Listas no numeradas
<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja
necessrio preocupar-se com a formatao das margens de texto
<LI>item
</UL>

item de uma lista


item de uma lista, que pode ser to grande quanto se queira, sem
que seja necessrio preocupar-se com a formatao das margens
de texto
item

verso 1.0

Ana Lucas 2007

HTML

Listas numeradas
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que
seja necessrio se preocupar com a formatao das margens de texto
<LI>item de lista numerada
</OL>

1. item de uma lista numerada


2. item de uma lista numerada, que pode ser to grande quanto se
queira, sem que seja necessrio preocupar-se com a formatao
das margens de texto
3. item de lista numerada
verso 1.0

Ana Lucas 2007

HTML

Estilos
<B>
Quando disponvel no browser, mostrado em negrito (nalguns
browsers, pode aparecer sublinhado)
<I>
Itlico (em alguns casos, caracteres inclinados)
<TT>
Tipo teletype - fonte de espaamento fixo.
<U>
Sublinhado. Deve ser usado com cuidado, pois confunde-se com a
apresentao de links.

verso 1.0

Ana Lucas 2007

HTML

Comentrios

<!- Isto um Comentrio -->

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

Um formulrio um modelo para a entrada de um conjunto de


dados. O primeiro passo para fazer formulrios aprender as
etiquetas que desenham as janelas de entrada de dados, para
depois trabalharmos com os scripts, que so os programas que
tratam esses dados, oferecendo os servios desejados (acesso a
base de dados, envio de e-mail, etc.).
O elemento <FORM> delimita um formulrio e contm uma
sequncia de elementos de entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>


Os atributos de FORM que nos interessam agora so:
ACTION
Especifica o URL do script ao qual sero enviados os dados do
formulrio.
METHOD
Seleciona um mtodo para aceder ao URL de aco. Os mtodos usados
actualmente so GET e POST. Ambos os mtodos transferem dados do
browser para o servidor, com a seguinte diferena bsica:
POST
os dados entrados fazem parte do corpo da mensagem enviada para o
servidor;
transfere grande quantidade de dados.
GET
os dados entrados fazem parte do URL (endereo) associado consulta
enviada para o servidor;
suporta at 128 caracteres.
verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)
INPUT
O campo <INPUT> tem um atributo TYPE, ao qual atribumos seis
valores diferentes (text, password, submit, checkbox, radio e reset)
para gerar seis tipos diferentes de entrada de dados.

Campo de dados texto:


Nome: <INPUT TYPE=TEXT NAME="Nome">
produz o resultado:
Nome:

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)
INPUT
Campo de dados password:
Entrada de texto na qual os caracteres so escondidos por
asteriscos.
Login: <INPUT TYPE=TEXT NAME=login><br>
Password: <INPUT TYPE=PASSWORD NAME="senha">
Login:
Password:

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

VALUE
VALUE pode ser usado para dar um valor inicial a um campo de tipo texto ou senha.
Desse modo, se o utilizador no preencher este campo, ser adoptado este valor
padro. Se o utilizador quiser entrar dados, simplesmente apaga o que j estiver
escrito e escreve as suas informaes.
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">

Seu nome
Nome:

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

INPUT
SUBMIT apresenta o boto que causa o envio dos dados de
entrada para o servidor:
<INPUT TYPE=SUBMIT VALUE="Envia mensagem">

Envia mensagem

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

Exemplo:
<form action=author.php" method= "post">
Enter the new author:<br>
Name: <input type=text name="name" ><br>
Email: <input type=text name="email" ><br>
<input type=submit value=GO!" >
</form>

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

Exemplo: author.php
<?php
$name=$_POST['name'];
$email=$_POST['email'];
echo $name . "<BR>". $email;
?>

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)

Exemplo: cdigo html e php no mesmo ficheiro


<form action=<?php echo $_SERVER [PHP_SELF]; ?>" method= "post">
Enter the new author:<br>
Name: <input type=text name="name" ><br>
Email: <input type=text name="email" ><br>
<input type=submit value=GO!" >
</form>

verso 1.0

Ana Lucas 2007

HTML

Forms (Formulrios)
SELECT:
<SELECT> apresenta uma lista de valores, atravs de campos OPTION.
Apresenta uma combo box ao utilizador.
Exemplo:
<SELECT NAME="sabor">
<OPTION>Abacaxi
<OPTION>Creme
<OPTION>Morango
<OPTION>Chocolate
</SELECT>

verso 1.0

Ana Lucas 2007

HTML

Links (Ligaes)
Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) a
um outro documento ou endereo.So as ligaes de hipertexto - tambm
chamadas hypertext links ou hiperlinks ou simplesmente links.
Para inserir um link num documento, utilizamos a etiqueta <A>, da seguinte
forma:
<A HREF = "arq_destino">ncora</A>
onde:
arq_destino
o URL do documento de destino;
ncora
o texto ou imagem que servir de ligao hipertexto do documento sendo
apresentado para o documento de destino.
Exemplo:
<a href="http://www.iseg.utl.pt"> ISEG </a>
verso 1.0

Ana Lucas 2007