Parte 3 - HTML. Tópicos abordados neste capítulo Conceitos Básicos O que é uma Página Web? Como se cria uma Página Web?

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

Download "Parte 3 - HTML. Tópicos abordados neste capítulo. 3.1 - Conceitos Básicos. 3.1.1 - O que é uma Página Web? 3.1.2 - Como se cria uma Página Web?"

Transcrição

1 Parte 3 - HTML Tópicos abordados neste capítulo Conceitos Básicos O que é uma Página Web? Como se cria uma Página Web? Como são os Tags HTML? A estrutura de uma Página HTML Principais Elementos de uma Página HTML Cabeçalhos, Parágrafos e Formatação de Texto Cabeçalhos Parágrafos e quebras de linha Estilos de texto Textos pré-formatados

2 Um exemplo completo Listas Listas não ordenadas Listas ordenadas Listas aninhadas URLs e Links Vinculando seções de uma página Vinculando arquivos locais Vinculando arquivos de outros servidores Imagens Padrões Utilizados Obtendo uma imagem Inserindo imagens no documento Usando imagens como links Tabelas Fundamentos das tabelas

3 Inserindo imagens e vínculos em tabelas Equações e símbolos matemáticos HTML Com o Auxílio de Editores Criando, salvando e abrindo uma página Formatando um parágrafo Inserindo listas e ajustando recuos Inserindo vínculos Inserindo imagens Inserindo tabelas

4 3.1 - Conceitos Básicos Para criar cursos à distância utilizando a Web, é necessário criar documentos que possam ser lidos pelos navegadores. Esses documentos, muitas vezes também chamados de páginas Web, são criados utilizando a linguagem HTML (Hipertext Markup Language). Nosso objetivo neste módulo é estudar esta linguagem, aprendendo, então, como criar documentos para a Web. Nesta seção serão mostrados alguns conceitos básicos da linguagem.

5 O que é uma página Web? Uma página Web é um documento composto basicamente de textos e códigos especiais chamados tags que possibilitam a exibição do documento na World Wide Web. Os navegadores, ou browsers, são os programas que interpretam o código HTML de uma página e a constroem graficamente na tela. Eles estão preparados para trabalhar com documentos que contêm hipertexto. Além da informação textual, as páginas Web podem conter imagens, som, animações e até mesmo vídeo. Estas páginas ainda podem conter links ou ligações para outras páginas armazenadas no mesmo computador ou em qualquer outro local da rede. Uma página Web é também chamada por alguns de home page.

6 Como se cria uma página Web? Uma página Web, como já foi dito, compõe-se de textos e comandos especiais (tags) de uma linguagem chamada HTML (Hipertext Markup Language). Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre páginas Web, criando assim documentos com o conceito de hipertexto. Como em qualquer outra linguagem, o programador deve escrever o código-fonte seguindo as regras de sintaxe da linguagem. Este código fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web. Não é necessário estar conectado à rede para utilizar o browser. Geralmente as páginas são criadas e armazenadas no disco rígido. Elas podem ser testadas com o browser e, depois de prontas, deve-se enviá-las a um servidor para que fiquem disponíveis aos outros usuários da rede. O código-fonte pode ser escrito usando o mais simples dos editores de texto - até mesmo o programa Notepad do Windows pode ser usado para isso. Contudo, a forma mais prática e produtiva para escrever uma página Web é usar um editor HTML. Estes editores encurtam o tempo de geração da página pois geram o código fonte para você. Além disso, o que se vê na tela desses programas é bem parecido com a visualização final que será obtida no browser. Entretanto, o conhecimento básico de como se construir uma página HTML através do código fonte pode trazer grandes vantagens no sentido de complementar o trabalho realizado com os editores. Neste curso serão abordados alguns aspectos da linguagem HTML, a partir dos comandos ou tags, e posteriormente será dada uma introdução sobre a utilização dos editores na construção das páginas.

7 Como são os tags (etiquetas) HTML? Quando um browser exibe uma página Web, ele lê o texto da página e procura símbolos especiais denominados tags, ou etiquetas, que dizem como o texto, ou informação, deve ser exibido. Por exemplo, um tag pode dizer que um texto deve ser exibido em negrito, itálico, com um determinado tipo de fonte, etc. Além do aspecto físico do texto, um tag pode indicar que determinado texto é na verdade o endereço de outras páginas Web que devem ser acessadas no caso de o texto ser clicado. Os tags normalmente são especificados em pares, delimitando um texto que sofrerá algum tipo de formatação. Contudo, existem vários tags individuais. Os tags são identificados por serem envolvidos pelos sinais "<>" ou "</>", onde a barra indica que o tag está finalizando a marcação de um texto. Dessa forma, o formato genérico de um tag é: <nome do tag>texto</nome do tag> Alguns tags podem conter atributos, que são incluídos logo após o nome do tag. <tag atributo1="valor1" atributo2="valor2">...</tag> Veja a seguir alguns comandos e o efeito que eles causam na exibição: <b>este texto está em negrito</b> enquanto esta <i>palavra</i> está em itálico.<br> <h3>este comando gera um cabeçalho título de tamanho 3.</h3> Resultados:

8 Este texto está em negrito enquanto esta palavra está em itálico. Este comando gera um cabeçalho título de tamanho 3. Note que, para quebrar a linha, foi utilizado o tag <br>.

9 Estrutura de uma página HTML Assim como em outras linguagens, existem algumas estruturas básicas que identificam partes de um programa HTML. O esquema abaixo mostra os comandos básicos de uma página. <html> <head> <title>título da Página</Title> </head> <body> ********************************** Área para os comandos da linguagem ********************************** </body> </html> Esses comandos não são obrigatórios nos browsers mais modernos. Dependendo da página que se deseja criar, eles não farão falta. É interessante, entretanto, que eles sejam incluídos em suas páginas de forma a criar uma padronização de código. Em resumo, o comando <HTML> é usado em par com o comando </HTML>. Eles delimitam a área dos comandos HTML. O par de comando <HEAD></HEAD> é usado para especificar poucos comandos, sendo o mais importante deles o título da página. Esse título será mostrado na linha de título da janela do browser. O par de comandos <BODY></BODY> deve ser usado para envolver todos os comandos de formatação da página.

10 Principais elementos de uma página HTML Uma página HTML é composta basicamente por títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela. Todos estes elementos são posicionados na página através de comandos específicos da linguagem. Os editores HTML nos ajudam bastante nessa tarefa, mas, inicialmente, mostraremos como construir os documentos sem o auxílio deles.

11 3.2 - Cabeçalhos, Parágrafos e Formatação de Texto A linguagem HTML nos permite a formatação do texto de uma página, com recursos semelhantes aos dos editores de texto. Uma boa diagramação, com destaque para as partes mais importantes do texto e um bom visual, são importantes na composição de um curso à distância. Nesta seção mostraremos algumas possibilidades da linguagem com relação à formatação de textos.

12 Cabeçalhos (Headings) Os cabeçalhos são as linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto, com a finalidade de se identificar o início de uma seção ou tópico. O comando <h> é usado para identificar um cabeçalho. Existem seis tamanhos ou modelos que podem ser associados aos cabeçalhos. A sintaxe tem a seguinte forma: <hn>texto do Cabeçalho</hn> onde "n" deve ser substituído por um número de 1 a 6. O maior tamanho é especificado com o comando <h1> e o menor tamanho com o comando <h6>. Toda vez que um cabeçalho é especificado, o browser irá inserir uma linha em branco após sua linha. Existem outras formas de criar linhas de texto com tamanho e tipo de letras diferentes. Contudo, os comandos de cabeçalhos são a forma mais rápida de se conseguir esse efeito. O comando <hr> traça uma linha horizontal e salta uma linha a partir do ponto onde é inserido.

13 Parágrafos e quebras de linha Nas páginas HTML é possível digitar o texto exatamente no lugar onde você deseja que ele apareça na tela, da mesma forma que é feito com um editor de textos comum. A principal diferença está no fato do HTML não reconhecer o fim de um parágrafo quando se pressiona a tecla Enter. É necessário forçar o fim do parágrafo e a quebra de linha usando comandos especiais. O comando <p> é o responsável pela criação de parágrafos. Veja o exemplo abaixo. <h3>exemplo de Parágrafos e quebras de linhas</h3> <p>a linguagem html ignora a tecla enter pressionada no final da linha.</p> <p> <p> <p>note que, apesar de inseridos 3 comandos para quebra de linha, apenas uma linha em branco é inserida.</p> <hr> Como não foi especificada a fonte, o texto é exibido com a fonte padrão do browser (geralmente Times new roman). Resultado: Exemplo de Parágrafos e quebras de linhas A linguagem html ignora a tecla enter pressionada no final da linha. Note que, apesar de inseridos 3 comandos para quebra de linha, apenas uma linha em branco é inserida. Como não foi especificada a fonte, o texto é exibido com a fonte padrão do browser (geralmente Times new roman). No caso de redimensionamento da janela do browser, o texto será rearranjado e algumas linhas serão quebradas automaticamente de forma que todo o texto será mostrado no novo espaço. Contudo, os comandos <p> continuam valendo.

