HTML

Conceitos
Internet
Internet uma interconexo de diversas
redes atravs de linhas de alta capacidade.
Intranet uma internet interna.

O acesso a ela normalmente se restringe a funcionrios. As informaes disponveis na intranet so informaes corporativas.
Extranet um grupo de intranets interconectadas. As empresa que fazem negcios entre si podem formar extranets para compartilhar determindos tipos de informao
Como Nasceu ? Internet
Em 1969, a ARPA, do departamento de defesa dos EUA, construiu uma rede experimental de computadores chamada ARPAnet. A ARPAnet uniu pesquisadores, militares e universitrios, permitindo que os recursos de seus computadores sossem compartilhados. A rede tambm permitiu que se fizesse pesquisa militares nas universidades e que os militares se comunicassem, tanto entre si como com outros, via e-mail. Vrias empresa contruiram redes semelhantes a ARPAnet e se conectaram a ela. Com o grande trfego ela foi dividida em militar e civil. cont.
Como Nasceu ? Internet
Com a diviso em militar e civil ela se chamava NSFnet, e em 1987 passou a se chamar Internet.
Perguntas : O que uma Intranet ?
O que uma Extranet ?
O que Internet ?
Caso voc esteje trabalhando em uma intranet em uma empresa poder ter acesso a Internet ?
Pginas para Web
O que Web ? A Web um conjunto de documentos acessveis por meio da Internet. Esse documento ( ou pginas Web ) contm uma tecnologia chamada hipertexto. Onde voc poder percorrer partes do documento e outros documentos atravs de pontes chamadas de links. Podemos descrever a Word Wide Web como um sistema de informao em hipertexto, grficos, distribudo, independente de plataforma, dinmico interativo e global, utilizado na internet.
Pginas para Web

O que Home Page , Pgina Web, Site e Apresentao Web ? Home Page a primeira pgina de uma apresentao. Pgina Web um elemento especfico de uma apresentao da Web que est contido em uma estrutura. Apresentao da Web um conjunto de pginas Web estruturada sobre um determinado contedo. Site o local onde ficam armazenada estas apresentaes. O Site hospedado por computadores conectados permanentemente a Internet e recebem o nome de Host
Pginas para Web

Quais os tipos de acesso ? Acesso Indireto : um acesso atravs de um servio on-line, como UOL SBT On-line etc. Acesso discado : A conexo feita atravs de um modem. Acesso Permanente : Funciona por meio de uma rede de uma empresa. Neste caso, a rede conectada diretamente Internete pelo gateway.
Como criar uma

pgina Web ?
Como composta uma pgina Web ? Ela composta de textos e comandos especiais (tags) de HTML, um acrnimo de Hypertext Markup Language. Essa linguagem bastante simples e tem como finalidade bsica formatar o texto exibido e criar ligaes entre pginas de Web, criando assim documentos com o conceito de hipertexto. Para que serve o Browse ou Navegador ? Ele l o contedo do arquivo, interpreta os comandos e exibe sua pgina. preciso estar conectado para visualizar a pgina que criei ? No, o browser funcionar independente de se estar conectado a Internet. A melhor forma de se trabalhar desenvolvendo uma pgina HTML off-line
Como criar uma

