APRENDENDO C.S.S., UMA ESTRUTURA PARA WEB. Por André Marinho C. O QUE É CSS?

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

Download "APRENDENDO C.S.S., UMA ESTRUTURA PARA WEB. Por André Marinho C. O QUE É CSS?"

Transcrição

1 APRENDENDO C.S.S., UMA ESTRUTURA PARA WEB. Por André Marinho C. O QUE É CSS? Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez. Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa. O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o assunto realmente ' do seu início' O que vai ser preciso? Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver ou GoLive, iremos usar o modo de 'código'. Não se apavore! Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de imagens. Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns outros que você poderá obter consultando qualquer listagem Browsers Atuais. Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP, mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio computador. ETAPA NÚMERO 1 - UMA PÁGINA BÁSICA Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível. <html> <head> </head> <body> Esta é a minha página Web </body> </html> Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html. Dentro da tag <html> existem mais dois pares de tags. <head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir... <html> <head> <title>minha Página</title> </head> <body> Este é o conteúdo da minha página Web! </body> </html> O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.

2 Bem, agora temos uma página Web que é bem renderizada em qualquer navegador - depois que você tiver 'salvado' ela. Dê a ela o nome de 'index.html' pois este é o nome apropriado para a primeira página de qualquer Web site. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador, mas para tornar as coisas claras e em ordem, crie um novo diretório para salvar sua página Web. O caminho normal para abrir sua página em um navegador é usar a opção 'Abrir' ('Open') no menu 'Arquivos' ('File') mas há um modo mais rápido. Crie um 'shortcut' do seu arquivo no desktop. Dali você poderá arrastar o ícone do 'shortcut' direto para a janela do navegador e sua página será carregada e mostrada! Sua página deverá se parecer com esta» Ainda que seja uma maravilha, sua página Web não possui um ingrediente vital - o conteúdo. Não há sentido em uma página Web se ela não diz nada (ou outra coisa senão "Este é o conteúdo da minha página Web!") mas isto eu vou deixar por sua conta. Qualquer conteúdo deve ser colocado entre o par de tags<body>...</body> para que o navegador possa renderizá-lo. Encher de textos a página, assim como ela está, não dá uma estrutura e nem estiliza os textos. Por não dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita, de cima para baixo, que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas. Faria muito mais sentido grupar palavras e sentenças em parágrafos, títulos, sub-títulos - bem, você deve saber, aquelas coisas básicas de estruturação de textos que se aprende na escola. Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto. Eles ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados como um espaço único. É útil em qualquer porção de texto marcar títulos, sub-títulos, alguns parágrafos e talvez até uma assinatura final. Em HTML, existem diferentes tags de marcação que se constituem no mecanismo apropriado para estruturar os textos. Cria-se um parágrafo, colocando texto entre o par de tags <p>...</p>. Em HTML, um parágrafo é um bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço - tal como este paragráfo que você vê aqui. Para títulos, existem seis níveis distintos de ênfase, indo desde o mais alto nível <h1>...</h1> até o mais baixo <h6>...</h6>. Eles são como mostrados a seguir... Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4 equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). h5 e h6 são 'smaller' (menor),mas em negrito. Existem outros truques que podemos usar para dar ênfase a palavras ou frases. Antes de considerar como eles devem ser apresentados (como deve se parecer), considere acima de tudo sua função. Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags <b>...</b> contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se strong <strong>...</strong>. Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na tela de um monitor, o HTML deverá servir a outros dispositivos também. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para visão, entenderão perfeitamente <strong> e lerão com a devida ênfase. Você deve saber que itálico é conseguido com a tag <i>...</i>. E aqui também, é melhor você não se utilizar de estilização visual, mas usar <em>...</em>. Este par de tags dá a funcionalidade do itálico ao texto independentemente do dispositivo em uso. Sublinhado pode ser conseguido com o par de tags <u>...</u>, mas sublinhados na Web tem um significado especial. Usualmente indica um link. É melhor não usar sublinhado para enfatizar, pois esta prática poderá confundir o visitante do site. Uma importante tag é a de quebra de linha <br>. Ao contrário de outras tags, esta não requer uma tag de fechamento, aliás tag de fechamento neste caso não faria qualquer sentido, não é mesmo? Usando estas tags básicas de marcação, o texto começa a tomar forma. Ele se assemelhará a um texto produzido em um processador de texto. Esta página básica provavelmente se parecerá um pouco diferente quando visualizada em diferentes

3 navegadores e computadores. Cada navegador tem o seu próprio estilo padrão e a menos que você configure seu navegador ele usará os estilos padrão. Para sobrescrever os estilos padrão dos navegadores, nós criaremos nossos próprios estilos que serão agrupados em uma 'folha de estilos'. ETAPA NÚMERO 2 - FOLHA DE ESTILOS Uma folha de estilos é conceitualmente bem simples, ela é uma página contendo definições ou especificações de estilos, que instrui o navegador como apresentar os diferentes elementos de uma página. Por enquanto, contenha sua curiosidade em saber o porquê de 'Cascata'. Eu voltarei a este assunto mais tarde, quando começarmos a aplicar estilos no nosso HTML. Para simplificar, começaremos construindo nossa folha de estilos dentro da própria página Web. Mais adiante você descobrirá que pode ter sua folha de estilos em um 'arquivo externo de estilos' que pode ser 'chamado' por várias páginas, com a grande vantagem de se poder controlar através deste arquivo mestre, os estilos de todas as páginas que lincam para ele. Os estilos que iremos usar serão definidos dentro do par de tags <head>...</head> como mostrado a seguir... <style type="text/css" title="mystyles" media="all"> <!-- --> </style> Note o par de tags <style>...</style> e iremos explicar mais algumas coisas neste par. type="text/css" diz ao navegador que estamos usando um arquivo de texto puro para descrever nossos estilos, nada de especial aqui. title="mystyles" tem por finalidade identificar seus estilos através de um nome de sua livre escolha. media="all" aqui que as coisas começam a ficar interessantes. Você pode ter uma folha de estilos para descrever como sua página será apresentada na tela de um computador (media="screen") e outra completamente diferente para formatar sua página para impressão (media="print"). Existem outros tipos de mídia, tais como 'projection', 'tv', 'braille' and 'aural' (projeção, televisão, escrita braille e áudio). Agora você entenderá a lógica de não usar 'bold' e 'italic'. Por enquanto usaremos o tipo de mídia 'all' (todas as mídias), que tem propósitos gerais. Os caracteres <!-- e --> se constituem em um modo de se 'esconder' texto em uma página Web - você verá os textos somente na marcação do código. Isto é denominado 'comentario', e uma vez que os estilos estão dentro da seção <head>...</head> do documento, eles não deverão aparecer na apresentação. A primeira coisa que faremos será definir os estilos para a página como um todo, o body da página. Tudo que estiver dentro das tags <body>...</body> terá este estilo ou conjunto de estilos que lhe for aplicado. Basicamente a definição de estilos para body se parece com... body { } body seguido por um par de 'chaves' { }. Definiremos uma cor de fundo para a página... Os navegadores por padrão, usualmente renderizam uma página na cor branca com textos na cor preta, mas nós iremos definir um tom de cinza claro para o fundo da página. Abaixo a maneira pela qual definimos uma cor de fundo para a página. Notar que não usamos sinal de igual '=' e sim dois pontos ':'. body {background-color: #e8eae8 } O que significa #e8eae8? As cores na Web são definidas pela mistura de 256 tonalidades de vermelho, de verde e de azul em diferentes proporções. Humanos tem dez dedos nas mãos e contam de dez em dez. Computadores foram projetados para contar de dezesseis em dezesseis, não que eles tenham dedos, mas uma vez ultrapassado o 9 (nove) não existe um numeral simples para representar 10, 11, 12, 13, 14, 15 assim estes numerais foram substituidos por letras a, b, c, d, e, f. Desta forma, em um sistema de contagem 'hexadecimal' (base dezesseis) o 10 é representado pelo 'a' e o 15 pelo 'f'. Ao ultrapassar o 15, adicionase mais um dígito e assim '10' representa o 16. Usando-se este sistema de contagem, qualquer número entre 0 (zero) e 255 pode ser representado por dois números ou letras é ff. Então, #ffffff será o branco e # o preto. A cor que escolhemos para nosso fundo é composta de vermelho e8(232), verde ea(234), azul e8(232). O símbolo # ('tralha') indica que estamos usando numeração hexadecimal e não números decimais ordinários. Algumas vezes você encontrará a sintaxe com apenas três dígitos, por exemplo, #2a0. Isto é uma abreviatura para #22aa00. Quando a cor é representada por uma numeração composta por três pares de dígitos que se repetem dois a dois, você poderá omitir o segundo dígito que o navegador entenderá a abreviatura.

4 Usando esta abreviatura com três dígitos você poderá obter 4096 cores diferentes, e com seis dígitos mais de seis milhões de cores. Com uso de um dígito por cor, vermelha, verde e azul, cada uma tendo 16 níveis de brilho é possível combinações para obter todas as demais. Se você estiver digitando seu código, esta técnica de usar abreviadamente três dígitos é bem mais simples e eficiente. De toda forma, vamos agora definir uma cor para os textos na nossa página, diferente da cor padrão preta. Você poderá usar a ferramenta 'colour picker' do Photoshop (ou de outro programa gráfico) e definir então uma cor por um número hexadecimal de 6 dígitos... body {background-color: #e8eae8; color: #5d665b } Observe na regra acima que as cores do fundo e do texto estão separadas por um ponto e vírgula ';'. Bastante cuidado com o uso apropriado de vírgulas e ponto e vírgulas pois a troca ou esquecimento delas causará erros. E agora, vamos definir margens ao redor da página para acertar o posicionamento dos textos convenientemente na tela, vamos usar uma margem de 50px (margin: 50px) na definição das regras para body. Esta nova definição separada da anterior por ponto e vírgula. body { background-color: #e8eae8; color: #5d665b; margin: 50px } Agora tudo o que digitarmos na página será reprentado numa cor verde escura acinzentada sobre um fundo cinza. Veremos adiante casos especiais em que iremos alterar isto. ETAPA NÚMERO 3 - ESTILIZANDO TEXTO Embora já tenhamos livrado nossa página do austero preto e branco, mudando para cores ao nosso gosto, ainda podemos fazer muitas coisas. Podemos alterar o tipo e o tamanho das letras, o espaçamento entre linhas e adicionar outros detalhes tal como indentação de parágrafos. O estilo para fontes Iremos trabalhar de início com o estilo das fontes (typeface) pois esta alteração fará uma diferença marcante na página. Diferentemente de projetos para impressão, as páginas Web só conseguem mostrar os tipos de fontes que estejam instalados na máquina do usuário, assim não podemos empregar no nosso projeto um tipo de fonte de nossa livre escolha, mas teremos que escolher uma, dentre aquelas que mais comumente encontram-se instaladas nos computadores - uma que venha pré instalada com o sistema operacional. Isto limita consideravelmente nossa escolha. Você acabará descobrindo que está limitado a duas ou três fontes do tipo serif (com serifas) duas ou três do tipo sans-serif (sem serifas) e uma do tipo monospaced, (dactilográfica). Em lugar de escolher um tipo único de fonte, nós especificamos um conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usuário. Abaixo um exemplo mostrando os tipos de fontes mais comuns pré instaladas em computadores Windows e Machintosh. Você não pode assumir que a fonte que escolheu esteja instalada no computador do usuário e por isso deverá fornecer alternativas. A seguir uma especificação típica para escolha de uma família de fontes do tipo sem serifas. font-family: Verdana, Geneva, Arial, sans-serif; E, para fontes com serifas font-family: Georgia, "Times New Roman", Times, serif; Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas - "Times New Roman" Vamos adicionar fontes sem serifas nos estilos para a nossa página e ver o que acontece. Nossa página com fontes sem serifas» O tamanho das fontes A especificação do tamanho de fonte é um assunto controverso. Para impressão você poderá tranquilamente especificar um tamanho em 'points' (pontos) e terá sempre aquele tamanho na impressão. A quantidade de espaço de impressão assim como as quebras de linha será sempre exatamente como você as especificou. Na Web os tamanhos de fonte não seguem um padrão rígido variando de um computador para outro, e em alguns casos, uma variação drástica. Dependendo do tamanho da tela do usuário, do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar

5 desde de tão pequeno que se torne ilegível até tamanhos enormes semelhantes àqueles usados em livros grandes, para crianças. Felizmente os navegadores permitem aos usuários definir suas preferências pessoais de tamanhos, o que vem a atenuar as grandes variações, mas mesmo assim poderá haver diferenças entre o que você projetou e espera, e aquilo que será de fato apresentado ao usuário. Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portáteis, as condições de navegação por sua página sofrerão uma mudança drástica nos próximos anos. Projetar hoje páginas Web para o futuro implica em considerar designs fluídos que se auto adaptem aos diferentes tamanhos de tela. Repita comigo, "A Web não é igual a uma impressora!" Tamanhos relativos para fontes Se você quer servir sua página Web ao maior número possível de usuários é melhor especificar um tamanho de fonte relativo àquele escolhido como padrão pelo usuário. Várias são as maneiras de especificar fontes relativas. Você pode usar percentagem (%) da fonte padrão do usuário ou uma unidade de medida chamada 'em', o que é o mesmo que 100%. 1.2 em é o mesmo que 120%. A maneira preferencial de especificar tamanhos relativos de fontes é através do método descritivo de tamanhos, algo parecido com a especificação de tamanhos de camisas ( T-shirt). 'Medium' (médio) é o mesmo que 100% ou 1em. 'Smaller' (pequeno) é um tamanho menor que 'medium' e 'Larger' (grande) é um tamanho maior que 'medium'. Há também os tamanhos x-small, xx-small, x-large e xx-large (algo como - extra pequeno, super extra pequeno, extra grande, super extra grande). A vantagem deste sistema sobre as percentagens e ems é que os navegadores não tornarão os textos ilegíveis. Você pode por exemplo, especificar um tamanho de fonte de 0.7 em ou 70% e isto ficar perfeito no seu PC. Para alguém usando um Mac com um tamanho de fonte definido smaller por padrão, 70% poderá resultar em um tamanho ilegível. xx-small é o menor tamanho de fonte capaz de ser apresentado por um computador. xx-largex-large large medium small x-small xx-small xx-small type This type is small but not too small to render This type is way too small This type is way too small> Tamanhos absolutos para fontes Se o público para o qual você projetar seu site for bastante específico e usa basicamente as mesmas configurações e tipo de computador que o seu, você poderá especificar o tamanho de suas fontes em pixels. Pixels não variarão muito de um para outro desktop e assim os tamanhos de fontes serão similares quando não idênticos. Uma vez que você utilize laptops ou dispositivos portáteis ou mesmo monitores com resolução muito alta, os tamanhos em pixel irão variar de acordo com o dispositivo usado. Para que você tenha uma idéia exata destas variações, eu construi três parágrafos usando três métodos diferentes para definir o tamanho da fonte - percentagens - tamanhos T-shirt e pixels. Na tela do meu computador, usando um navegador Mozilla, os tamanhos são bem parecidos, mas poderão não ser para você. Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial. Esta linha foi definida com o tamanho de fonte x-small Esta linha foi definida com um tamanho de fonte absoluto de 11px Convém ressaltar que você nunca deverá usar 'points' para definir tamanhos de fonte para tela (screen), use-o somente para impressão (print). Espaçamento entre linhas O espaçamento padrão entre linhas é de aproximadamente 120% do tamanho da fonte. Aumentar um pouco este espaçamento em geral resulta em melhoria da legibilidade, especialmente se as linhas são muito longas. Irei discutir esta questão mais adiante. Para a nossa página no estágio atual o comprimento das linhas é determinado pela largura da janela do navegador, assim, talvez um pouco maior do que o ideal. Para definir o espaçamento entre as linhas podemos novamente optar por medidas relativas (% or ems) ou absoluta (px). Neste exemplo eu defini para toda a página, a altura da linha (line height), que vem a ser a altura do caracter (fonte) mais o espaço extra acima, em 180% do tamanho da fonte (small). Como as definições de estilo para body estão crescendo, eu coloquei as regras, cada uma em uma linha diferente, (isto não fará qualquer diferença para o browser) para que as regras de estilo fiquem mais fáceis de serem lidas por humanos. É de boa prática sempre colocar um ponto e vírgula ao terminar de escrever uma regra.

6 body { background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180%; } Agora estamos com um página mais 'arejada''» Parágrafos Tudo o que fizemos até agora afeta a página toda. Agora iremos ver como definir estilos para áreas específicas da página. Como eu já havia mencionado anteriormente, blocos de texto podem ser divididos em parágrafos para facilitar a leitura. Existem várias maneiras de visualmente separar parágrafos uns dos outros. Você poderá acrescentar espaços extras entre as linhas ou indentar a primeira linha. Projetos tipográficos as vezes se utilizam de outras técnicas menos comuns tais como grandes indentações ou mesmo exdentações (o oposto de indentação). Com CSS é possível conseguir todos estes efeitos, mas por padrão o separador de parágrafos é o 'paragraph space' que equivale a metade da altura da linha 'line-height'. Para fazer com que um bloco de texto se transforme em um parágrafo, basta colocá-lo dentro de um par de tags <p>...</p>. Para manipular os estilos a aplicá-los a um parágrafo, via CSS, nós adicionaremos p { } logo a seguir às regras já definidas para body dentro da tag head. Dentro do sinal de chaves { }, acrescente esta declaração text-indent: 3em <style type="text/css" title="mystyles" media="all"> <!-- body { background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180%; } p { text-indent: 3em;} --> </style> Nossa página com parágrafos» Observe que o primero parágrafo não está indentado - ele não foi colocado dentro das tags <p>...</p> e em consequência em termos de HTML ele não é oficialmente um parágrafo. Títulos Eu já expliquei os seis níveis de títulos padrão do HTML. Nós não temos que ficar restritos a eles, pois podemos redefiní-los de acordo com nossas necessidades. Novamente, isto é uma simples questão de definir mais umas regras de estilo. Títulos por padrão são grandes e em negrito com um espaçamento extra acima e abaixo. Lembre-se que títulos dos níveis h1, h2 e h3 são maiores que o texto normal e dos níveis h5 e h6 são menores. Vamos trabalhar com o título h3 e alterar sua fonte e cor. h3 {color:#966b72; font-family:georgia,"times New Roman",Times,serif;} Agora estamos com títulos» Você deve ter observado que eu adicionei uma linha em branco acima do segundo título. Se você simplesmente colocar ali um parágrafo vazio <p></p> isto não vai funcionar pois sempre é necesário existir alguma coisa dentro das tags. Colocar um espaço em branco dentro de <p></p> também não vai funcionar pois o HTML ignora espaços em branco que não estejam entre dois caracteres. O que nós precisamos ali é de um caracter invisível e o HTML nos disponibiliza um, chamado de 'non-breaking space' que é escrito desta forma veja a seguir... <p> </p> O caracter 'non-breaking space' é bastante útil também para você evitar que certas palavras sejam

7 quebradas ao fim de uma linha - palavras como nomes de pessoas ou de instituições. Dicas extras Antes de passar para a próxima etapa vamos experimentar alguns 'truques' na nossa página. Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a página). Nós podemos definir margens diferentes para cima, para os lados direito e esquerdo e para baixo (top, right, left e bottom). Para isto basta que se declare as margens separadamente como mostrado abaixo:- margin-top: 70px; margin-left: 120px; margin-right: 50px; margin-bottom: 70px; Isto faz nossa página se parecer a uma página impressa, com uma margem maior no lado esquerdo. Defini também na nossa página uma das palavras em negrito e outra em itálico. Atenção que o itálico pode ser renderizado erroneamente em alguns computadores e tornar-se ilegível em tamanhos de fontes pequenos. Ver nossa página com textos estilizados» Bem, agora você está com uma página onde acresentou algum estilo - sem muito esforço. Contudo a página ainda se parece com um documento datilografado ou produzido em um processador de textos. A seguir veremos algumas possibilidades interessantes de estilização para o layout. Enquanto espera, você poderá fazer experiências com a página que acabamos de criar, modificando os valores das declarações de estilos. Tente mudar os tipos e tamanhos de fontes e os espaçamentos entre as linhas, porém o mais importante é que você carregue sua página em diferentes navegadores para observar quão diferente sua página possa parecer. ETAPA NÚMERO 4 - MAIS ESTILIZAÇÃO DE TEXTO Antes de prosseguirmos com formatação de textos será interessante familiarizá-lo com alguns termos básicos de tipografia. Quando dizemos, tamanho de fonte ou em CSS font-size, estamos nos referindo à distância que vai desde o topo de uma letra maiúscula tal como o 'A' até a base de uma letra que se estende o mais baixo possível (letra descendente) tal como o 'p' ou 'y'. Existe ainda um espaço extra abaixo das letras, chamado de 'leading'. Este nome vem do fato de as impressoras usarem este espaço como faixas para colocação de uma guia ('lead') metálica com a finalidade de definir as entre linhas. Hoje não usamos mais a 'lead', nós simplesmente determinamos o espaço total entre a base de uma linha e a da linha seguinte. O espaçamento entre linhas em consequência vem a ser a altura da fonte mais o espaço extra da 'lead'. Em CSS, dizemos line-height: 180%; com o valor especificado em percentagem, ems ou pixels (px). Saiba mais sobre espaçamento de linhas, adiante. Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra, mas esta prática é bastante específica e usada em fórmulas matemáticas e não nos aprofundaremos muito nesta propriedade agora. Para o exemplo mostrado abaixo eu poderia ter usado a marcação com as tags <sup>2</sup> porém com CSS eu tenho muito mais controle.. E=MC2 CSS também possibilita o controle sobre o espaçamento horizontal entre as letras e as palavras. Isto é apropriado para obter efeitos visuais em títulos. T Í T U L O E S P A Ç A D O letter-spacing: 0.5em; word-spacing: 0.5em Projetando legibilidade. Em épocas passadas em que os navegadores não ofereciam um bom suporte para as CSS um aspecto de vital importância para formatação de textos, disponível até mesmo em máquinas de escrever mais modestas, era impossível de se conseguir com a marcação HTML - trata-se do espaçamento entre as linhas do texto, 'line spacing'. Quando o espaçamento entre as linhas de um texto é nulo ou muito reduzido, a leitura torna-se difícil. Quanto mais longas forem as linhas tanto maior será a dificuldade de leitura. Linhas muito curtas provocam interrupções constantes na maneira natural de leitura da esquerda para a direita.

8 Linhas mais longas que um tamanho considerado ideal são também de leitura cansativa e tornam difícil a localização do início da próxima linha. Para uma leitura confortável as linhas devem ter um comprimento entre uma vez e meia e duas vezes o comprimento ocupado por todas as letras (minúsculas) do alfabeto - isto significa de 40 a 60 caracteres ou de oito a dez palavras. Se as linhas são mais longas, o aumento do espaço entre as linhas ajudará na legibilidade. Muitas das antigas páginas web apresentam textos estendendo-se da esquerda para a direita, ocupando toda a largura da tela, independente do tamanho do monitor. Alguns sites ainda adotam esta prática - e hoje em dia as telas tornaram-se bem maiores. Por padrão, há um espaçamento entre as linhas de um texto. Este espaçamento padrão é de aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja, desde o topo de uma letra maiúscula até a base de uma letra descendente - ver figura no primeiro título deste tutorial). Com CSS você poderá definir o espaçamento que desejar para as entre linhas. Se você está usando tamanhos de fontes relativos, você poderá definir o espaçamento entre linhas como uma percentagem do tamanho da fonte - font-size: 1em; line-height: 1.5em (o mesmo que 150%). Se você está usando tamanhos absolutos você poderá definir o espaçamento entre linhas assim: font-size: 11px; line-height: 16px. As especificações para este parágrafo são: font-size: small; line-height: 180% o que vem a ser equivalente a uma vez e meia o espaçamento entre linhas de um processador de texto antigo. Para uma demonstração, veja este exemplo onde o primeiro bloco de texto construido, não possui margens e nem uma line-height (espaçamento entre linhas). As estilizações gerais para o body definem somente o tamanho, família e cor das fontes, bem como a cor do fundo... body { color: #5d665b; font-size: small; font-family: Verdana, Geneva, Arial, sans-serif; background-color: #e8eae8; } O bloco de texto logo a seguir está dentro de um par de tags <div>...</div>, e é como se fosse uma página dentro da página. Tem uma margem esquerda de 250px e direita de 200px e o espaçamento entre linhas foi definido em 180%. Estes estilos foram acresentados ao corpo da página por um processo conhecido como herança ('inheritance'). Exatamente como uma criança herda as características de seus pais, as quais serão passadas para seus filhos, em CSS, este processo de "cascata" também acontece, com elementos herdando os estilos definidos para elementos que os contém. <div style="margin-left: 250px; margin-right: 200px; line-height: 180%">...</div> As 'divs' contidas nas páginas são uma parte muito importante das folhas de estilo em cascata e veremos mais detalhes sobre elas, adiante neste tutorial. Contraste Diferentemente de uma página impressa que você lê por reflexão de luz, uma página em uma tela monitor tem sua luminosidade própria. As diferenças de brilho entre um texto preto e um fundo branco tem magnitude muito maior em uma tela do que em uma página impressa. Porções grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol intenso sem uso de óculos escuro. Em casos extremos você apertaria os olhos para diminuir o efeito da claridade e muito provavelmente no geral iria se sentir desconfortável e até mesmo sem saber bem porque. Diminuir o contraste numa página Web, faz com que ela se torne mais confortável e menos estressante para leitura. Mas por outro lado, se você exagerar acabará dificultando a leitura para pessoas com restrições visuais. Em um artigo como este, onde há uma considerável quantidade de texto para leitura, onde o usuário terá que passar um período longo de tempo em frente a tela do monitor, é importante tornar a tarefa o mais confortável possível. ETAPA NÚMERO 5 LISTAS Outra técnica de formatação muito usada em páginas Web é a lista ('list'). Ela é como um parágrafo, porém tem uns detalhes adicionais. HTML define listas que podem ser do tipo com marcadores (bullets - listas não numeradas) ou listas ordenadas <ul>...</ul> <ol>...</ol> com numeração no início de cada item da lista <li>...</li>. Cada tipo

9 de lista é fornecido com algumas opções, que podem ser definidas no HTML - <li type="square"> coloca um marcador tipo um 'quadradinho', <li type="i"> coloca um numeral romano minúsculo. Lista não ordenada padrão Item da lista não ordenada Item da lista não ordenada Item da lista não ordenada Lista não ordenada com opção de marcador tipo 'quadradinho' _ Item da lista não ordenada _ Item da lista não ordenada _ Item da lista não ordenada Lista ordenada padrão 1. Ordered list item 1 2. Ordered list item 2 3. Ordered list item 3 Lista ordenada com opção de numeral romano minúsculo i. Item 1 da lista ordenada ii. Item 2 da lista ordenada iii. Item 3 da lista ordenada CSS possibilita mais opções e controle sobre as listas - basta você criar regras de estilo para ol ou ul. ol { list-style-type: lower-roman; margin: 1em 0 1em 40px } O efeito destas definições de estilo é o mesmo que o de colocar a opção em cada item da lista no HTML com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. Os quatro valores : 1em 0 1em 40px são respectivamente para as margens de cima, à direita, em baixo e à esquerda e podem ser definidos em ems, percentagens ou pixels. Se você deseja controle sobre os itens da lista, você poderá definir as margens para eles também - para aumentar o espaçamento entre eles por exemplo... ol li { margin:.5em 0.5em 0 } esta definição adiciona um espaço extra de 0.5 em acima e abaixo de cada item da lista ordenada. Para uma lista não ordenada, bastaria você substituir o seletor por ul li. E, melhor ainda, você pode definir seu próprio marcador usando uma imagem. ul { list-style-image: url(smiley.gif) } ul li { margin: 1em 0 1em 0} Se você gostou deste Vai gostar deste também E que tal este? E, por fim, uma imagem para cada item da lista... <li style="list-style-image: url(icon1.gif); margin: 1em 0 1em 0">Sabemos sobre pessoas</li> <li style="list-style-image: url(icon2.gif); margin: 1em 0 1em 0">Sabemos sobre imagens</li> <li style="list-style-image: url(icon3.gif); margin: 1em 0 1em 0">Sabemos sobre idéias</li> <li style="list-style-image: url(icon4.gif); margin: 1em 0 1em 0">Sabemos escrever</li> Sabemos sobre pessoas Sabemos sobre imagens Sabemos sobre idéias Sabemos escrever Estilos definidos entre as tags head do documento aplicam-se à toda a página, o que não é o caso aqui. Para aplicar estilos individualmente aos itens de uma lista, devemos definí-los nos itens ou 'inline'. Os estilos são definidos na tag HTML de abertura <li> no corpo (body) da página. Notar que o IE6 (Windows) coloca os ícones muito próximos ao texto do item. Eu adicionei um espaço em branco para compensar isto, conforme mostro abaixo... Sabemos sobre pessoas.

10 ETAPA NÚMERO 6 LINKS Na abreviatura HTML é de especial significado as letras HT para Hiper Texto (HyperText). Links em palavras, frases ou imagens de uma página podem ser clicados para nos levar a outros lugares. Estes outros lugares são chamados de "âncoras". Imagine navios ancorados no imenso mar que é a World Wide Web formando uma cadeia composta de links conduzindo às âncoras do navio no fundo do mar. Os navios estão ancorados em pontos específicos e não à deriva, o que facilita sua localização. Cada página tem pelo menos uma âncora. Por padrão, está âncora localiza-se no topo da página, mas você poderá iserir mais âncoras em qualquer lugar da página que precisar chegar por um link. <a href=" Este é um link para o topo da minha Home Page</a> Assim, você tem um par de tags <a>...</a> mais uma marcação href="..." dentro da tag de abertura. Esta é uma referência ao endereço do hipertexto ao qual você será conduzido. Se você colocar uma âncora na página em um lugar específico - bem, na verdade a âncora deve ser colocada imediatamente acima do lugar para o qual você irá - veja a seguir... <a name="myanchor"></a> Um par de tags <a></a> com um nome, por exemplo, name="myanchor" dentro da tag de abertura. Não há nada dentro do par de tags. Para ir àquele local ("myanchor") você acresenta mais o seguinte no fim do link... <a href=" Este é um link para uma âncora na minha Home Page </a> Como você já deve saber, os links em uma página são visualmente diferentes do restante do texto com a finalidade de serem facilmente identificados. Por padrão os links são na cor azul e sublinhados. Quando você clica em um link eles mudam para a cor vermelha. Mais tarde quando você voltar àquele link sua cor mudará novamente para púrpura, indicando que você já o visitou. Qualquer um que tenha navegado pela Web percebeu rapidamente este comportamento dos links. Por padrão são três os estados de representação dos hipertextos para links em HTML. Link não visitado Link ativo (clicado) Link visitado Observe que o cursor também muda. A seta padrão muda para uma 'mãozinha' quando aponta-se sobre o link. Certamente, como 'designers' não estamos satisfeitos com o visual padrão dos links. Texto sublinhado pode ser prático mais é feio. O essencial é que o link seja destacado do restante do texto para mostrar-se que ali há algo especial. O contexto então torna-se um fator importante. Alguns textos são óbvios que se constituem em um 'menu' de opções quer estejam ou não sublinhados. Seu destaque e a posição que ocupam na página e mais o fato de que aparentam convidá-lo a ir a algum lugar dão uma indicação precisa da sua função. De maneira semelhante, deve haver uma boa razão para uma palavra ou frase dentro de um texto ter um visual diferente. A razão pode ser para dar ênfase, mas aqui novamente é o contexto quem vai dar uma indicação e também o fato de outras palavras ou frases terem o mesmo tipo de alteração no visual. Isto não vai funcionar se cada link tiver uma cor diferente. CSS permite estilizar o visual dos links. Links não precisam ser sublinhados e nem azuis. Tudo que temos a fazer é estabelecer definições para as âncoras - 'a'. a:link { color: #696;text-decoration: none } na definição acima a cor do link foi alterada e o sublinhado retirado com a definição text-decoration:none Se você quiser mudar a cor do link visitado faça assim... a:visited { color: #699; text-decoration: none } CSS ainda permite estilizar um estado de link chamado 'hover'. Neste estado - quando o ponteiro do mouse é passado sobre o link - mudei a cor do texto do link o que também fornece mais uma informação adicional de que ali está um hipertexto para link. a:hover { color: #c93; text-decoration: underline } Neste estado, o sublinhado reaparece temporariamente enquanto o ponteiro está em cima do link, se assim você desejar. O estado 'active' do link acontece quando você clica. Normalmente o link muda de cor e em alguns navegadores também aparece uma borda em volta do texto do link. Para definir regras de estilo que se apliquem a todos os links de uma página você deve colocá-las dentro das definições de estilo na tag head da página como mostrado abaixo. a:link {color: #696; text-decoration: none; background-color: transparent} a:visited {color: #699;text-decoration: none;

11 background-color: transparent} a:hover {color: #c93;text-decoration: underline; background-color: transparent} a:active { color: #900;text-decoration: underline; background-color: transparent } A ordem (sequência) que você escreve as definições de estilos para links é muito importante. Normalmente a ordem não importa em CSS, mas neste caso é importante que a:hover e a:active venham por último, caso contrário não funcionarão. Agora um outro estado para links não endossado pelas CSS. Este é um link 'morto'. Ele não faz nada. Se você tem um link na sua página que leva a mesma página, bem, não faz muito sentido clicar em link que leve para o mesmo lugar. Isto é como um sinal, instruindo você a dar uma volta para ir ao lugar em você já se encontra. Existem duas maneiras para tratar esta questão. Você poderá destacar o link de um modo visual diferente dos outros links ou torná-lo invisível indicando assim que ele é um link não válido. Está técnica é chamada de 'greying out' e você já deve ter visto isto em ação em outros programas instalados no seu computador. Afinal, porque manter o link morto se ele não é uma opção válida? Bem, um dos princípios mais importantes de projeto de interfaces diz que você deve manter as coisas o mais consistente possível. Se você remover um item de uma menu por exemplo, os demais itens vão sofrer um deslocamento de sua posição inicial. É menos confuso para o usuário uma interface que se mantém sempre a mesma e inalterada. Um outro elemento disponível é a cor do fundo do texto. Algumas vezes os 'designers' mudam a cor do texto do link para o estado hover e/0u ative, simulando uma marca de iluminação. Existem muitos outros efeitos que você pode conseguir com CSS para os links, nós apenas demos uma partida aqui e você poderá agora começar com suas experiências. Esta página exemplo demonstra os princípios que você aprendeu aqui.. ETAPA NÚMERO 7 - BOXES CSS Vimos que um texto na Web pode ser dividido em títulos e parágrafos através da marcação HTML. Vimos também como podemos definir estilos ao nosso gosto, de modo a sobrescrever os estilos padrão. Vamos agora ver como definir estilos que possibilitam ir além do que permite o HTML e construir layouts mais interessantes. O corpo ('body') da página é a área total visível, mas conforme eu mostrei na etapa número 3, é possível compartimentar a página em pequenas divisões com seus estilos próprios. Estas divisões podem ser tão pequenas quanto um caracter ou grandes o suficiente para acomodar porções retangulares inteiras de uma página. Tudo o que temos a fazer é englobar entre o par de tags <div>...</div> a área que pretendemos transformar em uma divisão. Tais áreas, são como uma mini página que em CSS são chamadas de boxes CSS. Boxes CSS se constituem na unidade básica de construção de layout de uma página Web e eu passarei a explicá-los com detalhes pois eles são muito importantes. Boxes CSS podem ter uma largura e uma altura (width e height), uma cor de fundo ou até mesmo uma imagem de fundo que pode se repetir constituindo um padrão de preenchimento. Um box CSS por padrão estende-se da margem esquerda à margem direita do corpo da página. Se você não especificar uma margem para o corpo da página (body) um box CSS ocupará toda a largura da janela do navegador. Se você não especificar uma altura para um box CSS ele não terá altura (será considerada zero). Ao colocar texto dentro do box ele se expandirá em altura de modo a acomodar o texto colocado - ou uma imagem. Para manter o texto afastado das bordas do box você deve usar o enchimento - padding... Você deverá tomar precauções ao usar padding pois ele se comporta de maneira diferente no navegador Microsoft Internet Explorer. Ao contrário do que foi mostrado no diagrama acima o IE coloca o padding dentro do box, e em consequência seu comprimento e altura não se alteram. Todos os demais navegadores colocam o padding fora do box, adicionando seus valores ao comprimento e altura do box. Assim o seu box sofrerá alterações de acordo com o navegador em que for visualizado e isto poderá trazer resultados desastrosos quando você depende de maior precisão. Além dos limites do padding você poderá ter uma borda... Bordas estão disponíveis em uma variedade de estilos e você poderá definí-las separadamente para cada lado, em termos de espessura, estilo e cor. Elas são mostradas com pequenas diferenças de acordo com o navegador em que são visualizadas, a seguir como elas aparecem no navegador Mozilla... A espessura da borda aumenta o comprimento do box. Para separar um box de outro usamos as margens. Margens e paddings costumam ser confundidas pois o que nós chamamos de margem de uma página de um livro ou de uma página Web, na verdade é um 'padding' porque obviamente este espaçamento não

12 poderia ficar fora da página. Lembre-se que este caso é especial. Para o body de uma página Web, as margens são contadas para dentro e para todos os demais boxes CSS são contadas para fora do box. Posicionamento absoluto Além de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da página através da definição CSS position: absolute; Posicionamento absoluto é um conceito fácil de se entender, pois é assim que as coisas funcionam na vida real. Por exemplo: a localização de uma casa poderia ser descrita assim; à 50 metros da Rua Norte e à 100 metros da Rua Leste. A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo: 50px; esquerda: 100px) mas não necessariamente terá que ser top e left, poderá ser top e right (topo e direita), bottom e left (fundo e esquerda) ou bottom e right (fundo e direita). Aqui você tem alguns boxes CSS estilizados e cada um deles com as definições de estilo mostradas. As possibilidades de estilizações são infinitas. Boxes com dimensões definidas e posicionados de forma absoluta, são semelhantes a recortes de notícias e imagens de jornais que se faz para montagem de um álbum de recortes. O problema é que tais álbuns permanecem com suas dimensões fixas - Páginas Web, não. Posicionamento relativo Se você quiser descrever a posição da porta da casa do seu vizinho você poderia dizer que ela encontrase a 70 metros da Rua Norte e a 100 metros da Rua Leste, ou ainda, dizer que ela localiza-se a 5 metros da sua casa. Posicionamneto relativo considera que boxes CSS localizam-se próximos a um outro box. O primeiro box ocupa a posição mais acima, o próximo box localiza-se abaixo do primeiro, o seguinte abaixo deste. Eles efetivamente flutuam colocando-se de cima para baixo na página. Este exemplo é um pouco fora da vida real, mas imagine-se dentro de uma piscina coberta onde uma pilha de colchões de ar flutuassem, o primeiro colaria na cobertura, o seguinte em baixo dele e seguinte em baixo e assim por diante. Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo, você definirá float: left; ou float: right; à semelhança dos colchões de ar na piscina coberta, os boxes vão flutuando um ao lado do outro enquanto houver espaço lateral. Acabado o espaço lateral eles ocuparão a posição abaixo daqueles que já flutuaram, começando uma nova camada. Você poderá evitar uma situação destas assegurandose que a soma total das larguras dos boxes não ultrapasse a largura da página. Isto pode ser feito especificando-se as larguras ('width') em pixel - mantendo a soma total abaixo da largura do navegador. Ou ainda, definir as larguras em percentagens, mantendo a soma total igual a ou preferencialmente um pouco abaixo de 100. Ao posicionar de maneira relativa, evite misturar pixel com percentagem, pois os resultados podem ser imprevisíveis. Esta página de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de maneira relativa em colunas simples e múltiplas. ID's Ao criar seus boxes com definições de estilos segundo suas necessidades, não estarão disponíveis elementos HTML para adicionar à eles. Você terá que inventar os seus próprios. Provavelmente haverão alguns ou talvez muitos boxes CSS <divs> em uma página e assim devemos darlhes nomes que os identifique. Isto é feito através de um 'identificador' - que abreviadamente denominamos id. Uma id deve ser única por box e identifica um box na sua página, permitindo que tanto você quanto o navegador saibam como apresentar o box com aquele nome. Um exemplo simples ocorre quando você divide sua página em três áreas horizontais. Um topo ('header') contendo um logotipo e uma barra de navegação. A seção do meio a seguir contém textos e imagens. E embaixo teremos o rodapé ('footer') com os direitos autorais e uma reprodução da barra de navegação superior. Este exemplo foi construido com 5 (cinco) boxes horizontais, sendo os dois boxes a mais, para a barra de navegação e o logotipo, que foram posicionados logo abaixo do topo. Observe que a margem à direita é menor que à esquerda para compensar visualmente as diferenças de comprimento das linhas à direita, proporcionando melhor noção de centralização. Nas definições de estilos usamos um símbolo # ('tralha') antes do nome que identifica 'id' o box.

13 #header {...} #navbar {...} #logo {...} #midsection {...} #footer {...} Então colocamos as definições de estilo para o box, dentro de sua respectiva 'id' como mostrado abaixo... <div id="header">...</div> <div id="navbar">...</div> <div id="logo">...</div> <div id="midsection">...</div> <div id="footer">...</div> Caso tenhamos declarado estilos para o corpo da página 'body', nossos boxes herdarão aqueles estilos. Qualquer estilo que você declare para o box tem prioridade sobre aquele declarado para 'body'. Isto é o efeito 'cascata'. Classes Em alguns casos você irá se utilizar do mesmo box por várias vezes em uma página. Suponha que você queira dividir a seção central da página mostrada em dois ou mais boxes separados. Neste caso poderemos reutilizar um box em lugar de criar vários. Um box que pode ser reutilizado é nomeado com uma classe. Exatamente como se tem 'classes' de flores ou insetos, uma classe aqui é basicamente um mesmo box com conteúdo diferente. Para mostrar que temos uma 'classe' e não uma 'id' única, usamos um. (ponto) em lugar de uma # ('tralha')..midsection {} pode ser agora usado quantas vezes quisermos e a sintaxe para a div é conforme mostrado abaixo... <div class="midsection">...</div> <div class="midsection">...</div> <div class="midsection">...</div> Span Classes (mas não IDs) podem ser aplicadas em fragmentos de textos. Se desejarmos que algumas palavras do texto tenham a cor vermelha, criamos uma classe chamada.redtext.redtext { #c00 } <span class="redtext">this is red text!</span> Em lugar de colocar as palavras que queremos em vermelho, dentro de <div>...</div>, usamos <span>...</span>. Isto é conhecido como elemento inline por aplicar-se a uma porção de texto dentro de uma <div>...</div> Use <span>...</span> sempre que você quiser estilizar diferentemente uma porção de texto que difere do texto como um todo. Isto pode ser para cor, família de fonte, tamanho, peso ou qualquer outra propriedade. Assim, em CSS, existem elementos nível de bloco que são boxes com uma única ''id' ou uma 'classe' reutilizavel. Podemos ainda ter os elementos inline que se referem a um nível de caracteres. Agora estamos começando a chegar em algum lugar. ETAPA NÚMERO 9 - JUNTANDO TUDO A mais simples das páginas Web usará uma mistura de ids e classes e possivelmente uma combinação de posicionamento absoluto e relativo. Vamos dar uma olhada na nossa página composta de cinco boxes que estudamos na etapa número 8, e talvez, você queira dividir a seção central em colunas. Para isto usaremos a declaração float:left tornando as coisas mais simples. Uma coluna à direita, de largura reduzida, normalmente, é usada em uma página Web para menu de navegação..leftcol {} A coluna do meio é para o conteúdo principal..midcol {} E, à direita uma outra coluna também de largura reduzida, usada para links relacionados ou de anunciantes e parceiros..rightcol {}

14 Todas as três colunas terão sua largura definida em percentagens de modo a que possam se ajustar de maneira fluida à largura da página. Observe que eu usei classes para nomear as colunas de modo a que poderei reusá-las mais adiante. Este exemplo mostra a seção central única.midsection transformada em três colunas flutuando à esquerda. <div class="leftcol">...</div> <div class="midcol">...</div> <div classs="rightcol">...</div> Esta técnica amplia e torna mais interessante a construção do layout. Não deixe qualquer uma das divs sem conteúdo, ainda que elas tenham que ser preenchidas com espaços vazios. Coloque espaços dentro delas. Doctypes e validação Chegamos a décima etapa das lições 'CSS desde o início' e eu tenho uma confissão a fazer. Tudo o que eu mostrei para vocês até aqui, - marcação de códigos e páginas de exemplos estão todas erradas! Bem, tudo provavelmente funcionou muito bem a menos que você esteja usando um navegador muito antigo, contudo se você testar o que fizemos em um verificador de sintaxe ou submeter a uma programa de validação, tudo que fizemos será reprovado. O que é um programa de validação? deve estar você perguntando. Você já deve estar familiarizado com o conceito de checador de sintaxe. Provavelmente existe um deles no seu programa processador de textos. O checador compara as palavras que você digita, com uma lista de palavras de um dicionário e alerta quando encontra alguma palavra que não está no dicionário. Pode ser que a palavra não esteja listada no dicionário, mas também pode ser que você tenha digitado errado. Em processadores de textos mais sofisticados é possível checar a gramática, a existência de verbo em uma frase, alertar para o uso repetido de uma mesma palavra 'e' importuná-lo incessantemente. Para que um checador de palavras ou de gramática possa funcionar a contento, ele precisa saber qual é a 'linguagem' usada. O meu checador de inglês da Inglaterra é diferente do inglês dos EUA - e se você não estiver nos EUA? Assim como suas escritas em inglês ou seja lá qual for o idioma usado é checado pelo processador de texto, o HTML e as CSS podem e devem ser checadas também. Se você comete um erro na sua escrita, as pessoas provavelmente julgarão tratar-se de um erro de datilografia, mas entenderão o que você quis dizer e não haverá prejuizo para o entendimento. Um pequeno deslize no HTML ou nas CSS, por outro lado, é uma história diferente. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do lugar, pode fazer toda a diferença entre uma página funcionando ou não - isto dependerá do erro e de como o navegador tratará o erro. É uma boa idéia submeter seu HTML e as CSS a um checador de sintaxe ou a um validador. Uma das vantagens de se utilizar um editor de HTML decente é que ele vem com um checador de sintaxe embutido. Você não dispõe de checadores em editores de textos simples e de propósitos gerais. Se você possui um editor tipo HomeSite ou BBEdit ou um editor WYSIWYG tal como o Dreamweaver ou GoLive, você terá um checador e ainda sugestões de como corrigir erros. Se você não possui um editor assim, poderá usar um validador online fornecido pelo W3C - Validador HTML do W3C - Validador CSS do W3C - onde você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não existência de erros! É evidente que o programa tem que saber qual é a 'linguagem' que foi usada na marcação - existem várias versões ('linguagens') do HTML. Todos os exemplos que mostrei, foram escritos usando o HTML esta é a versão atual e a mais utilizada. Existem sub-versões do HTML 'Strict', 'Transitional' e 'Frame Set'. Strict é um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em HTML. Transitional é um conjunto um pouco mais flexível e permite escrever algum HTML mais antigo e para algumas peculiaridades próprias de navegadores. Frame Set não é muito usado nos dias atuais. Não temos nos utilizado do uso de 'frames' pois eles estão em desuso desde o aparecimento das CSS. A maioria das pessoas está satisfeita com o uso de 'Transitional' pois ele não é tão rígido com a marcação, outras gostam de fazer tudo conforme 'reza o manual' e preferem usar 'Strict'. Para dizer ao navegador qual a linguagem de marcação e a sub-versão que você está utilizando, coloque a declaração de DocType logo no início da marcação, no topo da página - acima da tag de abertura <html>. Assim como mostrado abaixo... <!DOCTYPE HTML PUBLIC "-//W3C//DTD

15 HTML 4.01 Transitional//EN" " Não vou analisar a declaração agora, basta que você saiba por enquanto que esta declaração no topo da página fornece ao validador as informações necessárias para ele fazer seu trabalho de validação. Agora o validador saberá quais são as regras (normas) você esta utilizando na marcação e poderá fazer as análises necessárias. Ao adicionar o DocType, poderei checar minhas páginas em um editor de HTML que forneça esta facilidade e estar seguro de que terei um código limpo. Agora que já sabemos da importância do Doctype, podemos voltar ao assunto estilizações. ETAPA NÚMERO 10 - FOLHAS DE ESTILO EXTERNAS Todas as folhas de estilo que construi até agora, foram colocadas dentro da seção <head> das páginas. Este procedimento facilita o entendimento, pois basta olhar o código de marcação da página e ver como foram definidas as regras de estilo. Tudo está colocado em um único lugar. Contudo é muito raro termos páginas isoladas, o mais comum é que tenhamos várias páginas com uma apresentação semelhante em todo o Web site. Em lugar de colocar as folhas de estilo repetidamente em cada uma das páginas construidas, seria uma boa idéia que tivessemos uma única folha de estilos que pudesse ser lincada a cada uma das páginas. Isto permite mudar a cor de fundo das páginas ou usar um tipo ou tamanho de fonte diferente para todo o site, bastando que você faça a alteração na folha de estilo 'mestre'. De fato, você pode mudar completamente a apresentação de todo o site, alterando apenas um arquivo. Dê uma olhada em para ver este princípio em ação. Vários designers construiram suas folhas de estilos para uma página padrão e isto demonstra de uma forma admirável como pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da página, alterando completamente suas características. Para fazer uso de uma folha de estilo externa, basta lincá-la ao documento como mostrado a seguir: <link rel="stylesheet" href="basicsstyles.css" type="text/css" media="screen"> Isto diz ao navegador para procurar as especificações de estilo em um arquivo chamado 'basicsstyles.css'. Trata-se de um arquivo de texto puro - type="text/css" e os estilos foram otimizados para apresentação em uma tela de computador - media="screen". As folhas de estilo não estão limitadas às telas de computador, você poderá criá-las para servir a outras mídias como, impressão, projeção e até mesmo braille. Se você pensar sobre isto, concordará que uma folha de papel para impressão não tem o mesmo formato de uma tela de computador e ninguém gosta de desperdiçar preciosas quantidades de tinta em áreas preenchidas com cores sólidas, quando tudo o que se quer impresso é um texto em preto e branco. Uma folha de estilo para impressão deve especificar uma área de impressão compatível com uma folha de papel e ao contrário de estilizações para a tela deverá usar tamanhos de fontes em 'points' (pt). Esquemas coloridos devem ser minimizados ou mesmo abandonados completamente. Então tudo o que você precisar fazer é adicionar outro link na seção <head> do documento, imediatamente abaixo daquele para mídia tela. <link rel="stylesheet" href="printstyles.css" type="text/css" media="print"> Se você decidir que sua folha de estilo serve tanto para tela como para impressora, você poderá usar um link como mostrado a seguir... <link rel="stylesheet" href="styles.css" type="text/css" media="all"> Embora a maioria das minhas folhas de estilos sejam do tipo externa, eu começo meus projetos com a folha de estilo declarada no próprio documento. Quando eu estou satisfeito com as definições de estilo que construi copio-colo a folha em um arquivo novo e coloco um link para ele na página. ETAPA NÚMERO 11 - ESTILIZANDO TABELAS Embora as tabelas venham sendo usadas para layout desde as eras negras da Web, penso que devo mostrá-las aqui, para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade. Tabelas tem por razão de ser e finalidade, a apresentação de dados tabulares, aquelas coisas que normalmente são colocadas em 'folha de dados' onde você precisa de linhas e colunas para relacionar textos ou mesmo figuras. Nos tempos antigos (e de navegadores hoje ultrapassados) você alterava a apresentação de uma tabela

16 e de suas células, usando várias propriedades - cores de fundo, imagens de fundo, etc. Uma grande quantidade destes atributos atualmente está em desuso e há algum tempo já não são mais válidos - muito embora eles hoje ainda funcionem, para o futuro é bom não contar com eles. Na verdade é melhor que você não conte com eles desde já. Se você tentar colocar uma imagem de fundo que seja renderizada no Netscape 4 ou anterior tera que repetí-la para cada célula individualmente, como se tivesse dividido a imagem em múltiplas partes, tornando a tarefa pouco usual e frustrante. A prática usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem não é mais válida. Tabelas devem se auto ajustar em dimensões ao seu conteúdo. A estilização de tabelas com CSS tem seus macetes próprios e nem sempre é simples e imediata. Você poderá construir sua estrutura de tabela usando display:table; and display:table-cell; no qual cada célula é uma div, e para fins de estilizações usar os elementos HTML de tabelas - table, tr, td, th, etc - com a finalidade de facilitar a tarefa. tr é uma linha da tabela, uma fila horizontal de células. td e uma divisão de uma linha da tabela. Você deve estar pensando em coluna, mas o comportamento não é de coluna e você não pode colocar uma imagem de fundo na coluna ou estilizar. As tabelas herdam alguns estilos das DIV's em que forem colocadas, alguns, mas não todos os estilos. Se você definir font-family: verdana, arial, sans-serif e color: #009, para o corpo (body) de sua página, as tabelas herdarão estas definições, mas não herdarão tamanhos de fontes e nem alinhamentos de textos. Há também uma hierarquia para os elementos de tabelas. Uma definição para td prevalece sobre uma para tr, que por sua vez prevalece sobre aquelas para table. Você pode tirar vantagem desta hierarquia. Se você definir uma cor preta para fundo da tabela e uma cor branca para td e um cellspacing="2", você terá uma tabela com com células brancas e uma borda preta de 2px ao redor. Nota do tradutor: No original desta página o autor mostrou a seguir 5 tabelas estilizadas e comentadas, com as regras de estilo para cada uma delas incorporadas na própria página. Como estou usando em meu site marcação XHTML 1.1 que não admite alguns atributos usados pelo autor, criei uma página separada para mostrar as tabelas estilizadas e assim continuar com minha página válida. Veja o código fonte da página dos exemplos para estudar as regras de estilização das tabelas. Ver Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha pra o fundo das tds. Ver Tabela 2. De acordo com os dados contidos na tabela você poderá dar maior ênfase às linhas horizontais ou às colunas verticais. Ver Tabela 3. Aqui um efeito de alto relevo em 3D conseguido através de definições de estilos para as cores das bordas. Para as linhas do cabeçalho da tabela foi definida uma cor escura. Ver Tabela 4. Usei um gradiente para as linhas do cabeçalho e uma borda esquerda na cor cinza clara para separar as colunas. Ver Tabela 5. OK, eu sou um fã de Mondrian, mas minha intenção aqui é demonstrar que se você quiser, poderá estilizar as células da tabela individualmente. As possibilidades de estilização de tabelas são muitas. Quem disse que as tabelas tem que ser entediantes.

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de

Leia mais

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

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

7. Cascading Style Sheets (CSS)

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

Leia mais

Dicas para usar melhor o Word 2007

Dicas para usar melhor o Word 2007 Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

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

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

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente

Leia mais

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

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

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Como incluir artigos:

Como incluir artigos: Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1

Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Professor: Paulo Macos Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 4/6/2011 1 Do inglês, Cascading Style Sheet, ou folha de estilo em cascata. É uma linguagem

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

CRIANDO TEMPLATES E LEGENDAS

CRIANDO TEMPLATES E LEGENDAS CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-

Leia mais

COMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle:

COMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle: COMO COLABORAR NO WIKI DO MOODLE 1 Ilse Abegg e Fábio da Purificação de Bastos e-mail: iabegg@mail.ufsm.br O wiki no Moodle é uma ferramenta de atividade que visa produção escolar colaborativa. Isso significa

Leia mais

Web Design Aula 15: Conhecendo CSS

Web Design Aula 15: Conhecendo CSS Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando

Leia mais

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

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

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

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

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

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

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

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

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

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

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

Leia mais

FTAD Formação Técnica em Administração. Aula 01 Prof. Arlindo Neto

FTAD Formação Técnica em Administração. Aula 01 Prof. Arlindo Neto FTAD Formação Técnica em Administração Aula 01 Prof. Arlindo Neto COMPETÊNCIAS QUE TRABALHAREMOS NESTE MÓDULO Elaborar um documento de texto eletrônico Microsoft Office Word 2007 O Microsoft Office Word

Leia mais

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

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

Leia mais

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material

Leia mais

02 - Usando o SiteMaster - Informações importantes

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

Leia mais

APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 - Área de trabalho e personalizando o sistema... 3 A área de trabalho... 3 Partes da área de trabalho.... 4 O Menu Iniciar:...

Leia mais

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

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

Google Drive: Acesse e organize seus arquivos

Google Drive: Acesse e organize seus arquivos Google Drive: Acesse e organize seus arquivos Use o Google Drive para armazenar e acessar arquivos, pastas e documentos do Google Docs onde quer que você esteja. Quando você altera um arquivo na web, no

Leia mais

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

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

Leia mais

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

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,

Leia mais

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS CURITIBA 2014 2 Conteúdo Definição:... 2 Detalhando a tela:... 4 BARRA DE FERRAMENTAS DESENHO... 4 PREENCHIMENTOS... 5 RÉGUAS E GUIAS...

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

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

Questão - 01. Essência do Excel 2003...

Questão - 01. Essência do Excel 2003... Valdir Questão - 01 Como deve proceder o usuário do Microsoft para que sejam atualizados os cálculos das funções ou fórmulas utilizadas nas planilhas? a) Pressionar a tecla F9 no teclado b) Pressionar

Leia mais

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS

TUTORIAL CSS PRIMEIROS PASSOS COM HTML + CSS Página 1 Imagem Esta é a tradução do tutorial "Starting with HTML + CSS " de autoria de Bert Bos publicado no site do W3C. 1. A versão oficial e original, em inglês, deste tutorial, encontra-se em: http://www.w3.org/style/examples/011/firstcss

Leia mais

Topo para a loja virtual Brasmarket com imagens

Topo para a loja virtual Brasmarket com imagens Topo para a loja virtual Brasmarket com imagens Este tutorial é para orienta-lo na criação do topo da sua loja virtual Brasmarket usando o programa Paintnet que é gratuito e simples de usar Primeiro faça

Leia mais

Disciplina: Programas de Edição de Textos Professora: Érica Barcelos

Disciplina: Programas de Edição de Textos Professora: Érica Barcelos Disciplina: Programas de Edição de Textos Professora: Érica Barcelos CAPÍTULO 4 4. RECURSOS PARA ILUSTRAÇÕES Uma característica que difere os processadores de textos dos editores é a possibilidade de gerar

Leia mais

Manual do Google agenda. criação e compartilhamento de agendas

Manual do Google agenda. criação e compartilhamento de agendas Manual do Google agenda criação e compartilhamento de agendas 1 O que é o Google Agenda? Google Agenda é um serviço de agenda on line gratuito do Google, onde você pode anotar compromissos e tarefas, organizando

Leia mais

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

Manual de configuração do sistema

Manual de configuração do sistema Manual de configuração do sistema (v.1.5.x Beta) Rua México, 119 Sala 2004 Centro Rio de Janeiro, RJ www.doctors-solution.com.br www.simdoctor.com.br contato@simdoctor.com.br Sumário 1. Fazendo seu primeiro

Leia mais

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

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

Leia mais

Montar planilhas de uma forma organizada e clara.

Montar planilhas de uma forma organizada e clara. 1 Treinamento do Office 2007 EXCEL Objetivos Após concluir este curso você poderá: Montar planilhas de uma forma organizada e clara. Layout da planilha Inserir gráficos Realizar operações matemáticas 2

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

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

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

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

OFICINA BLOG DAS ESCOLAS

OFICINA BLOG DAS ESCOLAS OFICINA BLOG DAS ESCOLAS Créditos: Márcio Corrente Gonçalves Mônica Norris Ribeiro Março 2010 1 ACESSANDO O BLOG Blog das Escolas MANUAL DO ADMINISTRADOR Para acessar o blog da sua escola, acesse o endereço

Leia mais

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

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

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de

Leia mais

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

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

Leia mais

Kobo Desktop. Manual do Usuário

Kobo Desktop. Manual do Usuário Kobo Desktop Manual do Usuário Kobo Desktop Manual Do Usuário Índice Sobre o Kobo Desktop... 4 Como baixar e instalar o Kobo Desktop... 5 Como instalar o Kobo Desktop para Windows... 5 Como instalar o