14 Às vezes pode ser necessária uma quebra de linha mas com o texto continuando na linha seguinte. O comando <br> nos permite isso. Ao contrário do comando <p>, ele não insere uma linha em branco, apenas passa para a linha seguinte.

15 Estilos de Texto Assim como nos editores de texto, a linguagem HTML permite a criação de uma série de efeitos no texto, seja alterando sua forma, tamanho ou estilo de fonte. Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do texto que sofrerá formatação. Os principais comandos de estilo de texto estão mostrados na tabela abaixo. Comando Sintaxe Função Negrito <b>texto</b> Aplica o estilo negrito Itálico <i>texto</i> Aplica o estilo itálico Sublinhado <u>texto</u> Aplica um sublinhado Strong <strong>texto</strong> Similar ao negrito Typewriter <tt>texto</tt> Deixa o texto com espaçamento 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 Subscrito <sub>texto</sub> Rebaixa o texto e diminui seu corpo Strike <s>texto</s> O texto sai riscado Pulsante (*) <blink>texto</blink> Texto fica intermitente (*) não funciona em todos os navegadores Um dos recursos de tratamento de texto mais interessantes da linguagem HTML é a possibilidade de se alterar o tamanho, a cor e o tipo da fonte utilizada no texto. O comando responsável por isso é o <font>, que também é do tipo contêiner. Sua sintaxe é a seguinte:

16 <font size="n" face="fonte" color="cor">texto</font> O tamanho "n" pode ir de 1, o menor, até 7, o maior. Se nenhum tamanho é especificado, é assumido o valor padrão 3. Se for especificado um número antecedido do sinal de mais ou de menos, o tamanho da fonte será aumentado ou diminuído daquele valor. No lugar de "fonte", escreva o nome da fonte que se deseja para o texto. Um detalhe importante é que o texto somente será exibido na fonte indicada se o computador que estiver lendo a página possuir aquela fonte instalada. Portanto, é interessante que na construção das páginas sejam usadas somente fontes que geralmente todos possuem, como Arial, Times New Roman ou Courier. Uma opção mais simples é não indicar qual fonte a ser utilizada, deixando que o browser utilize sua configuração padrão. Para escolher a cor, pode-se escrever o seu nome, como red, blue, yellow, green, etc. Porém, para tons intermediários, é necessário que se conheça o código RGB da cor em algarismos hexadecimais. Os dois primeiros algarismos representam a quantidade de vermelho (red), os algarismos do meio, a quantidade de verde (green) e os dois últimos a quantidade de azul (blue) presente na cor. Por exemplo, color="#00ffff" irá colocar o texto na cor azul claro; color="#ff0000" irá colocar o texto na cor vermelho e assim por diante. Existem tabelas para referência com os códigos das cores.

17 Textos pré-formatados Através do comando <pre> é possível incluir um texto preservando sua formatação original, tal como marcas de tabulação, fim de linha gerado pela tecla enter e outros formatos. Veja o exemplo abaixo. <html> <head> <title>textos pré-formatados</title> </head> <body> <pre> Aqui eu coloco o que quiser Enter no final da linha funciona! /------\ * * Os tags também <b>funcionam</b>. </pre> </body> </html> Se você quiser testar o efeito do comando <pre>, copie o texto do exemplo acima e cole no Notepad (bloco de notas). Salve-o com um nome qualquer com a extensão htm ou html. Em seguida abra-o com seu browser (o procedimento para abrir um arquivo é semelhante para os diversos browsers. Geralmente clica-se em "Arquivo" e depois em "abrir" e escolhe-se o arquivo a partir da janela de busca). Você deve obter um resultado como mostrado abaixo:

18

19 Um exemplo completo Para exemplificar com mais detalhes os comandos mostrados até agora, criamos um exemplo simples, que é mostrado abaixo. Nosso objetivo com esse exemplo é apenas mostrar o efeito dos comandos, deixando de lado a estética. <html> <head> <title>exemplo com os recursos mostrados até o momento</title> </head> <body> <h3 align="center">exemplo Completo</h3> <p><font size="3" face="arial" color="blue">o uso correto dos recursos e um pouco de imaginação podem trazer bons resultados.</font> <hr size="3" width="50%"> <p align="center"><font size="4" face="times New Roman" color="teal"> Os tags podem ser combinados, de forma a criarem um efeito <blink><big><i>conjunto.</big></i></blink> <br>reparem que este parágrafo está centralizado.</font> <hr size="5" width="60%"> <div align="right"><pre> Vamos colocar agora um texto pré-formatado alinhado à direita </pre></div> </body> </html>

