Amirton Chagas http://amirton.wordpress.com [email protected] 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. Troca de informações Internet CERN Tim Berners Lee WWW e HTML Clientes Servidores Conteúdo HTML Imagens Flash http://public.web.cern.ch/public/en/About/WebWork-en.html 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 <html> <head> <title>Olá Mundo!</title> </head> <body> <h1>Hello World!</h1> </body> </html> 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: <title>Hello World!</title> Podem ter atributos: <h1 class=“headerPr” /> Tag html Tag head ▪ Dados do cabeçalho Tag body ▪ Conteúdo do documento <html> <head> <title>Olá Mundo!</title> </head> <body> <h1>Hello World!</h1> </body> </html> 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” 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 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 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 <p> cria um parágrafo, com espaçamento inferior e superior <br /> 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. <div> <h1>Curso Pacote Web</h1> <p>Este curso aborda <span class=“assunto”>HTML</span>, <span class=“assunto”>CSS</span> e outras tecnologias. </div> Ex: Uma linha: <!-- comentário -> Várias linhas: <!-Isto não vai ser interpretado pelo browser mesmo que tenha uma tag como <p>, <div>, <body> ou qualquer outra --> Insere uma imagem no documento Atributos: src alt width Cria um hiperlink Atributos para outra página href para uma outra seção na name mesma página target ▪ ▪ ▪ ▪ _blank _parent _self _top Criação de listas Bullet (<ul>, unordered list) Ordered (<ol>) Usada para definir uma tabela <tr> - Cria uma linha <td> - 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 <html> 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.
Download
