Introdução ao Desenvolvimento WEB

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

Download "Introdução ao Desenvolvimento WEB"

Transcrição

1 2009 Introdução ao Desenvolvimento WEB Versão 3.1 Este documento aborda tópicos técnicos utilizados na criação da Interface Web: HTML, CSS e Javascript básico. Ideal para o iniciante ou desenvolvedor com conhecimento mediano do assunto 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2: <html> 3: <head> 4: <html xmlns="http://www.w3.org/1999/xhtml"> 5: <meta http-equiv="content-type" content="text/html; charset=iso " /> 6: <title>minha primeira página web</title> 7: </head> 8: <body> 9: Oi mundo! 10: </body> 11: </html> Professor Carlos Majer Introdução ao Desenvolvimento WEB 2004 ~2009 Última revisão em 02/01/2009

2 Este material pertence a Carlos A. Majer, Professor Universitário de Tecnologia da Informação e encontra-se disponível em Licença de Uso Este trabalho está licenciado sob uma Licença Creative Commons Atribuição-Permitida a Criação de Obras Derivadas 2.5 Brasil. Para ver uma cópia desta licença, visite ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. Isto significa que você poderá copiar, distribuir, exibir e realizar trabalhos derivados desta obra com as seguintes restrições:- Você deverá sempre fazer referência ao autor (Ou seja, Eu) Você não poderá utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar outras pessoas ou instituições. Para maiores informações envie um para ou ou Caso acredite que este material tenha lhe ajudado, envie um de agradecimento. Isto é o suficiente para motivar-me a continuar desenvolvendo este tipo de material e disponibilizá-lo para o público. Caso note algum erro ou tenha alguma sugestão, sinta-se à vontade para me contatar. Prof. Carlos Majer Página 2

3 Conteúdo Introdução à Internet... 6 Funcionamento da WEB... 6 Conectando-se na Grande Rede... 7 IPs fixos e IPs dinâmicos... 7 Números IPs e Resolução de Nomes... 7 URL Uniform Resource Locator... 8 Protocolo... 8 Host do domínio... 9 Nome do domínio :Número da Porta... 9 A página HTML Introdução Elementos de uma página web Extensão HTML ou HTM? Estrutura HTML (Marcas) Sobre as marcas HTML As marcas básicas Cabeçalho Parágrafos Quebras de Linha Comentários Trabalhando com texto A marca PRE Marcas de estilização de texto mais utilizadas Entidades : Caracteres Especiais Estilizando cores, fontes e tamanhos Imagens Formatos de imagem mais utilizados na Internet Inserindo imagens na página Links Criando Links Internos Criando Links Externos Inserindo um link numa imagem Inserindo um link numa imagem externa Abrindo o link numa outra página Tabelas Tamanho das células numa tabela Bordas Inserindo título / legenda numa tabela Cabeçalhos na tabela Cores nas Tabelas Trabalhando o Layout das tabelas Distanciamento das bordas Distanciamento entre as células Alinhamento Agrupando elementos de tabelas Listas Criando Listas Ordenadas Atributos de Tipos de Estilo de Listas Numeradas Criando Listas Não Ordenadas Listas de Definição Frameset (Conjunto de Quadros) Criando Frames Prof. Carlos Majer Página 3

4 Frame de Navegação Quadros Inseridos (In-Line Frames) Vantagens e desvantagens no uso de frameset Formulários Criando formulários Métodos de Envio de Objetos de Formulários Objetos de Formulários Elemento Caixa de Texto Elemento Senha Elemento Botões de Rádio Elemento Caixa de Verificação Elemento Lista de Seleção Elemento Área de Texto Elemento Conjunto de Campos Elemento Botão Elemento LABEL Elemento Upload de Arquivo HTML ou XHTML? CSS - Folha de Estilo em Cascata CSS - Cascade Style Sheet (Folha de Estilo em Cascata) O que é? Porque Surgiu? Quando surgiu? Definições e Conceitos Criando estilos Estrutura do estilo Especificando diversos atributos Atributo baseado em texto Agrupando definições de estilo Aplicando CSS Folha Externa Estilo Interno (na página HTML) Estilo Em Linha (in-line) Prioridade de Aplicação Criando Classes Delimitando o escopo de uma classe Blocos e Estrutura em Árvore Elementos de Bloco Elementos em nível de linha A propriedade background A propriedade background-color A propriedade background-image Medidas A propriedade display inline block list-item none Espaçamento Margens Posicionamento Posicionamento Estático (static) Posicionamento Relativo (relative) Posicionamento Absoluto (absoluto) Prof. Carlos Majer Página 4

5 Aplicações Criando Menus Estrutura do Menu Identificando visualmente os elementos da estrutura Estilizando o Menu Menus do Tipo Drop Down JAVASCRIPT Inserindo Comandos Javascript numa página WEB Inserindo Comandos Javascript num evento de elemento de página WEB Eventos de uma página WEB Trabalhando com textos e expressões do tipo caractere Utilização de variáveis no Javascript Expressões Matemáticas Operadores Matemáticos Operadores de Comparação Operadores de Associação Operadores Lógicos Criando Funções / Procedimentos em Javascript DOM - Document Object Model Introdução Acessando atributos via Javascriipt Consistindo Campos de Formulários Colocando o foco num determinado campo Criando Máscaras para edição de dados Identificando o objeto que iremos manipular Prof. Carlos Majer Página 5

6 Introdução à Internet Funcionamento da WEB A Internet foi criada com base na ARPANET, uma rede descentralizada de comunicações do Departamento de Defesa (DoD) dos Estados Unidos. Durante a guerra fria, contra a União Soviética, o DoD estava muito preocupado com a reação que poderia advir de um ataque dos soviéticos, que destruísse um dos elos (nós) de sua rede, e em função disto desabilitar as comunicações entre os quartéis generais de defesa. Em função disto, foi criada a rede experimental ARPANET que se utilizava de uma rede onde diversos computadores poderiam utilizar rotas alternativas para comunicar-se com outros computadores da rede. Sendo assim, caso uma rota fosse inviabilizada, os pacotes de informações (dados) utilizaram outras rotas para chegar a seus destinos. Neste processo de criação e aprimoramento da ARPANET diversas tecnologias de telecomunicações foram criadas ou adaptadas. Protocolos, números de identificação, métodos de recuperação de erro e transporte de dados e outros elementos foram trabalhados no sentido de viabilizar e maximizar o funcionamento da rede. Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada também no meio acadêmico, para depois de certo tempo ser aberta para o público geral resultando naquilo que hoje chamamos de teia de alcance mundial (World Wide Web) ou Internet. Atualmente, a Internet caracteriza-se por ser uma grande rede de computadores, que os interligava através de um grande cabo imaginário conhecido como backbone, através do qual as pessoas se comunicam, trocando informações e dados em velocidades cada vez maiores. No momento da conexão de um computador com a rede, este recebe um número IP (Internet Protocol). Prof. Carlos Majer Página 6

7 Este número IP serve como identificação única, para este computador. Isto quer dizer que num determinado momento, cada dispositivo conectado na tem sua identificação que é única, e que possibilita à ele ser localizado e identificado por outros dispositivos. Conectando-se na Grande Quando um usuário se conecta num provedor de acesso, como por exemplo, no IG, um de seus servidores gera um número IP para este computador. Neste momento, este computador faz parte da rede de computadores do IG, passando a ter acesso à Internet. O processo é análogo em qualquer outro provedor, como por exemplo, do Virtua. Sendo um dispositivo interligado na Net, e tendo um número IP de identificação, ele pode efetuar consultas e solicitações por serviços na Internet. Da mesma forma, ele também passa a ser passível de varreduras, podendo ser sondado, receber solicitações de acesso, de serviços e até ser invadido (ao menos enquanto estiver conectado na rede). IPs fixos e IPs dinâmicos A diferença entre uma conexão que utiliza um IP fixo e uma que utiliza um IP dinâmico é a de o IP fixo nunca muda. Exemplos típicos de IPs fixos são os das servidores que hospedam páginas web. Exemplos típicos de IPs dinâmicos são aqueles utilizados por usuários de diversos tipos de provedores, especialmente os de conexão via linha discada, que ao conectar num provedor de acesso recebem um número IP que esteja disponível, que provavelmente não será (mas em alguns casos pode ser) igual ao da última vez que acessou. Números IPs e Resolução de Nomes Cada byte, sendo composto de 8 bits pode conter até 256 combinações diferentes (de 0 até 255). Um número IP é um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereçamento de bits. Exemplo do site da Unicid (junho de 2006): ping Disparando contra [ ] com 32 bytes de dados: Resposta de : bytes=32 tempo=38ms TTL=248 Resposta de : bytes=32 tempo=45ms TTL=248 Resposta de : bytes=32 tempo=24ms TTL=248 Resposta de : bytes=32 tempo=35ms TTL=248 Estatísticas do Ping para : Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de perda), Aproximar um número redondo de vezes em milissegundos: Mínimo = 24ms, Máximo = 45ms, Média = 35ms Este número IP pode ser mudado pelo administrador da rede da UNICID. Atualmente (Fev/2009), verifiquei que o código em uso é o Como é mais simples de se lembrar de um nome do que de um número IP, foi criada uma maneira para se utilizar nomes do que números. O serviço DNS (Domain Name Server) efetua a resolução de nomes, Prof. Carlos Majer Página 7

