Sobre. Dedicatória. A quem serve esta apostila. Estruturação. HTML Avançado

Tamanho: px
Começar a partir da página:

Download "Sobre. Dedicatória. A quem serve esta apostila. Estruturação. HTML Avançado"

Transcrição

1

2 Sobre Essa apostila foi criada e desenvolvida por Alexandre Zannella Gorian ( utilizando como referências bibliográficas o livro HTML Avançado do autor Ramalho (editora Makron Books), a matéria Cascading Style Sheets do autor Paulo Cândido (publicada no site do provedor Terra, no canal Estiloweb, pelo endereço a apostila Manual JavaScript do autor Luís Carlos de Andrade Rodrigues ( e no guia de referência a Java Scripts da Netscape (www.netscape.com). Apostila criada para aula de HTML Avançado, introdução à CSS e à Java Script, é de livre distribuição, reservando ao autor os direitos autorais. Dedicatória Os agradecimentos são direcionados para Eric Loque Xavier, para os webdesigners Jovani Aguiar Lage e Rodrigo Marçal da Silva e Silva pela força nas matérias, para minha namorada Giselle Shunck Vieira e meus pais, pela compreensão dos esforços desprendidos e para todos que acreditam que a Internet é um meio onde a transferência de informações deva ser de forma gratuita. A quem serve esta apostila Esta apostila foi desenvolvida para pessoas leigas em codificação HTML, CSS e Java Script, tendo um linguajar simples e de fácil compreensão no início, e aumentando o grau técnico no decorrer dos capítulos, uma vez que os tópicos compreendidos nos primeiros capítulos não são repetidos ou explicados com tantos detalhes nos capítulos seguintes. Pessoas com algum conhecimento de HTML, CSS e Java Script e/ou de ferramentas de desenvolvimento de páginas HTML podem usar esta apostila como um guia de referência de objetos, tags, atributos, eventos, e outras características presentes nessas linguagens. Estruturação Esta apostila está dividida basicamente em três partes e em três apêndices. A primeira parte é reservada para o ensinamento do HTML avançado, como todas suas tags, os atributos mais usados e outros detalhes que são úteis para construção de sites. A segunda parte é dedicada à folhas de estilo. Foi abordada a versão 1 desse recurso, por ser a mais utilizada. A terceira parte é uma introdução à linguagem Java Script, tendo em seu conteúdo instruções básicas para entendimento dessa linguagem. 2

3 Primeira Parte HTML Tudo começa aqui 3

4 1. Introdução 1.1. Breve histórico A Internet surgiu em 1969, na Arpanet (advanced research projects agency). A idéia inicial era criar uma rede de pacotes para conectar centros de pesquisas e processamentos geograficamente distantes. Pela sua arquitetura, os dados poderiam chegar a seu destino por vários caminhos ou nós da rede. Dessa forma seria possível os computadores do exército se comunicarem com os da universidade, por exemplo. Em 1970 foram implementados os switches de pacote, foi padronizado o TCP/IP e logo a seguir foram implementados os roteadores nos nós da rede. Com o surgimento do correio eletrônico e da WWW na década de 80, a Internet se populariza, tornando o acesso disponível tanto para grandes corporações quanto para usuários residenciais. O acesso à Internet é feito principalmente através de modems (o que a torna extremamente lenta) e de canais dedicados. Novas tecnologias (como o radio e TV à cabo) começam a aparecer, embora com preços ainda elevados. Com o desenvolvimento de novas tecnologias de programação Web, dá-se início à uma nova febre : o e-commerce. Movimentando na base de bilhões de dólares por ano, as empresas chamadas de.com conseguiram um rápido e lucrativo crescimento de vendas, uma vez que pessoas do mundo todo podem ter acesso a elas sem custo adicional. Devido ao sucesso da Internet e seu baixo custo, surgiram dois novos termos no mercado: a Intranet e a Extranet. A Intranet se caracteriza por um servidor Web e várias estações de trabalho, dentro de uma empresa. Com funcionamento parecido com a Internet comum, cada máquina cliente acessa o servidor em busca de dados, o servidor envia o código à máquina correspondente e esta o processa. A diferença para a Extranet é que esta pode ser acessada também fora da rede da empresa, ou quando se tem duas Intranets se comunicando. É como se fosse uma Internet limitada à quem pode ter acesso, e sendo disponível apenas as páginas da empresa Funcionamento O funcionamento se divide basicamente em dois tipos de programas: o cliente e o servidor. O cliente é quem interpreta as páginas. O servidor, por S sua vez, fica encarregado de hospedá-la e, com as novas tecnologias (como o Cold Fusion e o ASP), do processamento da informação solicitada pelo cliente, entregando para esse o código HTML pronto. 4

5 Figura 1.1 Relacionamento cliente-servidor Web A informação na Web é gravada no formato de páginas, que podem conter textos, hipertextos, sons, imagens, vídeos e até programas. O código dessa página é chamado de HTML, o que, erroneamente é chamado por alguns de linguagem de programação. Na verdade ela é uma linguagem de marcação, ou em outras palavras, uma linguagem a nível de interface. A linguagem de programação utilizada pode se dar através de Scripts (JavaScript, VBScript), de applets (Java), de ActiveX, ou outros tipos recentes de programação para Web. A transferência de dados entre o servidor e o cliente se dá através do protocolo TCP/IP. O tipo de transferência é feito principalmente através do protocolo HTTP embora seja muito utilizado também o FTP e, em menos escala, o Gopher, o telnet, o Wais, dentre outros Navegador Navegador é o programa que recebe o código do servidor e o transforma em algo interpretável pelo usuário. Geralmente gratuitos, existem em várias tipos, dentre eles: Microsoft Internet Explorer: navegador que vem sendo muito utilizado, principalmente por já vir instalado no Windows 98 e no Tem como principal característica uma interface amigável e de fácil utilização. Outra característica é a interpretação de estilos, o que permite se fazer um site mais elaborado sem precisar colocar muitas figuras, além da interpretação de VBScripts. Como ponto fraco destaca-se a baixa segurança (principalmente na parte de ). Programa gratuito. Netscape: presente na forma de Communicator e Navigator (este trás apenas o navegador), é muito utilizado no exterior. Apresenta uma interface de fácil utilização e um programa de também muito bom. Ponto forte no desenvolvimento de JavaScripts, e no gerenciamento de perfis de usuários. Deixa um pouco a desejar no desenvolvimento de estilos e na linguagem VBScript. Outra característica é que ele lê a tabela completa para depois mostrá-la na tela, o que acarreta um carregamento mais rápido que o Internet Explorer. NCSA Mosaic: navegador que foi base para os demais navegadores. Não foi atualizado depois da versão 3.0, uma pena. Existem outros tipos de navegadores, como o Opera, que geralmente são programas que devem ser pagos para a utilização autorizada URL (Uniform Resource Locator) É o endereço do servidor, o diretório e o arquivo correspondente à página ou site. Por exemplo: 5

6 Onde: é o tipo de protocolo utilizado; www indica que é um site (ou página) da World Wide Web. O uso vem caindo, uma vez que é mais fácil a não utilização desse nome. Por exemplo: terra.com.br é o domínio do servidor, por trás dele existe o endereço IP; /estiloweb é o diretório dentro do servidor. Pode ser criado um domínio para esse diretório, como por exemplo estiloweb.com.br; index.htm é o nome da página que será aberta. Note que não é necessário digitar o pois o navegador o trás automaticamente. No caso do Internet Explorer 5.0, ele detecta se é ftp ou http também. A maioria dos servidores trás a página principal sem a necessidade da digitação da mesma, como por exemplo onde o navegador adiciona o na frente e o servidor já mostra a página index.htm automaticamente. 6

7 2. Formato de uma página Uma página Web não é nada mais do que um simples documento texto, com marcações de tipos de texto, figura, sons, etc. Sendo assim, de qualquer computador com um simples editor de texto pode sair uma página das mais belas possíveis. Vai depender mais da criatividade e do domínio sobre um programa de edição gráfica do que propriamente uma ferramenta de desenvolvimento (mas é claro que ajuda, e muito). Uma página pode apresentar-se de formas diferentes dependendo do navegador, uma vez que fica a cargo deste complilá-la. Por isso, cuidado com a formatação e com os recursos utilizados, é normal uma página ficar boa no Explorer e um desastre no Netscape ou um recurso utilizado no Netscape não funcionar no Explorer. Exemplo de uma página: <HEAD> <TITLE> Minha primeira página </TITLE> </HEAD> <BODY> <H1> Titulo 1 </H1> <P>Aqui se localiza um texto <P><H2>Titulo 2 </H2> <P> Essa é uma pequena demonstração de uma p&eacute simples. <br> Com certeza você deve ter notado algo diferente nela... mas não se preocupe, você saberá o que significam. Veremos agora:<p> <UL> <LI> o que são tags; <LI> formato básico de uma Home-Page. <LI> Técnicas de programação úteis; </UL> <P><HR> <P align= Center > Abraços </BODY> </HTML> O resultado apresentado por um navegador seria o seguinte: 7

8 Figura 1.2 Página apresentada pelo navegador Procure não utilizar acentuação no seu texto, uma vez que, dependendo da linguagem do navegador do usuário, pode não aparecer aquele caracter desejado, e sim outro interpretável. Para evitar isso, utilize a tabela de códigos (veja Apêndice A) Tags São marcações de identificação de algo que existe na página. São escritas entre os sinais de menor (<) e maior (>), e o fechamento dessas tags se dão através da barra (/). Por exemplo, a tag que identifica o título 1 no documento se escreve <H1> e, para identificar onde o título termina é colocada a tag </H1>. A tag pode ser escrita com letra maiúscula ou minúscula, e pode-se colocar tags dentro de campos que por sua vez estão em outra tag. Um exemplo prático: dentro de uma tabela, coloca-se linhas e colunas, fecha-se as colunas e linhas e depois a tabela. Caso seja digitada uma tag inexistente, o navegador irá ignorá-la, sem apresentar ao usuário. Nos próximos capítulos serão apresentadas e explicadas as tags existentes Formato básico de uma página HTML Como dito anteriormente, as páginas da Web são arquivos textos com as marcações próprias da linguagem, a única diferença é que ao invés de arquivo.txt, as páginas são normalmente salvas como.html ou.htm. Os novos navegadores permitem que a página seja salva com extensões diferentes, mas não é recomenda a utilização que não sejam as duas primeiras. 8

9 Toda pagina HTML começa com a tag e termina com </HTML>, o que fará com que o navegador saiba que se trata de um documento HTML e não de outro tipo de arquivo. Logo após a tag, coloca-se a tag <HEAD> (cabeçalho), onde conterá informações da página, como título, descrição, conteúdo e outros assuntos. Essas informações não serão apresentadas ao usuário (com exceção do título). Terminado o cabeçalho, inicia-se o corpo da página, que conterá o conteúdo apresentável da página. O corpo é aberto com <BODY> e fechado com </BODY>. A estrutura básica de uma página seria: <HEAD> <TITLE>Aqui se insere o título da página </TITLE> aqui são colocados estilos, scripts, conteúdo, etc. </HEAD> <BODY> Aqui se insere o conteúdo da página (textos, tags, etc.). </BODY> </HTML> 2.3. Técnicas básicas de programação Para facilitar a confecção e manutenção de uma página, é importante seguir algumas normas básicas, que poderiam chamar até de bom senso, por exemplo: manter cada código em sua linha respectiva. Por exemplo: o que será exibido em várias linhas ou células, coloque também em várias linhas no código. Assim, quando tiver que localizar algo no código, essa localização se dará de uma forma mais fácil; coloque as tags em início ou final de frase, assim fica bem mais fácil de localizá-las; respeite a indentação do texto, ou seja, coloque as tags que tiverem dentro de outra em níveis mais a direita, assim fica mais fácil saber onde começa e onde termina essas tags (ou códigos); coloque comentários no texto, assim numa atualização futura você saberá o que aquilo quer dizer. 9

10 3. Parágrafos e Quebras de Linha Uma página HTML nem sempre sai da forma que se digita em seu código, para isso deve-se colocar tags especiais indicando onde começa um novo parágrafo ou uma nova linha Quebra de linha Para iniciar uma nova linha, dentro de um mesmo parágrafo, usa-se a tag <BR>. Por ser uma tag de inicialização de nova linha, não existe fechamento Parágrafos Para iniciar um novo parágrafo basta adicionar a tag <P> e digitar o texto. A maioria dos editores HTML colocam o fechamento dessa tag, mas o mesmo não é necessário (exceto quando se quer separar o parágrafo inferior). A diferença para a quebra de linha é que um novo parágrafo possui um espaçamento diferente. Ex.: <HEAD> <TITLE>Exemplo de Parágrafos</TITLE> </HEAD> <BODY> Primeiro parágrafo; <P> segundo parágrafo;<br> segunda linha do segundo parágrafo;</p> <P> terceiro parágrafo. </BODY> Note que independentemente do número de tags <P> utilizadas antes de um novo parágrafo, será um novo parágrafo apenas o que contiver caracteres. Para evitar-se isso, usa-se espaçamento em branco. Ex.: <HEAD> <TITLE>Exemplo de Parágrafos</TITLE> </HEAD> <BODY> Primeiro parágrafo; <P><P><P><P> segundo parágrafo;<br> segunda linha do segundo parágrafo;</p> <P> <P> <P> terceiro parágrafo. </BODY> Atributos Atributos de uma tag são propriedades que permitem a modificação de certas características. Esses atributos são colocados dentro da tag de abertura. Estão listadas abaixo alguns atributos comuns aos navegadores Internet Explorer e Netscape, mas além dessas podem existir outras menos usadas. 10

11 <html> Align: permite o alinhamento do parágrafo. Pode ser left para alinhamento esquerdo, center para central e right para direito. A partir dos navegadores de versão 4.0 começou a ser usada também a justify, para alinhamento justificado. O padrão de alinhamento é esquerdo. Id: indica uma identificação para o parágrafo. Esse nome pode ser usado como referência para futuras modificações via scripts ou CSS, por exemplo. <head> <title>formatação de parágrafo</title> </head> <body> <p align="center">centralizado <p align="right">direito <p align="justify"> Justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado </body> </html> Resultado: 11

12 Figura 3.1 Formatação de parágrafos Além de atributos existem eventos, como o OnClick, que são ações empregadas geralmente pelo usuário. Esse e outros eventos serão vistos no capítulo de JavaScript Linha horizontal Pode-se separar trecho dentro de uma mesma página através da tag <HR> Atributos Apesar de ser de redimensionamento automático, pode-se usar atributos especiais para uma melhor adequação às necessidades do site. Width: define o comprimento da linha. Pode ser especificado em pixels ou através de porcentagem da tela. Size: define a altura. Especificado em pixels; Color: define a cor a ser usada; Align: define o alinhamento. Pode ser center (padrão), right ou left. Ex.: <HEAD> <TITLE>Exemplos de linhas horizontais</title> </HEAD> <BODY> Régua normal: <HR> Colorida, alinhamento direito: <HR align= right width= 300 color= BLUE > Alexandre Outra Zannella forma: Gorian <HR align= left width= 50% size=10> 12 </BODY>

13 Apresentação no browser: 3.4. Centralização Figura 3.2 Linhas horizontais Uma outra forma de centralização de parágrafos é a utilização da tag <center> com seu devido fechamento. Ela é usada na maioria dos casos, por ser mais simples e de fácil localização. 13

14 4. Tipos de Fonte Não existiria graça nas páginas se existisse apenas letras pretas de mesmo tamanho e tipo de fonte. Para evitar essa monotonia e melhorar a qualidade visual é que existem recursos como cabeçalhos, tipos de fonte, textos pré formatados, etc Cabeçalhos Os cabeçalhos (ou headings) são linhas com caracteres diferenciados do restante do texto, usados geralmente para separar tópicos, títulos ou coisas afins, necessitando a especificação de onde termina. A tag utilizada é <Hn> onde n é um número inteiro que varia entre 1 e 6. Apesar dessa abrangência, são geralmente utilizadas a <H1>, <H2> e poucas vezes <H3>, as demais são tão pequenas que caíram em desuso. Como atributos, podemos citar mais uma vez o align e o title, com as mesmas características do parágrafo Estilos de texto São informações de como o texto deverá ser apresentado (negrito, itálico, etc.). Assim como o cabeçalho, é do tipo liga-desliga, ou seja, deve-se utilizar o fechamento. Tag <B> <I> <EM> <U> <STRONG> <TT> <BIG> <SMALL> <SUP> <SUB> Principais tipos: Função Negrito Itálico Efeito idêntico ao itálico Sublinhado Efeito idêntico ao negrito Espaçamento regular do texto Aumenta a fonte e aplica negrito Diminui o tamanho da fonte Formata o texto como sobrescrito Formata o texto como subscrito Não é recomendado o uso da tag de sublinhado, pois o usuário poderá confundir com um link A tag <FONT> O texto pode receber também uma configuração de tipo de fonte ou cor diferente da padrão, bastando para isso adicionar a tag <FONT> e seus atributos. É exigido o fechamento dessa tag. Como principais atributos podemos citar: 14

15 Color: informa a cor da fonte. Pode ser informada o nome da fonte em inglês ou sua cor no formato RGB hexadecimal; Face: informa o tipo de fonte a ser utilizada. O nome da fonte deve estar escrito igual ao seu nome, para isso, use como auxílio um editor de texto. Podem ser especificadas várias fontes (será selecionada por ordem, ou seja, se o cliente não tiver a primeira, o navegador procura a segunda, e assim por diante), desde que separadas por vírgulas, mas lembre-se: se o cliente não tiver nenhuma dessas fontes, será apresentada a fonte padrão do navegador; Size: especifica o tamanho da fonte em pixels (ex.: 12px ) ou em relação ao resto do texto (ex.: -1 ou 2 o padrão é 3); Lang: apesar de pouco utilizada, esse atributo é pode ser útil quando se quer colocar caracteres de diferentes linguagens num texto (misturar brasileiro br- com japonês ja) Texto pré-formatado Um texto pré-formatado é apresentado na tela na forma que foi escrito em seu código, sem a necessidade de colocar tags de parágrafos ou quebras de linha. A tag utilizada é <PRE>, e é obrigatório o uso do fechamento da tag. <html> <head> <title>alteração de Fontes</title> </head> <body> <H1 align="center">exemplo prático de utilização de fonte</h1> <p align="justify"><font size="26" color="red" face="comic Sans MS, Arial, Times New Roman">A</font>gora iremos mostrar praticamente tudo o que vimos até agora, como a utilização de fontes, cabeçalhos, parágrafos, etc.<br> Após tudo isso, ainda há muita coisa a ser vista, principalmente porque esse é um mercado crescente de atualização. <H2>Agora veremos o campo de pré-formatação</h2> <pre> Aqui você deve tomar muito cuidado, principalmente com espaçamentos e enters, para não ficar uma coisa muito separada da outra.</pre> Se ficar alguma <b>dúvida</b> ou <i>questionamento</i>, entrem em <b><i><u>contato</b></i></u>. </body> </html> A apresentação desse documento se daria dessa maneira: 15

16 Figura 4.1 Formatação de fonte 16

17 5. Listas de Marcadores A criação de listas pode ser útil para organizar o texto em tópicos, para enumerar itens, fazer um sumário ou outras atividades onde há a necessidade de se estruturar o texto. De fácil visualização ao internauta, pode ser usada para, por exemplo, demarcar textos que levam à outras seções no documento ou outras páginas. Esse tipo de tag, apresenta uma estrutura básica, onde se inicia a lista com uma tag mãe, coloca-se os itens através de tags <LI> e, finalmente, fecha-se a tag mãe. É possível também criar listas dentro de outras listas. Basicamente existem dois tipos de listas: as ordenadas e as não ordenadas Listas não ordenadas Lista não ordenadas são aquelas em que os marcadores são simplesmente símbolos, ou seja, o marcador não é numerado. A tag de abertura desse tipo de lista é <UL> (unordered list). Ex.: <HEAD> <TITLE>Exemplo de listas não ordenadas</title> </HEAD> <BODY> <Font size="+2"><b>exemplo de listas não ordenadas</b></font> <p><font size="+1">lista simples:</font> <ul> </ul> <li>tópico 1; <li>tópico 2; <li>tópico 3; <p><font size="+1">lista aninhada:</font> <ul> </ul> </body> </html> <li>tópico 1; <li>tópico 2; <ul> <li>tópico 2.1; <li>tópico 2.2; </ul> <li>tópico 3; A apresentação no browser se daria da seguinte forma: 17

18 Figura 5.1 Listas não ordenadas 5.2. Listas ordenadas Lista ordenadas são aquelas que apresentam numeração como marcadores. A única diferença para a lista não ordenada é que o marcador é <OL> (ordered list). Ex.: 18

19 <HEAD> <TITLE>Exemplo de listas ordenadas</title> </HEAD> <BODY> <Font size="+2"><b>exemplo de listas ordenadas</b></font> <p><font size="+1">lista simples:</font> <ol> </ol> <li>tópico 1; <li>tópico 2; <li>tópico 3; <p><font size="+1">lista aninhada:</font> <ol> </ol> </body> </html> <li>tópico 1; <li>tópico 2; <ol> <li>tópico 2.1; <li>tópico 2.2; </ol> <li>tópico 3; Apresentação no browser: Figura 5.2 listas ordenadas 19

20 5.3. Atributos Como principais atributos das listas, podemos citar: Type: especifica o tipo de marcador a ser usado. Pode ser disc (disco), circle (círculo) e square (quadrado) na lista não ordenada. No caso da lista ordenada, os numerais podem ser configurados da seguinte forma: 1 para números comuns (padrão, não precisa ser especificado), A para ordem alfabética maiúscula, a para ordem alfabética minúscula, I para algarismos romanos maiúsculos e i para algarismos romanos minúsculos; Start: válido apenas para listas ordenadas, especifica o padrão inicial de contagem. No caso dos marcadores (<li>), os principais atributos seriam: Type: permite que se mude o tipo de marcador em qualquer ponto da lista. Note que todos os marcadores seguintes seguirão essa modificação. Os tipos que podem ser alterados dependem do tipo de lista; Value: válido somente no caso de listas ordenadas, permite que se salte de um valor para outro (ex.: de 5 para 10 e depois para 7 e assim por diante). Note que os valores seguintes serão continuação dessa alteração. 20

21 6. Links Links são canais de ligação entre duas coisas. No caso de uma página http, links servem de ligação à outras páginas, arquivos ou ainda à outros trechos dentro da mesma página. Essa capacidade do HTML facilita a vida do desenvolvedor no ponto em que pode-se dividir um documento muito extenso em outros menores, facilitando assim a leitura e agilizando o carregamento da página. Outro ponto interessante dessa propriedade é permitir o acesso à arquivos. Assim sendo, pode-se descrever o conteúdo ou ação do arquivo e disponibilizá-lo ao internauta, sem a necessidade de criar um FTP e solicitar que ele tenha que acessar outro endereço para obtenção do arquivo. Porém, a propriedade mais interessante é a de poder ligar várias páginas de vários sites em várias partes diferentes do mundo, criando-se assim uma teia, onde corre todo tipo de informação, formando-se assim a World Wide Web (teia de alcance mundial). Uma característica importante desse recurso é que a tag <a> não tem fundamento nenhum se escrita em sua forma simples, pois não executará nenhuma função. Para que se obtenha o desejado, é necessário usar alguns atributos, que irão torná-la tão eficaz quanto o desejado. Devido haverem muitos atributos e serem um pouco complexo na aprendizagem, o conteúdo será separado em tópicos Abertura de outras páginas Para abertura de outras páginas, é necessária a inserção do atributo HREF= nome_da_página.html dentro da tag <a>. Por exemplo: vamos supor que você gostaria de abrir uma página que se chama tutoriais.html ; bastaria digitar o comando <a href= tutoriais.html > e o nome que se deseja que apareça como link. Vamos supor que seja a frase Tutoriais? Clique aqui!. O código ficaria assim: <HEAD> <TITLE>Primeiro exemplo de linkagem</title> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href= tutoriais.html >Tutoriais? Clique Aqui!</a> </BODY> </HTML> Fácil não? Ao usuário clicar no link apresentado no navegador, a página tutoriais.html será apresentada automaticamente, sem a necessidade de mais nada além de um simples clique do mouse. Agora imagine um megasite, com cem ou mais páginas, cada página com umas 5 figuras, e tudo isso junto no mesmo diretório... bagunçado, não acha? Para se evitar esse problema, pode-se dividir o site em diretórios, organizando assim o seu conteúdo, facilitando a correção de erros e a manutenção do site. E como se faz para linkar arquivos em diretórios diferentes? 21

22 A linkagem de páginas em diferentes diretórios se faz especificando o diretório que ele se encontra no servidor. Essa especificação pode ser feita de duas maneiras: Especificação do endereço completo. No campo href digita-se a URL completa da página do site, como por exemplo ; Especificação do diretório da página. Dessa forma, basta digitar no campo href o diretório onde se encontra a página, uma barra comum e o arquivo correspondente. Ex.: tutoriais/tutoriais.html. A forma utilizada pela maioria dos webdesigners para acesso à outros diretórios é através da especificação do diretório, por ser mais prático e direto. Note que o endereçamento é feito com barras comuns (/) e não com barras invertidas (\). Ex.: <HEAD> <TITLE>Exemplo de linkagem 1</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href= tutoriais/tutoriais.html >Tutoriais? Clique Aqui!</a> <br><a href= tutoriais/html/html.html >Tutorial de HTML</a> <br><a href= tutoriais/asp/asp.html >Tutorial de ASP</a> </BODY> </HTML> Caso o arquivo estiver em diretórios acima do atual, deve-se adicionar../ até chegar ao diretório desejado, e aí digitar o arquivo desejado. Ex.: <HEAD> <TITLE>Tutorial de HTML</TITLE> </HEAD> <BODY> <h2> Tutorial de HTML</h2> <p> <a href=../tutoriais.html >Tutoriais? Clique Aqui!</a> <br><a href=../asp/asp.html >Tutorial de ASP</a> <br><a href=../../index.html >Página principal</a> </BODY> </HTML> 6.2. Linkando arquivos A linkagem de arquivos se procede da mesma maneira que a linkagem de páginas, só que dessa vez o arquivo de destino não é interpretado pelo navegador. Muito cuidado sobre o tipo de arquivo a ser linkado, pois o navegador pode abrir (como arquivos do tipo texto, outros arquivos HTML, etc.) e o resultado não será o desejado. Para evitar esse tipo de problema, coloque aviso na página do tipo clique com o botão direito do mouse e selecione salvar como ou então compacte-os no mesmo arquivo. 22

23 A compactação pode ser útil não só para redução de arquivos grandes, mas também para a junção de vários arquivos em um só. Os arquivos colocados para download podem estar no mesmo servidor ou em servidores diferentes, sendo a sintaxe semelhante à da linkagem de páginas HTML. Ex.: <HEAD> <TITLE>Exemplo de linkagem de arquivos </TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href= html.zip >Tutorial de HTML.</a> <br><a href= >Tutorial de HTML de outro site.</a> <br><a href=../../index.html >Página principal</a> </BODY> </HTML> 6.3. Criação de âncoras Âncoras são pontos de apoio dentro de uma página HTML para servir de referência sobre algum assunto dentro de alguma página. Supondo que numa página que é 4 vezes maior do que a tela, é que um assunto desejado (por exemplo Teste ) se encontra na sua metade. Ao invés de fazer com que o usuário saia procurando o assunto pela página, pode-se criar uma âncora para o acesso direto. Nesse caso, o código ficaria algo assim: <HEAD> <TITLE>Exemplo de âncoras</title> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <P>Aqui se localiza o texto normalmente, com seus parágrafos, itens, links, etc. <P><A href="#teste">link</a> que aponta para teste. <P>Aqui contém mais textos</p> <P><a name="teste">teste</a> <p>finalizando a página. <br><a href="../../index.html">página principal</a> </P> </BODY> </HTML> Caso quisesse fazer uma ligação da página inicial até essa âncora, ou de um outro site até essa âncora, é só colocar o endereço do arquivo e depois a âncora. Ex.: 23

24 <HEAD> <TITLE>Segundo Exemplo de âncoras</title> </HEAD> <BODY> <h2> Guia de Referências on-line</h2> <P>Veja esse site sobre <A href="www.meuservidor.com.br/tutoriais/html/html.html#teste">html </a>. </BODY> </HTML> 6.4. Outras ligações Para se fazer ligações em títulos, rodapés, enfim, em qualquer objeto presente na página, basta colocá-lo entre as tags de abertura e fechamento do link. Essa tag aceita outras tags em seu interior, como negrito, itálico, títulos, parágrafos, formatação de fontes, enfim, pode-se linkar praticamente tudo! Outra linkagem muito interessante é a de . Basta colocar no campo href o valor e, quando o cliente clicar no endereço, será aberta uma nova mensagem no programa de dele com o campo para preenchido com o especificado. 24

25 7. Figuras A inclusão de figuras nas páginas HTML trouxe uma revolução em seu conteúdo, permitindo a disseminação de conteúdos cada vez mais atrativos pela Web. Contudo, com a inserção de arquivos demasiadamente grandes de imagens, houve um congestionamento maior no meio, além de uma demora maior no carregamento da página. Com a evolução da tecnologia de acesso e também no tratamento de imagens, esse problema foi muito diminuído, levando o tempo de carregamento de figuras de uma página a se tornar algo suportável, embora somente quem tem uma conexão de alta velocidade pode desfrutar do carregamento quase instantâneo de figuras. Apesar de tudo isso, ainda é importante o cuidado na confecção de imagens, deve-se lembrar que, cada 1kb economizado em cada figura, pode influenciar no tempo final de carregamento de um site. Por exemplo: supondo que possa-se economizar 2Kb em uma figura e 1Kb em mais 4 figuras, ao final de carregamento, esses 6Kb significam 2 ou mais segundos. Outras dicas dizem respeito à imagens grandes ou de excelente qualidade, onde acaba gerando arquivos grandes. Caso tenha que colocar uma imagem grande, ou de boa qualidade, coloque um preview antes, assim o usuário poderá escolher qual imagem poderá ser aberta Formatos de figuras GIF Popularizado pela CompuServe, o Graphics Interchange Format é o formato mais usado pelos webdesigners, uma vez que é compacto e leve, e ainda permite a forma intercalada, onde a imagem aparece toda de uma vez e aos poucos vai melhorando a qualidade, ao contrário dos outros formatos onde a imagem vai carregando aos poucos e com a qualidade final. O único problema desse formato é o fato de salvar apenas em 256 cores, o que a torna deficiente em imagens que exigem altos números de cores JPGE O Joint Point Photographic Engineering Group é o formato preferido para armazenamento de fotografias, uma vez que permite que se salve em mais cores do que o Gif e não é tão pesado quanto um BMP. Suporta até 16 bit colors ( cores) BMP O bitmap é o arquivo padrão do Windows, embora seja aberto também em outras plataformas. Caracterizado pelo seu enorme tamanho, permite um número muito maior de cores, embora, por causa do seu tamanho, seja muito raramente utilizado. Para se ter uma idéia de tamanho, uma imagem BMP como fundo de tela (no caso do Windows) ocupa geralmente 1,4Mb de tamanho (cerca de 7 min de download), sendo que em jpg, com boa qualidade gráfica ocuparia cerca de 250Kb (cerca de 1 minuto e 20 segundos de download) e em gif pode chegar a 180Kb (algo em torno de 50 segundos de download), quando em baixa qualidade. 25

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

CRIAÇÃO DE SITES (AULA 4)

CRIAÇÃO DE SITES (AULA 4) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 4) O que eu preciso para construir um link? Para construir um link você usa o que

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO

Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

Introdução. Como adquirir o FrontPage?

Introdução. Como adquirir o FrontPage? Introdução O software FrontPage é muito utilizado para a criação, gerenciamento e publicação de páginas (sites) na Internet. Sendo um produto da Microsoft Corporation, ele apresenta uma interface bastante

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

Tutorial do Iniciante. Excel Básico 2010

Tutorial do Iniciante. Excel Básico 2010 Tutorial do Iniciante Excel Básico 2010 O QUE HÁ DE NOVO O Microsoft Excel 2010 é um programa de edição de planilhas eletrônicas muito usado no mercado de trabalho para realizar diversas funções como;

Leia mais

MANUAL DO BLOG. Blog IBS

MANUAL DO BLOG. Blog IBS MANUAL DO BLOG Blog IBS Seja bem vindo! O Blog é um website dinâmico, um espaço virtual que usa a internet para compartilhar informações. Por meio do blog você pode publicar textos, opiniões, notícias,

Leia mais

Portal do Projeto Tempo de Ser

Portal do Projeto Tempo de Ser Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

Editor HTML. Composer

Editor HTML. Composer 6 Editor HTML 6 Composer Onde criar Páginas Web no Netscape Communicator? 142 A estrutura visual do Composer 143 Os ecrãs de apoio 144 Configurando o Composer 146 A edição de Páginas 148 Publicando a sua

Leia mais

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)

Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

Leia mais

CAPÍTULO 2. Este capítulo tratará :

CAPÍTULO 2. Este capítulo tratará : 1ª PARTE CAPÍTULO 2 Este capítulo tratará : 1. O que é necessário para se criar páginas para a Web. 2. A diferença entre páginas Web, Home Page e apresentação Web 3. Navegadores 4. O que é site, Host,

Leia mais

Anexo III Funcionamento detalhado do Sistema Montador de Autoria

Anexo III Funcionamento detalhado do Sistema Montador de Autoria 1 Sumário Anexo III Funcionamento detalhado do Sistema Montador de Autoria Anexo III Funcionamento detalhado do Sistema Montador de Autoria... 1 1 Sumário... 1 2 Lista de Figuras... 5 3 A Janela principal...

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Microsoft Internet Explorer. Browser/navegador/paginador

Microsoft Internet Explorer. Browser/navegador/paginador Microsoft Internet Explorer Browser/navegador/paginador Browser (Navegador) É um programa que habilita seus usuários a interagir com documentos HTML hospedados em um servidor web. São programas para navegar.

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Desenvolvendo Websites com PHP

Desenvolvendo Websites com PHP Desenvolvendo Websites com PHP Aprenda a criar Websites dinâmicos e interativos com PHP e bancos de dados Juliano Niederauer 19 Capítulo 1 O que é o PHP? O PHP é uma das linguagens mais utilizadas na Web.

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Instrução de Trabalho Base de Conhecimento

Instrução de Trabalho Base de Conhecimento Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.

Leia mais

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

Desenvolvendo Websites com PHP

Desenvolvendo Websites com PHP Desenvolvendo Websites com PHP 2ª Edição Juliano Niederauer Novatec Copyright 2009, 2011 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução

Leia mais

Resumão Writer ( Broffice.org)

Resumão Writer ( Broffice.org) Resumão Writer ( Broffice.org) Resumo BrOffice.org Cespe O Broffice.org é um pacote de programas para escritório, do mesmo nível do pacote Microsoft Office. Os dois pacotes trazem programas parecidos e

Leia mais

Como Criar uma Aula? Na página inicial do Portal do Professor, acesse ESPAÇO DA AULA: Ao entrar no ESPAÇO DA AULA, clique no ícone Criar Aula :

Como Criar uma Aula? Na página inicial do Portal do Professor, acesse ESPAÇO DA AULA: Ao entrar no ESPAÇO DA AULA, clique no ícone Criar Aula : Como Criar uma Aula? Para criar uma sugestão de aula é necessário que você já tenha se cadastrado no Portal do Professor. Para se cadastrar clique em Inscreva-se, localizado na primeira página do Portal.

Leia mais

UM NOVO CONCEITO EM AUTOMAÇÃO. Série Ponto

UM NOVO CONCEITO EM AUTOMAÇÃO. Série Ponto UM NOVO CONCEITO EM AUTOMAÇÃO Série Ponto POR QUE NOVO CONCEITO? O que é um WEBPLC? Um CP na WEB Por que usar INTERNET? Controle do processo de qualquer lugar WEBGATE = conexão INTERNET/ALNETII WEBPLC

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

Leia mais

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01 Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0 Tutorial HTML versão 4.01 K O M Σ D I Copyright by Editora Komedi, 2007 Dados para Catalogação Rimoli, Monica Alvarez Chaves,

Leia mais

INTERNET OUTLOOK. 1. Considerando os conceitos e os modos de navegação na Internet, assinale a opção correta.

INTERNET OUTLOOK. 1. Considerando os conceitos e os modos de navegação na Internet, assinale a opção correta. Prof. Júlio César S. Ramos P á g i n a 1 INTERNET OUTLOOK 1. Considerando os conceitos e os modos de navegação na Internet, assinale a opção correta. A O Outlook Express permite criar grupo de pessoas

Leia mais

Manual Sistema MLBC. Manual do Sistema do Módulo Administrativo

Manual Sistema MLBC. Manual do Sistema do Módulo Administrativo Manual Sistema MLBC Manual do Sistema do Módulo Administrativo Este documento tem por objetivo descrever as principais funcionalidades do sistema administrador desenvolvido pela MLBC Comunicação Digital.

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim

Leia mais

Guia de Uso. O Pro-Treino tem uma divisão clara de funções, apresentada a seguir: E três tipos de usuários que executam as funções descritas acima:

Guia de Uso. O Pro-Treino tem uma divisão clara de funções, apresentada a seguir: E três tipos de usuários que executam as funções descritas acima: Sumário 1. Introdução... 2 2. Conceitos básicos... 2 2.1. Fluxo do sistema... 3 2.2. Acesso ao sistema... 4 2.2.1. Login... 4 2.2.2. Logoff... 4 2.2.3. Esqueci minha senha... 5 2.3. Conhecendo o Sistema...

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

Leia mais

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web; CONCEITOS INICIAIS Agenda A diferença entre páginas Web, Home Page e apresentação Web; O que é necessário para se criar páginas para a Web; Navegadores; O que é site, Host, Provedor e Servidor Web; Protocolos.

Leia mais

Ave: Manual do usuário

Ave: Manual do usuário As iniciais no canto superior esquerdo indicam a atual lista de espécies em uso. Clique neste campo para abrir uma grade com todas Ave: Manual do usuário Introdução A Janela Inicial O botão Listas Sobre

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II)

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) A seguir vamos ao estudo das ferramentas e aplicativos para utilização do correio

