A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

HTML – Hyper Text Markup Language

Apresentações semelhantes


Apresentação em tema: "HTML – Hyper Text Markup Language"— Transcrição da apresentação:

1 HTML – Hyper Text Markup Language

2 O que instalar e como Para instalar o Apache, PHP e MySQL fazer o download a partir da distribuição: Instalar em C:\

3 Como correr os scripts no Internet Explorer
Criar uma pasta Testes em: C:\Xampp\htdocs\ Correr no Internet Explorer com o seguinte endereço: do script ou do script

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

5 Cabeçalhos Este é um cabeçalho de nível 1
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

6 Quebras de Linha e Parágrafos
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.

7 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

8 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> item de uma lista numerada 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 item de lista numerada

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

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

11 Forms (Formulários) 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 , 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>

12 Forms (Formulários) <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.

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

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

15 Forms (Formulários) VALUE Seu nome
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

16 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

17 Forms (Formulários) Exemplo:
<form action=“author.php" method= "post"> Enter the new author:<br> Name: <input type=text name="name" ><br> <input type=text name=" " ><br> <input type=submit value=“GO!" > </form>

18 Forms (Formulários) Exemplo: author.php <?php $name=$_POST['name'];
$ =$_POST[' ']; echo $name . "<BR>". $ ; ?>

19 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> <input type=text name=" " ><br> <input type=submit value=“GO!" > </form>

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

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


Carregar ppt "HTML – Hyper Text Markup Language"

Apresentações semelhantes


Anúncios Google