UNIVERSIDADE FEDERAL DE PELOTAS. Índice

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

Download "UNIVERSIDADE FEDERAL DE PELOTAS. Índice"

Transcrição

1 Índice INTRODUÇÃO: 2 DESENVOLVENDO UMA PÁGINA WEB 7 TÍTULOS 9 CABEÇALHOS: 10 PARÁGRAFOS 11 DEFININDO FONTES 12 ESTILOS DE TEXTO 13 ACENTOS E CARACTERES ESPECIAIS 14 QUEBRAS DE LINHA 15 INFORMAÇÕES SOBRE A PÁGINA 16 INSERINDO COMENTÁRIOS EM SUA PÁGINA 17 LINHAS HORIZONTAIS 18 CONTROLE DE CORES E GRÁFICOS DE FUNDO 19 ALINHANDO ELEMENTOS DE UMA PÁGINA 22 LISTAS 24 TEXTO ANIMADO 28 ENDEREÇOS 30 INTERLIGANDO DOCUMENTOS LINKS 31 IMAGENS GRÁFICAS 36 INSERINDO SOM 40 TABELAS 42 FRAMES 56 FORMULÁRIOS 60 UPLOAD DE ARQUIVOS 64 DICAS 67 1

2 INTRODUÇÃO: Um dos maiores desafios de pesquisa da ciência de computação, dentre outros nestes últimos anos, é a construção de hiperdocumentos e suas respectivas interfaces. A capacidade oferecida de acesso não-linear a informação, os hiperdocumentos conduziram indiretamente à composição de ligações de as quais refletem, melhor que o texto seqüencial o faz, o modo humano de organizar o conhecimento[maenza, 1994]. Oferecendo a riqueza da multimídia, os hiperdocumentos despertam para uma interpretação mais ampla da motivação e da criatividade. Debruçamo-nos sobre a questão da autoria e a leitura de hiperdocumentos, especialmente no tocante á interface Homen- Máquina. A leitura em um hiperdocumento, é entendida como um processo descontínuo, e não linear onde, através das ligações, o leitor navega de uma informação e outra, não necessariamente em uma ordem seqüencial. Assim como o pensamento é, por natureza, associativo, o mecanismo de leitura em um hiperdocumento procura representar este relacionamento associativo por meio de nós de ligações. O processo de escrita em ambientes de hiperdocumentos, é denominado autoria. Não envolve somente a composição do texto, mas também o esquema da tela e o projeto da interface e o que, talvez seja mais importante: a criação e o gerenciamento de ligações entre os nós. O conceito de interface aplicado especialmente a informática, designa um dispositivo que garante a comunicação entre dois sistemas informáticos distintos ou um sistema informático e uma rede de comunicação. Utilizando ferramentas adequadas, para obter-se uma interface com um conjunto de elementos que devem formar um conjunto com unidade, harmonia e coerência. Esse conjunto deve ter unidade para não apresentar elementos soltos e desconexos, que podem confundir o usuário, levando-o a perder-se no produto, confundindo ou ignorando informações. WEB Sua idéia inicial foi concebida em 1989, nos laboratórios de CERN (European Laboratory of Particle physics), na Suíça. Tim Berners-Lee, seu criador, conheceu a linguagem com o propósito de interligar os computadores do laboratório e instituições de pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos 2

3 científicos de forma simples e fácil de acessar. A Web tornou-se a moda no meio científico-universitário e cresceu rapidamente, essa moda foi rapidamente assimilada pelas universidades americanas. O crescimento estupendo da Web veio com a criação do primeiro Browser (navegador) gráfico, tipo Windows, no final de 1993, que foi desenvolvido por Marc Anderseen. Em 1994 foi fundada a Netscape Corporation que com seu browser permitiu a popularização definitiva da Web. Desde então o crescimento da Web tem sido exponencial, numa velocidade fantástica. O browser da Netscape tornou-se quase um padrão da Web, até que a partir do final de 1995, a Microsoft resolveu entrar no mercado, e colocou o produto Internet Explorer a disposição cerca de 15% da base mundial instalada de navegadores. A Web é uma base de dados gigantesca que funciona através de hipertexto, que permite acesso a arquivos da Internet de forma gráfica. A chave do sucesso da World Wide Web é o hipertexto. Os textos e imagens são interligados, através de palavraschave tornando a navegação simples e agradável HIPERTEXTO O termo hipertexto surgiu na década de Significa um texto não-linear, com mais de uma dimensão enquanto que um texto é uma coleção de informações organizada de forma linear, possuindo apenas uma dimensão, a qual deve ser apresentada e recuperada de forma seqüencial. No hipertexto, a informação está organizada em uma rede, cujos nós contém informação e estão relacionados por elos. Cada elo está, em geral associado diretamente a uma âncora, que pode ser um botão ou ícone, representando a origem de um elo, e ao ativá-la ocorre um salto para um outro nó. Quanto a apresentação as âncoras aparecem em geral realçadas, ou em cor diferente, na informação que está sendo apresentada na tela. Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe interessam e ignorar os que não lhe convém. O hipertexto é muito utilizado hoje em dia na multimídia em geral e em páginas na Web. 3

4 MULTIMÍDIA Refere-se a diversos tipos de informação que podem ser editadas e armazenadas em tipos específicos de dispositivos. É as apresentações organizadas de som, imagens gráficas estáticas, animações, textos e vídeos em movimento. Esse tipo de informação tem por finalidade esclarecer assuntos, indicar tendências, informar, formar, demonstrar ou simplesmente divertir. HIPERMÍDIA É definida pela associação do hipertexto e da multimídia, a qual manipula um conjunto de informações pertencendo a diferentes tipos de mídia(textos, imagens, sons, animações e gráficos), podendo estas informações serem recuperadas de forma nãolinear através de diversos caminhos de acesso disponíveis. Em outras palavras, a hipermídia é simplesmente uma extensão do hipertexto que incorpora outros tipos de dados além do texto. HTML - Hiper Text Markup Language É a linguagem de marcação de hipertexto, ou seja, e a linguagem na qual são escritas as páginas da Web, interpretada pelo navegador. As informações estão organizadas na forma de páginas ligadas entre si. Quando se acessa um site, normalmente entra pela porta da frente, onde existe uma mensagem de boas vindas e uma espécie de índice para as demais páginas. Essa entrada se chama página principal, ou home page. Na Web, vamos encontrar também outros tipos de documentos além dessas páginas interligadas. Acessa-se computadores que mantém programas para serem copiados gratuitamente, conhecidos como sendo assim, qualquer usuário pode, somente com o seu mouse, Ter acesso a uma enorme quantidade de informação na forma de textos, imagens, sons, gráficos, vídeos, etc..., navegando através de palavras chaves e ícones. A página é transferida de um computador remoto para o usuário, onde o browser faz o trabalho de interpretar os códigos contidos naquele documento e mostra a página que o usuário vê. A Web está estruturada em dois princípios básicos: HTTP(Hiper Text Tranfer Protocol) e HTML (Hiper Text Markup Language). 4

5 HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que permite a navegação na Web, com o simples clicar do mouse sobre o texto(ou imagem) que esteja associado a outro link. Estas ligações entre as páginas, conhecidas como hiperlinks (ligações de hipertexto), podem ser de informações contidas no próprio site, bem como de computadores e empresas em qualquer lugar do mundo. Na Web é possível que uma máquina faça referência a praticamente qualquer documento disponível na Internet, e também outros tipos de documentos além dessas páginas interligadas, podem acessar computadores que mantém programas para serem copiados gratuitamente, conhecidos como servidores de FTP, grupos de discussão e páginas comuns de texto. Os endereços na web sempre iniciam com são conhecidos como URL(Uniform Resource Locator) é o endereço particular e único de cada página da Web. Uma URL padrão possui até três partes: o domínio(www.terra.com.br), possivelmente um diretório ou diretórios e possivelmente um arquivo(web.htm). Um browser é um programa navegador de Web. Os mais usados são o Netscape(cerca de 75% do mercado mundial) da Netscape Corporation e o Internet Explorer(cerca de 15% do mercado mundial) da Microsoft, com diversos recursos de multimídia acoplados a cada um. Ambos os navegadores, possuem tecnicamente para o usuário leigo pouca diferença. É uma questão de escolha. Existem outros navegadores alternativos menos utilizados como o Opera que é pequeno, rápido e leve, possui cliente de e gerenciador de download próprio. Também o MSN, novo programa da Microsoft para tornar a Web ainda mais interessante. Funciona como browser, cliente de , programa de mensagens instantâneas, player de som, entre outros recursos. Possui uma interface muito amigável, com recursos de procura de música e vídeo, suporta e gerencia múltiplos usuários, e é atualizado automaticamente via web. Neoplanet é outro Browser alternativo, customizável e extremamente 5

