Web Design Livre. do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Web Design Livre. do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius"

Transcrição

1 Web Design Livre do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius

2 GIMP 1. Introdução GIMP é o acrônimo para GNU Image Manipulation Program (Programa de Manipulação de Imagens do GNU). Como o próprio nome diz, é um programa para manipulação de imagens que possui código aberto, ou seja, qualquer um que entenda pode ter acesso ao código-fonte do programa e modificá-lo e/ou melhorálo, desde que o novo código também seja disponibilizado para os mesmos fins. Inicialmente criado como uma alternativa ao famoso Photoshop, o GIMP vem ganhando cada vez mais renome na área de softwares voltados a edição de imagens. Ele pode ser adquirido de forma gratuita, através do seu site oficial ( tanto para Linux quanto para Windows e até mesmo para o sistema operacional da Apple, Mac OS X. 2. Primeiras impressões e algumas definições básicas Nesta secção serão abordados alguns dos elementos principais da interface do GIMP, além de conceitos básicos sobre o mesmo e manipulação de imagens 2.1 Interface: Janelas e Painéis. Ao abrir o programa podemos observar duas janelas, diferente da maioria dos softwares de edição de imagens que possuem apenas uma. A primeira janela consiste na famosa caixa de ferramentas, que contém as funções mais utilizadas na edição de imagens. Nesta mesma janela há também as propriedades das ferramentas, que será abordada de forma detalhada mais à frente. Na outra janela temos, por padrão, o diálogo de camadas, canais, vetores e histórico de desfazer. Esta pode ser customizada da forma que o usuário achar melhor. Portanto, fique a vontade para adicionar e/ou remover abas de acordo com suas necessidades. Interface Padrão do GIMP

3 À esquerda a caixa de ferramentas juntamente com as suas propriedades. À direita, diálogos auxiliares de camadas, canais, vetores e histórico de desfazer. 2.2 Criando uma nova imagem Para criar uma nova imagem, basta ir em Arquivo e, em seguida, Nova... A janela que se abrirá contém as informações: Modelo, Tamanho da Imagem e Opções Avançadas. Em Modelo, há vários tamanhos e resoluções pré-definidos que são utilizados com bastante freqüência por designers, ilustradores, etc. Dentre eles temos resoluções clássicas como 800x600, 1024x768, tamanho de papel A4, capa de CD s, banners para websites dentre outros. Em Tamanho da Imagem é possível escolher as dimensões da imagem a ser criada, definindo altura e largura, juntamente com a unidade de medida desejada, podendo ser em pixels, polegadas, milímetros, etc. Mais abaixo há a orientação da imagem, em Retrato ou Paisagem. Expandindo as Opções Avançadas, encontramos opções de resolução, modo de cor e de preenchimento. Na parte de resoluções podemos escolher a unidade de medida utilizada (pixels por polegada, por milímetro, pontos) e a resolução para altura e largura. Para exibições em monitores, como banners, websites e ilustrações, é recomendado utilizar 72dpi. Se a finalidade for impressão recomenda-se utilizar no mínimo 300dpi. Em espaço de cor há as opções RGB (Red, Green, Blue; cores primárias para exibições coloridas) e em tons de cinza. O GIMP ainda não possui suporte a CMYK (Ciano, Magenta, Amarelo e Preto), padrão utilizado para impressão. Em Preencher com, pode-se definir o preenchimento da nova imagem. Cor de frente, é a cor encontrada na frente na paleta de cores situada na caixa de ferramentas e a cor de fundo é a que se encontra por trás. Ambas podem ser definidas pelo usuário. Branco preencherá a imagem com branco, logicamente. Por fim, transparência cria uma imagem transparente, sem fundo algum. Comentário, como o próprio nome diz, aplica um comentário à imagem. Caixa de diálogo de criação de nova imagem

4 2.3Abrindo Imagens No menu principal, Arquivo e então Abrir... Uma caixa de diálogo aparecerá, onde você poderá navegar pelos arquivos do computador. Escolha a imagem a ser utilizada e ela aparecerá em outra janela independente, pronta para ser manipulada. 3. Navegação Ao lidar com imagens, às vezes nos deparamos com arquivos de alta resolução, com ótimas definições. Nestes casos, navegar pela imagem é estritamente necessário e a ferramenta Zoom facilita muito este trabalho. A seguir, veremos a ferramenta de zoom e suas propriedades, além de noções de movimentação e camadas. 3.1 Zoom Possui uma pequena lupa como ícone. Por meio dela é possível aproximar e distanciar a imagem de trabalho. Na caixa de diálogo das propriedades de ferramentas se encontram três opções. A primeira é o redimensionamento automático da janela. Com esta opção marcada, a janela da imagem irá se ajustar automaticamente de acordo com a aproximação ou distanciamento. Mais abaixo há o modo da ferramenta. Note que o botão Ctrl alterna entre os modos. Por exemplo, se o modo de aproximação estiver selecionado, ao segurar a tecla Ctrl, o modo irá automaticamente para distanciamento. O mesmo acontece no sentido inverso. Opções da Ferramenta Zoom 3.2 Movimentação No GIMP há duas formas de movimentação. A primeira é por meio da ferramenta de movimento, representada por uma cruz com setas nas pontas. A outra é utilizando o terceiro botão do mouse (o botão do meio ou o scroll). A diferença é que a primeira move a imagem ou uma camada em torno da área de trabalho delimitada pelas dimensões pré-definidas ou pela resolução da imagem principal, enquanto que a segunda move a área de trabalho em si, mantendo a imagem intacta. Nas opções da ferramenta de movimento é possível escolher entre mover camadas, seleções ou vetores. 3.3 Camadas O GIMP, assim como a maioria dos editores de imagem, trabalha com camadas. Quando utilizamos várias imagens e elementos, com a finalidade de criar efeitos específicos, eles são representados através das camadas. Elas são como papéis transparentes sobrepostos, contendo os elementos ou imagens. Por

5 exemplo, ao criar uma nova imagem, ela terá somente o fundo, que pode ser de alguma cor ou transparente. Este fundo consiste em uma camada. Se criarmos uma nova camada e nela desenharmos um retângulo, teremos a impressão de que o retângulo foi desenhado no próprio fundo. Entretanto, o retângulo e o fundo são elementos independentes, formando uma única imagem e podendo ser manipulados separadamente. Para melhor entendimento, crie uma imagem com fundo transparente (Arquivo > Nova... > Opções Avançadas > Preencher com: Transparente > Ok). Note que a imagem criada é composta por um padrão quadriculado (esta é a representação de transparência). Imagem de camada única e transparente Os quadriculados representam transparência. À direita temos o diálogo de camadas, mostrando as camadas existentes e a ordem em que se encontram. Agora, na caixa de diálogo de camadas, clique no papel em branco na parte inferior para criar uma nova camada e, utilizando a ferramenta Pincel, faça um desenho qualquer na nova camada criada.

6 Figura 1 Figura 2 Figura 1 Botão criar nova camada. Figura 2 Nova camada criada e modificações aplicadas à mesma. Note que a nova camada ficou acima da camada de fundo. Se o fundo fosse branco, por exemplo, e o posicionássemos acima da nova camada, a imagem ficaria totalmente branca. Clicando no ícone do olho podemos escolher visualizar ou não a camada selecionada. Nova camada com outros elementos

7 Camada 1 oculta A Camada1 não está visível, mas ainda está presente na imagem. Camada 3 Uma camada totalmente preenchida e acima das outras. Cada camada possui seu nível de opacidade. Quanto menor o nível, menor a visibilidade da camada.

8 Camada 3 com 60% de opacidade Não há limite para o número de camadas, assim como as possibilidades ao utilizá-las. Caso algo tenha saído errado, não se preocupe. Todas as suas ações foram armazenadas na memória e é possível revertê-las na caixa de diálogo do histórico de desfazer. Histórico de Desfazer 4. Ferramentas

9 A seguir serão abordadas as principais ferramentas do GIMP e suas propriedades. Caixa de Ferramentas 4.1 Seleção Conhecida por todos que um dia já utilizaram um editor de imagens, a ferramenta de seleção delimita uma área a ser trabalhada na imagem. É representada por tracejados. As cinco formas principais de se fazer uma seleção no GIMP são: Retangular, Elíptica, Livre, Contígua e Por Cor. Seleção Retangular: Seleção em forma de um retângulo, com dimensões definidas pelo movimento do mouse. Basta clicar em um ponto e arrastar. Ao soltar o clique a seleção está feita. Para fazer uma seleção em forma de um quadrado perfeito basta segurar a tecla shift após o início da seleção (se pressionado antes, o modo de adição de seleção é ativado). Segurando a tecla ctrl o ponto de início da seleção deixará de ser um dos cantos do retângulo, para ser o seu centro (pressionando antes da seleção, o modo de subtração de seleção é ativado). Seleção Elíptica: Possui a mesma função da seleção retangular, mas em formato de elipse. As funções do shift e ctrl também são as mesmas.

10 Seleção Livre: Também conhecida como Laço. A seleção é feita à mão livre com o mouse. Utilizada geralmente quando se faz necessária a seleção irregular de algum ponto da imagem. Seleção Contígua ou Varinha Mágica: Seleciona áreas vizinhas de cores similares à do pixel clicado pelo mouse. Seleção por cor: Praticamente a mesma função da seleção contígua. A diferença é que a seleção por cor seleciona regiões de cores semelhantes em toda a imagem, e não somente nas regiões vizinhas. As ferramentas de seleção possuem algumas propriedades peculiares. Elas estão acessíveis no diálogo de propriedades de ferramenta. São elas: Substituição: Simplesmente irá descartar a última seleção após fazer uma nova. Adição: Une uma segunda seleção à primeira. Muito útil quando for necessário selecionar duas ou mais áreas distintas onde não é possível selecioná-las com um único passo. Subtração: Operação contrária a adição. Ela irá subtrair da primeira seleção a área demarcada pela segunda seleção. Intersecção: Utiliza os mesmos princípios da intersecção de conjuntos presentes na matemática. Apenas a área que as duas seleções têm em comum permanecerá. Modos de seleção Enevoar: Desfoca as bordas da seleção, causando um efeito de curvas suaves, ao invés de quinas pontiagudas. Selecionando esta opção um valor será solicitado. Quanto maior o valor, maior a espessura da borda a ser desfocada. Cantos Arredondados: Presente somente na seleção retangular. Possibilita a criação de retângulos com cantos arredondados de acordo com um valor definido. É possível também fazer a seleção com um tamanho fixo, seja de largura, altura ou os dois. Basta marcar a opção Fixo e definir os valores.

11 Opções da Ferramenta Seleção Retangular 4.2 Transformação Rotacionar: Realiza a rotação de imagens ou áreas selecionadas, no sentido horário ou anti-horário. Redimensionar: Redimensiona a imagem ou área selecionada para outro tamanho. Inclinar: Inclina a imagem ou área selecionada para outros ângulos. Perspectiva: Altera a localização de pontos da imagem ou área selecionada, criando uma alteração de perspectiva, simulando um efeito de terceira dimensão. Espelhar: verticalmente. Inverte a imagem ou área demarcada horizontal ou 4.3 Desenho Lápis Uma das ferramentas mais comuns de desenho à mão livre. Possui várias opções de customização como tamanho e formato. Similar ao pincel, no entanto, o lápis faz desenhos com linhas rígidas, enquanto que o pincel oferece linhas suaves.

12 Opções da ferramenta Lápis Pincel: Altera o tamanho e formato da ponta do lápis. Escala: Entre valores de 1 a 10, define o raio do traço. Dinâmica de pincel: Configura propriedades do lápis para serem utilizadas com dispositivos de entrada, que possuem recurso de sensibilidade de pressão. Esvanecer: Torna o traço transparente de forma gradativa após certo comprimento especificado. Espalhar: Espalha o traço de acordo com um valor definido. Incremental: Simula a aplicação de um traço sobre o outro, intensificando a cor do traço na região. Usar cores do degradê: Permite utilizar cores em degradê junto com a ferramenta. Pincel Como dito anteriormente, possui as mesmas propriedades do lápis, com a diferença de realizar um traço mais suave. Borracha Ao contrário das funções exercidas pelo lápis e pincel, a borracha apaga regiões da imagem com o auxílio do mouse. Possui as mesmas propriedades das ferramentas de desenho, com a adição de outras duas: Borda Dura: Habilita bordas duras no lugar de bordas suaves. Anti Borracha: Reconstrói regiões apagadas da imagem com a borracha.

13 Aerógrafo Simula um aerógrafo real, semelhante a um spray, cujo jato de tinta é composto pela mistura entre um canal de tinta e um de ar sob pressão. Possui as mesmas propriedades do lápis e pincel, com a adição de outras duas: Taxa: Representa a taxa de velocidade de aplicação. Pressão: Simula a pressão de aplicação do aerógrafo. Tinta Cria traços e desenhos simulando uma caneta-tinteira. Opções da ferramenta Tinta Ajuste: Define o tamanho e o ângulo do traço. Sensibilidade: Ajusta a sensibilidade de acordo com o tamanho, inclinação e velocidade. Tipo: Forma da ponta de aplicação da tinta. Forma: Possibilita deformações no formato de ponta selecionado. 4.4 Preenchimento Também conhecido como Balde de Tinta. A ferramenta de preenchimento colore regiões da imagem.

14 Opções de Preenchimento Modo: Define o modo de preenchimento que será aplicado. Opacidade: Indica a transparência do preenchimento. Numa escala de 0 a 100, quanto maior o valor menor a transparência. Tipo de preenchimento: Seleciona se o preenchimento será feito com a cor de frente, de fundo (ambas definidas na caixa de ferramentas) ou com uma textura. Área Afetada: Define se o preenchimento será feito em toda a região selecionada ou apenas nas cores similares ao pixel selecionado. Preencher áreas transparentes: Preenche áreas transparentes. Usar amostra combinada: Utiliza uma camada como guia de cores similares, armazenando o resultado do preenchimento em outra camada. 4.5 Mistura A mistura ou degradê aplica uma transição suave entre cores para realizar efeitos de iluminação e três dimensões.

15 Opções de Mistura Degradê: Seleciona dentre uma lista de degradês pré-definidos. Deslocamento: Define a porcentagem do tamanho do traço que iniciará o efeito de degradê. Só possui efeito em ferramentas de desenho. Forma: Formato da transição das cores. Pode ser Linear, Radial, Cônico, Espiral, etc. Repetir: O degradê terá o tamanho definido pela reta criada com o mouse. Amostragem Adaptativa: Suaviza ainda mais a transição de cores. Selecionando-o, nos deparamos com dois parâmetros. Profundidade máxima consiste no raio de atuação da amostragem adaptativa. Limite controla a intensidade da variação de cor entre pixels próximos. Também é possível criar seu próprio degradê. Basta clicar no botão Novo na caixa de diálogo de degradê. 4.6 Clonagem Pinta partes da imagem utilizando texturas ou a própria imagem como base. Muito utilizada para restaurar fotos danificadas ou retocar modelos fotográficos (remover acne, manchas na pele e imperfeições). Pressionando a tecla ctrl, o cursor do mouse torna-se uma pequena mira. Ao clicar em uma área da imagem com o ctrl pressionado, a ferramenta armazenará as informações referentes àquela área. Deixando de pressionar a tecla e em seguida clicando em outra região da imagem, as informações passarão para esta nova área. 4.7 Desfocar Com esta ferramenta é possível tanto desfocar uma região da imagem quanto torná-la mais nítida. Esta opção pode ser alternada por meio da tecla ctrl. 4.8 Borrar

16 Proporciona retoques suaves em bordas ou imagens com aspecto rígido. As cores da área aplicada se misturam e borram, de acordo com a intensidade desejada. Comumente utilizada em montagens, recortes, clonagens, etc.

17 HTML 1. A linguagem HTM O que é HTML? HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é considerada a base de todas as outras linguagens de desenvolvimento de páginas para Web. Com função de compartilhar fotos, vídeos, músicas, textos e muito mais. Desenvolvida por Tim Berners-Lee, essa linguagem tinha como objetivo fazer com que dispositivos diversos pudessem visualizar as informações da Web: PCs com placas de vídeo; telefones celulares; dispositivos para processar entrada e saída de voz e outros. Ficou popularizado pelo aparecimento do browser Mosaic (o primeiro navegador gráfico da Web). Como o nome diz a HTML é uma linguagem de marcação e de hipertexto, ou seja, nada mais do que indica partes especiais em um texto simples. Por exemplo: trechos em negritos, em itálico, com outra fonte, com uma tabela, com inserção de imagens, vídeos ou qualquer outro arquivo de multimídia suportado pelo navegador. Já quando dizemos que ela é uma linguagem de hipertexto estamos dizendo que tem como função interligar vários documentos através de um link (ou ligação) que não é nada mais que uma simples marcação em um texto indicando qual página que irá direcioná-lo depois que você clicar. Mas como é feito essa marcação? Através do que chamamos de tag s (etiquetas) e seus respectivos atributos, como o exemplo a seguir: <TAG atributo1= formatado</tag> valor1 atributo2= valor2 >Texto a ser O HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões oficiais e padronizadas são publicadas pelo World Wide Web Consortium (ou W3C). Para que possamos começar a criar uma página em HTML só precisaremos de um simples editor de texto como o Kwrite, Kate, Gedit, ou um editor especializado para Web, salvar os arquivos no formato.html ou.htm e um navegador como o Firefox para testar os resultados Por que aprender HTML é importante? Existem vários programas editores de HTML (DreamWeaver, Front Page, Hot Dog, Star Web...) que codificam nossas ações em cima de um texto para códigos HTML. Para que, então, aprender HTML? Bom, os editores têm suas limitações, podendo apresentar resultados nem sempre esperados. Por não conter alguns recursos você vai querer aperfeiçoar cada vez mais a sua página e para que isso ocorra, precisará recorrer aos códigos HTML Fundamentos da linguagem HTML. Como foi dito anteriormente, uma página básica em HTML é um arquivo de texto simples contendo marcações em HTML que definem a formatação do mesmo. Quando o browser acessa o arquivo, ele procura os comandos que estão entre os caracteres "<" (menor que) e ">" (maior que). Podendo então reconhecer o comando e atribuindo a formatação para o texto mostrado na tela. Existem dois tipos de tag's: aqueles que são isolados, ou seja, não é preciso outra tag da mesma fechando a instrução, como o <BR />, <HR> e <P>, que representam respectivamente uma quebra de linha, uma barra lateral e um

18 novo parágrafo. O outro tipo é o que exige a inclusão de uma segunda tag complementar, indicando o final da seção, ela é a mesma tag, mas se diferencia por ter uma barra "/" como </FONT> ou </P>, que representam respectivamente uma finalização de uma formatação de texto e um final de parágrafo (pode ser opcional sua utilização). Para que sua página possa ser visualizada perfeitamente em outros navegadores utilizaremos o padrão W3C em cada página criada. Exemplos: <BODY></BODY> //corpo da página <CENTER></CENTER> //mantém o corpo da página ao centro <HTML></HTML> //marca do início do documento HTML <P></P> //parágrafo <DIV></DIV> //divisão <TABLE></TABLE> //tabela <FORM></FORM> //formulário <FONT></FONT> //estilo de fonte 2. As tags essenciais 2.1. Estrutura básica Para entendermos a estrutura básica de uma página em HTML vamos montar nossa primeira página. Primeiro abra um editor de texto, como o Kwrite, Gedit ou Kate. Digite as seguintes linhas: <html> <head> <title>minha Primeira Página em HTML!</title> </head> <body> <!-- Meu primeiro comentário --> <p align="center">essa é a minha primeira página em HTML!</p> </body> </html> Observação: Dependendo da codificação do seu navegador ou do seu computador, talvez seja necessário usar o conjunto de caracteres ISO-Latin-1. Esse suporte tem objetivo de compatibilidade para quem visualiza a sua página, podendo ser de outro lugar ou não. Para utilizar os caracteres especiais você deve ter conhecimento deles ou utilizar um editor de HTML que faz a codificação automaticamente. Vamos utilizar a nossa primeira página como teste. Onde temos os caracteres é substitua por

19 é e onde tem á substitua por á. Pronto?! No final desse tutorial eu colocarei a relação dos caracteres especiais para que possam aprender. BOAS DICAS: Sempre feche uma tag que você começou a usar. Mantenha suas tags sempre aninhadas (usando o tabulador), assim você melhora a compreensão quando for ler o código de suas páginas. Salve o arquivo com o nome primeiro.html. Agora visualize sua primeira página, abrindo o arquivo que você salvou com o Mozilla Firefox, será ele o nosso navegador padrão. Vamos entender agora o que cada tag significa: <HTML>...</HTML> Esta tag é a estrutura principal do arquivo HTML. Ele marca o início e o final da página. Sem ela o navegador não vai "entender" que o documento esta escrito na linguagem HTML. <HEAD>...</HEAD> Esta tag marca a área de cabeçalho. Em HTML é opcional, mas no basearemos no padrão W3C ela se torna indispensável. É nela que especificamos que iremos utilizar CSS, XML, Javascript ou outras linguagens ou metadados na página. <TITLE>...</TITLE> Responsável pelo título da página que aparece na barra de título da janela do navegador e sempre está dentro da tag <HEAD>. <BODY>...</BODY> Como diz o próprio nome, ele é o corpo do documento, tudo que estiver entre estas tags será exibido na tela do navegador. <! > Essa é uma tag de comentário, isso implica em dizer que o navegador irá ignorar o que estará inscrito dentro. <P>...</P> Esta tag informa que está sendo utilizado um novo parágrafo de texto. O atributo align= "center" significa que o texto está alinhado ao centro.

20 Curiosidade! Talvez você já tenha visto páginas da internet com as extensões.html e.htm mas muitos se perguntam qual a diferença entre elas. Ela está no fato de que alguns servidores ignorar a letra l. Se você enviar um arquivo para um servidor e quando for visualizá-lo e ele aparecer sem a letra possivelmente esse servidor seja em DOS Títulos Título do documento. Cada documento tem um título que é exibido na barra de título do navegador. Esse título deve ser escrito somente entre as tags <TITLE>...</TITLE>. Quando o usuário utiliza uma ferramenta de busca como Google, Yahoo, Cadê, etc. procurando por um assunto específico, o conteúdo do marcador <TITLE> de uma página é a primeira coisa a ser vasculhada pelo navegador. Daí a grande importância em escolher títulos coesos para as páginas e que consigam traduzir o conteúdo da página em poucas palavras. Além disso, quando o usuário escolhe uma página para colocar em sua lista de Favoritos do browser, é o título da página que aparecerá na lista. Caso a página não tenha o marcador <TITLE> ou ele não conter nada, o browser assumirá o nome do arquivo. Boa Dica: Colocar títulos com ponto na frente do nome é uma estratégia para que sua página sempre esteja no topo dos favoritos, caso ele s estejam em ordem alfabética. Exemplo:..:: Titulo da Página ::.. ou ::.. Titulo da Página..:: Título de seção ou cabeçalho. Dentro das tags <body>...</body> podemos definir seções ou cabeçalhos, por meio das tags <Hn>... </Hn> as quais são utilizadas para criar cabeçalho na área de visualização. Existem seis tamanhos prefixados de cabeçalho, sendo que n pode variar de 1 a 6. (quanto menor o número maior o cabeçalho) Abra novamente o editor de texto e crie um novo arquivo chamado cabecalho.html com o código abaixo: <html> <head> <title>exemplo de Cabeçalhos</title> </head> <body bgcolor="#a98151"> <center> <h1>cabeçalho DE TAMANHO 1</h1> <h2>cabeçalho DE TAMANHO 2</h2>

21 <h3>cabeçalho DE TAMANHO 3</h3> <h4>cabeçalho DE TAMANHO 4</h4> <h5>cabeçalho DE TAMANHO 5</h5> <h6>cabeçalho DE TAMANHO 6</h6> </center> </body> </html> Salve o arquivo e abra no navegador. Note que colocamos uma cor de fundo na página, essa característica é dada pelo atributo bgcolor e seu valor "#a98151" que indica as cores RGB (Red, Green e Blue) em hexadecimal. Outra característica da nossa página é que o alinhamento de todos os cabeçalhos está sendo feito pela tag <center>, se tirarmos ele todo o texto ficará alinhado no modo padrão, a esquerda da página. Outra maneira de fazer alinhamento no cabeçalho é utilizando o atributo aling dentro da tag <Hn>. Apague a tag <center> e acrescente o atributo aling mais um dos valores que ele suporta, right, left, center ou justify. Exemplo: <h1 aling= center >CABEÇALHO DE TAMANHO 1</h1> Salve o arquivo e verifique a mudança atualizando a página (Tecla F5).

22 3. Formatando o texto 3.1. Parágrafos e quebra de linha. Não podemos fazer parágrafos simplesmente dando uma ENTER ou ESPACE, em HTML existem tags próprias para indicar ao navegador isso, são elas: <P>...<P> Indica um novo parágrafo, o comando de fechamento da tag pode ser omitido quando não houver mais nenhum parágrafo seguinte, caso contrário o navegador interpreta como sendo ainda do mesmo parágrafo. Também suporta o atributo de alinhamento align e title (que indica um título ao parágrafo). <BR/> Tag para quebra de linha. Não utiliza fechamento. Crie um novo arquivo chamado paragrafo.html e insira o código: <html> <head> <title>parágrafo</title> </head> <body> Esse é o meu primeiro parágrafo de teste. Esse já é o meu segundo parágrafo de teste. <p> Agora com o marcador de parágrafo.</p> E sua linha seguinte. </body> </html>

23 Salve o arquivo e visualize no navegador. Note nos dois primeiros parágrafos que digitamos não houve quebra, apenas quando inserimos a tag <p> o navegador conseguiu interpretá-lo como sendo um novo parágrafo. Agora vamos utilizar a tag <BR/>. Insira a tag <BR/> depois do primeiro parágrafo que digitamos. Insira também a mesma tag antes da palavra marcador que se encontra no nosso terceiro parágrafo digitado. Salve e verifique a diferença.

24 Agora insira atributos dentro da tag <p> para ver como ela reage, salve e visualize. Exemplo: <p aling= center title= qualquer coisa >Algum texto aqui</p> Boa dica: Para uma melhor organização de um conjunto de parágrafos podemos utilizar a tag <div>. Ela junto com o atributo align evita que alinhemos todos os parágrafos que digitamos. Exemplo: <div align= right title= título1 > <p>primeiro parágrafo...</p>... <p>último parágrafo</p> </div> 3.2. Linhas Horizontais. Agora aprenderemos como utilizar a barra horizontal, que tem como objetivo separar tópicos distintos entre título e texto. <Hr> Tag de barra horizontal. Não é necessário ser fechado. Suporta quatro atributos: width -> indica o tamanho horizontal da barra, podendo ser em % ou em pixels. size -> indica o tamanho vertical (altura), escala em pixels. align -> indica o alinhamento da barra, center, right, left ou justify. color -> indica a cor da barra, escala em RGB hexadecimal #RRGGBB (exemplo #fca636). noshade -> indica se a barra não apresentará efeito 3D, o valor noshade anula o efeito 3D. Crie um novo documento e insira o código: <html> <head> <title> Barra Horizontal </title> </head> <body bgcolor="#d1a96a"> <h1 align="center">amor pra recomeçar - Frejat</h1> <HR size="8" color="#b78e58" align="right" noshade="noshade"/> <p align="center"> Eu te desejo não parar tão cedo<br/> Pois toda idade tem prazer e medo<br/> E com os que erram feio e bastante<br/>

25 Que você consiga ser tolerante<br/> Quando você ficar triste<br/> Que seja por um dia, e não o ano inteiro (...) </p> </body> </html> Salve com o nome barra.html e visualize no seu navegador. Já que estamos nos baseando no padrão W3C, o atributo color deve ser inserido dentro de outro atributo, o style. O style fornece um meio de incluir informações de formatação e estilos de folha. O padrão do style é o CSS (Cascading Style Sheets). Troque então a linha da barra horizontal por esta abaixo, salve e visualize o resultado: <HR size="8" style="color: #b78e58;" align="right" noshade="noshade"/> O resultado é o mesmo, mas lembre-se que estamos nos baseando no padrão W3C. Insira o atributo width e algum valor para teste, pode ser em % ou em pixels, salve e visualize a página. 4. Personalizando a página 4.1. Alterando a fonte.

26 Para alteração de fonte, cor e tamanho, utilizamos a tag <font> e seus atributos color (cor da fonte, em #RRGGBB) size (escala de -2 a 7) e face (tipos de fonte, Arial, Trebuchet MS, Verdana...). Vamos agora fazer nossa formatação de texto, crie um novo arquivo chamado fonte.html e insira o código: <html> <head> <title> Mudando a propriedade da Fonte </title> </head> <body> <h1 align="center"><font face="courier New"> Garotos - Leoni </font></h1> <hr width= 80% align="center" size="8" color="gray"></hr> <p align="center"> <font size="2" color="gray" face="arial">seus olhos e seus olhares<br/> Milhares de tentações <br/> Meninas são tão <strong>mulheres</strong><br/> Seus truques e confusões <br/> Se espalham pelos pêlos <br/> Boca e cabelo <br/> Peitos e poses e apelos <br/> Me arragam pelas pernas <br/> Certas mulheres como você <br/> Me levam sempre onde querem <br/> Garotos não resistem (...)<br/> </font> </p> </body> </html> Salve e verifique o resultado.

27 Note que a fonte cinza está em todo o texto, devido a segunda tag <font> está somente sendo fechada no final do corpo do texto, mas poderia ser fechada onde desejar. Aproveite para brincar um pouco com os atributos e seus valores. Outra maneira de modificar a fonte é utilizando o atributo style dentro da tag <font>. Exemplo: <font style="font-family:arial; font-size:16px; color:#006699; backgroundcolor:#000000;" size="2" color="gray" face="arial">fonte azul com fundo preto<br/> Darei mais detalhes de propriedade de textos usando CSS no final desse tutorial caso contrário procure se informar um pouco mais sobre assunto na internet Aplicando cor ou imagem de fundo. Outro recurso bastante importante e que já utilizamos é aplicar cor no fundo da página. Esses recursos são dados dentro da tag <body>. Outras propriedades que podemos dar a página são: a inserção de imagem como fundo da página, atribuir a cor de todo o texto que será utilizado na página, as cores das palavras com link (visitados e ativos) e a distância do corpo da página ao topo (margem). Abaixo a lista dos atributos mais importantes e os parâmetros para seus valores. Atributo Função Valor bgcolor Cor de fundo cores especificas ou no formato #RRGGBB background Imagem de fundo url (endereço) da imagem de fundo. text Cor de todos os texto cores especificas ou no formato #RRGGBB Link Cor dos links cores especificas ou no formato #RRGGBB

28 alink Cor dos links ativos cores especificas ou no formato #RRGGBB vlink Cor de links visitados cores especificas ou no formato #RRGGBB Agora vamos criar um exemplo simples para demonstrar esses atributos. Crie um novo arquivo chamado pagina_pessoal.html e crie uma página do seu estilo, com cores de fontes, cores de fundo ou imagem de fundo. Mais adiante explicarei como aplicar links em texto ou imagens, mas deixarei um exemplo simples para que possa testa as cores. Exemplo: <a href= >Clique aqui para ir para o Google</a> 4.3. Aplicando estilos de texto. Vamos mostrar algumas tags de formatação de estilo de fonte em HTML que podem ser utilizados nos textos inseridos. <B>...</B> Coloca o texto em negrito. <BIG>...</BIG> Exibe o texto com uma fonte maior. <I>...</I> Exibe o texto em itálico. <U>...</U> Exibe o texto sublinhado <SMALL>...</SMALL> Exibe o texto com uma fonte menor. <STRIKE>...</STRIKE> Exibe o texto riscado. <TT>...</TT> Exibe o texto com uma fonte mono espaçada, geralmente uma variação de Courier. Essas tags de formatação são o que chamamos de tags de formatação física, pode ser utilizada uma dentro da outra por exemplo. Essa formatação permite que em um mesmo trecho de texto possa ser aplicados em mais de um

29 formato, esse apenas sugerem um tipo de ênfase a ser dada no texto. Podendo também utilizar várias outras atribuições com o atributo style dentro deles (exceto Strike e U). Agora vamos utilizar as tags de formatação. Abra um novo arquivo de texto e insira o código: <html> <head> <title>formatando um Texto</title> </head> <body> <B>TEXTO EM NEGRITO</B><BR/> <BIG>TEXTO EM FONTE MAIOR</BIG><BR/> <I>TEXTO EM ÍTALICO</I><BR/> <U>EXIBE O TEXTO SUBLINHADO</U><BR/> <SMALL>TEXTO EM FONTE MENOR</SMALL><BR/> <STRIKE>TEXTO RISCADO</STRIKE><BR/> <TT>EXIBE O TEXTO USANDO UMA FONTE EM TAMANHO FIXO</TT> </body> </html> Salve o arquivo como estilo_texto.html e visualize no Firefox. Outras tag de formatação: <BLOCKQUOTE>...</BLOCKQUOTE> Destaca o texto deixando-o com uma margem maior, uma citação.

30 <CITE>...</CITE> Exibe o texto em itálico e é utilizado para citações de livros, filmes, obras, etc. <CODE>...</CODE> Exibe o texto em fonte tamanho fixo (como Courier) e é utilizado para identificar trechos de códigos de programas. <STRONG>...</STRONG> Exibe o texto em negrito e é utilizado para destacar um texto. Essas tag são o que chamamos de tags de Formatação lógica, elas ajuda na formatação de textos dando uma melhor compreensão do que está sendo lido.

31 6. Links O link é o recurso mais poderoso da linguagem HTML. Conhecido como hiperlink ou hipertexto o link é a ligação de uma página a outra dentro ou fora do site. Os links podem ser vinculados com textos, sons, imagens, vídeos, etc. A criação de um link é simples, utiliza-se apenas uma tag chamada âncora <A></A>. Os lados de uma ligação de hipertexto são definidos da seguinte maneira: o lado onde ela parte é chamado de link e o lado de chegada chama-se âncora. Seus parâmetros são HREF (Hipertest Reference) e NAME. <A HREF= URL > PAGINA </A> âncora de partida, que se refere ao hipertexto a ser localizado por meio do endereço fornecido pela URL. PAGINA aparecerá na Home Page em destaque indicando que é um link. Quando o usuário rolar o mouse em cima da palavra PAGINA e der um clique, imediatamente o link o levará para a página de destino Links relativos. São os links que têm relação direta com o diretório raiz da home page, quer dizer, os arquivos estão na mesma pasta. Para acessá-los, é só informar o nome do arquivo. Exemplo: <a href= listas.html >Link para a Página Listas</a> listas.html é o nome do arquivo HTML que monta a página com os exemplos dos diferentes tipos de listas. Agora vamos utilizar um arquivo já criador como exemplo. Abra o arquivo fonte.html. Modifique a linha: Certas mulheres como você </a><br/> Por: Certas <a href="barra.html">mulheres como você </a><br/> 6.2. Links absolutos. Este tipo de link permite acesso a qualquer página ou arquivo existente em outro diretório ou na internet, que pode estar em qualquer parte do planeta. Para este tipo de acesso é necessário o endereço absoluto de uma URL (URL é a abreviação de Uniform Resource Locator e serve para especificar o endereço de uma Home Page), que não depende da página atual. Exemplo: <a href= > Portal UERN </a> 6.3. Links na mesma página. Quando um documento tem trechos muito longos, é preciso criar uma âncora para acessar esses trechos. A sintaxe do link de referência para um trecho de um documento deve conter o caractere especial # (tralha) seguido do endereço da âncora de chegada.

32 Âncora de Saída <a href= #Referência >Ir para baixo</a> Âncora de chegada (trecho) <a name= Referência >TRECHO</a> NAME quando a âncora vier acompanhada deste parâmetro, na verdade ela esta indicando o ponto de chegada (URL que foi referenciada no link), que é o endereço de um trecho (tópico) de um documento. Colocada em lugar estratégico no texto, para indicar onde o assunto se inicia. Deve ter a mesma URL do link de referência para ele (o link de referência) possa encontrar o trecho referenciado. 7. Imagens Uma página fica bem mais atraente quando existem imagens para ilustrar seu conteúdo. No entanto, é preciso ter cuidado com a quantidade de imagens, pois elas influenciam e muito o carregamento da página. É muito simples inserir uma imagem. Só é preciso saber que os formatos aceitos são GIF, JPG, JPEG, PNG ou SVG e as seguintes tags: <img src= nomedaimagem.extensão width= largura height= altura > Outros parâmetros da tag IMG: border: permite alterar a largura da borda da imagem (em pixels). hspace: define a margem em branco nas laterais (esquerda e direita) da imagem evitando que o texto fico encostado na figura (em pixels). vspace: define a margem em branco nas partes superior e inferior. Os valores são em pixels (em pixels). alt: usado para inserir um texto alternativo, que aparece quando o cursor aponta para a figura. width: permite alterar a largura da imagem, aumentando ou diminuindo-a em relação ao seu tamanho original. São aceitos valores em quantidade de pixels ou em porcentagem da tela (em pixels ou em %). height: determina a altura da imagem, aumentando ou diminuindo-a em relação ao seu tamanho original. São aceitos valores em quantidade de pixels ou em porcentagem da tela (em pixels ou em %). align: alinhamento absoluto da imagem (os valores podem ser: absbottom, absmiddle, baseline, bottom, middle, texttop, top, left, right). Vamos inserir nossa primeira imagem no corpo do texto. Crie um novo arquivo chamado imagem.html e insira o código: <html> <head> <title>inserindo uma imagem</title> </head> <body> Testando o texto junto a imagem <img src="ubuntu.png" width="269" height="70" alt="ubuntu" align="middle"/>continuando o texto </body> </html>

33 Verifique se a imagem está no mesmo diretório do arquivo em HTML, salve e visualize no navegador. Utilize os outros atributos, salve e verifique as modificações Imagem como link. Para que uma imagem funcione como um link, simplesmente inserimos a tag <img> dentro da tag <a></a>. Utilizaremos o exemplo anterior como exemplo. Abra o arquivo imagem.html e adicione um link a imagem do ubuntu para o site da UERN ( <a href= ><img src="ubuntu.png" alt="ubuntu" align="middle"/></a> width="269" height="70" Salve e teste o seu link criado. 8. Tabelas Tabelas correspondem a uma ótima organização de informações, desse modo foi incorporado à linguagem HTML. Atualmente vários sites utilizam esse recurso essencialmente para layout da página através do posicionamento das imagens e texto. As tabelas são simplesmente linhas separadas por colunas de conteúdo. Esse conteúdos podem ser qualquer tipo de mídia suportada pelo navegador ou até mesmo outra tabela. Nesse capítulo vamos tentar dominar a utilização da tabela, alinhamento, formatação, mesclagem.

34 8.1. As tags essenciais de uma tabela. A tag principal de uma tabela é a tag <table></table>, ela define que será utilizado uma tabela. A tag que define a criação de uma linda é a tag <tr></tr>, a tag de criação de coluna é <td></td> e a tag que define o nome das colunas é a tag <th></th>, ele destaca o texto com negrito e centraliza ao meio da coluna. Essas tags são ignoradas pelo navegador caso não estejam dentro da tag <table>. Uma tag opcional na tabela é a tag que define o nome da tabela <caption></caption>, na qual o texto contido nele, é uma rotulação tanto para toda a tabela como para colunas. Agora vamos mostrar um exemplo simples. Abra seu editor de texto e insira o código abaixo: <html> <head> <title> Criando minha primeira tabela </title> </head> <body> <table> <caption>esse é o título da minha tabela</caption> <tr> <th> Cabeçalho: linha1 e coluna1 </th> <th> Cabeçalho: linha1 e coluna2 </th> </tr> <tr> <td> Coluna: linha2 e coluna1 </td> <td> Coluna: linha2 e coluna2 </td> </tr> <tr> <td> Coluna: linha3 e coluna1 </td> <td> Coluna: linha3 e coluna2 </td> </tr> </table> </body> </html> Salve com o nome tabela.html e olhe no navegador.

35 Uma boa característica das tabelas é a formatação dos texto inseridos nela. Teste os atributos aling e valing (alinhamento vertical) dentro das tags <td></td>, <td></td> e <th></th> Os parâmetros assessórios de uma tabela. Você pode modificar a propriedade da tabela, como cor, borda, espaçamento, cor de fundo, imagem, etc. Abaixo a lista de atributos básicos para sua tabela: atributo, função, valores, exemplo Atributo Função Valores align Alinhamento horizontal Top, bottom, left, <td center, right align= center > border Espessura da borda Em pixels <table border= 4 > cellpadding Espaço entre a Em pixels borda e o conteúdo <table cellpadding= 2 > cellspacing Espaço entre as Em pixels células da tabela <table cellspacing= 5 > width Largura da tabela Em pixels ou por <td width= 50% > cento % Valing Alinhamento vertical Top, middle, <td valign= top > bottom, baseline Colspan Define quantas Número colunas o conteúdo vai abranger <td colspan= 2 > rowspan Define quantas Número linhas o conteúdo vai abranger <td rowspan= 2 > bordercolor Define borda Border rule Permite esconder none, rows, cols, all <table border quais células deve rule= cols > ser mostrado a cor Exemplo da Formato #RRGGBB <table bordercolor= #3f3f 3c > Além desses atributos as tabelas também aceitam atributos de páginas como background e bgcolor, title, style. Crie uma tabela e teste os atributos para modificar as propriedades da tabela.

36 Lista de Caracteres especiais ISO-Latin-1

37

38

39

40

41

42 Exemplo de cores em RGB

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

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

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML O Desenvolvimento Web O desenvolvimento web é o termo utilizado para descrever atividade relacionada

Leia mais

Aplicação para Web I. Começando a compreender o HTML

Aplicação para Web I. Começando a compreender o HTML Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando

Leia mais

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é : TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz

Leia mais

Aprendendo Corel Draw 2

Aprendendo Corel Draw 2 ÍNDICE Introdução Ferramentas do Trabalhando com cores Trabalhando com objetos Transformando objetos desenhados Clonagem de objetos Formatando objetos Preenchimentos e Contornos Preenchimento Gradiente

Leia mais

Desenvolvimento em Ambiente Web. HTML - Introdução

Desenvolvimento em Ambiente Web. HTML - Introdução Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,

Leia mais

Programação de Servidores CST Redes de Computadores

Programação de Servidores CST Redes de Computadores Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME APRESENTAÇÃO Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE WORD 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador:

Leia mais

Links e Frames José Antônio da Cunha

Links e Frames José Antônio da Cunha Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos

Leia mais

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

Autoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza 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 Apresentar

Leia mais

HTML Página 1. Índice

HTML Página 1. Índice PARTE - 1 HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página...

Leia mais

1. Introdução a Microsoft Excel

1. Introdução a Microsoft Excel Introdução a Microsoft Excel 1. Introdução a Microsoft Excel 1.1. O que é Microsoft Excel Microsoft Excel é um software de planilha eletrônica produzido pela Microsoft Corporation, para o sistema operacional

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM

Leia mais

Treinamento em BrOffice.org Writer

Treinamento em BrOffice.org Writer Treinamento em BrOffice.org Writer 1 Índice I. INTRODUÇÃO...3 II. BARRA DE FERRAMENTAS...3 III. CONFIGURAR PÁGINA...4 1. Tamanho, Margens e Orientação...5 2. Cabeçalhos...6 3. Rodapés...6 4. Numerando

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

A estrutura de um documento HTML apresenta os seguintes componentes: A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis

Leia mais

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML

Leia mais

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma

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

Noções de Informática

Noções de Informática Noções de Informática Caderno 2 CONTEÚDO MS-Excel 2010: estrutura básica das planilhas, conceitos de células, linhas, colunas, pastas e gráficos, elaboração de tabelas e gráficos, uso de fórmulas, funções

Leia mais

Scientific Electronic Library Online

Scientific Electronic Library Online FAPESP - CNPq BIREME - FapUNIFESP Scientific Electronic Library Online Manual de Codificação de Tabelas para xhtml Projeto PMC São Paulo Novembro 2013 INTRODUÇÃO Este manual tem o objetivo de mostrar passo

Leia mais

Questões de Informática 2011 - Editores de Texto

Questões de Informática 2011 - Editores de Texto 1. Existe uma operação específica no Word que serve para destacar um texto selecionado colocando uma moldura colorida em sua volta, como uma caneta "destaque" (iluminadora). Trata-se de a) "Cor da borda".

Leia mais

6.5. Renomeando Arquivos ou Pastas

6.5. Renomeando Arquivos ou Pastas 50 II. Para mover um arquivo, pasta, objeto dentro do Windows: 1) Clique com o mouse sobre a pasta, arquivo a serem movidos; 2) Mantenha o botão esquerdo do mouse pressionado; 3) Arraste o objeto para

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip janeiro 1996 Tutorial - Autoria em World Wide Web Parte IV - Hypertext

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

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo.

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo. O que é o Gimp? O GIMP é um editor de imagens e fotografias. Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover

Leia mais

O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais.

O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais. MICROSOFT WINDOWS O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais. Apresentaremos a seguir o Windows 7 (uma das versões do Windows)

Leia mais

Web Design Aula 11: XHTML

Web Design Aula 11: XHTML Web Design Aula 11: XHTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação HTML 1.0-2.0: Havia hipertextos, não havia preocupação com a apresentação HTML 3: Guerra dos Browser (Microsoft

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

CADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário

CADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário CADERNO DE INFORMÁTICA FACITA Faculdade de Itápolis Aplicativos Editores de Texto WORD 2007/2010 Sumário Editor de texto... 3 Iniciando Microsoft Word... 4 Fichários:... 4 Atalhos... 5 Área de Trabalho:

Leia mais

Aula 8 POWER POINT. Patrícia Soares de Lima. META Aprender a utilizar o Power Point como ferramenta pedagógica nas aulas de Química.

Aula 8 POWER POINT. Patrícia Soares de Lima. META Aprender a utilizar o Power Point como ferramenta pedagógica nas aulas de Química. Aula 8 POWER POINT META Aprender a utilizar o Power Point como ferramenta pedagógica nas aulas de Química. OBJETIVOS Ao final desta aula, o aluno deverá: Discutir, de forma breve, a utilização deste software

Leia mais

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

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

Configurando o estilo de Camada (Layer) no AutoCAD 2007

Configurando o estilo de Camada (Layer) no AutoCAD 2007 Configurando o estilo de Camada (Layer) no AutoCAD 2007 1 - Inicialmente, na Barra de Camadas clique no ícone (Gerenciador de Propriedades da Camada), para configurar o estilo de camada: 2 - Na caixa de

Leia mais

Universidade Federal do Espírito Santo

Universidade Federal do Espírito Santo Universidade Federal do Espírito Santo Núcleo de Tecnologia da Informação Gerenciamento do Conteúdo de Sítios Institucionais Versão 1.4 Atualizado em: 8/10/2015 Sumário Sumário................................................

Leia mais

FEMA Fundação Educacional Machado de Assis INFORMÁTICA Técnico em Segurança do Trabalho P OW ERPOI NT. Escola Técnica Machado de Assis Imprensa

FEMA Fundação Educacional Machado de Assis INFORMÁTICA Técnico em Segurança do Trabalho P OW ERPOI NT. Escola Técnica Machado de Assis Imprensa P OW ERPOI NT 1 INTRODUÇÃO... 3 1. Iniciando o PowerPoint... 3 2. Assistente de AutoConteúdo... 4 3. Modelo... 5 4. Iniciar uma apresentação em branco... 6 5. Modo de Exibição... 6 6. Slide Mestre... 7

Leia mais

INTRODUÇÃO À INFORMÁTICA GRUPO DE PESQUISA LEITURA NA TELA

INTRODUÇÃO À INFORMÁTICA GRUPO DE PESQUISA LEITURA NA TELA INTRODUÇÃO À INFORMÁTICA GRUPO DE PESQUISA LEITURA NA TELA Núcleo de Educação a Distância UniEvangélica 2 ÍNDICE 1 Introdução à Informática... 3 1. O Computador... 3 Teclado... 3 Mouse... 5 Monitor...

Leia mais

Verifique se o Plugin do Flash Player está instalado no seu computador para a navegação adequada no portal.

Verifique se o Plugin do Flash Player está instalado no seu computador para a navegação adequada no portal. 1 Tutorial: Blogs no Clickideia Introdução Esse tutorial mostrará as funções básicas da ferramenta de Blog do Portal Educacional Clickideia. Ele foi elaborado pensando em diferentes níveis de usuários

Leia mais

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação

MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos

Leia mais

Você vai começar criando o fundo Após criar o fundo, você aplicará o resto dos gráficos e texto da publicidade.

Você vai começar criando o fundo Após criar o fundo, você aplicará o resto dos gráficos e texto da publicidade. Trabalhar com layout Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Este tutorial apresenta as ferramentas de layout e organização

Leia mais

Profa. Reane Franco Goulart

Profa. Reane Franco Goulart Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente

Leia mais

6.2 - Formulários: form <form action="url_de_script" method="método">...</form> form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Professor Paulo Lorini Najar

Professor Paulo Lorini Najar Microsoft PowerPoint O Microsoft PowerPoint é uma ferramenta ou gerador de apresentações, palestras, workshops, campanhas publicitárias, utilizados por vários profissionais, entre eles executivos, publicitários,

Leia mais

UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE

UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE Luanna Azevedo Cruz Polyana Ribas Bernardes 2015 2015 1. INTRODUÇÃO Para utilizar as funcionalidades acesse o Moodle: http://moodle.ead.ufvjm.edu.br/ e clique

Leia mais

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Fireworks CS5 Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula 1.1. Novidades do Fireworks CS5...23 1.2. Área de Trabalho...24 1.2.1. Painel Ferramentas...25 1.2.2.

Leia mais

*Área de Trabalho* *Atalhos de teclado para Acessibilidade

*Área de Trabalho* *Atalhos de teclado para Acessibilidade *Área de Trabalho* *CTRL+A* - Selecionar tudo *CTRL+ESC* - Exibir o menu Iniciar *CTRL ao arrastar um item* - Copiar um item selecionado *CTRL+SHIFT ao arrastar um item* - Criar um atalho para um item

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

Amostra OpenOffice.org 2.0 Writer SUMÁRIO

Amostra OpenOffice.org 2.0 Writer SUMÁRIO Amostra OpenOffice.org 2.0 Writer SUMÁRIO 1. INTRODUÇÃO 2. INSERIR TEXTO 3. SALVAR UM DOCUMENTO 4. FECHAR UM DOCUMENTO 5. INICIAR UM NOVO DOCUMENTO 6. ABRIR UM DOCUMENTO 7. SELECIONAR TEXTO 8. RECORTAR,

Leia mais

Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá. LibreOffice Impress Editor de Apresentação

Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá. LibreOffice Impress Editor de Apresentação Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá LibreOffice Impress Editor de Apresentação Iniciando o Impress no Linux Educacional 4 1. Clique no botão 'LE' no

Leia mais

Índice. 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8

Índice. 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8 Textos no Flash Índice 1. Texto no Flash...1 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8 1. Texto no Flash Há três maneiras de se

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

Oficina de Manipulação e Edição de Fotografia e Imagem Digital GIMP

Oficina de Manipulação e Edição de Fotografia e Imagem Digital GIMP Oficina de Manipulação e Edição de Fotografia e Imagem Digital GIMP O que é o GIMP É um programa de criação e edição de imagens. Foi criado como uma alternativa livre ao Photoshop, ou seja, é um software

Leia mais

Migrando para o Word 2010

Migrando para o Word 2010 Neste guia O Microsoft Word 2010 está com visual bem diferente, por isso, criamos este guia para ajudar você a minimizar a curva de aprendizado. Leia-o para saber as partes principais da nova interface,

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

UNIDADE III Sistemas Operacionais WINDOWS

UNIDADE III Sistemas Operacionais WINDOWS UNIDADE III Sistemas Operacionais WINDOWS Objetivo da unidade Objetivo Geral Apontar as noções básicas do Windows Praticar o aprendizado sobre o Sistema Operacional Objetivos Específicos Entender como

Leia mais

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

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

Introdução ao HTML Utilizando frames Hospedando seu site na WEB

Introdução ao HTML Utilizando frames Hospedando seu site na WEB Introdução ao HTML Utilizando frames Hospedando seu site na WEB Por quê???? Por que com tantos editores gráficos de HTML, devemos saber como escrever um código fonte? Porque se você só viu páginas feitas

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

Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS. 1.1) Conceito de Planilha Eletrônica. 1.2) Inicializando o Excel e o Calc

Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS. 1.1) Conceito de Planilha Eletrônica. 1.2) Inicializando o Excel e o Calc Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS 1.1) Conceito de Planilha Eletrônica Em certa época, a planilha era um pedaço de papel que os contadores e planejadores de empresas utilizavam para colocar