pgina Web ?
O que Servidor Web ? Para exibir na Web e navegar por elas, voc precisar apenas de um navegador da Web. Para divulgar na Web, voc precisar na maioria dos casos, de um servidor Web. Perguntas : O que um browser ? E um editor HTML ? O que Site ? O que Home Page ? O que Pgina Web ? O que Servidor Web ?
Organizao e
Navegao?
O que pretende divulgar ? Que tipo de contedo voc pode apresentar na Web ? Informaes pessoais; Hobbies ou interesses especiais; Publicaes; Lojas on-line; Educao on-line; etc. Estabelea seus objetivos ! Voc deve ser perguntar o que seus leitores procuram ? O que deseja realizar com sua apresentao ? Eles lero a pgina inteira ou apenas uma parte dela ? O que eu que colocar em minha pgina? Como ser estruturada ? Ela esta adequada ou no ao meu pblico alvo ?
Organizao e
Navegao?
Divida seu contedo em tpicos Crie uma lista com os pricipais tpicos, a princpio no importa a ordem. Esta uma forma de comear a se organizar. Organizao e Navegao Aqui descreverei algumas das estruturas e navegao e suas caractersticas e ainda consideraes importantes como : Os tipos de informaes que se adaptam a cada estrutura. como os leitores conseguem se deslocar pelo contedo como ter certeza de que os leitores conseguem se localizar nos seus documentos e achar o caminho de volta at uma posio conhecida.
Formas de
Hierarquias
Organizao
Na estrutura hierarquicas, a home page fornece uma viso geral do contedo que est subordinado a ela e ainda define os principais vnculos s pginas dos nveis inferiores da hierarquia Linear
Estruturas Lineares so utilizadas para apresentar, no ambiente on-line . Exemplo : Intrues passo-passo Treinamento baseado em computador
Formas de
Estrutura Linear com Alternativas
Organizao
uma estrutura menos rgida permitindo que o leitor se desvie do caminho principal Combinao das Estruturas Linear e Hierrquica
Na estrutura Linear e hierrquica cada pgina do roteiro voc deve oferecer vnculos para o leitor anvaar, retroceder, retornar ao incio e subir um nvel. Exemplo : FAQ ( Frequently Asked Questions )
Formas de
O STORYBOARD
Organizao
um conceito emprestado do cinema, em que cada cena e cada tomada de cmera esboada na ordem em que ocorre no filme. O uso de storyboard, consiste no processo de criao de um resumo com sketh (rascunho) de aparncia final do seu trabalho antes de voc efetivamente pr em prtica suas idias. DICAS PARA SEU STORYBOARD 1. Defina bem a forma de navegao entre as pginas. Se houver formas alternativas, torne a navegao para os leitores a mais intuitiva possvel. 2. Tome cuidado com o que ser incluindo na home page, lembre-se, ela ser a porta da sua apresentao. 3. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.
Formas de
Organizao
DIAGRAMAO
Esta palavra vem do mundo dos impresso que a organizao do seu contedo. Exemplo: Imagem , textos e vdeo etc. Deve ser observado o tamanho das fontes, disposio das imagens, forma como o texto ser apresentado, etc. Uma boa diagramao tambm garante o retorno do internauta.
Formas de
Organizao
EXERCCIOS 1. Por que to importante, antes de comear a construir uma apresentao Web, definir objetivos e tpicos? O que mais necessrio? 2. Descreva cada forma de organizao, faa uma observao sobre o que voc compreendeu de cada uma. 3. O que storyboard e qual a sua utilidade? 4. Em que casos aconselhvel usar o storyboard? 5. Vamos comear a planejar sua Home Page pessoal. Pense no que gostaria de colocar em suas pginas, se haver links para outras partes da mesma pgina e os links para outras pginas, quais os tpicos abordados, etc. Faa um storyboard da sua apresentao web.
Projeto de
WEB DESIGN E VISO DO PROJETO
Web
A maioria das pessoas associam Design unicamente ao projeto grfico de um WebSite, o que um erro. O conceito de Web Design envolve todos os aspectos da construo de um site, desde o desenho de sua estrutura de navegao e forma de disponibilizao da informao at o desenvolvimento do projeto grfico. CONTEDO E FORMA O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar? Estas perguntas devem sempre estar na cabea das pessoas de uma equipe de construo de sites. A primeira muito relaciona-se ao pblico alvo. A segunda pergunta certamente envolvem dois pontos: O1 o contedo. o elemento central. O 2 ponto o design do site (estrutura de navegao e projeto grfico).
Projeto de
Web
EQUIPE PARA CONSTRUO DE UM WEBSITE a) Analistas de sistemas (com experincia em gerncia de Informao), responsvel pela organizao da informao; b) Design Grfico, responsvel pelo projeto grfico; c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript, CGI, etc; d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Grfico (ilustradores, digitadores, etc.). A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de forma eficiente, dentro de um cronograma aproveitando o mximo de cada profissional. Depois do site construdo surgir uma outra pessoa: o WebMaster, que ser responsvel pela administrao do site. muito haver o acmulo de funes por membros da equipe. Mas importante definir o papel de cada na construo do site.
Conceitos de
HTML
A HTML uma linguagem de marcao. Criar um documento em uma linguagem de marcao significa que voc comea com o texto da sua pgina e inclui tags especiais no incio e no final de determinadas palavras ou pargrafos. As tags indicam as diversas partes da pgina e produzem diferentes efeitos no navegador. Os arquivos recebem a extenso .html A primeira pgina a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do provedor que hospeda a pgina. As tags normalmente so especificadas em pares, delimitando um texto que sofrer algum tipo de formatao. As tags so identificadas por estarem entre os sinais < > e < / >.
Conceitos de
HTML
Entre os sinais < > so especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando-se a barra de diviso /, indicando que a tag est finalizando a marcao de um texto. O formato genrico de uma tag : <nome da tag> texto</nome da tag> Mas algumas tags no possuem finalizao. Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando interpretados pelo browser. Assim como outras linguagens, a HTML possui uma estrutura bsica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir alguns comandos bsicos que sempre devero estar presentes.
Conceitos de
HTML
Alguns browsers at dispensam seu uso, porm melhor assumir como parte fundamental do programa tais comandos. Um programa HTML possui trs partes bsicas, a estrutura principal, o cabealho e o corpo do programa. Todo programa deve iniciar com o comando, tag, <html> e ser encerrado com o comando </html>. Esse par de comandos essencial. A rea de cabealho opcional e delimitada pelo par de comandos <head> e </head>. Estes comandos para cabealho so usados para especificar alguns poucos comandos da linguagem. Eles so opcionais, ou seja, um programa HTML pode funcionar sem eles. Mas conveniente us-los, pois o ttulo da pgina acrescentado atravs deles.E ainda temos as tags <Title> e </Title>, estes comandos delimitam o texto que ir aparecer na barra de ttulo do browser.
Conceitos de
HTML
A maioria dos comandos ser especificado no corpo do programa que delimitado pelas tags <body> e </body>. um comando obrigatrio. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
<HTML> </HTML> Esta tag marca incio/fim do programa HTML <HEAD> </HEAD> Esta tag marca incio e fim de cabealho <TITLE> </TITLE> Esta tag delimita o texto que ir ser visualizado na barra de ttulo do browser. <BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do comando sero colocados
Principais Elementos
de uma pgina
HTML
LINK um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra regio da pgina atual ou uma pgina localizada em qualquer lugar da Internet. Uma figura tambm pode ser usada como um link, ou seja, clicando na figura saltamos para outro local. CABEALHO So linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabealho. TTULO O ttulo de uma pgina web indica qual o assunto abordado e ir aparecer na barra de ttulo do browser. Este ttulo utilizado por programas de lista (hotlist) do seu navegador e tambm por outros programas que catalogam pginas da Internet. Para atribuir um ttulo a pgina voc dever utilizar a tag: <Title> </Title>. Esta tag sempre ser includa no cabealho (entre as tags <Head> </Head> e descrevem a mesma).
de uma pgina
HTML
CABEALHOS Os cabealhos so usados para dividir sees do texto, como captulos de um livro. A HTML divide seis tamanhos de cabealhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolvem, uma linha antes e depois e alm disso do um efeito de negrito. O maior tamanho o H1 e o menor o H6.
<H1> Texto </H1> Experimente o seguinte cdigo: <html> <head><title>Cabealhos</title></head> <body> <h1>C</h1> <h2>A</h2> <h3>B</h3> <h4>E</h4> <h5></h5> <h6>A</h6> <h5>L</h5> <h4>H</h4> <h3>O</h3> <h2>S</h2> </body> </html>
de uma pgina
HTML
Vejamos um exemplo de outro cdigo em HTML: <html> <head><b> A FORMAO DE UM WEBMASTER </b></HEAD> <body> <p> A formao de um <i>Webmaster</i> envolve diversos tipos de conhecimentos.<br> Afinal, ele ser o responsvel pela administrao de um site. </body> </html> Em nosso exemplo introduzi mais algumas tags. Os comandos: <B> </B> Aplica o estilo negrito ao texto <I> </I> Aplica o estilo itlico ao texto. <P> </P> Inicia um novo pargrafo. <BR> Faz uma quebra de linha.
de uma pgina
HTML
PARGRAFOS Para forar o incio de um novo pargrafo, ou seja, avanar uma linha em branco e iniciar o texto na Segunda linha aps o final do pargrafo anterior, deve ser usado o comando <p>. Esse comando pode aparecer individualmente ou em par: <p> </p>. Quando um comando <p> inserido em um local do programa, o browser ir sempre avanar uma linha em branco, posiciona-se na linha seguinte ao comando <p>. QUEBRA DE LINHA O comando <br> faz uma espcie de quebra de linha. Este comando inseri uma linha em branco no seu local ou na linha seguinte qual ele foi inserido, caso esteja no meio de uma linha e no em seu final. A funo deste comando avanar para a linha imediatamente aps aquela em que ele ocorre.
de uma pgina
HTML
EXERCCIOS 1. Qual a extenso de um arquivo de um programa em HTML? 2. A primeira pgina de um site geralmente recebe que nome? 3. Escreva a estrutura bsica de um programa HTML. 4. Quais os principais elementos exibidos em uma home page? 5. O que um link? 6. Qual as funo das tags abaixo: a) <HTML> </HTML> b) <HEAD> </HEAD> c) <TITLE> </TITLE> d) <H2> </H2> e) <BODY> </BODY> f) <B> </B> g) <I> </I> h) <P> i) <BR>
de uma pgina
HTML
EXERCCIOS 7. Utilize o que voc j aprendeu nesta seo e crie seu primeira pgina HTML. Use a linguagem HTML e faa uma pgina falando das suas expectativas para este curso, como pretende usar o conhecimento que est adquirindo e quais outros cursos que pretende fazer. Seu texto deve ter no mximo 5 linhas. Salve na unidade A: com o nome de projetos.html. 8. Faa um pgina utilizando os comandos que voc j conhece para falar sobre uma pessoa. Pode ser algum que voc admire, do seu crculo de amigos, ou uma pessoa pblica (ator, atriz, etc). Seu texto deve ter no mximo 5 linhas. Salve na unidade A: com o nome de Pessoa admirvel.html.
de uma pgina
HTML
TAGS DE FORMATAO Assim como em um editor de texto, em HTML voc poder utilizar efeitos em seu texto. Como j percebeu os comandos, tags, trabalham em continer. STRONG <strong>texto</strong> Similar ao negrito TYPERWRITER <tt>texto</tt> Deixa o texto com espaamento regular BIG <big>texto</big> Aumenta a fonte e aplica negrito SMALL <small>texto</small> Reduz e altera a fonte SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo BLINK <blink>texto</blink> Faz com que o texto pisque NEGRITO <b>texto</b> Aplica o estilo negrito ITLICO <I>texto</I> Aplica o estilo itlico SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns browsers esta tag no funciona)
de uma pgina
HTML
ESTILO LGICO As tags deste tipo indicam como o texto destacado deve ser utilizado e no como ser apresentado. Este estilo no indica como o texto ser formatado e sim como ser utilizado no documento. No possvel garantir que um texto destacado que utilize tags deste tipo sempre ser apresentado em negrito ou itlico, por exemplo. Depender do browser. Algumas tags de estilo lgico utilizadas em HTML padro: <EM> Indica que os caracteres devero ser enfatizados de alguma forma. De forma diferente do restante do texto. Geralmente em itlico <STRONG> Esta tag enfatiza ainda mais que a anterior. Em negrito. <CODE> Esta tag indica um cdigo de exemplo a ser exposto. <SAMP> Esta tag indica texto de exemplo. Quando voc quer dar um exemplo de endereo para a Internet sem criar link.
de uma pgina
HTML
ESTILOS FSICOS Este estilo de tag realmente altera a formatao do texto, no estilo anterior voc no possui garantia que o texto ir ser visualizado da forma que planejou. Neste estilo ele ser visualizado da forma que atribuir as tags a ele. Algumas tags de estilo fsico para HTML padro: <B> </B> coloca o texto em negrito <I> </I> coloca o texto em itlico <TT> </TT> fonte de mquina de escrever com espaamento uniforme. <u> </u> coloca o texto sublinhado <S> </S> coloca o texto tachado <BIG> </BIG> o texto ir aparecer maior que o restante ao redor <SMALL> </SMALL> o texto ir aparecer menor que o restante ao redor <SUB> </SUB> coloca o texto subscrito <SUP> </SUP> coloca o texto sobrescrito
de uma pgina
HTML
TEXTO PR-FORMATADO O texto de uma arquivo em HTML formatado atravs das tags. Mas voc possui a opo da tag <PRE> </PRE> para estabelecer uma formatao atravs de um editor de texto e que esta formatao permanea na sua pgina html. O texto pr-formatado excelente para apresentar cdigofonte com seus espaamentos adequados. Este recurso pode ser utilizado para criar tabelas mas no recomendvel. Uma observao importante que, ao usar tags de estilo ou vnculo, no tags de elemento, neste espao elas iro funcionar normalmente. SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE>
de uma pgina
HTML
CITAES E COMENTRIOS A tag <BLOCKQUOTE> utilizada na criao de citaes longas que no devem ser aninhadas em pargrafos. A tag <CITE> destaca citaes curtas. Um exemplo: <BLOCKQUOTE> "O mercado de webdesign um dos segmentos de design com maior potencial de crescimento para os prximos anos. Estima-se um crescimento de no mnimo 50% ao ano at 2005. E, na corrida rumo a esse novo eldorado, as agncias de propaganda mais uma vez largaram na frente dos escritrios de design, investindo primeiro em estruturas especializadas para atender demanda do mercado (...)". </BLOCKQUOTE> Caso queira fazer comentrios a respeito do seu cdigo HTML apenas como referncia pessoal e no para ser exibido em suas pginas voc dever fazer o comentrio da seguinte forma: <!- -comentrio- - >
de uma pgina
HTML
ENDEREOS Esta tag utilizada para identificar autorias de sua pgina. Geralmente so apresentadas na parte inferior de cada pgina. Mostra quem confeccionou aquela pgina, com quem o leitor deve entrar em contato caso queira ter alguma informao ou fazer alguma observao. Estes endereos so precedidos de um fio <hr>, que ainda veremos, e voc poder utilizar a tag <br> para separar linhas. <ADDRESS> TEXTO</ADDRESS> Vejamos um exemplo: <HR> <address> Mario.Jose@bol.com.br<br> A servio da JML Informtica Ltda - Me<br> ltima atualizao: 12 de Janeiro de 2005<br> Todos os direitos autorais so reservados<br> </address> Esta uma excelente forma de garantir que as pessoas entrem em contato com voc caso necessitem e tambm uma forma de estar melhorando a sua HP (Home Page) atravs de sugestes.
de uma pgina
HTML
A TAG <BLINK> O texto que se encontrar entre estas tags ir aparecer piscando. Dependendo da verso do Netscape, esta tag somente ter efeito sobre o texto se ele estiver sendo visualizado atravs do Netscape, esse efeito ter uma dessas caractersticas: 1. texto ficar piscando em intervalos regulares 2. Um bloco cinza ou branco ficar piscando atrs do texto. Este recurso geralmente utilizado para chamar a ateno do leitor sobre uma determinada parte do texto. O problema do efeito piscando que ele chama ateno excessivamente sobre aquela parte do texto tirando a ateno do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradvel e irritante. Em HTML poderamos coloc-lo como se fosse passar a colher com bastante fora no fundo de uma panela de alumnio. J imaginou?
de uma pgina
HTML
A TAG <BLINK> O texto que se encontrar entre estas tags ir aparecer pis cando. Dependendo da verso do Netscape, esta tag somente ter efeito sobre o texto se ele estiver sendo visualizado atravs do Netscape, esse efeito ter uma dessas caractersticas: 1. texto ficar piscando em intervalos regulares 2. Um bloco cinza ou branco ficar piscando atrs do texto. Este recurso geralmente utilizado para chamar a ateno do leitor sobre uma determinada parte do texto. O problema do efeito piscando que ele chama ateno excessivamente sobre aquela parte do texto tirando a ateno do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradvel e irritante. Em HTML poderamos coloc-lo como se fosse passar a colher com bastante fora no fundo de uma panela de alumnio. J imaginou?
de uma pgina
HTML
EXERCCIOS 1. Os comandos de formatao podem ser combinados para aplicar mais de um efeito ao mesmo tempo? 2. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito: T utorial de HTML
3. Crie uma pgina HTML sobre algo que goste de fazer, e que faa muito bem, e queira ensinar a outras pessoas. Um tutorial usando todas as tags vistas at ento. Utilizando principalmente todos os comandos de formatao. 4. Por que a tag Blink no bem aceita pela maioria dos projetistas de pginas Web? 5. Qual a utilidade da tag de pr-formatao e qual sua sintaxe? 6. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade?
de uma pgina
HTML
FONTE Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto voc utilizar a tag <font> </font> que do tipo continer. Sua sintaxe a seguinte: <font size=" " face=" " color=" "> </font> SIZE O tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vo de 1, o menor, a 7, o maior. O padro 3. Se for especificado um nmero antecedido com o sinal de adio ou subtrao o valor da fonte ser acrescido ou subtrado nesse valor. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2, o texto passar a ser exibido em 7. Se no houver sinal a fonte ser exibida naquele valor.
de uma pgina
HTML
FACE Esse parmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas vrias fontes, de maneira que, se o sistema no possuir uma determinada fonte ele ir utilizar outra. Face="name [,name2[,name3]] Se no forem encontradas as fontes especificadas, ento, o texto ser apresentado na fonte padro. <font face="Agaramond, Arial" size=1>
de uma pgina
HTML
COLOR Este parmetro especifica a cor do texto. Seu valor ser especificado no formato hexadecimal, RGB ou atravs de um nome predefinido de cores. Algumas cores: COR CDIGO COR CDIGO Aqua #70DB93 Blue #0000FF Black #000000 Cyan #00FFFF Fuchsia #FF00FF Gray #C0C0C0 Green #00FF00 Lime #32CD32 Brown #800000 Navy #23238E Olive #808000 Red #FF0000 Silver #E6E8FA Teal #008080 White #FFFFFF Yellow #FFFF00
de uma pgina
HTML
Vamos a um exemplo de cdigo:
<html> <head> </title>Experincia com Fontes</title> </head> <body> <h2>Primeiro exemplo com tipos de fontes</h2> <font face="Agaramond"><p> Este texto ser exibido em Agaramond</font><br> <font face="Tahoma"><p> Este texto ser exibido em Tahoma</font><br> <font face="Arcane"><p> Este texto ser exibido em Aracane</font><br> <p> <h2>Exemplos com tamanhos diferentes de fontes</h2> <font face="Courier" Size=1> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=2> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=3> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=4> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=5> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=6> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=7> Este texto ser exibido em Courier</font><br><p> <p> <h2>Agora iremos usar cores</h2> <font Face="Verdana" size=5 color="#800000"> Este o primeiro texto a ser modificado</font> </body> </html>
de uma pgina
HTML
Vejamos um exemplo: <html> <head> <title>Alinhamento</title> </head> <body> <h1>MACROMEDIA FLASH</H1> <P ALIGN=JUSTIFY> A tecnologia Shockwave Flash, da Macromedia, j est presente na Web h alguns anos, e no ltimo no ganhou um forte impulso com a incluso do plug-in necessrio nos navegadores mais recentes (apartir do Internet Explorer 4 e Netscape Navigator 4.6). Cada vez mais utilizado, este programa j est sendo empregado em sites de grandes empresas. Seu poder se deve a sua grande capacidade multimdia e sua versatilidade. Sua finalidade a criao de imagens vetoriais com animao, som e interatividade.</p> <p align=center> Depois veremos mais sobre o Flash</p> </body> </html>
de uma pgina
HTML
CABEALHO Quanto ao cabealho voc s poder alterar o alinhamento para direita e centralizado, a esquerda alinhamento padro. Exemplo: <h2 align=center>Este um exemplo de cabealho com alinhamento</h2> Vamos ao cdigo-fonte para verificarmos a diferena: <html> <head> <title>Alinhamento de cabealho</title> </head> <body> <h2>Cabealho sem alinhamento especial</h2> Este um exemplo do cabealho sem alinhamento especial. <h2 align=center>Cabealho com alinhamento centralizado</h2> Este um exemplo de cabealho alinhado ao centro. <h2 align=right>Cabealho com alinhamento a direita</h2> Este um exemplo de cabealho alinhado a direita. </body> </html>
de uma pgina
HTML
ALINHAMENTO COM O COMANDO <DIV> A utilizao desta tag uma forma prtica e rpida de alinhar bloco de texto. A abreviatura DIV significa diviso. Ao usar esta tag num bloco de texto voc estar atingindo todas as tags dentro daquele bloco. Suas vantagens sobre o Align que: 1. Precisar ser utilizada apenas uma vez, ao contrrio do atributo Align, que tem de ser includo em diversas tags. 2. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, imagens, tabelas, etc.). O atributo Align encontra-se disponvel apenas em um nmero limitado de tags. Voc dever colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. O atributo align poder ter os valores left, right e center.
de uma pgina
HTML
Sintaxe: <DIV ALIGN=" "> TEXTO e OUTRAS TAGS TEXTO e OUTRAS TAGS </DIV> OBSERVAO: Alm do atributo align=center temos a tag <center> </center> que funciona igualmente ao atributo. Vamos treinar um pouco com este cdigo-fonte: <html> <head> <title>Utilizando a tag DIV para alinhar</title> </head> <body> <h2>JavaScript na World Wide Web</h2> <p align=justify>
de uma pgina
HTML
A World Wide Web iniciou-se como um simples repositrio de informaes, mas cresceu muito alm disso. A medida que a Web desenvolveu-se, as ferramentas tambm desenvolveram-se. Ferramentas simples de marcao como HTML foram unidas por linguagens de programao de verdade. Incluindo <b>JavaScript </b>, que na verdade no uma linguagem de programao mas uma <b>linguagem Script hospedeira</b> de pginas em HTML.<br> <p> <div align=center> <h2>Entendendo a utilidade do JavaScript</h2> Como a HTML uma linguagem apenas de marcao de texto simples, ela no pode responder para o usurio, tomar decises, nem autorizar tarefas repetitivas. Tarefas interativas como essas exigem uma linguagem mais complexa. <h3>Eu precisarei usar JavaScript em todas as minhas pginas</h3> Apenas se quiser aprimor-las e interagir com o usurio. </div> </body> </html>
de uma pgina
HTML
CARACTERES ESPECIAIS H caracteres que no podem ser obtidos por meio do teclado. Eles podem ser inseridos em sua pgina atravs da especificao de um cdigo especial que o browser interpreta e substitui por um caracter especfico. Esses cdigos podem ser obtidos utilizando-se uma nomeclatura definida pela ISO -LATIN - 1 ou a partir de uma entidade HTML. A norma ISO utiliza um cdigo composto pelo caractere & seguido do smbolo # e, ento, de uma combinao numrica com ponto-e-vrgula. J a entidade HTML usa o caractere & seguido de uma palavra que identifica o smbolo com ponto-e-vrgula. Caso voc queira escrever uma pgina HTML em outro idioma ter que usar bastante esses caracteres especiais. Imagine que voc queira fazer uma pgina HTML ensinando a outras pessoas a linguagem HTML. Como faria para explicar uma tag sem que o browser interpretasse como um comando. Ter de utilizar estes smbolos especiais.
de uma pgina
HTML
Vamos a um exemplo: <html> <head> <title>Tutorial em HTML</title> </head> <body> <h2>O comando &ltBR&gt</h2> A finalidade deste comando HTML marcar uma seo do texto como pargrafo inserindo uma quebra de linha.<br> <p> J o comando &ltP&gt para indicar incio de uma novo pargrafo. </body> </html> Observe que para que o browser pudesse mostrar <br> e <p> sem interpretar como comandos usei caracteres especiais &lt para indicar sinal de < e &gt para indicar o sinal de >.
de uma pgina
HTML
Cont. Carecteres Especiais Quando voc utiliza a acentuao comum do teclado nas suas pginas podem at parecer que tudo ir correr tudo bem. Mas algum que visualizar suas pginas em um computador que no tenha as mesmas configuraes de 'vdeo e teclado, alguns caracteres podem no sair da forma desejada. Por exemplo: A palavra caf, se voc utilizar esta palavra com a acentuao do seu teclado, com certeza na visualizao do seu browser ficar perfeita, mas pode ser que em outros computadores com a configurao diferente no aparea da mesma forma. O ideal coloc-la assim: Café ou caé E se desejasse colocar a palavra entre aspas: "Café&quot
de uma pgina
HTML
EXERCCIOS 1- Crie uma pgina HTML utilizando os recursos vistos acima. Use esta pgina para falar da utilidade da Internet na vida de pessoas que no trabalham com informtica, sugestes para aqueles que querem abrir negcios novos envolvendo Internet, sem ser um hacker.
de uma pgina
HTML
LISTAS Vamos colocar assim, h basicamente dois tipos de listas: as ordenadas, que contm uma srie de itens sem numer-los, e as listas ordenadas, que atribuem um nmero para cada elemento da lista. Trabalhar com listas simples. Trabalharemos com os comandos <ul> para listas no ordenadas e <ol> para as listas ordenadas.
1. O COMANDO <UL> Para criar uma lista n o ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O comando que gera a lista no ordenada o comando <UL> (unordered list), que deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do comando <LI> (line list). <UL> <LI> Texto <LI> Texto </UL>
de uma pgina
HTML
LISTAS Cont. 2. O COMANDO <OL> Para criar uma lista bsica no ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O comando que gera a lista no ordenada (ordered list) o comando <OL>, que deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do comando <LI> (Line item). <OL> <LI> Texto <LI> Texto </OL> <UL> <LI> Texto <LI> Texto </UL> OBSERVAO: Na lista no ordenada cada item receber um marcador ("bolinha") e a numerada receber automaticamente nmeros.
de uma pgina
HTML
LISTAS Cont. Voc poder personalizar sua lista ordenada com o atributo TYPE e START. O atributo Type pode assumir cinco valores para definir o tipo de numerao a ser usado na lista. "1" : Especifica que os algarismos arbicos padro devem ser usados para numerar a lista ( 1,2,3,4, ...). "a" : Especifica que as letras minsculas devem ser usadas para numerar a lista (a, b, c, d, etc.) "A" : Especifica que as letras maisculas devem ser usadas para numerar a lista (A, B, C, D, etc.) "i" : Especifica que os algarismos romanos minsculos devem ser usados para numerar a lista ( i, ii, iii, iv, etc.) "I" : Especifica que os algarismos romanos maisculos devem ser usados para numerar a lista ( I, II, III, IV, etc.).
de uma pgina
LISTAS Cont. Exemplo: <p>Ingredientes para bolo</p> <ol> <li>Farinha de Trigo <li>Aucar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> Agora um exemplo com o atributo Type: <p>Ingredientes para bolo</p> <ol type="I"> <li>Farinha de trigo <li>Aucar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> Usando o atributo START voc poder determinar o nmero ou a letra que inicia sua lista. O ponto inicial 1. Usando o Start, voc pudar esse nmero. Um exemplo: <ol Type=a start=3>. Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista apartir de qualquer ponto. Ex.: <UL> <LI> <LI value=10> <LI> </UL>
HTML
de uma pgina
IMAGENS
HTML
Para inserir uma imagem em uma pgina web utilizamos do comando, tag, <img src> e seus atributos. <img src="endereo da imagem no HD"> ex.: <img src="c:\site\imagem.gif"> Poderemos acrescentar a esta imagem os seguintes atributos: Width="valor em pixel" largura da imagem Height="valor em pixel" altura da imagem Align=(left, right ou center) alinhamento da imagem Alt="texto" texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada. Border="valor em pixel" especificao da largura da borda da imagem. Vspace="valor em pixel" para especificar o espao que deve ser deixado acima e abaixo da imagem. Hspace="valor em pixel" especifica o espao que deve ser deixado nas l aterais da imagem. O nico obrigatrio o src.
de uma pgina
Colocando Uma Imagem Como Fundo Da Pgina <body background="endereo da imagem no HD"> ex.: <body background="c:\site\imagem.jpg"> Procure usar imagens simples, com poucas variaes de tons. Para fixar a imagem de fundo <body background="c:\site\imagem.jpg" bgproperties="fixed"> 2- Colocando Uma Cor Como Fundo Da Pgina: <body bgcolor="cor"> Procure no usar cores chamativas. Para que a cor do fundo da sua pgina chame mais ateno que seu contedo. Voc pode criar seus prprios fundos de pgina com programas como o Photoshop e o Corelphoto-paint. Colocando Uma Imagem Como Fundo Da Pgina <body background="endereo da imagem no HD"> ex.: <body background="c:\site\imagem.jpg"> Procure usar imagens simples, com poucas variaes de tons. Para fixar a imagem de fundo <body background="c:\site\imagem.jpg" bgproperties="fixed"> 2- Colocando Uma Cor Como Fundo Da Pgina: <body bgcolor="cor">
HTML
de uma pgina
LINKS E ANCORAS 1- LINKS
HTML
A principal atrao da Internet a criao de documentos com o conceito de hipertexto ,ou seja ,um documento que se vincula a outros documentos por meio de ligaes especiais chamadas links ou hiperlinks.Com esse conceito ,voc pode criar documentos que faam referncias e permitam ao usurio acessar tais referncias no importando se elas esto em outra pgina Web ,no seu micro ou em algum servidor de rede. O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos podem ser rapidamente acessados por meio dos links. Imagine que voc crie uma pgina sobre determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto do documento e depois cria , no incio ,um sumrio indicando os tpicos do documento. Se quiser acessar diretamente o texto de um tpico ,basta dar um clique sobre o item do tpico no sumrio e ele ser imediatamente exibido. Um link reconhecido em uma pgina por estar em cor normalmente diferente do resto do texto e , ao passar com o mouse sobre esse texto o cursor muda para uma mo apontando para o link. Para criar uma link com uma pgina <a href="endereo da pgina">texto que ser o link</a> ex.: <a href="c:\site\casa.html">Minha casa</a> Usando uma imagem como link: Ex.: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>
de uma pgina
LINKS E ANCORAS ncoras
HTML
Uma ncora um ponto de referncia ou endereo que ser acessado por um link. Uma ncora usada dentro do documento para marcar o incio de uma seo do documento. Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem estiver vendo a pgina conseguir se movimentar entre um tpico e outro. Ento faa o seguinte : Nomeie um pedao da sua pgina atravs do tag : <A NAME="NOME "> Texto </A> ( Lembre -se que "NOME" fictcio, voc escolhe o nome) Depois disso escreva o pedao que voc quer associar a esse Nome. Agora crie um link para chegar at esse pedao , usando o tag : <A HREF="#NOME">Clique Aqui</A> Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina , o usurio ir at o pedao que voc nomeou. ATENO : O sinal de cerquilha (#) necessrio para a ncora, pois avisa ao browser para procurar o link no documento atual !!! 3- Linkando Arquivos de Outros Servidores
de uma pgina
HTML
Agora a coisa fica um pouco mais sria . aqui que est toda graa de Internet . Atravs de um esquema de endereamento , a URL , a Internet consegue acessar um arquivo que est em qualquer micro deste planeta desde que esteja conectado adequadamente a Web. Como j vimos , a URL serve para especificar a localizao de pginas e arquivos em diretrios de servidores da Web . Vamos comparar com um esquema que voc usa ( as vezes at sem saber ) para acessar algum arquivo em seu prprio computador . Acessando um arquivo pelo DOS : C: \WINDOWS \SYSTEM \ Lista.TXT Acessando uma pgina pela Web : HTTP : // WWW. ASPMASTERS.CJB.NET Uma URL composta por duas partes principais . A primeira o protocolo Internet do documento , a segunda parte o endereo do servidor e da pgina.
de uma pgina
HTML
A sintaxe disso : PROTOCOLO: //SERVIDOR . INSTITUIO / ARQUIVO Onde : Protocolo o tipo de servidor que est sendo acessado; Servidor o computador que contm a pgina ; Instituio o tipo de instituio a qual esse computador pertence ( Comercial , Internet Publica , Militar etc. ) ; Arquivo o caminho do arquivo. Exemplo : HTTP : // WWW.TIMASTER.COM.BR Esse endereo pode ser especificado diretamente na linha de URL do Browser , para acessar diretamente a pgina INDEX. HTM , ou ento dentro de um link de um documento HTML , atravs do A HREF que cria uma ligao , um link para o URL .
<A HREF = "HTTP : // WWW. TIMASTER.COM.BR "> TIMASTER </A>
de uma pgina
TABELAS
HTML
As tabelas so muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possveis com simples comandos. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usurio possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page. Vamos discutir, nesta parte, quais so os comandos para se criar uma tabela e mostrar alguns exemplos. Claro que voc dever praticar e principalmente planejar a sua tabela, pois sem isso, fica muito difcil de controlar o cdigo HTML da sua home-page. O comando para se inserir uma tabela <TABLE>; para iniciar uma linha devemos introduzir a tag <TR> e para uma clula (alguns preferem dizer coluna) <TD>. Todos estes comandos so encerrados como </TABLE> , </TR> e </TD> respectivamente. Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o cdigo HTML para isso : <HTML> <HEAD> <TITLE>Criando Tabelas</TITLE>
de uma pgina
TABELAS Cont.
HTML
</HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6> TABELA</FONT></CENTER> <BR> <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <! Fecha a primeira linha da tabela> <TR> <! Abre a segunda linha da tabela> <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> <! Encerra a Segunda linha da tabela> </TABLE> <! Encerra a tabela> </BODY> </HTML> Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou. Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do contedo desta tabela.
de uma pgina
TABELAS Cont.
HTML
</HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6> TABELA</FONT></CENTER> <BR> <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <! Fecha a primeira linha da tabela> <TR> <! Abre a segunda linha da tabela> <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> <! Encerra a Segunda linha da tabela> </TABLE> <! Encerra a tabela> </BODY> </HTML> Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou. Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do contedo desta tabela.
de uma pgina
TABELAS Cont.
HTML
Nas clulas da tabela voc pode inserir desde simples frases at figuras inteiras. Parmetros podem ser acrescidos s tabelas, tais como : aumentar ou diminuir a largura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentro da clula etc. Vamos procurar trabalhar com vrios exemplos para visualizarmos melhor o uso destes parmetros. 1-ALTERANDO A LARGURA DA CLULA Para alterar o largura de uma clula da tabela basta acrescentar o parmetro WIDTH dentro da tag <TD>. Exemplo1: <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> O parmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em porcentagem, como mostrado no exemplo a seguir. Tambm dentro da tag <TD> vemos um outro parmetro que VALIGN=MIDDLE, este parmetro tem por funo alinhar o contedo da clula no meio da mesma, ou seja, dentro da clula as frases so alinhadas com relao ao seu centro.
de uma pgina
TABELAS Cont. Exemplo2: <TABLE BORDER=2> <TR> <TD WIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR> 2- INSERINDO COR DE FUNDO E SEPARAO DE CLULAS Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se torna particularmente til quando se quer dar destaque a uma clula em especial. Vejamos um exemplo: <TABLE BORDER=0> <TR> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>
HTML
de uma pgina
TABELAS Cont. Exemplo2: Aqui, vimos que podemos acrescentar cores ao fundo de uma clula, outra coisa que tambm pode ser feita mudar a fonte com os comandos de formatao que voc j conhece, como <FONT COLOR=>, por exemplo. Repare que no exemplo anterior ns colocamos BORDER=0 e as clulas apareceram coloridas, mas com um certo espaamento entre elas, para tirarmos este espao devemos acrescentar dentro da tag <TABLE> o parmetro CELLSPACING=0. Este parmetro elimina por completo os espaos entre as clulas. <TABLE BORDER=0 CELLSPACING=0> <TR> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>
HTML
de uma pgina
TABELAS Cont.
HTML
Outro parmetro que pode ser usado para separar espaos em uma clula CELLPADDING que inclui ou exclui espaos dentro da clula, ou seja, se voc tiver um elemento (frase, texto, figura etc.) dentro da clula voc pode acrescentar espaos por igual nos quatros cantos da clula, fazendo com que seu texto ou figura no fique "grudado" nas paredes da clula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona. Isto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramos na Internet so feito por intermdio de tabelas. Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar o uso de tabelas. 3-UM POUCO MAIS DE TABELAS Agora que voc j est um pouco mais familiarizado com o uso de tabelas e com seus principais atributos, vamos ver como podemos aperfeioar o uso de tabelas. Em seguida descreveremos uma srie de outros atributos e comandos para tabelas: <TH> ... </TH> Esta tag insere um cabealho dentro da clula. Na verdade a nica diferena entre a tag <TH> e a tag <TD> que a <TH> exibe o contedo da clula em negrito.
de uma pgina
TABELAS Cont.
HTML
<CAPTION> ... </CAPTION> Exibe um texto centralizado em relao tabela, como se fosse uma legenda. Exemplo: <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com borda de espessura 1 (border), espao entre as clulas 2 (Cellspacing) e espao dentro da clula 6 (Cellpadding)> <CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela> <TR> <TH>Contedo em negrito</TH> <! Insere o texto na forma de cabealho (negrito)> </TR> <TR> <TH>Contedo em negrito</TH> </TR> </TABLE> Repare neste exemplo, que a legenda j sai centralizada com relao a tabela e repare no espao dentro da clula devido ao comando CELLPADDING.
de uma pgina
TABELAS Cont.
HTML
OS ATRIBUTOS COLSPAN E ROWSPAN Estes atributos so muito importantes dentro da tag <TABLE>. So eles que nos possibilitam remodelar a disposio das clulas dentro da tabela. Vejamos um exemplo prtico: <TABLE BORDER=2 CELLPADDING=2> <TR> <TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR> <TD>CLULA 1</TD> <TD>CLULA 2</TD> </TR> </TABLE> Neste exemplo vemos que na tag <TD> foi introduzido o parmetro COLSPAN. Este parmetro tem a finalidade de dizer que sob a clula onde ele foi introduzido podemos ter um certo nmero de colunas. Logo, se voc quiser que uma clula ocupe uma nica linha, como no nosso exemplo, voc deve inserir o parmetro dentro da tag <TD> desta clula. A quantidade de clulas que viro em baixo da clula que recebeu o atributo COLSPAN deve ser de acordo com o nmero especificado no parmetro.Mas se quisermos definir uma nica clula ocupando uma coluna inteira ?
de uma pgina
TABELAS Cont.
HTML
Neste caso usamos o atributo ROWSPAN. Exemplo: <TABLE BORDER=2 CELLPADDING=2> <TR> <TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD> <TD>CLULA 1</TD></TR><TR> <TD>CLULA 2</TD> </TR> </TABLE> Para melhor utilizar estes parmetros e ver como eles funcionam voc deve fazer a sua prpria tabela, pois somente desta forma voc conseguir fixar o uso destes parmetros. USANDO TABELAS COMO MOLDURAS Um outro uso bastante interessante de tabelas como moldura para alguma figura. Para isto basta voc iniciar uma tabela e definir um valor para BORDER. Exemplo: <TABLE BORDER=5> <TR> <TD> <IMG SRC=NOME DA FIGURA> </TD> </TR> </TABLE>
de uma pgina
TABELAS Cont.
HTML
Claro que voc deve usar com muito bom senso este artifcio da tag <TABLE>, pois nem sempre uma moldura em uma figura defini um bom layout (aparncia) da sua home-page. 6-COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela uma tcnica muito usada. Atravs do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereo e o nome da figura. <TABLE BACKGROUND="POOL.GIF" BORDER=5> <TR> <TD><H1>Que tal um mergulho agora ? </H1></TD> </TR> </TABLE> O atributo RULES Para escolher as linhas internas que sero mostradas dentro da tabela , usamos o atributo RULES , dentro da tag <TABLE> . Os complementos desse atributo so : none : nenhuma linha interna ; rows : para as linhas horizontais entre cada linha da tabela ; cols : para as linhas verticais entre cada coluna da tabela ;
de uma pgina
TABELAS Cont.
HTML
groups : para linhas entre grupos de colunas e sees horizontais , definidas por tags especiais como COLGROUP e THEAD ; all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) . Veja uma tabela com todas as linhas internas ( default ) : <TABLE BORDER RULES=all> Outro exemplo sem as linhas internas : <TABLE BORDER RULES=none> Outro exemplo usando o complemento ROWS: <TABLE BORDER RULES=rows> O ltimo exemplo usar o complemento COLS : <TABLE BORDER RULES=cols> As tabelas so um forte recurso de modelagem das home-pages hoje em dia e para que voc consiga utilizar bem este recuso no deve se limitar somente aos exemplos desta apostila, procure em sites e at mesmos em livros , como por exemplo: "Criando sites arrasadores na Web" (captulo 4) ou "HTML Truques Espertos" (captulo 5). Nessas referncias voc poder encontrar vrios outros exemplos de pginas usando tabelas mais complexas (como por exemplo, uma tabela peridica dos elementos) e claro em laboratrio desenvolvendo sua prpria home-page.
de uma pgina
TABELAS Cont.
HTML
H uma observao importantssima que devemos fazer aqui. Como j vimos antes, alguns comandos HTML no funcionam em um dado navegador, se voc reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0. Voc no reparou nenhuma diferena no uso destes navegadores para nossos exemplos, a questo que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico uso de CELLSPACING e CELLPADDING. Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronizao de seus navegadores. Sendo assim, quando voc construir tabelas deve sempre levar em conta em qual navegador voc dar preferncia para rodar a sua pgina. Por isso nunca demais deixar claro sua home-page em qual navegador ela roda melhor a sua formatao.
de uma pgina
FRAMES
HTML
Frames (quadros) so relativamente usadas na Web. H os que adoram o uso de frames e no admitem que suas home-pages fiquem sem elas, por outro lado h os que abominam o uso de frames, porque julgam que eles "estragam" o layout da home-page. Fazer frames tem o mesmo procedimento que confeco de home-pages simples, a diferena que se deve trocar a tag <BODY> pela tag <FRAMSET> Para termos uma home-page com frames devemos ter trs pginas, uma com o cdigo que contm a tag <FRAMESET> e duas outras com os cdigos onde sero inseridas as pginas de cada frame. Vamos procurar entender melhor. Uma documento HTML simples seria assim : <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> Neste campo entram os comandos em geral </BODY> </HTML>
de uma pgina
FRAMES
HTML
J um documento HTML que teria frames ficaria assim: <HTML> <HEAD> <TITLE>Pgina com Frame </TITLE> </HEAD> <FRAMESET> NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES </FRAMESET> </HTML> Ento o que devemos fazer ? Devemos criar um documento HTML normal e um documento HTML de frames. Vejamos um exemplo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 20% da tela e outra com 80%> <FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2.HTM> </FRAMESET> </HTML>
de uma pgina
FRAMES
HTML
Este o cdigo para gerar os frames (veja a figura) . Agora vamos crias os cdigos para serem inseridos nas duas colunas que criamos. <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A PRIMEIRA PGINA NORMAL </BODY> </HTML> Salve este exemplo como FRAME1.HTM. Por que ? Porque no cdigo que geramos no exemplo de frames chamamos a pgina com o comando <FRAME SRC=FRAME1.HTM>, se voc salvar o nome do cdigo de forma diferente dever alterar tambm o cdigo da pgina de frame. <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A SEGUNDA PGINA NORMAL </BODY> </HTML>
de uma pgina
FRAMES Este cdigo deve ser salvo como FRAME2.HTM, pelo mesmo motivo do cdigo anterior. Sempre lembrando que estas pginas devem estar no mesmo DIRETRIO. Pronto, voc conseguiu fazer a sua primeira pgina com frame. Alem de poder dividir o navegador em colunas com o parmetro COLS dentro da tag <FRAMSET> , voc tambm pode dividir em linhas usando o parmetro ROWS, ou ainda dividindo em colunas e linhas ao mesmo tempo. <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 50% da tela e outra com 50%> <FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2.HTM> </FRAMESET></HTML>
HTML
de uma pgina
FRAMES Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames, como no cdigo abaixo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTM> <FRAME SRC=FRAME1.HTM> </FRAMESET> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTM> <FRAME SRC=FRAME1.HTM> </FRAMESET> </FRAMESET> </HTML> Este cdigo gera a seguinte pgina : J deu para perceber que toda a estrutura de frames depende na verdade da tag <FRAME>. Vejamos alguns dos atributos que podem ser inserido dentro desta tag. 1-PARMETROS DE FRAMES Parmetro SRC da tag <FRAME>
HTML
de uma pgina
FRAMES
HTML
Este parmetro o responsvel por chamar a pgina HTML que deve ser aberta (inserida) dentro de um frame. Em todos os exemplos at agora s usamos arquivos locais para abrir estas pginas em um frame, mas nada impede voc de colocar no lugar uma URL completa. Por exemplo: <FRAME SRC=http://www.yahoo.com> Com este comando voc ser capaz, devidamente conectado, de chamar esta pgina para a seu frame, onde quer que ela esteja na Internet. Parmetro NAME Este um dos principais parmetros da tag <FRAME>. Ele serve, como era de se esperar, para definir o nome do frame. Ele deve ser usado em conjunto com outro parmetro que o TARGET. Parmetro MARGINWIDTH Define a margem entre as laterais do frame e seu contedo. Exemplo: <FRAME SRC=FRAME1.HTM MARGINWIDTH=100> Este comando cria uma margem de 100 pixels de cada lado do frame. Parmetro MARGINHEIGHT
de uma pgina
FRAMES
HTML
Este parmetro o responsvel por chamar a pgina HTML que deve ser aberta (inserida) dentro de um frame. Em todos os exemplos at agora s usamos arquivos locais para abrir estas pginas em um frame, mas nada impede voc de colocar no lugar uma URL completa. Por exemplo: <FRAME SRC=http://www.yahoo.com> Com este comando voc ser capaz, devidamente conectado, de chamar esta pgina para a seu frame, onde quer que ela esteja na Internet. Parmetro NAME Este um dos principais parmetros da tag <FRAME>. Ele serve, como era de se esperar, para definir o nome do frame. Ele deve ser usado em conjunto com outro parmetro que o TARGET. Parmetro MARGINWIDTH Define a margem entre as laterais do frame e seu contedo. Exemplo: <FRAME SRC=FRAME1.HTM MARGINWIDTH=100> Este comando cria uma margem de 100 pixels de cada lado do frame.
de uma pgina
FRAMES Parmetro MARGINHEIGHT Da mesma forma que MARGINWIDTH, este parmetro define uma distncia de margem, que neste caso a margem superior e inferior do frame. Exemplo: <FRAME SRC=FRAME1.HTM MARGINHEIGHT=100> D um espao de 100 pixels entre as margens superior e inferior do frame. Parmetro SCROLLING Define se o frame ter ou no barras de rolagem. Por default quando o contedo de uma pgina excede o tamanho do frame as barras de rolagem so acrescentadas automaticamente. Os valores vlidos para SCROLLING so YES, NO e AUTO. Exemplo: <FRAME SRC=FRAME1.HTM SCROLLING=YES> Parmetro TARGET Este o mais importante de todos os parmetros. Ele trabalha em conjunto com NAME e permite que coloquemos um link em um frame e o resultado, ou seja, a pgina linkada, aparece em outro frame.
HTML
de uma pgina
FRAMES
HTML
<A HREF=http:\\www.amazon.com TARGET=TESTE>Livraria Amazon</A> <BR> < A HREF=http:\\www.yahoo.com TARGET=TESTE> Pesquisador YAHOO</A> <BR> <A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A> </BODY> </HTML> FRAME2.HTM <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <BODY> <CENTER><H2>Os links ao lado devero aparecer neste lado do Navegador</H2></CENTER> <BR> <CENTER> <FONT SIZE=4>Este frame o que foi nomeado como TESTE com o parmetro NAME em Frame.HTM</FONT> </CENTER> </BODY> </HTML>
de uma pgina
FRAMES
HTML
Se tudo funcionar convenientemente voc dever visualizar sua pgina como abaixo, mas claro que os links que no so locais funcionaro somente se voc estiver conectado. 2-Criando um frame Inline
Se voc quiser misturar texto , figuras e um frame em uma mesma pgina voc precisa criar um frame inline. Para isso , utilize a tag <IFRAME SRC=" nome do frame "> . Voc pode usar os complementos NAME - para especificar um nome que identifica qual frame est em uso ; WIDTH e HEIGTH para definir o espao na pgina utilizado pelo Frame ; ALIGN ( LEFT ou RIGHT ) - para alinhar o frame na pgina. Lembre-se de fechar a tag </IFRAME>. Voc tambm pode usar os atributos normais da tag frame , como o FRAMEBORDER , SCROLLING etc. <html> <body> <center><h1>Exemplo do comando IFRAME </h1></center> <hr> <iframe width=90% height=70% src="pag2.htm"> </iframe> </center> Aqui continua a pgina normal ! </body> </html>

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Conceitos

Intranet uma internet interna.

Como Nasceu ? Internet

Como Nasceu ? Internet

Perguntas : O que uma Intranet ?

O que uma Extranet ?

Pginas para Web

Pginas para Web

Pginas para Web

Como criar uma

Como criar uma

<A HREF = "HTTP : // WWW. TIMASTER.COM.BR "> TIMASTER </A>

Você também pode gostar