Apostila HTML

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET
I200 HTML COMPLETO
HTML Completo
Um curso Infnet utilizando a metodologia NETLEARN.
INSTITUTO INFNET - 1
I200 HTML COMPLETO
ndice
UA1: O HTML 1.1 O formato do HTML, pg. 11 1.2 Os tags bsicos I (estrutura, formato, texto) , pg. 22 1.3 Os tags bsicos II (fontes, comentrios, linhas) , pg. 41 1.4 Formatando Listas , pg. 58 UA2: Conceitos para edio do HTML 2.1 Navegabilidade , pg. 73 2.2 Imagens , pg. 86 2.3 Cores em hexadecimal , pg. 98 2.4 Atributos do tag <body> , pg. 101 2.5 Os tags <meta> , pg. 109 UA3: Tabelas e Frames 3.1 Estruturando a Tabela, pg. 116 3.2 Frames , pg. 135 UA4: Formulrios 4.1 Os elementos do formulrio , pg. 155 4.2 O uso do JavaScript e das CSS , pg. 170 Adendo - Achando imagens na web, pg. 176 - Interpretando Mapas Sensitivos, pg. 177 - Insero de som, pg. 178 - Soluo dos exerccios, pg. 179 - Referncias para consulta , pg. 180 - ndice de tags , pg. 186 - Tabela de caracteres especiais , pg. 213 - Tabela de Cores em Hexadecimal, pg. 214
I200 HTML COMPLETO
Sobre o Instituto Infnet

Histrico Parcerias Treinamento aberto Treinamento fechado Contato
NETLEARN - INTRODUO
Histrico: Fundado em outubro de 1994, o Infnet hoje a empresa lder em treinamento de Tecnologia da Informao (TI) e Design Digital. Alm de servir como referncia no aperfeioamento e reciclagem de profissionais de informtica, o Instituto Infnet capacita funcionrios para dezenas de empresas, como Embratel, Furnas, Telerj, BNDES, Fleischmann Royal, Origin, FGV, Xerox, De Pl, Ponto Frio etc. Parcerias: O Instituto Infnet parceiro educacional da Adobe, Macromedia, Microsoft, RealNetworks e RNP, sendo tambm parceiro do portal TI Master (www.timaster.com.br), que dirigido ao desenvolvimento profissional na rea de TI. Educao e treinamento: O Instituto oferece formaes completas em TI e Design Digital, que podem ser amplamente conhecidas em nosso site, www.infnet.com.br. Os cursos so oferecidos tanto em turmas abertas, nas salas de aula do Instituto, ou em empresas. O Instituto tambm tem um longo e bem sucedido histrico de cursos personalizados para empresas, voltados para atender a necessidades especficas. Para entrar em contato com o Infnet, utilize nossa Central de Atendimento, pelo (21) 21228800, ou envie e-mail para info@infnet.com.br.
I200 HTML COMPLETO
NETLEARN ONE
UA
MDULO DE INTRODUO
1a UNIDADE DE APRENDIZADO
REFERNCIAS ESTUDO DE CASOS
PROJETO JNIOR
BCA
BCA
INTRODUO DA UA
DESCRIO CONCEITOS BSICOS
BLOCO DE CONSTRUO DO APRENDIZADO

TEORIA EXEMPLO LAB
BLOCO DE CONSTRUO DO APRENDIZADO

TEORIA EXEMPLO LAB
EXERCCIOS APRESENTAO
EXERCCIOS APRESENTAO
NETLEARN - INTRODUO
NETLEARN ONE : O mtodo NETLEARN ONE foi desenvolvido pelo Infnet para que os alunos obtivessem um grau de entendimento e reteno das tecnologias ensinadas muito superior aos cursos tradicionais. Sua criao teve por base uma longa experincia no ensino de TI (Tecnologia da Informao) e um profundo estudo das necessidades e dificuldades dos alunos em sala. O mtodo no somente permite uma melhor compreenso das aulas, mas um aproveitamento superior dos conhecimentos adquiridos quando aplicados em ambientes reais de produo. Seguindo a risca as instrues de seus professores, profissionais dos mais competentes, voc vai tirar proveito total do mais eficaz mtodo de ensinoaprendizagem de tecnologias intranet/Internet disponvel hoje. O mtodo NETLEARN patenteado pelo Infnet e sua utilizao sem autorizao escrita e explcita do Infnet constitui crime previsto em lei.
I200 HTML COMPLETO
Observao Importante:
O mtodo NETLEARN visa trazer o melhor para os alunos. E ns sabemos que para se ter o melhor preciso que se tenha flexibilidade. Cada assunto tem suas caractersticas especficas. Cada curso tem suas necessidades. Por isso, nem sempre todos os mdulos do NETLEARN estaro presentes em todos os cursos.
5
NETLEARN - INTRODUO
NETLEARN: O objetivo primordial do Infnet que voc efetivamente aprenda. A utilizao da metodologia NETLEARN facilita o processo de aprendizado e aumenta a reteno do conhecimento. Entretanto, nem todas as etapas da metodologia so benficas para todos os tipos de cursos ou assuntos. A generalizao excessiva no traz benefcios para os alunos. Por isso, o Infnet no vai deixar de oferecer o melhor para voc por falta de flexibilidade.
I200 HTML COMPLETO
A apostila
Sua apostila dividida em 2 partes:
os slides, na parte de cima de cada pgina as anotaes, na parte de baixo
Slides:
So os slides que o professor vai utilizar durante o curso.
Anotaes:
Informaes complementares, zoom no cdigo de programas e espao para voc escrever
6
NETLEARN - INTRODUO
Slides: Os slides de sua apostila so os mesmos usados pelo professor durante o curso. Voc poder acompanhar todas as aulas atravs deles e estudar a matria posteriormente com este material. Anotaes: Abaixo dos slides, h um espao chamado de anotaes. Ele tem vrios propsitos: Conter informaes complementares ao contedo do slide, muitas vezes evitando que voc precise anotar tudo o que o professor diz em aula. Servir de referncia em tpicos mais extensos, permitindo que voc se aprofunde na matria aps o trmino do curso. Repetir o cdigo de programas, imagens e telas capturadas que ficaram muito pequeninas no slide, facilitando sua leitura e o acompanhamento das aulas. Ser um espao para voc escrever suas prprias observaes e perguntas.
I200 HTML COMPLETO
Apresentaes
Professor
Nome E-mail Experincia
Alunos
Nome Empresa onde trabalha e cargo Expectativas
7
NETLEARN - INTRODUO
I200 HTML COMPLETO
Logstica
Horrios Computadores e Rede Banheiros Cigarro Telefone
NETLEARN - INTRODUO
I200 HTML COMPLETO
Objetivos do curso
Posicionar a tecnologia de construo de pginas HTML no contexto do desenvolvimento Web Ensinar a sintaxe da linguagem HTML atravs de teoria e exemplos prticos Ensinar as questes fundamentais de criao de pginas web Preparar para o entendimento das demais tecnologias de desenvolvimento de websites dependentes do HTML
9
NETLEARN - INTRODUO
I200 HTML COMPLETO
Pblico alvo
Desenvolvedores que pretendem usar o HTML para construir pginas para sites em Internet e Intranet Desenvolvedores que precisam do HTML para construir a interface de suas aplicaes Gerentes de projetos Web que precisam conhecer o potencial do HTML Designers que pretendem investir na criao de sites Web
10
NETLEARN - INTRODUO
I200 HTML COMPLETO
Pr-requisitos
Conhecimento bsico em Internet (navegao)
11
NETLEARN - INTRODUO
I200 HTML COMPLETO
Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos
1- O HTML
Unidade de Aprendizado
I200 HTML COMPLETO
1.1 O Formato do HTML

Bloco de Construo do Aprendizado
I200 HTML COMPLETO
O Formato do HTML
Voc aprender : O que HTML, sua estrutura e sintaxe bsica Por que existe e por quem documentado Suas caractersticas e comportamentos gerais
14
UA O HTML
I200 HTML COMPLETO
O que HTML?
HyperText Markup Language Sua especificao desenvolvida pelo Quando trabalha com o JavaScript, torna-se um HTML dinmico (DHTML) www.w3.org
15
UA O HTML
HTML a sigla usada para HyperText Markup Language (Linguagem de Marcao de Hipertexto). Utilizamos esta linguagem na criao de pginas para Web. simples e fcil de entender, pois no uma linguagem de programao, mas uma linguagem de formatao de textos. A especificao original do HTML foi desenvolvida por Tim Berners-Lee, atual presidente do World Wide Web Consortium W3C, organizao hoje responsvel pela sua padronizao. As pginas HTML podem ser usadas para interagir com tecnologias como DHTML (com JavaScript), ASP, ColdFusion, Livewire, Perl, etc, que permitem consultas a bancos de dados, estabelecendo uma interao maior com o usurio.
I200 HTML COMPLETO
tags do HTML
tags so os comandos do HTML, e tm a seguinte construo:
<nome_do_tag atributo=valor> ... </nome_do_tag>
A maioria dos tags HTML possuem um tag que indica o seu fechamento
16
UA O HTML
Podem ser escritas tanto em letras minsculas quanto em maisculas, mas a W3C recomenda que o cdigo sempre seja escrito em letras minsculas. A maioria das tags HTML possui uma tag que indica o seu fechamento.
I200 HTML COMPLETO
A rea de influncia
Tags podem ser usados dentro de outros tags Exemplo:
<b>Conhea tudo sobre <i>Internet</i></b>
LIFO (Last In First Out)
17
UA O HTML
Os tags HTML podem ser usados dentro de outros tags, ou seja, podemos aninhar tags para causar um efeito desejado. Por exemplo, se desejamos colocar tambm em itlico uma palavra que est dentro de uma frase j em negrito:
<b>Conhea tudo sobre <i>Internet</i></b>
Devemos sempre lembrar de fechar primeiros os ltimos tags abertos e depois ir fechando os demais. Esta ordem de fechamento importante. chamada de ordem LIFO (Last In First Out) No exemplo anterior, o primeiro tag que foi fechado foi o ltimo a ser aberto. Fechamos primeiro o </i> e depois o </b>
I200 HTML COMPLETO
Os atributos
So normalmente usados para mudar o comportamento padro do tag, por exemplo:
bgcolor="red" width=400 align="left
Se o valor de um atributo for uma frase, ou texto que contenha espaos, ele deve estar entre aspas Os tags de fechamento no possuem atributos
18
UA O HTML
Nem todos os tags possuem atributos. Eles so normalmente usados para mudar o comportamento padro do tag, como indicar uma cor, por exemplo. bgcolor="red" width=400 align="left Se o valor de um atributo for uma frase ou texto que contenha espaos, o mesmo deve estar entre aspas. Cada tag tem o seu conjunto especfico de atributos. Os tags de fechamento no possuem atributos.
I200 HTML COMPLETO
A Aparncia de um tag
Alguns exemplos de tags:
<div align=center> Link para a Infnet </div> <b>Curso de HTML</b> <i>Infnet 2002</i> <font color="blue">Internet</font>
19
UA O HTML
O tag <div> uma tag que define um bloco dentro do documento. O atributo chamado align recebe como valor o alinhamento que eventualmente desejemos dar ao seu contedo. O tag <b> coloca o texto que est entre a abertura do tag e o fechamento </b> em negrito. Ento o resultado seria: Curso de HTML O tag <i> usado para colocar um texto em itlico, ou seja, o texto ou frase que estiver entre o incio e o fim do tag <i> e </i> ficaro em itlico. O resultado seria : Infnet - 2002 Podemos observar que os tags <b> e <i> no possuem atributos, enquanto o tag <div> possui um atributo que pode modificar o seu comportamento.
I200 HTML COMPLETO
Edio do HTML
O texto em HTML se comporta de forma diferente dos editores comuns.
So ignoradas quebras de linha Somente um espao em branco contado entre cada palavra
Necessitam, assim de tags especficas

<br>
20
UA O HTML
Os textos exibidos em uma pgina HTML no se comportam como os textos de um editor de textos. Por exemplo: so ignoradas quebras de linha; somente um espao em branco contado entre cada palavra. Para resolver essas situaes, so usados tags que veremos mais adiante. Quando desejarmos inserir quebras de linhas em textos de nossas pginas HTML, necessrio indicar estas quebras de linha para que sejam interpretadas pelo browser no momento em que o texto for exibido. Usamos o tag <br> para inserir quebras de linha. Quando um texto for colocado em uma pgina HTML sem a indicao de quebra de linha (sem o tag <br>), ele ser exibido em uma s linha, como se no houvesse quebra de linha. Isso ocorre pois para o HTML quebras de linhas somente existem quando indicadas pelo tag <br>.
I200 HTML COMPLETO
Alguns comportamentos do HTML

Tags incorretos
Tag escrito errado: ignorado pelo browser (texto posterior apresentado normalmente) No h mensagens de erro
Colapso do cdigo
Mais de um espao em branco no cdigo = um espao em branco Um ou mais comandos de enter no cdigo = um espao em branco
21
UA O HTML
Caso seja escrito um tag de forma errada, ou mesmo inventada pelo usurio, o browser ignora-o e o texto que estiver aps esse tag ser apresentado normalmente. No h mensagens de erro para tags incorretos. Quando se est trabalhando no cdigo-fonte de um arquivo HTML e nele inserido um ou mais espaos em branco, dizemos que o browser faz o colapso do cdigo, isto , exibe o contedo com somente um espao em branco naquele local. O mesmo ocorre quando teclamos enter uma ou mais vezes no cdigo-fonte: ele(s) ser(o) interpretado(s) como um espao em branco. Caso queira-se inserir mais de um espao em branco, ter que se trabalhar com a codificao de caracteres especiais, objeto de ensinamento mais frente, neste curso.
I200 HTML COMPLETO
Exerccio terico
Resolva o questionrio abaixo.
22
UA O HTML
Exerccios:
1) Quais os tags esto corretos e quais os incorretos ? (Justifique) a) <HtmL> b) <B><I>Texto</B></I> c) <FONT>Texto</FONT color=red> d) <A name=alvo do link> 2) Leia atentamente as afirmativas abaixo:
i) Qualquer tag HTML pode ser escrita com letras minsculas, mas o W3C World Wide Web Consortium recomenda que sejam escritas com letras maisculas. ii) O World Wide Web Consortium o rgo que inventou a Internet e, por isso tem como seu presidente Tim Berners-Lee. iii) Os tags HTML podem ser usados dentro de outros tags, ou seja, podemos aninhar tags para causar um efeito desejado. iv) LIFO (Last In First Out) a representao do processo de se fechar primeiramente a ltima tag inserida no cdigo-fonte, caso ele tenha essa tag. v) LIFO (Last In First Out) a representao do processo de se fechar primeiramente a ltima tag inserida no cdigo-fonte, mesmo que ela no tenha fechamento.
Responda: a) Somente a alternativa iv verdadeira b) Somente a alternativa iv falsa c) As alternativas ii, iii e iv esto corretas d) As alternativas iii e iv esto corretas e) As alternativas iii e v esto corretas
I200 HTML COMPLETO
O que j aprendemos?
UA 1: O HTML BCA 1.1: O formato do HTML
23
UA O HTML
J aprendemos: que o HTML uma linguagem de marcao de texto utilizada para demarcar a estrutura da visualizao das pginas web que o W3C a organizao que padroniza o HTML que as pginas web so visualizadas em navegadores (ou browsers) que os navegadores podem exibir as pginas de formas nem sempre idnticas o que so tags, reas de influncia e atributos
I200 HTML COMPLETO
1.2 Os tags bsicos I

I200 HTML COMPLETO
Os tags bsicos I
Voc aprender: A estrutura de uma pgina HTML tags de Cabealho e Corpo tags bsicos de formatao de texto
25
UA O HTML
I200 HTML COMPLETO
Cabealho e corpo
O cdigo da pgina HTML inserido na rea de influncia de <html> e </html> O cdigo dividido em duas partes:
Cabealho: <head> ... </head> Corpo: <body> ... </body>
26
UA O HTML
Os tags <html> e </html> como foi explicado, tm como objetivo indicar o incio e o final de sua pgina HTML. Entre estes tags esto os tags que iro indicar o cabealho e o corpo de nossa pgina HTML. O cabealho est contido na rea de influncia de <head> e </head>, onde estaro relacionadas tags que tero finalidades especficas, tais como a de levar informaes para o servidor (na Internet), para o navegador e outras. O contedo visvel da pgina HTML aquele que estar contido na rea de influncia de <body> e </body>.
I200 HTML COMPLETO
Cabealho
O <head> uma rea de configurao da pgina
Scripts Metas (informao sobre o documento) Podemos inserir o ttulo da pgina que aparece na barra de ttulo do navegador. <title> ... </title>
* O ttulo no o nome do arquivo
O nome do arquivo deve ter a extenso .htm ou .html

27
<html> <html> <head> <head> <title> Ttulo </title> <title> Ttulo </title> </head> </head> ... ... </html> </html>
UA O HTML
na rea de cabealho que definido o ttulo de nossa pgina, usando o tag <title>. O ttulo no apresentado na tela do browser. <title> deve conter uma breve descrio do contedo da pgina, e o tag mais importante do cabealho, no devendo ser omitido. Geralmente usamos o cabealho para incluir os tags de ttulo da pgina <title> e </title>. muito importante darmos nomes s nossas pginas, e isso deve tornarse um hbito. comum vermos pginas com nomes iguais, sem nomes ou com nomes que no dizem nada. Quando marcamos uma pgina (usando a opo de Bookmark ou Favoritos) o browser guarda, alm do endereo, o nome da mesma (o nome que est entre os tags <title> e </title>). Caso esse nome no identifique corretamente o contedo da pgina, com certeza os usurios ficaro perdidos ao procurar esta pgina posteriormente em seus bookmarks ou Favoritos. Algumas pessoas confundem ttulo com nome de arquivo. Observa-se, no entanto, que o nome do arquivo aquele que adicionamos a extenso .htm ou .html para identific-lo fisicamente.
I200 HTML COMPLETO
Corpo
Os tags <body> e </body> definem a rea do corpo de uma pgina na rea de influncia este tag que escreveremos todo cdigo de nossa <html> <html> pgina. <head> <head>
<title> Ttulo </title> <title> Ttulo </title> </head> </head> <body> <body> ...cdigo da pgina... ...cdigo da pgina... </body> </body> </html> </html>
28
UA O HTML
O <body> e seu fechamento </ body > so os tags que definem o corpo da pgina, ou seja, entre estes tags que iremos desenvolver a criao de nossa pgina HTML. Todos os links, tabelas e demais formataes estaro dentro da rea de influncia de < body> e </ body>
I200 HTML COMPLETO
Inserindo contedo de texto

Contedo deve ser inserido na rea de influncia do par de tags <body> e </body> Cuidado com acentos e caracteres especiais das lnguas latinas
29
UA O HTML
O contedo de sua pgina HTML deve ser inserido na rea de influncia do par de tags <body> ... </body> e tudo o que nele estiver contido ser visualizado na janela do navegador. Deve-se observar que sistemas operacionais em lnguas no latinas no exibem acentos e caracteres especiais da lngua latina. Portanto, nestes casos, deve-se utilizar a codificao dos caracteres especiais do HTML, conforme prximo slide.
I200 HTML COMPLETO
Caracteres especiais
Representao do caracter (copyright)
© - ISO Latin-1 © - Entidade do HTML
Caracteres em branco Infnet Infnet Acentuao acentuação Automatizao