Leia mais

SAMUEL INFORMÁTICA SEAP 11-02-2015. Curso Básico de MS Office Word 2010/BrOffice Writer

SAMUEL INFORMÁTICA SEAP 11-02-2015. Curso Básico de MS Office Word 2010/BrOffice Writer SEAP 11-02-2015 SAMUEL INFORMÁTICA Curso Básico de MS Office Word 2010/BrOffice Writer O MS-Word 2010 é um grande processador de texto onde realiza grande parte de serviços de escritórios, cartas, currículos

Leia mais

1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?

1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML? HTML 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados

Leia mais

Sumário. 1. Instalando a Chave de Proteção 3. 2. Novas características da versão 1.3.8 3. 3. Instalando o PhotoFacil Álbum 4

Sumário. 1. Instalando a Chave de Proteção 3. 2. Novas características da versão 1.3.8 3. 3. Instalando o PhotoFacil Álbum 4 1 Sumário 1. Instalando a Chave de Proteção 3 2. Novas características da versão 1.3.8 3 3. Instalando o PhotoFacil Álbum 4 4. Executando o PhotoFacil Álbum 9 3.1. Verificação da Chave 9 3.1.1. Erro 0001-7

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html

Leia mais

Aula 01 Conceitos Iniciais sobre Excel 2010

Aula 01 Conceitos Iniciais sobre Excel 2010 Aula 01 Conceitos Iniciais sobre Excel 2010 Professor: Bruno Gomes Disciplina: Informática Básica Curso: Gestão de Turismo Sumário da aula: 1. Abrindo o Excel; 2. Conhecendo a Tela do Excel. 3. Inserindo

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

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

Leia mais

29 de abril de 2014. Fiery Driver para Mac OS

29 de abril de 2014. Fiery Driver para Mac OS 29 de abril de 2014 Fiery Driver para Mac OS 2014 Electronics For Imaging. As informações nesta publicação estão cobertas pelos termos dos Avisos de caráter legal deste produto. Conteúdo 3 Conteúdo...5

Leia mais

Unidade IV Introdução à Linguagem PHP Parte 1

Unidade IV Introdução à Linguagem PHP Parte 1 Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Introdução HTML = HyperText Markup Language HTML

Leia mais

Desenhando no Flash. Comece um novo arquivo novo, de tamanho 500 X 300 pixels.

Desenhando no Flash. Comece um novo arquivo novo, de tamanho 500 X 300 pixels. Desenhando no Flash Os arquivos criados no Flash guardam e apresentam as informações gráficas vetorialmente. Isto significa que as imagens são entendidas como formas e preenchimentos e o que é armazenado

Leia mais

Para o OpenOffice Impress, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides.

Para o OpenOffice Impress, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. OPENOFFICE IMPRESS 1. O QUE É UMA APRESENTAÇÃO Para o OpenOffice Impress, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. Em cada slide podemos ter vários elementos

Leia mais

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: <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

Adobe Photoshop CS5. Aula 5

Adobe Photoshop CS5. Aula 5 Adobe Photoshop CS5 Aula 5 Tema da aula: Mudando a cor dos olhos Assuntos tratados nesta aula: Criar nova camada Renomear camada Ferramenta Zoom Ferramenta Pincel Definindo Cor do Primeiro Plano Regulagem

Leia mais

Capítulo 1. Guia de Início Rápido. Você vai aprender a programar a sua primeira reunião em 5 passos fáceis.

Capítulo 1. Guia de Início Rápido. Você vai aprender a programar a sua primeira reunião em 5 passos fáceis. Capítulo 1 Guia de Início Rápido Você vai aprender a programar a sua primeira reunião em 5 passos fáceis. PRIMEIRO PASSO: Entrando no ClaireMeeting Use o seu navegador e acesse: http://www.clairemeeting4.com.br

Leia mais

Como produzir e publicar uma apresentação online dinâmica (Prezi)

Como produzir e publicar uma apresentação online dinâmica (Prezi) Como produzir e publicar uma apresentação online dinâmica (Prezi) Este módulo irá ensinar-lhe como produzir e publicar uma apresentação online dinâmica usando o programa Prezi. A produção de uma apresentação

