[TUTO] Saiba Tudo Sobre HTML

**'Cнiiρ** · 1 de Maio 2012

Olá Galera da Web Cheats, hoje vim trazer para vocês um tutorial básico e avançado sobre HTML, espero que todos gostem e aprendam !

Introdução

1. Primeiramente saiba oque é Internet
2. (HTML Básico) Introdução sobre HTML

2.1 Edição de documentos

2.2 Publicação de documentos

2.3 O documento básico e seus componentes

2.4 <HEAD>

2.5 <BODY>

2.6 Cabeçalhos

2.7 Separadores

2.8 Listas

3. Formatação de textos

3.1 Blocos de texto

3.2 Frases

3.3 Caracteres Especiais

3.4 Cores e Fontes

3.5 Blink

3.6 Marquee

4. Ligações (uso de links)

5. Inserção de imagens

5.1 Atributos básicos

5.2 Moldura

6. (HTML Avançado) Tabelas

7. Frames

7.1 Links com frames

7.2 Composições

7.3 Atributos

7.4 Aplicações e cuidados

8. Interação

8.1 Mapas

8.2 Formulários

8.3 CGI Scripts

9. Áudio e Vídeo

9.1 Áudio

9.2 Vídeo

10. Folhas de Estilo

1. Primeiramente saiba oque é Internet

Geral diz que internet é a: "grande rede mundial de computadores", mais na verdade essa resposta esta errada...
Internet é "o conjunto de diversas redes de computadores que se comunicam através dos protocolos TCP/IP", essa sim seria a resposta correta, fiquem sabendo já ;)

Outra curiosidade é o "www", que usamos toda vez que vamos acessar um site...

O Verdadeiro nome é World-Wide Web, é termos gerais a interface gráfica da Internet, é um sistema totalmente correto que organiza e engloba todos os sistemas de informação disponíveis na Internet.

Sua idéia básica é criar um mundo de informações sem fronteiras, prevendo as seguintes características:

- interface consistente;

- incorporação de um vasto conjunto de tecnologias e tipos de documentos;

- "leitura universal".

Para isso, implementa três ferramentas importantes:

- um protocolo de transmissão de dados - HTTP;

- um sistema de endereçamento próprio - URL;

- uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.

2. (HTML Básico) Introdução sobre HTML

HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto), é a junção dos padrões HyTime e SGML.

HyTime - Hypermedia/Time-based Document Structuring Language

Hy Time (ISO 10744:1992) - padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks.

O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que alicam os padrões de maneira particular

SGML - Standard Generalized Markup Language

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

SGML não é padrão aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.

DTD - Document Type Definition - define as regras de formatação para uma dada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML.

Portanto, HTML é definido segundo um DTD de SGML.

Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:

Todos os elementos podem ter atributos:

HTML é um recurso muito simples e acessível para a produção de documentos. Nestes “capítulos”, será possível aprender grande parte de seus elementos.

2.1 Edição de documentos HTML

Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi, emacs, textedit, notepad, ou qualquer editor simples.

Para facilitar a produção de documentos, existem editores HTML específicos:

Editores de texto fonte

- facilitam a inserção das etiquetas, orientando o uso de atributos e marcações.

Ex.: W3e, HotDog, Crimson Editor.

Editores WYSIWYG

- oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página).

Ex.: FrontPage, Namo Editor, Dreamweaver.

Além dos editores específicos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML.

O documento HTML produzido, normalmente terá extensão .html ou .htm.

2.2 Publicação de documentos

Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor.

Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos.

Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas.

2.3 O documento básico e seus componentes

A estrutura de um documento HTML apresenta os seguintes componentes:

<HTML>

<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>

<BODY>

texto,

imagem,

links,

...

</BODY>

</HTML>

As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...

Os documentos se dividem em duas seções principais, que veremos a seguir.

2.4 <HEAD>

<HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:

<HEAD><TITLE>A seção <HEAD> - [TUTO] Saiba Tudo Sobre HTML</TITLE></HEAD>

Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prática a importância do título, se você adicionar esta página aos seus Favoritos (Bookmarks).

Note que o título da página se tornou a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução". O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet.

Além do título, <HEAD> contém outras informações de importância para os robôs de pesquisa, indicadas nos campos <META>.

Campos <META>

Os campos <META> têm dois 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.

<HEAD>

<TITLE>Título do Documento</TITLE>

<META NAME="nome" CONTENT="valor">

<META HTTP-EQUIV="nome" CONTENT="valor">

</HEAD>

Este documento, por exemplo, tem as seguintes informações:

<HEAD>

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<TITLE>A seção <HEAD> - Tutorial HTML do ICMC-USP</TITLE>

<META NAME="Author" CONTENT="ChipSkylark">

<META NAME="Generator" CONTENT="Namo WebEditor v5.0">