30
UA O HTML
Existem caracteres que no podem ser obtidos atravs do teclado. Esses caracteres podem ser inseridos na pgina atravs de uma codificao especial que o browser capaz de interpretar. Podemos usar a entidade do HTML e/ou a ISO-Latin1 A ISO-Latin-1 usa um cdigo composto pelo caracter & seguido do smbolo # mais uma combinao de nmeros. O HTML usa o caracter & seguido de uma combinao de letras. Representao do © - Entidade do caracter (copyright): © - ISO Latin-1 e HTML. Podemos usar esses caracteres especiais para representar os tags em nossa pgina sem que eles sejam interpretados: <body> - < representa o caracter "<" ,e > o ">. Ento teremos exibido pelo browser o seguinte resultado : <body> O caracter especial indica que deve ser inserido um espao em branco naquela posio. permitido o uso de vrios destes caracteres seguidos para inserir dois ou mais espaos em branco em um texto. Quando o browser interpreta um texto que contm vrios espaos em branco (sem a utilizao do caracter especial ), estes espaos so substitudos por um nico espao em branco.
I200 HTML COMPLETO
O HTML entende e respeita um nico espao em branco, como separador de palavras em um texto. Caso seja necessrio inserir mais de um espao em branco entre palavras, devemos usar o caracter especial - Infnet Infnet. Acentuao: A Web global e alguns pases no possuem acentos em seus alfabetos. Digitar os acentos diretamente em nossas pginas pode causar transtornos aos usurios que no possuem suporte nossa lngua. Por esse motivo, usamos definies especiais para representar esses caracteres. Por exemplo a palavra, acentuao deve ser escrita desse forma no browser: acentuação Automatizao: Os as entidades HTML ç () e ã () garantem que nossa acentuao ser vista por qualquer browser em qualquer parte do mundo. Algumas ferramentas de desenvolvimento de pginas HTML ajudam no processo de criao dos cdigos. Algumas ferramentas WYSIWYG traduzem os caracteres acentuados para os respectivos cdigos. Ferramentas como o HomeSite possuem uma ajuda para converter esses cdigos automaticamente. Exemplo do HomeSite
Tabela de caracteres especiais
Formatao automtica
I200 HTML COMPLETO
Tags de heading
Cabealhos de texto no so cabealhos de pgina Cabealhos de texto: <h1> ... </h1> <h2> ... </h2> Entitulagem
<h3> <h4> <h5> <h6> ... ... ... ... </h3> </h4> </h5> </h6>
UA O HTML
32
Existem seis tags usados para exibir frases como Headings (cabealhos de texto) em pginas HTML. A diferena entre eles o tamanho. O primeiro nvel<H1> o que exibe o cabealho em maior tamanho e o ltimo nvel<h6> exibe no menor. Todos possuem tag de fechamento. No confundir os tags de cabealhos de texto (Headings) que servem para exibir um texto qualquer no corpo de sua pgina HTML, com o tag <head> que serve para definir uma rea de cabealho lgico para o documento HTML. <head> no exibe nenhuma informao na pgina, s define uma rea onde ficaro algumas informaes para o browser.
I200 HTML COMPLETO
Tags de Heading
Headings na pgina Cdigo da pgina HTML

33
UA O HTML
Os tags de Heading provocam 3 efeitos: Alteram o tamanho da fonte (para maior ou menor que a fonte padro); Colocam o texto em negrito; Do o efeito de pargrafo, isto , inserem uma quebra de linha. Os tags de heading so muito usados em conjunto com a linguagem CSS. Com os estilos podemos melhorar a aparncia dos estilos.
I200 HTML COMPLETO
Estrutura de linhas e pargrafos

Inserir simples quebra de linha: <br> Impedir a quebra da linha: <nobr> Inserir um pargrafo: <p> ... </p> Inserir um bloco de texto:<div>...</div>
Nota: Em DHTML inserimos camadas (layers) com <div> ... </div>
34
UA O HTML
O HTML necessita de um tag que indique a quebra de linha quando necessrio. O tag <br> tem essa funo. No existe um tag de fechamento para o <br>. Pode-se usar quantos tags <br> seguidos forem necessrios para colocar linhas em branco na pgina. O HTML tem a caracterstica de moldar-se rea til do navegador e, para isso, ele insere naturalmente quebras de linha quando a mesma j preencheu todo o espao da tela. Se quiser-se impedir essa quebra natural da linha, deve-se fazer uso do tag <nobr>. Quando necessita-se inserir uma quebra de linha com inteno de se mudar de pargrafo, o tag apropriado o <p>. Muitos cdigos no utilizam o fechamento </p> para pargrafos e pode funcionar bem. No entanto ser necessrio utiliz-lo porque isso influenciar no uso da codificao de estilos chamada CSS Cascading Style Sheets, conforme ser estudado mais tarde. A quebra de linha do tag <p> insere mais uma linha horizontal vazia, proporcionando um maior espacejamento entrelinhas. Diferentemente do tag anterior, pode-se utilizar os tags <div> e </div> para o efeito de pargrafo. No entanto, neste caso no ser adicionada uma linha horizontal vazia. Este tag <div> utilizado em DHTML para dividir a visualizao em camadas, mas no se trata de assunto para este curso.
I200 HTML COMPLETO
Alternativas para alinhamento de texto

<h1 align=left>...</h1> <h2 align=center>...</h2> <h3 align=right>...</h3> <h4 align=right>...</h4> <h5 align=center>...</h5> <h6 align=left>...</h6> <p align="left">...</p> <p align="center">...</p> <p align="right">...</p> <p align="justify">...</p> <div align="left">...</div> <div align="center">...</div> <div align="right">...</div> <div align="justify">...</div>
35
UA O HTML
Os tags <p> e <div> possuem o atributo align para alinhar o texto ao centro, esquerda, direita ou justificado (center, left, right ou justify). Esse mesmo atributo align tambm pode ser utilizado nas tags de heading para alinh-las.
I200 HTML COMPLETO
Formatando o Texto
Texto em negrito: <b> ... </b>
Opo XHTML => <strong> ... </strong>
Texto em itlico: <i> ... </i>

Opo XHTML => <em> ... </em>

36
Texto sublinhado: <u> ... </u> Texto cortado: <s> ... </s> Texto subescrito: <sub> ... </sub> Texto sobrescrito: <sup> ... </sup>
UA O HTML
Podemos colocar um texto ou frase em negrito ou itlico usando os tags HTML <B> e <I>. Todo o texto entre o inicio e o fechamento do tag ser exibido em negrito ou itlico dependendo do tag usado. <B>Negrito</B> = Negrito <I>Itlico</I> = Itlico O HTML possui tags para formatar texto em modo sublinhado, sobrescrito, subscrito e com uma linha horizontal cortando as palavras (strike through). Esses tags devem ser usados para melhorar a leitura do texto na pgina HTML, e no para confundir o usurio. Todos possuem tags de fechamento. Para sublinhar (underline) um texto ou parte dele, usamos o tag <U> e </U>. <U>Texto sublinhado</U> Para colocar um texto em modo subscrito usamos o tag <SUB> e </SUB>. LOG<SUB>10</SUB> 8 Para colocar um texto em modo sobrescrito usamos o tag <SUP> e </SUP>. Para colocar uma linha cortando o texto usamos o tag <S> e </S>.
I200 HTML COMPLETO
Exerccio terico
37
UA O HTML
Exerccios:
3) Assinale a alternativa correta: a) Todas os cdigos-fonte de pginas HTML esto contidos na rea de influncia de <html> e </html> b) Uma pgina marcada em Favoritos do navegador tem seu endereo e seu ttulo marcado pelo browser. O ttulo fica contido em <title> e </title> c) As fontes do cabealho da pgina tm sua exibio controlada pelas tags de heading e isso influencia quando o ttulo exibido no navegador d) Todas as alternativas acima so verdadeiras e) As alternativas a e b so verdadeiras 4) Assinale a alternativa em que todas os tags formatam somente o texto: a) <u>, <sup>, <b>, <p>, <strong> b) <u>, <sub>, <p>, <i>, <strong> c) <strong>, <em>, <div>, <s>, <nobr> d) <strong>, <em>, <b>, <i>, <s> e) <div>, <nobr>, <br>, <p>, <align> 5) Assinale a alternativa em que todas os tags formatam somente pargrafos: a) <align>, <p>, <div> b) <p>, <div> c) <div>, <align> d) <align>, <p> e) Todas as alternativas esto corretas
I200 HTML COMPLETO
Lab 1
Observe a pgina abaixo e monte um cdigo-fonte para ela
38
UA O HTML
I200 HTML COMPLETO
Soluo do Lab 1 <html> <head><title>Laboratrio 1</title></head> <body> <h1>Este ttulo est escrito com a tag H1</h1> <h2>Este ttulo est escrito com a tag H2</h2> <h3>Este ttulo est escrito com a tag H3</h3> <h4>Este ttulo est escrito com a tag H4</h4> <h5>Este ttulo est escrito com a tag H5</h5> <h6>Este ttulo est escrito com a tag H6</h6> <p align="center">Agora existe um texto alinhado ao centro com o tag P.</p> <div align="right">Mas este texto est alinhado direita com o tag DIV</div> <div align="left">Agora continua-se com um novo texto alinhado esquerda com o tag DIV</div> <div>Mais outro texto alinhado esquerda com o tag DIV</div> <p align="left">Com mais este texto alinhado esquerda com o tag P, perguntamos:</p> <h2 align="center">O que se percebe quanto ao espaamento?</h2> <h3 align="center">Viu como interessante o alinhamento das tags de heading com o atributo ALIGN?</h3> </body> </html>
I200 HTML COMPLETO
Lab 2
Codifique os textos a seguir em HTML:
LOG108 uma representao de log de 8 na base 10 A = X3 + 8 uma equao matemtica Liquidao: de R$ 10,00 por R$ 8,75!
40
UA O HTML
I200 HTML COMPLETO
Soluo do Lab 2 <html> <head><title>Lab 2</title></head> <body> LOG<sub>10</sub>8 uma <u>representao</u> de log de 8 na base 10<br> A=X<sup>3</sup> + 8 uma <i>equao matemtica</i><br> <b>Liquidao</b>: de <s>R$ 10,00</s> por <b>R$ 8,75!</b> </body> </html> Outra soluo: <html> <head><title>Lab 2</title></head> <body> LOG<sub>10</sub>8 uma <u>representao</u> de log de 8 na base 10<br> A=X<sup>3</sup> + 8 uma <em>equao matemtica</em><br> <strong>Liquidao</strong>: de <s>R$ 10,00</s> por <strong>R$ 8,75!</strong> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 1: O HTML BCA 1.1: O formato do HTML BCA 1.2: Os tags bsicos I (estrutura, formato, texto)
42
UA O HTML
Aprendemos neste BCA: que o HTML dividido em cabealho e corpo, sendo que o ttulo fica no cabealho e o contedo da pgina no corpo que um cabealho de pgina se codifica com <head> e o cabealho de texto (ttulo) se codifica com as tags de heading que o texto pode ser organizado em pargrafos e blocos de texto, ambos sendo alinhados com o atributo ALIGN que a formatao do texto em HTML deve ser feita com tags especficas que delimitam o incio e o fim do trecho formatado
I200 HTML COMPLETO
1.3 Os tags bsicos II

I200 HTML COMPLETO
Os tags bsicos II
Voc aprender: Como controlar fontes em HTML A inserir comentrios A inserir uma rgua horizontal
44
UA O HTML
I200 HTML COMPLETO
O tag <font>
Os atributos do <font> so:
size : determina o tamanho da fonte
Valores de 1 a 7
face : Tipo da fonte.

Arial, Courier New, Helvetica, Verdana, etc.
color : Nome ou valor do RGB que determina uma cor.
Aparncia do tag:
<font face=arial" size="7" color="red">
45
UA O HTML
O tag <font> permite personalizar o tipo, tamanho e cor de uma fonte em um determinado trecho de uma pgina. Todo o texto, palavra, frase ou letra que estiver na rea de influncia do tag <font> ter as caractersticas definidas por ele. O uso do atributo FACE deve ser limitado s fontes mais comuns, como a Courier e a Arial, pois o computador cliente precisa ter instalada a fonte em questo para que ela seja exibida. No atributo FACE, normalmente coloca-se mais de uma opo de fonte para tentar-se controlar, ao mximo, as possibilidades de fontes que podem ser visualizadas. Por exemplo: <font face=arial, helvetica, verdana, tahoma>
I200 HTML COMPLETO
O tag <font>
Veja abaixo o cdigo deste exemplo :
46
UA O HTML
Veja o exemplo abaixo: <font face="Courier New size="2" color="Blue"> Este texto est azul com fonte Courier New tamanho 2 </font><BR> <font face =Verdana size ="5" color="Maroon"> Este texto est marrom com fonte Verdana tamanho 5 </font><BR> <font face =Arial" size ="7" color="Red"> Este texto est vermelho com fonte Arial tamanho 7 </font>
I200 HTML COMPLETO
Cores para o atributo COLOR

As 16 cores padro que podemos usar nos tags HTML so: aqua gray navy silver black green olive teal blue lime purple yellow fuchsia maroon red white
Adiante ser abordo o sistema de codificao para 16 milhes de cores
47
UA O HTML
I200 HTML COMPLETO
Aparncia padro para o texto

Fonte padro para a pgina: <basefont> Pode ser encontrada no cabealho da pgina Atributos utilizados
Para tamanho da fonte: size Para cor da fonte: color Para famlia da fonte: face
Teste no navegador:
<basefont size=+2 color=blue face=arial>
48
UA O HTML
O tag <basefont> determina os padres de tamanho, cor e famlia para a fonte usada na pgina. Para isso utilizam-se os atributos SIZE, COLOR e FACE. Ele pode ser usado em qualquer parte da pgina, mas geralmente definido no cabealho da pgina HTML entre os tags <head> e </head>. O seu comportamento pode variar entre navegadores, isto , em navegadores diferentes a fonte poder ser exibida de formas diferentes. Os valores permitidos para o atributo SIZE deste tag, variam de 1 a 7. O Valor 3 o valor padro. No entanto, podemos trabalhar com +1, +2, -1, -2 e assim sucessivamente at +7 e 7. As cores (COLOR) podero ser todas aquelas codificadas em hexadecimal, conforme ser estudado adiante, neste curso. O contedo de FACE dever conter uma fonte que esteja instalada na mquina do usurio. Como isso impossvel de se prever, normalmente utiliza-se alguma fonte que j se conhea ser de uso comum entre os usurios.
I200 HTML COMPLETO
Texto pr-formatado
<pre> Contas: Almoo Compras Jantar </pre>
R$ R$ R$
10,00 56,00 35,00
49
UA O HTML
Quando necessrio exibir um texto em uma pgina HTML exatamente como ele foi digitado, ou seja, respeitando os espaos e quebras de linha, colocamos este texto entre os tag <pre> e </pre>. Ao interpretar a formatao fsica, o browser substitui a fonte do texto para uma fonte mono espaada (fonte onde todas as letras possuem a mesma altura e largura), para garantir a formatao do texto. A fonte usada normalmente a Courier New. O texto pr-formatado muito usado quando queremos exibir, por exemplo, cdigo fonte de programas ou alinhar colunas de nmeros.
I200 HTML COMPLETO
Texto monoespaado
Para simplesmente exibirmos o texto com uma fonte monoespaada, usamos o tag <tt>.
<tt>Texto com fonte monoespaada</tt>
50
UA O HTML
I200 HTML COMPLETO
Comentrios nas pginas

O formato do comentrio :
 Incio do comentrio: <!- Fim do comentrio: -->
51
UA O HTML
Muitas vezes necessrio comentar uma parte do cdigo para que no futuro possamos entender o que fizemos, ou mesmo para documentar nossas pginas. Podemos usar um texto explicativo para comentar uma parte do cdigo em nossa pgina, como por exemplo para informar a data de criao, quem codificou a pgina etc. Podemos tambm comentar uma parte de nosso cdigo HTML, caso seja til. O comentrio feito no HTML no apresentado na tela. Todo o texto que estiver entre as marcaes de comentrio no ser exibido pelo browser. Exemplo: ...<body>  <b>Infnet</b> <!-Quebra de linha seguida de uma linha horizontal --> <br> Fim do Exemplo! </body> </html>
I200 HTML COMPLETO
Lab 3
Codifique a pgina abaixo
52
UA O HTML
I200 HTML COMPLETO
Soluo do Lab 3
<html> <head> <title>Fale Conosco</title> <basefont face="arial" size="2"> </head> <body> <font face="verdana" color="blue"> <h1>Fale Conosco</h1> <h3>Endereo:</h3> </font> <font face="arial"> Av. Rio Branco, 12 - 8 andar<BR> Rio de Janeiro - RJ <font color="blue"> <h3>Telefones:</h3> </font> Setor Comercial (21) 516-2256<br> Setor Financeiro (21) 516-5109<br> Fax (21) 233-2796<br> <b> <font size="3"> <p> http://www.infnet.com.br<br> informacoes@infnet.com.br </p> </font> </b> </body> </html>
I200 HTML COMPLETO
Rguas horizontais
O tag <hr> insere uma linha horizontal na pgina. Seus atributos:
align (left, center, right) size (espessura da linha em valores exatos ou relativos rea til da tela) width (largura da linha) noshade (sem efeito de sombra) color (controla a cor) * incompatvel com netscape. Ex.: <hr size=5 width=300>
54
UA O HTML
O atributo SIZE e WIDTH recebem o valor em pixel. O atributo WIDTH pode receber como valor uma frao em porcentagem do tamanho da tela exibida, ou seja, WIDTH=35% representa que a linha horizontal ter 35% do tamanho da tela. Estas linhas horizontais so usadas principalmente para separar partes do texto ou imagens. Pginas profissionais substituem a linha horizontal por imagens ou por uma formatao de texto melhor definida.
I200 HTML COMPLETO
Exemplo de uso do <hr>