Leia mais

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

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

Leia mais

Conectar diferentes pesquisas na internet por um menu

Conectar diferentes pesquisas na internet por um menu Conectar diferentes pesquisas na internet por um menu Pré requisitos: Elaboração de questionário Formulário multimídia Publicação na internet Uso de senhas na Web Visualização condicionada ao perfil A

Leia mais

Manual. V e r s ã o i P a d

Manual. V e r s ã o i P a d Manual V e r s ã o i P a d índice I. Introdução II. Procedimentos básicos III. A agenda IV. Clientes V. Prontuário VI. Configurações VII. Medicamentos VIII. Tags IX. Receitas X. Contato I Introdução O

Leia mais

TUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER*

TUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER* TUTORIAL COMO CRIAR E EDITAR UM VÍDEO NO WINDOWS MOVIE MAKER* * Microsoft Windows MovieMakeré um programa da Microsoft Corporation. A versão utilizada é a 5.1 que já vem instalada no Microsoft Windows

Leia mais

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna O que é uma planilha eletrônica? É um aplicativo que oferece recursos para manipular dados organizados em tabelas. A partir deles pode-se gerar gráficos facilitando a análise e interpretação dos dados

Leia mais

CRIAÇÃO DE SITES (AULA 7)

CRIAÇÃO DE SITES (AULA 7) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 7) CSS significa CascadingStyleSheetes(Folhas de Estilo em Cascata). Não seria ótimo

Leia mais

CONSTRUÇÃO DE BLOG COM O BLOGGER

CONSTRUÇÃO DE BLOG COM O BLOGGER CONSTRUÇÃO DE BLOG COM O BLOGGER Blog é uma abreviação de weblog, qualquer registro frequênte de informações pode ser considerado um blog (últimas notícias de um jornal online por exemplo). A maioria das

Leia mais

Serviço Técnico de Informática. Curso Básico de PowerPoint

Serviço Técnico de Informática. Curso Básico de PowerPoint Serviço Técnico de Informática Curso Básico de PowerPoint Instrutor: Tiago Souza e Silva de Moura Maio/2005 O Microsoft PowerPoint No Microsoft PowerPoint, você cria sua apresentação usando apenas um arquivo

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

&XUVRGH,QWURGXomRDR (GLWRUGH3ODQLOKDV([FHO

&XUVRGH,QWURGXomRDR (GLWRUGH3ODQLOKDV([FHO Universidade Federal de Viçosa Departamento de Informática &XUVRGH,QWURGXomRDR (GLWRUGH3ODQLOKDV([FHO Flaviano Aguiar Liziane Santos Soares Jugurta Lisboa Filho (Orientador) PROJETO UNESC@LA Setembro de

Leia mais

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

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

Manual do Painel Administrativo

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

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Oficina de Construção de Páginas Web

Oficina de Construção de Páginas Web COMPETÊNCIAS BÁSICAS EM TIC NAS EB1 Oficina de Construção de Páginas Web Criação e Publicação Actividades de exploração Objectivo Explorar as funcionalidades essenciais do Programa, na perspectiva da construção/actualização

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

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu Professoras Formadoras do NTE Uruaçu Uruaçu - 2009 Núcleo de Tecnologia Educacional de Uruaçu Rua Maranhão Quadra 02 Lote 01 Bairro JK Uruaçu Goiás Telefone: (62)3357-4237 - Fax : 3357-4217 E-mail nteuruacu@hotmail.com

Leia mais

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza

DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente

Leia mais

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

Prática 3 Microsoft Word

Prática 3 Microsoft Word Instituto Federal de Educação, Ciência e Tecnologia do Estado da Paraíba, Campus Sousa Disciplina: Informática Básica Prática 3 Microsoft Word Assunto: Tópicos abordados: Prática Utilização dos recursos

Leia mais

Google Drive. Passos. Configurando o Google Drive

Google Drive. Passos. Configurando o Google Drive Google Drive um sistema de armazenagem de arquivos ligado à sua conta Google e acessível via Internet, desta forma você pode acessar seus arquivos a partir de qualquer dispositivo que tenha acesso à Internet.

Leia mais

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o

Leia mais

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007 WORD 2007 PREFEITURA DO MUNICÍPIO DE LONDRINA SECRETARIA MUNICIPAL DE EDUCAÇÃO GERÊNCIA DE TECNOLOGIA Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Treinamento de Drupal para Administradores do Site Bibliotecas UFU

Treinamento de Drupal para Administradores do Site Bibliotecas UFU Treinamento de Drupal para Administradores do Site Bibliotecas UFU 1 1. Como logar no sistema como usuário autenticado Para logar no sistema como usuário autenticado é necessário digitar /user na frente

Leia mais

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na

Leia mais

SUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2

SUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2 SUMÁRIO 1. AULA 6 ENDEREÇAMENTO IP:... 2 1.1 Introdução... 2 1.2 Estrutura do IP... 3 1.3 Tipos de IP... 3 1.4 Classes de IP... 4 1.5 Máscara de Sub-Rede... 6 1.6 Atribuindo um IP ao computador... 7 2

Leia mais

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec Construindo Sites com CSS e (X)HTML sites controlados por folhas de estilo em cascata Maurício Samy Silva Novatec capítulo 1 Ferramentas básicas de desenvolvimento Este capítulo destina-se aos iniciantes.

Leia mais

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim.

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução Exemplo de imagem com diferentes resoluções de Pontos/Pixels por polegada". Em uma imagem digital quanto mais

Leia mais

Guia Site Empresarial

Guia Site Empresarial Guia Site Empresarial Índice 1 - Fazer Fatura... 2 1.1 - Fazer uma nova fatura por valores de crédito... 2 1.2 - Fazer fatura alterando limites dos cartões... 6 1.3 - Fazer fatura repetindo última solicitação

Leia mais

Manual do Usuário. Minha Biblioteca

Manual do Usuário. Minha Biblioteca Manual do Usuário Minha Biblioteca Sumário Acesso a Minha Biblioteca... 3 Tela Principal... 3 Para que serve o ícone Minha Biblioteca?... 3 O que você encontra no campo Pesquisar?... 4 Quando utilizar

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

15. OLHA QUEM ESTÁ NA WEB!

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

Leia mais

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

Construtor de sites SoftPixel GUIA RÁPIDO - 1 - GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template

Leia mais