6 simples de usar. Você poderá trocar skins do Neoplanet e usará o mecanismo do seu Internet Explorer 3.0, 4.0, 5.0 ou 5.5. Esta versão já vem com um programa para download e muito mais. O AWE - Adonay Web Explorer é atualmente o web browser com maior número de recursos e funções. Multinavegação, bloqueio de janelas PopUps, tradutor web inglês / português, zoom, notícias em tempo real, muda cor / imagem de fundo e fontes das páginas, mostra todos os links relacionados, navega em tela cheia, suporta Java, Flash e conexões seguras. É importante que os usuários deve sempre usar a versão mais recente de seu navegador para estar sempre atualizado com os novos plugins disponíveis para melhor navegabilidade pela Web. Estes navegadores relacionados são totalmente grátis, e podem ser adquiridos em suas empresas ou em inúmeros locais disponíveis para download na Internet, como o site SuperDownloads no Brasil e o Download.com internacional. O melhor lugar é o seu próprio provedor de acesso. 6

7 DESENVOLVENDO UMA PÁGINA WEB Você vai precisar:!"conhecer a linguagem HTML para escrever o código fonte de sua página!"um editor de textos para gerar o seu código fonte (bloco de notas, word, Wordpad)!"Um navegador de internet para visualizar as suas páginas (Netscape, Internet Explorer, Opera) TAGs Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browsers. Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras: #"As TAGs aparecem sempre entre os sinais de menor que (<) e maior que (>); #"Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/). Em geral: <nome da TAG> t e x t o </nome da TAG> onde: <nome da TAG>: indica o início da TAG </nome da TAG>: indica o fim da TAG Para criar uma página Web, você pode utilizar qualquer editor de texto simples, até mesmo o bloco de notas do Windows. Porém é mais prático utilizar um editor de HTML, que escrevem parte dos comandos para você. Guardando os seus documentos em HTML 1. Clique no menu ARQUIVO e escolha a opção SALVAR COMO; 2. Selecione o local,ou pasta onde você irá salvar seus arquivos; 3. Na caixa de texto NOME DE ARQUIVO, digite o nome_do_arquivo.htm. Não esqueça da extensão: *.htm ou *.html; 4. Na caixa de texto SALVAR COMO TIPO, selecione todos os arquivos (*.*); 5. Clique em salvar. MODELO BÁSICO DE PÁGINA WEB Uma página Web criada em HTML, possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página. Possui uma estrutura dividida em 4 TAGs básicas: <HTML>... <HTML> <HEAD>... <HEAD> <TITLE>... <TITLE> <BODY>... <BODY> 7

8 Onde: <HTML>... <HTML> são usados para delimitar os comandos HTML, indicam o início e o fim de um documento. O browser reconhece a TAG <HTML> e identifica que o documento que virá à seguir deve ser interpretado como HTML. <HEAD>... </HEAD> Delimitam a seção do cabeçalho do documento onde serão definidos poucos comandos de linguagem, o mais importante é o título que é exibido na barra de títulos do browser. <TITLE>... </TITLE> Definem o título da página que pé exibido na barra de títulos do browser. Estas TAGs devem estar sempre dentro das TAGs <HEAD></HEAD>. <BODY>... </BODY> Dentro desta TAG estão os elementos da página web. ÉW onde estão localizados as os textos, imagens, ligações com outras páginas, etc... <HTML> <HEAD> <TITLE> CURSO DE HTML PÁGINA BÁSICA </TITLE> </HEAD> <BODY> DESENVOLVENDO PÁGINAS DE INTERNET </BODY> </HTML> 8

9 TÍTULOS Todo documento em HTML deve possuir um título. De um modo geral aparece em um lugar separado da página, na maioria das vezes no alto da tela dos navegadores. Utilizado para identificar o documento. Interessante que possa sugerir claramente o conteúdo do documento. <HTML> <HEAD> <TITLE> Curso de HTML </TITLE> </HEAD> <BODY> <H2> Visualize a parte superior da janela do navegador </H2> </BODY> </HTML> Como fica no navegador: 9

10 CABEÇALHOS: São linhas do documento que são exibidas no browser com letras diferentes do restante do texto chamando a atenção de uma nova seção ou tópico. Sempre que se definir um novo cabeçalho, uma nova linha é inserida em branco após a sua linha. Ao definir o tamanho de um cabeçalho, não se está definindo o tamanho da letra, apenas é indicado ao navegador de cada usuário que deve ser visualicado com maior ou menor destaque que o resto do texto. A TAG <H> Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos caracteres vai do nível 6 (menor nível) ao 1 (maior nível). Sintaxe de comando: <Hn> TEXTO DO CABEÇALHO </Hn> #"n varia de 1 a 6 #"H1 é o maior corpo #"H6 é o menor corpo cabeçalhos.htm <HTML> <HEAD> <TITLE> Cabeçalhos </TITLE> </HEAD> <BODY> <H1>Texto formatado com H1</H1> <H2>Texto formatado com H2</H2> <H3>Texto formatado com H3</H3> <H4>Texto formatado com H4</H4> <H5>Texto formatado com H5</H5> <H6>Texto formatado com H6</H6> </BODY> </HTML> 10

11 PARÁGRAFOS A TAG <P> A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente a um alinha em branco entre parágrafos. Também responsável pelo alinhamento de parágrafos. Sintaxe de comando: <P ALIGN= posição > Texto do parágrafo. Posição pode ser: #"Left: alinhamento a esquerda; #"Center: centralizado #"Right: alinhamento a direita Nome do arquivo: parágrafos.htm <HTML> <HEAD> <TITLE> Alinhamento de Parágrafos </TITLE> </HEAD> <BODY> <P>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo). <P ALIGN= center > Este parágrafo tem o alinhamento centralizado. <P ALIGN= right > Este parágrafo tem o alinhamento a direita. </BODY> </HTML> 11

12 DEFININDO FONTES A TAG <FONT> Permite que você insira em sua página um texto com fontes de tamanhos, cores e tipos diferentes. Comando: <FONT SIZE= n FACE= nome COLOR= cor > texto </FONT> Onde: $" SIZE= n : n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores; $" FACE= nome : nome da fonte a ser utilizada; $" COLOR= cor : cor da fonte definida em hexadecimal, ou através de um nome prédefinido de cores. Formatando_fontes.htm Observações: Caso a fonte face indicada para sua página não esteja disponível para o usuário que visitar a sua página, a fonte utilizada então será a padrão do navegador utilizado pelo visitante; Pode-se definir mais de uma fonte face, caso a primeira não esteja instalada no sistema do usuário, o browser reconhece a próxima FACE definida; Outros exemplos: #"fontes_especiais.htm; #"fontes_especiais2.htm; 12

13 ESTILOS DE TEXTO Como nos editores de texto, alem dos tamanhos das fontes, você pode modificar o estilo de texto. Pode-se atribuir o negrito, itálico, sublinhado entre outros, abaixo relacionados: Tabela de estilos: COMANDO APLICANDO O ESTILO FUNÇÃO Negrito <B> Texto </B> Atribui o estilo negrito Itálico <I> Texto </I> Atribui o estilo itálico Sublinhado <U> Texto </U> Atribui o estilo sublinhado Strong <STRONG> Texto </STRONG> Semelhante ao estilo negrito Ênfase <EM> Texto </EM> Semelhante ao estilo itálico Typewriter <TT> Texto </TT> Espaço regular ao texto Big <BIG> Texto </BIG> Aumenta a fonte e atribui negrito Small <SMALL> Texto </SMALL> Reduz e altera a fonte Sobrescrito <SUP> Texto </SUP> Eleva o texto e eleva o seu corpo Subscrito <SUB> Texto </SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK> Texto </BLINK> Faz o texto ficar pulsante 13

14 ACENTOS E CARACTERES ESPECIAIS Os arquivos HTML, não podem conter nenhum tipo de formatação ou caracteres especiais(símbolos ou letras acentuadas). Para criar uma página com caracteres especiais, deve-se utilizar alguns códigos especiais que o browser interpreta e substitui por um caractere específico. Um bom exemplo seria representar uma TAG sem que o browser interpretasse como uma TAG. escrevendo a TAG= <BODY>. Para representá-la os sinais<>= <BODY> Encontra-se em anexo uma tabela com uma lista de códigos e caracteres especiais mais utilizados. Os navegadores mais atualizados reconhecem caracteres, alguns. <HTML> <HEAD> <TITLE>Alguns acentos e caracteres especiais </TITLE> </HEAD> <BODY> à<br>ã <br>â <br>ä <br>é <br>è <br>ê <br>í <br>ì <br>õ </BODY> </HTML> Verificar a página acentos_e_caracteres_especiais.htm, que contem tabela de exemplos 14