<html> <head> <title>Uso do HR</title> </head> <body> Primeira parte do texto <hr> Segunda parte do texto <hr> Terceira parte do texto <hr> Quarta parte do texto </body> </html>
55
UA O HTML
I200 HTML COMPLETO
Exerccio terico
56
UA O HTML
Exerccios:
6) Assinale a alternativa correta: a) <basefont> um tag que controla e padroniza a fonte em toda a pgina html b) Sempre se usa o tag <basefont> no cabealho da pgina HTML c) Os atributos de <basefont> no servem para o tag <font> d) As tags <pre> e <tt> tm caractersticas idnticas e) As alternativas a e b so verdadeiras 7) Assinale a alternativa em que a sintaxe est correta: a) <basefont font-color=blue size=-1> b) <fontcolor face=arial size=+1> c) <basefont face=blue size=4> d) <base font size=+2 color=blue face=arial> e) <font face=verdana color=red size=5> 8) Assinale a alternativa em que a sintaxe est correta: a) <pre size=+4>contedo</pre> b) <basefonte size=+4 color=yellow> c) <font size=+4 color=yellow> d) <base font size=3> e) As alternativas b e c esto corretas
I200 HTML COMPLETO
Lab 4
Incremente a pgina anterior.
57
UA O HTML
I200 HTML COMPLETO
Resposta do LAB 4
<html> <head> <title>Fale Conosco</title> <basefont face="arial" size="2"> </head> <body> <font face="verdana" color="blue"> <h1>Fale Conosco</h1> <hr size="1" color="blue" noshade> <h3>Endereo:</h3> </font> <font face="arial"> Av. Rio Branco, 12 - 8 andar<BR> Rio de Janeiro - RJ <font color="blue"> <h3>Telefones:</h3> </font> Setor Comercial (21) 516-2256<br> Setor Financeiro (21) 516-5109<br> Fax (21) 233-2796<br> <b> <br><hr size="1" color="blue" noshade> <font size="3"> <p> http://www.infnet.com.br<br> informacoes@infnet.com.br </p> </font> </b> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 1: O HTML BCA 1.1: O formato do HTML BCA 1.2: Os tags bsicos I (estrutura, formato, texto) BCA 1.3: Os tags bsicos II (fontes, comentrios, linhas)
59
UA O HTML
Aprendemos neste BCA: que o tag <basefont> padroniza a fonte para toda a pgina HTML e pode estar localizado no cabealho da pgina que podem ser controladas 16 cores atravs de seus nomes que as fontes podem ser controladas atravs do tag <font> e seus atributos FACE, COLOR e SIZE, semelhantes aos do tag <basefont> que existem outras formas alternativas de controle de fontes, tais como <pre> e <tt> que podemos inserir comentrios ilimitados e rguas horizontais nas pginas HTML
I200 HTML COMPLETO
1.4 Formatando Listas

I200 HTML COMPLETO
Outros recursos e listas

Voc aprender: A criar listas e seus atributos
61
UA O HTML
I200 HTML COMPLETO
Listas
O HTML possibilita a criao de listas de trs tipos.
Listas no-ordenadas : <ul> ... </ul> Listas ordenadas : <ol> ... </ol> Listas de definio: <dl> ... </dl>
62
UA O HTML
Listas no-ordenadas : <ul> ... </ul> - apresentam uma srie de itens sem numer-los. Listas ordenadas : <ol> ... </ol> - atribuem nmeros em seqncia para cada item. Listas de definio: <dl> ... </dl> - sem nenhum tipo de marcador, indenta uma ou mais definies para cada item.
I200 HTML COMPLETO
Listas no-ordenadas
Ordem de premiao <ul> <li>Primeiro Lugar</li> <li>Segundo Lugar</li> </ul>
63
UA O HTML
O tag <UL> define o incio de uma lista no-ordenada. O tag <LI> define cada item da lista.
I200 HTML COMPLETO
<ul> Atributo type

<ul type=disc> Crculo cheio <ul type=circle> Crculo vazado <ul type=square> Quadrado
64
UA O HTML
Podemos modificar o smbolo utilizado para demarcar cada tem da lista no-ordenada usando o atributo TYPE. O atributo TYPE indica qual o smbolo iremos usar:
<UL TYPE=disc> Crculo cheio <UL TYPE=circle> Crculo vazado <UL TYPE=square> Quadrado
Este atributo TYPE tambm pode ser aplicado na tag LI.
I200 HTML COMPLETO
Listas ordenadas
Ordem de premiao <ol> <li>Primeiro Lugar</li> <li>Segundo Lugar </li> </ol>
65
UA O HTML
I200 HTML COMPLETO
<ol> Atributos start e type

Atributo start: <ol start="5">
* sempre numrico.
Atributo type: <ol type="A"> <ol type="a"> <ol type="I"> <ol type=i"> <ol type="1>
66
UA O HTML
Podemos modificar a seqncia e o tipo de numerao de todos os itens de uma lista ordenada usando os atributos START e TYPE: O atributo START indica em que ponto a lista iniciar sua contagem. <OL START="5"> Indica que a lista iniciar em 5 O atributo TYPE indica qual o tipo de seqncia iremos usar: letras, nmeros ou algarismos romanos. <OL TYPE="A"> Letras maisculas <OL TYPE="a"> Letras minsculas <OL TYPE="I"> Algarismos Romanos <OL TYPE="i"> Algarismos Romanos (minsculos) <OL TYPE="1"> Nmeros
I200 HTML COMPLETO
Exemplo aplicado de <ol>

Ordem de premiao <br><br> TYPE="A" <ol type="A"> <li>Primeiro Lugar</li> <li>Segundo Lugar</li> </ol> TYPE="I" <ol type="I"> <li>Primeiro Lugar</li> <li>Segundo Lugar</li> </ol>
67
UA O HTML
I200 HTML COMPLETO
Listas de definio
<dl> <dt>Receitas de Bolo <dd>Chocolate, pg. 23 <dd>Floresta Negra, pg. 24 <dd>Cenoura, pg. 26 <dt>Receitas de Doces <dd>Quindim, pg. 30 <dd>Mil Folhas, pg. 29 <dd>Brigadeiro, pg. 28 </dl>
68
UA O HTML
Esse tipo de lista usado para indentar o texto quando necessrio. Por exemplo, para um glossrio ou lista de termos. O tag <DL> inicia uma lista de definio. O tag <DT> indica o item da lista. O tag <DD> inicia a descrio para cada item da lista.
I200 HTML COMPLETO
Listas encadeadas
Podemos encadear listas ordenadas e/ou no-ordenadas para uma melhor formatao.
Usando Listas Encadeadas <ul> <li>Listas de Formatao</li> <ul> <li>Listas No-ordenadas</li> <li>Listas Ordenadas</li> </ul> <li>Listas encadeadas</li> <li>Listas de definio</li> </ul>
69
UA O HTML
I200 HTML COMPLETO
Exerccio terico
70
UA O HTML
Exerccios:
9) Assinale a alternativa correta: a) <ol> e <ul> so itens de lista de endentao b) <ol> e <ul> so itens de lista de definio c) <ol> e <ul> so itens de lista ordenada e lista no ordenada d) As alternativas a e b esto corretas e) N.R.A. 10) Assinale a alternativa em que a sintaxe est correta: a) <ul type=select size=3> b) <ul start=circle> c) <ol start=120> d) <ol type=i start=2> e) As alternativas c e d esto corretas 11) Assinale a alternativa correta: a) O tag <DL> inicia uma lista de definio b) O tag <DT> indica o item da lista c) O tag <DD> inicia a descrio para cada item da lista d) Listas de definio so uma boa soluo para edio de mapas de site e) Todas as alternativas esto corretas
I200 HTML COMPLETO
Tempo: X horas, X Minutos Tempo: X horas, X Minutos
Lab 5
Codificar a pgina abaixo.
71
UA O HTML
I200 HTML COMPLETO
Resposta do LAB 5 <html> <head> <title>Nossos Servios</title> </head> <body> <font face="arial" color="blue"> <h2>Nossos Servios</h2> </font> <font face="arial" size="4"> <ul type="circle"> <li>Desenvolvimento de Websites</li> <font size=2> <ol> <li>Hotsites</li> <li>Ambientes multimdia em Flash</li> <li>Extranets</li> </ol> </font> <li>Criao de RichMedia Banners</li> <li>Produo em CD-ROM</li> <li>Manuteno de WebSites</li> <li>Aplicaes de E-learning</li> </ul> </font> <hr size="1" color="blue" noshade> <font color="blue"> <em> Av. Rio Branco, 12/8 andar<BR> Centro - Rio de Janeiro<BR> www.masterdesign.com.br </em> </font> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 1: O HTML BCA 1.1: O formato do HTML BCA 1.2: Os tags bsicos I (estrutura, formato, texto) BCA 1.3: Os tags bsicos II (fontes, comentrios, linhas) BCA 1.4: Listas
73
UA O HTML
Aprendemos neste BCA: que o tag <basefont> padroniza a fonte para toda a pgina HTML e pode estar localizado no cabealho da pgina que podem ser controladas 16 cores atravs de seus nomes que as fontes podem ser controladas atravs do tag <font> e seus atributos FACE, COLOR e SIZE, semelhantes aos do tag <basefont> que existem outras formas alternativas de controle de fontes, tais como <pre> e <tt> que podemos inserir comentrios ilimitados e rguas horizontais nas pginas HTML
I200 HTML COMPLETO
2- Conceitos para edio do HTML

I200 HTML COMPLETO
2.1- Navegabilidade
I200 HTML COMPLETO
Navegabilidade
Voc aprender: A diferenciar pginas web e website O que so e para que servem URLs Configurar hiperlinks
76
UA Conceitos para edio do HTML
I200 HTML COMPLETO
Um Site
Pgina = tags + textos + imagens + etc Site = conjunto de pginas ligadas entre si
77
At agora s foram criadas pginas isoladas. Uma pgina HTML apenas um conjunto de tags, textos e imagens para exibir determinadas informaes. Site um conjunto de pginas HTML (imagens, texto, sons etc) que fazem referncias entre si, para exibir uma idia, produto, servio, empresa ou instituio. Home-Page pode ter dois significados : 1) Um site 2) A primeira pgina de um site
I200 HTML COMPLETO
URL
URL (Uniform Resource Location) protocolo://servidor/pgina
Ex.: http://www.infnet.com.br/index.htm Em alguns casos o nome da pgina pode ser omitido.
78
Uma URL (Uniform Resource Location) usada para especificar a localizao de pginas e arquivos na Web. Ela montada da seguinte maneira: protocolo://servidor/pgina Ex.: http://www.infnet.com.br/index.htm Os servidores Web sabem qual a pgina padro (geralmente index.htm, index.html, default.htm ou default.asp) do site e por esse motivo no necessrio escrever o nome da primeira pgina de um site. Ex.: http://www.infnet.com.br o mesmo que http://www.infnet.com.br/index.htm Alguns dos protocolos usados na URL: http:// Para os servidores da Web. ftp:// Para servidores de transferncia de arquivos news:// Para servidores de grupos de discusso telnet:// Para acessar em um servidor file:/// Para abrir paginas localmente
I200 HTML COMPLETO
Links
Hiperlinks (links) = desvios Link para outro website Link para outra pgina do mesmo site Link interno (ncora nomeada) Link para correio eletrnico
Outros tipos que no sero discutidos agora, como links para scripts.
79
Os hiperlinks (links) so desvios usados para guiar a navegao em um site Web. Quando um hiperlink acionado, uma ao realizada: um desvio para outra pgina, o envio de um e-mail etc. Podemos dividir os tipos de link, basicamente em quatro: - Link para web: Os links para sites na Web so muito comuns. Como veremos a seguir, devemos usar a URL completa (incluindo o protocolo http://). - Link para dentro do site: quando o desvio feito para outra pgina do mesmo site; - Link interno: tambm chamado de ncora nomeada, quando o desvio feito para um ponto pr-marcado dentro de uma pgina html; - Link para correio eletrnico: aquele desvio que abre o programa de gerenciamento de e-mails, a fim de que o cliente envie sua mensagem eletrnica. Existem outros tipos que no sero discutidos agora, como links para scripts.
I200 HTML COMPLETO
Sintaxe do link
Definio de um link : <a> Destino do link : atributo href Sintaxe correta:
<a href=destino.htm>Texto do hiperlink</a>
(O tag de fechamento obrigatrio)

<a href="http://www.infnet.com.br">Infnet</a>
80
O tag <a> usado para definir um link. A pgina que ser acessada, ou pgina-destino, deve ser configurada dentro do tag a. O atributo href indica o destino do link. A frase ou texto que servir de link fica entre o tag de abertura <a> e o de fechamento </a>. O tag de fechamento obrigatrio.
Exemplo:
<a href="http://www.infnet.com.br"> Link para Infnet </a>
I200 HTML COMPLETO
Sintaxes de href
Link para outro website
devemos usar a URL completa (incluindo o protocolo http://). Ex.:
<a href=http://www.infnet.com.br>Infnet</a>
Link para outra pgina do mesmo site

basta indicar a pasta e a pgina que deve ser encontrada. Ex.:
<a href="diretorio/pp.htm">Pgina</a>
81
Link para outro website: devemos usar a URL completa (incluindo o protocolo http://). Ex.:<a href=http://www.infnet.com.br>Infnet</a>. Link para outra pgina do mesmo site: se a pgina que desejamos "linkar" estiver no mesmo diretrio da pgina atual, somente necessrio informar o nome da pgina. Ex.: <a href="pp.htm">Pgina</a> Caso a pgina esteja em um diretrio abaixo da estrutura, informa-se o diretrio e o nome da pgina. Ex.: <a href="diretorio/pp.htm">Pgina</a> Se a pgina estiver no diretrio acima do atual, devemos usar a referncia como a utilzada no DOS (../arquivo). Ex.: <a href="../pp.htm">Pgina</a> Ex.: <a href="../diretorio/pp.htm">Pgina</a> Os servidores Web permitem fazer mapeamento de diretrios fsicos (C:\sites\meusite\minhas_imagens) em diretrios relativos (/imagens). Neste caso usaremos o caminho relativo no atributo href. Ex.: <a href="/imagens/pp.htm">Pgina</a>
I200 HTML COMPLETO
Sintaxes de href
Link interno (ncora nomeada)
<a href="#alvo">V para o fim</a><br> Neste espao entra o texto que vem antes do fim... <a name=alvo">Aqui est o fim</a>
Link para correio eletrnico

<a href=mailto:cursos@infnet.com.br"> E-mail para o Infnet</a>
82
- Link interno ou ncora nomeada: esse tipo de link permite que uma pgina seja dividida em sees e cada seo possua uma marca de destino. Atravs do atributo NAME criamos essas marcas. <a name=alvo"> e aps essa marcao em todas as posies desejadas usando podemos fazer referncia a estas marcaes usando: <a href="#alvo">Link</a> O caracter # usado para indicar que o link interno. Logo aps o caracter # aparece o destino do link (posio dentro da pgina). Exemplo de link interno: <a href="#letraA">Letra A</a><br> Neste espao entra o texto que vem antes do alvo... <a name="letraA">Aqui comea letra A</a> Quando o link for ativado, a pgina ser desviada para esse ponto letraA. - Link para correio eletrnico: usamos o atributo hrefcom a referncia ao "protocolo" de envio de e-mail mailto:. Esse modo de enviar mensagens muito difundido na Web. Para esse tipo de link, o software de envio de correio eletrnico do cliente deve estar corretamente configurado, caso contrrio esse tipo link no funcionar. -Existe um cdigo interessante para enviarmos um e-mail j com os parmetros subject, cc e cco j configurados:
<a href=mailto:cursos@infnet.com.br?subject=assuntol&cc=alguem@infnet.com.br&cco=alguem2@ infnet.com.br>
I200 HTML COMPLETO
Mapa do site
83
muito importante a navegabilidade de um site. Quando um site no possui uma boa navegabilidade, geralmente ficamos perdidos sem saber como avanar ou voltar. importante sempre existir uma integrao entre as pginas de um site. Links para a pgina principal e para os tpicos mais importantes sempre so de grande utilidade. Quando a navegao por um documento for extensa, coloque links para a pgina anterior, prxima pgina e ndice, fazendo um encadeamento das pginas. Desse modo evitamos que os usurios fiquem perdidos no site. Muitos sites possuem um link para uma seo chamada "Mapa do Site" ou sitemap. Essa seo permite que o usurio possa saber como est dividido o site e assim ter uma navegao melhor pelas pginas. O usurio no deve ter que adivinhar onde esto as pginas. Caso isso acontea, bem provvel que ele v embora e no retorne mais ao site.
I200 HTML COMPLETO
Exerccio terico
84
Exerccios:
12) Assinale a alternativa correta: a) Links para websites tem a URL sempre entre aspas b) Links para correio eletrnico e links para e-mail devem conter o caracter # c) Links para correio eletrnico no necessitam do caracter # d) ncoras nomeadas so apontadas pelo atributo URL e) O atributo name deve apontar para a ncora nomeada do link 13) Um link para um ponto especfico de uma pgina do mesmo site contm: a) Tag A com atributo HREF e caracter # no atributo NAME da ncora nomeada b) Tag A com atributo HREF e caracter # seguido do nome que aponta para a ncora nomeada c) Uma tag A apontando para a ncora nomeada e outro tag A definindo a localizao da ncora nomeada d) Somente as alternativas B e C esto corretas e) Somente as alternativas A e C esto corretas 14) Marque a alternativa incorreta: a) <a href=http://www.onossosite.com.br/pasta1/pasta11/mypage.html/name=#m1> b) <a name=#nome> c) <a href=http://www.onossosite.com.br/pasta1/pasta11/mypage.html#m1> d) Todas as alternativas esto corretas e) Nenhuma das alternativas est correta
I200 HTML COMPLETO
Lab. 6
Codifique a pgina abaixo e codifique os links necessrios.
85
I200 HTML COMPLETO
Soluo do Lab 6
<html> <head> <title>Menu Principal</title> </head> <body> <font face="arial"> <h2>Menu<br>Principal</h2> <font size="2">  <a href="lab7.htm">Projetos Realizados</a><br> <a href="lab9.htm">Tabela de Custos</a><br> <a href="lab13.htm">Livro de Visitas</a><br> <a href="lab4.htm">Fale Conosco</a> </font> </font> <p>  <hr> <font face="arial" size="2"> <a href="http://www.infnet.com.br">Instituto Infnet</a><br> <a href="mailto:cursos@infnet.com.br">cursos@infnet.com.br</a> </font> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 2: Conceitos para edio do HTML BCA 2.1: Navegabilidade
87
Aprendemos neste BCA: que a diferena entre pginas e sites que aquelas primeiras so um conjunto de tags, textos, imagens, sons, etc, enquanto que o website um conjunto de pginas ligadas entre si o que , para que serve e como se especifica uma URL que existem, basicamente quatro tipos de links ou desvios: para outro website, outra pgina do mesmo site, link interno para uma ncora nomeada e link para correio eletrnico a sintaxe da codificao para cada um dos links estudados o que um mapa sensitivo
I200 HTML COMPLETO
2.2 Imagens
I200 HTML COMPLETO
Trabalhando com Imagens

