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