Leia mais

Compositor de Impressão do QGIS

Compositor de Impressão do QGIS Compositor de Impressão do QGIS 1. Introdução O Compositor de Impressão é uma ferramenta oferecida pelo QGIS para elaborar a versão final dos mapas que serão impressos. Permite a definição de escala e

Leia mais

Para o PowerPoint, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides.

Para o PowerPoint, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. POWERPOINT 1. O QUE É UMA APRESENTAÇÃO Para o PowerPoint, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. Em cada slide podemos ter vários elementos ou objetos

Leia mais

ROTEIRO PASSO A PASSO COMO CRIAR E ALIMENTAR UM BLOG

ROTEIRO PASSO A PASSO COMO CRIAR E ALIMENTAR UM BLOG ROTEIRO PASSO A PASSO COMO CRIAR E ALIMENTAR UM BLOG Elaborado por Márcia Azevedo Professora Formadora / Multiplicadora NTE Municipal de Campinas - 2010 - ÍNDICE Criando um blog... 3 Conhecendo as opções

Leia mais

OFICINA DE POWER POINT

OFICINA DE POWER POINT OFICINA DE POWER POINT Barra de Ferramentas Padrão Barra de Ferramentas Formatação Barra de Menus Modos de Visualização Painéis de Tarefas Barra de Ferramentas Desenho Profª. Maria Adelina Raupp Sganzerla

Leia mais

SUMÁRIO. Introdução 1

SUMÁRIO. Introdução 1 SUMÁRIO Introdução 1 Tela de Apresentação 1 Criando Figuras Simples 2 Linhas Curvas 3 Figuras Geométricas 4 Ferramenta Seleção 4 Desfazer e Repetir 4 Colorindo os Objetos 5 Ferramenta Zoom 5 Gravando,

Leia mais

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: <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

Sumário INTRODUÇÃO 3 TELA DE APRESENTAÇÃO 3 DESENHANDO E TRANSFORMANDO 29 FERRAMENTA FORMA 29 PREENCHIMENTOS E CONTORNOS 36

Sumário INTRODUÇÃO 3 TELA DE APRESENTAÇÃO 3 DESENHANDO E TRANSFORMANDO 29 FERRAMENTA FORMA 29 PREENCHIMENTOS E CONTORNOS 36 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

Fotografia Digital. Aula 1

Fotografia Digital. Aula 1 Fotografia Digital Aula 1 FOTOGRAFIA DIGITAL Tema da aula: A Fotografia 2 A FOTOGRAFIA A palavra Fotografia vem do grego φως [fós] ("luz"), e γραφις [grafis] ("estilo", "pincel") ou γραφη grafê, e significa

Leia mais

APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012

APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012 APOSTILA DE INFORMÁTICA MICROSOFT WORD 2012 Profa Responsável Fabiana P. Masson Caravieri SUMÁRIO 1. MICROSOFT WORD 2010.... 3 1.1 INICIANDO O WORD 2010.... 3 2. Pagina Inicial.... 6 2.1 Aba arquivo...

Leia mais

WEBGIS Sistema Informativo Territorial

WEBGIS Sistema Informativo Territorial PREFEITURA MUNICIPAL DE PONTA GROSSA WEBGIS Sistema Informativo Territorial MANUAL DE UTILIZAÇÃO Autor: Rony Camargo de Brito Primeira edição: 20-06-2008 Atualizado: 08-10-2008 Todos os Direitos Reservados

Leia mais

PHOTOSHOP. Menus. Caixa de Ferramentas:

PHOTOSHOP. Menus. Caixa de Ferramentas: PHOTOSHOP Universidade de Caxias do Sul O Photoshop 5.0 é um programa grande e complexo, é o mais usado e preferido pelos especialistas em editoração e computação gráfica para linha PC. Outros programas

Leia mais

Manual de Publicação Wordpress

Manual de Publicação Wordpress Fundação Universidade Federal de Mato Grosso do Sul Manual de Publicação Wordpress Núcleo de Tecnologia da Informação - UFMS Maurílio Mussi Montanha 2014 Sumário 1 Introdução... 3 2 ACESSO À INTERFACE

Leia mais

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática O Paint é o programa de edição de imagens padrão do Windows, ao instalar o sistema o Paint é instalado automaticamente. Provavelmente,

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

Manual do Usuário Publicador

Manual do Usuário Publicador Manual do Usuário Publicador Portal STN SERPRO Superintendência de Desenvolvimento SUPDE Setor de Desenvolvimento de Sítios e Portais DEDS2 Versão 1.1 Fevereiro 2014 Sumário Sobre o Manual... 3 Objetivo...

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Microsoft PowerPoint XP. Módulo I I

Microsoft PowerPoint XP. Módulo I I FUNCICI MG ESCOLA TÉCNICA DE FORMAÇÃO GERENCIAL DE CONTAGEM CURSO TÉCNICO AMBIENTAL E DE SEGURANÇA APOSTILA BÁSICA: Microsoft PowerPoint XP Módulo I I Elaborada por: Walter Santos 2007 2 S U M Á R I O

Leia mais

Manual do Usuário CMS WordPress Versão atual: 3.0

Manual do Usuário CMS WordPress Versão atual: 3.0 Manual do Usuário CMS WordPress Versão atual: 3.0 1 - Introdução O Centro de Gestão do Conhecimento Organizacional, CGCO, criou, em março de 2008, uma equipe para atender à demanda de criação de novos

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