HTML © Ana Lucas– 2007versão 1.0 HTML – Hyper Text Markup Language.

HTML

© Ana Lucas– 2007versão 1.0

HTML – Hyper Text Markup Language

HTML


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


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


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


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






HTML


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


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


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


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


Comentários

<!–- Isto é um Comentário -->

HTML


• 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


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


HTML



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



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



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



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



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



Exemplo: author.php

<?php

$name=$_POST['name'];$email=$_POST['email'];

echo $name . "<BR>". $email;

?>

HTML



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



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


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>

HTML © Ana Lucas– 2007versão 1.0 HTML – Hyper Text Markup Language.

Documents

Transcript of HTML © Ana Lucas– 2007versão 1.0 HTML – Hyper Text Markup Language.