20 A visualização deste código no browser é mostrada abaixo. Neste exemplo foi introduzido o atributo align (alinhamento) para o cabeçalho, para os parágrafos e para o texto pré formatado. Se este atributo não é especificado, o browser mantém o alinhamento à esquerda. Um comando novo que aparece no exemplo é o comando <div>, que é utilizado para envolver uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento. As linhas horizontais inseridas com o comando <hr> também ganharam atributos. A largura (size) e o comprimento (width) foram especificados de forma diferente nas duas linhas para destacar a ação dos parâmetros. A palavra "conjunto" está sob o efeito de vários tags ao mesmo tempo. Exemplo Completo O uso correto dos recursos e um pouco de imaginação podem trazer bons resultados. Os tags podem ser combinados, de forma a criarem um efeito conjunto. Reparem que este parágrafo está centralizado Vamos colocar agora um texto pré-formatado alinhado à direita Muito bem. Neste ponto você já sabe como criar um documento HTML e colocar texto formatado de diversas formas em seu conteúdo. Já é possível notar que a linguagem HTML é bastante simples e intuitiva, o que torna rápido o seu aprendizado. Na próxima seção mostraremos como funcionam as listas, um recurso muito importante que essa linguagem também oferece.

21 3.3 - Listas Uma forma de se estruturar um documento HTML é através das listas. As listas podem funcionar como um sumário, menu ou resumo do conteúdo do documento. Além disso, são excelentes para funcionar como ponto de partida para outras partes do documento. Existem basicamente dois tipos de listas. As listas não ordenadas, que encadeiam uma série de ítens sem numerá-los, e as listas ordenadas, que atribuem um número para cada elemento da lista.

22 Listas não ordenadas Para criar uma lista não ordenada, você deve usar o comando <ul> (unordered list) e o comando <li> (line item). O comando <ul> é do tipo liga-desliga e deve envolver todos os elementos da lista. Cada item da lista deve ser precedido do comando <li>. A sintaxe é mostrada abaixo. <ul> <li>texto do item 1 <li>texto do item <li>texto do item n </ul> No ítem seguinte são introduzidas as listas ordenadas e há um exemplo com ambos os tipos de listas.

23 Listas ordenadas As listas ordenadas são criadas de forma semelhante às não ordenadas. O comando que gera uma lista ordenada é <ol> (ordered list) e, como nas listas não ordenadas, o comando <li> deve preceder cada linha. A sintaxe é mostrada abaixo. <ol> <li>texto do item 1 <li>texto do item <li>texto do item n </ol> Para ilustrar a utilização das listas, considere o exemplo abaixo. <h4>exemplo de Lista Não Ordenada</h4> <ul> <li>página 1 <li>página 2 <li>página 3 </ul> <hr width="60%"> <h4>exemplo de Lista Ordenada</h4> <ol> <li>capítulo 1 <li>capítulo 2 <li>capítulo 3 </ol> Veja a seguir o efeito desses comandos.

24 Exemplo de Lista Não Ordenada Página 1 Página 2 Página 3 Exemplo de Lista Ordenada 1. Capítulo 1 2. Capítulo 2 3. Capítulo 3 Essas listas poderiam ser utilizadas como um índice para outros documentos, bastando apenas atribuir vínculos às palavras que serviriam como ligação. Veremos como fazer isso na próxima seção.

25 Listas aninhadas É possível aninhar diversas listas para criar estruturas hierárquicas, podendo inclusive mesclar listas ordenadas e não ordenadas. A sintaxe das listas aninhadas é essencialmente a mesma das listas normais, exceto que se começa uma nova lista antes de fechar a primeira e assim por diante. A idéia de aninhamento de listas ficará bem clara a partir do exemplo abaixo. <h3>exemplo com listas aninhadas</h3> <ol> <li>este é o primeiro ítem da lista principal <li>segundo ítem da lista principal <ul> <li>subitem do segundo ítem da lista principal <li>outro subitem <ol> <li>este é o terceiro nível, um subitem de um subitem <li>continuamos no terceiro nível. </ol> <li>não se perca, este é mais um subitem do segundo item </ul> <li>terceiro item da lista principal e chega. </ol> Veja os resultados: Exemplo com listas aninhadas 1. Este é o primeiro ítem da lista principal 2. Segundo ítem da lista principal Subitem do segundo ítem da lista principal Outro subitem 1. Este é o terceiro nível, um subitem de um subitem 2. Continuamos no terceiro nível. Não se perca, este é mais um subitem do segundo item 3. Terceiro item da lista principal e chega.