Leia mais

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de

Leia mais

Manual do usuário (v 1.2.0) E-commerce

Manual do usuário (v 1.2.0) E-commerce Manual do usuário (v 1.2.0) E-commerce Sumário Acessando o sistema gerencial... 1 Enviando logomarca, banners e destaques... 1 Logomarca... 1 Destaques... 2 Banners... 3 Cadastrando produtos... 4 Embalagem...

Leia mais

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

www.marketingdigitalexpress.com.br - Versão 1.0 Página 1

www.marketingdigitalexpress.com.br - Versão 1.0 Página 1 www.marketingdigitalexpress.com.br - Versão 1.0 Página 1 Remarketing é um recurso utilizado para direcionar anúncios personalizados para as pessoas que visitaram uma determinada página do seu site ou clicaram

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

Leia mais

Poder Judiciário Tribunal Regional Federal da Terceira Região

Poder Judiciário Tribunal Regional Federal da Terceira Região Poder Judiciário Tribunal Regional Federal da Terceira Região DIMI - Divisão de Microinformática e Redes Índice: O que é a Internet? 3 O que são Intranets? 3 Sobre o Nestcape Navigator 3 Para iniciar o

Leia mais

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo 2011 MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo Aprenda como é simples utilizar a ferramenta Flex como seu gerenciador de conteúdo online. Flex Desenvolvido pela ExpandWEB 31/01/2011

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