<META NAME="Description" CONTENT="Manual de referência para webdesigners e desenvolvedores de sites">

<META NAME="KeyWords" CONTENT="HTML, WWW, Webpublishing, Internet, Webdesign">

<LINK REL="stylesheet" HREF="folhatut.css">

</HEAD>

Alguns valores dos atributos META NAME são inseridos automaticamente por alguns editores, por exemplo: Generator e Author. Os campos Description e KeyWords ajudam a classificação da página em algumas ferramentas de busca. Essas informações não têm qualquer efeito na apresentação da página, mas servem como uma explicação ou documentação sobre as informações contidas nela.

Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-type, que indica o conjunto de caracteres usado na página: essa informação ajuda o browser a exibir corretamente os caracteres especiais que estiverem presentes no texto.

2.5 <BODY>

Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos.

Atributos de <BODY>

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

onde:

BGCOLOR

cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página)

TEXT

cor dos textos da página (padrão: preto)

LINK

cor dos links (padrão: azul)

ALINK

cor dos links, quando acionados (padrão: vermelho)

VLINK

cor dos links, depois de visitados (padrão: azul escuro ou roxo)

Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0.

Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.

2.6 Cabeçalhos

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:

<H1>Este é um cabeçalho de nível 1</H1><H2>Este é um cabeçalho de nível 2</H2>

<H3>Este é um cabeçalho de nível 3</H3><H4>Este é um cabeçalho de nível 4</H4>

<H5>Este é um cabeçalho de nível 5</H5><H6>Este é um cabeçalho de nível 6</H6>

Esses cabeçalhos são mostrados da seguinte forma:

Este é um cabeçalho de nível 1

Este é um cabeçalho de nível 2

Este é um cabeçalho de nível 3

Este é um cabeçalho de nível 4

Este é um cabeçalho de nível 5

Este é um cabeçalho de nível 6

Aninhamento de cabeçalhos

Os cabeçalhos não podem ser aninhados, isto é, a formatação:

<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

pode produzir algum resultado próximo ao desejado:

Este é

um cabeçalho de nível 1

dentro de um cabeçalho de nível 2

mas o mais comum é que os browsers "entendam" essa formatação como sendo:

<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2>

- ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1>, e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:

Este é

um cabeçalho de nível 1

dentro de um cabeçalho de nível 2

Alinhamento

Os cabeçalhos têm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>

Cabeçalho centralizado

<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>

Cabeçalho alinhado à direita

<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default)</H4>

Cabeçalho alinhado à esquerda (default)

2.7 Separados

Como vimos no primeiro exemplo, as quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.

Quebra de linha

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

Parágrafos

Para separar blocos de texto, usamos o elemento <P>:

Parágrafo 1;<P>Parágrafo 2.

que produz:

Parágrafo1;

Parágrafo2.

Combinando parágrafos e quebras de linha, temos:

Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.

O resultado da marcação acima é:

Parágrafo 1;

linha 1 do parágrafo 1,

linha 2 do parágrafo 1.

Parágrafo 2;

linha 1 do parágrafo 2,

linha 2 do parágrafo 2.

<P> tem atributo de alinhamento, como os cabeçalhos:

<P ALIGN=CENTER>Assim como os trens, as boas idéias às vezes chegam com atraso. <BR>(Giovani Guareschi)</P>

Assim como os trens, as boas idéias às vezes chegam com atraso.

(Giovani Guareschi)

<P ALIGN=RIGHT>Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.</P>

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

<P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</P>

Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.

Linha Horizontal

<HR> insere uma linha horizontal:

Essa linha tem diversos atributos, oferecendo resultados diversos.

<HR SIZE=7> insere uma linha de largura 7 (pixels):

<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>):

2.8 Listas

Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato:

<DL>

<DT>termo a ser definido

<DD>definição

<DT>termo a ser definido

<DD>definição

</DL>

Que produz:

termo a ser definido

definição

termo a ser definido

definição

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo são os índices de navega_1ção presentes nas pági nas deste tutorial; outro exemplo é a lista composta abaixo:

<DL>

<DT>Imperadores do Brasil:

<DD>D. Pedro I

<DL>

<DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

</DL>

<DD>D. Pedro II

<DL>

<DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

</DL>

Imperadores do Brasil:

D. Pedro I

Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon

D. Pedro II

Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

Listas não-numeradas

São equivalentes às listas com marcadores do MS Word:

<UL>

<LI>item de uma lista

<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

<LI>item

</UL>

item de uma lista

item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

item

A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

<UL>

<LI>Documentos básicos

<LI>Documentos avançados

<UL>

<LI>formulários

<UL>

<LI>CGI

</UL>

<LI>contadores

<LI>relógios

</UL>

<LI>Detalhes sobre imagens

</UL>

Documentos básicos

Documentos avançados

formulários

CGI

contadores

relógios

Detalhes sobre imagens

Essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):