Voc aprender : Como inserir imagens em pginas HTML. Posicionamento, bordas e alinhamento de imagens. Onde encontrar imagens na Web. A interpretar os mapas sensitivos
89
I200 HTML COMPLETO
Imagens
GIF (Graphics
Interchange Format)
JPEG ou JPG
(Joint Photographic Experts Group)
PNG
(Portable Network Graphics)
90
As imagens so arquivos separados das pginas HTML. Na pgina existe somente referncias aos arquivos de imagem, e o browser se encarrega de buscar e exibir a imagem. S permitido usar imagens .gif e .jpg nas pginas HTML (recentemente foi includo tambm suporte a imagens tipo PNG). As imagens usadas na web geralmente so arquivos no formato GIF (para uso geral). Os arquivos JPG geralmente so usados para exibir fotos, devido ao nvel de compresso alcanado por esse formato. Muitos webmasters criam um diretrio para conter as imagens, geralmente chamado imagens ou img. Deve-se usar letras minsculas para nomear os arquivos, sem acentos ou espaos em branco, para no ter problemas com diferentes sistemas operacionais. O nome escolhido para os arquivos de imagens deve demostrar, sempre que possvel, o seu contedo. Imagens JPEG podem ser comprimidas, imagens GIF podem ter seu nmero de cores reduzido.
I200 HTML COMPLETO
O tag <img>
O tag <img> usado para inserir uma imagem na pgina. Os atributos de <img> so: src: indica o atalho para a imagem alt: indica o texto alternativo continua...
<img src=img/infnet.gif alt=Instituto Infnet>
91
O tag <IMG> usado para inserir uma imagem na pgina. O atributo SRC o mais importante. ele que indica o caminho (path) onde est o arquivo de imagem. Nas verses mais atuais dos browsers, o texto escrito no atributo ALT aparece quando o cursos fica parado sob uma imagem por alguns segundos.
Texto do atributo ALT quando a imagem no for exibida
Texto do atributo ALT quando o cursor fica parado sobre a imagem.
I200 HTML COMPLETO
Atributos de <img>
width: largura da imagem na pgina height: altura da imagem na pgina lowsrc: insero de imagem de baixa resoluo (s em Netscape) align: alinhamento em relao ao texto border: espessura da borda ao redor da imagem hspace: espao horizontal em relao ao texto vspace: espao vertical em relao ao texto
92
Toda imagem possui um comprimento para a sua altura e outro para a largura. Os browsers calculam esses valores automaticamente. Entretanto, indicando o comprimento da imagem nos atributos height e width do tag <img>, o browser pode "montar" e exibir a pgina sem precisar esperar a imagem chegar por inteiro. Seus valores so atribudos em pixels. Podemos distorcer ou esticar uma imagem apenas alterando esses valores. Uma tcnica usada na Web, criar uma imagem de apenas 1 pixel por 1 pixel e esticla alterando o valor de width. Esse efeito cria uma linha horizontal que pode ser colorida. Veja algumas dicas de outra tcnica especial, dessa vez para aumentar a velocidade de apresentao das pginas: Sempre informar as dimenses da imagem com width e height; Dividir imagens muito grandes; Reutilizar imagens sempre que for possvel, pois os browsers guardam as imagens j visualizadas no cache.
I200 HTML COMPLETO
Exemplos
Inserindo a imagem: <img src="lg.gif" width=305 height=100> Esticando e distorcendo: <img src="pixel.gif" width=600 height=1> Carregando imagem de baixa resoluo: <img src=logo.gif lowsrc=logom.gif> Determinando a espessura da borda: <img src="lg.gif" border=0">
93
A largura da borda varia de acordo com o valor especificado no atributo. <img src="lg.gif" border="2"> Para remover a borda basta atribuir BORDER=0 Embora por padro a imagem aparea sem bordas, nos casos em que ela seja usada como link aparecer uma borada de espessura de 1 pixel. Para retir-la, usa-se o atributo BORDER=0 como visto acima. Exemplos:
<img src="lg.gif" border=2> <img src ="lg.gif border=6>
I200 HTML COMPLETO
Exemplos
Espao ao redor da imagem: <img src="lg.gif hspace=10 vspace=10>
Pulando parte da imagem: <br clear=all>

94
Os atributos hspace e vspace permitem que sejam inseridos espaos na vertical e horizontal, entre o texto e a imagem. Ao juntar textos e imagens, os textos ficam ao lado da imagem. As vezes necessrio que parte do texto esteja ao redor da imagem e o restante do texto aparea abaixo da imagem. Para dar esse efeito, usamos o tag <br> com o atributo clear. Este atributo pode ter os valores all, left, right e none.
I200 HTML COMPLETO
Alinhamento
Alinhando: <img src="lg.gif" align="left"> <img src=lg.gif" align="right">
<img src="lg.gif" align="bottom"> <img src="lg.gif" align="top">
95
O atributo align usado para alinhar a imagem em relao ao texto. Valores de align: left - Alinha a imagem a esquerda do texto right - Alinha a imagem a direita do texto. top - Alinha a imagem no topo do texto bottom - Alinha a imagem na base do texto. middle - Alinha a imagem no meio.
Para um alinhamento horizontal(esquerda, direita ou centralizado) sem interferncia com o texto subsequente, usa-se o tag <div>. <div align=center> <img src=logo.gif> </div>
I200 HTML COMPLETO
Exerccio terico
96
Exerccios:
15) Qual a melhor opo de tag img para o carregamento da imagem no navegador? a) <img scr=http://www.infnet.com.br/img/logo.gif width=125 height=60> b) <img src=http://www.infnet.com.br/img/logo.gif> c) <img img=src/logo.gif width=125 height=60> d) As alternativas a e b esto corretas e) N.R.A. 16) Assinale a alternativa em que a sintaxe est correta: a) <img scr=http://www.infnet.com.br/img/logo.gif width=125 height=60> b) <img scr=http://www.infnet.com.br/img/logo.gif> c) <img src=src/logo.gif width=125 height=60> d) <img src=img/logo.gif width=125 height=60 lowsrc=bres.gif border=1> e) As alternativas c e d esto corretas 17) Assinale a alternativa mais correta: a) Mapas de site so bem formatados com lista de definio b) Mapas de site podem ser formatados com lista ordenada c) Mapas de site podem ser formatados com lista no ordenada d) Mapas de site podem ser formatados com listas endentadas e) Todas as alternativas esto corretas
I200 HTML COMPLETO
Lab 7
Codifique a pgina abaixo.
97
I200 HTML COMPLETO
Soluo do Lab 7 <html> <head> <title>Projetos Realizados</title> </head> <body> <div align=left> <font face=verdana size=6 color=blue><b>Projetos Realizados</b> </font> </div> <p> <img src=img/infnet.gif align=left border=0 hspace=10> <br> <font face=verdana> <b> <a href=http://www.infnet.com.br>INFNET <br> Instituto de Formao Internet</a> </b> </font> <p> <font face=arial size=2>Infnet e a maior instituio formadora de profissionais Internet. <br> <br> O Instituto Infnet focado no ensino das habilidades e tecnologias usadas na construo de sites e portais Internet, Intranet, e na viabilizao do E-Business dentro e entre empresas.<br> <br> <a href=lab4.htm">Fale Conosco</a> </font> <br clear=all> <p> <img src=img/timaster.gif align=left border=0 hspace=10> <br> <font face=verdana> <b> <a href=http://www.timaster.com.br>TI Master</a> </b> </font> <p> <font face=arial size=2>Formao, oportunidades de trabalho e informao para seu desenvolvimento profissional em Tecnologia da Informao. <br> <br> TI Master o primeiro portal na Internet voltado exclusivamente para o desenvolvimento de profissionais de Tecnologia da Informao (TI). Totalmente interativo, o TI Master oferece uma srie deservios para complementar a formao nessa rea. </font> <br clea=all> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 2: Conceitos para edio do HTML BCA 2.1: Navegabilidade BCA 2.2: Imagens
99
Aprendemos neste BCA: que os principais formatos de imagem usados em pginas web so o GIF, o JPEG e o PNG; que podemos usar os atributos da tag <img> para auxiliar o navegador para um carregamento mais rpido das imagens; que o Nestcape usa um atributo lowsrc para carregar rapidamente uma imagem de baixa resoluo enquanto a imagem principal est sendo carregada; que podemos determinar o alinhamento da imagem em relao ao texto atravs do atributo align; que atravs de ferramentas de edio podemos facilmente criar mapas sensitivos utilizando-se das imagens para apresentar links para os usurios.
I200 HTML COMPLETO
2.3 Cores em hexadecimal

I200 HTML COMPLETO
Cores em hexadecimal
Pode-se dar nome s cores ou codificlas Os valores hexadecimais para o RGB variam de 00 a ff. Por exemplo:
#ff0000 Vermelho #00ff00 Verde #0000ff Azul
101
Alm de escolher uma cor por seu nome, possvel faz-lo pelo seu valor hexadecimal no padro RGB. So atribudos valores para Red (vermelho), Green (verde) e Blue (azul), que misturados formam uma cor. Os valores hexadecimais para o RGB variam de 00 a FF. Por exemplo: FF0000 o Vermelho 00FF00 o Verde 0000FF o Azul As variaes destes valores que vo determinar a cor exata. Para usar esse mtodo, temos que indicar que estamos usando cores em hexadecimal. Indicamos isso no prprio atributo, colocando o caracter "#" antes do valor hexadecimal da cor. Por exemplo: <font color="#FFC9DF">
I200 HTML COMPLETO
O que j aprendemos?
UA 2: Conceitos para edio do HTML BCA 2.1: Navegabilidade BCA 2.2: Imagens BCA 2.3: Cores em hexadecimal
102
Aprendemos neste BCA: que as cores na tela do computador so o produto do somatrio de cores que so medidas em RGB (Read, Green e Blue); que essas cores no HTML so representadas em notao hexadecimal.
I200 HTML COMPLETO
2.4 Atributos do tag <body>

I200 HTML COMPLETO
Atributos do tag <body>

Voc aprender : Atributos de Fundos de Pginas Atributos de Cores Padro de Texto Atributos de Cores de Links
104
I200 HTML COMPLETO
Atributos do tag <body>

bgcolor: cor do fundo de pgina background: imagem no fundo de pgina bgproperties: fixao da imagem de fundo de pgina text: cor padro para o texto link: cor para links no visitados vlink: cor para links j visitados alink: cor para links ativos
105
O tag <body> possui atributos que modificam o comportamento padro da pgina, como a cor do fundo e a cor do texto. Alguns desses atributos so extenses exclusivas do Internet Explorer ou do Netscape Navigator. O atributo bgcolor usado para definir a cor de fundo (background color) da pgina. <body bgcolor="yellow"> Podemos usar como valor para determinar uma cor para o fundo da pgina as cores padro ou as cores estendidas para cada browser. O atributo background usado para definir qual ser a imagem que ir compor o fundo da pgina (background). <body background=caderno.gif"> A imagem de fundo ir se repetir sempre at que a pgina termine, acompanhando o texto. Quando usarmos as setas para rolar a pgina para baixo, a imagem de fundo ir acompanhar esse movimento.
I200 HTML COMPLETO
bgproperties um atributo do Internet Explorer, usado para que a imagem do fundo fique fixa, ou seja, quando a pgina for "rolada" ela no "role" junto. <BODY BACKGROUND="bg.gif" BGPROPERTIES="fixed"> O atributo text altera a cor padro do texto usado na pgina. Quando uma cor de fundo ou imagem definida, pode ser necessrio mudar a cor do texto para garantir a leitura. Nesse caso poderemos usar este atributo.
<BODY BGCOLOR="gray" TEXT="white">
Sempre bom garantir a legibilidade de nosso texto, e por esse motivo, devemos escolher cores para nosso texto que tornem a leitura a mais agradvel possvel. Estes so os atributos usados para determinar qual a cor dos links em nossa pgina. <body link="red" vlink="blue" alink="marron"> link determina a cor dos links, que ainda no foram ativados (seguidos) pelo usurio. vlink determina a cor dos links que j foram ativados (seguidos) pelo usurio. alink usado para determinar a cor do link ativo no momento em que ele pressionado. Dicas: Devemos observar alguns detalhes quando utilizamos imagens ou cores como fundo de pginas: O tempo de carga da imagem; Cores escuras com fontes escuras (ou vice-versa), letras pequenas e cores berrantes podem causar confuso na leitura; Deve haver harmonia entre as cores da pgina.
I200 HTML COMPLETO
Exerccio terico
107
Exerccios:
18) Qual a afirmativa correta: a) Quando a imagem em background menor do que a rea til, ela se repete tantas vezes quantas forem as necessrias b) Quando a imagem menor do que a rea til, ela se repete tantas vezes quantas forem as necessrias c) Quando a imagem em background maior do que a rea til, ela se repete tantas vezes quantas forem as necessrias d) Quando a imagem maior do que a rea til, ela se repete tantas vezes quantas forem as necessrias e) N.R.A. 19) O atributo BGCOLOR : a) obrigatrio b) aconselhvel c) desaconselhvel d) opcional e) N.R.A. 20) So atributos da tag body: a) link, vlink, alink, hover b) a:link, a:vlink, a:alink, a:hover c) link, vlink, alink d) a:link, text, color e) N.R.A.
I200 HTML COMPLETO
Lab 8
Codifique a pgina ao lado Use as imagens md.jpg para o logo e fundo.jpg para background Incremente os atributos do tag <body> dos Labs 4, 5, 6 e7 Referncias de cores: Background: #e6cf8b Ttulos: navy
108
I200 HTML COMPLETO
Soluo do Lab 8 <html> <head> <title>Ttulo</title> </head> <body bgcolor=#E6CF8B background=img/fundo.jpg> <img src=img/md.jpg alt=Logo da Master Design align=middle> <font face=arial size=6 color=navy> <b>Master Design - Solues em Internet</b> </font> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 2: Conceitos para edio do HTML BCA 2.1: Navegabilidade BCA 2.2: Imagens BCA 2.3: Cores em hexadecimal BCA 2.4: Atributos da tag <body>
110
Aprendemos neste BCA: que existem atributos especficos para fundos de pgina, outro para cor padro de texto e outro para cores de links; que o Internet Explorer usa o atributo bgproperties para fixar a imagem de background; que devemos tomar muito cuidado com o uso de imagens e cores de fundo e texto no nosso trabalho em HTML.
I200 HTML COMPLETO
2.5- Tags <meta>

I200 HTML COMPLETO
O tag <meta> I
<meta name="description" content="Infnet Instituto de Tecnologia Internet"> <meta name="keywords" content="Internet,intranet, Cursos,Treinamento,WEB,WWW">
112
Ferramentas de busca: As ferramentas de busca, so sites na Web que tem por objetivo catalogar as HomePages. As ferramentas de busca facilitam a vida de quem navega na Web, permitindo que usurios procurem por palavras, frases ou assuntos dentro do universo de pginas catalogadas. Podemos cadastrar uma URL em uma ferramenta de busca para que nosso site seja includo na base de dados dela. Algumas destas ferramentas possuem programas chamados "robs" que navegam pela Web procurando e armazenando as pginas novas e alteradas. Para cadastrar o website numa ferramenta de busca, pode-se faz-lo atravs de formulrios especiais de cadastramento disponibilizados pelas ferramentas. Por exemplo: http://www.cade.com.br/cadecada.htm possvel controlar como a pgina vai ser catalogada utilizando o tag <meta>. O tag <meta> permite informar quais as palavras-chave e descrio que devem ser utilizadas pela ferramenta de busca. O atributo name pode conter os valores description (descrio) e keywords (palavras-chave). Existe um atributo de contedo (content) para cada atributo name. O buscador Google, especialmente, no reconhece os metas para incluso. O google reconhece as primeiras palavras presentes na pgina.
I200 HTML COMPLETO
O tag <meta>
<meta http-equiv="refresh" content="10"> <meta http-equiv="refresh" content="10;url=pag.htm">
113
O tag <meta> tambm usado para recarregar automaticamente a pgina em um intervalo pr-estabelecido de segundos. <meta http-equiv="refresh" content="10"> O atributo http-equiv deve ter o valor refresh. content usado para estabelecer o intervalo em segundos. Podemos usar o tag <meta> para carregar uma outra pgina automaticamente em um intervalo de tempo (em segundos). <meta http-equiv="refresh content="10;url=pag.htm"> Observe que o parmetro url usado para indicar qual pgina ser carregada no intervalo.
I200 HTML COMPLETO
Exerccio terico
114
Exerccios:
21) Qual opo para insero de som numa pgina web mais adequada para o Netscape? a) <embed href=musica.wav height=125 width=60 name=console> b) <embed src=musica.wav height=125 width=60 name=console> c) <bgsound src=musica.wav height=125 width=60 name=console>
d) <bgsound src=musica.wav loop=2> e) As alternativas a e b esto corretas

22) Assinale a alternativa em que a sintaxe est correta:
a) <meta http-equiv="refresh" content="10;pag.htm"> b) <meta refresh content="10"> c) <meta refresh=http-equiv content=10> d) <meta http-equiv="refresh" content="10;url=pag.htm"> e) As alternativas c e d esto corretas
23) Assinale a alternativa correta: a) Tags <meta> podem controlar a catalogao das pginas em ferramentas de busca b) Tags <meta> permitem a associao de palavras-chave s pginas web c) Uma pequena descrio da pgina pode ser inserida no cdigo HTML, atravs dos atributos name e content d) O recarregamento automtico pode ser feito para qualquer URL que se queira e) Todas as alternativas esto corretas
I200 HTML COMPLETO
Lab 9a
Crie um arquivo com nome index.htm e acrescente os metas description e keywords;
Lab 9b
Crie um arquivo com nome redirect.htm e crie um sistema de redirecionamento com timeout de 3 segundos desviando para o endereo http://www.infnet.com.br.
115
Soluo do Lab 9a <head> <meta name=description content=Masterdesign solues web.> <meta name=keywords content=web,design,multimedia,multimdia,html,home,page,> </head> Soluo do Lab 9b <head> <meta http-equiv=refresh content=3;url=http://www.infnet.com.br </head>
I200 HTML COMPLETO
O que j aprendemos?
UA 2: Conceitos para edio do HTML BCA 2.1: Navegabilidade BCA 2.2: Imagens BCA 2.3: Cores em hexadecimal BCA 2.4: Atributos da tag <body> BCA 2.5: Tags <meta>
116
Aprendemos neste BCA: A importncia da utilizao das tags <meta> Como configurar keywords Como configurar o atributo HTTP-EQUIV
I200 HTML COMPLETO
3- Tabelas e Frames
I200 HTML COMPLETO
3.1- Estruturando a Tabela

I200 HTML COMPLETO
Estruturando a tabela
Voc aprender: O que so tabelas. Atributos de tabela, linha e clula. Dicas gerais do uso de tabela.
119
UA Tabelas e Frames
I200 HTML COMPLETO
O que so tabelas?
Exemplos de tabelas
Clulas
Clulas
120
UA Tabelas e Frames
As tabelas no HTML tm a estrutura parecida com as tabelas feitas em processadores de texto ou por planilhas eletrnicas. Uma tabela composta por linhas e colunas. As intersees formadas pelas linhas e colunas formam as clulas da tabela. As clulas de uma tabela HTML podem conter um texto simples, um link, uma imagem etc. O HTML permite controlar a formatao da tabela: borda, alinhamento, espao entre as clulas, tamanho, altura etc.
I200 HTML COMPLETO
Tags das tabelas