Google Docs EDITOR DE TEXTOS

Google Docs EDITOR DE TEXTOS Google Docs Um destes serviços oferecidos é o Google Docs, uma espécie de suíte de aplicativos online, bastante semelhante ao Microsoft Office e ao OpenOffice.org/BrOffice.org. O serviço da Google possui

Leia mais

Curso Introdução à Educação Digital - Carga Horária: 40 horas (30 presenciais + 10 EaD)

Curso Introdução à Educação Digital - Carga Horária: 40 horas (30 presenciais + 10 EaD) ******* O que é Internet? Apesar de muitas vezes ser definida como a "grande rede mundial de computadores, na verdade compreende o conjunto de diversas redes de computadores que se comunicam e que permitem

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

APOSTILA WORD BÁSICO

APOSTILA WORD BÁSICO APOSTILA WORD BÁSICO Apresentação O WORD é um editor de textos, que pertence ao Pacote Office da Microsoft. Suas principais características são: criação de textos, cartas, memorandos, documentos, mala

Leia mais

Manual do Painel Administrativo

Manual do Painel Administrativo Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Manual de Utilização Google Grupos Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução... 3 Página

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Manual de Gerenciamento de Conteúdo

Manual de Gerenciamento de Conteúdo Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6

Leia mais

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO DRUPAL MANUAL DO USUÁRIO Primeiros passos para inserir conteúdo no site. 1. Logar-se no site através de seu usuário e senha. 2. Criar um novo menu. 3. Ativar o menu criado, colocando-o em alguma região