8 associando os números IPs à nomes (alias) que ficam armazenando em tabelas nos servidores da Internet, que efetuam constantes trocas de tabelas entre si, para ficarem sempre atualizados. Isto quer dizer que você pode digitar no seu navegador tanto quanto para acessar o site da Unicid. Que tal tentar? URL Uniform Resource Locator Diversos serviços podem ser encontrados na Internet. Os mais comuns são:- Servidor WEB (Internet) Servidor FTP Servidor de s Servidor de Notícias Servidor de Banco de Dados Estes serviços podem ser encontrados em diversos computadores na Internet. Os computadores que provêm (servem) algum destes serviços são conhecidos como servidores. Em geral, este computador tem um software que disponibiliza o serviço (veja lista acima). URL significa Uniform Resource Locator, ou seja, Localizador de Recursos Uniformes e é a forma pela qual formatamos o endereçamento para acesso a um determinado recurso da Internet. A Estrutura da URL é definida da seguinte forma:- 1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniform e é a formatação para se acessar um recurso específico, como por exemplo, uma página web. Para formatamos um URI adicionamos o nome do recurso na URL. Exemplo:- 1) Protocolo 2) Domínio 3) Porta de Acesso 4) Pasta 5) Arquivo Vamos ver estes itens em detalhe:- Protocolo O protocolo é como se fosse o nome da língua pela qual as partes deverão se comunicar. Este protocolo define o que o programa que está solicitando o serviço deseja e como o servidor deve se comportar. Um exemplo bem prático disto é o do navegador solicitando uma página a um servidor. O usuário em seu navegador (cliente), tenta acessar uma página. Prof. Carlos Majer Página 8

9 Assim que o usuário teclar ENTER, o navegador, por padrão, insere o protocolo HTTP (Hyper Text Transfer Protocol), na frente do nome de página:- O navegador faz isto para que o servidor (computador que irá receber a solicitação, localizado no endereço fornecido acima) ao receber a solicitação de abertura de página consiga passar esta responsabilidade (localizar e disponibilizar a página) para o software correto (software servidor web, muitas vezes o IIS Internet Information Services ou Apache). Sem o uso do protocolo, o servidor (computador) não saberia qual software executar para atender a demanda. Com base neste protocolo, o servidor web (software que está rodando no computador servidor) identifica a solicitação web (http), localiza a página desejada e devolve ao cliente (navegador). Os protocolos mais comuns são:- Protocolo Utilização Localiza um recurso (página www, imagem, etc) num servidor Web ftp:// Localiza um arquivo num servidor FTP news:// Localiza um servidor de notícias na Web file:// Localiza um arquivo num computador ou rede local Host do domínio Quando não informado, o host é assumido como www. Nome do domínio. É o nome pelo qual seu domínio foi registrado na entidade de registro de domínios de seu país. No Exemplo abaixo estará sendo utilizado o domínio da UOL (uol.com.br) :Número da Porta Como um dispositivo (computador) pode ter diversos serviços disponíveis (veja lista acima), e considerando que o endereço do dispositivo é único, a maneira pela qual ele disponibiliza seus serviços é através do uso de portas. As portas são identificações específicas de certos serviços, e muitas vezes sua utilização se dá de forma transparente, sem que o usuário note sua utilização. Como um exemplo disto, podemos afirmar que os navegadores (Internet Explorer, Mozila Firefox, etc) estão configurados para acessar um dispositivo (computador) na Internet e fazer uma solicitação na porta 80, que é a porta padrão da Internet. Alguns exemplos de portas:- Porta Uso 20 e 21 Serviço FTP 23 Telnet 25 SMTP Simple Mail Transfer Protocol - Uso para Envio de s 53 DNS Domain Name Server 80 INTERNET Porta de acesso para serviço de página 109 e 110 POP Post Office Protocol Para Recebimento de s 119 NNTP Network News Transfer Protocol Para recebimento de Notícias Exemplo de endereçamento de um recurso:- Prof. Carlos Majer Página 9

10 Inicialmente temos o protocolo Em seguida temos a informação de host e do domínio de destino Em seguida temos a porta 8080 Em seguida temos o nome da Pasta dentro do domínio. pastavirtual/majer E finalmente o recurso desejado, que é o arquivo:- historia.html Prof. Carlos Majer Página 10

11 A página HTML Introdução HTML significa Hyper Text Markup Language, que traduzida para o português significa Linguagem de Marcação de Hipertexto. Esta linguagem permite a utilização de um conjunto de comandos para exibição de conteúdo e formatação de layout de páginas para Internet. Os arquivos do tipo HTML são arquivos textos, que podem ser abertos e editados pelo Bloco de Notas ou qualquer programa editor de textos simples. Ao examinarmos o conteúdo de um arquivo HTML, notamos a existência de comandos (as marcas), que determinam a maneira pela qual a página web será interpretada por um navegador (Internet Explorer, Mozilla Firefox, Safári, Opera, etc.). As marcas podem utilizar atributos, que são informações específicas de como o comando (marca) deverá ser executado. Em função de seu formato aberto e não proprietário, este tipo de arquivo pode ser visualizado em diversas plataformas dentre elas Windows, Linux, Unix, Macintosh, etc. Elementos de uma página web Uma página web pode conter diversos tipos de elementos:- Textos: É o tipo de informação mais comum em páginas da INTERNET. Costumam ser dispostos em diversos tamanhos e cores, despertando o interesse do usuário. Imagens: Diversos tipos de imagens são utilizados para enriquecer a experiência do usuário na rede. Dentre elas podemos destacar as imagens estáticas, geralmente nos padrões JPEG e PNG, as imagens animadas no formato GIF e principalmente as animações feitas em FLASH. Elementos de Formulário: Os formulários representam uma interface entre o site e o usuário, solicitando informações do usuário com diversos intuitos dentre eles o de se cadastrar o usuário no site para receber informações, inserir pedidos de informações específicas, efetuar buscas, efetuar pedidos de compras, etc. Arquivos de Áudio: Os arquivos de áudio colocam-se como uma outra maneira para se melhorar a interface com o usuário e chamar a atenção sobre determinado site. Arquivos de Vídeo: Atualmente muito em uso, os arquivos de vídeo inseridos em páginas web permitem uma maior facilidade na transmissão da informação, além do que também serve como ferramenta de marketing e propaganda. Jogos e aplicações Java: Diversos tipos de aplicações estão sendo construídos para Internet através da utilização da linguagem Java, dentre elas Acesso a Bancos, Interfaces com dispositivos diversos, Jogos e muito mais. Links: Os links são a base de funcionamento da web, visto que se baseia no conceito de Hipertexto, no qual um texto (ou parte dele) ao ser clicado pode conduzir o usuário para um outro texto, localizado em qualquer local do documento (página). Extensão HTML ou HTM? Pode ser utilizada tanto uma quanto a outra. Em função de restrições de alguns sistemas operacionais antigos (DOS), os arquivos só podiam utilizar três letras em sua extensão. Hoje não importa qual a extensão utilizada, pois ambas são válidas. Prof. Carlos Majer Página 11