<html> <head> <title>Tabelas</title> </head> <body> <table border=1> <tr> <td>Ttulo coluna 1</td> <td>Ttulo coluna 2</td> </tr> <tr> <td>Linha 1 X Clula 1</td> <td>Linha 1 X Clula 2</td> </tr> <tr> <td>Linha 2 X Clula 1</td> <td>Linha 2 X Clula 2</td> </tr> </table> </body> </html>
121
Observe que a endentao auxilia a compreenso do cdigo
UA Tabelas e Frames
Uma tabela criada usando os tags <table> e </table>. Na rea de influncia deste tag, estaro os tags responsveis pela criao das linhas e clulas. Como padro, a tabela criada sem bordas. O tag <tr> usado para criar linhas em uma tabela. Toda a linha de uma tabela possui uma ou mais clulas. No h limites para a quantidade de linhas que podem ser criadas em uma tabela. O tag <th> cria uma clula onde o texto aparece centralizado e em negrito. Serve para colocarmos ttulos nas colunas da tabela. O tag <td> usado para criar as clulas de uma tabela. Uma linha pode conter vrias clulas.
I200 HTML COMPLETO
Os atributos de <table>
align: alinhamento em relao pgina width: largura exata / em relao pgina bgcolor: cor de fundo da tabela background: imagem de fundo na tabela border: borda e divisrias de clulas cellspacing: espao entre clulas cellpadding: espao interno na clula
122
UA Tabelas e Frames
align usado para alinhar a tabela em relao ao resto do documento. Funciona de maneira semelhante ao atributo align do tag img. Ele pode assumir os valores left, right ou center. Ex.: <table align=center"> Nota: Para um alinhamento normal, sem os efeitos de relao com o texto j verificados, usa-se pr a tabela na rea de influncia do tag div. Ex.: <div align=right><table> </table> </div> width usado para definir a largura da tabela em pixels ou porcentagem da largura do documento. Ex.: <table width=80%> bgcolor usado para definir a cor de fundo da tabela. <table bgcolor=#ff0010> background usado para definir a imagem de fundo da tabela. <table background=fundo.gif> border usado para exibir bordas na tabela. Pode assumir valores a partir de zero (sem bordas) e reflete o nmero de pixels da borda. Ex.: <table border=2> cellspacing usado para inserir uma quantidade de espao, em pixels, entre as clulas da tabela. Ex.: <table callspacing=15> cellpadding usado para inserir uma quantidade de espao, em pixels, entre as bordas das clulas e seu contedo. Ex.: <table celpadding=2>
I200 HTML COMPLETO
Os atributos de <table>
Observe o cdigo desta tabela:
123
UA Tabelas e Frames
... <table align="center" width="50%" bgcolor="yellow" border="1" cellspacing="10" cellpadding="5"> <tr> <th>Ttulo coluna 1</th> <th>Ttulo coluna 2</th> </tr> <tr> <td>Linha 1 X Clula 1</td> <td>Linha 1 X Clula 2</td> </tr> <tr> <td>Linha 2 X Clula 1</td> <td>Linha 2 X Clula 2</td> </tr> </table> ...
I200 HTML COMPLETO
Os atributos de <tr>
bgcolor: cor de fundo da linha background: imagem de fundo da linha align: alinhamento horizontal do contedo das clulas (em relao s clulas da linha). Pode assumir os valores left, right e center. valign: alinhamento vertical do contedo das clulas (em relao s clulas da linha). Pode assumir os valores top, bottom, baseline e middle.
124
UA Tabelas e Frames
bgcolor usado para definir uma cor de fundo para a linha de uma tabela. Ex.: <tr bgcolor="blue"> align usado para definir o alinhamento das clulas de uma linha da tabela. Pode ter os valores left, right, center. Ex.: <tr align="right"> valign usado para definir o alinhamento vertical das clulas de uma linha. Pode ter os valores top, bottom, middle. Ex.: <tr valign="top">
I200 HTML COMPLETO
Os atributos de <tr>
Centralizado com align=center
Alinhamento vertical com valign=top
125
UA Tabelas e Frames
... <table border="1"> <tr> <td>Linha 1 X Clula 1</td> <td>Linha 1 X Clula 2</td> </tr> <tr bgcolor="yellow" align="center" valign="top"> <td>contedo 1<br>continuao...</td> <td>conteudo 2</td> </tr> </table> ...
I200 HTML COMPLETO
Os atributos de <td>
bgcolor: cor de fundo da clula background: imagem de fundo da clula align: define o alinhamento na clula valign: define o alinhamento vertical width: define a largura absoluta ou relativa da clula height: define a altura da clula
126
UA Tabelas e Frames
bgcolor usado para definir uma cor de fundo para a clula de uma tabela. Ex.: <td bgcolor="blue"> background usado para inserir uma imagem de fundo exclusivamente na clula onde est configurado. align usado para definir o alinhamento de uma clula. Pode assumir os valores left, right e center. valign usado para definir o alinhamento vertical dentro de uma clula. Pode assumir os valores top, bottom, baseline e middle. width usado para definir a largura da clula em pixels ou porcentagem da largura total da tabela. Ex.: <td width=50> Nota: O uso mais comum de width nas clulas da primeira linha da tabela. Com isso, as outras linhas tendem a seguir a mesma largura. height usado para definir a altura de uma clula, sempre em pixels. Ex.: <td height=15>
I200 HTML COMPLETO
Os atributos de <td>
Somente esta clula foi formatada com atributos
127
UA Tabelas e Frames
... <table border="1"> <tr> <td>Linha 1 X Clula 1</td> <td>Linha 1 X Clula 2</td> </tr> <tr> <td>contedo 1<br>continuao...</td> <td bgcolor="yellow" align="center" valign="top">conteudo 2</td> </tr> </table> ...
I200 HTML COMPLETO
Mesclagem de clulas
128
UA Tabelas e Frames
I200 HTML COMPLETO
Mesclagem de clulas
O atributo colspan usado para indicar quantas " colunas de largura" a respectiva clula ir ocupar.
Clula mais larga com colspan=2
129
UA Tabelas e Frames
<table border="2"> <tr> <td colspan="2">Clula A1</td> </tr> <tr> <td>Clula B1</td> <td>Clula B2</td> </tr> </table>
I200 HTML COMPLETO
Mesclagem de clulas
O atributo rowspan usado para indicar quantas " linhas de altura" a respectiva clula ir ocupar.
Clula mais alta com rowspan=2
130
UA Tabelas e Frames
<table border="2"> <tr> <td rowspan="2">Clula A1</td> <td>Clula A2</td> </tr> <tr> <td>Clula B1</td> </tr> </table>
I200 HTML COMPLETO
Dicas
Use bordas somente quando necessrio; Prefira controlar as bordas com o CSS; Certifique-se que se encaixam no layout da pgina Use tabelas sem bordas para encaixar imagens fatiadas, por exemplo.
BORDER=3 BORDER=0
131
UA Tabelas e Frames
Exemplos de sites que usam tabelas em sua formatao.
I200 HTML COMPLETO
Exerccio terico
132
UA Tabelas e Frames
Exerccios:
24) Quais so os atributos comuns aos tags <tr> e <td>? a) align, valign, cellpadding, rowspan b) bgcolor, cellpadding, cellspacing, rowspan c) bgcolor, valign, collspan, rowspan d) align, valign, bgcolor, valuespacing e) align, valign, bgcolor, background 25) Preencha a frase com os atributos corretos: Quando mesclamos linhas utilizamos o atributo ....... e quando mesclamos colunas utilizamos ....... . O alinhamento vertical do contedo de uma linha ou clula atribudo pelo atributo ......., enquanto que o alinhamento da tabela em relao pgina configurado com o atributo ....... . a) colspan, rowspan, align, valign b) colspan, rowspan, valign, align c) cellpadding, rowpadding, valign, align d) rowspan, colspan, valign, align e) cellpadding, cellspacing, align, valign 26) Assinale a alternativa mais correta: a) Podemos alinhar tabelas na rea de influncia do tag <div> b) Podemos alinhar tabelas com o atributo align no tag <table> c) O alinhamento vertical pode ser configurado nos tags <tr> e/ou <td> d) O espaamento entre clulas deve ser feito com o atributo cellspacing no tag <table> e) Todas as alternativas esto corretas
I200 HTML COMPLETO
Lab. 10
Criar uma pgina com esta tabela abaixo.
133
UA Tabelas e Frames
I200 HTML COMPLETO
Resposta Lab 10 (1/2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>página principal</title>  </head> <body link="#FF9900" vlink="#FFCC00" alink="#FF9900" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr valign="top"> <td> <font size="2" face="arial"> <h4>A empresa</h4> <p> In vel enim id risus malesuada consectetuer. Duis a nunc vitae metus porttitor adipiscing. Curabitur placerat lacus a ipsum. Nunc sit amet sapien. Cras nibh ante, nonummy quis, mollis quis, commodo ac, est. </p> <p>Duis porta pede non mi. Pellentesque tincidunt metus et diam. Pellentesque nulla. Fusce eleifend viverra enim. In volutpat nisl eu metus. Nunc varius, neque at pellentesque congue, nulla leo rutrum magna, et nonummy nibh lorem pulvinar est. Maecenas rhoncus lectus eget est. </p> <h4>Testemunhal</h4> <p>Duis porta pede non mi. Pellentesque tincidunt metus et diam. Pellentesque nulla. Fusce eleifend viverra enim. In volutpat nisl eu metus. Nunc varius, neque at pellentesque congue, nulla leo rutrum magna, et nonummy nibh lorem pulvinar est. Maecenas rhoncus lectus eget est. </p> <p><font size="1" face="arial"> John Doe, Diretor-geral Timaster. </font></p> </font> </td> <td width="250" align="center" bgcolor="#FFF7D2"> <font size="2" face="arial"> <h4>Trabalhos desenvolvidos </h4>
I200 HTML COMPLETO
<td>460,00</td> <td>900,00</td> </tr> <tr align=right> <td>CD-ROM</td> <td>150,00</td> <td>500,00</td> <td>1.200,00</td> </tr> <tr align=right> <td>Manuteno</td> <td>90,00</td> <td>400,00</td> <td>800,00</td> </tr> <tr align=right> <td>Imagens</td> <td>120,00</td> <td>470,00</td> <td>1.000,00</td> </tr> <th colspan=4 bgcolor=navy> <font color=#ffffcc>Master Design - Solues em Internet </font> </th> </table> </font> </body> </html>
I200 HTML COMPLETO
O que j aprendemos?
UA 3: Tabelas e Frames BCA 3.1: Estruturando a tabela
136
UA Tabelas e Frames
Aprendemos neste BCA: que existem diferentes alinhamentos nos tags de tabelas; que existem atributos muito semelhantes nos tags de tabelas; que tabelas devem ser utilizadas com muita freqncia nos trabalhos em HTML; que podemos formatar pginas inteiras dentro de tabelas e que isso auxilia no controle da visualizao da pgina no navegador do usurio.
I200 HTML COMPLETO
3.2- Frames
I200 HTML COMPLETO
Frames
Voc aprender: O que so frames. Como e quando us-los e o porqu dos frames. Documentos de layout e de contedo
138
UA Tabelas e Frames
I200 HTML COMPLETO
Os frames
O que so? Quando us-los? Por que us-los?
139
UA Tabelas e Frames
O que so frames? um recurso utilizado para dividir a janela do browser em diversas partes. Cada uma destas partes chamada de frame e pode ser manipulada separadamente. Cada frame pode conter um documento diferente, ou seja, as frames funcionam como pginas HTML juntas em uma mesma janela, cada uma com seu espao prdefinido. Quando us-los? Podem ser usadas para criar um ndice de uma coleo de pginas, de um documento etc. Podem ser usadas para fixar um layout de pgina. Por que us-los? As frames podem ser usadas para organizar a navegao do site, exibindo os links mais importantes em uma frame separada.
I200 HTML COMPLETO
Layout e contedo
Documento de layout: pgina HTML que estrutura o chamado frameset Frameset: configura os frames e os associa a documentos com contedo para exibio Documento de contedo: pgina HTML com contedo
Pode-se aninhar documentos de layout
140
UA Tabelas e Frames
As divises das frames so feitas por uma pgina (documento de Layout) que contm as informaes sobre a estrutura dos documentos, ou seja, como sero distribudas as frames (em linhas e colunas). Os documentos de contedo so as pginas HTML (ou outro documento de layout) que sero apresentadas por cada frame. O documento de layout uma pgina HTML escrita usando tags prprias para a definio da estrutura de frames. Cada frame criada possui uma referncia a um documento de contedo que ser exibido pela frame. Os documentos de contedo podem ser divididos em dois tipos: Pginas comuns em HTML Outro documento de layout subdividindo a janela de uma frame em outro conjunto de frames.
I200 HTML COMPLETO
Tags do documento de layout

<frameset> : estrutura os frames do documento com os atributos rows e cols <frame> : configura cada frame com os atributos src e name
141
UA Tabelas e Frames
O tag <frameset> responsvel pela diviso da pgina em frames que podem ser linhas (rows) ou colunas (cols). Dentro da rea de influncia do tag <frameset> e </frameset>, existem os elementos que definem o contedo de cada frame ou outras definies de <frameset> (encadeamento). O tag <frameset> substitui o tag <body> em um documento de layout.
I200 HTML COMPLETO
<html> <head> <title>FRAMES</title> </head> <frameset cols="50%,*"> <frameset rows="50%,*"> <frame src="frame1.html" name="um"> <frame src="frame2.html" name="dois"> </frameset> <frame src="frame3.html" name="tres"> </frameset> </html>
Cdigo HTML de um documento de layout
142
UA Tabelas e Frames
O atributo rows usado para dividir a janela em frames horizontais (linhas). Pode haver mais de uma linha definida por esse atributo. O valores de rows podem ser em pixels, valores percentuais ou relativamente uns aos outros. <frameset rows="30%,*"> Definir as frames usando valores percentuais implica em no ter a preocupao com a resoluo usada pelo browser do cliente, visto que esses valores percentuais so relativos ao tamanho da janela do browser. Os valores relativos podem ser aplicados, por exemplo, quando temos trs linhas (rows) e queremos definir que a primeira deve ter 30%, a segunda 40% e a terceira o restante. (30%, 40%, *) Definir as frames usando valores percentuais implica em no ter a preocupao com a resoluo usada pelo browser do cliente, visto que esses valores percentuais so relativos ao tamanho da janela do browser.
I200 HTML COMPLETO
Os valores relativos podem ser aplicados, por exemplo, quando temos trs colunas (cols) e queremos definir que a primeira deve ter 30%, a segunda 40% e a terceira o restante. (30%, 40%, *) O atributo cols usado para dividir a em frames verticalmente (colunas). Podem haver mais de uma coluna definidas por esse atributo. Os valores de cols podem ser em pixels, percentuais ou relativamente uns aos outros. <frameset cols="40%,*"> O tag <frame> usado para definir qual o documento de contedo (pgina) ser carregado pela frame. usado na rea de influncia do tag <frameset>. <frame src="doc1.htm" name="frm01"> O atributo src define o nome do documento (pgina) que ser carregado na frame. <frame src="doc1.htm"> O atributo name associa um nome uma frame. <frame src="doc1.htm" name="frm01"> O nome da frame importante, pois atravs dele que conseguiremos referenci-lo por um link.
I200 HTML COMPLETO
Outros atributos de <frameset>

frameborder pode assumir dois valores : 0 e1
Se o atributo no for informado, as bordas iro aparecer.
<frameset cols="50,70" frameborder=0>
framespacing altera o espaamento entre as frames.

Seu valor definido em pixels.
<frameset cols="50,70" frameborder="0" framespacing ="0">
144
UA Tabelas e Frames
Podemos apresentar frames sem bordas, definir a altura e a largura da margem de uma frame e excluir as barras de rolagem. Para isso preciso usar alguns atributos que iro influenciar as frames. Escondendo as bordas de uma frame podemos ganhar um pouco mais de espao para o layout de nossa pgina. O atributo frameborder pode assumir dois valores : 0 (esconde as bordas) e 1 (exibe as bordas). O atributo framespacing altera o espaamento entre as frames e com o valor 0 muito til ao usarmos frames sem bordas, pois o espaamento natural ficaria evidenciado. Seu valor definido em pixels.
<frameset cols="50,70" frameborder="0" framespacing="0">
I200 HTML COMPLETO
Andre Kischinevsky: Andre Kischinevsky: Em que browsers isto no funciona? Em que browsers isto no funciona?
Outros atributos de <frame>
marginwidth: margens direita e esquerda marginheight: define margem superior

<frame src="pag.htm" marginheight=35 marginwidth=50> noresize: protege do redimensionamento <frame src="doc1.htm" name="frm01" noresize>
scrolling : configura barras de rolagem

<frame src="pag.htm" name="frm3" scrolling=yes">
145
UA Tabelas e Frames
O atributo marginwidth estabelece um valor para as margens direita e esquerda do frame e marginheight estabelece um valor para a margem superior do frame. <frame src="pag.htm" marginheight=35 marginwidth=50> O atributo noresize impede que o usurio altere o tamanho da janela. <frame src="doc1.htm" name="frm01" noresize> O atributo scrolling define a presena, ausncia ou atribuio automatica pelo browser das barras de rolagem. Seu valor pode ser yes,no ou auto. <frame src="pag.htm" name="frm3" scrolling=yes">
I200 HTML COMPLETO
Browsers que no entendem frames

<noframes> usado para exibir uma mensagem que ser interpretada somente pelos browsers que no suportam o uso de frames.
<noframes> Desculpe, seu browser no entende frames </noframes>
146
UA Tabelas e Frames
Alguns browsers mais antigos no conseguem exibir frames. A partir dessas verses, os browsers abaixo conseguem exibir frames: Internet Explorer 3.0 Netscape 2.0 Mosaic 3.0 Opera 2.1 O tag <NOFRAMES> usado para exibir uma mensagem que ser interpretada somente pelos browsers que no suportam o uso de frames. Os browsers que suportam frames simplesmente ignoram o que est escrito na rea de influncia desse tag.
<NOFRAMES> Desculpe, seu browser no entende frames </NOFRAMES>
I200 HTML COMPLETO
Links entre frames
name="frame2"
name="frame3"
name="frame1"
147
UA Tabelas e Frames
Como um documento de contedo pode ser uma pgina HTML comum, pode tambm possuir links. Podemos carregar esses links no prprio frame ou em outro frame qualquer. Para isso ser necessrio que os frames possuam nome, ou seja, tenham o atributo name com um valor associado que o identifique como nico. No documento de contedo, ser escrito o link usando um novo atributo chamado target (alvo) que ter associado o nome da frame onde o link ser exibido. <a href="pagina.html target="frame01">
Caso esse atributo no seja informado, o link carregar a pgina no prprio frame.
I200 HTML COMPLETO
Links entre frames

Clique <a href=documento2.html" para carregar o link no frame de Clique <a href=documento3.html" para carregar o link no frame de target="frame2">aqui</a> cima<br><br> target="frame3">aqui</a> baixo<br>
Frames carregadas
148
UA Tabelas e Frames
Exemplo de links carregados em outras frames atravs da identificao de cada frame por seu respectivo nome (atributo name), conforme cdigo a seguir:
Clique <a href=documento2.html" para carregar o link no frame de Clique <a href=documento3.html" para carregar o link no frame de target="frame2">aqui</a> cima<br><br> target="frame3">aqui</a> baixo<br>
I200 HTML COMPLETO
O atributo target
<a href="pag.html" target="_top">
Pressionando este link a pgina carregada em uma janela inteira
Janela inteira
<a href="pag.html" target="_blank"> <a href="pag.html" target="_parent">

149
UA Tabelas e Frames
Todo o link em um documento de contedo ser carregado em uma outra frame caso o atributo target esteja presente. Se este atributo no estiver presente, o link ser carregado na mesma frame. Dessa forma ficamos "presos" dentro das frames. O atributo target possui um valor especial para que possamos finalizar o uso das frames: o valor _top . Ele elimina os frames que estiverem sendo exibidos, carregando o link em uma janela inteira. Este valor deve ser escrito em letras minsculas. <a href="pag.html" target="_top"> Podemos carregar o link em uma nova janela do browser ao invs de carreg-lo na mesma janela. Esse tipo de tcnica usada quando no queremos que as frames sejam substitudas por uma nova pgina como acontece com o valor _top. Ao colocarmos o valor _blank no atributo target, o browser ir abrir uma nova janela deixando a janela das frames intacta. <a href="pag.html" target="_blank"> Usamos o valor _self no atributo target para carregermos o documento na mesma frame. Existe ainda o valor _parent usado nos casos com mais de um documento de layout. <a href="pag.html" target="_parent">
I200 HTML COMPLETO
Exerccio terico
150
UA Tabelas e Frames
Exerccios:
27) Marque a alternativa falsa: a) O frameset configurado no arquivo de layout b) O frameset pode ter quantos frames forem necessrios para um bom layout c) Marginwidth, marginheight, noresize e scrolling so atributos da tag <frame> d) <noframes> deve ser utilizado quando no se deseja visualizar o frameset e) Frameborder, framespacing, cols e rows so atributos da tag <frameset> 28) Preencha a frase com os termos corretos: Quando necessitamos abrir um documento numa janela pop-up atravs do atributo ... na tag ..., damos a ele o valor ... . a) target, frame, name b) name, frame, necessrio c) target, a , _blank d) src, frame, necessrio e) src, frameset, necessrio 29) Assinale a relao correta: a) target=frame2: carrega a pgina no segundo frame imediatamente inferior b) target=_blank: limpa contedo dos frames que estiverem sendo exibidos c) target=_top : elimina frames que estiverem sendo exibidos d) target=frame2: carrega a pgina no segundo frame imediatamente superior e) N.R.A.
I200 HTML COMPLETO
Lab 11
Inserir a imagem img/trabalho.jpg no documento HTML lab5.htm.
151
UA Tabelas e Frames
I200 HTML COMPLETO
Resposta Lab 11 <html> <head> <title>Nossos Servios</title> <body bgcolor="#F0E2B9"> <font face="arial" color="blue"> <h2>Nossos Servios</h2> </font>
<img src="img/trabalho.jpg" width="203" height="150" align="right"> <font face="arial" size="4"> <ul type="circle"> <li>Desenvolvimento de Websites</li> <font size=2> <ol> <li>Hotsites</li> <li>Ambientes multimdia em Flash</li> <li>Extranets</li> </ol> </font> <li>Criao de RichMedia Banners</li> <li>Produo em CD-ROM</li> <li>Manuteno de WebSites</li> <li>Aplicaes de E-learning</li> </ul> </font> <hr size="1" color="blue" noshade> <font color="blue"> <em> Av. Rio Branco, 12/8 andar<BR> Centro - Rio de Janeiro<BR> www.masterdesign.com.br </em> </font> </body> </html>
I200 HTML COMPLETO
Lab 12
Integrar atravs de framesets as pginas criadas nos Labs anteriores.
153
UA Tabelas e Frames
I200 HTML COMPLETO
Resposta Lab 12 <HTML> <HEAD> <TITLE>Master Design</TITLE> </HEAD> <FRAMESET ROWS="100,*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME SRC="lab8.htm" NAME="header" SCROLLING="NO" MARGINWIDTH="0" MARGINHEIGHT="2"> <FRAMESET rows="*" COLS="21%,*" FRAMESPACING="0" FRAMEBORDER="0"> <FRAME SRC="lab6.htm" NAME="menu" SCROLLING="NO"> <FRAME SRC="lab10.htm" NAME="principal" SCROLLING="AUTO"> </FRAMESET> </FRAMESET> <noframes> Seu navegador no suporta frames, favor instalar uma verso atualizada. </noframes> </HTML> Ateno: Salve este lab com o nome de index.htm No se esquea de acrescentar os atributos target=principal nos links que esto no documento lab6.htm. Acrescente, tambm, os atributos link=white vlink=white alink=silver na tag <body> do mesmo documento. Por ltimo, ajuste o documento lab8.htm para que a tag <img> seja um link, conforme a seguir: <a href=lab10.htm target=principal> <img src="img/md.jpg" alt="Logo da Master Design" align=middle border=0> </a>
I200 HTML COMPLETO
O que j aprendemos?
UA 3: Tabelas e Frames BCA 3.1: Estruturando a tabela BCA 3.2: Frames
155
UA Tabelas e Frames
Aprendemos neste BCA: o que so, o como e o porqu do uso dos frames; a diferena entre documentos de layout e documentos de contedo; o uso das tags <frameset> e <frame>; os atributos utilizados nas tags <frameset> e <frame>; como montar links entre frames; o uso do atributo target e suas nuances especiais.
I200 HTML COMPLETO
4- Formulrios
I200 HTML COMPLETO
4.1- Os elementos do formulrio