26 É interessante notar que a numeração é reiniciada para cada novo nível. Dentro das listas pode-se usar qualquer formatação de texto normalmente. No caso das listas aninhadas, deve-se prestar bastante atenção para casar todos os comandos, ou seja, cada lista aberta deve ser fechada pelo comando correspondente.

27 3.4 - URLs e Links A principal atração da World Wide Web é a possibilidade de utilização do conceito de hipertexto, que é a conexão de um documento a outros através de vínculos especiais chamados hiperlinks (ou simplesmente links). Dessa forma, a partir de uma página Web poderíamos ir para outra, não importando se ela está no mesmo computador ou em qualquer outro servidor da rede. O uso de hipertexto também facilita a utilização de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados por meio dos links. Um bom exemplo é o glossário deste curso. Através das iniciais, você pode se dirigir para qualquer parte do documento, e encontrar rapidamente a expressão procurada.

28 Vinculando seções de uma página Para dominar o uso do hipertexto, deve-se conhecer bem o funcionamento de dois comandos da linguagem HTML: o comando A NAME e o comando A HREF. Criando uma âncora (bookmark) Para vincular partes de uma página, é preciso criar uma âncora no início de cada seção que será referenciada por um link. Uma âncora é um ponto de referência ou endereço que será acessado por um link. Ela geralmente marca o início de uma seção do documento. Essa âncora recebe um nome que será a forma com que o link a acessará. O comando usado para criar uma âncora é: <a name="nome da âncora">texto alvo do link</a> Criando o link para a âncora Para criar um link para uma âncora, deve-se utilizar o comando A HREF, especificando o nome da âncora que se deseja acessar através do link. O texto envolvido por esse comando mudará de cor e ficará sublinhado para se diferenciar do restante do texto. No browser, um clique nesse texto o levará diretamente para o local onde foi criada a âncora. A sintaxe é a seguinte: <a href="#nome da âncora de destino">texto do link</a> O símbolo "#" é importante pois avisa ao browser que se trata de um link para o documento atual. O exemplo abaixo mostra a utilização dos vínculos em uma mesma página.

29 <h4 align="center">exemplo de links na mesma página</h4> <a name="inicio">início do documento</a> <p><a href="#parte1">parte 1 - Introdução</a></p> <p>clique no links acima para acessar o texto correspondente</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <p>essas linhas são somente para separar os tópicos</p> <a name="parte1"><h4>introdução</h4></a> <p><a href="#inicio">volta ao início do documento</a></p> Veja os resultados:

30 Exemplo de links na mesma página Início do documento Parte 1 - Introdução Clique no links acima para acessar o texto correspondente Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Essas linhas são somente para separar os tópicos Introdução Volta ao início do documento Neste exemplo, temos duas âncoras e dois links. As âncoras marcam o início do documento e o início da "introdução". O link no começo aponta para a âncora "parte1", na introdução, e o link no final aponta para a âncora "início", no início do documento.

31 Vinculando arquivos locais Fazer a ligação de um texto do seu documento HTML com uma página local é uma tarefa bastante simples. É necessário que se especifique, através do comando A HREF, o nome completo do arquivo que será chamado. É necessário que se coloque a extensão do arquivo. Se o arquivo for um documento HTML (*.htm ou *.html), um arquivo texto (*.txt) ou uma imagem (*.gif ou *.jpg), o browser o abrirá automaticamente. Alguns arquivos de outras extensões podem ser abertos pelo browser, mas alguns deles exigem um plugin, que é um programa, geralmente fornecido gratuitamente pelo fabricante, que complementa o browser, permitindo que ele abra arquivos de extensões especiais. Se o vínculo aponta para um arquivo que não é html nem algum outro reconhecido pelos plugins, o browser irá perguntar se deve salvar o arquivo ou escolher um aplicativo instalado para abrí-lo. A sintaxe do comando é a seguinte: <a href="nome_do_arquivo.extensão">texto do link</a> Para compreender melhor as referências a arquivos, considere os exemplos abaixo. <a href="introd.html">introdução</a> <a href="introd.html#parte2">parte 2 dentro da Introdução</a> <a href="../aulas/aula3.html">aula 3 no diretório aulas em um nível acima</a> <a href="imagens/figura1.jpg">figura em um diretório dentro do diretório atual</a> No primeiro exemplo, a referência é valida se o arquivo "introd.html" estiver no mesmo diretório que o documento atual. O browser usa como referencial o diretório atual para iniciar a busca de páginas. Você não deve especificar o caminho do DOS, mas sim especificar um caminho relativo ao diretório atual. Além disso, na Web são usadas barras normais "/" no lugar das barras invertidas "\" usadas para indicar os caminhos no DOS. Uma possibilidade interessante é mostrada no segundo exemplo. Este vínculo levará diretamente à âncora "parte2" dentro do arquivo introd.html. O terceiro e o quarto exemplo mostram como referenciar arquivos em diretórios diferentes. Os sinais "../" são usados para subir um nível na árvore de diretórios e depois entrar no diretório indicado. No quarto exemplo, o arquivo que se deseja está dentro do diretório "imagens" que, por sua vez, está dentro do diretório atual.

