Transcript
Projeto eJovem Módulo II: HTML
1
Capítulo 1. HTML 1.1. Introdução Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem.
1.1.1. Internet Mais que um modismo, a Internet tornouse um fenômeno. Conectando mais de um milhão de computadores e cerca de 40 milhões de usuários, espalhados em diversos países, valores estes que mudam a cada dia. Sem dúvidas, não dá para ficar de fora desta teia. Enfim, se formos definir Internet, o melhor é utilizarmos o termo comunicação, pois através dela encontramos serviços e facilidades; notícias e atualidades; ou ainda, como é o caso de muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e muito mais, como lojas virtuais, onde podemos comprar ou vender com toda segurança.
1.1.2. Histórico da Internet A Internet teve início em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores tinha como finalidade demonstrar as potencialidades na construção de redes, usando computadores dispersos (espalhados) em uma grande área. A idéia foi boa, e em 1972, 50 universidades e instituições militares já possuíam conexões. Hoje é uma arquitetura de softwares e hardwares que estabelecem comunicação entre si, a qual é mantida por organizações comerciais e governamentais. Mais uma das principais características da Internet, é que não possui proprietário. Para organizar todas estas trocas de informações, existem associações e grupos que se dedicam para suportar, ratificar padrões e resolver questões operacionais, visando promover os objetivos da Internet.
1.1.3. A Word Wide Web (WWW) As pessoas costumam falar em Internet e Web, será a mesma coisa? Será apenas uma gíria da moçada do bate papo? Ou existe realmente um conceito científico para isto? Para resolver esta dúvida e também para começarmos a entender esta série de definição de conceitos, vamos partir do seguinte princípio: A Word Wide Web (Ampla Rede Mundial) é conhecida como WWW, uma nova estrutura de navegação pelos diversos itens de dados em vários computadores diferentes. O modelo WWW trata todos os dados da Internet como hipertexto, isto é, vinculações entre as diferentes partes do documento para permitir que as informações sejam exploradas interativamente e não apenas de uma forma linear. Por isso, existem programas como o Mozilla Firefox e o Microsoft Internet Explorer que aumentaram muito a popularidade da Internet e graças às suas potencialidades. Hoje, podemos nas páginas da Internet: ver documentos formatados (cores, efeitos e etc...),
Projeto eJovem Módulo II: HTML
2
escutar música, assistir a vídeos, e muito mais. Enfim, a Web é a interface gráfica da Internet, pois podemos acessála, transferir arquivos (Processo este que chamamos UpLoad) e realizar outras operações básicas, sem precisar de uma interface gráfica. Para concluir, só estamos de fato usando a Web quando estamos navegando, fazendo uso das Home Pages para acessar um site, ou seja, um endereço único que contêm a Home Page (página inicial) e outras páginas que fazem parte deste conjunto de páginas e todas em um único código fonte escrito em uma linguagem chamada HTML.
1.1.4. Web Web é o diminutivo para World Wide Web. Termo esse usado originalmente para a parte da Internet que surgiu no início da década de 90, composta por informações dispostas em forma de textos, imagens e sons. É através da Web que se navega com a ajuda de Browsers. Antes, trocavase basicamente mensagens. As duas redes acabaram se fundindo e hoje a palavra Web é usada como sinônimo da própria Internet ("Grande Rede").
1.1.5. Hipertexto Originalmente, Hipertexto é qualquer informação de texto em um computador, que contenha saltos (links) para outras informações. Os documentos visualizados através dos Browsers são escritos em Hipertextos, utilizandose uma linguagem especial chamada HTML (HyperText Markup Language). Através de um hipertexto podemos “navegar” de forma especial através de elementos chamados “links”, os quais remetem para outros documentos ou para partes do mesmo documento. Um documento “nãohipertexto” permite somente que naveguemos em uma seqüência, percorrendo seu conteúdo para frente e para trás. O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo animações, sendo definido com a inserção desses novos recursos de “hipermídia”. Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft Windows.
1.1.6. Links ou Hyperlinks Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em outro arquivo, representado por meio de texto colorido ou sublinhado, de uma figura, de um elemento gráfico ou de um mapa de imagens. Você pode clicar em um link para saltar até um local onde se encontra um arquivo em seu sistema local, para um compartilhamento de rede na World Wide Web ou até para uma Intranet.
Projeto eJovem Módulo II: HTML
3
1.1.7. Home Page Home Page é um conjunto de “páginas", documentos disponíveis na Web, interligados entre si (através de links). O termo Home Page também é usado para designar a "página principal" de um conjunto de documentos. Um conjunto de "páginas" também é chamado de Site. Alguns Servidores da Web reservam index.htm como o nome da home page (página principal), enquanto outros a denominam como default.htm.
1.1.8. Site Palavra em inglês que significa local, lugar. Na Internet, designa um conjunto de páginas que representa uma pessoa, instituição ou empresa na rede.
1.1.9. Browsers (Navegadores da Web) Browsers são softwares que leem e interpretam arquivos HTML (Hyper Text Markup Language) enviados para a World Wide Web, formataos em páginas da Web e os exibe ao usuário. Navegadores da Web também podem executar som ou arquivos de vídeo incorporados em documentos da Web, bastando ter disponível o hardware necessário. Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o Mozilla Firefox, vêm acompanhados de outros programas para Internet, como o leitor de Correio Eletrônico (email). Existem outras opções de Browsers, basta escolher um deles e partir tranquilo pelos “mares" da Internet.
1.1.10. Protocolo Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. É um método de acesso a um documento ou serviço através da Internet. Dois principais protocolos usados são o File Transfer Protocol (FTP) e o Hypertext Transfer Protocol (HTTP).
1.1.11. Protocolo HTTP (HyperText Transfer Protocol) HTTP (Protocolo de Transferência de Hipertexto) é um protocolo da Internet utilizado pelos computadores ligados à Web para se comunicarem, ativa os navegadores da Web para recuperarem informações de servidores da World Wide Web. O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações digitais de um servidor da Web. Endereços URL de recursos HTTP começam com http://.
1.1.12. Protocolo FTP (File Transfer Protocol) FTP (Protocolo de Transferência de Arquivo) é um protocolo que possibilita a transferência de arquivos de um local para outro pela Internet. Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam
Projeto eJovem Módulo II: HTML
4
download de programas por esse processo. Protegido por senhas, o FTP também é utilizado para atualizar, à distância, sites localizados em empresas hospedeiras. URLs de arquivos em servidores FTP começam com ftp://.
1.1.13. URL (Uniform Resource Locator Localizador de Recursos Uniforme) Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi desenvolvido a URL (Uniform Resource Locator). URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP), através do qual o site ou o recurso é acessado. A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo Internet está sendo usado. As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da Internet ou localização simbólica. (www.xyz.com.br, por exemplo) ou o endereço IP do site.
1.1.13.1. URL Absoluto O URL absoluto inclui um protocolo, como “http", local da rede, além de caminho e nome de arquivo opcionais. Exemplo: http://www.xyz.com.br/treinamento/cursos.htm, é um URL Absoluto.
1.1.13.2. URL Relativo Em uma referência relativa assumese que a máquina e diretório do item já estão sendo usados e apenas é necessário indicar o nome do arquivo desejado (ou possivelmente subdiretório e arquivo). Um URL relativo inclui um protocolo. Exemplo: O URL relativo Treinamento/Cursos.htm referese à página Cursos.htm, na pasta Treinamento, abaixo da pasta atual.
1.1.13.3. Endereço Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino. Um endereço pode ser um URL (Uniforme Resource Locator Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention Convenção Universal para Nomes), o formato padrão para caminhos que incluem um servidor de arquivo de rede de área local que utiliza a sintaxe a seguir: Exemplo: /servidor/compartilhamento/caminho/nome do arquivo O endereço http://www.xyz.com.br indica um URL do Web Site da XYZ Informática Ltda.
Projeto eJovem Módulo II: HTML
5
1.1.13.4. Entendendo uma URL http://www.xyz.com.br/treinamento/cursos.htm#local •http:// → Protocolo Protocolo da Internet utilizado pelos computadores ligados à Web
para comunicaremse entre si. •www.xyz.com.br
→ Nome do Domínio Domínio são as categorias de endereços da Internet que representam países ou tipos de organização. •www → Sigla de World Wide Web, significa Rede Mundial •xyz → Nome específico que pode conter uma ou mais palavras, separadas ou não, por
hifens (ex.: XYZinformática), que simboliza, por exemplo, o nome da empresa, ou de um produto especifico. •com → Tipo de Domínio Indica a natureza do Site. No caso, como tratase de um Site de
uma empresa privada, ".com" vem de comercial. Outros Exemplo: .gov (governo) e .org (organizações sem fins lucrativos).
•br → Sigla do País composta de duas letras, significa que a página está situada em um
computador no Brasil. Páginas que não possuem terminação indicando o país de origem estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japão). •treinamento → Diretório (pasta) onde está localizado a página (arquivo) cursos.htm.
Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado. •cursos.htm → Nome da página escrita em HTML requerida (páginas da Web geralmente
tem terminação em .htm ou .html). •#local → Aponta para o local específico dentro da página que será exibida.
1.1.14. Endereço IP (Endereço do Protocolo Internet) É a maneira padrão de identificar um computador conectado à Internet, da mesma forma que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP é representado por quatro números separados por pontos e onde cada número é menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu computador. O tipo mais comum de URL é http://, que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são: •ftp://
→ que fornece o local da rede de um recurso FTP (este serviço representa o protocolo de transferência de arquivo na Internet). •gopher:// → que fornece o endereço Internet de um diretório gopher (representa um
serviço nãográfico de informações, dirigido por menus). •news:// →
grupos de discussão ou de notícias (representa o serviço de BBS (bulletin board) organizado em áreas de interesse especial). •mailto:// → para especificar um endereço de Correio Eletrônico da Internet (para enviar
correio eletrônico).
Projeto eJovem Módulo II: HTML
6
1.1.15. ISP (Internet Service Provider) 1.1.15.1. Provedores O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de um Provedor podemos ter acesso à Internet e serviços de hospedagem de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores" (Browsers) por uma combinação de computador e programas que formam os servidores situados em instalações apropriadas. Neste caso, o Provedor aluga espaço em um disco rígido, cuja máquina deve estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet. A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada) ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada) e ainda, através de banda larga. Um provedor geralmente oferece várias funções de aplicações como World Wide Web (http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de dados). A maioria dos provedores também disponibiliza caixa postal eletrônica, "contas" de email para seus usuários, juntamente com os serviços de acesso e hospedagem.
1.1.15.2. Seu Site na Grande Rede Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor. Alguns programas específicos podem facilitar o seu Upload, já que o Browser funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. Mas, sem dúvidas, existe um excelente, o Internet Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para outra.
1.1.15.3. Login •Acesso → É o processo de identificarse ao entrar num computador ou em uma rede de
computadores. A cada entrada na Internet, você se "loga" (faz o login) em seu Provedor, colocando nome (username) e senha (password).
1.2. Introdução à Linguagem HTML Originado do casamento dos padrões HyTime (Hypermedia/Timebased Doumnt Structuring Language) e SGML (Standard Generalized Markup Language), o HTML, sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto), linguagem usada para criar páginas na Web, estabelece como um determinado elemento deve ser visualizado, não sendo portanto uma linguagem de programação, e sim, uma linguagem de formatação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas, como: textos, fotos ou animações, que serão visualizadas pelo programa de navegação (Browser).
Projeto eJovem Módulo II: HTML
7
1.2.1. HyTime (Hyprmedia/Timebased Document Structuring Language) HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões e processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padrões de maneira particular.
1.2.2. SGML (Standard Generalized Marup Language) Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna se conveniente para transformar documentos em hiperobjetos e para descrever as ligações. SGML não é aplicado de maneira padronizada: todos os produtos SGML tem seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.ssa, sendo esta uma postura que deve ser tomada. O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a capacidade de graválo como código ASCII (American Standard Code for Information Interchange código utilizado para representar textos quando há computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle. Podese usar, portanto, o gedit, kate, kedit nas distribuições linux, ou o Notepad, do Windows. Podese também usar editores mais modernos, como o BrOffice Writer ou o Word, sendo necessário neste caso, que o documento seja gravado no formato texto, e não, como um ''.odt" normal do BrOffice Writer ou “.doc" normal do MSWord.
1.2.3. Conjunto de caracteres ASCII O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de informações (ASCII, American Standard Code for Information Interchange) e que é amplamente usado para representar letras e símbolos encontrados em um teclado americano padrão. O conjunto de caracteres ASCII é igual aos 128 primeiros caracteres (0127) do conjunto de caracteres ANSI.
1.2.4. Conjunto de caracteres ANSI O conjunto de caracteres de 8 bits, do Instituto Nacional de Padronização Americano (ANSI, American National Standards Institute), que é usado pelo Microsoft Windows e que possibilita a representação de até 256 caracteres (0255), através do teclado. Os 128 primeiros caracteres (0127) correspondem a letras e símbolos de um teclado americano padrão. Os outros 128 caracteres (128255) representam caracteres especiais, como letras de alfabetos internacionais, acentos, símbolos monetários e frações. Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador (Browser), você verá páginas na WEB bem dinâmicas, organizadas, animadas e com ela trazendo informações, imagens, sons, vídeos e etc. Então, você deve se perguntar: Como é feito? Como elas se propagam? Todas estas páginas
Projeto eJovem Módulo II: HTML
8
possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language). Este manual tem por objetivo mostrálo como criar e exibir páginas HTML, como as que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão“.html”. Portanto, deveremos salvar nossos exercícios com esta extensão. Já que entendemos melhor como funciona a internet em geral, daremos inicio ao curso de HTML. Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma “barra” ( / ): Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e onde termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento, não havendo a necessidade do fechamento:
Todos os elementos podem ter atributos: HTML é um recurso muito simples e acessível para a produção de documentos. Nesta apostila, será possível aprender grande parte de seus elementos. Nota: Não existem programas em HTML, pois HTML não é uma linguagem de programação, mas de formatação (marcação). Portanto, a rigor, não existem "programadores" de HTML.
1.3. Edição de Documentos HTML Existem Editores HTML chamados WYSIWYG (what you see is what you get o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser1 usado para visitar a página). Alguns bastante conhecidos são, por exemplo: FrontPage e Dreamweaver. Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, como dito anteriormente, normalmente terá extensão .html. Porém, poderão também estar no formato .htm. Gostaria de lembrar, como citei na linha acima, que existem vários editores de Home Pages, como por exemplo: o Front Page Express, Netscape Composer, Home Site, etc. Só que na
Projeto eJovem Módulo II: HTML
9
ausência destes aplicativos e sendo desconhecida a Linguagem de HyperTextos, HTML, não poderia criar suas páginas. Daí, a importância de se conhecer esta linguagem. Para estudarmos HTML, usaremos editores de texto simples, como: gedit, kate ou Bloco de Notas. Precisaremos também de um Browser (Mozilla Firefox ou Internet Explorer) para que possamos visualizar como nossa página está ficando. Para nossos exemplos, usarei o Mozilla Firefox. Tudo Bem? Mas antes, vamos entender como estas páginas são colocadas para que todos possam ver na Web.
1.4. Publicação de Documentos na Internet (Sites) Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor. Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo. Já tendo uma idéia dos principais conceitos, vamos começar a produzir nossas páginas.
1.5. Documento HTML Básico e seus Componentes A estrutura básica de uma página HTML é mostrada na abaixo. Observe que a construção de páginas exige o uso das TAGS:
Com certeza, você observou melhor o que foi dito anteriormente, que as TAGs normalmente estarão antes e depois de algo, onde este algo pode ser algum texto, ou outro conjunto de TAGs que estão entre estas duas TAGS. As etiquetas (tags) HTML não são case sensitive, ou seja, as TAGS não fazem diferença entre letras maiúsculas ou minúsculas. Tanto faz escrever, por exemplo, , , , , etc. Onde : Principais TAG's
<body>
Marca o início e fim do documento Marca o início e o fim do cabeçalho Marca o inicio e o fim do título Marca o início e o fim do do corpo da página
Projeto eJovem Módulo II: HTML
10
O documento HTML básico dividese, principalmente, em duas TAGS principais das vistas acima, sendo elas: <HEAD> e <BODY>.
1.5.1. <HEAD> Esta TAG contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Exemplo: Todo documento WWW deve ter um título, onde principalmente esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Portanto, este é um dos motivos pelo qual se sugere que, ao dar um título a uma página ele seja sugestivo, evitandose títulos genéricos, como "Introdução", por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet.
1.5.2. <BODY> Tudo que estiver contido em <BODY> (Corpo do Texto) será mostrado na janela principal do browser, sendo apresentado ao leitor. No corpo do texto pode conter, por exemplo: imagens, vídeos, sons, cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, formulários, animações, entre outros. Exercício 1: Com o que foi visto até agora, vamos criar uma página HTML simples. •Passo
1: Abrir o Ambiente de Desenvolvimento WEB (Iniciar>Desenvolvimento WEB>Quanta Plus) •Passo 2: Digite o código exatamente como está abaixo:
Passo 3: Após digitálo, salvar em uma pasta (Crie uma pasta no computador com seu nome, e dentro dela outra pasta com o nome “Minhas páginas HTML” ) com o nome “Minha_primeira_página.html” Como salvar: Para Salvar, é simples: Basta primeiramente clicar no menu: Arquivo → Salvar. Localizase onde está sua pasta e é só salvar quando estiver dento de “Minhas páginas HTML”
Projeto eJovem Módulo II: HTML
11
Para ver o resultado deste exemplo, abra o arquivo com o Mozilla Firefox ou com o Konqueror.
Perceba que existe uma parte do texto que não é mostrada e que existe um texto após a tag title: “<!Título do Documento>”. Isto é um comentário e não será mostrado na página. Poderão existir, dentro de cada tag, atributos para implementar. Veremos então abaixo alguns destes atributos da TAG <BODY>.
1.5.2.1. Atributos de <BODY> Dentro da TAG <BODY> é possível ter vários atributos e podemos definilos, por exemplo, as cores: para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água): Onde:
BGCOLOR TEXT LINK ALINK VLINK BACKGROUND
Atributos da TAG <BODY> Background Color (ou cor de fundo da página). A cor padrão é branca. Cor dos textos da página (padrão: preto). Cor dos links (padrão: azul). Cor dos links quando acionados, clicados (padrão: vermelho). Cor dos links depois de visitados (padrão: azul escuro ou roxo). Caminho para a figura de fundo.
Na TAG <BODY> acima, percebemos que, por exemplo, no bgcolor temos “#rrggbb”. Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos, tais como #FF80A0. Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows por exemplo, podemos escrever: BGCOLOR="BLUE".
Projeto eJovem Módulo II: HTML
12
Porém, browsers mais antigos não apresentarão as cores indicadas. BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página, como uma marca imagem de fundo. O significado do link, alink e vlink, não serão discutidos agora, mas estas TAGS servirão para o uso de links, ou seja, atalho para outras páginas, o que será visto posteriormente. Nota: Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Exercício 2: Abra novamente o editor de texto e digite o código abaixo: Salve com o nome “segunda_pagina.html”
O resultado da página poderá ser feito no próprio programa ou como visualizamos o primeiro exercício. Para visualizar pelo programa, clique no ícone em destaque, como mostrado na imagem abaixo:
Agora, vamos Visualizar pelo Konqueror, como foi visualizado o primeiro exercício. Veja o resultado:
Projeto eJovem Módulo II: HTML
13
Opa! Aconteceu algo errado! Os acentos viraram caracteres malucos? Bom, é preciso falar para o navegador qual codificação ele está usando. Para que nosso texto seja mostrado normalmente, iremos criar uma nova página e colocar nossas informações nela para sair corretamente. Primeiramente, vamos criar um novo arquivo: Clique no ícone Kommander Quick Start Dialog (Figura abaixo).
Irá abrir uma janela (Imagem ao lado). Como apresentado nela, desmarque as opções “Mostrar DTD” e “Meta Quanta”. Confirme clicando em “OK”, após estas alterações. Aparecerá um documento com a estrutura que vimos anteriormente, mas com uma novidade, a TAG
Não é preciso entendermos a fundo sobre esta TAG agora, pois o importante é saber que ela resolverá nosso problema. Agora, com esta estrutura montada, percebamos que no rodapé da página existe a página que salvamos este novo documento.
Com base nisso, clique em Segunda_página.html e copie o que está dentro da tag <title> e o que está dentro da tag <body>, e faça alteração no texto, como mostra a figura abaixo:
Salve como “Segunda_página_modificada.html”, e volte para ver como ficou esta página. Viu a diferença?
Projeto eJovem Módulo II: HTML
14
Concordo que é muito chato ficar toda vez digitando todo o código principal. Sabemos então que, para nossa página sair mais interessante, o uso da TAG <meta> para a codificação é muito importante. Portanto, vamos criar um novo documento, como feito no exemplo anterior, e vamos fazer o Exercício 3, já que ela nos dá a estrutura principal da nossa página. Exercício 3: Algumas vezes é melhor colocar na nossa página uma imagem de fundo, no lugar de uma cor de fundo, não acha? Então, que tal agora colocar uma imagem, ao invés da cor de fundo? Vamos digitar o arquivo para depois explicar como colocar a imagem. Deixe o seu arquivo, como mostra abaixo:
Agora, teremos que ir buscar na internet alguma imagem para colocar como plano de fundo. Que tal escolher uma imagem no Firefox, por exemplo? Após escolhida a imagem, salvea dentro da pasta que estarão nossas páginas HTML, no nosso caso, dentro de “Minhas Páginas HTML”. Escolhemos a imagem com o nome “firefox wallpaper.jpg”. Portanto, colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG <body>, como mostra abaixo: Salve com o nome “Segunda_pagina_com_background.html”, e faça a visualização novamente. Veja o resultado:
Projeto eJovem Módulo II: HTML
15
Nota: Devese ter cuidado na hora de escolher o tipo de plano de fundo ou cor de fundo, pois, por exemplo, se neste caso tivessemos usado um plano de fundo com cor mais clara, provavelmente ficaria difícil enxergar as letras do texto.
É importante que mesmo que sua página tenha uma imagem de fundo, ela também tenha uma cor de fundo. Sempre coloque uma cor de fundo parecida com o do plano de fundo, pois pode ser que por algum motivo a imagem não seja carregada. Então, o Leitor da sua página poderá ainda sim, mesmo não visualizando a imagem, ver o texto escrito.
1.6. Cabeçalho (Títulos) <Hn></Hn> Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
Esses cabeçalhos são mostrados no browser da seguinte forma:
Exercício 4: Vamos agora utilizar a página do exercício 3, salvandoa como “Pagina_com_cabeçalho.html”. Observe abaixo e faça as alterações necessárias:
Salve novamente, mas como a página já tem um nome, é necessário só atualizar as alterações. A seguir, vamos ver algo mais sobre os cabeçalhos.
Projeto eJovem Módulo II: HTML
16
Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados (Colocados um dentro do outro), pois a formatação pode produzir algum resultado próximo ao desejado. Observe abaixo o código e, logo em seguida, como ficou:
Mas o mais comum é que os browsers "entendam" essa formatação como sendo: Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de <h1> e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o seguinte resultado: Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos. Alinhamento de cabeçalhos Os cabeçalhos têm atributos de alinhamento:
Como resultado:
1.7. Fonte <FONT></FONT> Até agora, construímos uma página relativamente simples. Percebemos então que o texto todo ficou de uma cor só até o momento. Mas será que a página só poderá ficar assim? Não poderíamos codificar o tipo de fonte, nem o tamanho, muito menos a cor? Claro que isso é possível! E é para isso que serve a TAG <FONT>
Para utilizar as mudanças acima, devemos complementar a TAG <FONT> com os seus atributos, como por exemplo:
Projeto eJovem Módulo II: HTML
17
Onde: SIZE FACE COLOR
Artibuotos da TAG <FONT> Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte utilizada; Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada, será usada a fonte padrão. Esta opção permite que seja definida uma fonte diferente para o texto; Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor pode ser especificado pelo código hexadecimal ou, para algumas cores, pelo seu nome em inglês (blue, black, white etc.).
Abaixo, vemos a diferença das duas TAGs citadas acima:
Veremos um pouco sobre cada um dos atributos, começando pelo tamanho. A TAG acima produzirá a palavra “Texto” com o tamanho numero 3(tamanho padrão). Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos a esse, por exemplo:
Digite os exemplos e veja a diferença entre eles. Para a seleção das fontes, usaremos o atributo FACE:
Digite e veja o resultado. Descubra as outras fontes que existem e faça o texto também. As cores são introduzidas também através do elemento <FONT> quando queremos que alguma parte do texto fique diferente da forma padrão, ou da que foi definida na TAG <BODY>. Usase também o sistema RGB, para cores (da mesma forma que vimos para cores anteriormente), como mostrado no exemplo a seguir: Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Mais exemplos:
Projeto eJovem Módulo II: HTML
18
Perceba, como foi dito anteriormente, que tanto faz colocar em letras maiúsculas ou minúsculas, pois o navegador vai interpretar corretamente.
1.8. Estilos de texto Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto, como colocar um plano e fundo e como alterar partes do texto, mas e se quisermos colocar, por exemplo, uma palavra em negrito e sublinhado, como o título? Sim, isso é possível, por isso vamos estudar os estilos. Estilos Físicos <B> <I> <U> <STRIKE> ou <S> <BIG> <SMALL> <SUB> <SUP>
Negrito Itálico Sublinhado. Frase riscada. Fonte um pouco maior. Fonte um pouco menor. Frase em estilo índice, como em H2O, por exemplo. Frase em estilo expoente, como em Km2, por exemplo.
Outras TAGs de formatação Temos outras TAGs que, dependendo no Navegador, podem ou não funcionar corretamente: HTML oferece outras TAGs para formatação: <PRE> <BLOCKQUOTE> <ADDRESS> <CODE>. <STRONG> <DFN> <EM> <CENTER>
Outras TAGs de Formatação Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações É usado para citações longas Usado para formatar endereços de EMail e referências a autores de documentos, como por exemplo: Utilizada para relacionar o códigofonte de programas. Geralmente será visualizado em fonte monoespaçada. Utilizada para dar ênfase especial a um trecho de texto. Geralmente será visualizado em fonte Utilizada para destacar um definição. Geralmente será visualizado em fonte itálica. Utilizado para sublinhar parte do texto Utilizada para centralizar um texto na tela.
A TAG <PRE> permite criar textos préformatados, semelhantes aos produzidos em editores de texto. Espaços em branco, marcas de tabulação e quebras de linha são reconhecidos e colocados nos respectivos pontos de inserção. Textos préformatados são representados pela fonte mono espaçada, definida pelo usuário. Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos. Dentro de um texto préformatado:
Projeto eJovem Módulo II: HTML
19
•
É permitido utilizar links e âncoras. Entretanto, não existe certeza de como o browser interpretará essas marcações.
•
A TAG <P> não deve ser utilizado.
•
Não devem ser usados outros comandos de formatação, tais como os de listas e de cabeçalhos.
Observe abaixo:
Que resultaria na seguinte representação na tela:
A Tag <ADDRESS> formata informações, tais como: o endereço, a assinatura e a autoria de quem publicou a página. Normalmente, estes dados são colocados no final de um documento e, geralmente, serão visualizados em itálico. Exemplo:
O resultado seria:
20
Projeto eJovem Módulo II: HTML
Exercício 5: Produza uma página utilizando os conhecimentos adquiridos até agora. Faça uma página com se fosse um currículo seu, colocando alguns dados pessoais: o que gosta (Tipo de música, por exemplo). Chamea de “meus_dados.html”.
1.9. Parágrafo <P> Para separar blocos de texto, usamos o elemento <P>, por exemplo: que produz o seguinte:
Combinando parágrafos e quebras de linhas (Veremos em breve), temos por exemplo:
O resultado da marcação acima é:
A TAG <P> tem atributo de alinhamento semelhante aos cabeçalhos, como nos exemplos a seguir:
Como vimos anteriormente, podemos também alinhar à esquerda (align=left), que já é padrão e também à direita (align=right). Exercício 6: Pegue a página“meus_dados.html”e implemente com estes conhecimentos de parágrafos. Salve a página, antes de modificar, como “meus_dados_modificados.html”
Projeto eJovem Módulo II: HTML
21
1.10. Quebra de linha <BR> Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.
1.11. Linhas horizontais <HR> A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo resultados diversos. Exercício 7: Para exercitar, através do “meus_dados_modificados.html”, implemente as linhas horizontais da melhor forma possível.
1.12. HiperTexto (Hyperlink)<A> Agora, teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks. Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto também chamadas hypertext links ou hiperlinks, ou simplesmente links, onde normalmente, o mouse vira uma “mãozinha” e, ao clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
Onde: • •
arquivo_destino → é o endereço do documento de destino, da página ou imagem que queremos abrir. âncora → é o texto ou imagem que servirá de ligação hipertexto do documento, sendo apresentado para o documento de destino.
Atributos A TAG <A> tem vários atributos que são utilizados de acordo com a ação associada ao link. Os mais usados são apresentados a seguir: HREF
Indica o arquivo de destino da ligação de hipertexto.
TARGET
Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na seção sobre frames.
NAME
Marca um indicador, isto é, uma região de um documento como destino de uma ligação.
Projeto eJovem Módulo II: HTML
22
1.12.1. Caminhos (uso de Links) Os links podem estar indicados como caminhos relativos ou absolutos.
1.12.2. Caminho Relativo O caminho relativo pode ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual. Através do campo de endereços do browser, é possível identificar se um documento (página) que está sendo visualizado está dentro de algum diretório (pasta). Como, por exemplo, se estivermos em um browser acessando a página da FACCAT e vemos o seguinte endereço: http://www.faccat.br/apostilas/apostila_de_informatica.html. O que podemos concluir é que o documento que está sendo visualizado no momento, chamado apostila_de_informatica.html, está localizado dentro de um diretório (pasta) chamado apostilas do servidor www.faccat.br. Então, para escrevermos um link deste documento (apostila_de_informatica.html) para um documento chamado (doc.html), que está localizado no diretório /apostilas/documentos/, do mesmo servidor (www.faccat.br), tudo que precisamos fazer é escrever: <A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A> Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde está o documento a que estamos nos referindo no link. Quando há alguma dúvida, o melhor é usar o caminho absoluto.
1.12.3. Caminho Absoluto Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <A HREF="http://www.faccat.br"> FACCAT Faculdades de Taquara </A> Que oferece um link FACCAT Faculdades de Taquara que ao ser clicado com o mouse abrirá a página, cujo endereço é: http://www.faccat.br. Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet.
1.12.4. Indicadores (uso de Links) Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto. A formatação: <A NAME="inicio"> Indicadores (uso de links) </A> faz com que a âncora Indicadores (uso de links) seja o destino de um link. Se escrevermos: <A HREF="#inicio"> Topo do Documento </A> , teremos uma ligação hipertexto para um trecho deste mesmo documento.
23
Projeto eJovem Módulo II: HTML
Exercício 8: Vamos agora treinar os indicadores. Vamos fazer uma página sobre as ferramentas estudadas até aqui. Ou seja, elabore um pequeno texto sobre: Inkscape, Gimp, BrOffice. Faça no início da página um link para cada um dos conteúdos. E em cada conteúdo, dê a opção para ir ao topo. Veja como vai funcionar isso. Salve como “Ferramentas_Livres” Exercício 9: Agora, vamos criar links entre suas páginas criadas. Crie uma página chamada “index.html” com os links de todas as páginas criadas até agora. Se preferir (o que é importante), em cada página crie os mesmos links para o acesso mais rápido.
1.13. Lista de caracteres HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Quatro caracteres ASCII <, >, e & têm significados especiais em HTML, e são usados dentro de documentos, seguindo a correspondência:
1.13.1. Caracteres Acentuados no Português e especiais á â é í õ ú ç
á â é í õ ú ç
Á Â É Í Õ Ú Ç
Á Â É Í Õ Ú Ç
ã à ê ó ô ü
ã à ê ó ô ü
à À Ê Ó Ô Ü
à À Ê Ó Ô Ü
1.13.2. Caracteres Especiais “ e ” aspas duplas “ e ” ‘ e ’ aspas simples ‘ e ’ ‹ e › aspas angulares simples ‹ e › « e » aspas angulares duplas « e » espaço & e comercial & > maior que > < menor que < ˆ acento circunflexo ˆ ˜ acento til ˜ ¨ acento trema ¨ ´ acento agudo &cute; ¸ cedilha ¸ " aspas duplas " § parágrafo legal §
♠ espadas ♠ ♣ paus ♣ º ordenal masculino º ª ordinal feminino ª – travessão ‘en’ – — travessão ‘em’ — hífen oculto ˉ macron ¯ … reticências … ¦ barra vertical ¦ • marcador (bullet) • ¶ parágrafo ¶ ♥ copas ♥ ♦ ouros ♦
24
Projeto eJovem Módulo II: HTML
1.13.3. Caracteres Comerciais © ® ™ £
copyright marca registrada trade mark libra esterlina
© ® ™ £
¢ € ¥ ¤
centavo euro iene (yen) símbolo monetário
¢ € ¥ ¤
1.13.4. Caracteres Matemáticos e Lógicos ¹ ² ³ ½ ¼ ¾ > < ∑ ∏ √ ∞ ≈ ≅ ∝ ≡ ℜ ′ ∠ ⊥ ∇ ⊕ ⊗ ℵ ø Ø ∃ ∀ ∅
elevado a um ¹ ao quadrado ² ao cubo ³ um meio ½ um quarto ¼ três quartos ¾ maior que > menor que < somatório ∑ PI ∏ raiz quadrada √ infinito ∞ quase igual ≈ Aprox. igual ≅ proporcional ∝ idêntico ≡ parte real do número ℜ minuto ′ Ângulo ∠ perpendicular ⊥ Nabla ∇ soma direta ⊕ produto de vetor ⊗ Alef ℵ produto vazio ø produto vazio Ø existe ∃ qualquer ∀ vazio ∅
¬
não lógico
¬
∧ ∨
e lógico ou lógico
∧ ∨
± mais ou menos ± − sinal de subtração − × sinal de multiplicação × ÷ sinal de divisão ÷ ∗ Asterisco ∗ ∕ barra de fração ⁄ ‰ pormil ‰ ∫ sinal de integral ∫ ≠ Diferente ≠ ≤ menor ou igual ≤ ≥ maior ou igual ≥ ∴ consequentemente ∴ ⋅ Ponto ⋅ ∙ ponto do meio · ∂ diferença parcial ∂ ℑ parte imaginária do número ℑ ″ segundo ″ ° grau ° ∈ elemento de/pertence a ∈ ∉ nã é elemento de ∉ ∩ Interseção ∩ ∪ União ∪ ⊂ subconjunto de ⊂ ⊃ superconjunto de ⊃ ⊆ subconjunto de ou igual a ⊆ ⊇ superconjunto de ou igual a ⊇ ↑ e ↓ setas simples ↑ e ↓ ↔ seta simples ↔ ⇐ e ⇒ setas duplas ⇐ e &hrrr; ⇑ e ⇑ e ⇓ setas duplas ⇓ ⇔ seta dupla ⇔ ⌈ e ⌉ teto (esquerdo e direito) ⌈ e ⌉
25
Projeto eJovem Módulo II: HTML
↵
retorno de carro
← e → setas simples
↵
⌊ e ⌋
piso (esquerdo e direito)
⌊ e ⌋
← e →
◊
losango
◊
1.13.5. Outros Acentos e Caracteres Especiais ñ ä ë ï î ö ù ý æ † þ §
ñ ä ë ï î ö ù ý æ † þ §
Ñ Ä Ë Ï Î Ö Ù Ý Æ ‡ Þ ƒ
Ñ ¡ ¡ ¿ ¿ Ä å å Å Å Ë è ` È È Ï ì ì Ì Ì Î ò ò Ò Ò Ö û û Û Û Ù ÿ ÿ Ÿ Ÿ Ý œ œ Œ Œ Æ š š Š Š ‡ ð ð Ð Ð Þ ß ß µ µ ƒ
1.13.6. Caracteres Gregos α δ η κ ν π ς Φ Ω γ ζ ι μ
α δ η κ ν π ς Φ Ω γ ζ ι μ
Α Δ Η Κ Ν Π τ χ ϑ Γ Ζ Ι Μ
Α β Δ ε Η θ Κ λ Ν ξ Π ρ τ Τ χ Χ ϑ ϒ Γ ο Ζ σ Ι Υ Μ Ψ
β ε θ λ ξ ρ Τ Χ ϒ ο σ Υ Ψ
Β Ε Θ Λ Ξ Ρ υ ψ ϖ Ο Σ φ ω
Β Ε Θ Λ Ξ Ρ υ ψ ϖ Ο Σ φ ω
Projeto eJovem Módulo II: HTML
26
1.14. Tabela de Cores Hexadecimal
1.15. Imagens<IMG> A TAG <IMG> insere imagens que são apresentadas junto com os textos. E segue a seguinte forma:
Um atributo SRC deve estar presente, onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir. Pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).
Projeto eJovem Módulo II: HTML
27
Assim, escrevendo: <IMG SRC = "nome_da_figura.extensão"> ou, se ela estiver dentro de uma pasta no mesmo servidor: <IMG SRC = "nome_da_pasta/nome_da_figura.extensão"> Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim: <IMG SRC = "arvore.gif"> As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes extensões: .gif, .jpg (ou .jpeg), .png, .bmp. Atributos Básicos de Imagem:
ALT
Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao “passar o mouse sobre a imagem”. <IMG SRC="URL_imagem" ALT="descrição_da_imagem"> Dessa forma: <IMG SRC="newred.gif" ALT="Novo!!!">
Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. <IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" WIDTH e HEIGHT="altura"> HEIGHT Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.
Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda, que indica sua condição de link. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Se quisermos uma borda mais larga: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> BORDER </A> Se quisermos uma imagem sem borda: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A> Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação: <IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>
Projeto eJovem Módulo II: HTML
ALIGN
28
<IMG SRC="imagem.extensão" ALT="descrição" ALIGN=alinhamento_desejado> Existem também atributos de alinhamento que produzem os seguintes resultados: ALIGN=TOP → Alinha o texto adjacente com o topo da imagem. ALIGN=MIDDLE → Alinha o texto adjacente com o meio da imagem. ALIGN=BOTTOM → Alinha o texto adjacente com a parte de baixo da imagem. ALIGN=RIGHT → Alinha imagem à direita, e o que houver ao redor a partir do topo da imagem. ALIGN=LEFT → Alinha imagem à esquerda, e o que houver ao redor a partir do topo da imagem.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
entre as imagens! Isto resulta em: E o resultado ficará parecido com o abaixo:
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento, ou seja: Suponhamos um texto mais ou menos curto, que desejamos colocar com a imagem ilustrativa, mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP. Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco: mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo, ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT>. Dessa maneira, podemos controlar bem a posição relativa dos textos. Também, podese posicionar o texto no ponto em que ambas as margens estão livres. Isso é conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens!
1.15.1. Molduras de Imagem Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço vertical e horizontal deixado entre as imagens e os textos circundantes: <IMG SRC="imagem.extensão" VSPACE=espaço_vertical>
29
Projeto eJovem Módulo II: HTML
<IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal> Outros exemplos: <IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30"> <IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30"> Abaixo, temos um exemplo com os dois atributos, através da formatação: <IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20">
1.16. Tabelas <TABLE> A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas em HTML e em editores como o MSWord, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer deste capítulo. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas, é possível termos páginas organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção. Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm: textos, listas, parágrafos, imagens, formulários e várias outras formatações, inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.
1.16.1. Elementos básicos de tabelas A base de uma tabela é determinada por <TABLE>...</TABLE>, que delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER="borda">...</TABLE> Títulos, linhas e elementos <CAPTION>...</CAPTION> Define o título da tabela <TR>...</TR> Delimita uma linha <TH>...</TH> Define um cabeçalho (dentro de <TR>) <TD>...</TD> Delimita um elemento ou célula (dentro de <TR>)
Veremos agora um exemplo de tabela simples com borda.
É
Projeto eJovem Módulo II: HTML
30
possível englobar colunas e linhas, através dos atributos: COLSPAN (para colunas) e ROWSPAN (para linhas):
Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). Para uma página sem borda, podemos tratar de duas formas: <TABLE BORDER="0">...</TABLE> ou <TABLE>...</TABLE> Dica: A formatação de tabelas é complicada, pois, dependendo do tamanho, passa a ser complexa, uma vez que fazemos uso de seus diversos atributos. A melhor opção, sem dúvida, é usar os editores WYSIWYG(Como o quanta). Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas. A primeira delas é a cor de fundo e a cor da borda:
Observando agora os atributos CELLSPACING e CELLPADDING.
Projeto eJovem Módulo II: HTML
31
1.17. Listas Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:
1.17.1. Listas de Definição Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o seguinte formato:
Que produz:
Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo é a lista composta abaixo:
O que resulta em:
1.17.2. Listas nãonumeradas São equivalentes às listas com marcadores do MSWord, por exemplo:
Projeto eJovem Módulo II: HTML
32
A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:
Resulta em:
1.17.3. Listas Numeradas
Resulta em:
Estas listas não apresentam numeração em formato 1.1, 1.2, etc. Quando compostas, apresentamse da seguinte forma: 1. Documentos básicos 2. Documentos avançados 1. formulários 1. CGI 2. contadores 3. relógios 2. Detalhes sobre imagens Porém, através do atributo TYPE (HTML 3.2), podese lidar com a numeração dos itens:
Resulta em:
Projeto eJovem Módulo II: HTML
33
Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista: Resulta em:
1.17.4. Listas e sublistas As listas podem ser aninhadas. Por exemplo:
Resulta em:
1.18. Frames (Molduras) Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, tornase possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte (menus). É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas. Uma página com frames tem um texto fonte semelhante a:
Projeto eJovem Módulo II: HTML
34
A parte FRAMESET define a divisão da página em “quadros”. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos. Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela). A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação.
1.19. Áudio e Vídeo O uso de áudio e vídeo na Internet vem ganhando muito destaque nos últimos anos, e é bom saber como usar bem estas mídias. Áudio e vídeo são classificados como "mídias contínuas", pois são geradas segundo determinadas taxas, devendo ser reproduzidas nessa mesma taxa, para evitar distorções. Quanto mais informações de uma seqüência de áudio ou vídeo digital são armazenadas, melhor a qualidade do áudio ou vídeo reproduzido. Isso implica, logicamente, no fato de arquivos de áudio e vídeo serem geralmente muito grandes, o que torna inviável o uso mais freqüente dessas mídias em páginas Web. Além de procurarmos lidar sempre com pequenos trechos de áudio e vídeo, podemos explorar tecnologias recentes que permitem a transmissão em tempo real.
1.19.1. Áudio Há duas maneiras de inserir som em uma página: <EMBED SRC="arquivo_de_som.extensão"> <BGSOUND SRC=" arquivo_de_som.extensão "> Na primeira opção, insere o arquivo de som como objeto. Na segunda, faz com que o som seja inserido como som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona no Internet Explorer. Essas formatações, porém, não farão efeito algum quando o browser não estiver configurado para "executar" o arquivo de som por meio de um plugin adequado, ou se o computador em que estiver carregada a página não tiver instalada uma placa de som.
1.19.1.1. Tipos de arquivo de áudio Os tipos de arquivo de áudio são escolhidos: segundo o tipo de áudio (voz, sons, música), a aplicação desse áudio e a qualidade de reprodução desejada. Aqui serão apresentados apenas os tipos mais comuns: •
AU (Sun Audio): usado pelas estações de trabalho da Sun Microsystems.
•
AIFF: usado geralmente em máquinas Macintosh e Silicon Graphics.
Projeto eJovem Módulo II: HTML •
• • • •
35
RIFF (Resource Interchange File Format): pode conter muitos tipos diferentes de dados, incluindo áudio digital (WAV) e MIDI. Geralmente, os "arquivos MIDI" do Microsoft Windows estão, na realidade, em formato RIFF e não MIDI. WAV (Wave): é um subconjunto da especificação RIFF. AVI (Audio Video Interleave): formato Microsoft. MPEG (Motion Pictures Expert Group): o padrão MPEG3 (conhecido por MP3) é o padrão de compressão de áudio mais popular atualmente. MIDI (Musical Instrument Digital Interface): não é exatamente um formato de áudio, mas de representação de música. Um arquivo MIDI armazena informações sobre cada nota e instrumento e, a partir dessas informações, um sintetizador reproduz os sons. Por isso, uma música instrumental em MIDI geralmente produzirá um arquivo muito menor do que a mesma música em Wave, ou qualquer outro formato.
1.19.2. Vídeo A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página. De maneira geral, esta formatação pode servir para a inserção de um arquivo QuickTime: <EMBED SRC="arquivo_de_video.extensão"> Uma formatação mais completa inclui a indicação do plugin e controles da reprodução do vídeo.
1.20. Outros 1.20.1. Blink A formatação <BLINK> Frase </BLINK> foi uma das primeiras inovações introduzidas pelo Netscape. O perigo de se usar o BLINK é que, se sua página já apresenta cores, desenhos, cabeçalhos, todos efeitos que chamam a atenção do leitor, o BLINK será um fator ainda mais chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. É possível substituir esse recurso por outros efeitos de JavaScript. Felizmente, são poucos os browsers que mostram o efeito dessa formatação. O Internet Explorer é um dos browsers que não consideram o BLINK. Ao usar o BLINK, apliqueo somente em pequenos detalhes (palavras ou flechinhas), nunca em grande quantidade, muito menos em frases inteiras ou cabeçalhos.
1.20.2. Marquee É possível obter o efeito de animação de texto, através desta TAG. <MARQUEE BEHAVIOR=efeito> Texto </MARQUEE>
Projeto eJovem Módulo II: HTML
36
Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE> Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape, e de maneiras diferentes.
Projeto eJovem Módulo II: CSS
37
Capítulo 2. CSS 2.1. Introdução ao CSS CSS é a sigla para Cascading Style Sheets que foi traduzido, em português, para folhas de estilo em cascata, que significam um documento onde são definidas regras de formatação ou de estilos a serem aplicadas aos elementos estruturais de marcação. A finalidade das CSS é a de retirar do HTML toda e qualquer declaração que vise a formatação, ou seja, a apresentação do documento. Isto significa dizer que TAGS do tipo <font>, <bold> , <b>, <em> <i>....etc, bem como o uso de colunas e linhas de tabelas para obtenção de espaçamentos não são admitidos ou, se admitidos, com restrições em um projeto Web com CSS. As TAGS <strong> e <em> devem ser usadas em substituição à <b> e <i>, se a sua intenção é a de contemplar estas tecnologias. Contudo, embora o suporte para elas deva continuar ainda por muito tempo, nada aponta para uma revitalização de <b> e <i>. Pelo contrário, as evidências a esta época indicam que elas sejam banidas a partir do 2.0. Devese usar o CSS porque permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos, tamanhos, posicionamento, e, enfim, todo o "visual" da página, são as CSS. Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais: a) Controle total sobre a apresentação do site a partir de um arquivo central; b) Agilização da manutenção e redesign do site; c) Saída para diferentes tipos de mídia a partir de uma versão única de HTML; d) Redução do tempo de carga dos documentos Web; e) Adequação simplificada aos critérios de acessibilidade e usabilidade; f) Elaboração de documentos consistentes com as aplicações futuras de usuários; g) Aumento considerável na portabilidade dos documentos Web. Quando um usuário quer acessar uma página web, o browser tem que analisar todo o código HTML desta para representála na tela. Se você colocar uma formatação complexa nas suas páginas, isso acrescentará um tempo maior de análise para cada página. Ao colocar as formatações numa única folha de estilo referenciada por cada página, você reduz a quantidade de código das páginas e, conseqüentemente, isto reduz também a quantidade de dados que têm que ser transmitidos e analisados pelos browsers. O resultado são páginas que aparecem mais rapidamente e usuários mais felizes.
38
Projeto eJovem Módulo II: CSS
2.2. Estrutura do CSS O CSS é composto por regra, que é uma unidade mínima de programação de estilos, que segue uma sintaxe própria e destinase a estilizar uma ou mais propriedades.
A sintaxe de uma regra compreende um seletor, uma propriedade e um valor, escritos como mostrado abaixo. Ao conjunto de propriedade e valor, denominamos de declaração. •
Seletor (Elemento) → descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML, mas sem os sinais de maior e menor. Essa parte da regra é, às vezes, chamada de seletor.
•
Proriedade (Atributo) → o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo fontsize.
•
Valor → a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para fontsize.
•
Atributo: valor → a parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separálos com pontoevírgula (;).
Por exemplo: h1 {color: #000000;} é uma regra CSS
p {textindent:10pt;} é uma regra CSS
Onde: •h1 é o seletor •{color: #000000;} é a declaração •color é a propriedade CSS •#000000 é o valor CSS
Onde: •p é o seletor. •{textindent: 10pt} é a declaração CSS •textindent é a propriedade CSS •10pt é o valor CSS
Entre os caracteres permitidos no CSS estão as letras de az, AZ, os números de 09, hífen e caracteres de escape. Caracteres Unicode 161255, bem como caracteres Unicode como códigos numéricos. Não é permitido iniciar um nome com um traço ou número.
2.3. Iniciando a prática do CSS Tendo estas primeiras noções, veremos agora como incorporar as regras de CSS. Como foi dito, não mais usaremos as TAGS da forma que foram usadas anteriormente, algumas delas nem mais serão usadas, e as que forem usadas, serão modificadas. Primeiramente, iremos utilizar, assim como no inicio, o programa Quanta. Vamos novamente abrilo e executar o documento básico, como fizemos lá, digitaremos um texto abaixo para facilitar o andamento da atividade, pegaremos um trecho da nossa apostila:
Projeto eJovem Módulo II: CSS
39
Vamos começar a entender a mudança dos atributos do corpo do texto (<body>) e do título do texto, não usando mais declarações de TAGS dadas antes. Primeiramente, clique dentro da TAG <BODY>. Em seguida, na aba estilo (Figura abaixo) e em depois no ícone CSS:
Aparecerá a tela com as propriedades do CSS. Vamos primeiramente modificar o tipo de fonte (fontfamily) e o tamanho da fonte (font size). Para modificar o tipo de fonte, dê dois cliques no nome font (Destaque na imagem abaixo) e em seguida clique no ícone:
Surgirá a tela para escolha das fontes desejadas. Ao visualizar a fonte desejada, clique na seta em destaque. (Conforme figura abaixo). Escolha 3 fontes e confirme no OK.
Projeto eJovem Módulo II: CSS
40
Siga os mesmos passos no fontsize, colocando o tamanho 13.
Confirma no OK e veja o resultado da TAG <BODY> Agora, já que vimos uma parte do que se pode fazer, iremos então modificar um pouco mais a TAG <BODY> e incrementar a TAG <H2> Faça as modificações você mesmo:
Como resultado temos:
Tendo isso, podemos na nossa página modificar os valores e ir verificando o resultado. Salve o documento como “Primeiro_CSS.html”. As Regras não são case sensitivas, isto é, podemse usar maiúsculas ou minúsculas nas folhas de estilo indiferentemente. Isto é válido somente para as declarações específicas da folha de estilo, porém em outros casos, não. Por exemplo: na declaração, escrever o valor figura.gif é diferente de FIGURA.gif Comentários podem e devem ser usados nas folhas de estilo. É recomendável que se faça amplo uso de comentários para fornecer informações sobre os seletores, propriedades e valores declarados, com o intuito de facilitar futuras modificações ou mesmo entendimento do código gerado. Os comentários devem estar entre as marcas /* e */ e podem ser inseridos em qualquer espaço em branco dentro da folha de estilos. Não são permitidos comentários aninhados. /* Isto é um comentário CSS */
Dentro do CSS, temos efeito cascata, que é o método pelo qual é aplicada uma regra em função do importância da regra. Quando em um elemento HTML aplicase mais de uma regra, dizse que há um conflito de regras e será aplicada aquela que tiver maior prioridade, sendo determinada pela ordem do efeito cascata. A ordem para o efeito cascata é a ordenação das regras de acordo com critérios pré estabelecidos, com a finalidade de resolver eventuais conflitos entre regras. E estes critérios são os abaixo enumerados: •
Localizadas todas as regras aplicáveis ao seletor/propriedade, determinase a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada.
Projeto eJovem Módulo II: CSS
41
•
Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará as propriedades de estilo de seu elemento pai. Não havendo elemento pai, será aplicado o valor inicial default de estilo para aquele elemento
•
Regras com declaração importante (!important) tem prioridade sobre aquelas sem a declaração. Se o autor e o usuário declaram regras conflitantes com !important, as do usuário têm prioridade sobre as do autor.
•
Regras com mesmo pêso (sem !important) e coflitantes, declaradas pelo autor têm prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior especificidade que aquelas do autor têm a prioridade. Regras com igual especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do autor e do usuário têm prioridade sobre as regras default das aplicações do usuário (p.ex.: o browser)
•
Regras mais específicas têm a prioridade sobre as menos específicas.
•
Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos.
•
Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, têm do maior para o menor peso (estilos inline têm o maior peso). Entre várias folhas de estilo lincadas, têm maior prioridade aquela importada por último (mais próxima da tag </head>). O mesmo ocorre entre as folhas importadas (@import)
2.3.1. Declaração e o fragmento de uma regra dentro dos colchetes { } A declaração compõese de duas partes: a propriedade e o valor e uma regra pode conter várias declarações separadas por um pontoevírgula (;). Por exemplo: h1 {color: #000000; /* esta linha contém a declaração */ } Podese atribuir mais de uma declaração a um seletor, para isso, as declarações devem ser separadas por pontoevírgula. Por exemplo: p { background: #FFFFFF; color: #000000;} Seletor é uma entidade que identifica um elemento HTML ou define uma classe ou pseudo classe na qual a regra de estilo será aplicada. Por exemplo: p {fontsize: 12px;} O seletor é p (elemento HTML parágrafo) e a regra escrita determina que os parágrafos terão uma fonte de tamanho 12px. p, ul {textindent: 10pt;} Os seletores são p e ul Agrupamento de seletores é uma forma compacta de reunir seletores que compartilham as mesmas regras de estilo.
Projeto eJovem Módulo II: CSS
42
Por exemplo: p { color:#000000;} .classeb {color: #000000;} span {color: #000000;} Os seletores p.classeb e span correspondem em letras na cor preta, então podemos agrupá los assim como abaixo, porém note que os seletores agrupados devem ser separados por virgula: p, .classeb, span { color:#000000;}
2.4. Estruturando melhor o CSS Até agora vimos como criar o CSS, mas dentro da TAG. Podemos fazer isso separadamente, o que inicialmente iremos fazer dentro do mesmo arquivo HTML, porém como vimos no exemplo anterior, já temos a necessidade de visualizar como iremos criar isso. Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata". Os três lugares são: 1) em um documento separado fora de todos os documentos HTML, 2) no cabeçalho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, como discutido aqui: •
Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
•
Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.
•
Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
2.4.1. Estilos externos Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples e dar ao nome desse arquivo a extensão .css. Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo .css. Veja o exemplo: Arquivo meu_estilo.css H1 {fontfamily: 'Comic Sans MS'; fontsize: 36pt; color: blue} P {fontfamily: 'Courier'; marginleft: 0.5in}
43
Projeto eJovem Módulo II: CSS
Agora, para utilizar os estilos definidos neste arquivo .css, você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css. <LINK REL="STYLESHEET" TYPE="text/css">
HREF="http://www.iecentral.net/meu_estilo.css"
OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localização correta do seu arquivo e seu nome.
2.4.2. Estilos incorporados Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos, mas, em vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
2.4.3. Estilos inline Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual, não outras tags na página e tão pouco, outros documentos. A sintaxe para definir um estilo inline é a seguinte: <TAG STYLE="regras css"> Exemplo: Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo.
2.5. Propriedades e Valores de Fontes Fontes são estilos de apresentação consistentes aplicados a alfabetos. Uma fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar o seu significado. Oferecem as informações necessárias para que uma letra ou símbolo possa ser representado graficamente. Os atributos essenciais de uma fonte são: •
Seu tipo (ou família)
•
Seu tamanho
•
Seu estilo (regular, itálico, outline, etc.)
•
Seu peso (normal, negrito, light, black)
Projeto eJovem Módulo II: CSS
44
Para representar qualquer texto, portanto, é preciso escolher uma fonte, ou seja: um tipo, um estilo, um peso e um tamanho. Letras maiúsculas e minúsculas não são consideradas fontes diferentes, pois têm um significado distinto. Os quatro atributos acima podem ser definidos em CSS através das propriedades: font family, fontsize, fontstyle e fontweight. Não é preciso definir todas, pois sempre têm valores default. CSS oferece ainda fontvariant, que permite considerar outras variações de uma fonte.
2.5.1. fontfamily Uma família de fontes (tipo) é selecionada com a propriedade fontfamily. Esta propriedade aceita uma lista de valores separados por vírgulas, representando nomes de fontes existentes ou não no sistema do usuário. No final da lista, pode ser incluída uma referência a uma família genérica, que será usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema. A sintaxe é: fontfamily: fonte1, fonte2, fonte3, ..., fontegenérica Exemplos:
O browser usará a primeira fonte da lista, se encontrála. Se não encontrar, irá procurar a fonte seguinte. Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas. As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários quando for preciso especificar estilos dentro de um atributo HTML:
2.5.2. fontsize O tamanho de uma fonte é alterado usando fontsize. Pode ser especificado em valores absolutos ou relativos. Para especificar um valor absoluto, podese usar: fontsize: número(pt | px | cm | mm | pc | in) fontsize: xxsmall|xsmall|small|medium|large|xlarge|xxlarge O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido. 1. fontsize: tamanho_relativo (smaller, larger) 2. fontsize: comprimento (em ou ex) 3. fontsize: porcentagem (%)
Projeto eJovem Módulo II: CSS
45
Exemplos:
Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usados cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).
2.5.3. fontstyle e fontweight O estilo de uma fonte é afetado através de duas diferentes propriedades: fontweight, que altera o peso da fonte, e fontstyle, que altera o estilo ou inclinação. Sintaxe: 4. fontstyle: normal (ou italic, oblique) Exemplos:
Sintaxe: •
fontweight: normal | bold (normal=400 e bold = 700)
•
fontweight: bolder | lighter (valores relativos)
•
fontweight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Exemplos:
A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte distinta da normal, e não, meramente uma versão inclinada da mesma. Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar, irão inclinar o texto simulando um itálico.
2.5.4. fontvariant Atualmente, a única opção disponível para esta propriedade é smallcaps, que deve colocar o texto selecionado em maiúsculas, porém menores que as capitulares. Na prática, até as maiúsculas são reduzidas no Internet Explorer. A sua sintaxe é: •
fontvariant: smallcaps
46
Projeto eJovem Módulo II: CSS
Exemplo:
Sairá assim:
2.5.5. A propriedade font Para especificar várias propriedades de um seletor de uma vez só, podese usar a propriedade font, em vez de definir em separado fontsize, fontweight, fontfamily, etc. Nesta sintaxe, a ordem dos fatores é importante, porém nem todos os elementos precisam estar presentes: font: fontstyle fontvariant fontweight fontsize lineheight fontfamily
Exemplos: Logo abaixo, encontramse propriedades e valores de estilo de fontes.
Propriedade
Descrição
Valores
Exemplo
tamanho (pt, in, cm, px) porcentagem do tamanho normal { fontsize: 12pt } relativo: xxlarge, xlarge, large, { fontsize: 200% } medium, small, xsmall, xxsmall, { fontsize: xlarge } larger, smaller
fontsize
Ajusta o tamanho do texto
fontfamily
Ajusta os tipos de face e as alternativas (em ordem de preferência)
nome do tipo de face nome da família da fonte
{ fontfamily: "Trebuchet MS", "Sansserif" }
fontweight
Ajusta o peso do tipo
normal bold (outras opções serão suportadas mais tarde)
{ fontweight: bold }
47
Projeto eJovem Módulo II: CSS
fontstyle
Texto em itálico
fontvariant
especifica uma variante de fonte
normal italic (mais opções estarão disponíveis mais tarde; 'oblique { fontstyle: italic } smallcaps' está disponível no IE4 somente) smallcaps (outras opções serão suportadas mais tarde)
{ fontvariant: smallcaps }
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.6. Propriedades e valores de texto As propriedades desta seção tratam de transformações e atributos aplicados a texto, não afetando a exibição das fontes. Os atributos tipográficos afetam a forma como o texto é apresentado na tela, como: o espaçamento entre linhas, entre palavras, entre letras, o alinhamento de parágrafos e a endentação. A propriedade texttransform permite colocar letras em maiúsculas ou minúsculas e a propriedade textdecoration permite acrescentar ou tirar efeitos decorativos do texto como riscados e sublinhados.
2.6.1. texttransform A propriedade texttransform realiza transformações no formato caixaalta ou caixabaixa do texto. A sua sintaxe é: •
texttransform: capitalize
•
texttransform: uppercase
•
texttransform: lowercase
•
texttransform: none (valor default)
Exemplos: H1 {texttransform: capitalize} Capitalize coloca a primeira letra de cada palavra em maiúsculas. Uppercase coloca tudo em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação, deixando o texto da forma como foi definido antes das transformações.
Projeto eJovem Módulo II: CSS
48
Resultado:
2.6.2. textdecoration A propriedade textdecoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc. A sua sintaxe é: •
textdecoration: underline (default em links)
•
textdecoration: overline
•
textdecoration: linethrough
•
textdecoration: blink
•
textdecoration: none (default)
Exemplos:
Veremos algumas formas de, usando esta propriedade, mexer com a decoração de links: Forma 1:
Forma 2:
Projeto eJovem Módulo II: CSS
49
Observe os resultados das formas acima, compare e veja se existem outras formas de realizar o que deseja:
Vínculos (links) são normalmente sublinhados na maior parte dos browsers. O sublinhado pode ser removido com a propriedade textdecoration: none. O browser Netscape 4 não suporta a propriedade overline. O Internet Explorer não suporta a propriedade blink.
2.6.3. textalign e verticalalign CSS oferece propriedades que permitem controlar o alinhamento horizontal do texto, seu alinhamento vertical e endentação do texto na primeira linha. O alinhamento horizontal é o mesmo conseguido com o atributo align do HTML, só que o da folha de estilos tem precedência. A sintaxe é: •
textalign: left | right | center | justify
O alinhamento só se aplica a elementos de bloco (<P>, <DIV>, H1, etc.) e elementos como applets e imagens. A característica é herdada para subblocos. O valor default é sempre left. Exemplo: DIV { textalign: center } Alinhamento vertical em HTML só pode ser aplicado a tabelas e imagens. Com CSS, esta propriedade é estendida a qualquer elemento de texto e imagens. A sintaxe é: •
verticalalign: baseline | top | texttop | middle | bottom | textbottom
•
verticalalign: sub | super
•
verticalalign: porcentagem %
O valor default é baseline. As porcentagens referemse à altura da linha (lineheght) do próprio elemento. Usando porcentagens negativas conseguemse sobrepor elementos. Na prática, apenas o Internet Explorer 4 suporta verticalalign com os valores sub e super (coloca elementos em subscrito ou sobrescrito).
2.6.4. textindent A propriedade textindent aplicase a elementos de bloco e realiza a endentação da primeira linha. A sua sintaxe é: •
textindent: comprimento
•
textindent: porcentagem
Projeto eJovem Módulo II: CSS
50
A porcentagem ocorre em relação à largura do elemento que contém o seletor. Pode ser a largura total da página, a largura da célula de uma tabela, etc. Exemplos: P { textindent: 1 cm } P {textindent: 50% } <P style="textindent: 1in"> A edentação tratada aqui é apenas para uma linha de texto. Para endentar blocos inteiros, devese usar as margens (em seção mais a frente).
2.6.5. lineheight Este atributo é usado para controlar o espaço que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se você tem um texto de 10 pontos e uma lineheight de 20 pontos (lineheight: 2), haverá 5 pontos antes e 5 pontos depois de cada linha de texto (espaço duplo). O espaço simples equivale geralmente a line height: 120%. Uma lineheight menor que o tamanho da fonte produzirá sobreposição de texto. Embora ambos os browsers mais populares suportem este recurso, ele não ocorre da maneira correta. Os browsers não acrescentam a mesma quantidade de espaço antes e depois, como esperado. Um bug no Internet Explorer 3 faz com que ele interprete valores absolutos (sem unidade) como valores em pixels. Por exemplo, 1.5 indica espaço um e meio ou 150%. No Internet Explorer 3, as linhas ficam sobrepostas, pois o browser interpreta a unidade como 1.5 pixels. Evite, portanto, usar valores absolutos (use porcentagens). A sintaxe é: •
lineheight: número_absoluto
•
lineheight: comprimento ou unidade
•
lineheight: porcentagem
Exemplos:
Se você usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou uma unidade menor que o tamanho da fonte, haverá sobreposição de linhas.
2.6.6. letterspacing A propriedade letterspacing altera o espaço entre as letras. A sua sintaxe é: •
letterspacing: normal
•
letterspacing: comprimento
As unidades podem ser qualquer uma das unidades válidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, é mais comum usar "em" como medida de espaçamento por ser proporcional ao tamanho da fonte.
51
Projeto eJovem Módulo II: CSS
Podese usar também valores negativos para sobrepor caracteres, criar ligaduras (usadas em kerning) e caracteres especiais (por exemplo, sobrepondo / com \). O suporte a letterspacing nos principais browsers ainda é inconsistente. O Netscape (versão 4) não o suporta. Logo abaixo, encontramse propriedades e valores de estilo de texto. Propriedade
Descrição
Valores
Exemplo
tamanho (pt, in, cm, px, { lineheight: 18pt Ajusta a distância entre as em) porcentagem (%) do } { lineheight: bases da linha de texto tamanho de fonte 120% }
lineheight textdecoration
Sublinha ou então seleciona o texto
none underline overline linethrough
{ textdecoration: underline }
textalign
Ajusta o alinhamento de texto para a margem esquerda ou direita, ou para o centro da página
left center right
{ textalign: right }
Faz a indentação da primeira linha do texto no tamanho (pt, in, cm, px) elemento
textindent
{ textindent: 0.5in }
verticalalign
alinha o texto verticalmente dentro do elemento
baseline sub super top texttop middle bottom textbottom porcentagem da altura de linha a partir da base da linha (%)
texttransform
Ajusta as regras de maiúsculas e minúsculas no texto
capitalize (coloca em maiúscula a primeira letra de cada palavra) uppercase lowercase
{ texttransform: capitalize }
letterspacing
ajusta o espaçamento entre as letras no texto (se espera que tenha suporte na versão final do IE 4.0)
normal, tamanho (pt, in, cm, px)
{ letterspacing: 2pt }
{ verticalalign: super }
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.7. Background e de Cor Com as propriedades de cores, podemos controlar as cores de várias partes da página, do texto, do fundo da página e de elementos HTML. Além disso, podemos aplicar imagens de fundo em qualquer elemento, não só no elemento BODY, como já se faz em HTML. As cores definidas em CSS, assim como em HTML, podem ser especificadas por um número em hexadecimal (representando um código RGB) ou por um nome. Além dessas duas formas, podem ainda ser especificadas por três números decimais, representando também o código RGB da cor.
Projeto eJovem Módulo II: CSS
52
Os códigos RGB informam a quantidade de luz vermelha, verde e azul que compõe a cor, respectivamente. Cada cor pode ter 16 níveis de intensidade: 0 a 256 (00 a FF, em hexadecimal). O total de combinações possíveis é de 16.777.216 cores. A exibição correta das cores depende da capacidade do vídeo onde serão vistas. Poucos sistemas têm capacidade de mostrar mais que 65.536 cores simultâneas. A maioria só mostra 256. A tabela abaixo relaciona em negrito os 16 nomes padrão, suportados por todos os browsers que exibem cores, e seus respectivos códigos RGB em hexadecimal e decimal. Há muito mais cores com nomes suportadas pelo Netscape e Internet Explorer. Estas listadas, são as únicas que fazem parte da especificação oficial do HTML 4. São todas "seguras", ou seja, fazem parte da paleta básica de 216 cores.
2.7.1. color Define a cor do texto. A propriedade color substitui totalmente o descritor <FONT COLOR> com vantagens. Pode ser aplicada localmente em um descritor (usando o atributo style) ou globalmente na página e no site, como qualquer outra propriedade de estilo. A sintaxe da propriedade color é: •
color: nome_de_cor
•
color: #número_hexadecimal
•
color: rgb(vermelho, verde, azul)
Exemplos:
Os nomes são qualquer nome válido de cor. Se o browser não encontrar o nome ao qual o estilo se refere, deve exibir a cor default (ou herdada). O símbolo "#" é opcional no código hexadecimal. A intensidade da cor pode ser expressa em valores absolutos (0 a 255) ou percentagens (0.0100.0%).
2.7.2. backgroundcolor As cores de fundo de qualquer elemento podem ser alteradas através da propriedade backgroundcolor. A sintaxe é: •
backgroundcolor: transparent (valor default)
•
backgroundcolor: nome_de_cor
•
backgroundcolor: #número_hexadecimal
•
backgroundcolor: rgb(vermelho, verde, azul)
Projeto eJovem Módulo II: CSS
53
Exemplos:
O fundo transparente simplesmente deixa à mostra o fundo do objeto que o contém. O fundo, para texto, ocupa todo o espaço da fonte (inclusive espaço em branco acima e abaixo que fazem parte da fonte). A cor não é estendida quando o espaçamento entre linhas é aumentado em alguns browsers.
2.7.3. backgroundimage Com backgroundimage é possível atribuir a qualquer elemento HTML uma imagem que será exibida no fundo, assim como as cores de fundo. A sintaxe é: •backgroundimage: none(valor default) | url(URL_da_imagem)
Exemplos:
As URLs são relativas à localização do arquivo que contém a folha de estilos (pode ser a própria página, ou não). A cor de backup é usada para 'vazar' pelas partes transparentes da imagem ou prevenir contra o não carregamento do fundo (para permitir a leitura em fundo escuro podese usar preto como cor de backup de uma imagem escura).
2.7.4. backgroundrepeat CSS permite mais controle ainda sobre a imagem de fundo, facilitando a maneira como a mesma irá se repetir. A propriedade é backgroundrepeat. Sintaxe: •
backgroundrepeat: repeat (default) | repeatx | repeaty | norepeat
Exemplos:
O valor repeat é default e faz com que a imagem ocupe toda a tela. repeatx faz com que a imagem seja repetida apenas horizontalmente e repeaty faz com que ela seja repetida apenas verticalmente. norepeat faz com que a imagem não seja repetida de forma alguma (aparecerá uma imagem apenas no canto superior esquerdo). Para fazer a imagem aparecer em outros lugares, podese usar as propriedades de posicionamento do fundo da tela.
2.7.5. backgroundposition e backgroundattachment O posicionamento e a forma de exibição do papel de parede são controlados pelas propriedades backgroundattachment e backgroundposition. A primeira define se o fundo irá ou não se mover com o texto, ou ficar fixo na tela. A segunda permite o posicionamento
Projeto eJovem Módulo II: CSS
54
do fundo em um local exato da tela. Infelizmente essas duas propriedades não têm suporte universal pelos browsers comerciais (apenas o Internet Explorer os suporta). Sintaxe: •
backgroundattachment: fixed | scroll
Exemplo:
Sintaxe: •
backgroundposition: porcentagem_horiz% porcentagem_vert%
•
backgroundposition: comprimento comprimento
•
backgroundposition: posição_vertical posição_horizontal
Exemplos:
Os valores de porcentagem são relativos à posição do elemento sobre o qual se aplica o estilo. As posições são sempre dadas em pares, tendo os valores separados por espaços. O primeiro valor é sempre um valor horizontal e o segundo um valor vertical. O browser coloca o bloco afetado dentro de uma "caixa invisível" e a posiciona de acordo com as porcentagens. Um valor de 100% para o primeiro valor empurra a margem direita (oposta) desta "caixa invisível" contra a margem direita do browser. Os valores de comprimento, assim como os de porcentagem também são dados em pares. O primeiro é a distância da margem horizontal a partir do canto superior esquerdo do objeto; o segundo é a distância da margem superior. As unidades válidas são as mesmas usadas em fontes (cm, mm, in, pc, px, pt, em, ex) e podem ser misturadas nos dois valores do par. Os valores de posição são palavraschave usadas também aos pares. São equivalentes das porcentagens básicas de alinhamento. O primeiro par pode ter left (0%), right (100%) ou center (50%). O segundo par pode ser top (0%), bottom (100%) ou center (50%).
55
Projeto eJovem Módulo II: CSS
2.7.6. background A propriedade background pode ser usada para definir várias características de fundo de uma única vez. Na sintaxe abaixo, a ordem dos fatores é importante. A sua sintaxe é: •
background: backgroundcolor backgroundimage backgroundrepeat background attachment backgroundposition
Deve haver pelo menos um valor definido, mas qualquer número de valores pode ser atribuído de uma vez. Exemplos:
Logo abaixo, encontramse propriedades e valores para imagens de background e para cores. Propriedade
Descrição
Valores
Exemplo
cor
Ajusta a cor do texto
nome da cor Trio RGB Código hex Valores RGB
{ color: blue } { color: #00F } { color: #0000FF } { color: RGB 0.0 0.0 1.0 }
background
url(URL) (com ou sem repeat); nome da cor Ajusta as imagens (ou transparent, ou de background ou dois nomes de cores, cores que serão misturadas, separados por um /); trio RGB (código hex)
{ background: url(image1.gif) repeat } { background: Red } { background: Red / Blue } { background: transparent } { background: #CCCCCC }
background color
Ajusta a cor do background
nome da cor; trio RGB (código hex)
{ backgroundcolor: Red } { backgroundcolor: #CCCCCC }
background image
Ajusta a imagem de background
URL
{ backgroundimage: url(image1.gif) }
background repeat
Ajusta a repetição repeat (horizontalmente do entelhamento e verticalmente); repeat { backgroundrepeat: repeaty das imagens de x (horizontal); repeaty } background (vertical); norepeat
background attachment
Fixa a imagem de background ou permite que ela deslize junto com a página
background position
Ajusta a posição inicial das imagens de background (Observe que a
scroll ou fixed
{ background: fixed }
Posição (x y) ou (x% y { backgroundposition: 2cm %); top, center, bottom 1cm } { backgroundposition: left, center, right 50% 20% } { background position: top center } { backgroundposition: top }
56
Projeto eJovem Módulo II: CSS
posição default, 0,0 ou 0%,0%, é o canto superior esquerdo do elemento)
{ backgroundposition: bottom right }
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.8. Controle de blocos Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML: H1, P, DIV, etc, que automaticamente definem seu próprio bloco ou parágrafo. A caixa de um objeto consiste das partes seguintes: •
O elemento em si (texto, imagem)
•
As margens internas do elemento (padding)
•
A borda em torno das margens internas (border)
•
A margem em torno da borda (margin)
Todo elemento de bloco tem essas propriedades. As propriedades CSS que veremos nesta seção mostrarão como alterálas. A cor e tamanho da borda podem ser alterados assim como o fundo (como vimos na seção anterior). A margem externa é sempre transparente, mas a margem interna herda a cor de fundo do objeto. Também são alteráveis as margens internas e externas, larguras de borda, cor de borda e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados pelos nomes top, right, bottom e left:
2.8.1. margin e padding As margens externas são definidas usando a propriedade margin, que afeta todas as margens ao mesmo tempo; ou as propriedades margintop, marginbottom, marginright e marginleft que permitem alterar as margens individualmente. Sintaxe: •
margintop: comprimento | porcentagem % | auto
•
marginbottom: comprimento | porcentagem % | auto
•
marginright: comprimento | porcentagem % | auto
•
marginleft: comprimento | porcentagem % | auto
Exemplo: margintop: 1cm; marginleft: 12pt; A propriedade margin afeta vários aspectos das margens externas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais). Sintaxe: •
margin: margintop marginright marginbottom marginleft
•
margin: margintop% marginright% marginbottom% marginleft%
Projeto eJovem Módulo II: CSS •
margin: espaço_vertical espaço_horizontal
•
margin: margem_de_todos_os_lados
57
Exemplos: margin: 5cm // vale para as quatro margens margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais margin: 5cm 3cm 2cm 1cm // sent. horário: top, right, bottom, left As margens internas (padding) são definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades paddingtop, padding bottom, paddingright e paddingleft. Sintaxe: •
paddingtop: comprimento | porcentagem %
•
paddingbottom: comprimento | porcentagem %
•
paddingright: comprimento | porcentagem %
•
paddingleft: comprimento | porcentagem %
A propriedade padding afeta vários aspectos das margens internas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores ou apenas um. Sintaxe: •
padding: paddingtop paddingright paddingbottom paddingleft
•
padding: paddingtop% paddingright% paddingbottom% paddingleft%
•
padding: espaço_vertical espaço_horizontal
•
padding: margem_de_todos_os_lados
2.8.2. borderwidth Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border style) seja definido. Por exemplo: borderstyle: solid A espessura das bordas pode ser controlada através da propriedade borderwidth, afetando as espessuras de todos os lados da borda, ou individualmente através de bordertopwidth, borderbottomwidth, borderrightwidth e borderleftwidth. Sintaxe: •
bordertopwidth: comprimento | thin | medium | thick
•
borderbottomwidth: comprimento | thin | medium | thick
•
borderrightwidth: comprimento | thin | medium | thick
•
borderleftwidth: comprimento | thin | medium | thick
Exemplos: borderbottomwidth: thick; borderrightwidth: 5.5px; borderleftwidth: 0.2cm
Projeto eJovem Módulo II: CSS
58
As propriedades das bordas podem ser tratadas em grupo, com borderwidth. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindose às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: •
borderwidth: bordertopwidth I borderrightwidth
•
borderwidth: borderbottomwidth I borderleftwidth
Exemplos: borderwidth: 5cm // vale para as quatro bordas borderwidth: 5cm 2cm // 5cm verticais, 2cm horizontais borderwidth: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left
2.8.3. bordercolor A propriedade bordercolor é um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que também podem ser definidas individualmente através de bordertopcolor, borderbottomcolor, borderrightcolor e borderleftcolor. Sintaxe: •
bordertopcolor: cor (nome ou código)
•
borderbottomcolor: cor (nome ou código)
•
borderrightcolor: cor (nome ou código)
•
borderleftcolor: cor (nome ou código)
Exemplos: borderbottomcolor: rgb(231,45,112); borderrightcolor: 0fa97b; borderleftcolor: navy As propriedades das bordas podem ser tratadas em grupo, com bordercolor. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindose às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: •
bordercolor: bordertopcolor I borderrightcolor I borderbottomcolor | border leftcolor
Cada um dos borderxxxcolor acima é uma cor (RGB, hexadecimal ou nome). Podese alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente. Exemplos: bordercolor: red // red para as quatro bordas bordercolor: rgb(255, 0, 0) // red bordercolor: rgb(100%, 0, 0) // red bordercolor: red 0000ff // red verticais, 0000ff horizontais bordercolor: red blue yellow cyan // 4 cores sentido horário
Projeto eJovem Módulo II: CSS
59
2.8.4. borderstyle O estilo de cada uma das quatro bordas pode ser alterado com borderstyle. Também é possível definilos individualmente usando bordertopstyle, borderbottomstyle, border rightstyle e borderleftstyle. São vários os estilos disponíveis (tracejado, pontilhado, várias versões de 3D, etc.). •
bordertopstyle: none | dotted | dashed | solid | double | groove | ridge | inset | outset
•
borderbottomstyle: nome de estilo (um dos nomes acima)
•
borderrightstyle: nome de estilo
•
borderleftstyle: nome de estilo
Exemplos: borderbottomstyle: none borderrightstyle: solid; borderleftstyle: inset As propriedades das bordas podem ser tratadas em grupo, com borderstyle. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindose às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: •borderstyle: bordertopstyle | borderrightstyle | borderbottomstyle | borderleftstyle
Exemplos: borderstyle: solid none inset outset; borderstyle: solid borderstyle: inset outset Cada um dos borderxxxstyle acima é um dos seguintes valores: none, dotted, dashed, solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer funcionam os estilos: solid, inset (efeito baixorelevo) e outset (efeito altorelevo). No Netscape solid é default, mas no Explorer, o default é none. Portanto, uma borda não aparece se a propriedade borderstyle não for definida antes.
2.8.5. Border As propriedades bordertop, borderbottom, borderleft e borderright agrupam as propriedades de cor, estilo e espessura para cada uma das quatro bordas. bordertop: borderwidth | borderstyle | bordercolor borderbottom: borderwidth | borderstyle | bordercolor borderleft: borderwidth | borderstyle | bordercolor borderright: borderwidth | borderstyle | bordercolor A propriedade border é uma forma reduzida de definir tudo isto de uma vez só para todas as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas, neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante: border: borderwidth | borderstyle | bordercolor
60
Projeto eJovem Módulo II: CSS
2.8.6. width e height As propriedades width e height modificam a altura e largura de um bloco da mesma forma que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de estilos podem ser usados para redimensionar a "caixa" de qualquer elemento de bloco. Sintaxe: •
width: comprimento | auto
•
height: comprimento | auto
2.8.7. float A propriedade float permite que um bloco qualquer seja posicionado à direita ou esquerda da janela do browser, fazendo com que o texto restante flua em sua volta. Permite que qualquer bloco se comporte como uma imagem que faz uso dos atributos align=left e align=right no HTML. Sintaxe: •
float: left | right | none
2.8.8. clear E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a propriedade float, existe a propriedade clear, a qual deve ser atribuída a um bloco ou parágrafo que é afetado pela flutuação de um bloco. Faz a mesma coisa que o atributo clear, usado no <BR> em HTML, só que aqui ela é suportada em qualquer elemento (bloco ou não). •
clear: none | left | right | both
Logo abaixo, encontramse propriedades e valores para caixas. Propriedade marginleft
Descrição
Valores
Exemplo
Ajusta a distância a partir do tamanho (pt, in, cm, px) { marginleft: 1in } lado esquerdo da página
marginright
Ajusta a distância a partir do tamanho (pt, in, cm, px) lado direito da página
{ marginright: 1in }
margintop
Ajusta a distância a partir da parte de baixo do elemento tamanho (pt, in, cm, px) prévio
{ margintop: 20pt }
marginbottom
margin
Ajusta a distância a partir da { marginbottom: parte de cima do próximo tamanho (pt, in, cm, px) 20pt } elemento Ajustas as margens em todos os quatro lados de um tamanho (pt, in, cm, px) elemento (Se houver ou porcentagem do somente um valor, ele se tamanho da fonte na aplica a todos os lados; se ordem: alto, direita, houver dois ou três, o valor baixo, esquerda que falta será tomado do lado oposto.)
{ margin: .5cm . 5cm 1cm .5cm }
61
Projeto eJovem Módulo II: CSS
padding
paddingtop
Ajusta o preenchimento em todos os quatro lados do tamanho (pt, in, cm, px) conteúdo de um elemento ou porcentagem do (Se houver somente um { padding: .5cm . tamanho da fonte na valor, ele se aplica a todos os 5cm 1cm .5cm } ordem: alto, direita, lados; se houver dois ou baixo, esquerda três, o valor que falta será tomado do lado oposto.) Ajusta o preenchimento na tamanho (pt, in, cm, px) parte de cima do conteúdo ou porcentagem do { paddingtop: 5pt } de um elemento tamanho da fonte
Ajusta o preenchimento no tamanho (pt, in, cm, px) paddingright lado direito do conteúdo de ou porcentagem do um elemento tamanho da fonte
{ paddingright: 5pt }
padding bottom
Ajusta o preenchimento na tamanho (pt, in, cm, px) { paddingbottom: parte de baixo do conteúdo ou porcentagem do 5pt } de um elemento tamanho da fonte
paddingleft
Ajusta o preenchimento no tamanho (pt, in, cm, px) lado esquerdo do conteúdo ou porcentagem do { paddingleft: 5pt } de um elemento tamanho da fonte
bordertop width
Ajusta a largura da borda ao tamanho (pt, in, cm, { bordertopwidth: longo da parte de cima de px); thin, medium, thick thin } um elemento
borderright width
Ajusta a largura da borda ao tamanho (pt, in, cm, longo do lado direito de um px); thin, medium, thick elemento
{ borderright width: thin }
borderbottom width
Ajusta a largura da borda ao tamanho (pt, in, cm, longo da parte de baixo de px); thin, medium, thick um elemento
{ borderbottom width: thin }
borderleft width
Ajusta a largura da borda ao { borderleftwidth: tamanho (pt, in, cm, longo do lado esquerdo de thin } px); thin, medium, thick um elemento
Ajusta a largura da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se tamanho (pt, in, cm, { borderwidth: thin borderwidth houver só um valor, ele se px); thin, medium, thick thin thick thin } aplica a todos os lados; se houver dois ou três, os valores que faltam serão tomados do lado oposto.) bordertop color
Ajusta a cor da borda ao longo do lado de cima de um elemento
nome da cor ou código hex
{ bordertopcolor: green }
62
Projeto eJovem Módulo II: CSS
borderright color
Ajusta a cor da borda ao nome da cor ou código { borderrightcolor: longo do lado direito de um hex green } elemento
borderbottom color
Ajusta a cor da borda ao longo do lado de baixo de um elemento
nome da cor ou código hex
{ borderbottom color: #00FF00 }
borderleft color
Ajusta a cor da borda ao longo do lado esquerdo de um elemento
nome da cor ou código hex
{ borderleftcolor: thin }
Ajusta a cor da borda em cada lado de um elemento na ordem parte de cima, lado direito, parte de baixo, lado esquerdo (Se houver só um valor, ele se nome da cor ou código aplica a todos os lados; se hex houver dois ou três, os valores que faltam serão tomados do lado oposto; note que o Netscape só permite um valor)
{ bordercolor: green #FFFF00 #00FFFF green } (IE4) { bordercolor: green } (IE4 or Netscape 4)
bordercolor
bordertop style
Ajusta o estilo da borda ao longo do lado de cima de um elemento
nome do estilo (none, solid, double, groove, ridge, inset, outset)
borderright style
Ajusta o estilo da borda ao longo do lado direito de um elemento
nome do estilo (none, { borderrightstyle: solid, double, groove, solid } ridge, inset, outset)
borderbottom style
Ajusta o estilo da borda ao longo do lado de baixo de um elemento
nome do estilo (none, solid, double, groove, ridge, inset, outset)
{ borderbottom style: groove }
borderleft style
Ajusta o estilo da borda ao longo do lado esquerdo de um elemento
nome do estilo (none, solid, double, groove, ridge, inset, outset)
{ borderleftstyle: inset }
borderstyle
Ajusta o estilo da borda em todos os lados de um elemento
nome do estilo (none, solid, double, groove, ridge, inset, outset)
{ borderstyle: outset }
bordertop
Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento
largura, cor, e estilo
{ bordertop: thin green ridge }
borderright
Ajusta a largura, cor, e estilo da borda ao longo do lado direito de um elemento
largura, cor, e estilo
{ borderright: thin green ridge }
borderbottom
Ajusta a largura, cor, e estilo da borda ao longo do lado de baixo de um elemento
largura, cor, e estilo
{ borderbottom: thin green ridge }
{ bordertopstyle: ridge }
63
Projeto eJovem Módulo II: CSS
borderleft
Ajusta a largura, cor, e estilo da borda ao longo do lado esquerdo de um elemento
largura, cor, e estilo
{ borderleft: thin green ridge }
border
Ajusta a largura, cor, e estilo da borda em todos os lados de um elemento
largura, cor, e estilo
{ border: thin green ridge }
float
Faz com que o elemento flutue para um lado e outro do texto e o envolva. (Usado nos elementos DIV e SPAN.)
left, right, ou none
{ float: left }
clear
Especifica se o elemento pode ter elementos flutuando à sua volta faz com que o elemento se posicione por baixo de qualquer elemento que esteja flutuando no lado especificado.
left, right, ou both
{ clear: left }
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.9. Propriedades de classificação Estas propriedades classificam os elementos em categorias que podem receber estilos. Categorias podem ser: listas, blocos, trechos de blocos ou itens invisíveis.
2.9.1. display Esta propriedade define como um elemento é mostrado. A propriedade none desliga o elemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível); block abre uma nova caixa onde o objeto é posicionado, relativo aos outros blocos; listitem é um bloco com um marcador de lista e inline define um elemento como parte de um bloco. Sintaxe: •
display: block | inline | listitem | none
Exemplo: P {display: listitem} IMG {display: none} // desliga todas as imagens
2.9.2. whitespace Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações, etc. devem ser considerados (pre). •
whitespace: normal | pre | nowrap
64
Projeto eJovem Módulo II: CSS
2.9.3. liststyle Esta propriedade e as propriedades liststyletype, liststyleimage e liststyleposition definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posição. Esses elementos não são suportados no Netscape. •
liststyletype: disc | circle | square | decimal | lowerroman
•
liststyletype: upperroman | loweralpha | upperalpha | none
•
liststyleimage: url(url_da_imagem)
•
liststyleposition: inside | outside
Exemplo: liststyleimage: url(bullet.gif) É possível definir as três propriedades através de um atalho usando listtype. A ordem dos fatores é importante neste caso. •
liststyle: liststyletype | liststyleimage | liststyleposition
Exemplo: liststyle: url(bullet.gif) liststyle: square outside Logo abaixo se encontra uma tabela de propriedades e valores estilísticos de classificação Propriedade
Descrição
Valores
Exemplo
display
faz com que o elemento não apareça
none
{ display: none }
liststyletype
especifica a aparência de marcadores de item de lista (uso com elementos LI)
disk; circle; square; decimal; lower { liststyletype: roman; upperroman; square } loweralpha; upper alpha; none
especifica uma imagem para ser liststyleimage usada como marcador de item de lista (uso com elementos LI)
url(URL); none
{ liststyle image: url(redball.jpg) }
liststyle position
especifica a posição de marcadores de item de lista ( uso com elementos LI)
inside; outside
{ liststyle position: inside }
liststyle
inside; outside disk; especifica a posição, estilo,e URL circle; square; { liststyle: inside da imagem a ser usada como decimal; lower disk marcador de item de lista ( uso roman; upperroman; url(redball.jpg) } com elementos LI) loweralpha; upper alpha; none URL pt = pontos; in = polegadas; cm = centímetros; px = pixels;
Projeto eJovem Módulo II: CSS
65
2.10. Posicionamento O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (horizontal, vertical e em camadas). Embora os recursos de posicionamento não façam parte do CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam.
2.10.1. position, top e left Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posição absoluta será a posição do objeto no nível imediatamente superior. O posicionamento relativo referese à posição anterior do objeto. Sintaxe: •
position: absolute | relative
•
left: comprimento | porcentagem | auto
•
top: comprimento | porcentagem | auto
Exemplo: considere as quatro imagens a seguir: <div class="imagem1"> <img src="T1.gif" width=150 height=72 border=1> 1 Posição 0 0 </div> <div class="imagem2"> <img src="T2.gif" width=150 height=72 border=1> 2 Posição 0 200 </div> <div class="imagem3"> <img src="T3.gif" width=150 height=72 border=1> 3 Posição 25 25 </div> <div class="imagem4"> <img src="T4.gif" width=150 height=72 border=1> 4 Posição 100 0 </div> Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua localização original, obtemos a imagem ao lado (qual imagem?). Os retângulos claros indicam a posição original da imagem: DIV.imagem1 { position: relative; top: 0px; left: 0px; } DIV.imagem2 { position: relative; top: 0px; left: 200px; } DIV.imagem3 { position: relative; top: 25px; left: 25px; } DIV.imagem4 { position: relative; top: 100px; left: 0px; } Usando posicionamento absoluto, o bloco é movido em relação ao canto superior esquerdo do browser.
66
Projeto eJovem Módulo II: CSS
DIV.imagem1 { position: absolute; top: 0px; left: 250px; } DIV.imagem2 { position: absolute; top: 100px; left: 0px; } DIV.imagem3 { position: absolute; top: 160px; left: 120px; } DIV.imagem4 { position: absolute; top: 200px; left: 80px; }
2.10.2. zindex A propriedade zindex permite ordenar os objetos em camadas. É um eixo de profundidade. Para usála, basta definir em cada objeto: •
zindex: número
onde número é a camada de exibição. Quanto maior o número, mais alta a camada. O corresponde à camada do texto. Se um objeto tiver zindex menor que zero aparecerá atrás do texto. Se zindex for maior que zero, aparecerá na frente. Quando não é definido ou quando zindex: 0 o bloco ocupará a mesma camada que o texto.
2.10.3. visibility Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque não remove o espaço antes ocupado pela imagem: •
visibility: hidden | visible
Exemplo: IMG {visibility: hidden} // torna invisíveis todas as imagens Logo abaixo, encontrase uma tabela com propriedades e valores estilísticos para posicionamento: Propriedade
Descrição
Valores
Exemplo
clip
rect (top right left bottom) onde top right Especifica a área do elemento left bottom são definidas { clip: rect (5pt como auto ou como que aparece como transparente auto auto auto) } valores de extensão (pt, in, cm, px)
height
Especifica a altura de um elemento (é mais útil para o escalonamento auto ou valores de de imagens; a média da aparência extensão (pt, in, cm, px) { height: 50px } será mantida se a width for ou porcentagem especificada como auto)
width
Especifica a largura de um elemento (é mais útil para o auto ou valores de escalonamento de imagens; a média extensão (pt, in, cm, px) { width: 50% } da aparência será mantida, se or porcentagem height for especificada como auto)
67
Projeto eJovem Módulo II: CSS
left
Especifica a posição esquerda de auto ou valores de um elemento relativamente ou extensão (pt, in, cm, px) or porcentagem absolutamente posicionado
{ left: 2pt }
top
Especifica a posição da parte de auto ou valores de cima de um elemento extensão (pt, in, cm, px) relativamente ou absolutamente or porcentagem posicionado
{ top: 2pt }
overflow (não herdado)
clip (a porção Especifica o manejo da porção inundada é oculta) ou de um elemento relativamente none (a porção ou absolutamente posicionado, { overflow: clip } inundada aparece) ou que se derrama sobre outro scroll (para revelar a elemento porção inundada)
position
Especifica se o elemento pode ser posicionado
absolute (em relação ao documento); relative (em relação ao elemento pai); static (defaultnão posicionado)
visibility
Especifica se o elemento é visível (espaço para o elemento é reservado em ambos os casos)
visible; hidden
zindex
whitespace
number (positivo para cima, negativo para Especifica se o elemento é mostrado baixo, começando do acima ou abaixo de outros 1; por default a elementos com os quais faz elementos sucessivos entelhamento (observe que o são assignados Netscape 4.0 lida com isso através números superiores do atributo layer) aos elementos antecedentes) Especifica se um elemento vai ser mostrado normalmente ou num texto préformatado
normal; pre
{ position: relative }
{ visibility: hidden }
{ zindex: 2 }
{ whitespace: pre }
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.11. Classes e IDs Às vezes, um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa parte do texto. Para mudar o estilo dele, podemse incluir as declarações em um atributo STYLE. Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, podese usar um recurso para marcálo, de forma que seja considerado diferente. Isto pode ser feito atribuindolhe uma identificação única. Em HTML 3.2, podese usar o atributo ID: <P ID=w779>Texto especial</P>
Projeto eJovem Módulo II: CSS
68
Para alterar as características deste parágrafo agora, podese usar o seu ID como seletor, da forma: #w779 {color: cyan } Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um elemento com o ID #w779 serão afetadas. Se houver mais de um com o mesmo ID, apenas o primeiro será afetado. Melhor que usar ID é agrupar características semelhantes em classes. Uma classe é uma variação de um determinado objeto. Por exemplo, um texto teatral pode ter três parágrafos com apresentação diferente, representando as falas de três personagens. Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma classe distinta: <p class=padre>Eu retiro o que disse, João</p> <p class=grilo>Retirando ou não retirando, o fato é que o cachorro enterrouse em latim</p> <p class=bispo>Um cachorro? Enterrado em latim? </p> <p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sabe? </p> Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, usase: P.grilo { color: maroon } P.padre { color: black } P.bispo { color: navy } Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão em azul marinho. Uma classe também pode conter descritores diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor: .verde { color: green } Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo: <P class=verde>, <h3 class=verde>, <table class=verde>, etc.
2.12. Links (pseudoclasses e pseudoelementos) Para seletores especiais que mudam de estado, como o texto marcado com <A>, é possível atribuir propriedades diferentes para cada estado:
Projeto eJovem Módulo II: CSS
69
O que vemos é o que muda as características dos links nãovisitados, ativos e visitados. Assim como qualquer seletor, os links podem ser combinados com outros descritores: P, A:link, H2 {color: red}
2.13. Agrupando elementos (span e div) Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Nesta lição, veremos com detalhes o uso dos elementos HTML <span> e <div>, no que se refere a sua vital importância para as CSS. •
Agrupando com <span>
•
Agrupando com<div>
2.13.1. Agrupando com <span> O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento. Um exemplo deste uso é mostrado na citação abaixo: <p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p> Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados na frase. Para isto, marcamos os benefícios com <span>. A cada span, atribuímos uma class e estilizamos na folha de estilos:
Para ver o resultado, digite as linhas acima! É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um dos três elementos <span>, conforme foi explicado na lição anterior.
2.13.2. Agrupando com <div> Enquanto <span> é usado dentro de um elemento nível de bloco, como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco. Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:
70
Projeto eJovem Módulo II: CSS
E na folha de estilos, podemos agrupar a estilização da seguinte forma:
E o fazer o agrupamento da seguinte forma:
Como resultado, temos:
Nos exemplos mostrados acima usamos somente <div> e <span> para simples estilizações, tais como cores de textos e de fundos. Contudo, estes dois elementos possibilitam estilizações bem mais avançadas. Atributos do CSS Atributo de CSS
background background
O que ele formata
Cor de fundo, imagem, transparência. Rolagem do fundo /
Atributo de CSS
O que ele formata
borderleftcolor
Cor da borda citada.
borderleftstyle
Estilo da borda citada.
71
Projeto eJovem Módulo II: CSS
attachment background image
Marca d'água. Imagem de fundo.
borderleftwidth
Largura da borda citada.
Cor de fundo ou Largura, estilo e cor da borderright transparência. borda direita. background Posicionamento da borderrightcolor Cor da borda citada. position imagem de fundo. background Configuração ladoalado borderrightstyle Estilo da borda citada. repeat da imagem de fundo. Largura, estilo e cor de border borderrightwidth Largura da borda citada. todas as 4 bordas. Largura, estilo e cor da borderbottom borderstyle Estilo de todas as 4 boras. borda inferior. borderbottom Largura, estilo e cor da Cor da citada borda. bordertop color borda superior. borderbottom Estilo da citada borda. bordertopcolor Cor da borda citada. style borderbottom Largura da citada borda. bordertopstyle Estilo da borda citada. width bordercolor Cor das 4 bordas. bordertopwidth Largura da borda citada. Largura, estilo e cor da Largura de todas as 4 borderleft borderwidth borda esquerda. bordas. Elementos flutuantes à Tipo de filtro aplicado ao clear filter esquerda ou à direita. elemento. Parte visível de um clip float Se o elemento flutua. elemento. Estilo, variante, peso, color Cor de primeiro plano. font tamanho e altura da linha do tipo de fonte. Tipo de ponteiro do Incorporação da fonte ao cursor @fontface mouse. arquivo HTML. Se o elemento é exibido e display o espaço é reservado fontfamily Tipo de fonte. para ele. Espaço à esquerda do fontsize Tamanho da fonte. paddingleft elemento. Espaço à direita do fontstyle Fonte itálico. paddingright elemento. Espaço a partir da margem Fontevariant Fonte bold. paddingtop superior do elemento. Peso da fonte de claro a Inserir quebra de página fontweight pagebreakafter negrito. depois de um elemento. Altura exibida ao Como o elemento é height position elemento. posicionado na página. @import Folha de estilo a textalign Alinhamento do texto. importar.
backgroundcolor
72
Projeto eJovem Módulo II: CSS
left
Posição do elemento em relação a margem esquerda da página.
textdecoration
letterspacing
Distância entre as letras.
textindent
lineheight
Distância entre linhas de base.
texttransform
liststyle
Tipo, imagem e posição do estilo da lista.
top
Marcador de item de verticalalign lista. Posição do marcador de liststyleposition visibility item da lista. Marcador de item de lista liststyletype width alternativo. Tamanho de todas as 4 margin zindex margens. Tamanho da margem marginright position direita. Tamanho da margem marginbottom textalign inferior. Tamanho da margem margintop textdecoration superior. Exibição de imagens que overflow são maiores do que suas textindent molduras. Espaço em torno de um padding elemento em todos os texttransform lados. Espaço a partir da paddingbottom margem inferior de um top elemento. liststyleimage
verticalalign
Sublinhado, sobrelinhado ou riscado. Recuo da primeira linha do parágrafo. Transformação para todas maiúsculas, minúsculas ou inicial maiúscula. Posição do elemento em relação a parte superior da página. Alinhamento vertical do elemento. Se elemento é visível ou invisível. Largura do elemento. Posição do el Como o elemento é posicionado na página. Alinhamento do texto. Sublinhado, sobrelinhado ou riscado. Recuo da primeira linha do parágrafo. Transformação para todas maiúsculas, minúsculas ou inicial maiúscula. Posição do elemento em relação a parte superior da página. Alinhamento vertical do elemento.
</div>
</div>
</div>
<!-- End Description Section -->
</main>
<!-- ========== END MAIN ========== -->
<div id="embedModal" class="js-login-window u-modal-window u-modal-window--embed">
<button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button"
onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<form class="p-7">
<header class="text-center mb-7">
<h4 class="h4 mb-0">Embed!</h4>
<p>Apostila Html Css E - Jovem</p>
</header>
<textarea class="form-control u-form__input" rows="5"></textarea>
</form>
</div>
<script>
function check_recatpcha(token) {
document.getElementById("download-form").submit();
grecaptcha.reset();
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- ========== FOOTER ========== -->
<hr class="my-0">
<footer>
<!-- Lists -->
<div class="container u-space-2">
<div class="row justify-content-md-between">
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>About us'</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link"
href="https://azdoc.tips/about-us">About us</a>
</li>
<li><a class="u-list__link"
href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
</li>
<li><a class="u-list__link"
href="https://azdoc.tips/privacy-policy">Privacy policy</a></li>
<li><a class="u-list__link"
href="https://azdoc.tips/sitemap">Sitemap</a></li>
<li><a class="u-list__link" href="https://azdoc.tips/career">Career</a>
</li>
<li><a class="u-list__link"
href="https://azdoc.tips/contact-us">Contact us</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>Support</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link" href="https://azdoc.tips/help">Help</a></li>
<li><a class="u-list__link"
href="https://azdoc.tips/ticket">Submit ticket</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-4 col-lg-2 mb-4 mb-lg-0">
<h3 class="h6">
<strong>Account</strong>
</h3>
<!-- List -->
<ul class="list-unstyled mb-0">
<li><a class="u-list__link"
href="https://azdoc.tips/profile">Profile</a>
</li>
<li><a class="u-list__link" href="https://azdoc.tips/login">Login</a>
</li>
<li><a class="u-list__link"
href="https://azdoc.tips/register">Register</a>
</li>
<li><a class="u-list__link"
href="https://azdoc.tips/recover-account">Forgot password</a>
</li>
</ul>
<!-- End List -->
</div>
<div class="col-md-6 col-lg-4">
<h3 class="h6">
<strong>Connect with us</strong>
</h3>
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded"
href="https://facebook.com/azdoctipscom">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded"
href="https://plus.google.com/111647055250435329124">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mb-3">
<a class="u-icon u-icon--sm u-icon-primary--air rounded"
href="https://twitter.com/azdoctipscom">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
<!-- End Lists -->
<hr>
<!-- Copyright -->
<div class="container text-center u-space-1">
<!-- Logo -->
<a class="d-inline-block mb-2" href="https://azdoc.tips/" aria-label="AZDOCTIPS">
<img src="https://azdoc.tips/assets/img/logo.png" alt="Logo" style="width: 120px;">
</a>
<!-- End Logo -->
<p class="small text-muted">Copyright © 2012-2024.</p>
</div>
<!-- End Copyright -->
</footer>
<!-- ========== END FOOTER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Account Sidebar Navigation -->
<aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden"
aria-labelledby="sidebarNavToggler">
<div class="u-sidebar__scroller">
<div class="u-sidebar__container">
<div class="u-header-sidebar__footer-offset">
<!-- Toggle Button -->
<div class="d-flex align-items-center pt-4 px-7">
<button type="button" class="close ml-auto"
aria-controls="sidebarContent"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-hide-on-scroll="false"
data-unfold-target="#sidebarContent"
data-unfold-type="css-animation"
data-unfold-animation-in="fadeInRight"
data-unfold-animation-out="fadeOutRight"
data-unfold-duration="500">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- End Toggle Button -->
<!-- Content -->
<div class="js-scrollbar u-sidebar__body">
<div class="u-sidebar__content u-header-sidebar__content">
<!-- Login -->
<div id="login" data-target-group="idForm">
<form class="js-validate" action="https://azdoc.tips/login" method="post">
<!-- Title -->
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome back</h2>
<p>Login to manage your account</p>
</header>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email address"
aria-label="Email address"
data-msg="Please enter a valid email address"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-2">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password"
required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid please try again"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="clearfix mb-4">
<a class="js-animation-link float-right small u-link-muted" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="slideInUp">Forgot password</a>
</div>
<div class="mb-2">
<button type="submit"
class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login </button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="slideInUp">Register </a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">Or</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1"
href="https://azdoc.tips/login/facebook">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<!-- <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0"-->
<!-- href="--><!--">-->
<!-- <span class="fab fa-google mr-1"></span>-->
<!-- Google-->
<!-- </a>-->
</div>
<!-- End Login Buttons -->
</form>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<form class="js-validate" action="https://azdoc.tips/register" method="post">
<!-- Title -->
<header class="text-center mb-7">
<h2 class="h4 mb-0">Welcome to AZDOCTIPS.</h2>
<p>Fill out the form to get started</p>
</header>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email address"
aria-label="Email address"
data-msg="Please enter a valid email address"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-user u-form__text-inner"></span>
</span>
</div>
<input type="text" class="form-control u-form__input" name="username" required
placeholder="Username"
aria-label="Username"
data-msg="Please enter a valid username"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-lock u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="password"
required
placeholder="Password"
aria-label="Password"
data-msg="Your password is invalid please try again"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fa fa-key u-form__text-inner"></span>
</span>
</div>
<input type="password" class="form-control u-form__input" name="confirm_password" id="confirmPassword"
required
placeholder="Confirm password"
aria-label="Confirm password"
data-msg="Password does not match with confirm password"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<!-- Checkbox -->
<div class="js-form-message mb-5">
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input type="checkbox" class="custom-control-input" id="termsCheckbox" name="terms_confirm" value="1" required data-msg="Please accept our terms and conditions"
data-error-class="u-has-error"
data-success-class="u-has-success">
<label class="custom-control-label" for="termsCheckbox">
<small>
I agree to the
<a class="u-link-muted" href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
</small>
</label>
</div>
</div>
<!-- End Checkbox -->
<div class="mb-2">
<button type="submit"
class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get started </button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="slideInUp">Login </a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">Or</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1"
href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0"
href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
<!-- End Login Buttons -->
</form>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<form class="js-validate" action="https://azdoc.tips/recover-account" method="post">
<!-- Title -->
<header class="text-center mb-7">
<h2 class="h4 mb-0">Forgot your password?.</h2>
<p>Enter your email address below and we will get you back on track</p>
</header>
<!-- End Title -->
<!-- Input -->
<div class="js-form-message mb-4">
<div class="js-focus-state input-group u-form">
<div class="input-group-prepend u-form__prepend">
<span class="input-group-text u-form__text">
<span class="fas fa-envelope u-inner-form__text"></span>
</span>
</div>
<input type="email" class="form-control u-form__input" name="email" required
placeholder="Email address"
aria-label="Email address"
data-msg="Please enter a valid email address"
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input -->
<div class="mb-2">
<button type="submit"
class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Request reset link </button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="slideInUp">Login </a>
</div>
</form>
</div>
<!-- End Forgot Password -->
</div>
</div>
<!-- End Content -->
</div>
<!-- Footer -->
<footer class="u-sidebar__footer u-sidebar__footer--account">
<ul class="list-inline mb-0">
<li class="list-inline-item pr-3">
<a class="u-sidebar__footer--account__text"
href="https://azdoc.tips/terms-conditions">Terms and conditions</a>
</li>
<li class="list-inline-item">
<a class="u-sidebar__footer--account__text" href="https://azdoc.tips/help">
<i class="fa fa-info-circle"></i> Help </a>
</li>
</ul>
<!-- SVG Background Shape -->
<div class="position-absolute-bottom-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;"
xml:space="preserve">
<path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69
c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"/>
<path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11
c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2
C282.5,76.7,292.7,74.4,300,68.5z"/>
<circle class="u-fill-danger" cx="259.5" cy="17" r="13"/>
<circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"/>
<circle class="u-fill-success" cx="288" cy="5.5" r="5.5"/>
<circle class="u-fill-warning" cx="232.5" cy="34" r="2"/>
</svg>
</div>
<!-- End SVG Background Shape -->
</footer>
<!-- End Footer -->
</div>
</div>
</aside>
<!-- End Account Sidebar Navigation -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- Go to Top -->
<a class="js-go-to u-go-to" href="#"
data-position='{"bottom": 15, "right": 15 }'
data-type="fixed"
data-offset-top="400"
data-compensation="#header"
data-show-effect="slideInUp"
data-hide-effect="slideOutDown">
<span class="fa fa-arrow-up u-go-to__inner"></span>
</a>
<!-- End Go to Top -->
<!-- JS Global Compulsory -->
<script src="https://azdoc.tips/assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/bootstrap/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="https://azdoc.tips/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<script src="https://azdoc.tips/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="https://azdoc.tips/assets/vendor/pdfobject/pdfobject.js"></script>
<script src="https://azdoc.tips/assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="https://azdoc.tips/assets/vendor/appear.js/appear.js"></script>
<script src="https://azdoc.tips/assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<script src="https://azdoc.tips/assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<!-- JS Template -->
<script src="https://azdoc.tips/assets/js/hs.core.js"></script>
<script src="https://azdoc.tips/assets/js/helpers/hs.focus-state.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.header.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.unfold.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.malihu-scrollbar.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.validation.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.fancybox.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.slick-carousel.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.show-animation.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.sticky-block.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.scroll-nav.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.go-to.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.modal-window.js"></script>
<script src="https://azdoc.tips/assets/js/components/hs.cubeportfolio.js"></script>
<script src="https://azdoc.tips/assets/js/azdoctips.js?v=2"></script>
<script>
// initialization of text animation (typing)
if (jQuery('.u-text-animation.u-text-animation--typing').length > 0) {
var typed = new Typed(".u-text-animation.u-text-animation--typing", {
strings: ["Documents.", "Magazines.", "Articles.", "And more."],
typeSpeed: 60,
loop: true,
backSpeed: 25,
backDelay: 1500
});
}
</script>
</body>
</html> 
