HTML
© Ana Lucas– 2007versão 1.0
HTML – Hyper Text Markup Language
HTML
© Ana Lucas– 2007versão 1.0
O que instalar e como
Para instalar o Apache, PHP e MySQL fazer o download a partir da distribuição:
http://www.apachefriends.org/en/xampp.html
Instalar em C:\
HTML
© Ana Lucas– 2007versão 1.0
Como correr os scripts no Internet Explorer
Criar uma pasta Testes em:
C:\Xampp\htdocs\
Correr no Internet Explorer com o seguinte endereço:
http://127.0.0.1/testes/nome do script
ou
http://localhost/testes/nome do script
HTML
© Ana Lucas– 2007versão 1.0
Documento básico 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 não são sensíveis a maiusculas e minusculas.
Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
HTML
© Ana Lucas– 2007versão 1.0
Cabeçalhos
Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
<H1>Este é um cabeçalho de nível 1</H1><H2>Este é um cabeçalho de nível 2</H2><H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4><H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6>
Esses cabeçalhos são mostrados da seguinte forma:
Este é um cabeçalho de nível 1
Este é um cabeçalho de nível 2
Este é um cabeçalho de nível 3
Este é um cabeçalho de nível 4
Este é um cabeçalho de nível 5
Este é um cabeçalho de nível 6
HTML
© Ana Lucas– 2007versão 1.0
Quebras de Linha e Parágrafos
Quebras de Linha:
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário 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.
Parágrafos
Para separar blocos de texto, usamos o elemento <P>
Parágrafo 1<P>Parágrafo 2.
HTML
© Ana Lucas– 2007versão 1.0
Listas não numeradas
<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário preocupar-se com a formatação das margens de texto
<LI>item
</UL>
• item de uma lista
• item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário preocupar-se com a formatação das margens de texto
• item
HTML
© Ana Lucas– 2007versão 1.0
Listas numeradas
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação 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 tão grande quanto se
queira, sem que seja necessário preocupar-se com a formatação das margens de texto
3. item de lista numerada
HTML
© Ana Lucas– 2007versão 1.0
Estilos
<B> Quando disponível no browser, é mostrado em negrito (nalguns browsers, pode aparecer sublinhado)
<I> Itálico (em alguns casos, caracteres inclinados)
<TT> Tipo teletype - fonte de espaçamento fixo.
<U> Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de links.
HTML
© Ana Lucas– 2007versão 1.0
Comentários
<!–- Isto é um Comentário -->
HTML
© Ana Lucas– 2007versão 1.0
• Um formulário é um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelas de entrada de dados, para depois trabalharmos com os scripts, que são os programas que tratam esses dados, oferecendo os serviços desejados (acesso a base de dados, envio de e-mail, etc.).
• O elemento <FORM> delimita um formulário e contém uma sequência de elementos de entrada e de formatação do documento.
• <FORM ACTION="URL_de_script" METHOD=método>...</FORM>
Forms (Formulários)
HTML
© Ana Lucas– 2007versão 1.0
<FORM ACTION="URL_de_script" METHOD=método>...</FORM>
• Os atributos de FORM que nos interessam agora são: • ACTION
– Especifica o URL do script ao qual serão enviados os dados do formulário.
• METHOD – Seleciona um método para aceder ao URL de acção. Os métodos
usados actualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica:
• 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 (endereço) associado à consulta
enviada para o servidor; – suporta até 128 caracteres.
Forms (Formulários)
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
INPUT
O campo <INPUT> tem um atributo TYPE, ao qual atribuímos 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:
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
INPUT
Campo de dados password:
Entrada de texto na qual os caracteres são escondidos por asteriscos.
Login: <INPUT TYPE=TEXT NAME=“login”><br>Password: <INPUT TYPE=PASSWORD NAME="senha">
Login:
Password:
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
VALUE
VALUE pode ser usado para dar um valor inicial a um campo de tipo texto ou senha. Desse modo, se o utilizador não preencher este campo, será adoptado este valor padrão. Se o utilizador quiser entrar dados, simplesmente apaga o que já estiver escrito e escreve as suas informações.
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">
Nome:Seu nome
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
INPUT
SUBMIT apresenta o botão que causa o envio dos dados de entrada para o servidor:
<INPUT TYPE=SUBMIT VALUE="Envia mensagem">
Envia mensagem
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
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>
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
Exemplo: author.php
<?php
$name=$_POST['name'];$email=$_POST['email'];
echo $name . "<BR>". $email;
?>
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
Exemplo: código 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>
HTML
© Ana Lucas– 2007versão 1.0
Forms (Formulários)
SELECT:
<SELECT> apresenta uma lista de valores, através de campos OPTION.
Apresenta uma combo box ao utilizador.
Exemplo:
<SELECT NAME="sabor"><OPTION>Abacaxi<OPTION>Creme<OPTION>Morango<OPTION>Chocolate</SELECT>
HTML
© Ana Lucas– 2007versão 1.0
Links (Ligações)
Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a
um outro documento ou endereço.São as ligações de hipertexto - também
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 ligação hipertexto do documento
sendo apresentado para o documento de destino.
Exemplo:
<a href="http://www.iseg.utl.pt"> ISEG </a>