32 Vinculando arquivos de outros servidores Através de um esquema de endereçamento chamado URL (Uniform Resource Locator), é possível acessar um arquivo em um computador em qualquer lugar do planeta, desde que este esteja adequadamente conectado à Internet. O URL é composto por duas partes principais. A primeira é o protocolo Internet do documento e a segunda parte é o endereço do servidor e da página. A sintaxe é: protocolo://servidor/arquivo onde protocolo é o tipo de servidor que está sendo acessado (http, ftp, telnet); servidor é o computador que contém a página; arquivo é o caminho do arquivo. Por exemplo, a página da UFMG tem a URL: e pode ser acessada a partir de um documento HTML através do comando <a href="http://www.ufmg.br">página da UFMG</a> Note que não há indicação quanto ao caminho do arquivo, somente ao protocolo e ao servidor. Isso é possível graças à configuração padrão dos navegadores que, quando não sendo indicado o caminho do arquivo, procuram pelo arquivo index.html. Portanto, a página principal de um site deve se chamar sempre index.html (ou index.htm). Se na referência se deseja um arquivo que não seja o index.html, deve-se especificar o caminho completo do arquivo, incluindo diretórios e a extensão, como no exemplo abaixo. <a href="http://www.ufmg.br/orgaos/estatuto.html">novo estatuto da UFMG</a>

33 3.5 - Imagens A possibilidade de inclusão de imagens nos documentos HTML dá uma nova dimensão para a transmissão da informação. Imagens e ilustrações podem tornar a informação muito mais atraente. O princípio básico é reduzir ao máximo o tamanho das imagens, a fim de facilitar o download das páginas e não esgotar a paciência do visitante. Ilustrações a partir de 50 KB já podem ser consideradas excessivamente grandes, principalmente quando há mais de uma na mesma página. Portanto, a recomendação é que se usem imagens pequenas, com resolução de 78 pixels por polegada, que é a resolução usada no padrão VGA e SVGA da maioria dos usuários.

34 Padrões Utilizados Os arquivos de imagens GIF e JPEG (extensão JPG) são os padrões da Web. A principal razão para essa preferência está no grau de compressão embutido nesses formatos. Assim, quando se tem uma foto ou ilustração em formatos como BMP, TIF ou EPS, é necessário transformá-la em um arquivo GIF ou JPG, se quiser usá-la na Web. O GIF, sigla de Graphics Interchange Format, foi desenvolvido pela Compuserve e pode comprimir figuras a até 1 centésimo do tamanho original. Mas a taxa de compressão varia muito, dependendo da imagem. Quanto mais redundante a figura, maior a compressão. Para imagens complexas, sem padrões repetitivos, o melhor que se consegue é reduzir o tamanho a cerca de 80% do original. As imagens GIF têm limitações. A principal é que suportam apenas 256 cores. As imagens JPG, diferentemente do padrão GIF, possuem maior número de cores (16,7 milhões) e aceitam que se defina o grau de compactação desejado. Quanto menor o arquivo obtido, também menor será a qualidade da imagem. Imagem no padrão JPG, com tamanho de 15KB. A mesma imagem no formato GIF tem 84KB, sendo, portanto, desaconselhável

35 A conclusão é que o padrão JPEG é mais adequado para imagens mais complexas, como fotos que apresentam muitas cores e detalhes. Já o padrão GIF combina melhor com imagens mais simples e com pequena variação de tonalidades. O padrão GIF possui também um recurso adicional. Quando se salva uma imagem no formato GIF, pode-se escolher uma cor da imagem para ser transparente. Isso faz com que toda a área da imagem que possuir aquela cor fique transparente, permitindo a visualização do que há "por baixo" da imagem, como a cor de fundo de um documento HTML. Com a prática, vai se percebendo qual a opção mais desejável para cada aplicação. Imagem no formato GIF, com tamanho de 4KB. No formato JPG ela teria 7,5KB, ou seja, quase o dobro A mesma imagem GIF com a cor marrom claro do cabelo do personagem escolhida como transparente. O que é mostrado em seu lugar é o que está