Leia mais

ALBUM DE FOTOGRAFIAS NO POWER POINT

ALBUM DE FOTOGRAFIAS NO POWER POINT ALBUM DE FOTOGRAFIAS NO POWER POINT O PowerPoint é uma poderosa ferramenta que faz parte do pacote Office da Microsoft. O principal uso desse programa é a criação de apresentação de slides, para mostrar

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

Manual da Administração do site Abrasel 2.0

Manual da Administração do site Abrasel 2.0 Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias

Leia mais

INTERNET -- NAVEGAÇÃO

INTERNET -- NAVEGAÇÃO Página 1 Acessando endereços simultaneamente Parte 2 Um recurso interessante e extremamente útil é o de abrir várias janelas ao mesmo tempo. Em cada janela você poderá acessar um endereço diferente na

Leia mais

Instalando o Internet Information Services no Windows XP

Instalando o Internet Information Services no Windows XP Internet Information Services - IIS Se você migrou recentemente do Windows 95 ou 98 para o novo sitema operacional da Microsoft Windows XP, e utilizava antes o Personal Web Server, deve ter notado que

Leia mais

Manual de Uso Wordpress

Manual de Uso Wordpress Manual de Uso Wordpress Olá! Seja bem vindo ao igual. Agora você pode transmitir todas as notícias importantes da sua comunidade de forma mais simples e eficiente. Mas para que isso aconteça, primeiro

Leia mais

15. OLHA QUEM ESTÁ NA WEB!

15. OLHA QUEM ESTÁ NA WEB! 7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER

Leia mais

UFPel Departamento de Informática. Tutorial Google Docs. Profa. Lisane Brisolara de Brisolara

UFPel Departamento de Informática. Tutorial Google Docs. Profa. Lisane Brisolara de Brisolara UFPel Departamento de Informática Tutorial Google Docs Profa. Lisane Brisolara de Brisolara Sumário O que é o Google Docs Seus principais recursos Editor de textos/documentos Editor de planilhas eletrônicas

Leia mais