15 QUEBRAS DE LINHA A TAG <BR> Faz uma quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. Não necessita ser finalizada com </BR> <HTML> <HEAD> <TITLE> Utilizando a quebra de linhas com a TAG <BR> </TITLE> </HEAD> <BODY> Este texto está utilizando a TAG BR no final de cada linha<br><br> Você pode utilizar<br> a TAG BR<BR> toda vez que<br> você quiser passar o texto<br> para a próxima linha.<br><br>o resultado é simples. </BODY> </HTML> 15

16 INFORMAÇÕES SOBRE A PÁGINA A TAG <META> Proporcionam informações sobre a página, para o utilizador e para os motores de pesquisa. Estes tags só necessitam e devem estar presentes na primeira página do site (normalmente no index.html), porque só essa é pesquisada pelos search engines. Existem dois tipos de motores de pesquisa ou search engines: os indexes e os spiders. Os primeiros são atualizados manualmente e os spiders são automáticos. Deste modo, no Yahoo!, que é um index, para que um site seja listado, tem que se preencher um formulário, enviá-lo, e esperar por uma resposta de um responsável do yahoo a confirmar que o site foi adicionado à base de dados. Em contrapartida, no AltaVista, que se trata de um spider, para adicionar um site, só se tem de introduzir o url na secção "add url" e esperar por uma resposta automática e quase imediata do robot, a confirmar que o endereço existe e que os <META> tags foram localizados. Os <META> tags encontram-se geralmente dentro do <HEAD> </HEAD> e depois do <TITLE> </TITLE>. Os atributos de <META>: CONTENT: 1. Corresponde a informação disponível na TAG <META>. NAME: 1. O atributo NAME indica o tipo de informação que o <META> tag apresenta. Pode ter vários valores, tais como: $" Keywords: indica as palavras chaves da página. <META NAME="keywords" CONTENT="HTML, Tags, Atributos"> $" Description: indica uma breve descrição da página. <META NAME="description" CONTENT="Uma página sobre HTML"> $" Author: indica o autor da página. <META NAME="author" CONTENT="Gabriel Augusto"> Visualizando a página: Visualizando o código fonte da página do UOL, observe as informações sobre a página neste ponto. 16

17 INSERINDO COMENTÁRIOS EM SUA PÁGINA São utilizados em sua página WEB para descrever procedimentos utilizados na criação de sua página. O texto de um comentário não é exibido pelo navegador. Alguns navegadores de Internet não reconhecem o uso de TAGs dentro de comentários, sendo assim quando utilizadas junto ao seu comentário poderá exibir na página o seu comentário. São muito úteis na hora de manutenção de uma página. Servem como lembretes ou dicas para o programador que fará a atualização da página WEB. Sintaxe de Comando: <! Texto do parágrafo --> <HTML> <HEAD> <TITLE> Página com comentários </TITLE> </HEAD> <BODY> Esta página contém diversos comentários <!--Um comentário não é exibido na tela pelo navegador--> <!--Um comentário é como um lembrete--> <!--Pode ser colocado em qualquer ponto dentro do HTML--> </BODY> </HTML> Observe que em determinados pontos do código fonte, são inseridos comentários para própria orientação do programador da página 17

18 LINHAS HORIZONTAIS A TAG <HR> Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir a sua página chamando a atenção para algum tópico específico. Sintaxe de comando: <HR WIDHT= N% ALIGN= Posição SIZE= n COLOR = #cor NOSHADE> Sobre cada atributo: 1. WIDHT= n% : define a largura da linha. Pode ser definida em pixels ou em porcentagem do tamanho horizontal da tela; 2. ALIGN= posição : posição pode ser: $" left: alinhamento a esquerda; $" center: centralizado; $" right: alinhamento a direita 3. SIZE= n :define a espessura da barra, em pixels; 4. COLOR=#cor: define uma cor a barra utilizada 5. NOSHADE: define que a barra não deve receber o efeito 3D. <BODY bgcolor="#d6e4ed"> <div align="center>linhas Horizontais</div> <br> Linhas com alturas - SIZE- diferentes: Tamanho 10: </font> <HR SIZE="10" WIDTH="85%"> Tamanho 20: <HR SIZE="20" WIDTH="85%"> <br> Linhas com larguras - WIDHT - diferentes: Largura 50% da página: <HR SIZE="05" WIDTH="50%"> Largura 100% da página: <HR SIZE="05" WIDTH="100%"> <br> Linhas com alinhamentos - ALIGN - diferentes: Alinhamento a direita da página: <HR SIZE="05" ALIGN="RIGHT" WIDTH="80%"> </BODY> 18

19 CONTROLE DE CORES E GRÁFICOS DE FUNDO A maioria dos browsers permite a utilização de cores, apenas 256, mas já é o suficiente para você criar uma página com fundo e texto personalizados. As cores são compostas por códigos RGB(red, green, blue). cada código define a intensidade do vermelho, do verde e do azul, formando uma cor. Cada código varia de 0 a 255, onde 000 equivale ao preto e equivale ao branco. Devem ser informados no formato hexadecimal. não é necessário decorar os códigos de uma cor, para isto é só verificar a tabela de coresxcódigos em anexo. Para definir cores para sua página você deve utilizar a TAG <BODY> que possui atributos vinculados a ela que personalizam cada página de Internet. Pode-se Atribuir RGBs para cor de fundo da página, texto e links CORES E ELEMENTOS GRÁFICOS DE FUNDO #"Cor de fundo - BGCOLOR: É a cor do fundo da página. Este é um atributo que deve ser inserido dentro da TAG BODY; Comando: <BODY BGCOLOR= #RRGGBB > <body bgcolor="#ffffcc" text="#000033"> <H4 align="center">cor DE FUNDO<br> BGCOLOR="#cor"</H4> Com este atributo você controla a cor de fundo das páginas.<br><br> Comando:<br> <BODY BGCOLOR="#FFFFCC" TEXT="#000033"> </body> </html> #"Imagem de fundo - BACKGROUND: Aplica uma imagem como plano de fundo e que ocupará toda a área do fundo da tela do navegador, é aplicada em seqüência, uma ao lado da outra. Deve ser inseridos a marcação <BODY> e especificar a URL da uma imagem que será utilizada na página. Comando: <BODY BACKGROUND= URL > Corpo da Página </BODY> 19

20 <body background= "../imagens/fundo1.jpg"> <h3 align="center">imagem DE DE FUNDO<br> BACKGROUND="endereço& quot;</h3> Com este atributo você insere imagens de fundo nas suas páginas. <br><br>comando:<br> <BODY BACKGROUND="../imagens/fundo1.jpg"> </body> Nota: É importante ter cuidado quando aplicar elementos de fundo para que não seja prejudicada a leitura do texto. Sempre vale a pena visitar outras páginas que utilizam este recurso para recolher boas idéias. Alguns usuários de internet navegam sem a utilização de imagens para viabilizar uma melhor velocidade de acesso a WEB. em vista disso é interessante atribuir junto ao <BODY> uma cor de fundo (BGCOLOR). CORES DE LETRA E LINKS #"Texto - TEXT: Utilizado para controlar a cor do texto normal em uma página TEXT= #RRGGBB = é a cor do texto, o padrão é preto; Sintaxe de Comando: <BODY TEXT= #RRGGBB > Corpo da Página </BODY> 20

21 <body bgcolor="#ffffff" text="#333333"> <div align="center"> <h4>cores DE LETRAS DE TEXTO NORMAL<br> TEXT="#cor"</h4></div> Com este atributo, você controla a cor do texto normal em uma página.<br> Neste exemplo, estamos utilizando a cor indicada conforme o exemplo a seguir.<br><br>comando:<br> <BODY BGCOLOR="#FFFFFF" TEXT="#333333"> </body> #"Links LINK, VLINK, ALINK, :!"LINK= #RRGGBB = é a cor dos links, o padrão é azul;!"vlink= #RRGGBB = é a cor dos links visitados, o padrão é vermelho-púrpura;!"alink= #RRGGBB = é a cor do link ativo, onde o usuário pressionou o botão do mouse, mas ainda não soltou, o padrão é vermelho. Comando: <BODY LINK= #RRGGBB VLINK= #RRGGBB ALINK= #RRGGBB > <BODY BGCOLOR="#FFFFE0" TEXT="#FF6347" LINK="#ADFF2F" VLINK="#7FFFD4" ALINK="#0000CD"> <div align="center"> <h1>exemplo DE CORES<h1> <BR> <h3>o fundo da página está com uma cor especial: Lightyellow - RGB:FFFFE0</h3><BR> <h3>a cor do texto é: Tomato - RGB:FF6347</h3> <BR> LINK s: Greenyellow - RGB:ADFF2F<BR> VLINK s: Aquamarine - RGB:7FFFD4<BR> ALINK s: Mediumblue - RGB:0000CD<BR> </div> </BODY> 21

22 ALINHANDO ELEMENTOS DE UMA PÁGINA A TAG <DIV> Permite que você alinhe horizontalmente qualquer elemento em sua página. Esta difere da TAG <CENTER> por permitir alinhamento centralizado. O Alinhamento pode ser left, center ou right. Comando: <DIV ALIGN= posição >Elementos a serem alinhados</div> Onde: posição pode ser: #"left: alinhamento a esquerda; #"center: centralizado; #"right: alinhamento a direita 22 O alinhamento padrão é a esquerda, por defaut. <HTML> <HEAD> <TITLE> Alinhando Elementos com a TAG DIV </TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER">Usando a TAG DIV:</DIV> <BR> <DIV ALIGN= RIGHT > <P>Usando a TAG DIV você pode alinhar o seu texto sem problemas. <P>Pode utilizar o alinhamento a direita, que alinha o seu texto na margem direita da tela. Como um texto criado em um editor de textos pra ser impressos em uma página. <P>Com a TAG DIV você pode aproveitar o mesmo alinhamento para vários parágrafos. </DIV> </BODY> </HTML> A TAG <CENTER> Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN= CENTER >, porém a TAG CENTER não é reconhecida em todos os navegadores. Comando: <CENTER>Elementos a serem centralizados</center>

23 <HTML> <HEAD> <TITLE>Centralizando com a TAG CENTER </TITLE> </HEAD> <BODY> <CENTER> TAG CENTER </CENTER> <br> <p align="justify">centralizar os elementos de sua página em relação ao navegador Deve ser iniciada <center>e finalizada </center>, para não centralizar todos os elementos da página. Você pode utilizar.</p> <b>em IMAGENS:</b> <div align="center"> <b><center> </b><br> <img src="../imagens/dexter_laboratory.jpg" width="185" height="154"> <br> </CENTER></div><BR> <b>em TEXTOS:</b><br> <b><center> </b><br> <CENTER>Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN="center"> ELEMENTO A SER CENTRALIZADO </DIV>, porém a TAG CENTER não é reconhecida em todos os navegadores.</center> <b></center></b><br> </BODY> </HTML> 23

24 LISTAS Uma boa forma de organizar as páginas WEB. Podem servir como resumos ou índices de todo o site, contendo links para as outras páginas criadas por você ou outras pessoas. TIPOS DE LISTAS: #"Listas não numeradas; #"Listas numeradas; #"Listas de definições; #"Listas intercaladas. #"Listas Não Numeradas: A TAG <UL>: Inserem marcadores na frente de cada item. Comando: <UL TYPE= formato > <LI> Tópico 1 <LI> Tópico 2 <LI> Tópico 3 </UL> Onde: 1. <UL>: início da lista pontuada; 2. TYPE= formato : o formato do marcador pode ser: $" disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar) $" square: o marcador é um quadrado $" circle: o marcador é um círculo 3. <LI>: tópicos da lista, não e necessário encerrar com a TAG </LI>; 4. </UL>: fim da lista pontuada. 24

25 listas_nao_numeradas.htm <HTML> <HEAD> <TITLE> Listas Não Numeradas </TITLE> </HEAD> <BODY> <H3>Listas Não Numeradas</H3> <UL TYPE="disc"> <LI> TYPE="disc" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="square"> <LI> TYPE="square" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="circle"> <LI> TYPE="circle" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> </BODY> </HTML> #"Listas Numeradas: A TAG <OL>: Permite inserir em sua página uma lista numérica ou alfabética, com valor pré-definido ou não Sintaxe de comando: <OL TYPE= formato START= n ><LI>Tópico 1<LI>Tópico 2<LI>Tópico n</ol> Onde: 1. <OL>: início da lista numerada; 2. TYPE= formato : o formato da numeração pode ser: $"1: lista numérica(não é necessário ser definido); $"A: lista alfabética com letras maiúsculas; $"a: lista alfabética com letras minúsculas; $"I: lista numérica com números romanos maiúsculos; $"i: lista numérica com números romanos minúsculos. 3. START= n : o valor inicial da lista numerada; 4. <LI>: tópicos da lista; 5. </OL>: fim da lista numerada. 25

26 listas_numeradas.htm <LI> Tópico dois; <LI> Tópico três. </OL> </OL> </BODY> </HTML> <HTML> <HEAD> <TITLE> Listas Numeradas </TITLE> </HEAD> <BODY> <H3 align="center">listas Ordenadas - Numeradas</H3> <H4>Lista Numerada Padrão:</H4> <OL> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Numerada Padrão com START="10":</H5> <OL START="10"> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Alfabética com Letras Maiúsculas:</H5> <OL TYPE="A"> <LI> Tópico um; #"Listas de Definições: A TAG <DL>: São diferentes das outras listas, pois cada item de cada lista possui dois componentes: um tópico e a descrição do tópico. Sintaxe de comando: <DL><DT> Tópico 1<DD> Descrição do tópico 1 <DT> Tópico n <DD> Descrição do Tópico n </DL> Onde: 1. <DL>: início da lista descritiva; 2. <DT>: tópico da lista descritiva; $" não há limite para o número de tópicos; $" não é necessário a TAG </DT>; 3. <DD>: descrição da lista descritiva: $" para cada TAG <DT> existe uma TAG <DD>; $" não é necessário a TAG </DD>; 4. </DL>: fim da lista descritiva. 26

27 <HTML> <HEAD> <TITLE> Listas Descritivas </TITLE> </HEAD> <BODY> <H3><I>Exemplo de Listas Descritivas</I></H3> <DL> <DT><B>Listas Não Ordenadas:</B> <DD>As listas não ordenadas ou pontuadas inserem&nbsp<i>marcadores</i>&nbspna frente de cada item. <DT><B>Listas Ordenadas:</B> <DD>As listas ordenadas ou numeradas inserem&nbsp<i>números</i>&nbspou&nbsp <I>letras</I>&nbsp na frente de cada item. <DT><B>Listas Descritivas:</B> <DD>As listas descritivas ou de grossário são diferentes das outras listas. Cada item de uma lista descritiva tem dois componetes: um <I>tópico</I> e uma <I>descrição de tópico</i>. </DL> </BODY> </HTML> #"Listas Intercaladas: Pode ser utilizada para você criar listas hierárquicas, mesclando listas ordenadas e não numeradas. É utilizado para melhor organizar a estrutura de tópicos; utilizados como links, mapa de sites. 27

28 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto passando na tela para o texto digitado entre o início e o fim da tag. Permite que uma imagem possa correr de um lado para o outro na página também. Deve ser utilizado quando você desejar dar um destaque a uma frase, palavra ou até mesmo a um parágrafo da página. Com cautela, sem exageros para não chamar a atenção do usuário ficando voltado somente para o destaque, deixando de lado o restante da página. Comando: <MARQUEE> Texto ou imagem </MARQUEE> Atributos: 1. <MARQUEE>: $" abertura da TAG de movimento; 2. ALIGN= posição : Posição em relação ao browser, que pode ser: $" top: alinha o texto com o topo do marquee; $" middle: alinha o texto com o centro do marquee; $" bottom: alinha o texto com a base do marquee; 3. BEHAVIOR= controle : Controla o comportamento do texto dentro do marquee, que pode ser: $" scroll: faz que o texto entre por um dos cantos e saia por outro, $" slide: o texto entra por um dos cantos e do marquee e para ao chegar ao canto oposto; $" alternate: o texto fica passando de um canto para o outro dentro do marquee; 4. BGCOLOR= # : Muda a cor do fundo do marquee, valores em hexadecimais, ver tabela de cores anexas a esta apostila; 5. DIRECTION= direção : Define a direção no qual o texto se move, pode ser: $" left: faz o texto correr para a esquerda; $" right: faz o texto correr para a direita; 6. HEIGHT= altura : Define a altura do marquee, sendo que n é um valor em pixel ou um porcentual da altura da janela; 7. WIDTH= n ou n% : Define a largura do marquee, sendo que n é um valor em pixel ou um porcentual da altura da janela; 8. HSPACE= n : Define margens a esquerda e a direita do marquee, sendo que n é um valor em pixels; 9. VSPACE= n : Define margens acima e abaixo do marquee, sendo que n é um valor em pixels; 10. LOOP= n : Define quantas vezes o texto irá cruzar o marquee, sendo que n é o número de vezes. Se n for igual a 1 ou infinite, ele irá passar pelo marquee infinitamente; 11. SCROLLAMOUNT= n : 28

29 Controla a velocidade do texto, definindo o número de pixels entre cada redesenho do texto, sendo que n é o valor em pixels que separa cada redesenho do texto, quanto maior o n, maior o movimento do texto; 12. SCROLLDELAY= n : Controla a velocidade do texto ao definir os intervalos de redesenho do texto, sendo que n é o valor em milisegundos do intervalo de redesenho do texto, quanto menor o n, mais rápido o movimento do texto; 13. </MARQUEE>: Encerra a TAG marquee. Visualizando exemplo: Para visualizar o exemplo e necessário estar com o navegador aberto para execução da animação. 29

30 ENDEREÇOS Normalmente utiliza-se o final da página para colocar informações sobre o autor da página, data da última alteração e outras informações que achar necessário. Para isso utiliza-se: A TAG <ADDRESS> Comando: Tudo que fica dentro dela fica em itálico. <ADDRESS> Informações a serem dispostas sobre o autor </ADDRESS> <html> <head> <title>address</title> </head> <body bgcolor="#ffffff"> <div align="left"> <img src="../imagens/ufpel_pagina.jpg" width="307" height="254"><br> <ADDRESS> <br> </div> <ADDRESS> <br> UNIVERSIDADE FEDERAL DE PELOTAS<br> Campus Universitário, s/n - Caixa Postal 354<br> CEP Pelotas, RS - BRASIL<br> PABX: (53) FAX: (53) <br> CNPJ: / <br> <br> </ADDRESS> </ADDRESS> </body> </html> 30

31 INTERLIGANDO DOCUMENTOS LINKS O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. A interligação entre documentos não se restringe somente as ligações com outras páginas. Em páginas muito longas onde um assunto tem vários tópicos, podemos utilizar índices onde os links tem a função de interligar os tópicos de um texto e que com apenas um clique em um dos tópicos do índice, o item é exibido. LINKS PARA MESMO DIRETÓRIO: Você só precisa especificar o nome do arquivo que será chamado e a sua extensão. Sintaxe de comando: <A HREF= nome do arquivo.extensão > Texto ou imagem </A> Onde: $" A: abertura da TAG de link; $" HREF= nome do arquivo.extensão : deve ser informado o nome completo do arquivo que será acessado; $" Texto ou imagem: que servirá como link; $" /A: encerra a TAG de link. Observação: Não deixar espaço em branco entre <A> e </A>. 31

32 LINKS PARA OUTROS DIRETÓRIOS OU PASTAS: Para criar links para uma página localizada em outros diretórios é necessário indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco diferente do Windows e do DOS, veja: $" A barra utilizada para separar diretórios é a barra convencional (/); $" O ponto de partida para localizar um arquivo em outro diretório é o atual; $" Para baixar um nível deve utilizar os sinais../ ; Neste exemplo foi criado um link na página index.htm que acessa a página primeira.htm, localizada dentro da pasta página. Para inserir um link na página entrada.htm, - localizada dentro da pasta pagina - a página index.htm, que esta um diretório abaixo, temos que descer um diretório, para isso utiliza-se dois pontos.. como no exemplo ao lado: LINKS PARA OUTROS SERVIDORES: 32 Para criar um link para arquivos localizados em qualquer parte do mundo é necessário indicar a URL do arquivo. URL é a abreviatura de Uniform Resource Locator. Tem a função de especificar a localização de páginas ou arquivos em servidores da WEB. Composta de duas partes:

33 #"O protocolo Internet do documento; #"O endereço do servidor da página. Comando: <A HREF= protocolo://servidor.arquivo > Texto ou imagem </A>. Onde: protocolo: é o tipo de servidor que está sendo acessado; Os mais utilizados são: #"http: Hiper Text Transfer Protocol, é um servidor da WWW; #"ftp: File Tranfer Protocol, é um serviço para a troca de arquivos, programas entre um servidor e um computador remoto; o servidor: é o computador que contém a página; o arquivo: é o nome do arquivo (diretório e nome do arquivo). O protocolo do servidor deve ser seguido: o Dos símbolos :// ; o Do endereço do computador remoto. <body bgcolor="#ffffff"> <div align="center"> <h3>link PARA OUTROS SERVIDORES</h3> <br> <A HREF="http://www.ufpel.tche.br& quot;><a href="http://www.ufpel.tche.br"><img src="../imagens/simbolo_ufpel.gif" width="110" height="108" border="0" align="middle"></a> </A> </div> </body> LINKS PARA MESMA PÁGINA: É muito simples. Definem-se seções na página, sendo que cada terá um nome que servirá de referência para o link. ÂNCORAS: Para ter links em uma mesma página, deve-se criar uma âncora no início de cada seção que será acessada por um link. É um ponto de referência ou endereço que será acessado por um link. Utilizada para marcar o início de cada seção da página. O nome da âncora será a referência utilizada pelo link que a acessará. Para criar ou acessar uma âncora deve-se utilizar a TAG de vínculo, com atributos diferenciados. 33

34 Criando Âncoras: Com este atributo você escolhe um local da página para inserir uma âncora. Esta TAG fica invisível ao usuário. Pode ser visualizada no código fonte. Normalmente utilizado em páginas com mais de uma tela do navegador e inserida no topo do documento <A NAME= nome da seção ></A> #"A: abertura da TAG de link; #"NAME= nome da seção : cria o nome da seção, marcando o início da seção; #"Não é necessário inserir nada entre os campos <A> e </A>; #"</A>: encerra a TAG. Linkando Âncoras: Com esta TAG você irá inserir uma imagem ou texto que indica ao usuário que ao clicar neste tipo determinado de link ele irá para o local onde foi inserida uma âncora. <A HREF= #Nome da Seção > Texto ou imagem </A> $" A: abertura da TAG de link; $" HREF= #Nome da Seção : nome da seção que deve ser acessada; $" </A>: encerra a TAG de link IMPORTANTE: O símbolo # indica ao navegador que o link se encontra na mesma página. É indispensável o uso de "#. CRIANDO LINKS PARA O SEU Você deve informar o seu endereço eletrônico na TAG de LINK. Sintaxe de comando: <A HREF= mailto:endereço > Texto ou imagem </A> $" mailto: informa ao browser que o link é para um endereço eletrônico $" endereço: é o endereço de <body bgcolor="#ffffcc"> INSERINDO LINK PARA O SEU <br> <A "><a EDnio">Clique aqui<br> <img src="../imagens/ 1.gif" width="90" height="90" align="middle" border="0"><br> para enviar<br>um </a></a><br> Você pode inserir imagem, texto ou os dois conforme o exemplo para indicar seu . </div></body> 34

35 LINK DE DISPOSIÇÃO DE ARQUIVOS PARA DOWNLOADS Basta no link referenciar um arquivo com a extensão *.EXE, *.ZIP E ao clicar no link aparecerá: Clique neste ponto para salvar seu arquivo. Escolha o local de destino para salvar o seu documento. Download em andamento. Processo de cópia do arquivo e salvamento para o local de destino pré-determinado Download concluído: - Abrir: executa o arquivo do download; - Abrir pasta: pasta onde foi salvo o arquivo; - Fechar: fecha a janela de download. 35

36 IMAGENS GRÁFICAS Atualmente a maioria dos browsers exibe imagens, porém não é qualquer tipo de arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB são GIF e JPEG. GIF e JPG O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes plataformas de hardware (PC e Macintosh), suporta no máximo 256 cores e gera arquivos menores, com extensão.gif. este formato é muito utilizado para desenhos e gráficos. O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhões de cores e pode reduzir o tamanho de uma imagem até dez vezes. Gera arquivos com a extensão.jpg e.jpeg. muito utilizado para fotos. Utilizar imagens de dimensões pequenas, gravadas no formato JPEG (no caso de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas cores). Tenha cuidado com as GIFs animadas; elas podem ocupar bastante espaço em disco, dependendo do número de cores e quadros de animação. Estes cuidados também farão a sua página carregar mais rapidamente, tornando a visitação mais agradável. INSERINDO UMA IMAGEM - <IMG SRC= nome do arquivo.extensão > <IMG SRC= nome do arquivo.extensão WIDTH= n HEIGHT= n ALIGN= posição ALT= mensagem BORDER= n > Onde: SRC= nome do arquivo.extensão : é o nome do arquivo e sua extensão; imagens_graficas.htm <HTML> <HEAD> <TITLE> Imagens Gráficas </TITLE> </HEAD> <BODY> <center> <H2>INSERINDO UMA IMAGEN</H2> <BR> <h3>cancun BEACH</h3><BR> <img src="../imagens/cancun_beach.jpg"> </center> </BODY> </HTML> 36

37 DIMENSIONANDO AS IMAGENS: O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este muito utilizado para a criação de trumbnails, que são pequenas imagens que servem como links para imagens maiores. O tamanho do arquivo da imagem não é alterado. Podemos redimensionar a figura através dos atributos a seguir: 1. WIDTH= n : Altera a largura da imagem. Valores dados em pixels. 2. HEIGHT= n : Altera a altura da imagem. Valores dados em pixels. <HTML> <HEAD> <TITLE> Redimensionando Imagens Gráficas </TITLE> </HEAD> <BODY> <H2 align="center">redimensionando<br> Imagens Gráficas</H2> <CENTER> <H3>Tamanho original da paisagem: 300 x 197 pixels - 20k</H3> <p><img src="../imagens/paisagem.jpg"> <BR> widht="240" height="137"<br> <IMG SRC="../imagens/paisagem.jpg" widht="240" height="137" ALIGN="middle"><BR> widht="160" height="57"<br> <IMG SRC="../imagens/paisagem.jpg" widht="160" height="57" ALIGN="middle"> </p> </CENTER> </BODY> </HTML> Nota: As figuras redimensionadas podem perder um pouco a sua definição. ALINHAMENTO DA IMAGEM: ALIGN= posição : Em relação ao navegador: $" Right: alinhamento a direita; $" Left: alinhamento a esquerda(padrão dos navegadores); imagens_alinhadaas_navegador.htm 37

38 <HTML> <HEAD> <TITLE> Imagens Alinhadas em relação ao navegador </TITLE> </HEAD> <BODY> <h3 align="center"> Imagens Alinhadas em Relação ao Navegador </h3> <BR> Alinhamento a direita: <img src="../imagens/dexter_laboratory2.jpg" align="right" width="90" height="90"> <BR> Alinhamento a esquerda: <img src="../imagens/dexter_laboratory2.jpg" align="left" width="90" height="90"> <BR> <center>alinhamento centralizado<br> com a TAG CENTER:<br> <img src="../imagens/dexter_laboratory2.jpg" width="90" height="90"> </center> </BODY> </HTML> Em relação ao texto: $" Top: alinhamento pelo topo da imagem; $" Bottom: alinhamento pela base da imagem; $" Middle: alinhamento pelo centro da imagem; imagens_alinhadas_texto.htm <BODY> <H2> Imagens Alinhadas em Relação ao Texto </H2> <BR><BR> Alinhamento pelo topo da imagem: <img src="../imagens/praia.jpg" ALIGN="top"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> Alinhamento pela base da imagem: <img src="../imagens/praia2.jpg" ALIGN="bottom"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> Alinhamento pelo centro da imagem: <img src="../imagens/praia3.jpg" ALIGN="middle"><BR><BR> <hr align="center" size="2" widht="80%"><br><br> </BODY> 38

39 DEMAIS ATRIBUTOS $" ALT= mensagem : Este atributo tem a função de exibir uma mensagem no lugar da imagem enquanto ela é carregada. Quando o navegador não exibe imagem a mensagem é exibida em seu lugar. Também tem a função de especificar, indicar sobre uma imagem, quando o cursor é colocado sobre a imagem. imagens_com_alt.htm <HTML> <HEAD> <TITLE> Imagens com mensagens </TITLE> </HEAD> <BODY> <center><h3>iserindo UMA MENSAGEM EM UMA IMAGEM</H3> <BR> <img src="../imagens/peixes.jpg" ALT="Peixes no Lago. Este é mais um exemplo de mensagens em uma imagem. Visualizada quando o mouse passa por cima da imagem."> </center> </BODY> </HTML> $" BORDER= n : Podem ser definidas diferentes tamanhos de bordas para uma imagem, em pixels imagens_bordas.htm <BODY> <center> <H2>INSERINDO BORDAS <BR> EM IMAGENS</H2> <BR> <img src="../imagens/animaniacs.jpg" BORDER="0" ALT="Animaniacs sem bordas"> <img src="../imagens/animaniacs.jpg" BORDER="5" ALT="Animaniacs com borda 5"> <img src="../imagens/animaniacs.jpg" BORDER="10" ALT="Animaniacs com borda 10"> </center></body> 39

40 INSERINDO SOM TAG <BGSOUND> - Sem player disponível ao usuário: Este comando carrega um arquivo de áudio como trilha sonora enquanto a página esta sendo visualizada. Quando a página é encerrada a execução do som também é finalizada. Comando <BGSOUND SRC= nome_arquivo.extensão LOOP= INFINITE > #"SRC= nome_arquivo.extensão : define o nome de arquivo de áudio a ser carregado durante a execução da página. #"LOOP= n : n define quantas vezes o arquivo de áudio será executado. Se n for igual a 1 ou INFINITE, o arquivo será executado infinitamente durante a visita na página. Nota: #"Esta TAG de som pode ser inserida em qualquer ponto da página, dentro da marcação <BODY></BODY>; #"Procure não inserir arquivos de áudio muito grandes para diminuir o tempo de acesso a página para os usuários que tem conexão discada(modem 56Kb). #"Suporta os seguintes formatos de arquivos de áudio: o *.wav; o *.midi; o *.au; o *.mp3 TAG <EMBED> - Player visível ao usuário: Com esta TAG é possível o internauta interagir no som disponível na página. Comando: <embed width="120" height="50" src="nome do arquivo.extensão" autostart="false" showstatusbar="1" showdisplay="1"> #"width: largura do player #"height: altura do player #"src: local relativo ou absoluto do arquivo (.mid,.wav,.mp3,.wma;.au) #"autostart: se true, o arquivo de midia será inicializado automatimente, se false ficará em modo parado #"showstatusbar: se 1 exibe o status do arquivo de midia, se 0 oculta as informações #"showdisplay: se 1 exibe informações sobre o arquivo de midia, se 0 oculta as informações 40

41 <html> <head> <title>som NA PÁGINA - <EMBED></title> </head> <body bgcolor="#f7ffd2"> <div align="center"><embed width="120" height="45" src="../sons/avril_lavigne_complicated.mid " autostart="false"></embed><br> Neste exemplo: <br> <EMBED WIDTH="120" HEIGHT="45" SRC="../sons/complicated.midi" AUTOSTART="false"> </font></div> </body> </html> 41

42 TABELAS Muito utilizadas para organizar as páginas de internet hoje em dia. Também para modelar o layout das home pages, organizar dados na web. Pode ser inserido texto, imagens gráficas, links. Em primeiro momento você pode achar difícil a compreensão das TAG s utilizadas nas tabelas, mas isto é só num primeiro momento de contato com estes códigos. Mas depois torna-se muito fácil a sua utilização e interpretação para corrigir possíveis falhas em um editor de HTML qualquer. Pode também ser utilizada dentro de outras tabelas, melhorando a disposição dos conteúdos de sua página MARCAÇÕES BÁSICAS PARA DESENVOLVER TABELAS EM HTML: <TABLE> </TABLE>: Ete é o comando para se inserir a tabela, esta TAG deve ser encerrada. Antes e depois de inserir uma tabela, sempre acontece uma quebra de linha <TR> </TR>: Table Row Serve para inserir linhas em uma tabela <TD> </TD>: Table Data Este comando insere células, em cada linha. Define os dados da tabela. DESENVOLVENDO UMA TABELA SIMPLES: tabelas.htm <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>Primeira célula </TD><! Aqui foi criada uma célula> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Fecha a primeira linha da tabela> <TR><! Abre a segunda linha da tabela> <TD>Primeira célula </TD> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Encerra a Segunda linha da tabela> </TABLE><! Encerra a tabela> *Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela. **Nas células da tabela você pode inserir desde simples frases até figuras inteiras. ***Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc. 42

43 <TH> </TH>: Table Header Define os títulos das tabelas. Podem ser posicionados em qualquer célula.quando inserido como o Table Data, as informações contidas dentro desta TAG aparecem em negrito. tabelas_table_header.htm <table border="1" width="400"> <td>novos Cadastros</td> <th>outubro</th> <th>novembro</th> <th>dezembro</th> <th>alunos</th> <td>10</td> <td>3</td> <td>16</td> <th>professores</th> <td>3</td> <td>7</td> <td>11</td> </table> <CAPTION> </CAPTION>: Esta TAG insere a legenda da Tabela. Inserir entre <TABLE> e </TABLE>. tabela_caption.htm <table BORDER="1" WIDTH="80%"> <caption>legenda ENTRE CAPTION</caption> <th align="center">uso de Table Header - TH</th> <td align="center">uso de Table Data - TD</td> </table> 43

44 ATRIBUTOS DE CONTROLE DE TABELAS: WIDTH= valor ou % : Com este atributo é possível alterar a largura da tabela em relação ao navegador. Também a largura das células, como no exemplo que segue. Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. tabela2.htm <table BORDER="2"> <td WIDTH="25%">WIDTH=25%</td> <td ALIGN="MIDDLE" WIDTH="75%">WIDTH=75%</td> </table> <br> <br> <div align="center"> <center> <table BORDER="2"> <td WIDTH="100">WIDTH=100</td> <td ALIGN="MIDDLE" WIDTH="200">WIDTH=200 (PIXELS)</td> </table> BORDER= n : Com este abributo é possível colocar em maior destaque uma determinada tabela. O número da espessura de uma tabela é definida em pixels. tabela_atribuindo_bordas.htm <table border="5" width="300" align="center"> <td width="33%" align="center">l1 - C1</td> <td width="33%" align="center">l1 - C2</td> <td width="34%" align="center">l1 - C3</td> 44

45 <td width="33%" align="center">l2 - C1</td> <td width="33%" align="center">l2 - </td> <td width="34%" align="center">l2 - C3</td> </table> ATRIBUINDO BORDER= 3 E BORDER= 0 Sintaxe de comando: <table border="0" width="400"> <td width="50%" align="center"> Tabela com BORDER="3"&nbsp ; table border="3" width="90%"> <td width="50%" align="center">grêmio</td> <td width="50%" align="center">juventude</td> <td width="50%" align="center">pelotas</td> <td width="50%" align="center">brasil</td> </table> </td> <td width="50%" align="center"> Tabela com BORDER="0" <table border="0" width="90%"> <td width="50%" align="center">são Paulo</td> <td width="50%" align="center">bahia </td> <td width="50%" align="center">palmeiras </td> <td width="50%" align="center">internacional </td> </table> </td> </table> *Neste exemplo foram colocadas duas tabelas dentro de uma tabela. 45

46 ALIGN= posição : Este atributo controla o alinhamento do conteúdo dentro das TAG s TD, TR, TH. Podem ser: $" left: alinhamento a esquerda; $" center: alinhamento centralizado; $" right: alinhamento a direita. tabela_alinhamentos.htm <table border="1" width="474"> <td width="152" align="center"><b>p RIMEIRA CÉLULA</b></td> <td width="147" align="center"><b>s EGUNDA CÉLULA</b></td> <td width="153" align="center"><b>t ERCEIRA CÉLULA</b></td> <td width="152" align="center">align="left"</td> <td width="147" align="center"> ALIGN="center"</td> <td width="153" align="center"> ALIGN="right"</td> <td width="152">esquerda</td> <td width="147"> <p align="center">centro</td> <td width="153"> <p align="right">direita</td> </table> *Quando adicionado dentro da TAG <TABLE>, o alinhamento será em relação ao navegador, que pode ser: $" ALIGN= left : alinhamento a esquerda (padrão, não é necessário especificar); $" ALIGN= center : alinhamento centralizado; $" ALIGN= right : alinhamento a direita. 46

47 VALIGN= posição : Controla o posicionamento do conteúdo dentro dás células. Pode ser: $" top: alinhamento superior; $" middle: alinhamento centralizado; $" bottom: alinhamento inferior; Pode ser adicionado dentro das TAG s TR,TD, TH. <table border="1" width="474"> <td width="234" align="center"><b>controle do posicionamento dos conteúdos das células pode ser:</b></td> <td width="91" valign="top" align="center"><b>top</b></td> <td width="91" valign="middle" align="center"><b>middle</b></td> <td width="91" valign="bottom" align="center"><b>bottom</b></td> </table> 47

48 CELLSPACING= valor em Pixels : Este atributo compreende a distância entre células e linhas. Deve ser adicionado dentro da TAG <TABLE>. Como padrão dos navegadores a distância é 2 pixels <table border="1" width="80%" ALIGN="center" cellspacing="6"> <td width="33%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6 "</font></b></td> <td width="33%" align="center"> </td> <td width="34%" align="center"> </td> <td width="33%" align="center"> </td> <td width="33%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6"</font></b></td> <td width="34%" align="center"> </td> <td width="33%" align="center"> </td> <td width="33%" align="center"> </td> <td width="34%" align="center"><b><font size="2" face="arial Narrow">CELLSPACING="6"</font></b></td> </table> CELLPADDING= valor em pixels : Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula e suas bordas em todos os sentidos. É aplicado dentro da TAG <TABLE> 48

49 <table border="1" width="80%" align="center" cellpadding="8"> <td width="33%" align="center">pêra</td> <td width="33%" align="center">mamão</td> <td width="34%" align="center">abacaxi</td> <td width="33%" align="center">kiwi</td> <td width="33%" align="center">melancia</td> <td width="34%" align="center">morango</td > <td width="33%" align="center">abacate</td> <td width="33%" align="center">melão</td> <td width="34%" align="center">mirtilo</td> </table> NOWRAP: sem quebra de linha Este atributo evita a quebra de linha dentro da célula. O texto inserido dentro do campo não pode ser dividido em mais de uma linha. Deve ser adicionado dentro do <TD>. <table border="1" width="100%" align="center"> <td width="50%" nowrap>célula com NOWRAP. O texto fica sem quebra de linha.</td> <td width="50%">ao contrário desta célula que não foi adicionado, o texto sofre quebra de linha.</td> </table> *Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muito dos alinhamentos que encontramos na Internet é feito por intermédio de tabelas. 49

50 **Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas. ROWSPAN= n : Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma linha. Pode ser aplicado em TH ou TD, proporcionando a mesmo efeito. tabelas_rowspan.htm <table border="1" width="380" cellpading="7" align="center"> <td width="16%" rowspan="3">3 linhas</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> </table> COLSPAN= n Este atributo define quantas colunas uma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangência. 50

51 tabelas_colspan.htm <table border="1" width="80%" align="center"> <td width="24%" colspan="3">célula COM 3 COLUNAS</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> <td width="20%">coluna 1</td> <td width="20%">coluna 2</td> <td width="20%">coluna 3</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> </table> INSERINDO FIGURAS E CORES COMO PLANO DE FUNDO Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. <table border=0> <td width=150 bgcolor=red>vermelho </td> <td width=150 bgcolor=blue>azul </td> <td width=150 bgcolor=red>vemelho</td> <td width=150 bgcolor=blue>azul</td> <td width=150 bgcolor=red>vemelho</td> <td width=150 bgcolor=blue> azul</td> </table> 51

52 COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo, colocar uma imagem como fundo de uma tabela é uma técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE, basta indicar qual o endereço e o nome da figura. <TABLE BACKGROUND="nome do arquivo.extensão" BORDER=5> <TR> <TD>imagem</TD> </TR> </TABLE> USANDO TABELAS COMO MOLDURAS: Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para isto basta você iniciar uma tabela e definir um valor para BORDER. <TABLE BORDER=5> <TR> <TD> <IMG SRC=endereço/nome da figura.extensão> </TD> </TR> </TABLE> Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem sempre uma moldura em uma figura define um bom layout (aparência) na sua home-page. 52

53 FORMATANDO LINHAS INTERNAS RULES= complementos Para escolher as linhas internas que serão mostradas dentro da tabela, usamos o atributo RULES, dentro da tag <TABLE>. Os complementos desse atributo são : $" none : nenhuma linha interna ; Sem as linhas internas de uma tabela tanto horizontais quanto verticais, como pode ser visto no exemplo a seguir tabelas_rules_none.htm <table border="1" width="300" rules="none"> <td width="20%" align="center">alberto</td> <td width="20%" align="center">fabiana</td> <td width="20%" align="center">denis</td> <td width="20%" align="center">alex</td> <td width="20%" align="center">jaqueline</td> <td width="20%" align="center">lisla</td> <td width="20%" align="center">giovane</td> <td width="20%" align="center">cátia</td> <td width="20%" align="center">sandra</td> <td width="20%" align="center">darlan</td> <td width="20%" align="center">heloisa</td> <td width="20%" align="center">iara</td> </table> $" rows : sem linhas verticais internas Este complemento do atributo RULES, retira a visualização das linhas verticais internas entre cada célula da tabela. Não dedixando de permitir a organização do conteúdo interno das tabelas. tabelas_rules_rows.htm <table border="2" RULES="rows" width="300"> 53

54 <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapizeira</td> <td width="25%">calculadora</td> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </table> $" cols: sem linhas horizontais entre cada coluna da tabela ; tabelas_rules_cols.htm <table border="2" RULES="cols" width="300"> <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapiseira</td> <td width="25%">calculadora</td> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </table> 54

55 Observação: As tabelas são um recurso de modelagem das home-pages hoje em dia. Alguns comandos HTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de CELLSPACING e CELLPADDING. Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação. 55

56 FRAMES É um recurso que permite dividir uma página de internet em outras, na mesma página. Nada mais é que uma página que chama outras na página inicial que um documento html que contém frames. Também chamados de moldura. Alguns programas como o Macromedia Dreamweaver, por exemplo, em português. Em um determinado arquivo como o index.htm, é onde pode ser definido a estrutura das novas janelas para o seu HTML. O quantidade de frames utilizados é definido por <FRAMESET>, cada frame chama uma página de internet diferente, a ser apresentada em cada frame. Onde cada página de uma frame interage com outra. Normalmente é utilizado na página de abertura (index.htm). Estrutura de um frame São utilizados um conjunto de TAG s, cada qual com sua função: <FRAMESET>: É a TAG de inserção para a elaboração de um conjunto de frames com seu elementos. O FRAMESET aceita os atributos COLS e ROWS, referentes a divisão das janelas que pode ser horizontal ou vertical. E internamente só podem ser utilizadas as marcações FRAMESET, FRAME ou NOFRAMES. Atributos utilizados: #"COLS= colunas, largura : Define o número de colunas a ser utilizado, o valor pode ser em pixels ou porcentagem. É neste atributo que é definido o número de quadros usados em um frame. #"ROWS= linhas, altura : Tem a mesma função do atributo COLS, só que este é para as linhas de um frame. #"FRAMEBORDER= 0 : Você pode atribuir borda na divisa de frames, 0 sem borda e 1 com borda <FRAME>: Define o frame a ser criado. Não é utilizada a Tag de encerramento </FRAME>, pois não necessita. Define cada janela contida em um área, não necessita da TAG de finalização (/FRAME). Atributos utilizados: #"SRC= URL : Endereço do arquivo e extensão que será exibido no frame #"NAME= nome da janela : Este atributo é utilizado para associar um nome a uma janela. Utilizado para criar alvos de um frame para outro. 56

57 #"MARGINWIDTH= valor : Controla as margens de cada frame, a direita ou esquerda. Distância entre os conteúdos de cada página e as margens da janela. #"MARGINHEIGHT= valor : Tem a mesma função do MARGINWIDTH, só que controla as margens superiores e inferior. #"SCROLLING= yes, no ou auto : É um atributo opcional. Define se uma janela deve ou não possuir barra de rolagem. O padrão utilizado, caso não especificar é auto, sendo assim o seu navegador irá aplicar quando neceessário. #"NORESIZE: Este atributo não possue complementos. Quando não adicionado a TAG <FRAME>, o usuário poderá alterar o tamanho das janelas, movendo as bordas das janelas com o cursor. Por padrão todas as janelas podem ter seu tamanho alterado, mas é bom colocar este atributo para não modificar o layout de sua página. <NOFRAMES>: Esta TAG é utilizada para informar a alguns usuários de que seu navegador de internet não suporta FRAMES. Hoje em dia a maioria dos navegadores não tem este problema, como os antigos navegadores IE 2.0. Permite a navegação em primeira página somente. Sendo assim colocar as informações de como atualizar o navegador do usuário para poder visualizar a sua página corretamente. Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de frameset. <FRAMESET> <NOFRAMES> Informações a serem dispostas aqui sobre a impossibilidade de navegar com frames em uma página. </NOFRAMES> </FRAMESET> INTERLIGANDO DOCUMENTOS ENTRE FRAMES: A marcação: TARGET= complementos : Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma determinada página irá abrir, ou seja, em que frame específico deverá aparecer. Complementos do atributo alvo (TARGET): #"nome do frame: Indica em qual frame deverá ser aberta a nova janela indicada por um link em um frame diferente. Não é necessário indicar caso a janela a ser aberta deverá ser localizada no mesmo frame; #"_blank: Convenciona ao navegador que ele deverá abrir uma janela, em branco por um determinado link, para visualizar a página indicada por ele; 57

58 EXEMPLO USO DE FRAMES: Criar uma página principal: frames.htm Subdividida em dois frames, dispostos em colunas: Coluna 1 25% de largura Nome: frame_1.htm Coluna 2 - * de largura O navegador disponibilizará a esta janela o restante da tela utilizada pelo navegador para o lado direito Nome: frame_2.htm Arquivo: frame_1.htm <html> <head> <title>frame 1</title> </head><body><div align="center"> <font size="4" face="arial Black">FRAME 1.HTM</font><br><a href="frame_2.htm" target="frame_2">frame 2 (Página Inicial)</a><br><br><br> <a href="frames_ancoras.htm" target="frame_2">âncoras</a><br> <a href="frames_imagens_fundo.htm" target="frame_2">backgrounds na Página</a><a href="frames_tabela _backgrounds.htm" target="frame_2"> Backgrounds em Tabelas</a></div> </body> </html> Arquivo: frame_2.htm <html> <head> <title>frame 2</title> </head> <body> <div align="center"> <font size="4" face="arial Black"> FRAME 2.HTM <br><br> PÁGINA INICIAL </font> </div> </body> </html> 58

59 INTERLIGANDO OS DOCUMENTOS PARA A PÁGINA COM FRAMES: Arquivo: frames.htm <html> <head> <title> *** PÁGINA COM FRAMES *** </title> </head> <frameset cols="25%,*" frameborder="1"> <frame name="frame_1" src="frame_1.htm" noresize scrolling="no"> <frame name="frame_2" src="frame_2.htm" noresize scrolling="auto"> <noframes> Seu computador não comporta frames <br><br> Atualize a versão do seu navegador: <br><br><a href="http://d ownload.micr osoft.com/do wnload/ie6sp 1/finrel/6_sp 1/ W98NT42K MeXP/PT- BR/ie6setup. exe"> --- CLIQUE AQUI --- </a> </noframes> </frameset> </html> 59

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

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

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

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

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

> 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

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

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

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

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

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

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

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

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

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

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos CURSO BÁSICO DE HTML Alessandro S Silveira Lista de tags e atributos Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como

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

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

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

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

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

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

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

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

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

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 As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

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

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

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

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

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

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

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

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

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

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

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

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

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

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

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

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

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

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

Oficina de Construção de Páginas Web

Oficina de Construção de Páginas Web COMPETÊNCIAS BÁSICAS EM TIC NAS EB1 Oficina de Construção de Páginas Web Criação e Publicação Guião Páginas WWW com o editor do Microsoft Office Word 2003 1. Introdução. 2. Abrir uma página Web. 3. Guardar

Leia mais

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO SUMÁRIO 01 - INTRODUÇÃO 02 - INICIANDO O WORD 03 - INSERIR TEXTO 04 - SALVAR UM DOCUMENTO 05 - FECHAR UM DOCUMENTO 06 - INICIAR UM NOVO DOCUMENTO 07 - ABRIR UM DOCUMENTO 08 - SELECIONAR TEXTO 09 - RECORTAR,

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

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

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

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

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas

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

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço

Leia mais

Introdução ao HTML. Sumário

Introdução ao HTML. Sumário Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1 em HTML Para inserir uma imagem basta usar a etiqueta da seguinte

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Web Design Aula 01. No Caderno Responda as Questões abaixo

Web Design Aula 01. No Caderno Responda as Questões abaixo Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?

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

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

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

APOSTILA DE FRONTPAGE 2000

APOSTILA DE FRONTPAGE 2000 APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias

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

WEB DESIGNER PASSO A PASSO PARA INICIANTES WWW.LIGG3.COM.BR WWW.LIGG3.COM.BR. Bem vindo a este manual de guia Passo a Passo para Web Designer.

WEB DESIGNER PASSO A PASSO PARA INICIANTES WWW.LIGG3.COM.BR WWW.LIGG3.COM.BR. Bem vindo a este manual de guia Passo a Passo para Web Designer. INTRODUÇÃO Bem vindo a este manual de guia Passo a Passo para Web Designer. Com o avanço cada vez mais da Internet é necessário mais do que nunca você está dentro da Rede Mundial de Computadores, a Net

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

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

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

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

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

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Em dupla: (se sobrar um aluno poderemos ter apenas um trio). Construir um site de 10 páginas, no mínimo, sendo a primeira o INDEX; O site deverá

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

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

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

6.2 - Formulários: 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

Microsoft Word INTRODUÇÃO

Microsoft Word INTRODUÇÃO INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,

Leia mais

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01

Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0. Tutorial HTML. versão 4.01 Fone: (19) 3234-4864 E-mail: editora@komedi.com.br Site: www.komedi.com.br HTM3.0 Tutorial HTML versão 4.01 K O M Σ D I Copyright by Editora Komedi, 2007 Dados para Catalogação Rimoli, Monica Alvarez Chaves,

Leia mais

BrOffice.org - Impress

BrOffice.org - Impress BrOffice.org Impress 1 BrOffice.org - Impress Programa de apresentação, utilizado para criação e manipulação de slides. Os slides criados para uma eletrônica podem conter texto, gráficos, objetos, formas,

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

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo:

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a> O que é o HTML? HTML significa HyperText Markup Language, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples:

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

Leia mais