<UL TYPE=CIRCLE>

<LI>um item

<LI>mais um item

</UL>

um item

mais um item

Cada item também pode ter seu atributo específico:

<UL>

<LI TYPE=DISC>um item

<LI TYPE=CIRCLE>mais um item

<LI TYPE=SQUARE>último item

</UL>

um item

mais um item

último item

Listas Numeradas

<OL>

<LI>item de uma lista numerada

<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

<LI>item de lista numerada

</OL>

item de uma lista numerada

item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto

item de lista numerada

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

Documentos básicos

Documentos avançados

formulários

CGI

contadores

relógios

Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

<OL TYPE=I>

<LI>Documentos básicos

<LI>Documentos avançados

<OL TYPE=a>

<LI >formulários

<OL TYPE=i>

<LI>CGI

</OL>

<LI>contadores

<LI>relógios

</OL>

<LI>Detalhes sobre imagens

</OL>

Documentos básicos

Documentos avançados

formulários

CGI

contadores

relógios

Detalhes sobre imagens

Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:

<OL START=4 TYPE=A>

<LI>um item

<LI>outro item

<LI>mais um item

</OL>

um item

outro item

mais um item

Listas e “sub-listas”

As listas podem ser aninhadas. Por exemplo:

<DL>

<DT>termo a ser definido

<DD>definição

<OL>

<LI>item de uma lista numerada

<UL>

<LI>item de uma lista

</UL>

<LI>item de uma lista numerada

</OL>

<DT>termo a ser definido

<DD>definição

</DL>

termo a ser definido

definição

item de uma lista numerada

item de uma lista

item de uma lista numerada

termo a ser definido

definição

3. Formatação de textos

Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação.

Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final).

Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.

A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos.

A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações.

3.1 Blocos dos textos

HTML oferece as seguintes formatações de blocos de texto:

<PRE>

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:

<pre>uma linha aqui,

outra ali,

etc.</pre>

Resulta em:

uma linha aqui,

outra ali,

etc.

Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

<BLOCKQUOTE>

É usado para citações longas:

<blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”)

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.

(Stephen W. Hawking, “Uma Breve História do Tempo”)

<***RESS>

Usado para formatar endereços E-mail e referências a autores de documentos:

Envie críticas e sugestões para <***ress>[email protected]</***ress>

Envie críticas e sugestões para

[email protected]

3.2 Frases

HTML permite dois tipos de formatação: lógico e físico; aqui veremos as formatações mais utilizadas:

Estilos Lógicos

<CITE>

Para títulos de livros, filmes, e citações curtas. Exemplo:

Assisti Guerra nas Estrelas umas oito vezes!

<CODE>

Para indicar trechos de código de programas. Exemplo:

for (x=0); cl &&(!feof(stdin)); x++));

<DFN>

Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo:

CERN: Centre d’Éstudes et Recherches Nucleaires

<EM>

Ênfase, também normalmente apresentado em itálico. Exemplo:

É preciso pesquisar muito para encontrar o termo exato.

<KBD>

Indica uma entrada via teclado. Exemplo:

Para ler mensagens recebidas, digite pine -i

<SAMP>

Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:

O resultado do primeiro applet é: Hello, World!

<STRONG>

Forte ênfase, mostrado normalmente em negrito. Exemplo:

Antes de enviar um e-mail, confira o campo “Subject:”!

<VAR>

Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo:

No campo Login, escreva guest.

Estilos Físicos

<B>

Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)

<I>

Itálico (em alguns casos, caracteres inclinados)

<TT>

Tipo teletype - fonte de espaçamento fixo.

<U>

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links.

<STRIKE> ou <S>

Frase riscada.

<BIG>

Fonte um pouco maior.

<SMALL>

Fonte um pouco menor.

<SUB>

Frase em estilo índice, como em H2O.

<SUP>

Frase em estilo expoente, como em Km2.

3.3 Caracteres Especiais

HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final.

Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência:

Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português:

Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente.

Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo:

<HTML>

<HEAD>

<TITLE>...</TITLE>

<META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=ISO-8859-1">

</HEAD>

...

Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que é o símbolo ©, ® para ®, e § para §.

Também se pode usar seqüências com códigos ASCII, por exemplo:

¿ E ai galera da Web Cheats!

E ai galera da Web Cheats!

3.4 Cores e Fontes

Cores

As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos):

<FONT COLOR="#rrggbb">Texto</FONT>

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>.

Tamanho

A formatação

<FONT SIZE=tamanho_da_letra>Texto</FONT>

permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3. Podemos indicar tamanhos relativos a esse, por exemplo:

<FONT SIZE=+2>Letra maior</FONT>

Letra normal

<FONT SIZE=-2>Letra menor</FONT>

Letra maior Letra normal Letra menor

Fontes

Uma evolução que permite a escolha da fonte para os textos, é o atributo FACE:

<FONT FACE="fonte_da_letra">Texto</FONT>

Por exemplo:

<FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</FONT>

Fonte Verdana azul

<FONT FACE="Arial" COLOR="#00AA00">Fonte Arial verde</FONT>

Fonte Arial verde

<FONT FACE="Courier New" COLOR="#AA0000">Fonte Courier New vermelha</FONT>

Fonte Courier New vermelha

3.5 Blinks

A formatação <BLINK>frase</BLINK> foi uma das primeiras inovações introduzidas pelo Netscape.

O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso.

Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript, como veremos em outra seção.

Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK.

Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande número, muito menos em frases inteiras ou cabeçalhos.

3.6 Marquee

É possível obter o efeito de animação de texto, através da formatação <MARQUEE>.

<MARQUEE BEHAVIOR=efeito>Texto</MARQUEE>

Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes):

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>

Texto

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>

Texto

<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

Texto

4. Ligações (uso de links)

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:

<A HREF = "arq_destino">âncora</A>

onde:

arq_destino

é o URL do documento de destino;

âncora

é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.

Atributos

<A> tem vários atributos, utilizados de acordo com a ação associada ao link. Os mais usados são:

HREF

Indica o arquivo de destino da ligação de hipertexto.

TARGET

Indica o frame em que será carregado o arq_destino. Maiores detalhes na seção sobre frames.

NAME

Marca um indicador, isto é, uma região de um documento como destino de uma ligação.

5. Inserção de imagens

O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo *** deve estar presente, da seguinte forma:

<IMG ***="URL_imagem">

onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Assim, escrevendo:

<IMG *** = "/icones/newred.gif">

inserimos a figura no documento.

As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, *.xbm, *.jpg (ou *.jpeg), *.png.

5.1 Atributos Básicos

ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente.

<IMG ***="URL_imagem" ALT="descrição_da_imagem">

Dessa forma, <IMG ***="/icones/newred.gif" ALT="Novo!"> é apresentado nos browsers gráficos assim: Novo! e, nos browsers texto, assim: [Novo!]

WIDTH e HEIGHT

Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

<IMG ***="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.

BORDER

Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição. Por exemplo:

Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

Se quisermos uma borda mais larga...

<A HREF="URL"><IMG ***="imagem" ALT="descrição" BORDER=4></A>

Se quisermos uma imagem sem borda...

<A HREF="URL"><IMG ***="imagem" ALT="descrição" BORDER=0></A>

Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação

<IMG ***="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2>

Assim, é possível dar mais destaque a uma imagem, sem ser necessário editá-la:

Foto Original

Foto com borda gerada por HTML

ALIGN

<IMG ***="imagem" ALT="descrição" ALIGN=alinhamento>

Existem também atributos de alinhamento, que produzem os seguintes resultados:

ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom.

ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom

ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)

ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

<IMG align=left ***="imagem.gif" alt="imagem"><IMG align=right ***="imagem.gif" alt="imagem">...e se pode escrever à vontade entre as imagens!

Isso resulta em:

...e se pode escrever à vontade entre as imagens!

Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou seja:

Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa...

...mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP.

Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>.

Com esse atributo, podemos, por exemplo...

...ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT>

ou no ponto em que a margem esquerda fica livre, com

<BR CLEAR=LEFT>

Dessa maneira, podemos controlar bem a posição relativa dos textos.

Também se pode posicionar o texto no ponto em que ambas as margens estão livres. TerraIsso é conseguido com

<BR CLEAR=ALL>

E, assim, vimos tudo sobre quebras de linha depois de imagens!

ISMAP

Qualquer imagem pode funcionar como uma âncora de link, como vimos no item sobre bordas. ISMAP indica quando uma imagem deve ser tratada como um mapa clicável, isto é, quando cada pixel de uma imagem pode ser considerado uma âncora para algum arquivo específico.

Os mapas serão apresentados com detalhes na seção de assuntos avançados, sob o item Interação.

5.2 Moldura

Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes:

<IMG ***="imagem" VSPACE=espaço_vertical>

<IMG ***="imagem" HSPACE=espaço_horizontal>

O efeito desses atributos pode ser percebido nos textos abaixo. No primeiro texto, as imagens não têm atributos de moldura (é fácil notar como o texto fica "grudado" na imagem)

O Instituto de Ciências Matemáticas e de Computação (ICMC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros. Atualmente, o Departamento de Matemática oferece cursos de Licenciatura e Bacharelado em Matemática em nível de graduação, além de um programa de pós-graduação que inclui mestrado e doutorado na área de Matemática. O Departamento de Computação e Estatística é responsável pelo curso de Bacharelado em Ciência de Computação, no qual ingressam 40 alunos por ano. Em nível de pós-graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área.

Neste segundo texto são usadas, respectivamente, as formatações:

<IMG ***="icones/fotoicm.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30">

e

<IMG ***="icones/smallpos.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30">

O Instituto de Ciências Matemáticas e de Computação (ICMC-USP) é formado pelos Departamentos de Matemática e de Ciências de Computação e Estatística. O ICMC originou-se em 1953, como Departamento de Matemática da Escola de Engenharia de São Carlos (EESC-USP), fundado por renomados matemáticos italianos e brasileiros. Atualmente, o Departamento de Matemática oferece cursos de Licenciatura e Bacharelado em Matemática em nível de graduação, além de um programa de pós-graduação que inclui mestrado e doutorado na área de Matemática. O Departamento de Computação e Estatística é responsável pelo curso de Bacharelado em Ciência de Computação, no qual ingressam 40 alunos por ano. Em nível de pós-graduação oferece, desde 1975, o programa de mestrado em Ciências de Computação e Matemática Computacional e, a partir de agosto de 1995, o programa de doutorado na mesma área.

Os dois atributos de moldura podem estar presentes ao mesmo tempo. Vejamos primeiro o texto com a imagem sem moldura:

"A cultura UNIX começou a ser apreciada por usuários brasileiros ainda na década de 70, pelos contatos de pesquisadores brasileiros em cursos de aperfeiçoamento no exterior - notadamente na América do Norte. O contingente era, contudo, pequeno e restrito a acadêmicos. A disseminação da cultura UNIX no mercado comercial só teve início com o advento da década de 80."

(Citação de texto encontrado à página 18 do livro UNIX - Guia do Usuário - Autores: Marcus C. Sampaio, Jacques P. Sauvé e J. Antão B. Moura - McGraw-Hill, 1988)

Abaixo, vemos a aplicação dos dois atributos, através da formatação:

<IMG ***="icones/earth.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20">

"A cultura UNIX começou a ser apreciada por usuários brasileiros ainda na década de 70, pelos contatos de pesquisadores brasileiros em cursos de aperfeiçoamento no exterior - notadamente na América do Norte. O contingente era, contudo, pequeno e restrito a acadêmicos. A disseminação da cultura UNIX no mercado comercial só teve início com o advento da década de 80."

(Citação de texto encontrado à página 18 do livro UNIX - Guia do Usuário - Autores: Marcus C. Sampaio, Jacques P. Sauvé e J. Antão B. Moura - McGraw-Hill, 1988)

6. (HTML Avançado) Tabelas

A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas.

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção.

Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa.

Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

7. Frames

Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte.

É muito fácil colocar frames em páginas; porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas.

Uma página com frames tem um texto fonte semelhante a:

É necessário se cadastrar para acessar o conteúdo.

A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela.

Dentro da formatação de FRAMESET, temos os FRAME ***, que são referências às páginas que serão mostradas nos frames definidos

Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela).

7.1 Links com frames

Sempre que se aciona um link dentro de uma página, o default (isto é, o comportamento padrão) é que a página referente a esse link seja carregada na mesma janela da página anterior.

No exemplo visto com frames, seguir um link dentro da janela à direita faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%):

É necessário se cadastrar para acessar o conteúdo.

Veja no código fonte acima que o frame associado a apresenta.html tem um atributo NAME. Nomear um frame permite que direcionemos o frame em que será apresentado o documento de destino de um link. No exemplo visto, o arquivo indice1.html tem um link da seguinte forma:

<a href="apresenta2.html" target=principal>Exemplo nº.2</a>.

Isto indica que se está definindo (pelo atributo target) o frame em que a página de destino do link (apresenta2.html) será mostrada.

7.2 Composições

Como já foi possível observar, a formatação FRAMESET tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas. Podemos utilizar uma combinação de "framesets" para criar diversos modos de apresentação do conteúdo de um site.

Antes de ver algumas composições, lembre-se de que os pontos-chave para o mecanismo dos frames são estes, mostrados no item anterior:

* a nomeação dos frames e

* a declaração dos targets dos links, que definem o frame no qual as páginas de destino serão mostradas.

Embora quase todos os editores WYSIWYG de HTML dêem suporte à criação de frames, é necessário que o autor se preocupe com os detalhes de nomeação de frames e direcionamento de links.

Como montar dois frames em coluna:

É necessário se cadastrar para acessar o conteúdo.

Dois frames em linha:

É necessário se cadastrar para acessar o conteúdo.

Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:

É necessário se cadastrar para acessar o conteúdo.

Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna:

É necessário se cadastrar para acessar o conteúdo.

O exemplo simples visto até agora segue o modelo da primeira composição (em colunas). As composições com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.

7.3 Atributos

Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), *** e NAME (para FRAME).

Outros atributos permitem um maior controle sobre a apresentação:

Eliminação das bordas dos frames:

<FRAMESET COLS="20%, 80%" FRAMEBORDER="no">

<FRAME ***="indice4.html">

<FRAME ***="apresenta4.html" NAME="principal">

</FRAMESET>

Frame sem barra de rolagem:

<FRAMESET COLS="20%, 80%">

<FRAME ***="indice4.html" SCROLLING="no">

<FRAME ***="apresenta4.html" NAME="principal">

</FRAMESET>

É bom lembrar que a barra de rolagem de um frame fica sempre à direita; não é possível, atualmente, mudar essa característica.

7.4 Aplicações e Cuidados

Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para a navegação. Além disso, torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do browser.

Um cuidado é procurar controlar bem a navegação, evitando que o acionamento de links não leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confusão (veja item seguinte, sobre "limpar" a tela).

8. Interação

A interação é realizada de duas formas diferentes:

1. através de programas executados/interpretados pelo browser (isto é, do lado do cliente);

2. através de programas executados pelo servidor HTTP.

Conforme a aplicação, apenas um destes tipos de interação pode ou deve ser utilizado.

8.1 Mapas

Mapas clicáveis executados pelo servidor (´server-side imagemaps´)

Um primeiro método para criação de mapas é usando a comunicação com o servidor HTTP.

Os servidores WWW têm um programa que lida com a relação entre coordenadas de imagens e URLs. No servidor NCSA, esse programa é o imagemap, no CERN é o htimage. No servidor Apache, o módulo imagemap já vem embutido mas sua ativação deve ser configurada.

Escolhida a imagem que servirá de base de partida de diversos links para outros documentos, é preciso gerar um arquivo relacionando coordenadas da imagem a determinados links. Essas coordenadas são encontradas por meio de programas de manipulação de imagens ou pelo próprio editor de HTML.

Um arquivo .map (do servidor NCSA), tem o conteúdo organizado da seguinte forma:

Um arquivo .conf (do servidor CERN), tem o conteúdo organizado da seguinte forma:

Ambos arquivos significam a mesma coisa:

1. a região da figura, compreendida pelo retângulo (rect) de coordenadas (15,8) e (135,39), funciona como um link para o URL

É necessário se cadastrar para acessar o conteúdo.

2. a região da figura, compreendida pelo círculo (circle ou circ) de centro (306,204) e raio 7 é um link para o URL

É necessário se cadastrar para acessar o conteúdo.

3. se o mouse não for acionado em nenhuma dessas duas regiões previstas, o link será dirigido para o arquivo default - neste exemplo, o nada.html

O formato desses arquivos para figuras clicáveis pode variar, mas basicamente contém esses mesmos elementos:

default - indica um endereço padrão para quando o mouse for acionado em uma área da figura além das previstas pelo autor;

circle ou circ - declara um círculo na figura; os pontos indicam o centro e um ponto de fronteira do círculo;

poly - um polígono; cada coordenada declarada é um vértice;

rect - um retângulo; as coordenadas declaradas são, respectivamente, do vértice esquerdo superior e vértice direito inferior.

Tão logo seu arquivo fazclic.map esteja pronto, seu mapa sensível deve ser declarado da seguinte maneira:

<A HREF="

É necessário se cadastrar para acessar o conteúdo.

***="mapa.gif" ISMAP></A>

onde

É necessário se cadastrar para acessar o conteúdo.

- é o endereço para o arquivo .map que contém as diretivas que associam regiões da figura a referências WWW

mapa.gif - é a figura que irá "funcionar" como mapa clicável

O servidor HTTP deve estar configurado para reconhecer os arquivos .map como diretivas de execução de mapas clicáveis, para fazer a correspondência entre as coordenadas de um pixel e o caminho de um arquivo.

Se essa configuração não estiver ativa, ou faltarem arquivos que permitem esse recurso, o resultado de se acionar o mouse sobre um mapa clicável será apenas o de se obter o código fonte do arquivo .map; o URL desse resultado será o endereço do arquivo .map, seguido pela coordenada do pixel sobre o qual o mouse foi acionado.

Exemplo de um arquivo mapa.map, para a figura abaixo:

#Pagina da Graduacao

rect exemplos/grad.html 0,0 130,45

#Pagina do Mestrado

rect exemplos/mestr.html 133,0 230,45

#Pagina do Doutorado

rect exemplos/dout.html 234,0 364,45

Esta formatação declara a imagem acima como mapa clicável:

<A HREF="mapa.map"><IMG ***="icones/cursos.gif" ISMAP BORDER=0></A>

Como nosso servidor não está configurado para executar mapas, somente abaixo temos um exemplo ativo, executado pelo cliente (o browser).

Mapas clicáveis executados pelo cliente (´client-side imagemaps´)

Com o client-side imagemap, os mapas sensíveis são rastreados pelo browser no momento em que o usuário escolhe um ponto na imagem. Dessa forma, o servidor já recebe uma requisição de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente já foram identificados pelo browser.

Na verdade, a relação coordenadas-documentos continua existindo, mas agora em vez de estar em um arquivo .map separado, está dentro do próprio documento. Preste atenção ao conjunto de atributos necessários para que o mapa funcione:

<MAP NAME="nomemapa">

<AREA SHAPE="forma1" HREF="arq1.html" COORDS="x1,y1,x2,y2">

<AREA SHAPE="forma2" HREF="arq2.html" COORDS="x3,y3,x4,y4">

</MAP>

<IMG ***="imagem.gif" USEMAP="#nomemapa">

Neste exemplo, transformamos a barra abaixo em mapa sensível:

<map name="mapname">

<area shape="rect" href="exemplos/grad.html" COORDS="0,0,130,45">

<area shape="rect" href="exemplos/mestr.html" COORDS="133,0,230,45">

<area chape="rect" href="exemplos/dout.html" COORDS="234,0,364,45">

</map>

<img ***="icones/cursos.gif" USEMAP="#mapname" border=0>

8.2 Formularios

Um formulário é um modelo para a entrada de um conjunto de dados. O primeiro passo para fazer formulários é aprender as etiquetas que desenham as janelinhas de entrada de dados, para depois trabalharmos com os scripts, que são os programas que tratam esses dados, oferecendo os serviços desejados (acesso a banco de dados, envio de e-mail, etc.).

O elemento <****> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento.

<**** ACTION="URL_de_script" METHOD=método>...</****>

Os atributos de **** que nos interessam agora são:

ACTION

Especifica o URL do script ao qual serão enviados os dados do formulário.

METHOD

Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica:

POST

- os dados entrados fazem parte do corpo da mensagem enviada para o servidor;

- transfere grande quantidade de dados.

GET

- os dados entrados fazem parte do URL (endereço) associado à consulta enviada para o servidor;

- suporta até 128 caracteres.

Veremos maiores detalhes sobre métodos no item CGI.

**** também pode apresentar o atributo:

ENCTYPE

Indica o tipo de codificação dos dados enviados através do formulário. O tipo default é application/x-www-****-urlencoded. Outro tipo aceito por alguns browsers é text/plain.

Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos dentro da marcação de <****> as formatações para campos de entrada de dados, que são três: *******>, <SELECT> e <TEXTAREA>.

Todos os campos de entrada de dados têm um atributo NAME, ao qual associamos um nome, que será utilizado posteriormente pelo script. São os scripts que organizam esses dados de entrada em um conjunto de informações significativas para determinado propósito.

Primeiro vamos ver os tipos de campos para montar um formulário, e depois passaremos aos scripts.

8.3 CGI Scripts

CGI, ou Common Gateway Interface, é uma interface definida de maneira a possibilitar a execução de programas - "gateways" - sob um servidor HTTP. Neste contexto, os "gateways" são programas ou scripts (também chamados "cgi-bin") que recebem requisições de informação, retornando um documento com os resultados correspondentes. Esse documento retornado pode existir previamente, ou pode ser gerado pelo script especialmente para atender àquela requisição específica do usuário (diz-se que o documento é ´gerado “on the fly”´).

Exemplos de aplicação de CGI incluem:

processamento de dados submetidos através de formulários: consulta a banco de dados, cadastramento em listas, livros de visita, pesquisas de opinião;

criação de documentos personalizados on the fly;

gerenciamento de contadores de acesso;

processamento de mapas.

Tais scripts podem ser escritos em qualquer linguagem que possa ler variáveis, processar dados e retornar respostas - ou seja, qualquer linguagem de programação! A linguagem é determinada de acordo com a plataforma do servidor e da aplicação a ser implementada.

Visão Geral

Os scripts têm uma forma geral comum:

1. leitura de dados entrados pelo usuário (e/ou campos de informação de um pacote HTTP);

2. processamento dos dados (armazenamento dos dados em um banco de dados, realização de cálculos, recuperação de dados etc.);

3. montagem de uma página Web ou geração de uma imagem com os resultados produzidos.

9. Áudio e Vídeo

O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos dois anos, e é bom saber como usar bem estas mídias.

Áudio e vídeo são classificados como "mídias contínuas", pois são geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenados, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web.

Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorar tecnologias recentes que permitem a transmissão em tempo real.

9.1 Áudio

Há duas maneiras de inserir som em uma página:

<EMBED ***="audio.som"> insere o arquivo de som como objeto.

<BGSOUND ***="audio.som"> faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona no Internet Explorer.

Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para "executar" o arquivo de som por meio de um plug-in adequado, ou se o computador em que estiver carregada a página não tiver instalada uma placa de som.

O áudio desta página foi inserido com parâmetros semelhantes a estes:

<EMBED ***="música.mid" WIDTH="100" HEIGHT="17" AUTOSTART="true">

(Som: Que nem Maré, Jorge Vercilo - arquivo midi - Beatriz Kauffmann´s Web Site)

A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página. De maneira geral, esta formatação pode servir para a inserção de um arquivo QuickTime:

<EMBED ***="arquivo.mov">

Uma formatação mais completa inclui a indicação do plug-in e controles da reprodução do vídeo. O vídeo abaixo foi inserido com parâmetros semelhantes a estes:

<EMBED ***="vídeo.mov" PLUGINSPACE="

É necessário se cadastrar para acessar o conteúdo.

LOOP="false" CONTROLLER="true" AUTOPLAY="false" WIDTH="400" HEIGHT="150">

10. Folhas de Estilo

Um avanço interessante na linguagem HTML após a versão 3.2 foi a introdução das Style Sheets ou Cascading Style Sheets. Essas folhas de estilo permitem o uso de formatações uniformes em um site, de maneira bastante "econômica".

Logo nas primeiras seções deste tutorial (Cores e fontes de textos), vimos que, para poder formatar um texto, era preciso escrever uma marcação parecida com:

<h3><font face="Arial" color="#4A7D7B">Um título genérico</font></h3>

<p><font face="Arial" size="2">Um texto genérico com algum </font><font face="Arial" size="2" color="red">destaque qualquer</font><font face="Arial" size="2"> junto, após um título genérico, etc.</font></p>

para ter o resultado:

Um título genérico

Um texto genérico com algum destaque qualquer junto, após um título genérico, etc.

Acontece que, de um documento para outro, pode acontecer de esquecermos o tamanho da fonte usada no texto, qual a fonte ou a cor dos títulos de determinada subseção, e a uniformidade de apresentação das páginas acaba ficando prejudicada.

Com as folhas de estilo, podemos declarar estilos apropriados para seções de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos.

E mais: se for necessário modificar algum dia as cores de todos os títulos ou dos destaques ao longo dos textos, simplesmente alteramos a folha de estilo, atualizando imediatamente a apresentação de todos os documentos que fazem referência a ela.

Para o exemplo acima, poderíamos criar a seguinte folha de estilo:

BODY { font: 10pt Arial }

H3 { color:#4A7D7B }

.destaque { color: red }

E assim, para ter o mesmo resultado do exemplo acima, a formatação seria muito mais simples que a primeira:

<h3>Um título genérico</h3>

<p>Um texto genérico com algum <span class="destaque">destaque qualquer</span> junto, após um título genérico, etc.</p>

A definição da folha de estilo deve ficar dentro de <HEAD>, da seguinte forma, se a folha for definida dentro do mesmo documento em que está sendo usada:

<HEAD>

...

<STYLE TYPE="text/css">

BODY { font: 10pt Arial }

H3 { color:#4A7D7B }

.destaque { color: red }

</STYLE>

...

</HEAD>

Ou então,quando a folha de estilo é definida externamente:

<HEAD>

...

<LINK REL="stylesheet" HREF="folha_de_estilo.css">

...

</HEAD>

Neste caso, uma mesma folha de estilo pode ser usada por vários documentos HTML, que também poderão ter suas próprias folhas de estilo internas.

Créditos

ChipSkylark

ICMC-USP

Google

**marcuskenken** · 2 de Maio 2012

#Muito Bom Amigo

#Mas Devo Acrescentar que isso nao e Tudo

# De Html

# Eu Acho Que e O Basico

#Falow

#level meu Thanx

**mikhail** · 7 de Maio 2012

Deve ter dado um trabalhão editar tudo isto.

Parabéns!

É necessário se cadastrar para acessar o conteúdo.

. Muitos parecidos, em alguns terechos identicos.

**C£rberus** · 10 de Maio 2012

Muito bem explicado o seu tópico, irá ajudar muita gente !

**'Cнiiρ** · 12 de Maio 2012

Deve ter dado um trabalhão editar tudo isto.

Parabéns!

É necessário se cadastrar para acessar o conteúdo.

Entre

ou

Cadastre-se

. Muitos parecidos, em alguns terechos identicos.

é como você disse, muito parecido em alguns trechos, peguei um pouco de cada lugar e fui formando o meu tutorial !

Mais obrigado mesmo assim por comentar !

**gaabscps** · 12 de Maio 2012

Aha.

Se colou de outros sites e apenas juntou tudo, deveria ter dado os devidos créditos, e não apenas a si mesmo por ir catando coisas de vários lugares.

Entrar

Quem está por aqui 0 membros estão online

[TUTO] Saiba Tudo Sobre HTML

Posts Recomendados

'Cнiiρ 17

Link para o comentário

Compartilhar em outros sites

marcuskenken 0

Link para o comentário

Compartilhar em outros sites

mikhail 99

Link para o comentário

Compartilhar em outros sites

C£rberus 1

Link para o comentário

Compartilhar em outros sites

'Cнiiρ 17

Link para o comentário

Compartilhar em outros sites

gaabscps 7

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante