Amirton Chagas

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

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

 Clientes  Servidores  Conteúdo  HTML  Imagens  Flash

 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

Olá Mundo! Hello World!

 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!

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

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

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

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

 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

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

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

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

 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

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

 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

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

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

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

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

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

 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

 Ver arquivo ex2-paginaSimples.html

 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

 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

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

 “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

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

 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

 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

 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

 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

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