HISTÓRICO - aquabarra.com.braquabarra.com.br/educacao_fisica/8ano_Informatica_Unidade_III.pdf · uma metalinguagem através da qual se pode definir linguagens de marcação para

HTML

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime e SGML. HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiperligações. O padrão é independente de outros padrões de processamento de texto em geral. SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows, ou o TextEdit, do Macintosh. Para facilitar a produção de documentos, no mercado existem editores HTML específicos, com recursos sofisticados, que facilitam a realização de tarefas repetitivas, inserção de objetos, elaboração de tabelas e outros recursos. Basicamente dividem-se em dois tipos: - Editores de texto fonte: inserem automaticamente os marcadores, orientando a inserção de atributos e marcações. - Editores WYSIWYG: oferecem ambiente de edição com um "esboço" resultado final das marcações Um fator importante para o seu aprendizado é compreender seus conceitos, seus propósitos, e o que ela pode nos oferecer. Daí em diante, nossa criatividade é constantemente colocada à prova.

HISTÓRICO Foi desenvolvido em 1989 por Tim Berners-Lee, (físico britânico) em uma estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornar-se-ia a Internet) ganhou atenção mundial. As primeiras versões do HTML foram definidas com regras sintáticas flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web. Através do tempo, a utilização de ferramentas para autoria de HTML aumentou, assim como a tendência em tornar a sintaxe cada vez mais rígida. Apesar disso, por questões históricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar páginas web que estão longe de ser um código HTML válido. A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML1 para a Internet. A primeira publicação foi esboçada por Berners-Lee e Dan Connolly, e publicada em 1993 na IETF2 como uma aplicação formal para o SGML (com uma DTD

3 em SGML definindo a

gramática). A IETF criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML 2.0 em 1995. Desde 1996, as especificações HTML vêm sendo mantidas, com o auxílio de fabricantes de software, pela World Wide Web Consortium (W3C). Apesar disso, em 2000 a linguagem tornou-se também uma norma internacional (ISO/IEC 15445:2000).

1 O Standard Generalized Markup Language (SGML) é

uma metalinguagem através da qual se pode definir linguagens de marcação para documentos. 2 IETF (sigla em inglês de Internet Engineering Task

Force) é uma comunidade internacional ampla e aberta (técnicos, agências, fabricantes, fornecedores, pesquisadores) preocupada com a evolução da arquitetura da Internet e seu perfeito funcionamento. O IETF tem como missão identificar e propor soluções a questões/problemas relacionados à utilização da Internet, além de propor padronização das tecnologias e protocolos envolvidos. 3 Uma definição de tipo de documento (inglês:

document type definition, DTD) é um conjunto de declarações de marcação que definem um tipo de documento para uma linguagem de marcação da família da SGML (SGML, XML, HTML).

UI MARIA LENIR ARAÚJO MENESES

Prof° Esp. Leonardo Delgado

Unidade 03: HTML

Aluno: Data: / /

Leonardo de A. Delgado CREF. 001764-G/MA

Em 1999, a W3C publica a HTML 4.01. Uma errata ainda foi lançada em 2001. Desde a publicação do HTML 3.5 no final de 1997, o grupo de trabalho da W3C tem cada vez mais — e de 2002 a 2006, de forma exclusiva — focado no desenvolvimento do XHTML(eXtensible Hypertext Markup Language), uma especificação HTML baseada em XML(eXtensible Markup Language) que é considerada pela W3C como um sucessor do HTML. O XHTML faz uso de uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e estendido. Em janeiro de 2008 a W3C publicou a especificação do HTML5, a próxima versão do HTML, como Working Draft. Apesar de sua sintaxe ser semelhante a de SGML, o HTML5 abandonou qualquer tentativa de ser uma aplicação SGML e, definiu explicitamente sua própria serialização "html", além de uma alternativa baseada em XML, o XHTML5 Os seus comandos são chamados de tags ou elementos, essas tags, podem conter muitas opções ou atributos, para ajustar fontes, criar listas, mostrar imagens, entre outros tipos de formatações de páginas. Os documentos escritos em HTML são textos simples (ASCII), que possuem extensão.htm ou .html. Algumas das principais características da HTML são: - Formatação de documentos - Organização de listas - Capacidade de incluir hipertexto/hipermídia em documentos Web - Capacidade de incluir imagens clicáveis.

PRINCIPAIS EDITORES HTML Para escrever código HTML basta um simples editor de texto como o bloco de notas (notepad). Os principais são es seguintes: - Sublime Text 3: Considerado o melhor editor atualmente. Experimente usar a extensão Zen Coding em conjunto com ele e experimente o máximo da performance ao criar seus arquivos HTML. - Notepad ++: Outro excelente editor. Possui uma interface simples mas é bem poderoso também. - Dreamweaver: Um excelente editor para iniciantes. Cuidado com o modo Design. Evite de editar seu HTML por ele pois ele não gera um código muito semântico.

OS TAGS Os tags de HTML têm a função de informam ao navegador o que são os elementos que estão na página, atributos, valores e filhos (que podem ser outros elementos ou texto). Como em qualquer linguagem, os comandos têm uma sintaxe própria e seguem algumas regras:

- As Tags aparecem sempre entre os sinais de "menor que" (<) e "maior que" (>), também conhecidos como chevrons

4.

- As Tags são geralmente usadas aos pares, sendo que a Tag de finalização é precedida de uma barra (/). O formato genérico de uma tag é:

<nome da tag> texto</nome da tag>

Os atributos modificam os resultados padrões dos elementos e os valores caracterizam essa mudança. Exemplo de um elemento simples (não possui filhos):

<hr />5

Exemplo de um elemento composto (possui filhos): <a href="http://aquabarra.com.br/">Site da Aquabarra</a>

<a> é o marcador de abertura do link </a> é o marcador de fechamento href é o atributo onde é definido a url, que será acessada ao clicar no link. Outro exemplo de elemento composto (possui filhos): <p><a href="http://www.aquabarra.com.br " target="_self">

Site da Aquabarra </a></p>

p = marcador que define um parágrafo. a = marcador que define uma hiperligação. href = atributo que define a url da hiperligação. target = atributo que define a forma como a hiperligação será aberta. _self = valor do atributo Target que define que a hiperligação será aberta na mesma guia. / = define o fechamento do elemento

Sintaxe Básica A sintaxe básica ou HTML mínimo são especificadas da seguinte maneira:

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE></TITLE> </HEAD>

<BODY></BODY> </HTML>

4 É um sinal de pontuação duplo que se coloca em um

fragmento de texto, devendo ser traduzido como "divisa". Matematicamente também significa "menor que" e "maior que" 5 Destina-se a inserir uma Régua Horizontal (HR é a

abreviatura de Horizontal Rule – em inglês)

2


Os marcadores básicos de HTML, cuja presença é altamente recomendada nas páginas são: <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto. <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir atributos comuns a toda a página, como cor de fundo, margens, e outras formatações.

Obs.: Todo programa deve iniciar com o comando, tag, <html> e ser encerrado com o comando </html>. Esse par de comandos é essencial. Deve englobar todo o conteúdo da página para indicar ao navegador que se trata de um documento HTML. Os marcadores HTML não são sensíveis à caixa (case sensitive), portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.

DOCTYPE A primeira linha de todo documento HTML deve ter uma declaração de DOCTYPE. Nunca se esqueçam de sempre na primeira linha.

<!DOCTYPE HTML>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser. O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão de código a marcação foi escrita.

ELEMENTO <HTML> O elemento HTML é descrito pela tag <html>, e é o elemento raiz de todo documento HTML. Porém, como boa prática, vamos sempre usar as tags de abertura e fechamento para todos os elementos, salvo algumas exceções.

Atributo LANG O mais importante de estudarmos com relação ao elemento HTML não é o elemento em si, mas sim seu atributo lang. O atributo lang pode ser usado em quaisquer elementos do HTML, porém ele é especialmente importante para o elemento HTML, pois serve para definir o idioma predominante no documento.

No caso do nosso documento de exemplo, o idioma que estamos declarando é o pt-br, ou seja, português do Brasil.

<html lang=”pt-br”>

O valor do atributo lang pode ser apenas um código de idioma ou um código de idioma seguido de um código de país. Códigos de idioma devem seguir o padrão ISO-639-1 (códigos de duas letras) ou o ISO-639-2 (códigos de três letras). Você pode ver os valores possíveis em ambos os padrões na página de listagem de códigos de idioma, no site da biblioteca do congresso americano. Códigos de país com duas letras devem seguir o padrão ISO-3166. Não pode haver espaços dentro do atributo lang e os códigos de idioma e país devem ser separados por um hífem (-). Declarar o idioma base do documento no elemento HTML é importante e essa informação pode ser usada, por exemplo, por um leitor de tela, para selecionar o idioma correto em que o documento será lido ou por um mecanismo de busca para classificar corretamente uma página em seus índices.

CABEÇALHO OU SECÇÃO <HEAD></HEAD> O cabeçalho, ou secção <HEAD></HEAD>, são opcionais, ou seja, um programa HTML pode funcionar sem eles, mas é conveniente usá-los, pois esse elemento contém itens como: <title>: define o título da página, que é exibido na barra de título dos navegadores. <style type="text/css">: define formatação em CSS <script type="text/javascript">: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc. <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc.

Títulos do Documento ou Secção <TITLE></TITLE> O título ou a secção <TITLE></TITLE>, é um elemento do cabeçalho onde colocamos o título da pagina, é representa uma maneira para o usuário poder ver o título do documento, geralmente aparece na porção superior da pagina.

Figura 1: Título do documento

3


Folha de Estilos CSS ou seção <style></style> A folha de estilos estiliza e colocar diversas propriedades dentro do atributo style de cada tag dentro de uma página, segundo sua localização dentro da pagina, podem ser classificadas em três tipos: - Externas; - Incorporadas; - Inline. Folha de Estilo Externa Uma folha de estilo é dita externa, quando as regras CSS

6 são declaradas em um

documento a parte do documento HTML, isto é, a folha de estilo é um arquivo separado do arquivo html. Um arquivo de folha de estilo deve ser gravado com a extensão .css Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo). O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada a seguir. <head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head>

A sintaxe para importar uma folha de estilo chamada estilo.css é mostrada a seguir. <head> <style type="text/css"> @import url("estilo.css"); </style> </head>

O navegador "lê" as regras de estilo do arquivo estilo.css, e formata o documento de acordo com elas. Uma folha de estilo externa pode ser escrita em qualquer editor de texto e gravado com a codificação de caracteres utf-8. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css Folha de Estilo Incorporada Uma folha de estilo é dita incorporada ou interna, quando as regras CSS são

6 Cascading Style Sheets (CSS) é uma linguagem de

folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.

declaradas na seção head do próprio documento HTML. Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada. As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.

<head> <style rel="stylesheet" type="text/css"> body { background: #000; url(imagens/minhaimagem.gif); } h3 { color: #f00; } p { margin-left: 15px; padding:1.5em; } --> </style> </head>

O navegador "lê" as regras de estilo na própria página, e formata o documento de acordo com elas. Nota: Navegadores ignoram elementos desconhecidos. Isto significa que um navegador antigo que não suporte estilos, ignorará o elemento style, mas o conteúdo do elemento (as regras de estilo) será mostrado na tela. Para evitar que um navegador antigo mostre o conteúdo do elemento style coloque sinais de comentário HTML em volta das regras de estilo. Folha de Estilo Inline Uma folha de estilo é dita inline, quando as regras CSS são declaradas dentro da tag de abertura do elemento HTML com uso do atributo style. Estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens das folhas de estilo, pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. A sintaxe para aplicar estilo inline é mostrada a seguir:

<p style="color:#000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p>

4


Elemento <SCRIPT> A tag <SCRIPT>, inseri a linguagem de script, e pode também especificar qual é a linguagem ou versão do Script a ser usada, através do atributo “LANGUAGE=”. Exemplos: <SCRIPT LANGUAGE="JavaScript"> ou <SCRIPT LANGUAGE="VBScript"> A maioria dos browsers irão ignorar qualquer Script que ele não reconheça ou não suporte. Isto permite à você separar os scripts para diferentes versões de browsers. O elemento SCRIPT serve tanto para conter scripts inteiros quanto para referenciar um script externo. Geralmente esses scripts são escritos na linguagem JavaScript. Exemplo:

<script type="text/javascript"> window.onload = function() { alert(’Olá, mundo!’) } </script>

Desta forma, o script inteiro está contido no elemento SCRIPT. Apesar de ser, em geral, melhor colocar todos os elementos SCRIPT de uma página dentro do HEAD, isso não é obrigatório. Algumas vezes pode ser necessário que o script esteja localizado dentro do corpo (BODY) do documento e não há grandes problemas nisso. A outra forma de se usar o elemento SCRIPT é com o atributo src contendo a localização (URL) de um arquivo de script externo: <script type="text/javascript" src="/js/script.js"></script>

Desta forma o script contido no arquivo script.js será executado logo que o elemento SCRIPT for interpretado pelo browser. É importante notar que, de todos os elementos contidos no HEAD, apenas o SCRIPT precisa de uma tag de fechamento. E é vital que você nunca esqueça dessa tag de fechamento, pois pode fazer com que sua página apareça totalmente em branco em alguns browsers. Elemento <NOSCRIPT> O elemento NOSCRIPT serve para definir um conteúdo alternativo a um script, que apenas será exibido caso o user-agent usado não tenha suporte a scripts ou esteja com esse suporte desabilitado. Em geral, devemos desenvolver nossas páginas de forma que a camada de conteúdo seja, por si só, suficiente para que um usuário possa executar qualquer tarefa. Porém, em alguns casos, isso não é possível. Sendo assim, devemos usar o elemento NOSCRIPT para informar

ao usuário que seu user-agent não tem suporte a scripts e que uma determinada função da página só pode ser usada (ou visualizada) na presença deste suporte. Exemplo:

<noscript> <p>É necessário que haja suporte a javascript para que a função x bla bla bla</p> </noscript>

Assim como o elemento SCRIPT, o NOSCRIPT pode ocorrer tanto dentro do HEAD quanto dentro do BODY de um documento HTML.

Elemento <LINK> O elemento LINK define uma relação entre o nosso documento e outros documentos. Existem diversos tipos de relações que podem ser definidas. O tipo de relação entre os documentos é descrita pelos atributos rel e rev. Documentos Adjacentes e Índices Imagine um livro online. Você está escrevendo o documento que tem o conteúdo do capítulo 2. É interessante criar LINKs para o capítulo anterior, o próximo capítulo e o índice do livro. Esses LINKs podem ser usados, por exemplo, pelo browser, que pode fazer um pré-carregamento destas páginas enquanto estiver parado. Existe uma extensão para o Firefox que expõe, na barra de status, os LINKs presentes no documento. Chama-se Link Widgets. Exemplos:

<link rel="Next" href="/capitulo-2"> <link rel=”Previous” href=”/capitulo-1″ <link rel=”Index” href=”/”>

Pense: “O capítulo 2 é o próximo capítulo em relação a mim, que sou o capítulo 1″. rel na cabeça. Também seria certo, por exemplo:

<link rev="Previous" href="capitulo-2">

Ou seja: “Eu sou o capítulo anterior ao capítulo 2″. Pescou? Versões Alternativas O tipo mais comum de versão alternativa são os feeds RSS e ATOM.

<link rel="alternate" type="application/rss+xml" href="/feed">

Note o atributo type. Ele descreve o tipo do documento que estamos referenciando. No caso, um feed RSS. Caso não seja declarado, entende-se que seja do mesmo tipo que o documento onde se encontra o link, no caso, text/html.

5


Além de feeds, podemos ter outros tipos de versões alternativas. Um PDF, por exemplo: <link rel="alternate" type="application/pdf" media="print" href="arquivo.pdf">

Aqui entra em cena o atributo media, que define que este documento só fará sentido como uma versão alternativa, caso esta mídia esteja sendo usada. No nosso caso, print, ou seja, impressão.

Comentários O comentário incluído em um documento não será mostrado pelo Browser. Tem como função facilitar a leitura de quem quiser ver o código fonte (source). Algumas informações que deverão constar no seu documento: - Nome do autor; - Data de criação; - Editor de texto (que geralmente é colocado pelo próprio editor). Ele vem representado da seguinte forma:



Veja o exemplo:

 

A Secção <META></META> A secção <META>, ou Meta Informação (informações sobre informações), é usado principalmente pelo servidor para analisar (ou converter/traduzir) certos tipos de informações, como: - Palavras chaves do documento; - Índices de procura de palavras - Autor; - Data de expiração; - Data do design; A tag <META> tem a capacidade de atualizar-se numa hora específica ou mesmo conectar-se com outro documento HTML, dentro de um limite de tempo. O principal uso da tag <META> é preparar o site para os mecanismos de procura por determinadas palavras-chaves usados no site. Também com a função de atualização programada, pode ser usado como uma forma de apresentar as seqüências da pagina. Tipos de Meta Tags - HTTP-EQUIV: O atributo HTTP-EQUIV serve para controlar as ações do browser e também especificam melhor as informações, sendo que estas tem efeito equivalente quando são utilizadas diretamente na tag HTTP do cabeçalho. - NAME: Meta tags com o atributo “name” são utilizadas quando os tipos não correspondem com

o HTTP, ou seja, aquilo que não se adequar ao HTTP-EQUIV é utilizado no NAME. Mas alguns buscadores não chegam a fazer distinção sobre esses tipos de tags, por exemplo: A meta tag “keywords” pode ser utilizada tanto com o tipo “http-equiv” como o tipo “name”. - DUBLIN CORE: Com o aumento da complexidade e necessidade de customização de Meta Tags, foi idealizado e criado uma linguagem de meta tags própria, chamado de Dublin Core, que permite maior flexibilidade aos autores. Neste artigo não abordaremos detalhes do uso desta linguagem, mas vale a pena saber que existem outras alternativas ao uso de Meta Tags. Atributos e Especificações AUTHOR: Serve para identificar qual o nome do autor da página, geralmente o desenvolver ou a empresa desenvolvedora. Essa tag é utilizado com o tipo name=”author”.

<meta name="author" content="Leonardo Delgado" />

CACHE-CONTROL: Essa tag é utilizada no com o tipo “http-equiv” e é reconhecida apenas pelo http 1.1, e no seu atributo “content” (onde fica o conteúdo da tag) é permitido os seguintes valores: - Public: Os dados da página podem ser armazenados de forma compartilhada, isto é, será utilizado por diferentes usuários de um mesmo browser. - Private: É o contrário de public, o cache é armazenado para um específico usuário. - No-Cache: A página não é armazenada em Cache. - No-Store: É feito um cache temporário, a página não é arquivada. Como a tag cache-control é reconhecida apenas pelo HTTP 1.1, o uso do pragma:no-cache é importante caso pretenda-se usar o cache-control:no-cache, isso porque ambos tem o mesmo efeito mas não se sabe se o servidor é ou não compatível com o HTTP 1.1, por isso o uso de ambos é importante. Sintaxe <meta http-equiv="cache-control" content="no-cache" />

CONTENT-LANGUAGE: Utilizado para declarar as linguagens utilizadas no conteúdo da página. Esse atributo é útil para categorizar a página conforme o idioma. Este é utilizado em conjunto com o tipo “http-equiv”. Sintaxe <meta http-equiv="content-language" content="pt-br" />

CONTENT-TYPE: Esta tag é uma das mais importantes e jamais deve ser esquecida pois ela define qual o tipo de conteúdo que a página contém e qual a codificação deste conteúdo. Assim fica fácil saber se iremos abrir uma página HTML ou um arquivo PDF.

6


Sintaxe:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

COPYRIGHT: Como o próprio nome já sugere, este serve para declarar os direitos autorais da página em questão. Sintaxe: <meta name="copyright" content="© 2016 Aquabarra" />

DESCRIPTION: Contém uma descrição/resumo sobre a página, utilizada por alguns mecanismos de busca. Sintaxe:

<meta name="description" content="Artigo da Devmedia sobre Meta Tags” />

EXPIRES: A data e a hora depois dos quais o documento deve ser considerado como expirado. Uma data ilegal como, por exemplo "0" é considerada como "agora". Configurar "Expires" como "0" pode também ser usado para forçar uma nova checagem a cada visita do robô de busca. Sintaxe:

<meta http-equiv="expires" content = "Mon, 22 jul 2006 11:12:01 GMT" />

KEYWORDS: As palavras-chaves são utilizadas para ajudar na indexação da sua página pelos motores de busca, funcionam como uma categorização do conteúdo. Sintaxe

<META NAME="KEYWORDS" CONTENT="devmedia, artigo, metatag, html">

PRAGMA:NO-CACHE: Esse atributo faz com que o navegador não armazene a página em cache. A diferença deste para o cache-control:no-cache é que ele serve para todas as versões do HTTP. Sintaxe:

<meta http-equiv="pragma" content="no-cache" />

REFRESH: Especifica o tempo em segundos para que o browser atualize a página de forma automática, pode-se também redirecionar para uma outra URL após esse tempo. Sintaxe:

<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />

ROBOTS: Especifica informações para que o robô possa indexar sua página, suporta os seguintes valores:

- All: Valor default, significa vazio, o robô de busca não recebe nenhuma informação. - Index: Os robôs de busca podem incluir a página normalmente. - Follow: Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém. - NoIndex: Os links podem ser seguidos, mas a página não é indexada. - NoFollow: A página é indexada, mas os links não são seguidos. - None: Os robôs podem ignorar a página. - NoArchive (Apenas Google): A página não é arquivada. Sintaxe: <META NAME="ROBOTS" CONTENT="ALL"> <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW"> <META NAME="ROBOTS" CONTENT="NONE">

GOOGLEBOT: é uma forma de comunicação direta com o robô do Google, dizendo ao mesmo que você não quer que ele index a sua página, ou seja, ela não será mostrada nas pesquisas. Mas lembre-se que isso não impede que os outros mecanismos de buscas indexem sua página. Sintaxe: <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE">

IMAGETOOLBAR: Elimina no I.E (Internet Explorer) a barra de opções que aparece ao passar o mouse por cima de uma imagem. Sintaxe:

<meta http-equiv="imagetoolbar" content="no" />

GENERATOR: Indica qual software foi utilizado para realizar a criação dessa página. Sintaxe: <meta name="generator" content="Dreamweaver 8" />

REVISIT-AFTER: Utilizado para comunicar-se com os servidores de proxy afim de dizer de quanto em quanto tempo a página deve ser revisitada para refazer o cache. Sintaxe:

<meta name="revisit-after" content="15 days" />

RATING: Essa tag é útil para identificar a censura apropriada da página, ex: A página é inapropriada para menores de 18 anos por conter conteúdo erótico. Veja os valores suportados: - General: Para qualquer idade - 14 years: Censura 14 anos - Mature: Para pessoas acima de 18 anos

7


Sintaxe:

<meta name="rating" content="general" />

Os campos Meta têm três atributos principais: - NAME: indicando um nome para a informação - HTTP-EQUIV: que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação desse campo pode ser lida pelos browsers, e provocar algumas ações. - CONTENT: habilita a colocação de qualquer informação que deseja processar no servidor, navegador ou bot. Sintaxe

<HEAD> <TITLE>Titulo do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD>

ELEMENTOS DO CORPO OU SECÇÃO <BODY> Esta é a porção mais importante de um documento HTML, e nada existiria numa pagina web sem ela. O body (corpo) é onde você coloca texto, formulário, tabela, imagem, tudo. É também onde você configura o backgroud (pano de fundo), os links e as cores dos textos, e até mesmo uma música.

Atributos Os principais atributos dessa secção são: - BACKGROUD: permite incluir pano de fundo com título, para ser mostrado por trás de textos e imagem na página. - BGCOLOR: pinta o plano de fundo inteiro do documento com a cor que você selecionou. - LINK, VLINK, ALINK e TEXT: estes atributos afetam os links que você adiciona a sua página. LINK afeta a cor de todos os links de sua pagina que ainda não foram acessadas, VLINK afeta a cor dos links que você viu ou acessou e ALINK afeta o link atual. O TEXT afeta o padrão da cor do texto em seu documento.

A Tag <H></H> Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos caracteres vai do nível 6 (menor nível) ao 1 (maior nível). Sintaxe:

<Hn> TEXTO DO CABEÇALHO </Hn> #"n varia de 1 a 6 #"H1 é o maior corpo #"H6 é o menor corpo

Exemplo: cabeçalhos.htm

<HTML><HEAD><TITLE> Cabeçalhos</TITLE></HEAD><BODY> <H1>Texto formatado com H1</H1> <H2>Texto formatado com H2</H2> <H3>Texto formatado com H3</H3> <H4>Texto formatado com H4</H4> <H5>Texto formatado com H5</H5> <H6>Texto formatado com H6</H6> </BODY> </HTML>

A Tag <P></P> A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente a um alinha em branco entre parágrafos. Também responsável pelo alinhamento de parágrafos. Sintaxe:

<P> Texto do parágrafo.</P>

Tags de Fonte Para fazer alterações no tamanho, tipo e cor da fonte de seu texto você utilizará a tag <font> </font> que é do tipo contêiner. Sua sintaxe é a seguinte:

<font size=" " face=" " color=" "> </font>

Propriedade Size (Tamanho) Para definir o tamanho da fonte basta utilizar a tag <font size>. Os valores permitidos vão de 1, o menor, a 7, o maior. O padrão é 3. Se for especificado um número antecedido com o sinal de adição ou subtração o valor da fonte será acrescido ou subtraído nesse valor. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2, o texto passará a ser exibido em 7. Se não houver sinal a fonte será exibida naquele valor. Exemplo:

<font size=1>Texto em Tamanho 1</font>

Propriedade Face (Tipo) Para definir o tipo de fonte utilize a tag <font face>. Podem ser especificadas várias fontes, de maneira que, se o sistema não possuir uma determinada fonte ele irá utilizar outra.

Face="name [,name2[,name3]]

8


Se não forem encontradas as fontes especificadas, então, o texto será apresentado na fonte padrão, por essa razão coloca-se sempre mais de uma fonte. <font face=" Arial, Helvetica, sans-serif " size=1> Propriedade Color (Cor) Para definir a cor da fonte utilize a tag <font color>. Seu valor será especificado no formato hexadecimal, RGB ou através de um nome predefinido de cores. Algumas cores: COR CÓDIGO COR CÓDIGO Aqua #70DB93 Blue #0000FF Black #000000 Cyan #00FFFF Fuchsia #FF00FF Gray #C0C0C0 Green #00FF00 Lime #32CD32 Brown #800000 Navy #23238E Olive #808000 Red #FF0000 Silver #E6E8FA Teal #008080 White #FFFFFF Yellow #FFFF00 Propriedade Align (Alinhamento) Assim, como num documento comum, há necessidade de melhorar a aparência do documento, e a primeira providência a tomar é cuidar do alinhamento do texto. O Alinhamento padrão que vem configurado nos navegadores é à esquerda. - Alinhamento Centralizado: Para inserir um alinhamento centralizado em um texto ou título basta utilizar os comandos:

<h1 align=center>Título Centralizado</h1> <p align=center> Parágrafo ao Centro

- Alinhamento Justificado:

<p align=justify>Este é um texto justificado.

Alinhamento à direita:

<h4 align=right>Título À Direita</h4> <p align=right>Parágrafo a direita

A Tag <u></u> A tag <u> representa algum texto que deve ser estilisticamente diferente do texto normal, como palavras com erros ortográficos ou nomes próprios. Exemplo:

<p>Este é um <u>paragrafo</u>.</p>

A Tag <b></b> O HTML <b> tag é usada para especificar o texto em negrito..

Exemplo:

<p><b> negrito </ b></p>

A Tag <br/> A tag BR é utilizada para definir uma quebra de linha. Seu uso deve ser cauteloso. Evite usar muitos BR's em casos onde deveriam existir parágrafos. Exemplo:

<p>Primeira linha<br /> segunda linha</p>

A Tag <IMG> As imagens dentro de uma página devem estar preferencialmente no formato ".gif". Este é o formato mais universalmente aceito pelos visualizadores de WWW (browsers). O Netscape consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade não é comum a todos os programas. Utiliza-se a seguinte notação para incluir uma imagem:

<img src="diretório/arquivo">

Poderemos acrescentar a esta imagem os seguintes atributos: - Width="valor em pixel": largura da imagem; - Height="valor em pixel": altura da imagem; - Align=(left, right ou center): alinhamento da imagem; - Alt="texto": texto que irá aparecer ao passar o mouse sobre a imagem ou texto que surgirá caso a imagem não possa ser visualizada; - Border= “valor em pixel”: especificação da largura da borda da imagem; - Vspace="valor em pixel": para especificar o espaço que deve ser deixado acima e abaixo da imagem; - Hspace="valor em pixel": especifica o espaço que deve ser deixado nas laterais da imagem; A Tag <DIV></DIV> A tag DIV atualmente está sendo muito utilizada por códigos mais avançados. DIV na verdade não causa nenhuma diferença visual no código. Ele é considerado um "container", ou seja, uma espécie de "caixa" não visual que você pode, através de script, alterar o conteúdo dele, alterando o código HTML dinamicamente. Ou então é usado para aplicar um estilo (class/style) em todo o bloco HTML contido dentro do DIV. Parâmetros: - ALIGN: alinhamento do conteúdo do DIV (center, left, right) - ID: nomeia o DIV para ser referenciado pelos scripts (JavaScript por exemplo)

9


Exemplos de uso:

<DIV ID="bloco">Este texto está dentro de um DIV</DIV><BR> <BUTTON onclick="bloco.innerHTML='O texto <B>interno</B> foi alterado'">Mudar Texto</BUTTON>

A Tag<A></A> A marcação <A>, que define o ponto de partida para os links, é denominada de âncora. Para incluir uma âncora em seu documento: 1. Inicie a âncora com <A . ( Há um espaço depois de A.) 2. Especifique o documento a ser interligado, inserindo parâmetro HREF="filename" seguido do sinal: > 3. Insira o texto que vai funcionar como link no documento corrente 4. Anote a marcação de final da âncora: </A>. Um exemplo de referência a um hipertexto:

<A HREF="ListaPraias.html">Praias</A>

A Tag <div></div> O DIV é uma tag de bloco, usado para agrupar elementos semelhantes. Um uso comum dele é para categorizar o cabeçalho (Header) da página, o conteúdo (content) e o rodapé (footer). É muito utilizado para auxiliar na personalização do site através do Css. Exemplo:

<div> <h2>Título relevante</h2> <p>Texto do bloco</p> <img src="alerta.jpg" width="10" height="7" alt="alerta" /></div>

<table></table> – <td></td> – <tr></tr> A tag TABLE é usada para dermacar uma tabela. As linhas são marcadas com a tag TR enquanto as colunas ficam com a tag TD. É possível agrupar colunas com o atributo colspan e linhas com o atributo rowspan. Um <td colspan="2"></td> significa que aquela coluna vai ocupar o espaço de duas colunas. Ex: Tabela 2×2

<table> <tr> <td>Primeira coluna da primeira linha</td> <td>Segunda coluna da primeira linha</td> </tr> <tr> <td>Primeira coluna da segunda linha</td> <td>Segunda coluna da segunda linha</td> </tr> </table>

<form></form> A tag FORM serve para demarcar a área de um formulário. No caso do form abordarei as tags utilizadas por ele em grupos diferentes pois são muitos. A tag form tem o atributo action, que determina qual ação vai ser executada quando ele for submetido. Exemplo:

<form action="envioFormulario.php"> </form>

<input /> A tag INPUT pode adquirir características especificas de acordo com o atributo type que ele receber. Exemplo:

<input type="text" value="Digite aqui" />  <input type="submit" />  <input type="file" />  <input type="radio" type="grupo" />  <input type="checkbox" /> 

<textarea></textarea> A tag TEXTAREA tem um comportamento semelhante ao do input text, porém ele é destinado a textos maiores. Exemplo:

<textarea></textarea>

<label></label> A tag LABEL permite que você atribua uma legenda a um campo do seu formulário. Existem duas formas de usa-la: Exemplo:

<label>Sou uma legenda <input type="text" /> </label> <label for="campo">Sou uma legenda</label> <input type="text" id="campo" />

10


LISTAS EM HTML A HTML suporta listas ordenadas, não ordenadas, de definições e intercaladas .

Listas Ordenadas Uma lista ordenada contém vários itens numerados e é criada com o elemento <ol> ("ordered list.") Os itens da lista definem-se com o elemento <li> ("list item.") Esta é a codificação:

<ol> <li>Sala 1</li> <li>Sala 2</li> </ol>

Este é o aspecto que aparece no navegador:

Listas Não Ordenadas Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo (normalmente um círculo pequeno ou um quadrado pequeno.) Para criar uma lista não ordenada usa-se o elemento <ul> ("unordered list.") Dentro desse elemento os vários itens são criados com o elemento <li> ("list item."). Esta é a codificação:

<ul> <li>sala 1</li> <li>sala 2</li> </ul>


Obs.: É importante notar que dentro de uma lista ordenadas e não ordenada podemos colocar parágrafos, quebras de linha, imagens, outras listas, etc...

Listas de Definições Uma lista de definições não é constituída por uma série de itens mas por termos acompanhados das descrições de seus significados. As listas de definições criam-se com o elemento <dl> ("definition list.") O nome de cada

termo fica dentro de um elemento <dt> ("definition term") e a sua descrição fica num elemento <dd> ("definition description".) Esta é a codificação:

<dl> <dt>Sala 1</dt> <dd>Sala do LabInfo destinada a uso individual pelos estudantes</dd> <dt>Sala 2</dt> <dd>Sala do LabInfo destinada prioritariamente a aulas.</dd> </dl>


Listas Intercaladas As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo resultados bastante interessantes. A prática é que vai mostrar qual o número máximo de listas que vale a pena intercalar. Pode-se inclusive ter um parágrafo, intercalado com uma lista que contenha um único item. Exemplo de lista intercalada:

<UL> <LI> Estados da região sul do Brasil: <UL> <LI> Rio Grande do Sul <LI> Santa Catarina </UL> <LI> Um estado da região nordeste: <UL> <LI> Pernambuco </UL> </UL>

É exibida com este formato:

11


TABELAS Principais Marcações <TABLE></TABLE> Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.

ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células. Para que a tabela apareça com bordas simples, defina dessa forma <table border></table>.

Antes e depois de uma tabela, acontece sempre uma quebra de linha. <TR></TR> Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. (TR = Table Row) <TD></TD> Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado a esquerda. Exemplo: para fazer uma tabela com uma coluna e duas linhas temos as seguintes tag:

 <table>  <tr>  <td>Texto 1</td>  </tr>  <tr>  <td>Texto 2</td>  </tr>  </table>

<TH></TH> Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

 <table>  <tr>  <th>Cabeçalho</th> <th>Outro Cabeçalho</th>  </tr>  <tr> <!—Linha 2, coluna 1 da tabela--> <td>Linha 2, Coluna 1</td> 

<td>Linha 2, Coluna 2</td>  </tr>  <tr>  <td>Linha 3, Coluna 1</td>  <td>Linha 3, Coluna 2</td>  </tr>  </table>

Atributos de Tabelas As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Vamos ver os principais: <BORDER> Esse atributo aparece junto à marcação TABLE. Caso esse atributo não apareça, a tabela não terá bordas. Para obter uma tabela com bordas, ela deve ser delimitada pelas marcações <table border> </table>.


<ALIGN> Este atributo pode ser aplicado a TR, TH e TD, e controla como será o alinhamento do texto dentro de uma célula, com relação às bordas laterais. Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar ou alinhar a direita.

12


Veja o exemplo:

<table border="1"> <tr> <th>Primeira célula</th> <th>Segunda célula</th> <th>Terceira célula</th> </tr> <tr> <td align="center">centro</td> <td align="left">esquerda</td> <td align="right">direita</td> </tr> </table>


<VALIGN> Pode ser aplicado a TR, TH e TD, e define o alinhamento do texto nas células com relação a borda superior e inferior. Aceita os valores top, middle, baseline e botton

<table border> <tr> <td> Teste para alinhamento<br> com relação a bordas<br> inferior e superior<br> </td> <td valign="top"> TOP </td> <td valign="middle">MIDDLE</td> <td valign="baseline">BASELINE</td> <td valign="botton">BOTTOM</td> </tr> </table>

Aparece assim:

<NOWRAP> Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-lo, para não produzir células muito largas. <COLSPAN> Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrão cada célula corresponde a uma coluna, ou seja COLSPAN=1.

Vejamos um exemplo

<table> <tr> <td colspan="3">3colunas</td> <td>normal</td> <td>normal</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> </tr> </table>

Que fica assim:

<ROWSPAN> Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma célula pode abranger. Assim como na marcação anterior, o padrão é uma célula corresponder a uma linha. Novamente, vamos ver exemplos:

<table> <tr> <td rowspan="3">3 linhas</td> <td>col 2</td><td>col 3</td> <td>col 4</td><td>col 5</td> </tr> <tr> <td>col 2</td><td>col 3</td> <td>col 4</td><td>col 5</td> </tr> <tr> <td>col 2</td><td>col 3</td> <td>col 4</td><td>col 5</td> </tr> </table>

Aparece assim:

13


Atributos para Linhas e Colunas As colunas são delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e centralizado) e constituem um entorno independente do resto do documento. Isto quer dizer que:

- Podemos usar praticamente qualquer tipo de etiqueta dentro da etiqueta <td> para, desta forma, dar forma a seu conteúdo. - As etiquetas situadas no interior da célula não modificam o resto do documento. - As etiquetas de fora da célula não são tidas em conta por esta.

Sendo assim, podemos especificar o formato de nossas células a partir de etiquetas introduzidas em seu interior ou mediante atributos colocados dentro da etiqueta de célula <td> ou também, em alguns casos, dentro da etiqueta <tr>, se desejamos que o atributo seja válido para toda a linha. Atributos que nos permite modificar uma coluna ou uma linha. - align: Justifica o texto da célula da mesma forma que se fosse o de um parágrafo. - valign: Podemos escolher se queremos que o texto apareça acima (top), no centro (middle) ou abaixo (bottom) da célula. - bgcolor: Dá cor à célula ou escolha de linha. - bordercolor: Define a cor da borda. Outros atributos que podem ser unicamente atribuídos a uma célula e não ao um conjunto de células de uma linha são: - background: Permite-nos colocar um fundo para a célula a partir de um link a uma imagem. - height: Define a altura da célula em pixels ou porcentagem. - width: Define a largura da célula em pixels ou porcentagem

TRABALHANDO COM FORMULÁRIOS Os formulários são estas famosas caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados para realizar buscar ou também para introduzir dados pessoais, por exemplo, em sites de comércios eletrônico. Os dados que o usuário introduz nestes campos são enviados ao correio eletrônico do administrador do formulário ou também, em um programa que se encarrega de processá-lo automaticamente. Para inseri um formulário em um documento de HTML usamos a tag <FORM></FORM>. A sintaxe para um formulário é:

<FORM> Conteúdo do formulário

</FORM>

Obs.: você pode ter múltiplos formulários em um único hiperdocumento. Apenas certifique-se que os blocos <FORM></FORM> não se sobrepõem.

O elemento <form> por si só não faz com que o browser desenhe nada na pagina nem permite inserir dados. Ele contém elementos que recolhem os dados e possui atributos que dizem ao browser como e para onde deve enviar os dados para processamento.

Propriedades ou Atributos dos Formulários As propriedades ou atributos dos formulários têm como objetivos definir pra onde e como as informações do formulário serão enviadas para um servidor. Action (Ação) É a única propriedade obrigatória de um formulário, define o endereço (URL) para onde vão ser enviados os dados quando for pressionado o botão de submissão. Existem duas possibilidades: - O formulário é enviado a um endereço de

correio eletrônico - O formulário é enviado a um programa ou

script que processa seu conteúdo. No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônico especificado por meio de uma sintaxe deste tipo:

<form action="mailto:endereç[email protected]"…>

Se o que queremos é que o formulário seja processado por um programa, temos de especificar o endereço do arquivo que contem o tal programa. A etiqueta ficaria neste caso da seguinte forma:

<form action="endereço do arquivo"...>

A forma na qual se expressa a localização do arquivo que contém o programa é a mesma que a vista para os links. Method (Método) Este atributo se encarrega de especificar a forma na qual o formulário é enviado. Os dois valores possíveis que este atributo pode tomar são post e get.

Obs.: Método usado para enviar os dados para o servidor. O valor por omissão é "get".

Method= “get” Este método envia o conteúdo do formulário incorporado no URL com que faz a chamada ao servidor. A maioria dos documentos HTML é recuperada a partir da requisição de uma única URL ao servidor. Assim, um formulário que utilize

14


este método, envia toda sua informação ao final da URL ativada.

Nota: Se o conteúdo do formulário tiver mais de 100 caracteres deve usar method="post".

Method= “post” Este método envia os dados do formulário separadamente. Para isso é gerado um segundo pedido HTTP (com o método get o envio é mais rápido, pois faz-se tudo numa única operação.). Name (Nome) A propriedade Name informa qual o nome, isto é, como chamar cada valor digitado. Certamente você pode definir mais de um campo de entrada textual ou menu dentro de um formulário, mas certifique-se de que cada um possui um nome diferente. Cada elemento do formulário deve possuir um nome que irá identificá-lo no momento em que o script indicado no ACTION for tratar os dados. Target (Destino) Especifica a janela (ou a moldura) onde se abre a ligação ao clicar.

_blank - a ligação abre-se numa nova janela

_self - a ligação abre-se na própria janela que contém o elemento <a>

_parent - (só para ligações que estão numa moldura, ou "frame") a ligação abre-se no documento que contém a moldura (que terá sido criada através de um <frame> ou de um <iframe>)

_top - a ligação abre-se no documento que ocupa a posição mais elevada na hierarquia (aquele que não está dentro de nenhum <frameset> nem num <iframe>).

Enctype O atributo enctype especifica como o formulário de dados deverá ser codificado quando enviado para o servidor. Nota: O atributo enctype pode ser usado somente no method = "post". Sintaxe

<form enctype=" value ">

Exemplo de etiqueta <form> completa

<form action="mailto:endereç[email protected] (ou o nome do arquivo de processo)" method="post" enctype="text/plain">

Os valores dos atributos

Valor Descrição

application/x-www-form-urlencoded

Padrão. Todos os caracteres são codificados antes de serem enviadas (espaços são convertidos em símbolos "+" e caracteres especiais são convertidos em valores ASCII HEX)

multipart/form-data Nenhum caracteres são codificados. Este valor é necessário quando você estiver usando formulários que têm um controle de upload de arquivo

text/plain Os espaços são convertidos em símbolos "+", mas sem codificação de caracteres especiais

Elementos de um Formulário Um formulário é uma secção da pagina HTML que contém elementos. Estes elementos permitem inserir dados numéricos, textos curtos, textos extensos, selecionar elementos numa lista com várias opções, selecionar rapidamente uma opção num grupo pequeno, etc. Tabela 1: Principais elementos de um formulário

Elemento Descrição

<form> Define um formulário para recolher dados inseridos pelo utilizador

<input> Insere um campo para introduzir dados

<textarea> Define uma área de texto (permite inserir texto com várias linhas e um número ilimitado de caracteres)

<label> Define um nome para um elemento

<fieldset> Agrupa elementos num formulário

<legend> Define uma legenda para um grupo de elementos do formulário

<select> Define uma lista com várias opções seleccionáveis

<optgroup> Define um grupo de opções

<option> Insere mais uma opção numa lista com várias opções seleccionáveis

<button> Define um botão que pode ser pressionado

<isindex> Desaprovado. Use <input> com o atributo type="button"

Elemento Input O elemento <input> pode assumir diversas formas com finalidades diferentes desde inserir dado e texto, até enviá-los a uma URL específica.

15


Atributos Types

Caixa de Texto Simples ou type= “text” É a forma mais simples de campo de entrada. Este campo permite a digitação de uma única palavra ou linha de texto, e possui uma largura default de 20 caracteres. Exemplo:

<FORM> <INPUT TYPE="TEXT"> </FORM>

Entre as opções de configurações possíveis temos: - VALUE="" (opcional), utilizando a marcação

VALUE você especifica que texto aparecerá no campo quando o formulário for exibido.

- SIZE="" (opcional ), esta marcação altera o tamanho deste campo exibido na tela. Obs.: o usuário sempre poderá digitar mais caracteres do que o tamanho do campo na tela, pois o texto irá se deslocar a esquerda dentro do campo.

- MAXLENGTH="" (opcional), se você deseja limitar o número de caracteres que o usuário pode digitar, basta usar esta marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do permitido em MAXLENGTH.

- NAME =”” (opcional), define o nome do input Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. Exemplo:

<form name="Texto"> <p>Entrada de Texto <input type="text" size="20" maxlength="30" name="CxTexto" value="Digite aqui..." onchange="alert ('Voçê digitou ' + CxTexto.value)"> </p> </form>

Caixa de Texto Invisível ou type= “hidden” É um objeto semelhante ao input text, porém, invisível para o usuário. Este objeto deve ser utilizado para passar informações ao "server" (quando o formulário for submetido) sem

que o usuário tome conhecimento. Suas propriedades são: name e value. - name : Especifica o nome do objeto. - value : Armazena o conteúdo do objeto Exemplo:

<form name="THidden"> <input type="hidden" size="20" maxlength="30" name="HdTexto" value="" > </form> </p>

Caixa de Texto Protegido ou type=password Esse campo utiliza a marcações de entrada do tipo password são idênticas aos campos do tipo text, exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *). As opções são as mesmas do tipo texto. Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. Exemplo:

<form name="TPassword"> <p>Entrada de Senha <input type="password" size="10" maxlength="10" name="Senha" value=""> </p> </form>

Upload de Arquivos ou type=file

<input type="file" name="" size="">

Exibe na tela do browser um campo de texto e um botão, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulário deverá utilizar o método “POST” e ter o parâmetro “enctype” com o valor "multipart/form-data". Parâmetros:

- Size - O tamanho do campo de texto exibido. - Wrap - Maneira como são tratadas as quebras de linha automáticas. O valor soft faz com que o texto quebre” somente na tela, sendo enviado para o servidor o texto da maneira como foi digitado; O valor “hard” faz com que seja enviado para o servidor da maneira como o texto aparece na tela, com todas as quebras de linhas inseridas automaticamente; o valor “off” faz com que o texto não quebre na tela e nem quando enviado ao servidor.

16


- Value - O elemento do tipo textarea não possui o parâmetro “value”. O valor pré-definido do campo é o texto que fica entre as tags <textarea> e </textarea>.

Botões de Radio ou type=radio São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série de opções. Suas principais propriedades são: name, value e checked.

- name: Especifica o nome do objeto. Para caracterizar uma mesma série de opções, todos os objetos desta série têm que ter o mesmo "name". - value: Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, será enviado o valor default "on”. Esta propriedade também serve para ativar comandos lógicos, testando-se a condição de "checked". - checked : Especifica que o objeto inicialmente estará ligado

Vejamos um exemplo: <input type="radio" name="estação" value="1">Primavera<br> <input type="radio" name="estação" value="2">Verão <br> <input type="radio" name="estação" value="3">Outono<br> <input type="radio" name="estação" value="4">Inverno<br>

Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicar na página. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com o correspondente texto no código da página e com as etiquetas HTML que necessitarmos.

Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:

- Objeto.length: Retorna a quantidade de opções existentes na lista - Objeto.[index].value: retorna o texto (value) associado a cada opção - Objeto.[index].checked : retorna verdadeiro ou falso

O único evento associado a este objeto é onclick. Exemplo: No exemplo abaixo temos dois set's de objetos radio. O primeiro tem o objetivo de mudar

a cor de fundo do documento atual. O segundo tem o objetivo levar informações ao "server".

<p>Radio</p> <p> <input type=radio name="Rad" value="1" onclick="document.bgColor='green'"> Fundo Verde <input type=radio name="Rad" value="2" onclick="document.bgColor='blueviolet'"> Fundo Violeta <input type=radio name="Rad" value="3" onclick="document.bgColor='#FFFF00'"> Fundo Amarelo </p>

Caixas de Validação ou input=checkbox São objetos que permitem ao usuário ligar ou desligar uma determinada opção. Suas principais propriedades são: name, value e checked. - name : Especifica o nome do objeto - value : Especifica o valor que será enviado ao

"server" se o objeto estiver ligado (checked). A sintaxe utilizada é muita parecida

com as anteriormente apresentadas:

<input type="checkbox" name="paella">Adoro uma feijoada

Botões Normais ou type=button Este objeto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas, a serem executadas quando o mesmo receber um click. Suas propriedades são: name e value. - name : Especifica o nome do objeto. - value : Especifica o nome que aparecerá

sobre o botão Sua sintaxe é a seguinte:

<input type=button value="Texto escrito no botão">

17


Botão de Envio ou type=submit Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do formulário ao "server". O formulário será submetido à URL especificada na propriedade "action" do formulário. Suas propriedades são: name e value. - name: Especifica o nome do objeto. - value: Especifica o nome que aparecerá sobre

o botão Sua sintaxe é a seguinte:

<input type="submit" value="Enviar">

Neste caso, temos que definir a mensagem do botão por meio do atributo value.

Botão Imagem ou type=imagem Um input image funciona como um botão submit, porém é exibida uma imagem, cuja localização é especificada pelo atributo src. É importante lembrar que, como regra de acessibilidade, toda imagem deve ter um texto alternativo (atributo alt). Quando o envio do formulário é feito por um input image, são enviadas as coordenadas x (pimagem.x) e y (pimagem.y) da posição clicada da imagem.

Botão Apagar Campos type=reset Este botão nos permitirá apagar o formulário por completo no caso de que o usuário deseje refazê-lo desde o princípio. Sua estrutura sintática é igual a anterior:

<input type="reset" value="Apagar Campos">

A diferença do botão de envio, indispensável em qualquer formulário, o botão de Apagar Campos é meramente optativo e não é utilizado freqüentemente. Há de ter cuidado de não coloca-lo muito perto do botão de envio e de distinguir claramente um do outro. Elemento textarea A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos exemplos anteriores. Suas principais propriedades são: name, rows e cols. - name: Especifica o nome do objeto

- rows: Especifica a quantidade de linhas que aparecerão na tela

- cols: Especifica a quantidade de caracteres que aparecerão em cada linha

- value: Acessa o conteúdo do campo via programação.

Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect. Exemplo:

<form name="TesteTextarea"> <p> Texto de Múltiplas Linhas <textarea name="MultText" rows=2 cols=40> Primeira linha do texto inicial segunda linha do texto inicial </textarea> </p>

Se você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fim da TEXTAREA. Elemento select As listas de opções são esse tipo de menus desdobráveis que nos permite escolher uma (ou várias) das múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta com seu respectivo fechamento: <select>

Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opção será incluída em uma linha precedida da etiqueta <option>.

Podemos ver, a partir destas diretrizes, a forma mais típica e simples desta etiqueta:

<select name="estação"> <option>Primavera</option> <option>Verão</option> <option>Outono</option> <option>Inverno</option> </select>

Esta estrutura pode ser vista

modificada principalmente a partir de outros dois atributos: - Size: Indica o número de valores mostrados da

lista. O resto pode ser visto por meio da barra lateral de deslocamento.

18


- Multiple: Permite a seleção de mais vários elementos da lista. A escolha de mais de um elemento se faz como com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, não se utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou não se coloca se quisermos uma lista desdobrável comum.

- Selected: da mesma forma que multiple, este atributo não toma nenhum valor senão que simplesmente indica que a opção que apresenta está escolhida por padrão.

- Value: define o valor da opção que será enviada ao programa ou ao correio eletrônico se o usuário escolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a um programa visto que a cada opção se pode associar um número ou letra, o qual torna-se mais facilmente manipulável que uma palavra ou texto.

Para utilização deste objeto é importante o conhecimento de outras propriedades associadas: - Objeto.length: Retorna a quantidade de

opções existentes na lista - Objeto.selectedindex: Retorna o "index" do

objeto selecionado (primeiro = 0) - Objeto.options[index].text: retorna o texto

externo associado a cada opção - Objeto.options[index].value: retorna o texto

interno (value) associado a cada opção - Objeto.options[index].selected: retorna

verdadeiro ou falso Os eventos associados a este objeto são: onchange, onblur e onfocus. Elemento label Dá um nome a um controlo na página. Ao clicarmos no texto contido no elemento <label> o controle a ele associado deve ser ativado.

Nota: O atributo "for" estabelece uma ligação entre o elemento <label> e um outro elemento existente na página. Dê ao atributo "for" um valor igual ao valor do atributo "id" do elemento que pretende controlar.

Exemplo:

<label for="unome">Último Nome:<label> <input type="text" name="unome" id="unome"> Último Nome:

Elemento fieldset O elemento <fieldset> agrupa elementos num formulário e pode desenhar uma linha em redor do grupo. Exemplo

<fieldset> Altura <input type="text" size="6"> Peso <input type="text" size="6"> </input> </fieldset>

Elemento legend O elemento <legend> define texto descritivo para um elemento <fieldset>. Exemplo:

<fieldset> <legend>Calcule seu IMC:</legend> Peso <input type="text" size="6"> Altura <input type="text" size="6"> <input type="button" value="Calcular"> </fieldset>

Elemento optgroup Define um grupo de opções. permite agrupar várias escolhas. Quando tiver uma lista de opções extensa, forme grupos com as opções que estão relacionadas entre si para lidar melhor com elas. Exemplo:

<select> <optgroup label="Frutas Tropicais"> <option value ="Manga">Manga</option> <option value ="Banana">Banana</option> </optgroup> <optgroup label="Frutas portuguesas"> <option value ="Cereja">Cereja</option> <option value ="Maçã">Maçã</option> </optgroup> </select>

19


QUESTÕES 1. Um programa elaborado na linguagem HTML apresenta a seguinte linha: <!DOCTYPE HTML> Sobre essa linha, é correto afirmar que ela a)indica que o arquivo com o programa-fonte possui a extensão doc. b)deve vir sempre após a tag . c) é uma tag que define o nome do arquivo que possui o programa. d) especifica ao navegador o tipo de documento HTML que ele vai renderizar. e) não atende corretamente a linguagem HTML, que não aceita o símbolo ! em seus comandos. 2. HTML (hypertext markup language) é uma linguagem de programação, atualmente na versão 5, muito utilizada para ambientes desktop. a) Certo b) Errado 3. A linguagem HTML, para produzir páginas na Web, trata- se de uma linguagem do tipo a) de marcação. b) de script. c) procedural. d) orientada a eventos. e) orientada a objetos. 4. Considere a seguinte frase sendo visualizada no browser (navegador):

Este texto está em negrito e sublinhado A seqüência correta de comandos ou tags HTML para obter esse resultado (isto é, deixar esse texto em negrito e sublinhado) é: a)<b><s> Este texto está em negrito e sublinhado </s></b> b)<b><sup> Este texto está em negrito e sublinhado </sup></b> c)<sup> Este texto está em negrito e sublinhado </sup> d)<s> Este texto está em negrito e sublinhado </s> e)<b><u> Este texto está em negrito e sublinhado </u></b> 5 Constitui uma boa prática em programação a documentação dos códigos fontes através da inclusão de comentários. Na linguagem HTML, qual dos comandos é correto para inserir comentário? a) /* Este é um comentário */ b) # Este é um comentário # c) < Este é um comentário /> d)  e) <-- Este é um comentário --> 6. HTML é uma acrossemia para HyperText Markup Language, sendo uma linguagem de programação utilizada para a criação de documentos hipertexto para a Web. A respeito da linguagem HTML, considere as seguintes afirmativas:

I. A HTML é uma linguagem interpretada e o interpretador é o browser (navegador). II. Os documentos escritos em HTML são arquivos em formato texto e podem ser criados com a utilização de um simples editor de texto. III. A HTML é uma linguagem compilada gerando um código executável que será armazenado em um servidor Web. IV. A HTML é uma linguagem que faz uso de comandos ou tags que especificam a aparência e conteúdo de uma página Web. Assinale a alternativa correta. a) Somente as afirmativas I, II e III são verdadeiras. b) Somente as afirmativas II e IV são verdadeiras. c) Somente as afirmativas I, II e IV são verdadeiras. d) Somente as afirmativas I, III e IV são verdadeiras. e) Somente as afirmativas III e IV são verdadeiras. 7. A linguagem DHTML, unindo as tecnologias HTML, JavaScript e uma linguagem de apresentação, significa a) Data Hypertext Markup Language. b) Dynamic Hypertext Meta Language. c) Dynamic Hypertext Markup Language. d) Data Hypertext Meta Language. e) Dynamic Hypermidia Markup Language. 8. Assinale a tecnologia capaz de modificar dinamicamente uma página da Web na própria máquina cliente sem precisar acessar novamente um servidor Web. a) HTML. b) XML. c) XHTML. d) DHTML. 9. HTML, DHTML, JavaScript e PHP são linguagens utilizadas no desenvolvimento de sites da World Wide Web. A seu respeito é correto afirmar que a) o código de uma aplicação JavaScript deve ser interpretado pelo servidor HTTP ao passo que o código de uma aplicação PHP deve ser interpretado pelo cliente HTTP. b) o código de uma aplicação JavaScript deve ser interpretado pelo cliente HTTP ao passo que o código de uma aplicação PHP deve ser interpretado pelo servidor HTTP. c) tanto o código de uma aplicação JavaScript como o código de uma aplicação PHP devem ser executados pelo cliente HTTP. d) tanto o código de uma aplicação JavaScript como o código de uma aplicação PHP devem ser executados pelo servidor HTTP. e) o código de uma página HTML deve ser interpretado pelo cliente HTTP ao passo que o código de uma página DHTML deve ser interpretado pelo servidor HTTP.

20


10. Para determinar uma cor do plano de fundo do browser, por meio da linguagem HTML, deve-se utilizar o atributo a) BGCOLOR. b) COLOR. c) COLORBROWSER. d) BODYCOLOR. e) BACKGROUND. 11. A linguagem HTML utiliza os códigos de cores em padrão RGB (Red, Green, Blue), cujos valores são dados em hexadecimal na forma “#RRGGBB”. Dessa forma, o branco é representado em um código HTML como “#FFFFFF” e a cor azul como “#000000”. Com base nessas informações e nos conhecimentos da linguagem HTML, o comando para associar a cor azul ao fundo da página Web é: a) <body color=”#00FFFF”> b) <body background=”#0000FF”> c) <body bgcolor=”#0000FF”> d) <body background=”#00FFFF”> e)<body color=”#0000FF”> 12. A linha de comando HTML que coloca a imagem “img.gif” como ligação ou hiperlink para o site “www.siteremoto.br” é: a) <L href=”http://www.siteremoto.br”> <img src=”img.gif”> </L> b) <B http=”http://www.siteremoto.br”> <img src=”img.gif”> </B> c) <A href=”http://www.siteremoto.br”> <img src=”img.gif”> </A> d) <A href=”http://www.siteremoto.br”> img.gif </A> e) <A href=”http://www.siteremoto.br”> <image =”img.gif”> </A> 13. Assinale a alternativa que contém, na linguagem HTML, a tag que delimita a área onde serão inseridas as informações que serão exibidas no browser: a) <BODY> b) <HEAD> c) <LINK> d) <META> e) <HTML> 14. É uma tag HTML que conta com os atributos href e name para possibilitar o estabelecimento de hiperligações (link), para outro trecho de um documento, para outra página de Internet ou mesmo um endereço de e-mail: a) <a> b) <b> c) <meta> d) <head> e) <i>

15. As tabelas são compostas de linhas, dentro das quais são colocadas células que são responsáveis pelo controle do conteúdo envolvido pela tabela. A tag TH em HTML é responsável por a) determinar a linha. b) marcar o texto da célula com negrito e posiconá-lo no centro do alinhamento horizontal. c) determinar os atributos da tabela. d) determinar a largura da tabela ou da célula. e) determinar a altura da tabela ou da célula. 16. Os principais elementos de página HTML são títulos, textos, parágrafos, imagens, links (responsáveis pela chamada de outras páginas para a tela) e cabeçalhos. Considerando os conceitos destes elementos, assinale a alternativa incorreta. a) Título é o texto que aparece na barra de título do browser. b) Texto é a informação mais comum dentro de uma página e pode ser formatado através de comandos. c) Link é um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na internet. Uma figura também pode ser usada como link, ou seja, clicando na figura saltamos para outro local. d) Cabeçalho são linhas de texto com tamanhos especiais. Existem cinco tamanhos de cabeçalhos. 17. A figura abaixo mostra uma tabela construída em HTML. O segundo tag <tr> do código HTML dessa tabela contém:

a) <td colspan="2">4</td> b) <td>2</td><td>3</td> c) <td>5</td><td>6</td>7</td> d) <td rowspan="2">4</td> e) <td rowspan="2">1</td><td colspan="2">4</td> 18. O programa a seguir foi elaborado na linguagem HTML. Ele será aberto por um navegador que a suporte. As letras x e y significam partes de comandos. < html>< body > < x > < y >Lista de Produtos:< /y > < /x > < /body > < /html > Para que esse programa apresente na tela o texto: Lista de Produtos: x e y deverão ser, respectivamente:

21


a) ul e bl b) ul e li c) ul e ol d) ol e bl e) ol e li 19. O trecho de programa a seguir foi elaborado na linguagem HTML com JavaScript e será aberto por um navegador que as suporte.

<html> <body> <h1>Página Principal</h1> <form> comando y </form> </body> </html>

Após a sua execução, é exibido pelo navegador:

O comando que deve ser colocado no lugar do comando y, de modo que, ao se pressionar o botão Nova Página, seja aberta a página P1.html, é: a) < input type="button" value="Nova Página" onclick="window.location='P1.html'" > b) < input type="onbutton" value="Nova Página" click="window.location='P1.html'" > c) < input type="button" text="Nova Página" click="window.location='P1.html'" > d) < input type="button" text="Nova Página" onclick="window.location='P1.html'" > e) < input type="onbutton" text="Nova Página" onclick="window.location='P1.html'" > 20. Assinale a alternativa que indica corretamente a tag que agrupa elementos do formulário na linguagem HTML 4.01: a) <u></u> b) <input></input> c) <param></param> d) <fieldset></fieldset> e) <caption></caption> 21. Em HTML, elementos Option> descrevem as possíveis opções de escolha para uma lista criada pelo elemento Select>. Dentre os atributos do elemento Option>, é INCORRETO dizer que consta o atributo: a) label. b) name. c) disabled. d) selected. e) value.

GABARITO 1)d, 2)b, 3)a, 4)e, 5)d, 6)c, 7)c, 8)d, 9)b, 10) a, 11)c, 12)c, 13)a, 14)a, 15)b, 16)d, 17) a, 18)b, 19) a, 20)d, 21)b

22

Documents

HISTÓRICO - aquabarra.com.braquabarra.com.br/educacao_fisica/8ano_Informatica_Unidade_III.pdf · uma metalinguagem através da qual se pode definir linguagens de marcação para