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

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

PROGRAMAÇÃO WEB HTML. O que é  Hyper Text Markup Language (Linguagem de formatação de Hiper-Texto)  Linguagem de formatação para disseminação de conteúdo.

Apresentações semelhantes


Apresentação em tema: "PROGRAMAÇÃO WEB HTML. O que é  Hyper Text Markup Language (Linguagem de formatação de Hiper-Texto)  Linguagem de formatação para disseminação de conteúdo."— Transcrição da apresentação:

1 PROGRAMAÇÃO WEB HTML

2 O que é  Hyper Text Markup Language (Linguagem de formatação de Hiper-Texto)  Linguagem de formatação para disseminação de conteúdo.  Padrão nos navegadores utiliza o protocolo HTTP do TCP/IP.

3 Características  Não e uma linguagem de programação, por este motivo não tem regras de sintaxe.  Ela é interpretada pelo navegador em tempo de execução  Utiliza a tecnologia CSS para auxiliar a formatação padronizada entre página.  Utiliza o javascript para auxiliar na validação de formulários e melhor a navegabilidade.

4 TAGS  O html é composto por tags (etiquetas) que identificam ao navegador como formatar um determinado conteúdo, podemos dividir em 3 categorias:  Tags de Estrutura – São responsáveis por delimitar seções e espaços dentro da página.  Tags de formatação – fornecem a formatação direta de cor, fonte e estilo de conteúdo.  Tags de Objeto – coletam dados de um formulário, e permitem integração com o javascript.

5 Tags de Estrutura - html   Identificam o inicio e o fim de um página.  Exemplo: Minha Primeira Página Ola mundo !

6 Tags de Estrutura – head, title   Área para publicação de informações sobre a página que auxiliam a indexação por buscadores.   Define o titulo da página que aparece no topo dos navegadores.  Exemplo: Minha Primeira Página Ola mundo !

7 Tags de Estrutura - meta 

8 Tags de Estrutura - body   Define o inicio e fim do corpo de uma página  Exemplo: Minha Primeira Página Ola mundo !

9 Tag de Estrutura - p   Define um paragrafo  Exemplo: Minha Primeira Página Ola mundo !

10 Tag de Estrutura - br   Quebra de linha  Exemplo: Minha Primeira Página Ola mundo ! Minha primeira página

11 Tags de Estrutura – h1...h6   Definição de títulos  Podem ir de 1 ate 6  Exemplo: Minha Primeira Página Titulo Tipo 1 Ola mundo ! Minha primeira página

12 Tags de Estrutura -div   Definem uma área isolada de formatação na página  Exemplo: Minha Primeira Página Ola mundo ! Minha primeira página Menu

13 Tags de Estrutura - table   Tag para criação de tabelas   Table Row - Linha de tabla   Table Detail – coluna de tabela

14 Tag de Estrutura - table  Exemplo: Minha Primeira Página Azul Verde Amarelo

15 Tags de Estrutura - br  Comentários  Para colocar um comentário na página que não será exibido pelo navegado  Exemplo: Minha Primeira Página Ola mundo ! Minha primeira página

16 Tags de Formatação  São tags que alteram a formatação de um conteúdo estático  Exe: Cor, estitlo de fonte, cor de letra etc.

17 Tags de Formatação – b, i, u, s  Conteúdo - Negrito / Bold  Conteúdo - Italico / Italic  Conteúdo - sublinhado / Underline  Conteúdo -riscado / Strike

18 Tags de Formatação - font  Tag Font – Altera a formatação de cor, fonte e tamanho de um conteudo. CONTEUDO

19 Tags de Formatação - font  Atributos  Color – Nome da cor ou valor em hexadecimal Exe: #ff0000  Size – tamanho da fonte, geralmente descrito em pixel: 14px  Face – nome da fonte exe: verdana

20 Tags de Formatação - ul  Lista de tópicos azul verde amarelo branco

21 Tags de formatação - ol  Lista ordenada Maça Laranja Manga

22 Tags de Formatação - a  Link ou ancora, redireciona a navegação para outra página ou documento Link externo  Atributos  href : caminho local ou virtual  Target : local de carga do destino do link

23 Tags de Objetos  São tags para coletar dados de formulário da navegação do cliente.  Geralmente estes dados são enviados para um servidor de aplicação para serem processado.

24 Tags de Objetos - Text  Caixa de texto

25 Tags de Objetos - Text  Atributos da caixa de texto  Id : define o nome do objeto  Size : tamanho em exibição e colunas  Maxlength: quantidade maxima de caracteres digitados  Value : valor pre definido  Readonly : trava a digitação de um conteudo

26 Tags de Objetos - Password  Password – permite a digitação de um texto oculto por símbolos.  Atributos  Id : identifica o objeto na página  Size: tamanho em colunas da caixa de texto  Maxlength: quantidade máxima de caracteres digitados.  Value: texto pré informado

27 Tags de Objetos - Hidden  Utilizada para armazenar dados que não serão exibidos belo cliente  Atributos  Id : identificação do objeto  Value: dado associado ao objeto

28 Tags de Objetos - Checkbox  Utilizado para coletar uma informação afirmativa ou negativa, não permite associação em grupos.  Atributos  Id : identifica o objeto na página  Checked : quando informado vem pré selecionado

29 Tags de Objetos - Radio  Utilizado para coletar uma informação optativa permitindo a associação em grupos de objetos. M F  Atributos  Id: identificação do objeto na página  Name: nome do grupo relacionado, sem este atributo os objetos trabalham isolados.  Checked : quando informado a opção vem pré selecionada

30 Tags de Objetos - Button  Cria um botão, onde pode ser associado eventos  Atributos  Id : identifica o objeto na página  Value: texto exibido na tela

31 Tags de Objetos - Textarea  Caixa para textos extensos texto pré definido  Atributos  Id : identifica o objeto na página  Rows: quantidade de linhas a serem exibidas  Cols: quantidade de colunas a serem exibidas

32 Tags de Objetos - Select  Caixa de seleção composta Fatec Ipiranga Fatec ZS Fatec SC  Atributos Id : identifica o objeto na página conteudo : item da seleção Ipiranga : o atributo value permite associar um valor diferente ao texto exibido.

33 Tags de Objetos - Img  Objeto de imagem Koala


Carregar ppt "PROGRAMAÇÃO WEB HTML. O que é  Hyper Text Markup Language (Linguagem de formatação de Hiper-Texto)  Linguagem de formatação para disseminação de conteúdo."

Apresentações semelhantes


Anúncios Google