36 Dentro do padrão GIF temos uma aplicação muito útil e interessante, os GIFs animados. Eles são compostos por uma sequência de imagens que são alternadas rapidamente, passando a impressão de movimento. Existem programas que combinam as imagens e formam um GIF animado, ou seja, uma vez criados os quadros com um editor de imagens comum, esses programas se encarregam de sequenciar as figuras e compor a imagem final. É possível, dependendo do programa, mudar o tempo de exibição de cada quadro e o número de vezes que o ciclo se repetirá. Geralmente os GIFs animados se repetem indefinidamente, enquanto a página estiver sendo visualizada. Os GIFs animados têm a mesma extensão das imagens GIF comuns e são inseridos no documento também da mesma forma. Em um curso à distância, eles podem ser uma opção interessante para se mostrar como fazer algo através de uma pequena sequência de passos, ou simplesmente para animar um pouco as páginas. Exemplo de GIF animado. Cada quadro é uma imagem GIF e a imagem final, obtida com o auxílio de um programa especial para sequenciar as imagens, também tem a extensão GIF.

> 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

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

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

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

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

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

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

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

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

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

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

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

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Microsoft Office Excel

Microsoft Office Excel 1 Microsoft Office Excel Introdução ao Excel Um dos programas mais úteis em um escritório é, sem dúvida, o Microsoft Excel. Ele é uma planilha eletrônica que permite tabelar dados, organizar formulários,

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

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

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

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

Apostila Básica de Informática Ensino Fundamental Volume 4

Apostila Básica de Informática Ensino Fundamental Volume 4 Apostila Básica de Informática Ensino Fundamental Volume 4 1 Introdução:... 3 A Tela do Excel... 3 Criando uma nova pasta de trabalho... 3 Diferença entre Pasta de Trabalho e Planilha.... 4 Salvando sua

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

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

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

APOSTILA DE FRONTPAGE 2000

APOSTILA DE FRONTPAGE 2000 APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias

Leia mais

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO SUMÁRIO 01 - INTRODUÇÃO 02 - INICIANDO O WORD 03 - INSERIR TEXTO 04 - SALVAR UM DOCUMENTO 05 - FECHAR UM DOCUMENTO 06 - INICIAR UM NOVO DOCUMENTO 07 - ABRIR UM DOCUMENTO 08 - SELECIONAR TEXTO 09 - RECORTAR,

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

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

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

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

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

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

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Tutorial Word 2007. Estilos. 1. Estruturação do Documento. 1.1 Mapa do documento. Tutorial Word 2007

Tutorial Word 2007. Estilos. 1. Estruturação do Documento. 1.1 Mapa do documento. Tutorial Word 2007 Tutorial Word 2007 Este tutorial pretende introduzir algumas das ferramentas automáticas do Word para a geração de sumários, índices de figuras ou tabelas, referencias e citações automáticas ao longo do

Leia mais

Apostila Microsoft Word 2000

Apostila Microsoft Word 2000 Apostila Microsoft Word 2000 SUMÁRIO I. INTRODUÇÃO II. INSERIR TEXTO III. SALVAR UM DOCUMENTO IV. FECHAR UM DOCUMENTO V. INICIAR UM NOVO DOCUMENTO VI. ABRIR UM DOCUMENTO VII. SELECIONAR TEXTO VIII. RECORTAR,

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

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

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET UNIVERSIDADE ESTADUAL DE MARINGÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITÁRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISÃO DE TREINAMENTO E DESENVOLVIMENTO TDE DESENVOLVIMENTO DE PÁGINAS

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

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

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

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

Lição 2: aperfeiçoando e publicando um site...4 Aprendendo mais sobre o FrontPage...5. Abrindo o FrontPage...7 Visão geral da área de trabalho...

Lição 2: aperfeiçoando e publicando um site...4 Aprendendo mais sobre o FrontPage...5. Abrindo o FrontPage...7 Visão geral da área de trabalho... Tutorial do Microsoft FrontPage 2002 Conteúdo Introdução...3 Antes de começar...3 Visão geral...3 Se houver um software de servidor Web instalado...4 FrontPage e Microsoft Internet Explorer...4 Se você

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃ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

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

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

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

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

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

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

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica Apresentação Gráfica Microsoft Office Power Point 1 Sumário 1. MICROSOFT POWER POINT... 4 1.1. INICIANDO O MICROSOFT POWER POINT... 4 2. CONHECENDO A INTERFACE DO POWER POINT... 5 2.1. O DOCUMENTO DO POWER

Leia mais

Microsoft Word INTRODUÇÃO

Microsoft Word INTRODUÇÃO INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,

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

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

Manual de Utilização do PLONE (Gerenciador de página pessoal)

Manual de Utilização do PLONE (Gerenciador de página pessoal) Manual de Utilização do PLONE (Gerenciador de página pessoal) Acessando o Sistema Para acessar a interface de colaboração de conteúdo, entre no endereço http://paginapessoal.utfpr.edu.br. No formulário

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

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO Atualização 01/10/2001 2 Objetivo Este treinamento é dirigido a pessoas que desejam aprender como aplicar e criar estilos; criar e formatar tabelas; adicionar formatações

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

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

EDITOR DE TEXTO BROFFICE WRITER

EDITOR DE TEXTO BROFFICE WRITER 1 1 Editor de Texto BrOffice Writer O Writer é o editor de texto do pacote OpenOffice, que corresponde ao Microsoft Word. Um editor de texto é um programa com recursos para formatação de texto que poderá

Leia mais

PREFEITURA MUNICIPAL DE PINHAIS ESTADO DO PARANÁ

PREFEITURA MUNICIPAL DE PINHAIS ESTADO DO PARANÁ NOVEMBRO / 2007 17 APRESENTAÇÃO Este material foi solicitado pela Secretaria Municipal da Administração SEMAD, e elaborado com o intuito de capacitar os servidores desta prefeitura, de todos os cargos

Leia mais

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar WINDOWS XP Wagner de Oliveira ENTRANDO NO SISTEMA Quando um computador em que trabalham vários utilizadores é ligado, é necessário fazer login, mediante a escolha do nome de utilizador e a introdução da

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

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

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 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

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

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Em dupla: (se sobrar um aluno poderemos ter apenas um trio). Construir um site de 10 páginas, no mínimo, sendo a primeira o INDEX; O site deverá

Leia mais

Programação HTML Construção de Páginas para WEB 47

Programação HTML Construção de Páginas para WEB 47 Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta

Leia mais

Os elementos básicos do Word

Os elementos básicos do Word Os elementos básicos do Word 1 Barra de Menus: Permite aceder aos diferentes menus. Barra de ferramentas-padrão As ferramentas de acesso a Ficheiros: Ficheiro novo, Abertura de um documento existente e

Leia mais

StarOffice Módulo StarWriter

StarOffice Módulo StarWriter Gerência de Transferência Tecnológica - GTTEC StarOffice Módulo StarWriter Autora Daniela Cristina Maestro Fevereiro/2000 Gerência de Transferência Tecnológica - GTTEC Índice Requisitos para Instalação...

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

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

Leia mais

Como criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

Leia mais

Editando textos no Siga-Doc

Editando textos no Siga-Doc Editando textos no Siga-Doc Introdução...2 Executando o editor de textos...3 Acessando pela primeira vez...3 Se o editor de textos não for exibido...4 Trabalhando com tabelas...6 Inserindo uma tabela...6

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

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Licenciamento de Uso

Licenciamento de Uso Licenciamento de Uso Este documento é propriedade intelectual 2002 do Centro de Computação da Unicamp e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo Centro de Computação da Unicamp

Leia mais

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word PowerPoint 2013 Sumário Introdução... 1 Iniciando o PowerPoint 2013... 2 Criando Nova Apresentação... 10 Inserindo Novo Slide... 13 Formatando Slides... 15 Inserindo Imagem e Clip-art... 16 Inserindo Formas...

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

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

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

Microsoft Excel 2010

Microsoft Excel 2010 Microsoft Excel 2010 Feito por Gustavo Stor com base na apostila desenvolvida por Marcos Paulo Furlan para o capacitação promovido pelo PET. 1 2 O Excel é uma das melhores planilhas existentes no mercado.

Leia mais

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS Página 1 Titulo do Manual Manual de Geração e Disposição de Imagens Elaboração Humberto Heitor de Lima Matheus Versão 1.0 Data Elaboração 03/03/2011 Paginas 48

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem METEP MICROSOFT OFFICE WORD Professor Me. Silvio Silvestre Barczsz Objetivos de Aprendizagem Utilizar o Software Word como ferramenta para edição de textos. Plano de Estudo A seguir, apresentam-se os tópicos

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com

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

SisLegis Sistema de Cadastro e Controle de Leis

SisLegis Sistema de Cadastro e Controle de Leis Sistema de Cadastro e Controle de Leis Desenvolvido por Fábrica de Software Coordenação de Tecnologia da Informação Pág 1/22 Módulo: 1 Responsável: Desenvolvimento Ti Data: 01/11/2012 Versão: 1.0 Empresa:

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

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