12 Estrutura HTML (Marcas) Uma página html é delimitada pelas marcas:- <html> </html> Dentro dela temos uma área de cabeçalho, onde podemos inserir alguns comandos de configuração, como por exemplo, o título da página. Esta área é criada através das marcas:- <head> </head> Em seguida existe uma segunda área, que é a área do corpo da página, que irá abrigar o conteúdo a ser exibido na tela do navegador. Esta área é criada através das marcas:- <body> </body> As marcas HTML ficam contidas entre os sinais de < menor que e > maior que. Abaixo notamos um exemplo da estrutura em código HTML de uma página web:- E em seguida a sua apresentação num navegador:- Prof. Carlos Majer Página 12

13 Para verificar como está ficando sua página, salve-a numa pasta (diretório) e em seguida abra-a através de seu navegador. Clicando duplamente no arquivo gerado irá automaticamente acionar seu navegador padrão (Firefox, Microsoft Internet Explorer) para a abertura da página web. O conteúdo de uma página web fica em cachê, que é uma memória temporária que o seu navegador utiliza para agilizar o carregamento de uma página. Muitas vezes, ao tentar abrir-se uma página, o conteúdo que aparece é o que está neste cachê (e não a página que acabou de ser alterada e salva). Quando isto ocorrer, utilize o botão de recarga de página (geralmente F5) do Navegador para atualizar seu cache com o conteúdo atualizado da página. Sobre as marcas HTML Ciclo de vida Através da continua evolução da tecnologia, certas marcas HTML vão se tornando obsoletas (depreciadas), ou seja, deixando de ser utilizadas. Outras são trocadas por marcas ou tecnologias mais novas. Isto é uma evolução natural. A própria criação e uso do CSS (Folha de Estilos em Cascata abordado adiante, neste documento) é um exemplo disto, na medida em que seus comandos acabam sendo recomendados para utilização, no lugar de algumas marcas, para efeitos de apresentação do conteúdo das páginas HTML. O ciclo de vida das marcas HTML é basicamente o seguinte:- Concepção Proposta Especificação Depreciação Obsoletismo Fase Descrição Concepção Quando a marca é concebida para uso em determinadas circunstâncias. Proposta A marca (ou tecnologia) é enviada para o W3C que irá verificar vantagens e viabilidade de implementação Especificação Ocorre quando uma marca (ou tecnologia) é aceita pelo W3C e faz parte da especificação de uma versão do HTML. Depreciação Quando uma marca (ou tecnologia) é trocada por outra melhor, mas deve ainda ser suportada pelos navegadores por questões de compatibilidade com versões de páginas anteriores. Obsoleta Quando uma marca (ou tecnologia) é considerada obsoleta de forma que não existe mais garantia de que a mesma será suportada por um navegador. Embora algumas marcas possam ser consideradas depreciadas, pois foram trocadas por outras tecnologias é comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, até que a comunidade absorva e utilize com regularidade a nova tecnologia. Prof. Carlos Majer Página 13

14 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 As definições sobre padrões Internet são efetuadas pelo W3C World Wide Web Consortium. As marcas básicas Cabeçalho Os cabeçalhos são definidos através das marcas <h1> representando a fonte maior, até <h6> para se definir a fonte menor. Exemplo:- <h1>cabeçalho do tipo h1</h1> <h2>cabeçalho do tipo h2</h2> <h3>cabeçalho do tipo h3</h3> <h4>cabeçalho do tipo h3</h4> <h5>cabeçalho do tipo h5</h5> <h6>cabeçalho do tipo h6</h6> Uma linha antes e após o cabeçalho é sempre inserido pelo HTML. Prof. Carlos Majer Página 14

15 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Parágrafos Os parágrafos são definidos através da marca <p>. Exemplo:- <p>eu sou um parágrafo</p> <p>eu sou outro parágrafo</p> Uma linha antes e após o cabeçalho é sempre criada na utilização do parágrafo. O navegador ignora o número de espaços repetidos ou pulos de linha manual de seu texto (ENTER) trocando estas ocorrências por um único espaço, ou seja, se numa posição do seu texto você tiver 10 espaços no texto, ou tenha teclado cinco vezes a tecla <ENTER>, somente será exibido um espaço no lugar Quebras de Linha Quebras de linha são definidas através de uma marca <br>. Ela deve ser utilizada quando se deseja inserir uma nova linha, levando o conteúdo para a próxima linha, sem iniciar um novo parágrafo. Exemplo:- <p>o conteúdo desta linha foi <br>quebrado para a linha <br>de baixo</p> Podemos dizer que atualmente, não sabemos em que dispositivo um site pode ser aberto. Pode ser um computador, Palmtop ou SmartPhone. Querer forçar um layout através do uso de parágrafos, espaços e quebra de linhas pode não gerar o resultado esperado. É o navegador quem verifica o tamanho da resolução de vídeo e adapta o conteúdo a ser exibido, ajustando o texto e demais elementos conforme o tamanho da janela. A configuração dos navegadores e a configuração do vídeo do usuário fazem com que seja muito difícil um site ser exibido exatamente igual em dois navegadores diferentes. Comentários Comentários podem ser inseridos no HTML através do uso das marcas <!-- conteúdo do comentário --> Exemplo:- <!-- Eu sou um comentário --> Prof. Carlos Majer Página 15

16 Trabalhando com texto Utilizar texto dentro de uma página HTML é bem simples. É digitar o texto abaixo da marca body e o mesmo aparece no navegador, quando a página é carregada. Verificamos também que podemos inserir um trecho de texto dentro de um parágrafo (marca <p>), como um cabeçalho (marcas <h1> a <h6>) e até forçar a quebra de linha (marca <br>). O ideal é que o desenvolvedor, ao criar uma página HTML estruture seu conteúdo, identificando os cabeçalhos, parágrafos, tabelas e outros tipos de informação, objetivando acomodar de maneira adequada o conteúdo a ser exibido. O HTML disponibiliza ao desenvolvedor um conjunto de marcas que possibilitam estilizar determinados trechos de textos. A marca PRE Esta marca faz com que o texto contido na mesma seja exibido de forma exata como digitado. Isto pode ser muito útil quando queremos preservar a formatação de um trecho de texto. Exemplo:- <body> <p> A função abaixo foi desenvolvida em Javascript. Ela solicita um nome ao usuário e verifica se algo foi informado</p> <pre> function PegaNome() { var lret=true var nome='' while(nome=='' (nome==null)) { nome=prompt('favor informar seu nome:','') if ((nome=='') (nome==null)) { alert('nome em branco \ncampo Obrigatório!!') lret=false } } return lret } </pre> </body> Resultado:- Prof. Carlos Majer Página 16

17 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Marcas de estilização de texto mais utilizadas Marca Descrição small Diminui a fonte do texto big Aumenta a fonte do texto em Enfatiza um texto. * Equivalente à marca <i> strong Enfatiza um texto com maior intensidade (Negrito). * Equivalente à marca <b> sub Exibe o texto em formato subescrito sup Exibe o texto formato superescrito ins Utilizado para marcar um trecho de texto que foi inserido numa nova versão de um documento del Utilizado para marcar um trecho de texto que foi eliminado de uma versão anterior de um documento * Equivalente às marcas <strike> e <s> Exemplos:- <body> Texto Normal,<small>Texto Menor</small>,<em>Texto Enfatizado</em> <br> <strong>texto em Negrito</strong> </strong>, <sub>texto Subescrito</sub>, <sup>texto Superescrito</sup><br> <ins>texto Inserido numa nova versão de documento</ins>,<del>texto eliminado na nova versão do documento</del> </body> Resultado:- Prof. Carlos Majer Página 17

