Linguagens para WEB Tecnologia Cliente XHTML / CSS. Professora: Lucélia Oliveira

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Linguagens para WEB Tecnologia Cliente XHTML / CSS. Professora: Lucélia Oliveira"

Transcrição

1 Linguagens para WEB Tecnologia Cliente XHTML / CSS Professora: Lucélia Oliveira

2 Professora Lucélia Oliveira 2 Sumário APRESENTAÇÃO CONCEITOS HTML XHTML tags ELEMENTOS FUNDAMENTAIS As tags devem ser escritas com letras maiúsculas ou minúsculas? O que é necessário para construir um website? Como visualizar o website? Estrutura básica de um documento HTML W3C ELEMENTOS BÁSICOS Texto em movimento Listas Listas não ordenadas Listas ordenadas Listas Aninhadas Exercícios IMAGENS Sintaxe Passos para inserir uma imagem a partir da Internet Ajuste de imagens LINKS Links para um arquivo Links dentro da própria página Links para Imagens como Links Exercícios TABELAS Sintaxe: Exemplos de três tabelas em um mesmo documento: Inserindo elementos em uma tabela Mesclando linhas e colunas Exercícios FORMULÁRIOS...29 Exercícios FOLHAS DE ESTILO - CSS Funcionamento da CSS...33

3 Professora Lucélia Oliveira Onde inserir o código CSS Externo Interno ou Incorporado In-line ou Local...36 Exercícios CSS AGRUPANDO COM <span> AGRUPANDO COM <div>...38 Exercícios CONSTRUINDO UM LAYOUT BÁSICO BORDAS A espessura das bordas As cores das bordas Tipos de bordas RESUMO DOS ELEMENTOS E ATRIBUTOS BÁSICOS Elementos Comentários Atributos...45 GLOSSÁRIO...46

4 Professora Lucélia Oliveira 4 Lista de Figuras Figura 1- Estrutura básica de um documento HTML... 7 Figura 2- Código fonte da estrutura básica de um documento HTML... 8 Figura 3 - Conteúdo do elemento <title>... 8 Figura 4 Código-fonte com parágrafo... 8 Figura 5 - Página com parágrafo... 8 Figura 6 - Código-fonte para validação de HTML... 9 Figura 7 - Código-fonte para validação de Documento XHTML...10 Figura 8 - Código-fonte disponibilizado pelo W3C após validação...10 Figura 9 - Código fonte - listas não ordenadas...12 Figura 10 - Página - listas não ordenadas...12 Figura 11 - Código fonte - listas ordenadas...13 Figura 12 - Página - listas ordenadas...14 Figura 13 - Código fonte - listas aninhadas...15 Figura 14 - Página - listas aninhadas...15 Figura 15 - Código fonte - inserção de imagem...18 Figura 16 - Página - inserção de imagem...19 Figura 17 - Código fonte - Ajuste de imagem...19 Figura 18 - Página - ajuste de imagem...20 Figura 19 - Página - tabela...23 Figura 20 - Código fonte - tabela...23 Figura 21 - Página- várias tabelas em um mesmo documento...24 Figura 22 - Código fonte - várias tabelas em um mesmo documento...24 Figura 23 - Código fonte - inserção de outros elementos na tabela...25 Figura 24 - Página - inserção de outros elementos na tabela...26 Figura 25 - Código fonte - formulário...29 Figura 26 - Página - formulário...30 Figura 28 - Código-fonte - CSS Externa...34 Figura 27 - Funcionamento da CSS...34 Figura 29 - Código-fonte - CSS Externa Figura 30 - Código-fonte - CSS Incorporada...35 Figura 31 Código-fonte - CSS Incorporada Figura 32 - Código-fonte - CSS Local...36 Figura 33 - Página - Layout básico...40 Figura 34 - Código-fonte - Layout...40 Figura 36 - Espessuras de bordas...42 Figura 37 - Cores de bordas...42 Figura 35 - Código-fonte - HTML para o Layout...42 Figura 38 - Estilos de bordas...43

5 Professora Lucélia Oliveira 5 APRESENTAÇÃO Esta apostila tem o propósito de atender ao leitor iniciante na área de desenvolvimento para Web. Ela foi elaborada a partir da necessidade de um material objetivo, inteligente, de fácil leitura e que proporcione a todos os leitores um aprendizado tranqüilo. Inicialmente o leitor encontrará os conceitos básicos e a estrutura de criação de uma página básica, posteriormente essa estrutura será incrementada com novas possibilidades como listas, tabelas, links e formulários. Este material foi desenvolvido para atender às normas atuais de formatação por meio de Folhas de Estilo em Cascata CSS. Cada capítulo apresenta exercícios sobre o assunto abordado com a finalidade de melhorar a compreensão do tema estudado, além de demonstrar a aplicabilidade prática do conteúdo em questão. Bons Estudos! Lucélia Oliveira

6 Professora Lucélia Oliveira 6 1. CONCEITOS 1.1. HTML É a abreviatura de "HyperText Mark-up Language" Hyper é o oposto de linear. Nos tempos antigos, os programas de computadores rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. No HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha visitado o site MSN.com antes de visitar o site HTML.net. Text é texto e nada mais. Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor: seus cabeçalhos, marcadores, negrito, etc. Language significa linguagem e é exatamente o que HTML é: uma linguagem XHTML Extensible HyperText Mark-up Language - nada mais é do que uma maneira mais bem estruturada de escrever HTML tags São comandos que a linguagem HTML utiliza para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe uma barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Mas, como toda regra tem sua exceção, no HTML a exceção é que para algumas tags, a abertura e o fechamento se dá na mesma tag. Elas contêm comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um salto de linha é conseguido com a tag <br />. Exemplo: a tag <h1> informa ao navegador que se trata de um cabeçalho e todo o conteúdo que estiver entre <h1> e </h1> deve ser mostrado em tamanho maior, significando o nível de importância do texto. As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que se trata de um cabeçalho (h vem de "heading" - cabeçalho), sendo <h1> o cabeçalho de primeiro nível (maior) e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto. Exemplo 2: <h1>este é um título</h1> <h2>este é um sub título</h2>

7 Professora Lucélia Oliveira 7 2. ELEMENTOS FUNDAMENTAIS 2.1. As tags devem ser escritas com letras maiúsculas ou minúsculas? Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas. <COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever seus elementos (tags) com minúsculas O que é necessário para construir um website? Um navegador e Um bloco de notas (ou um editor de texto similar). HTML é simples e lógico. O navegador lê o HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer. A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag. Então, antes de qualquer coisa digite na primeira linha do documento. é um elemento de abertura e deve ser fechado com o elemento de fechamento, quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer-nos de fechar a tag HTML, faça isso agora mesmo, digitando </html> localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas e </html> Como visualizar o website? Antes de começar a criar as páginas, crie uma pasta em um lugar de fácil acesso, como, por exemplo, a área de trabalho, para salvar os arquivos que serão construídos. Salve cada arquivo com a extensão.htm ou.html. Para abri-lo, clique sobre ele e o navegador padrão de sua máquina mostrará o website resultante do código criado Estrutura básica de um documento HTML Um documento HTML é dividido em três partes básicas: a estrutura principal, o cabeçlho e o corpo de texto: Estrutura Principal Cabeçalho Corpo da página Figura 1- Estrutura básica de um documento HTML A estrutura básica de um documento HTML são as linhas de código obrigatórias para o bom funcionamento de uma página web.

8 Professora Lucélia Oliveira 8 Observe o seguinte código: <title>título da página</title> Aqui se insere os dados que deverão aparecer na página </body> </html> Figura 2- Código fonte da estrutura básica de um documento HTML Esses elementos aparecem apenas uma vez nos arquivos HTML, e são responsáveis por montar as partes da página. Importante: Para compreender melhor o significado de cada parte do código-fonte anterior, consulte o resumo de elementos no final da apostila. Texto escrito entre as tags <title></title> Figura 3 - Conteúdo do elemento <title> A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo. <title>minha primeira página web</title> <p>esta é a minha primeira página web</p> </body> </html> Figura 4 Código-fonte com parágrafo Salve o documento com o nome exemplo1.html O documento HTML acima gera uma página como mostrado a seguir: Clique sobre o arquivo exemplo1.html para visualizar o resultado Figura 5 - Página com parágrafo Nota: Coloque sempre o título do seu documento na seção head: <title>título da sua página</title>. O título <title> é muito importante porque é usado pelos mecanismos de busca (tais como o Google).

9 Professora Lucélia Oliveira 9 3. W3C O Consórcio World Wide Web (W3C) desenvolve tecnologias interoperáveis (especificações, manuais, software e ferramentas) para levar a utilização da rede mundial da Internet ao seu potencial pleno e a um padrão comum. W3C é um fórum para troca de informações, de comércio, comunicação e conhecimento coletivo. A renderização correta pelos navegadores depende, inicialmente, do DOCTYPE definido no início dos códigos HTML. Para validar um documento HTML strict 4.01, por exemplo, insira o código abaixo no início do documento: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemplo de Documento HTML</title> Exemplo de um documento HTML 4.01 válido pelo W3C <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemplo de Documento HTML</title> <h1>validando um Documento HTML</h1> <hr> <p>este é um documento XHTML válido</p> </body> </html> Figura 6 - Código-fonte para validação de HTML Para validar um documento XHTML, insira o código abaixo no início do documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>exemplo para Validar Codigo XHTML</title>

10 Professora Lucélia Oliveira 10 Exemplo de um documento XHTML 1.0 válido pelo W3C <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>exemplo para Validar Codigo XHTML</title> <h1> Validando um Documento HTML </h1> <hr/> <p>este é um documento XHTML válido</p> </body> </html> Figura 7 - Código-fonte para validação de Documento XHTML Além do Strict, existem também outras variações de DOCTYPE: o Transitional e o Frameset. Após digitar e salvar o documento HTML acesse o web site do W3C: (para validar por upload) ou (para validar pela URL) Para completar o entendimento a respeito da validação de códigos pelo W3C, acesse o manual no website: XHTML / HTML CSS Após validar o código com sucesso, o W3C disponibiliza um código-fonte para ser inserido no documento validado, contendo a versão do HTML/XHTML usado, como mostra a figura a seguir. Este código gera um link para o validador, permitindo que a página possa ser validada diretamente ao clicar no link gerado. Figura 8 - Código-fonte disponibilizado pelo W3C após validação O W3C também disponibiliza um código-fonte semelhante ao mostrado anteriormente quando valida um código CSS (ver Capítulo 9) com sucesso.

11 Professora Lucélia Oliveira ELEMENTOS BÁSICOS 4.1. Texto em movimento Para que o texto fique em movimento utiliza-se o elemento marquee. Este elemento está em desuso! Exemplos: <title>textos em movimento</title> <marquee behavior="scroll" width="30%">texto.</marquee> <marquee behavior="slide" direction="right">texto.</marquee> <marquee behavior="slide" direction="left">texto.</marquee> <marquee behavior="slide" direction="up">texto.</marquee> <marquee behavior="slide" direction="down">texto.</marquee> <marquee behavior="slide" direction="right">texto.</marquee> <marquee behavior="alternate">texto</marquee> </body> </html> 4.2. Listas Existem dois tipos de listas: listas ordenadas e listas não ordenadas. O elemento ul cria uma lista não ordenada, em que cada item da lista inicia com um símbolo marcador. Este marcador pode ser modificado por meio do atributo type ou da propriedade CSS list-style-type. O elemento ol cria uma lista ordenada, em que cada item da lista inicia com um número para organizar a lista. Este número pode ser modificado para algarismos romanos, por exemplo, através do atributo type ou da propriedade CSS list-style-type. Exemplos: O elemento li é usado para indicar cada item da lista. É possível colocar uma lista dentro de outra lista usando as chamadas listas aninhadas Listas não ordenadas Usando o atributo type <title>exemplos de listas não ordenadas</title> <h4>lista com discos como marca:</h4> <ul type="disc"> <li>java</li> <li>php</li> <li>cold Fusion</li> </ul> <h4>lista com anéis como marca:</h4> <ul type="circle"> <li>html</li> <li>javascript</li> Usando a propriedade CSS list-style-type. <title>exemplos de listas não ordenadas</title> <h4>lista com discos como marca:</h4> <ul style="list-style-type:disc"> <li>java</li> <li>php</li> <li>cold Fusion</li> </ul> <h4>lista com anéis como marca:</h4> <ul style="list-style-type:circle"> <li>html</li> <li>javascript</li>

12 Professora Lucélia Oliveira 12 <li>css</li> </ul> <h4>lista com quadrados como marca:</h4> <ul type="square"> <li>nota 1</li> <li>nota 2</li> <li>nota 3</li> </ul> </body> </html> <li>css</li> </ul> <h4>lista com quadrados como marca:</h4> <ul style="list-style-type:square"> <li>nota 1</li> <li>nota 2</li> <li>nota 3</li> </ul> </body> </html> Figura 9 - Código fonte - listas não ordenadas Ambos os códigos geram uma página como a mostrada a seguir: Existem várias outras alternativas de propriedades CSS para formatar os marcadores, entre elas a liststyle-image: url("imagem.gif"); por exemplo. Figura 10 - Página - listas não ordenadas

13 Professora Lucélia Oliveira Listas ordenadas Usando o atributo type <title>listas Ordenadas</title> <h4>lista ordenada com números:</h4> <ol> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com letras maiúsculas:</h4> <ol type="a"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com letras minúsculas:</h4> <ol type="a"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com números romanos (maiúsculas):</h4> Usando a propriedade CSS list-style-type. <title>listas Ordenadas</title> <h4>lista ordenada com números:</h4> <ol style="list-style-type: decimal"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com letras maiúsculas:</h4> <ol style="list-style-type: upperalpha"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com letras minúsculas:</h4> <ol style="list-style-type:loweralpha"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <ol type="i"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com números romanos (minúsculas):</h4> <ol type="i"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> </body> </html> <h4>lista ordenada com números romanos (maiúsculas):</h4> <ol style="list-style-type:upperroman"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> <h4>lista ordenada com números romanos (minúsculas):</h4> <ol style="list-style-type:lowerroman"> <li>engenharia</li> <li>medicina</li> <li>direito</li> </ol> </body> </html> Figura 11 - Código fonte - listas ordenadas

14 Professora Lucélia Oliveira 14 Ambos os códigos geram uma página como a mostrada a seguir: Figura 12 - Página - listas ordenadas

15 Professora Lucélia Oliveira Listas Aninhadas Uma lista não-ordenada é uma lista dentro de outra lista. Listas aninhadas <title>exemplo de listas aninhadas</title> <h1>cursos oferecidos</h1> <hr/> <ol> <li>pd <ul> <li>lpi</li> <li>lpii</li> <li>banco de Dados</li> </ul> </li> <li>redes <ul> <li>protocolo de Redes</li> <li>redes Wireles</li> <li>projeto de Redes</li> </ul> </li> </ol> </body> </html> Figura 13 - Código fonte - listas aninhadas No exemplo ao lado temos uma lista não ordenada dentro de uma lista ordenada, mas, é possível criar uma lista ordenada dentro de uma não ordenada! Figura 14 - Página - listas aninhadas

16 Professora Lucélia Oliveira 16 Exercícios Com base no glossário desta apostila e nos capítulos anteriores, responda as questões a seguir: 1. Enumere as colunas: a) Intranet ( ) É utilizado para a comunicação através da rede Internet. É o endereço de um computador em uma rede TCP/IP. b) WWW ( ) É o programa usado para visualizar a parte gráfica da Internet. c) Protocolo IP ( ) Rede de computadores privativa, utiliza as mesmas tecnologias da Internet d) Navegador ( ) É um dos serviços oferecidos pela Internet, é a parte gráfica. Possibilita acesso simultâneo a imagens, animações, sons, vídeos e textos. e) Servidor Web ( ) É uma rede de redes em escala mundial de milhões de computadores f) Redes de Computadores ( ) Programa que fornece o material apresentado pelo browser g) Internet ( ) Consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando mensagens ( s), etc. 2. Diga se as afirmações são verdadeiras ou falsas. Se forem falsas, explique por quê. a. ( ) O atributo type, quando utilizado com um elemento ol, especifica um tipo de seqüência e pode ser substituído pela propriedade CSS list-style-type. b. ( ) Uma lista ordenada não pode ser aninhada dentro de uma lista não ordenada. c. ( ) XHTML é a junção de XML com HTML. d. ( ) O elemento br representa uma quebra de linha e. ( ) Os hiperlinks são marcados com a tag <link> Justificativas: 3. Preencha as lacunas em cada uma das afirmações: a. O elemento insere uma linha horizontal b. O sebrescrito é marcado com o elemento, e o subscrito é marcado com o elemento. c. O elemento de cabeçalho menos importante é e o elemento mais importante de cabeçalho é. d. O elemento marca uma lista não-ordenada. e. O elemento marca um parágrafo. f. Os comentários de XHTML iniciam com <!--- e terminam com. g. Em XHTML os valores de atributos devem estar entre. 4. Utilize a linguagem HTML para criar um documento para o seguinte texto. Fundamentos de Linguagens para Web Os conhecimentos relacionados à Tecnologia da Informação são essenciais para se conquistar um lugar no mercado de trabalho atual.

17 Professora Lucélia Oliveira 17 Segundo artigo divulgado pelo site UOL, daqui a cinco anos faltarão profissionais para atuar nessa área. 5. Por que a seguinte marcação é inválida? <p> Aqui tem um texto... <hr /> <p> E aqui mais texto!!! </p> 6. Crie um documento XHTML que contenha uma lista ordenada de seus Websites favoritos. A página deve conter o título: Meus sites favoritos. 7. Crie um documento XHTML que contendo três listas ordenadas: sorvete, salada de frutas e iogurte gelado. Cada lista ordenada deve conter uma lista aninhada, não ordenada e seus sabores e/ou frutas favoritas. Forneça no mínimo três sabores em cada lista não-ordenada.

18 Professora Lucélia Oliveira IMAGENS Para inserir uma imagem na página são usados: O elemento img para informar que se trata da inserção de uma imagem. O atributo src para informar o caminho da imagem. O atributo alt é para fazer uma descrição da imagem, quando a imagem não for aberta, esse texto irá aparecer. O atributo weigth indica a altura em que a imagem deve aparecer na página. O atributo height indica a largura em que a imagem deve aparecer na página Sintaxe <img src= imagens/nomedaimagem.jpg alt= Descriçao da imagem width= 28px height= 50px > </body> 5.2. Passos para inserir uma imagem a partir da Internet Como sugestão, vamos escolher uma imagem no site Google e inseri-la em nosso documento HTML 1. Crie um diretório (pasta) em um local de fácil acesso para salvar a figura 2. Acesse o website: 3. Clique em Imagens 4. Digite o tema desejado. Neste exemplo, digite animal 5. Clique em Pesquisar imagens 6. Escolha a imagem desejada e clique sobre ela 7. Clique em ver imagem em tamanho grande 8. Clique com o botão direito do mouse sobre a figura 9. Clique em Salvar imagem como Localize o diretório criado no item 1 e salve a imagem com o nome animal 11. Agora vamos ao código HTML para a inserção da figura: O elemento <p></p> foi inserido no código para que a imagem não fique solta no meio do código, o que não é recomendado pelo W3C. <title>inserir imagens</title> <p><img alt="animal feliz" src="animal.jpg"></p> </body> </html> Salve o documento com o nome imagem.html dentro da mesma pasta onde foi salva a imagem. Figura 15 - Código fonte - inserção de imagem

19 Professora Lucélia Oliveira Vá até o diretório, localize o arquivo imagem.html e dê um clique duplo sobre ele. Aparecerá uma página como a mostrada a seguir: Figura 16 - Página - inserção de imagem 5.3. Ajuste de imagens O tamanho da imagem pode ser alterado como mostrado no código a seguir: <title>ajuste de imagens</title> <p><img alt="animal feliz" src="animal.jpg" width= "75px" height="50px"></p> <p><img alt=" animal feliz" src="animal.jpg" width="150px" height="100px"></p> Para alterar o tamanho de uma imagem use os atributos "height" (altura) e width" (largura). <p><img alt=" animal feliz" src="animal.jpg" width="300px" height="200px"></p> </body> </html> Figura 17 - Código fonte - Ajuste de imagem

20 Professora Lucélia Oliveira 20 A página agora deverá ficar assim: Figura 18 - Página - ajuste de imagem

21 Professora Lucélia Oliveira LINKS Para construir um link é necessário um elemento e um atributo: O elemento a indica que se trata de um link; O atributo href indica para onde ir quando o link for clicado. Exemplo: <a href="http://www.google.com.br">aqui um link para o Google</a> No exemplo acima o atributo href tem o valor "http://www.google.com.br", que é o endereço completo do site Google e é chamado de URL (Uniform Resource Locator). Note que "http://" deve sempre ser incluído nas URLs. A frase "Aqui um link para o Google" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a> Links para um arquivo Criar um link para um arquivo é bastante simples, procede-se da mesma maneira que para inserir um link para um website externo, diferenciando-se pelo fato de não acrescentar o no endereço do arquivo e acrescentando-se a extensão do arquivo como pode ser observado a seguir: Exemplo: <a href="material.zip">material da disciplina</a> 6.2. Links dentro da própria página Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo name e o símbolo "#". Use o atributo id para marcar o elemento que é o destino do link. Por exemplo: <a id="menu"></a> Você pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuído ao id para onde o link irá. Exemplo: <a href="#menu">link para o cabeçalho 1</a> 6.3. Links para Você pode criar link para um endereço de . Isto é feito de modo semelhante aos links para documentos. Exemplo: <a para Professora Lucélia</a> Será renderizado no navegador assim: Enviar para Professora Lucélia

22 Professora Lucélia Oliveira 22 A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de . Quando o link é clicado o programa de padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de (como o Outlook Express) instalado na sua máquina Imagens como Links Para substituir o texto clicável por uma imagem clicável, basta substituir o texto entre as tags <a> e </a> por uma imagem, como no exemplo abaixo: <a href="http://paginadedestino.html"><img src= imagens/nomedaimagem.jpeg alt= Texto alternativo ></a> Exercícios 1. Criar uma página web contendo três imagens de cachorros da raça São Bernardo e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: saobernardo.html (NÃO COLOCAR ACENTUAÇÃO) 2. Criar uma página web contendo três imagens de cachorros da raça Pastor Alemão e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: pastoralemao.html (NÃO COLOCAR ACENTUAÇÃO) 3. Criar uma página web contendo três imagens de cachorros da raça Cocker e uma breve descrição (características) sobre essa raça. Salvar a página com o nome: cocker.html 4. Criar uma página web contendo três links para as páginas da raça São Bernardo, Pastor Alemão e Cocker. Contendo uma breve descrição sobre os cachorros e o título da página como: index.htm. Seja criativo! Salvar a página com o nome: guiaderacas.html (NÃO COLOCAR ACENTUAÇÃO)

23 Professora Lucélia Oliveira TABELAS Tabelas são usadas para apresentar "dados tabulares", isto é, informações que devem ser apresentadas em linhas e colunas, de forma lógica Sintaxe: <table> <tr> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table> Será renderizado no navegador assim: Célula 1 Célula 2 Célula 3 Célula 4 Considerações: As tabelas constroem-se com o elemento <table>. As linhas da tabela obtêm-se com o elemento <tr>. As células de dados criam-se com o elemento <td> Para que apareçam as linhas da tabela, use o atributo border Para definir o tamanho da tabela use o atributo width, a unidade de medida poderá ser em pixels (px) ou em percentagem (%). As tabelas podem ser formatadas. Podem-se incluir bordas, alterar sua cor, estilo e espessura como mostrado no código a seguir: <title>tabelas</title> <table width="300px" border="1px" bordercolor="#0000ff"> <tr> <td>celula 1-1</td> <td>celula 2-1</td> <td>celula 3-1</td> </tr> <tr> <td>celula 1-2</td> <td>celula 2-2</td> <td>celula 3-2</td> </tr> <tr> <td>celula 1-3</td> <td>celula 2-3</td> <td>celula 3-3</td> </tr> </table> </body> </html> Resultado do código ao lado: Figura 19 - Página - tabela Figura 20 - Código fonte - tabela

24 Professora Lucélia Oliveira Exemplos de três tabelas em um mesmo documento: <title>tabelas</title> <h4>uma coluna, cor azul:</h4> <table width="300px" border="1px" bordercolor="#0000ff"> <tr> <td>100</td> </tr> </table> <h4>uma linha e três colunas, cor verde:</h4> <table width="300px" border="1px" bordercolor="#00ff00"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>duas linhas e três colunas, cor vermelha:</h4> <table width="300px" border="1px" bordercolor="#ff0000"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> Figura 22 - Código fonte - várias tabelas em um mesmo documento O código anterior gera uma página como o modelo ao lado. Há uma variedade maior de propriedades CSS para formatação de tabelas do que atributos HTML. Figura 21 - Página- várias tabelas em um mesmo documento

25 Professora Lucélia Oliveira Inserindo elementos em uma tabela <title>tabelas</title> <table border="1"> <tr> <td> <p>isto é uma frase</p> <p>isto é outra frase</p> </td> <td>esta célula contém uma tabela: <table border="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </td> <tr> <td>esta célula contém uma lista: <ul> <li>livros</li> <li>revistas</li> <li>jornais</li> </ul> </td> <td>esta contem uma imagem <img src="animal.jpg" alt="animal" width="100px"> </td> </tr> <tr> <td>esta contém apenas texto.<br/> </td> <td> Esta contem uma imagem que linka: <a href="http://www.google.com.br"><img src="animal.jpg" alt="animal" width="100px"></a> </td> </table> </body> Figura 23 - Código fonte - inserção de outros elementos na tabela

26 Professora Lucélia Oliveira 26 O código anterior gera uma página como o modelo a seguir: Figura 24 - Página - inserção de outros elementos na tabela 7.4. Mesclando linhas e colunas <table border="1"> <tr> <td colspan="2">colunas 1 e 2</td> </tr> <tr> <td>linha 1, coluna 1</td><td>linha 1, coluna 2</td> <tr> <td>linha 2, coluna 1</td><td>linha 2 coluna 2</td> </tr> <tr> <td rowspan="3"> 3linhas</td><td>uma linha</td> </tr> <tr> <td> Duas linhas</td> <tr> <td>três linhas</td> </tr> </table> </body>

27 Professora Lucélia Oliveira 27 Exercícios Instruções: Cada tabela a seguir deve ser criada em um documento HTML diferente Exercício 01 Relação de alunos e notas Nome do Aluno Matéria Nota Resultado Joaquim Matemática 7,0 Aprovado Pedro Física 6,5 Aprovado Maria Eduarda Química 10,0 Aprovado Pedro Henrique Português 4,0 Reprovado Exercício 02 Dica: use CSS para aplicar as cores e o atributo width para criar a célula do tamanho desejado. Exemplo: <td width="150px" style="background-color:yellow">teste</td> Exercício 03 Dica: use CSS para aplicar as cores de fundo e da fonte. Quantidade de alunos por turma Curso Turma Número de alunos Sistemas de Informação A 35 Sistemas de Informação B 25 Tecnologia de Informação A 45

28 Professora Lucélia Oliveira 28 Exercício 04 Dica: nesse exercício deverá usar os atributos rowspan para mesclar as linhas Relação de Jogos Nintendo 64 PlayStation Marca do game Nome do Jogo Mario Party Mario Kart Turok Bomberman Road Rash Tomb Raider 007 Gênero Aventura Corrida Aventura Aventura Corrida de moto Ação Ação Exercício 05 Dica: nesse exercício deverá usar os atributos colspan para mesclar as colunas Áreas e cursos da Faculdade Informática Sistema de Informação Administração Administração de Empresas Tecnologia de Informação Administração Hospitalar Exercício 06 Trabalhando imagens e links dentro de tabelamento Fazer um link para a página do exercício 1 Clique na imagem ao lado e veja o exercício 5.

29 Professora Lucélia Oliveira FORMULÁRIOS Um formulário é basicamente uma página Web com campos de entrada que permitem que você envie informações. Quando o formulário é enviado, tais informações são empacotadas e enviadas a um servidor Web para serem processadas por outra aplicação Web. Quando o processo termina você obtém outra página Web com uma resposta. Exemplo: <title>formulário</title> <div style="font-family:arial"> <form name="form1" action="#"> <h2>preencha seu currículo</h2> Nome do candidato:<br /> <input type="text" name="nome" size="40" maxlength="35"/><br /><br /> Sexo:<br /> <input type="radio" name="sexo" value="m" />Masculino<br /> <input type="radio" name="sexo" value="f" />Feminino<br /><br /> Áreas de interesse:<br /> <input type="checkbox" name="area" value= a1 />Técnica<br /> <input type="checkbox" name="area" value= a2 />Administrativa<br /> <input type="checkbox" name="area" value= a3 />Recursos Humanos <br /><br /> Estado Civil<br /> <select name="est_civil"> <option value="0">escolha uma Opção</option> <option value="1">casado</option> <option value="2">solteiro</option> <option value="2">outros</option> </select> <br /><br /> Resumo:<br /> <textarea name="comentario" cols="30" rows="5">insira aqui um resumo do seu curr&iacuteculo</textarea><br /><br /> Escolha uma senha: <input type="password" name="senha" size="25"/><br /><br /> <input type="reset" value="limpar" /><br /><br /> <input type="submit" value="enviar" /><br /><br /> </form> </div> </body> </html> Figura 25 - Código fonte - formulário

30 Professora Lucélia Oliveira 30 Esse código irá resultar no formulário abaixo: Figura 26 - Página - formulário Entenda os elementos usados para criar o formulário anterior: <div> à foi usado para envolver todo o conteúdo do formulário, pois, não é recomendado que dados fiquem soltos no documento, fora de um elemento. <form> à usado para a criação de formulários. Este elemento delimita o conteúdo de um formulário, ou seja, indica onde começa e termina. <select> à apresenta diversas opções ao usuário em um espaço limitado. Possui os atributos: Name: atributo que identifica os dados da lista. É obrigatório. Option: Cria cada item da lista. Selected: indica o valor padrão da lista. Value: valor que será enviado ao servidor. <textarea> à fornece ao usuário uma área maior, na qual é possível digitar uma mensagem.

31 Professora Lucélia Oliveira 31 Possui os atributos: Cols: indica a quantidade de colunas. Rows: indica a quantidade de linhas. Name: identifica o dado enviado por meio do texto digitado. <input> à é responsável por inserir uma variedade de campos de entrada de dados em um formulário. O que define qual mecanismo de entrada está sendo adicionado no formulário é o valor atribuído ao atributo type. Possui os atributos: Type: especifica o tipo de campo que será criado Value: cria um valor default para o campo em questão Name: nomeia cada elemento de um formulário. É por meio desse atributo que o servidor consegue acessar o dado enviado. Size: muda o tamanho do elemento definido no type. Um campo input pode assumir os seguintes tipos, definido pelo atributo type: Campos de texto: type= text neste caso o usuário digita o dado desejado; Botões de opção ou botões de rádio: type= radio - neste caso o usuário poderá marcar apenas uma opção; Caixas de seleção ou checkbox: type= checkbox ; Campos de senha: type= password os dados digitados não aparecem, são substituídos por caracteres especiais; Botão para limpar os dados do formulário: type= reset este botão redefine os valores padrão do formulário; Botão de envio dos dados: type= submit usado para enviar os dados do formulário para a URL especificada no atributo action do elemento form.

32 Professora Lucélia Oliveira 32 Exercícios Criar um Documento XHTML para apresentar e enviar para o servidor o formulário abaixo: Ficha de Inscrição Nome do candidato: Endereço: CEP: Telefones: RG: CPF: Sexo: Masc. Fem. Escolaridade: Curso: Senha de acompanhamento: Observações: Cidades: - Brasília - Taguatinga - Sobradinho - Águas Claras UF: - DF - GO Escolaridade: - Ensino Fundamental - Ensino Médio - Superior Incompleto - Superior Completo - Pós-Graduação Curso: - Web Design - Lógica de Programação - Java - Delphi

33 Professora Lucélia Oliveira FOLHAS DE ESTILO - CSS Trata-se de um padrão de formatação para páginas Web mais abrangente que os antigos elementos HTML. Proposto pelo W3C, a CSS foi introduzida pela primeira vez pela Microsoft, no lançamento do Internet Explorer 3.0. A CSS (Cascading Style Sheets) - Folhas de Estilos em Cascata proporciona ao desenvolvedor de páginas HTML/XHTML um controle maior sobre os atributos de um website como fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, entre outros. Permite projetar websites com uma técnica completamente diferente da convencional e possibilita uma considerável redução de tempo e trabalho. O XHTML pode ser indevidamente usado para definir o layout de websites. Contudo, CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. O XHTML é usado para estruturar conteúdos. A CSS é usada para formatar conteúdos estruturados. Para as necessidades de formatação de layouts, os fabricantes de navegadores (àquela época a Netscape e a Microsoft) inventaram novas tags HTML tais como a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se a layout e não à estrutura. Isto adicionalmente teve o efeito de desvirtuar o emprego de tags inicialmente projetadas para estrutura, como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta página" tornou-se comum nos websites. A CSS foi inventada para solucionar esta situação, colocando à disposição dos Web Designers, meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo, a separação dos estilos de apresentação da marcação dos conteúdos, torna a manutenção dos sites bem mais fácil Funcionamento da CSS Muitas das propriedades usadas em CSS são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que serão usados a seguir. Sintaxe básica das CSS: Para se obter a cor de fundo em vermelho: Usando HTML pode-se fazer assim: <body bgcolor="#ff0000"> Com CSS o mesmo resultado será obtido assim: body {background-color: #FF0000;} Como podem ser notados, os códigos HTML e CSS são mais ou menos parecidos. O exemplo acima serve também para demonstrar o fundamento do modelo CSS:

34 Professora Lucélia Oliveira 34 Seletor { propriedade: valor } Em que elemento será aplicada a propriedade (exemplo: body) Pode ser, por exemplo, a cor da fonte O valor da propriedade cor da fonte que pode ser, por exemplo, azul ( #0000FF ) Figura 27 - Funcionamento da CSS 9.2. Onde inserir o código CSS O código CSS pode ser aplicado a um documento de três maneiras distintas: 1. Em um arquivo separado dos documentos XHTML/HTML; 2. No cabeçalho de um documento XHTML/HTML; 3. Dentro de um elemento XHTML/HTML. O método mais recomendado é o método externo Externo Nesse modelo, definem-se os estilos em um arquivo separado, o salva com a extensão.css e faz referência a ele por meio do elemento <link> que se posiciona entre os elementos de cada arquivo HTML que irá utilizá-lo. Uma folha de estilos externa é um simples arquivo de texto com a extensão.css. Tal como qualquer outro tipo de arquivo, pode-se colocar uma folha de estilos tanto no servidor como no disco rígido. Vamos supor, por exemplo, que uma folha de estilos tenha sido nomeada de estilo.css e está localizada no mesmo diretório do arquivo index.html: O "truque" é criar um link no documento HTML (index.html) para a folha de estilos (estilo.css). O link é criado em uma simples linha de código HTML como mostrado a seguir: <link rel="stylesheet" type="text/css" href="estilo.css" /> Observe que o caminho e/ou nome do arquivo para a folha de estilos é indicado no atributo href. Esta linha de código deve ser inserida na seção header do documento HTML, isto é, entre as tags e, conforme mostrado abaixo: <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" />... Figura 28 - Código-fonte - CSS Externa

35 Professora Lucélia Oliveira 35 Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML. A coisa realmente inteligente disso é que vários documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo será capaz de controlar a apresentação de muitos documentos HTML. Esta técnica pode economizar uma grande quantidade de trabalho. Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma, para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos trocando-se a cor em uma folha de estilos central. body { background-color: #FF0000; } Salve o arquivo com o nome estilo.css <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> <h1>minha primeira folha de estilos</h1> </body> </html> Figura 29 - Código-fonte - CSS Externa 2 Salve este arquivo com o nome index.html Salve os dois arquivos no mesmo diretório. Lembre-se de salvar os arquivos com a extensão apropriada (".css" e ".html") Para formatar os links, podemos utilizar as chamadas pseudoclasses: a{text-decoration:none} à Tira o sublinhado de todos os links a:link{color:green} à Muda para verde a cor dos links ainda não visitados a:visited{color:brown} à Muda para marrom a cor dos links já visitados a:hover{color:yellow} à Muda para amarelo a cor dos links ao passar o mouse Interno ou Incorporado Todas as informações de estilos são incorporadas ao documento utilizando-se o elemento <style> dentro do. Essas definições se aplicam somente ao documento em questão. De acordo com a regra CSS da cascata, quando estilos diferentes conflitantes são atribuídos tanto em style-sheets externas quanto em style-sheets incorporadas, as definições feitas na folha de estilo incorporada terão prioridade maior. Exemplo 1: <title>exemplo<title> <style type="text/css"> body {background-color: #FF0000;} </style> <p>esta é uma página com fundo vermelho</p> </body></html> Figura 30 - Código-fonte - CSS Incorporada

36 Professora Lucélia Oliveira 36 Exemplo 2: <style type="text/css"> <!-- h1 {color: #0000FF; font-size: 30px; font-family: Comic Sans MS} p {text-indent: 1cm; background-color: yellow; font-family: arial} body {background-color:#00000f} --> </style> <title> Meu primeiro style sheet</title> <h1>meu primeiro style sheet</h1> <p>agora terei o controle total!</p> </body> </html> Figura 31 Código-fonte - CSS Incorporada In-line ou Local Outra maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente, a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir: <title>exemplo</title> <body style="background-color: #FF0000;"> <p>esta é uma página com fundo vermelho</p> </body> </html> Figura 32 - Código-fonte - CSS Local Exercícios CSS 1. Crie um Documento XHTML para inserir uma folha de estilo Inline e salve-o com o nome cssinline.html. 2. Crie outro Documento XHTML para inserir uma CSS Interna ou incorporada e salve-o com o nome cssinterna.html. 3. Crie o seguinte documento externo para formatação, chamado de basico.css body{ color:blue; background-color:yellow; font-family: Arial; font-size:40pt; } 4. Crie um Documento XHTML completo para inserir o CSS Externo abaixo e salve-o com o nome cssexterno.html: <title>meu documento</title> <link rel="stylesheet" type="text/css" href="basico.css" /> <h1>exercício 4</h1> <p>este texto ficou do mesmo tamanho do título</p> </body> </html>

37 Professora Lucélia Oliveira 37 OBS. A linha de comando em negrito, é a que está chamando o arquivo CSS externo. Siga sempre este padrão, mudando apenas o nome do arquivo CSS, no caso básico.css 5. Coloque uma imagem de fundo no documento cssexterno.html, para isso salve uma imagem no mesmo diretório dos seus arquivos e altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpg"); } 6. Faça com que a imagem se repita no fundo do documento XHTML, altere o arquivo basico.css, acrescentando: body { background-image: url("imagem.jpeg"); background-repeat: repeat; } 7. Faça com que a imagem permaneça fixa, mesmo quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, acrescentando: Nota: para ver a funcionalidade deste exercício, o texto deverá ser grande, sendo necessário o uso do scroll. body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: fixed; } 8. Faça com que a imagem role junto com o texto quando a barra de rolagem rolar para baixo ou para cima, altere o arquivo basico.css, mudando o atributo background-attachment para scroll: body { background-image: url("imagem.jpeg"); background-repeat: no-repeat; background-attachment: scroll; } 9. Crie um documento XHTML para chamar cada uma das páginas criadas anteriormente por meio de links e salve-o com o nome index.html: 10. Retire o sublinhado de todos os links criados no exercício anterior. 10. 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. Exemplo: A folha de estilos:.beneficios { color:red;} O html: <p>dormir cedo e acordar cedo faz o homem <span class="beneficios">saudável</span>, <span class="beneficios">rico</span> e <span class="beneficios">sábio</span>.</p>

38 Professora Lucélia Oliveira 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. Exemplo: A folha de estilos: #democratas { background:blue;} #republicanos { background:red;} No XHTML: <div id="democratas"> <ul> <li>franklin D. Roosevelt</li> <li>harry S. Truman</li> <li>john F. Kennedy</li> <li>lyndon B. Johnson</li> <li>jimmy Carter</li> <li>bill Clinton</li> </ul> </div> <div id="republicanos"> <ul> <li>dwight D. Eisenhower</li> <li>richard Nixon</li> <li>gerald Ford</li> <li>ronald Reagan</li> <li>george Bush</li> <li>george W. Bush</li> </ul> </div> Exercícios Tomando como base um documento XHTML, introduza as modificações propostas nos itens abaixo, na ordem sugerida. Após cada alteração, abrir o documento no navegador e verificar os resultados. 1. Alterar a cor de fundo de toda a página para azul. 2. Alterar a cor de fundo de um parágrafo para vermelho. Use uma classe como seletor. 3. Alterar a cor de fonte do mesmo parágrafo para branco. Use outra classe como seletor. 4. Na segunda classe criada, defina outra cor de fundo e verifique o resultado da precedência. Desfaça esta última alteração. 5. Acrescente uma imagem de fundo que se repita ao longo de toda a página. 6. Acrescente uma propriedade que evite a repetição da imagem de fundo. 7. Faça a imagem de fundo repetir-se apenas horizontalmente. 8. Faça a imagem de fundo repetir-se apenas verticalmente.

39 Professora Lucélia Oliveira Posicione a imagem de fundo no canto superior direito da janela. 10. Posicione a imagem de fundo no centro da janela, nas duas dimensões, usando a palavra reservada center. 11. Posicione a imagem de fundo a 20% do topo e a 30% da margem esquerda. 12. Defina a fonte de um parágrafo para 150px. 14. Decore um parágrafo com uma linha sobre suas linhas. 15. Decore outro parágrafo sublinhando-o. 17. Para as duas questões anteriores, repita o procedimento em apenas um trecho do parágrafo, usando o elemento <span>. 18. Justifique um dos parágrafos. 19. Centralize um dos parágrafos. 20. Em um dos parágrafos, force o recuo da primeira linha de texto em 100px. 21. Transforme todas as letras em minúsculas em um parágrafo. 22. Transforme todas as letras em maiúsculas em um parágrafo. 23. Transforme a primeira letra de cada palavra em maiúscula de todo um parágrafo. 30. Defina bordas para o parágrafo anterior com 2px, estilo sólido e cor preta; 34. Defina as propriedades do parágrafo anterior width e height para 30% e 80% respectivamente. 35. Insira conteúdo nesse parágrafo de modo a extrapolar o tamanho definido. 36. Defina a propriedade overflow com o valor scroll e verifique a diferença. 12. CONSTRUINDO UM LAYOUT BÁSICO Vamos às medidas, cores e outros estilos. A CSS é quem vai desenhar tudo na tela, no momento em que terá medidas exatas do que precisamos. O layout a seguir será desenvolvido sem tabelas (tableless) usando o elemento <div> Vamos construir o layout abaixo, usando apenas um editor de texto simples, como o bloco de notas:

40 Professora Lucélia Oliveira 40 O arquivo CSS ficará assim: Figura 33 - Página - Layout básico body{ background-image:url ("marinha.jpg1"); } #geral{ position:absolute; left:50%; margin-left:-300px; } #topo{ width:600px; height:100px; background-color:black; color:black; color:white; font-family:"comic family:"comic Sans Ms"; font-size:20pt; text-align:center; position:absolute; top:0px; left:0px; } #menu{ width:100px; height:380px; background-color:gray; color:gray; color:black; font-family:"comic family:"comic Sans Ms"; font-size:14pt; position:absolute; Continuação: top:100px; left:0px; }

41 Professora Lucélia Oliveira 41 Continuação: #conteudo{ width:400px; height:380px; background-color:yellow; color:black; font-family:"comic Sans Ms"; font-size:14pt; position:absolute; top:100px; left:100px; } #publicidade{ width:100px; height:380px; background-color:gray; color:black; font-family:"comic Sans Ms"; font-size:14pt; position:absolute; top:100px; left:500px; background-image:url ("corais.jpg"); } #rodape{ width:600px; height:20px; background-color:black; color:white; font-family:"comic Sans Ms"; font-size:12pt; position:absolute; top:480px; left:0px; } Os elementos <div> devem ficar organizados de forma clara e fácil de manter. Temos um topo, um menu, um espaço para o conteúdo, um espaço para publicidade e um rodapé para a página, já definidos os seus tamanhos e cores no CSS.

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

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

Leia mais

Web Design Aula 11: XHTML

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

Leia mais

Quem 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

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

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

Leia mais

<!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head >

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

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

Leia mais

WEB DESIGNER WEB DESIGNER

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

Leia mais

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

Introdução à Tecnologia Web 2010

Introdução à Tecnologia Web 2010 IntroduçãoàTecnologiaWeb2010 CSS CascadingStyleSheets Sintaxe ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger CascadingStyleSheets Sintaxe Índice 1 O que é CSS?... 2 2 Vantagens do uso de CSS...

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

DESENVOLVIMENTO WEB I - 7122

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

Leia mais

Desenvolvimento em Ambiente Web. HTML - Introdução

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

Leia mais

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

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

Leia mais

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

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

Leia mais

Layouts de páginas com HTML e CSS

Layouts de páginas com HTML e CSS Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage EstruturaBásicadoDocumentoHTML ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger

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

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 Introdução a 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 Apresentar as

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

Programação de Servidores CST Redes de Computadores

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

Leia mais

C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML

C A P I T U L O 0 1 I N T R O D U Ç Ã O XHTML C A P I T U L O 0 1 I N T R O D U Ç Ã O A O XHTML 1 O QUE É XHTML? XHTML significa Linguagem de Marcação de Hipertexto (Extensible Hypertext Markup Language) XHTML é quase idêntico ao HTML 4.01 XHTML é

Leia mais

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

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

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

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

Leia mais

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

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

Leia mais

HTML Página 1. Índice

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

Leia mais

Aula 2: Listas e Links

Aula 2: Listas e Links Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença

Leia mais

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

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

Leia mais

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

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

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

Leia mais

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

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 3: Introdução a Linguagem CSS Desenvolvimento de Sites com PHP e Mysql Objetivos Vincular folhas de estilo CSS em páginas de Internet; Compreender a sintaxe CSS; Controlar a formatação dos elementos

Leia mais

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

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

Leia mais

ROBERTO OLIVEIRA CUNHA

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

Leia mais

Links e Frames José Antônio da Cunha

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

Leia mais

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

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

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

Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho

Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho IntroduçãoàTecnologiaWeb2010 HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCabeçalho ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger

Leia mais

( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho -

( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho - Apostila de XHTML ( Curso Introdutório) Versão 0.2a 7 de março de 2005 - Versão - Rascunho - Prof. Luis Rodrigo de O. Gonçalves E-mail:luisrodrigoog@yahoo.com.br site: http://www.lrodrigo.cjb.net Prof.

Leia mais

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

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

Leia mais

Linguagem de Estruturação e Apresentação de Conteúdos

Linguagem de Estruturação e Apresentação de Conteúdos UNIVERSIDADE TECNOLOGICA FEDERAL DO PARANA MINISTERIO DA EDUCAÇÃO Câmpus Santa Helena Curso de Bacharelado em Ciência da Computação Linguagem de Estruturação e Apresentação de Conteúdos Prof. Me. Arlete

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

UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE

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

Leia mais

Portal do Projeto Tempo de Ser

Portal do Projeto Tempo de Ser Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5

Leia mais

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

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Formulários Em PHP Métodos GET e POST progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Entender o funcionamento

Leia mais

DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP. VitorFariasCoreia

DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP. VitorFariasCoreia DESENVOLVIMENTODE APLICAÇÕESPARAINTERNET:PHP VitorFariasCoreia INFORMAÇÃOECOMUNICAÇÃO Autor Vitor Farias Correia Graduado em Sistemas de Informação pela FACITEC e especialista em desenvolvimento de jogos

Leia mais

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários HTML Sessão 8 HTML Falta ver de que forma podemos trocar informações com nosso visitante. Este aspecto é primordial para a grande quantidade de acções que se podem realizar : Comprar um artigo, preencher

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

7. Cascading Style Sheets (CSS)

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

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

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

Leia mais

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

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

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

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

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

Leia mais

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

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

Leia mais

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

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

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

Unidade IV Introdução à Linguagem PHP Parte 1

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

Leia mais

Internet e Programação Web

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

Leia mais

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

Introdução a Servlets e JSP. Prof. Samuel Martins samuellunamartins at gmail dot com Faculdade São Miguel

Introdução a Servlets e JSP. Prof. Samuel Martins samuellunamartins at gmail dot com Faculdade São Miguel Introdução a Servlets e JSP samuellunamartins at gmail dot com Conteúdo da aula Introdução a HTML Introdução a Servlets Preparando o ambiente de programação Exemplo de Servlets 2 Websites na década de

Leia mais

Tecnologias Web. Formulários HTML

Tecnologias Web. Formulários HTML Tecnologias Web Formulários HTML Cristiano Lehrer, M.Sc. Tag form (1/2) Todo formulário em HTML é construído usando elementos dentro de um bloco . O bloco define a URL que receberá o formulário

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

Treinamento em BrOffice.org Writer

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

Leia mais

Curso de Html. Lição 1: Vamos começar Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website.

Curso de Html. Lição 1: Vamos começar Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website. Curso de Html Lição 1: Vamos começar Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website. O que é necessário? É muito provável que você já tenha as ferramentas que

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

ROTEIRO PASSO A PASSO COMO CRIAR E ALIMENTAR UM BLOG

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

Leia mais

CRIAÇÃO DE SITES (AULA 3)

CRIAÇÃO DE SITES (AULA 3) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 3) Mais algumas tags Existem tagsque são abertas e fechadas em única tag. Estas

Leia mais

CRIAÇÃO DE SITES (AULA 9)

CRIAÇÃO DE SITES (AULA 9) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 9) Cor do primeiro plano: a propriedade 'color' A propriedade color define a cor

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

Universidade Federal do Espírito Santo

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

Leia mais

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

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

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

Leia mais

XHTML / CSS. Professora: Lucélia Alves de Oliveira

XHTML / CSS. Professora: Lucélia Alves de Oliveira XHTML / CSS Professora: Lucélia Alves de Oliveira Conceitos Redes de Computadores: Uma rede de computadores consiste de dois ou mais computadores ligados entre si e compartilhando dados, impressoras, trocando

Leia mais

1. Introdução a Microsoft Excel

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

Leia mais

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

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

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

Leia mais

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

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

Scientific Electronic Library Online

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

Leia mais

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

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO Atualização 01/10/2001 2 Objetivo Este treinamento é dirigido a pessoas que desejam aprender como aplicar e criar estilos; criar e formatar tabelas; adicionar formatações

Leia mais

Profa. Reane Franco Goulart

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

Leia mais

HTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br

HTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br HTML Básico Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br Referências Bibliográficas: Iniciando em HTML Ramalho, Makron Books Home

Leia mais

AUTORIA WEB. Prof. Antonio Arley Rodrigues da Silva. arleysb@gmail.com

AUTORIA WEB. Prof. Antonio Arley Rodrigues da Silva. arleysb@gmail.com AUTORIA WEB Prof. Antonio Arley Rodrigues da Silva arleysb@gmail.com Sumário 1 Introdução... 4 2 HTML... 5 2.1 Estrutura Básica... 5 2.1.1 Exercícios de Fixação... 6 2.2 Semântica HTML... 6 2.3 Parágrafos...

Leia mais

Guia da Internet. Página 1

Guia da Internet. Página 1 Guia da Internet Utilização da Internet Introdução... 2 Alguns conceitos básicos... 2 Endereços (URL)... 2 Páginas Web... 3 Abrir o Internet Explorer... 3 O ecrã do Internet Explorer... 4 A Barra de Ferramentas

Leia mais

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

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

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

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

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

Leia mais

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