I200 HTML COMPLETO
Conceitos Preliminares
Voc aprender: Para que servem os formulrios A inserir formulrios em pginas HTML Quais os elementos de um formulrio
158
UA Formulrios
I200 HTML COMPLETO
Para que servem os formulrios

Interatividade Pesquisas em bases de dados Envio de informaes para bases de dados Envio de e-mail Fundamentais para o e-commerce Geralmente usado para executar um script
159
UA Formulrios
Permitem a interatividade do usurio com aplicaes server-side. atravs de formulrios que iniciamos pesquisas em bases de dados, como o Altavista. Os formulrios permitem que informaes diversas, como dados pessoais, digitadas em uma pgina sejam enviados para aplicaes que usam bancos de dados. Os formulrios so fundamentais em sites de comrcio eletrnico, pois so responsveis por receber as informaes do usurio e envi-las para o servidor. Geralmente um formulrio usado para executar um script (PERL, ASP etc) no servidor, que ir processar as informaes enviadas.
I200 HTML COMPLETO
A tag <form> e seus atributos

<form action="http://www.infnet.com.br/cgi-bin/script method=post">
Executa o programa "script" no diretrio "/cgi-bin" do servidor www.infnet.com.br
160
UA Formulrios
A tag <form> usada para criar uma rea na pgina onde sero inseridos os elementos do formulrios. Os elementos de um formulrio so os campos usados para captar e enviar informaes. O atributo action indica a localizao (URL) do script ou programa que ser executado para processar os dados enviados pelo formulrio. Elementos de formulrio
<form action="http://www.infnet.com.br/cgi-bin/script">
Executa o programa "script" no diretrio "/cgi-bin" do servidor www.infnet.com.br O atributo method indica o formato no qual os dados sero enviados para o servidor. Esse atributo pode assumir os valores get ou post
<form action="http://www.infnet.com.br/cgi-bin/script method=post">
I200 HTML COMPLETO
Os elementos do formulrio
Os elementos de um formulrio devem ficar na rea de influncia do tag <form>. Trs grupos especficos:
<input> <select> <textarea>
161
UA Formulrios
Os elementos de um formulrio devem ficar na rea de influncia do tag <form>. atravs destes elementos que o formulrio tomar forma, exibindo campos de texto, listas de seleo, caixas de dilogo e botes. Os tags <input> , <select> , <textarea> e seus atributos so responsveis por essa formatao. Esses elementos tem em comum alguns atributos importantes. O atributo name indica o nome do campo e usado pelo script para recuperao do valor informado pelo usurio. O atributo value permite que seja atribudo um valor padro ao campo.
I200 HTML COMPLETO
O tag <input>
162
UA Formulrios
O tag input usado para exibir uma caixa de texto, enviar um valor oculto em uma pgina, botes, elementos de mltipla escolha etc. Ele no possui fechamento e o valor do atributo type indicar qual tipo de campo ser exibido.
I200 HTML COMPLETO
Sintaxe de <input>
<input type="text" name="nome size=30 maxlength=30> <input type="password" size=10 name="senha"> <input type="hidden" name=id" value=Infnet"> <input type="checkbox" name="opcao" value=liga" checked> <input type="radio name=sexo" value=m checked> <input type="submit" value="Enviar">
<input type="reset" value=Apagar"> <input type="image" src="envio.gif">
163
UA Formulrios
Atributo type=text: exibe uma caixa de texto. <input type="text" name="nome size=30 maxlength=30> O atributo size indica o tamanho, em caracteres, que o campo de texto ter. O atributo maxlength indica o nmero mximo de caracteres que podero ser digitados no campo de texto. Nota: Esses atributos s devem ser usados quando o atributo type for igual a text, password ou hidden. Atributo type="password:permite digitar um texto sem que o contedo seja exibido. Substitui o texto por "* <input type="password" size=10 name="senha"> Atributo type="hidden:permite passar um valor para o script. Este valor no exibido na pgina. O atributo name e value devem ser informados. <input type="hidden" name=id" value=Infnet">
Atributo type="checkbox: permite escolher uma ou mais opes. Se for usado o atributo checked, a caixa aparecer j ativada. <input type="checkbox" name="opcao" value=liga"> <input type="checkbox" name="opcao" value=liga" checked>
I200 HTML COMPLETO
Atributo type="radio:permite escolher uma nica opo em uma pgina. Uma das opes tambm pode receber o atributo checked. <input type="radio" name=sexo" value=m checked> <input type="radio" name=sexo" value=f"> Atributo type="submit:envia os dados preenchidos no formulrio para o servidor, usando o endereo especificado no atributo action do tag <form>. <input type="submit" value="Enviar"> Atributo type="reset: retorna os valores default do formulrio. <input type="reset" value=Apagar"> Atributo type="image: permite que uma imagem seja usada no lugar do boto de envio. <input type="image" src="envio.gif">
I200 HTML COMPLETO
O tag <textarea>
<textarea name=comenta rows=10 cols=50> Esta uma rea de texto </textarea>
165
UA Formulrios
O tag <textarea> cria uma rea para a digitao de vrias linhas de texto em uma pgina. O atributo cols define a quantidade de colunas desta rea. O atributo rows define a quantidade de linhas da rea. Este tag possui fechamento.
I200 HTML COMPLETO
Os tags <select> e <option>

Exemplo de menu pull-down
<select name=uf" size="1"> <option value=mg">Minas Gerais <option value=rj">Rio de Janeiro <option value=sp">São Paulo </select>
Uma variao do pull-down

multiple> Gerais <option value=rj">Rio de Janeiro mbaixo, como nos outros elementos mbaixo, como nos outros elementos <option value=sp">São Paulo de formulrio? de formulrio? </select>
166
UA Formulrios
Andre Kischinevsky: <select name=uf" size=3 Andre Kischinevsky: <option value=mg">Minas No deveria haver oocdigo No deveria haver cdigo
Os menus do tipo Pull-down so caixas de seleo onde podemos optar por valores de uma lista. O tag <select> usado para criar os menus pull-down. Os itens da lista so definidos pela tag <option>. O tag <select> possui fechamento. O atributo size define o nmero de opes que sero exibidas simultaneamente. Se o atributo multiple for informado, o tag <select> permitir que mais de um item seja selecionado. O atributo name indica o nome do objeto. Este nome ser usado pelo script para manipular as informaes selecionadas. O tag <option> deve ser usado dentro da rea de influncia do tag <select> para definir as opes disponveis ao usurio. O atributo value define o valor da opo e que ser enviado ao script, caso seja selecionada. O atributo selected determina que a opo ser selecionada como default (padro).
I200 HTML COMPLETO
Agrupando Elementos
<form action=... method=post> <fieldset><legend>Dados Pessoais</legend> Nome:<input type=text name=nome size=20><p> Senha:<input type=password name=senha size=10><p> E-mail:<input type=text name=email size=15> </fieldset> </form>
167
UA Formulrios
O tag <fieldset> funciona apenas a partir das verses 4 dos browsers e usado para envolver campos com uma moldura, que poder ter um ttulo e tambm uma tecla de atalho de acesso.
I200 HTML COMPLETO
Lab 13
Criar um formulrio que complemente o projeto, como um Livro de Visitas.
168
UA Formulrios
I200 HTML COMPLETO
<HTML> <HEAD> <TITLE>Livro de Visitas</TITLE> </HEAD> <BODY BGCOLOR="#E6CF8B" TEXT="NAVY" VLINK="NAVY" ALINK="SILVER" onload="window.document.FORMUL.NOME.focus()"> <FONT FACE="ARIAL" SIZE="2"> <h3>Livro de Visitas</h3>
LINK="NAVY"
<form name="FORMUL" action="http://www.hpg.com.br/scripts/cgibin/FormMail.pl" method="post"> <input type="hidden" name="recipient" value="Coloque seu e-mail aqui"> <input type="hidden" name="subject" value="Livro de Visitas"> <input type="hidden" name="redirect" value="http://www.hpg.com.br/users/poolthx.htm"> <B>Nome: </B><br><INPUT TYPE="TEXT" SIZE="49" NAME="NOME"><P> <B>E-mail: </B><br><INPUT TYPE="TEXT" SIZE="24" NAME="MAIL"><P> <B>Login de Cadastro: </B><br><INPUT TYPE="TEXT" SIZE="15" NAME="LOGIN"><P> <B>Senha: </B><br><INPUT TYPE="PASSWORD" SIZE="15" NAME="SENHA"><P> <B>rea de Atuao: </B><br><SELECT NAME="AREADEATUACAO" SIZE="1"> <OPTION VALUE="">Escolha aqui <OPTION VALUE="INF">Informtica <OPTION VALUE="PUB">Setor Pblico <OPTION VALUE="MED">Medicina <OPTION VALUE="ENG">Engenharia <OPTION VALUE="EDU">Educao </SELECT> <P> <B>Grau de Instruo: </B><br> <INPUT TYPE="RADIO" NAME="op">1 Grau <INPUT TYPE="RADIO" NAME="op">2 Grau INSTITUTO INFNET - 169 <INPUT TYPE="RADIO" NAME="op">Superior Grau <INPUT TYPE="RADIO" NAME="op">Ps/Mestrado <P>
I200 HTML COMPLETO
<B>Gostaria de receber informaes sobre que servios?</B><BR> <INPUT TYPE="CHECKBOX" NAME="HOMEPAGES">Home Pages <INPUT TYPE="CHECKBOX" NAME="LOGO">Logotipos <INPUT TYPE="CHECKBOX" NAME="BANNERS">Banners<BR> <INPUT TYPE="CHECKBOX" NAME="CD">CD-ROM <INPUT TYPE="CHECKBOX" NAME="MANUT"> Manuteno <INPUT TYPE="CHECKBOX" NAME="IMAGENS"> Imagens <P> <B>Crticas e Sugestes</B><BR> <TEXTAREA NAME="CRITICAS" ROWS="7" COLS="47"> </TEXTAREA><P> <INPUT TYPE="SUBMIT" VALUE="Enviar >>"> <INPUT TYPE="RESET" VALUE="Apagar"> </FORM> </font> </BODY> </HTML>
I200 HTML COMPLETO
O que j aprendemos?
UA 4: Formulrios BCA 4.1: Os elementos do formulrio
171
UA Formulrios
Aprendemos neste BCA: o que so e para que servem os formulrios; os elementos inseridos pelo tag <input>; o elemento <textarea>; os elementos inseridos por <select> e <option>; o agrupamento de elementos com o tag <fieldset>.
I200 HTML COMPLETO
4.2- O uso do JavaScript e das CSS

I200 HTML COMPLETO
A importncia do JavaScript
Insira no aquivo HTML criado no Lab 13 o seguinte cdigo no tag <body>
<body onload=window.document.FORMUL.NOME.focus()>
Teste novamente o arquivo e verifique onde est o cursor A est uma ao por JavaScript!
173
UA Formulrios
Normalmente associado ao tag <body> , o evento OnLoad usado para executar alguma funo do Java Script aps a pgina ser completamente carregada. <body OnLoad=funo()> Para executar a funo quando o usurio carregar outro documento, usamos o evento OnUnload. <body OnUnload=funo()> Grande parte dos formulrios necessitam validar as informaes antes do processamento. O uso do JavaScript permite que essas validaes sejam feitas no browser, antes de serem enviadas para o processamento no servidor. Este tipo de validao garante que uma informao seja preenchida corretamente. Eventos do JavaScript O evento OnFocus executa uma funo JavaScript quando o elemento se torna o foco. <input type="text" name="nome OnFocus="funo()"> Para executar a funo quando o elemento perde o foco , usamos o evento OnBlur. <INPUT TYPE="text" NAME="nome" OnBlur="funo()"> Ambos so utilizados nos elementos text, password, textarea e select.
I200 HTML COMPLETO
A importncia das CSS

Insira no aquivo HTML criado no Lab 13 o seguinte tag <link>
<link rel=stylesheet type=text/css href=estilo.css>
O tag <link> dever estar na rea de influncia de <head> ... </head> Certifique-se de que o arquivo estilo.css est na mesma pasta do arquivo montado no Lab 12 A esto as Cascading Style Sheets!
174
UA Formulrios
Quando um estilo CSS (Cascading Style Sheets) adicionado a uma pgina HTML, todas as definies de estilos contidas nos comandos CSS so aplicados ao HTML. Existem muitas vantagens no uso das CSS e o desenvolvedor de websites profissionais devem esforar-se por dividir seu processo em dois tipos de cdigo: o da estrutura da pgina web (com o HTML) e o do estilo da pgina (com as CSS). O aprendizado das CSS no est no escopo deste curso de HTML.
I200 HTML COMPLETO
Exerccio terico
175
UA Tabelas e Frames
Exerccios:
30) Formulrios devem estar inseridos na rea de influncia de... a) <form> ... </form> b) <input> ... </input> c) <textarea> ... </textarea> d) <seletc> ... </select> e) Todas as opes esto corretas 31) So tags do menu pull-down: a) <input> e <select> b) <select> e <option> c) <input> e <option> d) <input> e <type> e) N.R.A. 32) Assinale a alternativa mais correta: a) O HTML no funciona corretamente sem o auxlio das CSS b) O HTML no funciona corretamente sem o auxlio do JavaScript c) O HTML no funciona corretamente sem o auxlio das CSS e do JavaScript d) O HTML s funciona corretamente com o auxlio das CSS e do JavaScript e) N.R.A.
I200 HTML COMPLETO
O que aprendemos?
UA 1: O HTML UA 2: Conceitos Importantes UA 3: Tabelas e Frames UA 4: Formulrios
176
o que j aprendemos?
I200 HTML COMPLETO
Adendo

177
Achando Imagens na Web Interpretando Mapas Sensitivos Insero de som Soluo dos exerccios Referncias para consultas ndice de tags Tabela de caracteres especiais Tabela orientativa de cores
Adendo
I200 HTML COMPLETO
Achando Imagens na Web

Cliparts
http://dgl.microsoft.com/ http://www.clipartsplanet.com/
Texturas
http://www.sfsu.edu/~jtolson/textures/textures.htm http://www.grsites.com/textures/
Banco de Imagens
http://www.PictureQuest.com http://www.imagebank.com http://www.freefoto.com/
178
Adendo
I200 HTML COMPLETO
Interpretando Mapas Sensitivos

A imagem do elevador nica. Os botes foram mapeados para URLs distintas. Como? Atravs de mapa sensitivo!
A complexidade do cdigo prope que se utilizem ferramentas de edio. Ex.: Dreamweaver, Mapedit, GoLive!, FrontPage, etc.
179
Adendo
Uma imagem "mapeada" uma imagem cuja superfcie dividida em regies e cada regio associada a uma URL especfica. As reas so selecionadas atribuindo-se coordenadas s mesmas. Podemos usar um programa especial para selecionar as reas e atribuir as URL. Exemplo de Cdigo de Imagem Mapeada.
<map name="ElvMap"> <area shape =rect" coords="0, 93, 62, 122" href="salaovip/index.htm"> <area shape =rect" coords="2, 210, 67, 234" href="cursos/index.htm"> <area shape =rect" coords="0, 152, 67, 180" href="job/index.htm"> <area shape =rect" coords="0, 179, 68, 208" href="coffee/index.htm"> <area shape =rect" coords="0, 263, 69, 292" href="recepc/index.htm"> <area shape =rect" coords="0, 292, 69, 321" href="index.htm"> <area shape =rect" coords="1, 235, 68, 262" href="bibliot/index.htm"> </map> <a href="../_vti_bin/shtml.dll/escritor/index.htm/map"> <img ismap usemap="#ElvMap" border="0" height="380" alt="elevador" src="3doffice.jpg" width="260"> </a>
Como podemos observar, o cdigo bastante complexo e necessrio a utilizao de uma ferramenta para realizar esse trabalho. Existem ferramentas (Dreamweaver MX, MAPEDIT, FrontPage etc) que geram o cdigo pronto para ser utilizado.
I200 HTML COMPLETO
Insero de som
<bgsound>: Insere som no Internet Explorer. Ex.:
<bgsound src=som.wav loop=2>
<embed>: Insere som no Netscape. Ex.:

<embed src=meusom.wav height=22 width=37 name=console>
180
Adendo
Para inserirmos som no Internet Explorer utilizamos o tag <bgsound>. O atributo src indica qual o arquivo de udio ser reproduzido. O atributo loop indica quantas vezes o arquivo se repetir. <bgsound src=som.wav loop=2> Para inserirmos som no Netscape utilizamos o tag <embed>. Este tag pode ser utilizado com um conjunto de atributos relacionados no final da apostila. <embed src=meusom.wav height=22 width=37 name=console>
I200 HTML COMPLETO
Soluo dos exerccios

01)e; 04)c; 07)c; 10)b; 13)a; 16)b; 19)e; 22)d; 25)a;
181
02)c; 05)e; 08)e; 11)d; 14)d; 17)d; 20)d; 23)c; 26)b;
03)e; 06)e; 09) c; 12) e; 15)c; 18)e; 21)e; 24)c; 27)e

Adendo
Resposta dos exerccios tericos:

1)e; 4)c; 7)c; 10)b; 13)a; 16)b; 19)e; 22)d; 25)a; 2)c; 5)e; 8)e; 11)d; 14)d; 17)d; 20)d; 23)c; 26)b; 3)e; 6)e; 9) c; 12) e; 15)c; 18)e; 21)e; 24)c; 27)e
I200 HTML COMPLETO
Referncias para consultas

http://www.ora.com
Um excelente livro sobre a linguagem HTML. Ensina desde o bsico at as tcnicas usadas na linguagem HTML.
182
Adendo
I200 HTML COMPLETO

http://www.killersites.com
Um guia clssico do bom design na Web. David Siegel mostra neste livro como fazer e d dicas especiais para criar bons sites.
183
Adendo
I200 HTML COMPLETO

http://www.htmlgoodies.com
184
Adendo
I200 HTML COMPLETO

Homepage: Usabilidade - 50 Websites Desconstrudos (Editora
Campus).
Excelente referncia sobre usabilidade e desenho de interfaces uteis.

185
Adendo
I200 HTML COMPLETO

http://www.clipart.com
186
Adendo
I200 HTML COMPLETO

http://javascript.internet.com/
187
Adendo
I200 HTML COMPLETO
ndice de tags
I200 HTML COMPLETO
Estrutura bsica de uma pgina <HTML> <HEAD> <TITLE>Ttulo do documento</TITLE> </HEAD> <BODY> Corpo do documento... </BODY> </HTML>
<A> e </A> Usado para definir um link. Atributos : HREF Exemplos de Links : 1. Para dentro da prpria pgina O local destino precisa ter um "nome". Este "nome" definido da seguinte forma: <A HREF="#NomeDesejado"> Link para NomeDesejado </A> . . <A NAME="NomeDesejado"> 2. Para outras pginas de um mesmo SITE <A HREF="carros.html"> Link para carros </A> Nesse caso, assumiu-se que o arquivo carros.html estava localizado no mesmo diretrio da pgina que o referencia. Caso o arquivo carros.html esteja em outro diretrio, pode-se utilizar a "URL relativa" pgina de destino, como a seguir:
Define que sua rea de influncia um link.
I200 HTML COMPLETO
<A HREF="/lojas/automoveis/carros.html"> Link para carros </A> Pode-se, ainda, referenciar uma pgina utilizando-se a navegao em diretrios, semelhante ao que se faz no DOS, lanando mo do operador "..", como no exemplo: Se na pgina http://www.infnet.com.br/job/job.html existir um link que aponta para o endereo http://www.infnet.com.br/biblioteca/livros.html, este pode ser representado da seguinte maneira: <A HREF="../biblioteca/livros.html"> Visite nossa biblioteca </A> 3. Links para outras Home-Pages Deve-se usar a URL completa da pgina destino, como a seguir: <A HREF="http://infnet.com.br/exemplos/teste.html"> Link para teste </A> 4. Link para envio de email: "mailto:" Existe um tipo especial de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado for "mailto:" ao invs de "http://", o link abrir uma janela especial para que o usurio possa enviar um e-mail para um endereo especfico. Veja o exemplo a seguir: <A HREF="mailto:info@infnet.com.br"> Informaes Gerais sobre a Infnet </A> do INFNET. <APPLET> e </APPLET> Insere um applet Java em uma pgina HTML. Atributos : CODEBASE CODE
Localizao do cdigo Java. Se omitido, assume a URL do documento Nome da applet (.class), que ser includa na pgina HTML.
I200 HTML COMPLETO
WIDTH HEIGHT
Largura em pixels da applet na pgina. Altura em pixels da applet na pgina.
Exemplo: <APPLET CODEBASE="." CODE="minhaapplet.class" WIDTH="300" HEIGHT="100"> </APPLET> <B> e </B> Indica que o texto deve ser apresentado em negrito. Atributos : No possui Exemplo: <B> Texto </B> <BASEFONT> Determina o tamanho base de fonte para uma pgina. Atributos : SIZE Indica o tamanho da fonte. Exemplo : <BASEFONT SIZE=5> <BGSOUND> Reproduz um determinado som em background, isto , enquanto o usurio utiliza a pgina. O som somente iniciado quando o seu download concludo. Isto difere este tag de produtos como o Real Audio, que reproduz o som na medida em que o arquivo correspondente chega ao browser. Este tag s funciona no Internet Explorer. Atributos : SRC
Indica qual o arquivo de udio a ser reproduzido. Podem ser utilizados os formatos .wav, .au e .mid.
I200 HTML COMPLETO
LOOP
Indica quantas vezes o som ser repetido. O valor default 1. Os valores infinite e 1 indicam que o som deve ser repetido indefinidamente.
Exemplo: <BGSOUND SRC="som.wav" LOOP="2"> <BODY> e </BODY> Deve englobar toda a parte fsica do documento, isto , o que deve ser exibido pelo Browser. Atributos : BACKGROUND Define uma imagem que ser utilizada como fundo da pgina. Caso a imagem tenha um tamanho inferior ao da pgina ela ser repetida diversas vezes de forma a cobrir todo o fundo do documento. BGCOLOR Define a cor de fundo da pgina. TEXT Define a cor do texto da pgina. LINK Define a cor dos links ainda no visitados. VLINK Define a cor dos links j visitados nos ltimos X dias, onde X um valor definido pelo usurio em seu browser. ALINK Define a cor dos links no instante em que so clicados pelo usurio. BGPROPERTIES Deve ter o valor fixed. Indica que o fundo da pgina fixo, isto , no rola junto com o contedo da pgina. (Internet Explorer) LEFTMARGIN Especifica uma quantidade de espao (em pixels) a ser deixada como margem esquerda do documento. (Internet Explorer) TOPMARGIN Especifica uma quantidade de espao (em pixels) a ser deixada como margem superior do documento. (Internet Explorer) Exemplo : <BODY BACKGROUND="fig.gif" TEXT="blue"> demais tags HTML, textos, imagens etc. </BODY>
I200 HTML COMPLETO
<BR> Passa para a prxima linha. Atributos : CLEAR
Usado para posicionar parte do texto ao redor de um imagem e o restante do texto abaixo da imagem, usando-se, a palavra ALL.
Exemplo : Texto na primeira linha <BR> Texto na segunda linha <DD> Defnio do termo criado no tag <DT>. O comando </DD> opcional. Atributos : No possui Exemplo : <DL> <DT>Browser</DT> <DD>Programa que permite visualizar pginas HTML na Internet.</DD> <DT>ICQ</DT> <DD>Programa usado para troca de mensagens, envio de arquivos e bate-papo pela Internet.</DD> <DT>FAQ</DT> <DD>Frequently Asked Questions ( Perguntas Mais Freqentes). Documento que rene resposta as perguntas feitas com mais freqncia pelos usurios.</DD> <DT>HTML</DT> <DD>Linguagem de marcao utilizada para criar pginas em hipertexto na Internet.</DD>
I200 HTML COMPLETO
Seria exibido a seguinte lista: Browser Programa que permite visualizar pginas HTML na Internet. ICQ Programa usado para traca de mensagens, envio de arquivos e bate-papo pela internet. FAQ Frequently Asked Questions ( Perguntas Mais Frequentes). Documento que rene resposta as perguntas feitas com mais frequencia pelos usurios. HTML Linguagem de marcao utilizada para criar pginas em hipertexto na Internet. <DIV> e </DIV> Indica que o texto influenciado um diviso, e possui portanto um alinhamento prprio. utilizado no lugar do tag <P>, quando se deseja modificar o alinhamento sem, no entanto, inserir-se um espao vertical em branco. Atributos : ALIGN Indica se a diviso ser alinhada a esquerda (padro), centralizada, a direita ou justificada, usando-se, respectivamente, as palavras LEFT, CENTER, RIGHT e JUSTIFY. Exemplo : <DIV ALIGN=CENTER> Texto que ser exibido nesta diviso </DIV>
I200 HTML COMPLETO
<DL> e </DL> Demarca o incio e o final de uma lista de definies. So muito teis para estruturas do tipo "dicionrio", onde um termo citado e ento explicado. Este tag deve ser usado em conjunto com os tags <DT> e <DL>. Atributos : No possui Exemplo : Ver exemplo completo no tag <DD>. <DT> Identifica o termo a ser definido. O comando </DT> opcional. Atributos : No possui Exemplo : Ver exemplo completo no tag <DD>.
<EMBED> Reproduz um determinado som em backgroundno Netscape Navigator. Atributos : SRC AUTOSTART
Define o arquivo de som Colocando este atributo com o valor TRUE, o som comea a tocar automaticamente quando a pgina carregada. O default FALSE. LOOP Marcando como TRUE, o som tocar continuamente, at que o boto de Stop seja apertado ou que o usurio v a outra pgina. Se for usado um valor inteiro, o som repete o nmero de vezes indicado por este valor inteiro. STARTTIME Use o atributo STARTTIME to para designar onde, no som, voc deseja que o som comece a tocar. ENDTIME Anlogo ao anterior, marcando onde, no som voc quer que ele pare de ser tocado. VOLUME Representa um percentual do volume.
I200 HTML COMPLETO
Este atributo usado para designar o tamanho (largura) em que o Console aparecer na tela. Para CONSOLE e SMALLCONSOLE, o valor default WIDTH=144. Para VOLUMELEVER, o valor default WIDTH=74. Para um boto, o default WIDTH=37. HEIGHT Este atributo designa a altura do console. Para CONSOLE, o valor default HEIGHT=60. Para SMALLCONSOLE, o valor default HEIGHT=15. Para VOLUMELEVER, o default HEIGHT=20. Para um boto, o valor default HEIGHT=22. ALIGN Este similar ao do tag <IMG>, dizendo como o texto que segue ao redor dos controles deve ser alinhado. Os valores podem ser :TOP, BOTTOM, CENTER, BASELINE, LEFT, RIGHT, TEXTTO, MIDDLE, ABSMIDDLE ou ABSBOTTOM CONTROLS Este atributo define qual tipo de controle o designer quer utilizar. O default CONSOLE. Os valores podem ser :CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON ou VOLUMELEVER. HIDDEN Se este atributo for utilizado, com o valor de TRUE, o som ir funcionar como um background, sem quaisquer controles aparecendo. WIDTH Exemplo: <EMBED SRC="mysound.aif" HEIGHT=22 WIDTH=37 CONTROLS=PLAYBUTTON NAME="Meu Console" > <EMBED SRC="meusom.wav" HIDDEN="TRUE">
I200 HTML COMPLETO
<FONT> e </FONT> Usado para determinar o tipo, tamanho e cor de uma fonte. Atributos : SIZE Indica qual o tamanho de fonte que deve ser usado dentro de sua rea de influncia. FACE Determina a fonte (tipo de letra) a ser utilizada. Como valor deve ter uma lista de nomes de fontes separados por virgula. COLOR Indica qual a cor da fonte dentro de sua rea de influncia. Exemplo : <FONT FACE="courier new" SIZE="5"> Este exemplo tem a Fonte Courier New </FONT> <FONT FACE="arial" SIZE="5" COLOR="red"> Este exemplo tem a Fonte Arial em vermelho </FONT> <FORM> e </FORM> Indica a existncia de um formulrio, isto , um local da pgina utilizado pelo usurio para enviar informaes para um local predeterminado (usualmente um script CGI). Atributos : ACTION Indica a localizao (URL) do script que ir receber e interpretar os dados enviados pelo formulrio. METHOD Indica o formato no qual os dados sero enviados. Pode assumir os valores GET ou POST. Exemplo: <FORM ACTION="/cgi-in/script" METHOD="POST">
I200 HTML COMPLETO
<FRAME> Define o contedo de cada frame do documento. Atributos : SRC Associa uma URL frame. NAME Associa um valor (nome) janela. MARGINWIDTH Especifica o valor da margem direita/esquerda da frame. Caso seja impossvel para o browser seguir o valor determinado, este ignorado. MARGINHEIGHT Especifica o valor da margem superior/inferior da frame. Caso seja impossvel para o browser seguir o valor determinado, este ignorado. SCROLLING Define a presena, ausncia ou atribuio automtica pelo browser das barras de rolagem. Pode ser YES, NO ou AUTO. NORESIZE Impede que o usurio mude o tamanho da frame. Exemplo: <FRAMESET SCROLLING="yes" COLS="25%, 50%, *"> <FRAME NAME="frm1" SRC="contents.htm" NORESIZE> <FRAME NAME="frm2" SRC="info.htm" MARGINWIDTH="10"> <FRAME NAME="frm3" SCROLLING="no" SRC="graphic.htm"> </FRAMESET>
<FRAMESET> e </FRAMESET> Contm os elementos FRAME, NOFRAMES e outros FRAMESETs, que podem ser aninhados para que se tenha divises dentro de uma diviso de layout. Atributos : COLS
Divide a janela (ou frame) em diversas frames verticais, tantas quantas forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros.
I200 HTML COMPLETO
FRAMEBORDER Indica se ser exibida uma borda 3D para as frames, ou se as frames no aparecero destacadas por uma borda. O parmetro pode assumir os valores 1 (default, indica a exibio de borda) ou 0 (suprime a exibio de borda). FRAMESPACING Cria um espao adicional, em pixels, entre as frames. ROWS Divide a janela (ou frame) em diversas frames horizontais, tantas quantos forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros.
Exemplo: <FRAMESET SCROLLING="yes" COLS="25%, 50%, *"> <FRAME SRC="contents.htm"> <FRAME SRC="info.htm"> <FRAME SRC="graphic.htm"> </FRAMESET>
<Hn> e </Hn> Indica que o texto influenciado um header (cabealho). Os cabealhos tm seis nveis de importncia, sendo o nvel 1 o mais importante e o nvel 6 o menos importante. Atributos : ALIGN
Indica se o cabealho ser alinhado a esquerda (padro), centralizado ou a direita, usando-se, respectivamente, as palavras LEFT, CENTER e RIGHT.
Exemplo : <H1> Infnet </H1> <H3 ALIGN="CENTER"> Infnet </H3> <H6 ALIGN="LEFT"> Infnet </H6>
I200 HTML COMPLETO
<HEAD> e </HEAD> Contm o cabealho do documento com diversas informaes lgicas, isto , que no fazem parte do corpo do documento e portanto no sero exibidas diretamente. Atributos : No possui Exemplo: <HEAD> tags HTML permitidas </HEAD>
<HR> Insere uma linha horizontal na pgina Atributos: ALIGN Indica se a linha ser alinhada esquerda, centralizada (padro) ou direita, usando-se, respectivamente, as palavras LEFT, CENTER e RIGHT. SIZE Indica a espessura da linha, em pixels. WIDTH Indica o comprimento da linha, em pixels ou em porcentagem da largura da janela do browser (utilizando-se o smbolo % aps o atributo, como no exemplo ao lado). COLOR Define a cor da linha horizontal. NOSHADE Se presente, indica que a linha deve ser plana, isto , o efeito tridimensional usualmente alcanado com o uso da sombra no deve ser utilizado. Exemplo: <HR ALIGN="RIGHT" SIZE="5" WIDTH="30" NOSHADE> <HR ALIGN="CENTER" WIDTH="70%" COLOR="BLUE">
I200 HTML COMPLETO
<HTML> e </HTML> Indica que o documento presente um documento HTML. Deve englobar todos os demais tags. Atributos : No possui Exemplo : <HTML> demais tags HTML, textos, imagens etc. </HTML>
<I> e </I> Indica que o texto deve ser apresentado em itlico. Atributos : No possui Exemplo: <I> Texto </I> <IMG> Este tag exibe uma imagem na pgina. Atributos : SRC Obrigatrio, indica a URL da imagem a ser exibida. Podem ser usadas URL absolutas ou relativas. ALT Indica um texto associado imagem. Quando a imagem no puder ser exibida, o texto exibido em seu lugar. Este texto tambm exibido quando o cursor fica parado sobre a imagem. ALIGN Determina o alinhamento da imagem em relao ao texto existente na mesma linha. Os valores vlidos so TOP, MIDDLE, BOTTOM, LEFT e RIGHT. WIDTH Determina a largura, em pixels, da imagem. HEIGHT Determina a altura, em pixels, da imagem.
I200 HTML COMPLETO
BORDER Determina a largura da borda, em pixels. HSPACE Determina a quantidade de espao deixado em branco aos lados da imagem, de forma que ela no fique demasiadamente prxima dos outros elementos da pgina. VSPACE Determina a quantidade de espao deixado em branco acima e abaixo da imagem. USEMAP Indica que a imagem um mapa sensitivo interpretado localmente. DYNSRC(*) Determina qual o vdeo ou ambiente VRML ser exibido. Pode ser usado em conjunto com SRC. Dessa forma, quando o usurio no possuir suporte a vdeo, ver uma imagem esttica em seu lugar. Os vdeos devem estar no formato AVI. LOOP(*) Indica quantas vezes o vdeoclip ser exibido. Se o valor for -1 ou infinite ele ser exibido continuamente. START(*) Pode assumir os valores fileopen (o videoclipe ser exibido assim que a pgina for aberta, o que o default) ou mouseover (o videoclipe ser exibido quando o cursor tocalo). (*) Estes atributos funcionam somente no Inetrnet Explorer. Observaes: 1. Os atributos marcados com (*) funcionam somente no Inetrnet Explorer. 2. Alguns browsers, como o Internet Explorer 3 e 4 e o Netscape Communicator 4, expem o texto presente no atributo ALT quando o cursor toca a imagem. O texto exibido em "bales de texto" ou similares. 3. Os atributos WIDTH e HEIGHT so extremamente importantes. Os browsers, tendo informaes sobre a altura e a largura das imagens, no precisam esperar que elas cheguem por inteiro para continuar a exibio do resto do documento. Alm disso, WIDTH e HEIGHT podem ser usados para distorcer imagens.
I200 HTML COMPLETO
4. Pode-se usar o atributo BORDER para se retirar a borda de um link (quando, claro, este for uma imagem). No entanto, deve-se tomar cuidado para no confundir o usurio, pois este poder no perceber que a imagem tambm um link! Exemplo : <IMG SRC="/imagens/logo.gif" ALT="Logotipo do INFNET" ALING="top" WIDTH="100" HEIGHT="80" BORDER="2"> <IMG SRC="/imagens/logo.gif" ALT="Logotipo do INFNET" HSPACE="12" VSPACE="20"> <INPUT> Indica um objeto (campo texto, checkbox etc.) dentro de um formulrio. Deve ser usada dentro da rea de influncia do tag <FORM> Atributos : TYPE Especifica que tipo de objeto deve ser. As opes so: TEXT, PASSWORD, CHECKBOX, HIDDEN, RADIO, BUTTON, SUBMIT, IMAGE e RESET. Indica o nome do objeto. Este nome no ser exibido para o usurio. Ele utilizado pelo script associado ao formulrio para a manipulao de suas informaes. o contedo do objeto. Dependendo do tipe do objeto (ex. caixas de texto) o contedo pode ser manipulado pelo usurio. Indica o nmero de caracteres visveis de um objeto tipo TEXT (caixa de texto). Indica o nmero mximo de caracteres permitido como contedo de um objeto tipo TEXT Determina qual a opo padro (default) para objetos tipo RADIO. Para objetos tipo CHECKBOX, sua presena determina que ele est, como default, assinalado.
NAME
VALUE
SIZE MAXLENGTH CHECKED
I200 HTML COMPLETO
ALIGN
Determina o comportamento dos objetos em relao a textos e imagens presentes na mesma linha. As opes so: TOP, MIDDLE e BOTTOM.
Exemplo: <INPUT <INPUT <INPUT <INPUT
TYPE="TEXT" SIZE="40"> TYPE="TEXT" SIZE="20" NAME="ENDERECO"> TYPE="CHECKBOX" CHECKED> TYPE="SUBMIT" VALUE="CONFIRMAR">
<LI> Demarca os elementos de listas ordenadas e no ordenadas. O tag de fechamento </LI> opcional. Este tag deve ser usado somente dentro da rea de influncia dos tags <UL> e <OL>. Atributos : TYPE Demarca os elementos de listas ordenadas e no ordenadas. VALUE Deve ser usado somente em listas no numeradas. Indica qual o smbolo a ser utilizado para demarcar o elemento Exemplo : <UL TYPE="square"> <LI>Estados Unidos <LI TYPE="circle">Brasil <LI>Itlia </UL> <MARQUEE> O texto ou figura presente na rea de influncia deixa de ser esttico e passa a percorrer horizontalmente a janela do browser (ou sua frame). Este tag s funciona no Internet Explorer. Atributos : ALIGN
Pode assumir os valores TOP, MIDDLE e DOWN. Define o comportamento da MARQUEE em relao ao texto a seu lado.
I200 HTML COMPLETO
Indica o comportamento da MARQUEE. Pode assumir os valores SCROLL (default), SLIDE e ALTERNATE. DIRECTION Define para que direo a MARQUEE deve correr. Pode assumir os valores LEFT (default) e RIGHT. LOOP Define o nmero de vezes que a MARQUEE ir se repetir. O valor INFINITE faz com que a MARQUEE se repita infinitamente. BGCOLOR Indica qual a cor de fundo da MARQUEE BEHAVIOR Exemplo: <MARQUEE ALIGN="TOP" DIRECTION="RIGHT" BGCOLOR="red"> Testando a MARQUEE </MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" LOOP="5"> Sorria!!! </MARQUEE> <META> Envia informaes adicionais para o servidor. usado pelas ferramentas de busca para catalogas as palavras-chave e descrio do contedo da pgina. Atributos : HTTP-EQUIV Nome de um cabealho HTTP, como por exemplo refresh, que usado para recarregar automaticamente uma pgina. NAME Nome da metainformao. Pode conter os valores description ou keywords CONTENT Valor do cadealho. Exemplo : <META NAME="description" CONTENT="Descrio do contedo da pgina"> <META HTTP-EQUIV="refresh" CONTENT="10">
I200 HTML COMPLETO
<NOBR> e </NOBR> Impede que o texto em sua rea de influncia seja quebrado, isto , dividido em mais de uma linha. Atributos : No possui Exemplo : <NOBR> Este texto ser escrito em uma s linha. </NOBR> <NOFRAME> e </NOFRAME> Permite a criao de uma opo de navegao para browsers mais antigos, que no entendem frames. Atributos : No possui Exemplo: <NOFRAME> Seu Browser no possui suporte a frames. </NOFRAME> <OL> e </OL> Indica o incio e o final de uma lista ordenada (numerada). Atributos : START Especifica o nmero do primeiro elemento da lista. TYPE Define o tipo de numerao empregada na lista. Pode assumir os valores 1, I, i, A ou a. Exemplo : <OL START="3" TYPE="I"> <LI>Introduo <LI>Conceitos Bsicos <LI>Conceitos Avanados </OL>
I200 HTML COMPLETO
Resultado do Exemplo acima: III. Introduo IV. Conceitos Bsicos V. Conceitos Avanados <OPTION> Deve ser usado dentro da rea de influncia de SELECT. Define as diversas opes disponveis ao usurio. Atributos : VALUE SELECTED
Define o valor da opo, que ser enviado ao script correspondente caso esta seja selecionada. Determina que a opo ser selecionada como default.
Exemplo : <SELECT NAME="lista" SIZE="1"> <OPTION SELECTED>CAVALO <OPTION>ELEFANTE <OPTION>COELHO </SELECT> <P> e </P> Indica que o texto influenciado um pargrafo, e possui portanto um alinhamento prprio. Os browsers, habitualmente, deixam um espao vertical em branco de cerca de um linha antes de cada pargrafo. Atributos: ALIGN Indica se a linha ser alinhada esquerda, centralizada (padro) ou direita, usando-se, respectivamente, as palavras LEFT, CENTER e RIGHT.
I200 HTML COMPLETO
Exemplo: <P ALIGN=CENTER> Este o texto que ser exibido neste pargrafo. </P> <PARAM> Permite passar parmetros para a applet. tag usada somente na rea de influncia do tag <APPLET>. Atributos : NAME VALUE Nome do parmetro Valor do parmetro.
Exemplo: <APPLET CODEBASE="." CODE="minhaapplet.class" WIDTH="300" HEIGHT="100"> <PARAM NAME="cor" VALUE="vermelho"> <PARAM NAME="velocidade" VALUE="4"> </APPLET> <PRE> e </PRE> Usualmente o browser ignora os espaos em branco e as quebras de linha existentes no documento fonte, formatando o texto de acordo com o tamanho de sua janela. Com a utilizao deste tag os espaos e as quebras de linha so honradas. Atributos : No possui Exemplo : <PRE> Este exemplo ser exibido da mesma maneira em que foi escrito </PRE>
I200 HTML COMPLETO
<S> e </S> Indica que o texto deve ser apresentado com um trao cortando- Atributos: No possui Exemplo: Texto <S>cortado</S>
<SELECT> e </SELECT> Permite ao usurio selecionar uma dentre uma lista de opes possveis. As opes so criadas atravs do tag <OPTION>, citado a seguir. Deve ser usada dentro da rea de influncia do tag <FORM> Atributos : NAME
SIZE MULTIPLE
Indica o nome do objeto. Este nome no ser exibido para o usurio. Ele utilizado pelo script associado ao formulrio para a manipulao de suas informaes. Define o nmero de opes que sero exibidas simultaneamente. Se presente, indica que mais de uma opo poder ser escolhida.
Exemplo : Ver exemplo completo no tag <OPTION> <SUB> e </SUB> Indica que o texto deve ser apresentado em subscrito. Atributos: No possui Exemplo: LOG<SUB>10</SUB>8
=> ( LOG108 )
I200 HTML COMPLETO
<SUP> e </SUP> Indica que o texto deve ser apresentado em sobrescrito. Atributos: No possui Exemplo: X<SUB>3</SUB> <TABLE> e </TABLE> Indica o incio e o final de uma determinada tabela. Uma tabela composta por linhas. Atributos : BORDER Se presente, a tabela apresenta bordas. Se for atribudo o valor 0 (zero), no somente a tabela no apresentar bordas, como o espao usualmente reservado para bordas ser liberado, permitindo a confeco de tabelas mais compactas. CELLSPACING Indica quanto espao, em pixels, deve ser inserido entre as clulas da tabela. CELLPADDING Indica quanto espao, em pixels, deve ser inserido entre as bordas das clulas e seu contedo. WIDTH Indica a largura da tabela. Usa-se como medida o nmero de pixels desejado ou uma porcentagem da largura do documento. ALIGN Indica a posio da tabela no documento. Pode assumir os valores "LEFT" ou "RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do documento, e com o texto fluindo sua volta. BACKGROUND Especifica uma imagem que ser utilizada como background da tabela. A imagem ser "tiled", isto , repetida de forma a cobrir todo o fundo da tabela. HSPACE Define uma margem, em pixels, dos lados da tabela, de forma que ela mantenha distncia dos outros elementos da pgina. => ( X3 )
I200 HTML COMPLETO
VSPACE Define uma margem, em pixels, acima e abaixo da tabela, de forma que ela mantenha distncia dos outros elementos da pgina. Exemplo: <TABLE BORDER="0" WIDTH="200" ALIGN="LEFT"> <TR> <TD> Alfa </TD> <TD> Beta </TD> </TR> </TABLE>
<TEXTAREA> e </TEXTAREA> Proporciona ao usurio espao para a digitao de mltiplas linhas de texto. Deve ser usada dentro da rea de influncia do tag <FORM> Atributos : NAME
ROWS COLS
Indica o nome do objeto. Este nome no ser exibido para o usurio. Ele utilizado pelo script associado ao formulrio para a manipulao de suas informaes. Indica o nmero de linha que a rea de texto deve possuir. Indica o nmero de colunas que a rea de texto deve possuir.
Exemplo: <TEXTAREA NAME="COMENTARIOS" Escreva aqui seus comentrios </TEXTAREA>
ROWS="3" COLS="50">
I200 HTML COMPLETO
<TD> e </TD> Indica um elemento (clula) da tabela. Os elementos contm os dados da tabela, sejam eles texto, links, imagens, etc. Atributos : ALIGN Alinhamento horizontal do contedo da clula. Pode assumir os valores LEFT, RIGHT e CENTER. VALIGN Alinhamento vertical do contedo da clula. Pode assumir os valores TOP, MIDDLE, BOTTOM e BASELINE WIDTH Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. HEIGHT Define a altura da clula sempre em pixels. COLSPAN Indica quantas "clulas de largura" (colunas) a respectiva clula deve ocupar. ROWSPAN Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar. BACKGROUND Define o uma imagem como fundo de uma clula. BGCOLOR Define a cor de fundo de uma determinada clula. Exemplo: <TABLE BORDER BGCOLOR=white> <TR> <TD COLSPAN=2 ALIGN=CENTER> Clulas</TD> </TR> <TR> <TD BGCOLOR=red>Esta a clula Alfa</TD> <TD BGCOLOR="#ffeedd">Esta a clula Beta</TD> </TR> </TABLE>
I200 HTML COMPLETO
<TITLE>
</TITLE>
Identifica o ttulo da pgina que exibido no topo da janela do browser. Atributos : No possui Exemplo: <TITLE>Ttulo explicativo da pgina</TITLE>
<TR> e </TR> Indica o incio e o final de uma determinada linha da tabela. Uma linha composta de elementos. Atributos : ALIGN Alinhamento horizontal do contedo da clula. Pode assumir os valores LEFT, RIGHT e CENTER. VALIGN Alinhamento vertical do contedo da clula. Pode assumir os valores TOP, MIDDLE, BOTTOM e BASELINE BGCOLOR Define a cor de fundo de uma linha da tabela. Exemplo: <TABLE BORDER="0" WIDTH="200" ALIGN="LEFT"> <TR ALIGN="left" BGCOLOR="red"> <TD> Alfa </TD> <TD> Beta </TD> </TR> </TABLE>
I200 HTML COMPLETO
<U> e </U> Indica que o texto deve ser apresentado sublinhado. Atributos : No possui Exemplo : Texto que ser <U>sublinhado</U>
<UL> e </UL> Indica o incio e o final de uma lista no numerada. Atributos : TYPE
Indica qual o smbolo deve ser usado para demarcar cada elemento da lista. Pode ter os valores disc, circle ou square.
Exemplo : <UL TYPE="square"> <LI> Item 1 <LI> Item 2 </UL>
I200 HTML COMPLETO
Caracteres Especiais e Acentuao Caracter Entidade Caracter Entidade Numrica < > " < > À Á Â Ã Ç É Ê Í Ó Ô Õ Ú à á â ã ç é ê í ñ ó ô õ ú " < > À Á Â Ã Ç É Ê Í Ó Ô Õ Ú à á â ã ç é ê í ñ ó ô õ ú Descrio
Tabulao Horizontal Espao no ignorvel Aspas Menor Que Maior Que A c/ crase A c/ acento agudo A c/ acento circunflexo A c/ til C cedilha (maisculo) E c/ acento agudo E c/ acento circunflexo I c/ acento agudo O c/ acento agudo O c/ acento circunflexo O c/ til U c/ acento agudo a c/ crase a c/ acento agudo a c/ acento circunflexo a c/ til c cedilha (minsculo) e c/ acento agudo e c/ acento circunflexo i c/ acento agudo n c/ til o c/ acento agudo o c/ acento circunflexo o c/ til u c/ acento agudo
I200 HTML COMPLETO
Tabela de Cores em Hexadecimal Cor gua-marinha gua-marinha Mdia Amarelo Amarelo Esverdeado Azul Azul Cadete Azul Claro Azul Claro II Azul da Meia-Noite Azul da Meia-Noite II Azul do Cu Azul Enriquecido Azul Escuro Azul Flor Azul Mdio Azul Mdio Azul Metlico Azul Naval Azul Neon Branco Bronze Bronze II Cqui Cu de Vero Chocolate Chocolate II Ciano Cinza Cinza Cinza Claro Hexa 70DB93 32CD99 FFFF00 93DB70 0000FF 5F9F9F C0D9D9 8F8FBD 2F2F4F 00009C 3299CC 5959AB 6B238E 42426F 3232CD 7F00FF 236B8E 23238E 4D4DFF FFFFFF 8C7853 A67D3D 9F9F5F 38B0DE 5C3317 6B4226 00FFFF 545454 C0C0C0 A8A8A8 Cor Madeira Mdia Magenta Marrom Marrom Escuro Marrom Muito Escuro Orqudea Orqudea Escura Orqudea Mdia Ouro Ouro Brilhante Ouro II Ouro II Mdio Ouro Velho Prata Preto Quartzo Rosa Rosa Antigo 856363 Rosa II Rosa Neon Roxo Escuro871F78 Salmo Turquesa Turquesa Escura Turquesa Mdio Verde Verde Amarelado Verde Caador Verde do Mar Verde Escuro Hexa A68064 FF00FF A62A2A 5C4033 5C4033 DB70DB 9932CD 9370DB CD7F32 D9D919 DBDB70 EAEAAE CFB53B E6E8FA 000000 D9D9F3 BC8F8F FF1CAE FF6EC7 6F4242 ADEAEA 7093DB 70DBDB 00FF00 99CC32 215E21 238E68 2F4F2F
I200 HTML COMPLETO
Tabela de Cores em Hexadecimal Cor Cinza Escuro Cinza Muito Claro Cobre Cobre Cobre Esverdeado Cobre Frio Cobre Verde Escuro Cor de Pele Cor de Pele Escura Cor de Pele II Coral Laranja Laranja Madeira Clara Madeira Escura Hexa 2F4F4F CDCDCD B5A642 B87333 527F76 D98719 4A766E DB9370 97694F EBC79E FF7F00 E47833 FF7F00 E9C2A6 855E42 Cor Verde Floresta Verde Floresta Mdio Verde Limo Verde Mar Mdio Verde Oliva Escuro Verde Plido8FBC8F Verde Primavera Verde Primavera Mdio Vermelho Vermelho Alaranjado Vermelho Indiano Vermelho Violeta Vermelho Violeta Violeta Violeta Azulado Hexa 238E23 6B8E23 32CD32 426F42 4F4F2F 00FF7F 7FFF00 FF0000 FF2400 4E2F2F DB7093 CC3299 4F2F4F 9F5F9F
I200 HTML COMPLETO
E-mail: info@infnet.com.br Site: http://www.infnet.com.br Tel: +55 21 2122-8800
218
v. 05.1

Apostila HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila HTML

Uploaded by

Copyright:

Available Formats

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Um curso Infnet utilizando a metodologia NETLEARN.

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Sobre o Instituto Infnet

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

REFERNCIAS ESTUDO DE CASOS

BLOCO DE CONSTRUO DO APRENDIZADO

BLOCO DE CONSTRUO DO APRENDIZADO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos

1.1 O Formato do HTML

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

LIFO (Last In First Out)

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Necessitam, assim de tags especficas

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Alguns comportamentos do HTML

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

Tempo aproximado: Tempo aproximado: X horas, X Minutos X horas, X Minutos

1.2 Os tags bsicos I

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

I200 HTML COMPLETO

TODOS OS DIREITOS SO RESERVADOS PELO INSTITUTO DE FORMAO INTERNET

Caracteres em branco Infnet Infnet Acentuao acentuação Automatizao