18 Acostume-se a digitar as marcas em letra minúscula, que é uma das regras do padrão XHTML, explicado adiante Entidades : Caracteres Especiais Muitas vezes queremos inserir um caractere específico na página HTML. Como por exemplo, o caractere de sinal de menor. Ocorre que certos caracteres (como neste caso) têm significado e uso específico (reservado) pelo HTML. No caso do sinal de menor ( < ), este caractere é utilizado para definir o início de uma marca. Se você inserir um sinal de menor, o navegador vai entender que você está informando uma marca. Neste caso, como você iria exibir na tela o texto abaixo?... caso x < 5, então... Para que possamos trabalhar com alguns caracteres especiais (como no exemplo acima), trechos de textos especiais como entidades foram criados para serem utilizados no lugar do caractere (reservado) desejado. Tabela de Entidades mais comuns Caractere Uso Exemplo Caractere Uso Espaço Menor que < < < Ã Ã Maior que > > > õ õ E comercial & & & Õ Õ Aspas duplas " ç ç Aspas simples ' Ç Ç Centavo á á Libra Á Á Yen é é Parágrafo de documento É É Copyright í í Marca Registrada Í Í Multiplicação ó ó Divisão Ó Ó Mais e Menos ± ± ú ú Graus Ú Ú Ã ã À À Pode até ocorrer de algum navegador exibir o caractere especial inserido na página, mas isto não é garantia de que esta página será exibida em todos os navegadores de forma correta. Estilizando cores, fontes e tamanhos Para estilizar cores, tamanhos e famílias de fontes em trechos de texto, o HTML disponibiliza a marca <font>. Esta marca funciona com os seguintes atributos:- A palavra <font color="blue">céu</font> está em cor azul. Prof. Carlos Majer Página 18

19 O desenvolvedor pode selecionar uma cor pelo seu nome em inglês conforme a tabela de cores (mencionado mais para a frente neste documento) RGB (mistura das cores Red vermelho, Green Verde e Blue Azul) reconhecida pelos navegadores, conforme regras do W3C. Copie e cole o exemplo abaixo para verificar no seu navegador:- <html> <head> <title>algumas variações do azul - HTML</title> </head> <body> <table> <td>azul - Navy</td> <td width="60" bgcolor="navy"> </td> <td>azul - Acqua</td> <td bgcolor="acqua"> </td> <td>azul - código #0000FF</td> <td bgcolor="#0000ff"> </td> <td>azul - código #112D77</td> <td bgcolor="#112d77"> </td> <td>azul - código #6141FA</td> <td bgcolor="#6141fa"> </td> </table> </body> </html> Resultado:- Prof. Carlos Majer Página 19

20 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 Tabela de Cores RGB <html> <head> <title>tabela de Cores</title> </head> <body> <table border="1" bordercolor="#cccccc"> <th> Nome </th> <th> Número RGB </th> <th> Exemplo </th> <td> White </td> <td>>#ffffff </td> <td bgcolor="#ffffff " width="20"> </td> <td> Black </td> <td>># </td> <td bgcolor="# " width="20"> </td> <td> Gray </td> <td>># </td> <td bgcolor="#808080" width="20"> </td> <td> Silver </td> <td>>#cococo</td> <td bgcolor="#cococo" " width="20"> </td> <td> Red </td> <td>>#ff0000</td> Prof. Carlos Majer Página 20

21 <td bgcolor="#ff0000" width="20"> </td> <td> Purple </td> <td>>#800080</td> <td bgcolor="#800080" width="20"> </td> <td> Fuchsia </td> <td>>#ff00ff</td> <td bgcolor="#800080" width="20"> </td> <td> Pink </td> <td>>#ffc0cb</td> <td bgcolor="#ffc0cb" width="20"> </td> <td> Maroon </td> <td>>#800000</td> <td bgcolor="#800000" width="20"> </td> <td> Green </td> <td>>#008000</td> <td bgcolor="#008000" width="20"> </td> <td> Olive </td> <td>>#808000</td> <td bgcolor="#808000" width="20"> </td> <td> Lime </td> <td>>#00ff00</td> <td bgcolor="#00ff00" width="20"> </td> <td> Teal </td> <td>>#008080</td> <td bgcolor="#008080" width="20"> </td> <td> Yellow </td> <td>>#ffff00</td> <td bgcolor="#ffff00" width="20"> </td> <td> Blue </td> Prof. Carlos Majer Página 21

22 <td>>#0000ff</td> <td bgcolor="#0000ff" width="20"> </td> <td> Navy </td> <td>>#000080</td> <td bgcolor="#000080" width="20"> </td> <td> Acqua </td> <td>>#00ffff</td> <td bgcolor="#00ffff" width="20"> </td> </table> </body> </html> Resultado:- Quanto ao tamanho, o desenvolvedor tem a sua disposição a propriedade size, da marca <FONT>. Os valores (tamanhos) variam de 1 a 7. Exemplo:- <html> Prof. Carlos Majer Página 22

23 <head> <title>propriedade SIZE da marca FONT </title> </head> <body> <font size="1">tamanho 1, </font> <font size="2">tamanho 2, </font> <font size="3">tamanho 3, </font> <font size="4">tamanho 4, </font> <font size="5">tamanho 5, </font> <font size="6">tamanho 6, </font> <font size="7">tamanho 7, </font> </body> </html> Resultado:- Diversas famílias de fontes são disponibilizadas. Quando uma página tenta utilizar uma da lista, e o navegador não a encontra no micro do cliente, ele tenta a segunda da lista e em caso de problemas, ele tenta em seguida a terceira. <html> <head> <title>propriedade SIZE da marca FONT </title> </head> <body> <font face =" Arial, Helvetica, sans-serif "> Família Arial, Helvetica, Sans-serif </font> <br> <font face =" Times New Roman, Times, serif"> Família Times New Roman, Times, serif </font> <br> <font face =" Courier New, Courier, mono"> Família Courier New, Courier, mono </font> <br> <font face =" Georgia, Times New Roman, Times, serif"> Família Georgia, Times New Roman, Times, serif </font> <br> <font face =" Verdana, Arial, Helvetica, sans-serif"> Família Verdana, Arial, Helvetica, sans-serif</font> <br> <font face =" Geneva, Arial, Helvetica, sans-serif"> Família Geneva, Arial, Helvetica, sans-serif</font> </body> </html> Resultado:- Prof. Carlos Majer Página 23

24 Imagens Formatos de imagem mais utilizados na Internet Existem diversos tipos de imagens que em geral podemos identificá-las conforme sua extensão:- JPG Joint Photograph Experts Group É um dos padrões de imagem mais utilizados atualmente na Internet. Este formato que tem seu tamanho real reduzido (número de bytes) em função de uso de um algoritmo de compressão de dados que pode alterar a qualidade da imagem. Isto quer dizer que o usuário pode escolher o nível de compressão deseja aplicar. Quanto mais comprimido, menos qualidade se tem. GIF Graphics Interchange Format Padrão de imagem com menor qualidade (limite de 256 cores) que implementa algoritmo de compressão de dados e entrelaçamento (permite a carga parcial para rápida visualização da imagem). Uma de suas interessantes características é o fato de se poder armazenar num único arquivo diversas imagens que ao serem trocadas seqüencialmente criam a sensação de uma animação. PNG Portable Network Graphics Padrão de imagem que trabalha com 24 bits permitindo grande número de cores. Este tipo de imagem trabalha com transparência. Isto quer dizer que uma imagem não precisa ser exatamente quadrada de forma que ao aplicarmos sobre um fundo digamos escuro, não aparece o fundo (Exemplo:quadrado branco ao redor da imagem) que em geral surge quando utilizado certos tipos de imagem. Inserindo imagens na página A inserção da imagem numa página HTML nada mais é do que uma marca que informa onde a imagem pode ser encontrada. Uma imagem pode estar:- Na mesma pasta (diretório) da página que está tentando exibi-la Numa pasta diferente da página que está tentando exibi-la Num outro endereço/servidor web Para exemplificar estas situações iremos utilizar as duas imagens abaixo:- Simbolo2000.jpg Alce.jpg Imagem existente na mesma pasta da página web Vamos agora imaginar que temos os seguintes arquivos numa mesma pasta:- Disney.htm: Página que você está desenvolvendo. Simbolo2000.jpg: Imagem do símbolo das festas do ano 2000, que você quer exibir na página Disney.htm. Você poderá carregar a imagem Simbolo2000.jpg, na página Disney.htm através do uso da marca <img> da seguinte forma:- <img src =" Simbolo2000.jpg"> Prof. Carlos Majer Página 24

