Amirton Chagas

Apresentação em tema: "Amirton Chagas"— Transcrição da apresentação:

1 Amirton Chagas http://amirton.wordpress.com amirton@proativasolucoes.com

2 Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/lice nses/by/2.5/br/ ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA. http://creativecommons.org/lice nses/by/2.5/br/

3  Troca de informações  Internet  CERN  Tim Berners Lee  WWW e HTML

4  Clientes  Servidores  Conteúdo  HTML  Imagens  Flash http://public.web.cern.ch/public/en/About/WebWork-en.html

5  HyperText Markup Language  Define o conteúdo da página  Não tem lógica de programação  Não oferece dinâmica  Atualmente, não se preocupa com a apresentação do conteúdo  CSS

6 Olá Mundo! Hello World!

7  Highlight em tags  Autocomplete para HTML, CSS, Javascript…  Mostra o que funciona em cada browser  Render engine do IE e FF integradas  Plugins para trabalhar com outras linguagens  FREE!!!  Aumento de produtividade!

8  Etiquetas usadas para marcar o conteúdo  Seguem uma estrutura hierárquica  Importante escolher a tag correta  Browser  Search engines  Consumo de banda

9  Podem ter dados:  Hello World!  Podem ter atributos: 

10  Tag html  Tag head ▪ Dados do cabeçalho  Tag body ▪ Conteúdo do documento Olá Mundo! Hello World!

11  Marca o cabeçalho do documento  Contém informações como:  Título  Links para folhas de estilo  Metadados  Scripts

12  Declara o título da página  IMPORTANTE  O título não é apenas o que vai aparecer na barra de título do browser…  Ele é uma das partes mais relevantes para ferramentas de busca!  Escolha o título de suas páginas com cuidado

13  Insere metadados na página  Autor  Palavras-chave  Descrição  “Conversa” com search engines  name=“googlebot”  name=“robots”  http://www.google.com/su pport/webmasters/bin/ans wer.py?hl=br&answer=798 12 http://www.google.com/su pport/webmasters/bin/ans wer.py?hl=br&answer=798 12  Atributos:  http-equiv ▪ content-type ▪ expires ▪ refresh ▪ set-cookie  name ▪ author ▪ description ▪ keywords

14  Define um relacionamento entre diferentes documentos  Não cria hiperlinks!  É processado pelo browser (ou search engine), mas não é renderizado  Atributos  href  rel ▪ next ▪ prev ▪ stylesheet Referência completa: http://www.w3schools.com/tags/tag_link.asp

15  Define o corpo do documento  É a tag que contém o conteúdo que será mostrado para o usuário

16  Permitem a organização do documento em seções  De maneira similar a um livro  Importante utilizar corretamente  Muito relevantes para Search Engines  Browsers renderizam de maneira própria  CSS deve alterar o design padrão do browser

17  cria um parágrafo, com espaçamento inferior e superior  quebra a linha, sem inserir espaçamento

18  Cria um bloco de conteúdo  Usado para criar divisões lógicas  Uma div pode ter uma id ▪ Estilos em CSS para um bloco específico ▪ Estilos em CSS para vários blocos do mesmo tipo ▪ Manipulação via JavaScript do conteúdo e apresentação do bloco  Cria um “parágrafo”  Por default, só uma div por linha  CSS pode mudar isto

19  Não faz nada a nível de apresentação  Ahn?  É usado para aplicar formatação (vinda de CSS) em partes da página.  Ex: Curso Pacote Web Este curso aborda HTML, CSS e outras tecnologias.

20  Uma linha:  Várias linhas:,, ou qualquer outra -->

21

22  Insere uma imagem no documento  Atributos:  src  alt  width

23  Cria um hiperlink  para outra página  para uma outra seção na mesma página  Atributos  href  name  target ▪ _blank ▪ _parent ▪ _self ▪ _top

24  Criação de listas  Bullet (, unordered list)  Ordered ( )

25  Usada para definir uma tabela  - Cria uma linha  - Cria uma coluna  O número de colunas deve ser o mesmo em todas as linhas  Usa-se o atributo colspan para mesclar colunas em uma linha  rowspan mescla linhas em uma coluna

26  Ver arquivo ex2-paginaSimples.html

27  Formulários para capturar dados do usuário  Podem ser usados por frameworks  ASP.NET  Permitem o envio de dados do cliente para o servidor  Atributos  action  method  name

28  Campo do formulário  Única tag para vários tipos de entrada de dados  Atributos:  type ▪ text ▪ password ▪ submit ▪ reset ▪ checkbox ▪ radio ▪ file ▪ …  disabled ▪ disabled  readonly ▪ readonly  name  value

29  Campo de texto para várias linhas  Atributos  cols  rows

30  “Título” de um campo de um form  Ganho de usabilidade para o usuário  Clique no título é interpretado como um clique no controle  Melhor de se formatar com CSS  Atributos  for ▪ O valor deve ser igual à id do campo ao qual o label está relacionado

31

32  Evitar usar frames  “For a de moda”  Pode dificultar a navegação  Problemas para impressão, bookmark, histórico

33  Ferramentas de busca trazem a maior parte do tráfego  Seja amigável com elas  Use as tags corretas  h1, h2, … h6  div, span  table, thead  SEMPRE preencha o alt de suas imagens  Pessoas com deficiências visuais agradecem

34  HTML 4.01 Strict  HTML 4.01 Transitional  HTML 4.01 Frameset  XHTML 1.0 Strict  XHTML 1.0 Transitional  XHTML 1.0 Frameset  XHTML 1.1  Quirks Mode

35  HTML é baseado em SGML  Não obriga o fechamento de todas as tags  Mais dificil de ser interpretado por máquinas  XHTML é HTML compatível com XML  Toda tag aberta deve ser fechada  Tag ganha o atributo xmlns  Deve-se incluir a DTD da versão de XHTML a ser usada

36  HTML é estático  Conteúdo muito misturado à apresentação  DHTML:  União de HTML, CSS e JavaScript para permitir páginas dinâmicas do lado do cliente, com separação do conteúdo da apresentação.  Alterações totalmente client-side, com base em ações do usuário ou dados coletdos do browser  Diferente de WebSite Dinâmico, que engloba além disso, conceitos de processamento server-side

37  A Licença Simplificada não é uma licença propriamente dita. Ela é apenas uma referência útil para entender a Licença Jurídica (a licença integral) - ela é uma expressão dos seus termos-chave que pode ser compreendida por qualquer pessoa. A Licença Simplifica em si não tem valor legal e seu conteúdo não aparece na licença integral.  O Creative Commons não é um escritório de advocacia e não presta serviços jurídicos. A distribuição, exibição ou inclusão de links para esta Licença Simplificada não estabelece qualquer relação advocatícia.