25 Isto é o suficiente para exibir esta imagem na página, considerando que ambos os arquivos (da imagem e da página) estão na mesma pasta. Lembre-se de que o Firefox se importa com a caixa (letras maiúsculas e minúsculas) dos nomes de arquivos. Isto quer dizer que se o arquivo foi salvo com tudo em maiúsculo (Exemplo: SIMBOLO2000.JPG), e inserido na página como no exemplo acima, o Firefox não conseguirá localizar este arquivo. Para que ele funcione, você terá que informar na página o nome do arquivo exatamente como foi gravado no diretório, letra por letra. Imagem existente em subpasta (dentro da pasta do projeto) Vamos imaginar agora outra situação: Na medida em que você vai criando novas páginas e gerando novas imagens, você percebe que existem muitos arquivos na mesma pasta, o que está lhe dificultando a tarefa de gerenciar estes arquivos. Algo que é comum a se fazer neste caso é separar as páginas web (arquivos HTML) numa pasta e as imagens em outra pasta. Exemplo:- Podemos verificar no exemplo acima que foi criada uma pasta de nome Projetos. Dentro dela, foi criada uma pasta de nome Disney que é onde iremos inserir/criar as páginas web (HTML). Dentro desta última foi criada outra pasta de nome imagens, que é onde serão inseridas todas as imagens do Projeto Disney. Para que isto funcione, precisaremos então ajustar a marca que carrega a imagem, para considerar a mudança de pasta:- <img src =" imagens/simbolo2000.jpg"> Note que como a pasta imagens está dentro da pasta corrente/atual, precisamos apenas informar seu nome e uma barra para separar o nome do arquivo de imagem. Imagem existente em diretório anterior ao do projeto Vamos imaginar uma situação onde as imagens precisam estar disponíveis para diversos projetos. Podemos viabilizar esta situação criando uma pasta imagens no mesmo nível das pastas dos projetos. Exemplo:- No exemplo acima podemos verificar a existência de dois projetos (Canadá e Disney). Ao criarmos a pasta imagens no mesmo nível destes projetos, podemos utilizar os arquivos (as imagens) desta pasta em qualquer um dos projetos. Isto quer dizer que todas as imagens ficariam numa única pasta e seriam acessíveis por qualquer página (de qualquer projeto). Vamos ajustar nossa página Disney.htm para ver como fica? <img src ="../imagens/simbolo2000.jpg"> Antes de começar a explicar, para quem não conhece o funcionamento do sistema de pastas e diretórios, utilizamos barras para separar a informação de caminho quando navegar por diversas pastas. Prof. Carlos Majer Página 25

26 O exemplo abaixo significa que o arquivo carro.jpg está contido na pasta atual, dentro da subpasta imagens:- <img src =" imagens/carro.jpg"> Voltando à nossa explicação, podemos verificar que o caminho a ser percorrido para encontrar a imagem desejada é:- "../imagens/simbolo2000.jpg" Utilizamos dois pontos (..) para voltar ao diretório anterior, e em seguida entramos na pasta imagens para em seguida poder acessar o arquivo desejado. Utilizando este mesmo exemplo para criação de uma página Canadá, que precise carregar a imagem Alce.jpg, podemos ter a seguinte página:- "../imagens/alce.jpg" Note a semelhança para o acesso das imagens existentes na mesma pasta. Utilizando imagens existentes em outro site Vamos dizer que você visitou um site e gostou de uma imagem e decidiu utilizá-la temporariamente na sua página, mas não quer armazenar a imagem (o arquivo) em sei site. Vamos supor que este site se chame e a imagem esteja numa pasta chamada cidades e seu arquivo (imagem) seja NY.png. Para você utilizar esta imagem em seu site, o comando abaixo deverá ser utilizado (em sua página):- <img src =" Você pode referenciar qualquer imagem em seu site, isto é, fazer uma referencia a uma imagem que exista em outro servidor/endereço web Você precisa informar a URL completa. (Não sabe o que é isto? Volte ao começo desta apostila) Você corre o risco da imagem sumir, de uma hora para outra, caso o administrador do site onde a imagem se encontra decida removê-la Links Os links (ligações) ou âncoras são elementos (trechos de texto, imagens, etc) utilizados para ligação/conexão com outros elementos que podem estar na mesma página ou em outras páginas (de outros sites). Estes elementos podem ser de diversos tipos (página web, imagens, vídeos, etc) na Internet. Hipertexto denota um link baseado em texto enquanto que Hiperlink significa qualquer tipo de link. Hipermídia significa qualquer tipo de mídia (áudio, vídeo, texto, gráficos, etc) que tenha um link ativado. Um link é executado ao ser clicado. Percebe-se a existência de um link quando ao posicionar-se sobre o link, o desenho do cursor muda para uma mão. Em alguns casos, em se tratando de links baseados em texto, o estilo do texto fica sublinhado e numa cor diferente do resto do texto. Prof. Carlos Majer Página 26

27 A sintaxe para criação de um link é:- <a href =" url "> Conteúdo a ser mostrado na página </a> Onde a letra a significa âncora, que serve como um aviso de referência para algum local (interno ou externo), e em seguida temos o código href que é um atributo que identifica a URL destino a ser referenciada. Onde se lê url, no comando acima, troque pelo endereço completo da página a ser referenciada. Isto quer dizer que basicamente encapsulamos o conteúdo a ser exibido dentro das marcas <a href...> e </a>. Exemplo de criação de um link:- Clique <a href =" /"> aqui </a> para entrar no Site da Unicid. Sempre insira o conteúdo de um atributo dentro de aspas duplas. Como será verificada posteriormente, esta é uma das regras do padrão XHTML Os links podem ser de dois tipos: Links internos e links externos. Criando Links Internos Um link interno ocorre quando criamos um link para uma informação existente na mesma página. Vamos imaginar que temos um livro, em formato HTML (em páginas web). Numa destas páginas temos uma referência a uma informação que se encontra detalhada no final da página. Podemos inserir um link nesta referência de modo que ao ser clicado, a parte da página que descreve esta referencia é exibida. No exemplo abaixo, temos um link no trecho de texto 4 Descrição de Caso de Uso :- Prof. Carlos Majer Página 27

28 INTRODUÇÃO AO DESENVOLVIMENTO WEB VERSÃO 3.1 O link 4 Descrição de Caso de Uso, ao ser clicado, desce a página até localizar e exibir a informação linkada. Criando links / âncoras para elementos dentro do mesmo documento. Um link para um elemento dentro da mesma página é criado em duas partes:- Prof. Carlos Majer Página 28

29 O primeiro passo é criar uma âncora identificada para um determinado local, que nada mais é do que o local que queremos que seja exibido quando o usuário clicar no link. Exemplo:- <a name ="dados_cliente"> Dados do Cliente </a> Neste exemplo, utilizamos a marca a (âncora) com o atributo name identificando uma determinada área (neste caso, uma região de texto) pelo nome de dados_cliente. Isto é o que chamamos por âncora identificada. O segundo passo é colocar um link para esta área, na mesma página. Exemplo:- Consulte os <a href ="#dados_cliente"> Dados do Cliente </a> para saber mais a respeito. Âncoras identificadas são geralmente utilizadas para se criar um Índice no início ou final de um documento. Exemplo de utilização de âncora identificada. <!-- Abaixo criamos uma âncora para a marca de cabeçalho HTML --> <a name ="inicio"> <h1>introdução</h1></a> <p> De acordo com as regras do W3C World Wi...</p> <!-- Colocamos agora diversas linhas de conteúdo (textos, gráficos, etc) --> <p>os <strong>padrões de desenvolvimento web<strong> devem </p> <!-- No final do texto, inserimos um link p/a âncora do início do texto --> Clique <a href ="#inicio"> aqui </a> para voltar ao topo de página. Criando Links Externos A criação de links externos funciona referenciando-se a URL completa que se deseja ligar. No exemplo abaixo, temos um trecho de texto que é um link para o site da Unicid (que será aberto na janela aberta, do navegador):- <a href =" /"> Unicid </a> No exemplo abaixo, temos um trecho que é um link o IP do UOL (em fevereiro de 2009), abrindo a página índex.html:- <a href =" UOL </a> Prof. Carlos Majer Página 29

30 Inserindo um link numa imagem Vamos imaginar que desejamos inserir uma imagem em nossa página (brubovnik.jpg) e criar um link, nesta imagem, para o site da cidade de Dubrovnik (http://www.dubrovnik-online.com/) Exibir uma imagem na página HTML é um comando relativamente simples. Neste caso, seria algo assim:- <img src =" imagens/dubrovnik.jpg"> Neste exemplo assumo que o arquivo da imagem dubrovnik.jpg encontra-se na pasta imagens, existente no mesmo nível da página web editada. O próximo passo é encapsular o comando acima (abaixo em cinza) dentro de um link para o site da cidade de Dubrovnik: <a href =" <img src =" imagens/dubrovnik.jpg"> </a> O conteúdo em cinza acima, representa a imagem a ser exibida. Note que ela está encapsulada pelo comando que faz dela um link: <a href=...> e </a>. Inserindo um link numa imagem externa Uma imagem externa nada mais é do que um arquivo (de imagem) que se encontra num endereço web (URL). Isto nós já vimos como se faz, mas vamos fazer uma recapitulação. Vamos imaginar que a imagem abaixo esteja no site numa pasta chamada imagens e seu nome de arquivo seja familia.png. Você deseja inserir esta imagem em seu blog (na sua página de blog), mas devido a restrições deste site de blogs, a única coisa que você consegue fazer nele é inserir textos. Como já visto anteriormente, você pode fazer uma referência (exibir na sua página) a uma imagem existente em outros sites. Neste caso, o comando HTML da sua página (de blog) para exibir esta imagem seria:- <img src =" E pronto! A imagem aparece na sua página, como se ela estivesse no seu site. Só que você gostaria que, caso o usuário clicasse nesta imagem, o site acima fosse carregado. Para isto, devemos encapsular o comando/marca acima dentro de um link. Vamos lá? <a href ="http://www.site.com.br/"> Prof. Carlos Majer Página 30

31 <img src ="http://www.site.com.br/imagens/familia.png"> </a> Pronto! Agora temos em nossa página uma referência à imagem que existe em outro site e a mesma é um link para o site desejado. Abrindo o link numa outra página Quando o usuário clica no link existente na página, este link será aberto na própria página. Ocorre que as vezes queremos que este link seja aberto numa nova página. Para isto, podemos utilizar o atributo _target, informando o valor _blank para definir onde o documento apontado pelo link será aberto. No exemplo abaixo, uma nova janela será aberta pelo navegador:- <a href ="http://www.cidadesp.edu.br/" target="_blank">unicid</a> Os outros valores para target são:- _self: Abre o link na mesma página (padrão) _parent: Abre o link na página pai (veja frameset) _top: Abre o link na página inicial (veja frameset) Tabelas O HTML possibilita a utilização de tabelas, internamente divididas em linhas e células. Tabelas são criadas através das marcas <table>..</table>, sendo dividida em linhas através da marca... As linhas são divididas internamente em células de dados através da marca <td>..</td> ou células de cabeçalho, através da marca <th>..</th>. Dentro da célula inserimos o conteúdo desejado (textos, imagens, listas, formulários, etc.). Quando não for especificado, o atributo border da tabela é assumido com o valor zero (0), ou seja, a tabela não conterá bordas. Exemplo de uma tabela sem borda:- <table> </table> <td>linha 1, Célula 1</td> <td>linha 1, Célula 2</td> <td>linha 2, Célula 1</td> <td>linha 2, Célula 2</td> Prof. Carlos Majer Página 31

32 Note que ao não utilizar-se borda numa tabela (exemplo acima), não se percebe a separação entre o conteúdo das diversas células. Tamanho das células numa tabela Usualmente, utilizamos uma única célula para inserção de conteúdo. Entretanto, existem alguns casos onde o conteúdo de uma célula pode ocupar mais do que uma linha ou coluna. Para estes casos, o HTML disponibiliza os seguintes atributos:- Rowspan: Possibilita informar à tabela qual o número de linhas que uma célula irá ocupar. No exemplo, definimos que a primeira célula irá ocupar três linhas:- Resultado:- <table border="1"> <th rowspan="3">professores</th> <th>projeto de Interfaces</th> <th>sistemas</th> <td>carlos</td> <td>tatiana</td> <td>fernando</td> <td>jadir</td> </table> Colspan:- Este atributo informa ao navegador o número de colunas que uma célula irá ocupar. Observe que no exemplo abaixo, informamos que as células de cabeçalho irão ocupar 2 colunas, cada uma:- <table border="1"> <th colspan="2">projeto de Interfaces</th> <th colspan="2">sistemas</th> Prof. Carlos Majer Página 32

33 </table> <td>carlos</td> <td>tatiana</td> <td>fernando</td> <td>jadir</td> Resultado:- Bordas Para inserir uma borda numa tabela, utilizamos o atributo border, especificando a espessura da borda desejada. Se mudarmos a marca de criação da tabela acima, configurando-a para exibir a borda, teremos uma tabela com o seguinte layout:- <table border="1"> Ao aumentarmos o tamanho da borda, temos alguns efeitos visuais interessantes:- <table border="5"> <table border="25"> Determinando a cor das bordas Podemos determinar a cor da borda utilizando o atributo bordercolor. Exemplo:- <table border="3" border-color="blue"> Prof. Carlos Majer Página 33

34 Alguns efeitos interessantes podem ser conseguidos com isto:- <table border="25" border-color="green"> Inserindo título / legenda numa tabela O desenvolvedor pode inserir uma legenda, que irá acompanhar o layout da tabela. Para isto, ele utiliza-se da marca <caption>,logo após abrir a marca <table>. Exemplo:- <caption> Legenda/titulo da Tabela </caption> A legenda será posicionada sobre a tabela, isto é, antes da tabela ser exibida. Cabeçalhos na tabela Células de cabeçalho na tabela são definidas através da marca <th> <table border="1"> <th> Cabeçalho </th> <th> Cabeçalho 2</th> <td> Linha 1, Célula 1</td> <td> Linha 1, Célula 2</td> <td> Linha 2, Célula 1</td> <td> Linha 2, Célula 2</td> </table> Prof. Carlos Majer Página 34

35 Os cabeçalhos são centralizados na célula e em negrito. Cores nas Tabelas Tabelas podem ter suas linhas (e consequentemente suas células) configuradas para a utilização de determinadas cores de fundo. Exemplo:- <table border="1"> <tr bgcolor="yellow"> <th> Marca </th> <th> Uso </th> <td> <h1> a <h6></td> <td> Marcas de Início de Cabeçalho</td> <tr bgcolor="cyan"> <td><p></td> <td> Marca de início de parágrafo </td> <td> <table> </td> <td> Marcas de Início de Tabela</td> <tr bgcolor="cyan"> <td><tr></td> <td> Table Row Inicia uma linha numa tabela</td> <td> <td> </td> <td> Table Data Inicia uma coluna numa tabela</td> </table> Prof. Carlos Majer Página 35

36 A aplicação do atributo bgcolor pode ser feito em diversos elementos da tabela, dentre eles, nas marcas table, tr, th e td. O desenvolvedor pode modificar a cor de fundo de apenas uma célula (marca <td> ou <th>) de uma tabela, se assim o desejar. <table border="1"> <th> Aluno </th> <th> Resultado </th> <td> João </td> <td> Aprovado </td> <td> Joé </td> <td bgcolor="red"> Reprovado </td> <td> Marina </td> <td> Aprovada </td> </table> Além dos nomes de algumas cores, o navegador está preparado para reconhecer um código de cor no formato RGB (Red-Green-Blue) que é uma cor baseada na mistura das cores vermelha, verde e azul, conforme uma intensidade que varia de 0 a 255. O desenvolvedor deve utilizar o caractere # seguido por seis números, onde cada dois números representa a intensidade de cada cor (RGB). Prof. Carlos Majer Página 36

37 Trocando a cor de fundo = red, do exemplo acima, pela cor #FD9886, temos o seguinte resultado:- <td bgcolor="#fd9886"> Reprovado </td> Trabalhando o Layout das tabelas Distanciamento das bordas Em geral, o conteúdo da célula fica encostado às suas bordas. O atributo cellpadding da tabela, nos permite determinar uma distäncia a ser aplicada, entre o conteúdo e as bordas das células. <table border="1" cellpadding="20"> <tr bgcolor="#999999"> <th> Marca </th> <th> Carro </th> <td> Wolkswagen </td> <td> Fox, Gol, Polo </td> <td> Fiat </td> <td> Palio, Siena, Marea </td> <caption> Modelos de carros mais vendidos por fabricante</caption> </table> Resultado:- Prof. Carlos Majer Página 37

38 No código acima, informamos um espaço entre o conteúdo e as bordas de vinte pixels. Distanciamento entre as células De forma similar, podemos distanciar uma célula da outra através da utilização do atributo cellspacing, na tabela. Alterando a linha de criação da tabela, no exemplo acima, temos o seguinte:- Resultado:- <table border="1" cellspacing ="20"> No caso acima, verificamos um distanciamento de 15 pixels entre uma célula e outra. Caso juntemos ambas as opções temos o seguinte resultado:- Prof. Carlos Majer Página 38

39 <table border="1" cellspacing ="15" cellpadding="20"> Alinhamento O conteúdo das células de uma tabela pode ser alinhado. As opções existentes são de alinhamento horizontal (em sua largura) ou de alinhamento vertical (em sua altura). Alinhamento Horizontal Este tipo de alinhamento pode ser à esquerda (normal), centralizado, à direita ou justificado. O atributo que define o alinhamento é o align e as opções são:- left Exemplo: <th align="left"> center Exemplo: <th align="center"> right Exemplo: <td align="right"> justify Exemplo: <td align="justify "> A tabela abaixo tem as colunas alinhadas da seguinte forma:- Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>) Nome: Alinhada naturalmente à esquerda Salário: Alinhada à direita Cargo: Centralizada Descrição: Centralizado Exemplo de tabela com os quarto alinhamentos:- Prof. Carlos Majer Página 39

40 Código da tabela exemplo:- <table border="1" cellpadding="20"> <th width ="100"> Nome</th> <th width ="100"> Salário </th> <th width ="140"> Cargo </th> <th> Descrição</th> <td> Claudia</td> <td align ="right"> R$ 2.750,00</td> <td align ="center"> Gerente de RH </td> <td width ="310" align ="justify"> Responsável pelo Departamento Pessoal, Plano de Cargos e Salários, Treinamento e Qualificação Pessoal.</td> <td> Marcos </td> <td align ="right"> R$ 3.280,00</td> <td align ="center"> Gerente Comercial </td> <td width ="310" align ="justify"> Responsável pelos contatos com clientes, levantamento de pedidos, fechamento de vendas e faturamento da empresa.</td> <td> Roberto</td> <td align ="right"> R$ 7.970,00</td> <td align ="center"> Diretor Financeiro</td> <td width ="310" align ="justify"> Responsável pelo controle e planejamento financeiro da empresa dentre eles: Caixa, Tesouraria, Previsão Orçamentária e Controle Bancário.</td> </table> Prof. Carlos Majer Página 40

41 Alinhamento Vertical Este tipo de alinhamento pode feito com base no topo (alto), no meio (padrão), no fundo (embaixo) ou na linha base da célula. Como dificilmente se utiliza a linha base, não irei explicar este atributo. O atributo que define o alinhamento é o align e as opções são:- top Exemplo: <th valign="top"> middle Exemplo: <th valign="middle "> bottom Exemplo: <td valign="bottom"> A tabela abaixo tem as colunas alinhadas da seguinte forma:- Colunas de Cabeçalhos: Todas centralizadas e em Negrito (padrão da marca <th>) Top: Alinhada no topo middle: Alinhada no meio Bottom: Alinha no fundo Note também que para se visualizar o alinhamento vertical, defini a altura (height) da célula com 50 pixels. Código da tabela exemplo:- <table border="2"> <th> Topo </th> <th> Meio </th> <th> Fundo </th> <td valign="top" height="50"> Conteúdo </td> <td valign="middle" height="50"> Conteúdo </td> <td valign="bottom" height="50"> Conteúdo </td> </table> Agrupando elementos de tabelas As marcas <thead>, <tfoot>e <tbody> podem ser opcionalmente usadas na estruturação de uma tabela. Elas possibilitam definir o cabeçalho, rodapé e corpo de dados das tabelas. No exemplo abaixo definimos os itens de cabeçalho e rodapé antes do grupo de dados (tbody) da tabela. No momento da exibição da tabela no navegador, a mesma será exibida conforme sua estrutura de cabeçalho, dados e rodapé. Exemplo:- <table border="1"> <caption> Sua nota</caption> Prof. Carlos Majer Página 41

42 </table> <tbody> </tbody> <thead> </thead> <tfoot> </tfoot> <th>1</th> <td>avaliação Presencial</td> <td align="center">8</td> <td align="center">6</td> <th>2</th> <td> Avaliação Continuada</td> <td align="center">2</td> <td align="center">1,5</td> <th>3</th> <td> Comparecimento </td> <td align="center">75%</td> <td align="center">80%</td> <th>item</th> <th>elemento Avaliado</th> <th>nota Máxima</th> <th>nota Obtida</th> <th align ="right" colspan="3">resultado:</th> <td>aprovado</td> Prof. Carlos Majer Página 42

43 Listas O HTML permite a criação de listas ordenadas e não ordenadas. Listas ordenadas caracteriza-se por uma relação de elementos, geralmente de mesmo tipo ou natureza, que são dispostos numa determinada ordem e numerados (quando o caso) automaticamente pelo navegador. Criando Listas Ordenadas A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas <ol> e em seguida pela criação dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li>, bem como a lista </ol>. OL = Ordered List, LI = List Item As listas inserem uma linha em branco antes e depois de seu comando de criação Para inserir itens encadeados, isto é, como se fossem subitens da lista, deve-se criar uma nova lista, que pode ser ordenada ou não. Exemplo:- <strong>frutas Tropicais</strong> <ol> <li>banana</li> <ol> <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> </ol> FIM Resultado:- Atributos de Tipos de Estilo de Listas Numeradas A configuração de uma lista numerada é ser marcada por números. O Atributo TYPE permite definir o estilo numérico de seus itens. Os atributos possíveis são:- Prof. Carlos Majer Página 43

44 Atributo Estilo A Letras do Alfabeto em Maiúsculo A Letras do Alfabeto em Minúsculo I Números Romanos em Maiúsculo i Números Romanos em Minúsculo 1 Lista em ordem numérica (padrão) Também é possível misturar os tipos. Exemplo:- <strong>frutas Tropicais</strong> <ol type="a" > <li>banana</li> <ol type="i" > <li>nanica</li> <li>maça</li> </ol> <li>laranja</li> <li>abacaxi</li> </ol> FIM Criando Listas Não Ordenadas A criação de listas ordenadas se dá pela marca de abertura de listas ordenadas <ul> e em seguida pela criação dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li>. No final, a lista também deve ser fechada pela marca </ul>. UL = Unordered List <strong>carros</strong> <ul> <li> Fiat </li> <li> Ford </li> <li> GM </li> <li> VW </li> </ul> FIM Prof. Carlos Majer Página 44

45 Resultado:- Atributos de Tipos de Estilo de Listas Não Numeradas Listas não numeradas são marcadas por um determinado desenho. O Atributo TYPE permite definir o estilo numérico de seus itens. Os atributos existentes são:- Atributo Estilo circle Circulo Aberto square Quadrado Fechado Disc Losango Fechado <strong> Carros Populares </strong> <ul> <li> Fiat </li> <ul type="circle" > <li> Uno Mille </li> </ul> <li> Ford </li> <ul type="disc" > <li> Ka </li> </ul> <li> GM </li> <ul type="square" > <li> Corsa</li> </ul> </ul> FIM <li> VW</li> <ul > <li> Gol</li> </ul> Resultado (no navegador Internet Explorer):- Prof. Carlos Majer Página 45

46 As marcas (ícones) que precedem os itens de uma lista não ordenada variam conforme o navegador Listas de Definição Diferentemente de listas de itens, as listas de definição disponibilizam uma forma de se explicar o que significam certos termos. Os itens contidos nas listas de definição não têm marcação (de números ou desenhos). A criação de listas ordenadas se dá pela marca de abertura de listas de definição <dl> e em seguida pela criação dos termos da lista pela marca <dt>, e em seguida a criação da área de explicação do termo, pela marca de descrição da definição <dd>. Exemplo:- <dl> <dt>ibm PC</dt> <dl> <dd><strong>personal Computer</strong>. Este termo ainda hoje é muito utilizado para designar os computadores pessoais que fizeram muito sucesso por conta da política de vendas implementada pela IBM no começo dos anos 80. </dd> <dt> AT</dt> <dd><strong> Advanced Technology </strong>. Este termo foi muito utilizado para designar os computadores da IBM, lançados após o PC (8086), com destaque o 80286, processador muito conhecido como 286. </dd> </dl> Resultado:- Dl = Definition List, dt = Definition Term, dd = Definition Data Prof. Carlos Majer Página 46

47 Frameset (Conjunto de Quadros) Frameset é utilizado quando se deseja trabalhar a tela do navegador (Internet Explorer, Firefox, Safári, etc) como um local separado por partes (áreas) independentes. Cada área pode também ser dividida em subáreas através da criação de novos framesets. Por final, dentro das áreas criadas temos o quadro (frame) que é quem contem de fato o conteúdo. No exemplo abaixo temos um conjunto de quadros (frameset) estruturado em cinco colunas, cada qual contendo apenas um quadro (frame) em seu interior:- Uma determinada área pode ser subdividida em outras áreas. No exemplo abaixo, o frameset (conjunto de quadros) está dividindo em três colunas. A primeira coluna tem apenas um quadro. A segunda coluna está subdividida em 2 linhas (novo conjunto de quadros). E a terceira coluna está subdividida em 3 linhas (novo conjunto de quadros). Cada linha representa um quadro (frame). Podemos notar com isso que um quadro (frame) é parecido como uma célula de uma tabela. No exemplo abaixo, iremos verificar como uma estrutura de quadros baseado em linhas. Prof. Carlos Majer Página 47

Introdução ao. Desenvolvimento WEB - HTML Versão 2.0 PÁGINA EM BRANCO

Introdução ao. Desenvolvimento WEB - HTML Versão 2.0 PÁGINA EM BRANCO 2011 INTRODUÇÃO AO DESENVOLVIMENTO WEB Introdução ao PÁGINA EM BRANCO Desenvolvimento WEB - Versão 2.0 Este documento aborda tópicos técnicos e conceituais utilizados na criação da página Web, através

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

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

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

Leia mais

Programação web Prof. Wladimir

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

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

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

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

Programação para Internet I

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

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

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

Leia mais

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

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

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

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

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

Leia mais

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

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

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

INTRODUÇÃO À PROGRAMAÇÃO Departamento de Informática INTRODUÇÃO À PROGRAMAÇÃO Apontamentos de (HyperText Markup Language) Prof. Carlos Pampulim Caldeira Évora, Março de 2003 ÍNDICE 1. O QUE É O?...1 1.1 INTRODUÇÃO...1 1.2 QUE

Leia mais

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

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

Leia mais

4. Características Gerais das Tabelas do HTML

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

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

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

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

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

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

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

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

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

Leia mais

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

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

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

André Kawamoto NE31A

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

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

PRnet/2013. Linguagem de Programação Web

PRnet/2013. Linguagem de Programação Web Linguagem de Programação Web Linguagem de Programação Web Prnet/2013 Linguagem de Programação Web» Programas navegadores» Tipos de URL» Protocolos: HTTP, TCP/IP» Hipertextos (páginas WEB)» HTML, XHTML»

Leia mais

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

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

Leia mais

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

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

Leia mais

Módulo 11 A Web e seus aplicativos

Módulo 11 A Web e seus aplicativos Módulo 11 A Web e seus aplicativos Até a década de 90, a internet era utilizada por acadêmicos, pesquisadores e estudantes universitários para a transferência de arquivos e o envio de correios eletrônicos.

Leia mais

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

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

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

Leia mais

Introdução à Informática

Introdução à Informática Introdução à Informática Aula 23 http://www.ic.uff.br/~bianca/introinfo/ Aula 23-07/12/2007 1 Histórico da Internet Início dos anos 60 Um professor do MIT (J.C.R. Licklider) propõe a idéia de uma Rede

Leia mais

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

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Programação e Designer para WEB

Programação e Designer para WEB Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação

Leia mais

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

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

INTERNET -- NAVEGAÇÃO

INTERNET -- NAVEGAÇÃO Página 1 INTRODUÇÃO Parte 1 O que é a Internet? A Internet é uma rede mundial de computadores, englobando redes menores distribuídas por vários países, estados e cidades. Ao contrário do que muitos pensam,

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9

Leia mais

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

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

Leia mais

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

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

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

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

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

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

Microsoft Internet Explorer. Browser/navegador/paginador

Microsoft Internet Explorer. Browser/navegador/paginador Microsoft Internet Explorer Browser/navegador/paginador Browser (Navegador) É um programa que habilita seus usuários a interagir com documentos HTML hospedados em um servidor web. São programas para navegar.

Leia mais

Como criar uma página WEB

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

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

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

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

Leia mais

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site Tecnologia Educacional na Formação Profissionalizante de Jovens Introdução a Tecnologia Web Jovens do Saber Digital Inclusão Sócio-Digital Fortaleza - Ceará, Brasil Sumário 1. O que é a Internet? 2. O

Leia mais

OFICINA BLOG DAS ESCOLAS

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

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais

Oficina de Software Livre.

Oficina de Software Livre. Professor: Igor Patrick Silva Contato: (38)88037610 E-Mail: igorsilva88037610@hotmail.com 1 Índice CAP. 1 O computador e seus componentes 2 CAP. 2 O que é software livre e o que é software proprietário

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

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

Leia mais

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA Sumário O que são leitores de Tela?... 1 O NVDA - Non Visual Desktop Access... 1 Procedimentos para Download e Instalação do NVDA... 2 Iniciando

Leia mais

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

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

Leia mais

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

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

Leia mais

MANUAL DO NVDA Novembro de 2013

MANUAL DO NVDA Novembro de 2013 MANUAL DO NVDA Novembro de 2013 PROJETO DE ACESSIBILIDADE VIRTUAL Núcleo IFRS Manual do NVDA Sumário O que são leitores de Tela?... 3 O NVDA - Non Visual Desktop Access... 3 Procedimentos para Download

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

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

Leia mais

SisLegis Sistema de Cadastro e Controle de Leis

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

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

Leia mais

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1 Dreamweaver DreamWeaver 1 Índice Introdução 1. Conhecendo a Área de Trabalho 1.1. Barra de Título 1.2. Barra de Menus 1.3. Guias 1.3.1 Guia "Common" 1.4. Barra de "Edição do Documento" 1.5. Painéis 1.6.

Leia mais

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

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

Leia mais

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

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Internet Internet é o conjunto de diversas redes de computadores que se comunicam entre si Internet não é sinônimo de WWW (World Wide

Leia mais

FTIN - Módulo de WebDesign. Prof. Iran Pontes

FTIN - Módulo de WebDesign. Prof. Iran Pontes FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

Apostila CSS - Introdução à folha de estilos

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

Leia mais

Princípios de Internet e Termos mais Utilizados. Internet

Princípios de Internet e Termos mais Utilizados. Internet Princípios de Internet e Termos mais Utilizados Internet A Comunicação é a melhor palavra para descrever a Internet. São serviços e facilidades que, para algumas pessoas, é o lugar onde elas encontram

Leia mais

Material desenvolvido por Melissa Lima da Fonseca. melissa.mlf@gmail.com.br - (031) 9401-4041. www.melissalima.com.br Página 1

Material desenvolvido por Melissa Lima da Fonseca. melissa.mlf@gmail.com.br - (031) 9401-4041. www.melissalima.com.br Página 1 EXCEL BÁSICO Material desenvolvido por Melissa Lima da Fonseca melissa.mlf@gmail.com.br - (031) 9401-4041 www.melissalima.com.br Página 1 Índice Introdução ao Excel... 3 Conceitos Básicos do Excel... 6

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais