1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?"

Transcrição

1 HTML

2 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados de tags. Trata-se de uma linguagem muito simples, que tem como finalidade básica formatar as imagens e os textos exibidos e criar ligações entre páginas Web, criando, assim, documentos com o conceito de hipertexto. Como em qualquer outra linguagem, o programador deve escrever o códigofonte seguindo as regras de sintaxe da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos da Web. Em março de 1989, Tim Berners-Lee, do European Laboratory for Particle Physics (mais conhecido como CERN), propôs um novo conjunto de protocolos para um sistema de distribuição de informações da Internet, a ser usado entre os diversos grupos de pesquisa em física de altas energias. Os protocolos da WWW foram logo adotados por outras organizações, as quais formaram um consórcio chamado de W3 Consortium, que uniu seus recursos de modo a prosseguir com o desenvolvimento de padrões WWW. Esse consórcio é liderado pelo MIT (Massachusetts Institute of Technology), pelo CERN e pelo INRA (French National Institute for Research in Computer Science and Control). Ele propõe recursos mais recentes e sofisticados de HTML, avalia sugestões e implementações alternativas e publica novos níveis de versões do padrão HTML. Existem vários programas para editoração HTML, que tornaria nosso trabalho muito mais fácil e nos acomodaria como usuários-finais que não entendem o que estão fazendo. Por isso, usaremos o Bloco de Notas (NotePad) do Windows. Apesar dessa aparente sofisticação, as páginas Web não passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o NotePad do Windows. A diferença é que as páginas Web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas também para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas Web, HTML. O primeiro conceito que se deve ter em mente ao projetar páginas Web é que HTML não foi criada para controlar a aparência dos documentos, ao contrário dos processadores de texto e programas de layout de página. Como dissemos há pouco, as tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Elas dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na Web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensação, é muito simples criar uma página básica para colocar na Internet com HTML. Neste capítulo, apresentamos um exemplo que, aos poucos, ficará mais sofisticado. 1.1 Como são as marcações (tags) HTML? As marcações do HTML tags consistem no sinal < (o símbolo de menor que ), seguido pelo nome da marcação e fechado por > (o símbolo de maior que ). De um modo geral, as tags aparecem em pares, como: <H1> Cabeçalho</ H1>. O símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de cabeçalho e </H1> avisa que o cabeçalho acabou. Há exceções a esse funcionamento em pares das marcações. Por exemplo, a que indica um final de parágrafo: <P> não necessita de uma correspondente: </P>. A marcação que indica quebra de linha <br> também não precisa de uma correspondente, e outras tais como <hr> e <li>. Para estudarmos HTML, usaremos o já conhecido Bloco de Notas e um browser (Internet Explorer ou Netscape). Para os nossos exemplos, será usado o Internet Explorer. 103

3 1.2 Estrutura básica de uma página Uma página HTML deve ser dividida em duas partes: Head (cabeça) e Body (corpo). Veja um exemplo de estrutura, construindo sua primeira página. Não é recomendável que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado. Por exemplo, quando alguém copia uma página Web e a envia para outra pessoa através de correio eletrônico. Para contornar esse problema, existe uma tabela de códigos que substituem os acentos. Os navegadores transformam esses códigos em caracteres acentuados, e o documento pode ser transmitido por qualquer meio. Sugestão: o documento pode ser escrito com os acentos e, antes de ir para o servidor da Web, é submetido a uma macro de processador de texto para substituí-lo pelos códigos HTML. Tags usadas no 1º exemplo: Vá até a opção Arquivo Salvar Como do seu Bloco de Notas, e salve o exemplo acima como AULA. HTM. Ao abrir o arquivo no browser, sua primeira página ficou assim: A tag <HTML> será usada em conjunto com a tag de fechamento </HTML> e será colocada no início e no final do documento, delimitando a área onde serão colocadas as tags HTML. A tag <HEAD> também terá sua tag de fechamento </HEAD> e servirá para delimitar uma área de cabeçalho com poucas tags (não é necessário ter essa tag para sua página funcionar). 1.3 Títulos Todo documento em HTML deve possuir um título. De um modo geral, o título aparece em lugar separado da página (por exemplo, no alto da tela no Internet Explore), e é utilizado para identificar o documento em outros contextos (por exemplo, buscas do Google). É interessante que o título possa sugerir claramente o conteúdo do documento. A tag <TITLE> será usada dentro das tags <HEAD> e servirá apenas para colocar um título que aparecerá na barra de título do seu browser (não se esqueça do </TITLE>).

4 1.4 Parágrafos A marcação <p> é utilizada para definir o início de um novo parágrafo, deixando uma linha em branco entre cada parágrafo. HTML não reconhece o caractere de quebra de linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web só reconhecem o início de um novo parágrafo mediante a marcação apropriada. Existem algumas exceções. Por exemplo, inserindo uma marcação de parágrafo depois de <P>, <lli>,<hy> e outras, esta será ignorada. 1.5 Cabeçalhos Cabeçalhos normalmente são usados para títulos e subtítulos de uma página. HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito. O primeiro cabeçalho em cada documento deve estar marcado como <H1>. Atenção: ao definir o tamanho de um cabeçalho, você não está definindo o tamanho da letra (fonte 10, fonte 14). Você apenas define que ele aparecerá com maior tamanho e destaque que o resto do texto. O tamanho exato com que ele será visualizado é definido pelo programa visualizador de HTML (browser) de cada pessoa que acessar a informação. As notações relativas a cabeçalhos são: <Hy>Texto do cabeçalho </Hy>, onde y é um número entre 1 e 6 especificando o nível do cabeçalho. O conjunto de notações possíveis é o que se segue: <H1>Headings</H1> <H2>Headings</H2> <H3>Headings</H3> <H4>Headings</H4> <H5>Headings</H5> <H6>Headings</H6> 1.6 Quebras de linha A marcação <br> faz uma quebra de linha sem acrescentar espaço extra entre as linhas. Veja a diferença do uso de <p> e <br>, nos exemplos a seguir. <! Início do Documento HTML> <html> <head> <title>melhorando Minha Home Page</title> <meta name= author content= NMBS Informática > <meta name= keywords content= html, homepages > </head> <! Início do Corpo da Página> <body> <h1>este é o título Principal</h1> <h2>este é o título Secundário</h2> <h3>estou adorando criar páginas</h3> <hr> <p>este é o 1º Primeiro Parágrafo <br> Esta é 2ª Linha do 1º Parágrafo <p>com este recurso inicio um parágrafo<br> E com este recurso quebro uma linha <hr> <! Fim do Corpo da Página> 105

5 </body> Marcação Função Características </html> <! Fim do Documento HTML> Dica: chamar de forma automática uma outra página, com o comando <meta>, que é muito usado quando uma página mudou de endereço. Exemplo: <meta httpequiv = Refresh content = 16; URL = >. O comando <meta> tem que ficar dentro do comando <head>. O valor 16 representa o tempo (em segundos) de espera para mudar para outra página, pois nela pode haver alguma mensagem que o usuário precisa ler. A URL indica o endereço da página para onde o usuário será transportado. Marcação Alguns comandos utilizados neste capítulo: <HTML></HTML> Função Delimita o documento (início e fim) Características Esta marcação deve ser inserida imediatamente no início e no final de todo arquivo HTML. <! > <meta> Comentário Marca as metas. Servem para você especificar o autor, as palavras-chaves, a descrição da página, etc. Indicação de quaisquer comentários, tais como nome do autor, data de criação, software utilizado para autoria, etc. Não é visualizado na página HTML (só quando solicitado o source file ).Também deve aparecer na área definida como head do documento. Dentro da tag <meta>, há os comandos name e content. No comando name! você especifica qual informação quer dar, e no content você descreve a informação<meta name = author content = NMBS Informática ><meta name= keywords content = html, homepages >. <HEAD></HEAD> <TITLE></TITLE> Cabeçalho Título do documento O cabeçalho de um arquivo HTML é uma área para inserção de informações que não serão visíveis na página HTML, tais como title e comentários. Nome a ser atribuído ao documento HTML, mas que não será visualizado na página. Deve sempre aparecer na área definida como head do documento. <BODY></BODY> Corpo do documento Delimita o corpo do documento. Vem imediatamente abaixo da área definida como head. Essa marcação deve ser fechada somente ao final do documento, imediatamente seguida da marcação </html>.

6 Exemplo de como devem aparecer distribuídas no arquivo as marcações acima citadas: <html> <head> <title> Título do documento</title> <! autor: Aluno de IMI> <! última atualização: 30/02/2001> </head> <body> Blá blá blá... aqui entra o conteúdo da página... blá... </body> </html> <Hy></Hy> <P> Títulos ou cabeçalhos na página y = número de 1 a 6 Parágrafo Existem seis níveis de cabeçalho na página (não confundir com cabeçalho do documento = head): <h1> </h1>, <h2></h2>, etc. Sendo h1 o maior, e h6 o menor nível. Atenção: marcações hy definem o tamanho relativo do texto e o colocam em destaque (normalmente em negrito). Insere uma linha em branco entre dois parágrafos. <BODY BACKGROUND= J > </BODY> Imagem de fundo J = arquivo imagem ou URL de arquivo imagem. Insere uma imagem como fundo da página (mais ou menos como uma marca d água).o arquivo deve estar em formato.gif. Esse arquivo pode estar na mesma máquina (anotar sua path/nome) ou em outra máquina (indicar por URL). <BR> Quebra de linha Faz uma quebra de linha. <BODY BGCOLOR= #rrggbb > </BODY> Cor padrão de fundo #rrggbb = código de cores RGB (ver tabela de cores neste documento). Define uma cor de fundo padrão para a página. A cor pode variar de monitor para monitor. <BODY TEXT= #rrggbb LINK= #rrggbb VLINK= #rrggbb ALINK= #rrggbb > </BODY> Cores do texto do documento. #rrggbb = código de cores RGB (ver tabela de cores neste documento). Define a cor para: text = texto normal da página; link = links da página; vlink = links consultados na página; alink = links ativados na página. 107

7 2. BARRA HORIZONTAL 2.3 Largura Páginas HTML podem possuir barras horizontais (Horizontal Rule, tag <HR>). Essas podem ser de alinhamento, largura e comprimento distintos. A tag <HR>, diferentemente da maior parte das tags, não necessita ser fechada. Todas as definições necessárias para a <HR> devem estar contidas dentro da tag. Exemplo: Fonte Aqui escrevemos o texto 1 <HR>e aqui o texto Alinhamento Saída Aqui escrevemos o texto 1. Aqui, o texto 2. Para que se altere o alinhamento da barra horizontal, insere-se o atributo opcional ALIGN. Esse pode ter os valores RIGHT, LEFT ou CENTER. Para alterar a largura da barra horizontal, insere-se o atributo opcional SIZE. Esse pode ser definido como percentual da altura da parte visível do browser ou em pixels. <HR WIDTH= 350" SIZE= 5"> Definida altura de 5 pixels para a barra horizontal. <HR WIDTH= 85% SIZE= 9% > Definida altura de 9% da largura da página para a barra horizontal. 2.4 Preenchimento Ao definir uma barra horizontal, ela terá seu meio transparente. É possível preencher esse meio utilizando o atributo opcional NOSHADE. Quando inserido o atributo, a barra horizontal passa a ser de apenas uma cor única e sólida (a cor padrão é cinza). <HR WIDTH= 350" SIZE= 5" NOSHADE 2.2 Comprimento Para alterar o comprimento da barra horizontal, insere-se o atributo WIDTH. Esse pode conter valores em pixels ou percentual da largura da página. A única diferença entre as formas de definição de comprimento da barra é o símbolo %. <HR WIDTH= 350"> Definido tamanho de 350 pixels para a barra horizontal. <HR WIDTH= 85% > Definido tamanho de 85% da largura da página para a barra horizontal. A utilização de % é justificada quando a definição de vídeo do usuário e visitante de sua página for diferente da que é adotada pelo designer. Dessa forma, usuários que tenham definição de vídeo de 800 x 600 ou 640 x 480, enquanto o designer confeccionou a página com monitor definido para 1024 x 768, visualizarão a página com barra horizontal de tamanhos semelhantes.

8 3. CORES Quando pensamos no design de páginas de Internet, logo pensamos em textos, imagens e cores, de plano de fundo ou de fontes. Em páginas HTML, a definição de cores é extremamente simples. Para que se defina a cor padrão de textos na página de Internet, insere-se junto da tag <BODY> o atributo opcional TEXT, seguido de uma das 16 cores básicas: <BODY TEXT= RED > Outra forma de definir cores, diferentes das 16 básicas, é atribuindo valores de uma cominação de intensidades das três cores somáticas básicas: RGB RED (vermelha), GREEN (verde) e BLUE (azul). Essa definição de intensidade pode ser feita de dois modos: através de caracteres hexadecimais ou decimais, sendo que os primeiros são mais utilizados. <BODY TEXT= #0000FF > Hexadecimal <BODY TEXT=RGB(0,0,255)> Decimal A intensidade de cada uma das cores RGB pode ser de 0 (zero) a 255. No caso da definição decimal, é bastante simples. Apenas é inserido um número entre 0 (zero) e 255 em cada um dos campos. Para que seja definida a intensidade das cores RGB com definição Hexadecimal, a cada dois caracteres temos uma cor diferente, na mesma ordem da definição decimal. A contagem, portanto, é feita da seguinte maneira: para caracteres de 0 (zero) a 9, os números são 00 a 09. Para números entre 10 e 15, de 0A até 0F. Note que o primeiro caractere continuou sendo zero; para números entre 16 e 31, temos, portanto, valores entre 10 (lê-se um zero) até 1F; para criarmos uma fórmula de conversão de números de decimais para hexadecimais, temos, portanto, o seguinte: NÚMERO DECIMAL 16 RESTO PRIMEIRO CARACTERE (SEGUNDO CARACTERE) A divisão inteira de um número decimal por 16 é o primeiro caractere. O segundo é o resto. Dessa forma, se desejamos inserir como intensidade zero para vermelho, 128 para verde e 128 para azul, temos então o texto como: <BODY TEXT= #008080"> sendo que 00=zero, 80=128 e 80=128. O formato de LINKS também pode ser alterado, seguindo o mesmo raciocínio. Na tag <BODY>, podemos inserir os atributos opcionais ALINK (ACTIVE LINK ou link ativo) e VLINK (VISITED LINK ou link visitado). Como exemplo, definiremos a fonte e os links visitados na cor ciano escuro, definidos no exemplo anterior (#008080), e os links não-visitados na cor preta. <BODY TEXT= #008080" VLINK= #008080" ALINK= #000000"> <BODY TEXT=RGB(0,128,128) VLINK=RGB(0,128,128) ALINK= RGB(0,0,0)> <BODY TEXT= #008080" VLINK=RGB(0,128,128) ALINK= BLACK Qualquer dos exemplos acima terá o mesmo resultado. Existe ainda outro atributo opcional que poderá modificar o layout da página HTML: o segundo plano ou plano de fundo (BACKGROUND), que pode ser definido como figura (veja capítulo sobre imagens) ou como uma cor sólida (BGCOLOR). Para definirmos o BGCOLOR de uma cor diferente, utilizamos o atributo opcional do <BODY> BGCOLOR (BACKGROUND COLOR) <BODY TEXT = # VLINK= #008080" ALINK= #000000" BGCOLOR= #E0E0D0" É possível que sejam definidas cores diferentes para partes distintas do documento, assim como é possível que seja definida fonte para essas partes. Para que possamos definir uma fonte diferente para cada parte do documento, adicionaremos a tag <FONT> e, nela, o atributo opcional FACE: <FONT FACE= VERDANA >TEXTO EM FONTE DIFERENTE</FONT Na mesma tag, podemos inserir cores e tamanhos para que esse texto se sobressaia em relação aos demais: <FONT FACE= VERDANA SIZE= 5" COLOR= #444444">TEXTO EM FONTE DIFERENTE</FONT> 109

9 Importante: a tag <FONT> deve ser fechada com </FONT>, caso contrário, todo o texto que suceder dessa tag receberá esse formato definido. O texto definido com fonte VERDANA, cinza escuro e tamanho, 5 termina na tag </FONT>. A combinação de tags em páginas HTML pode definir uma infinidade de formas e cores. Caso a definição de um link esteja fora da tag <FONT>, essa fonte não será a definida no BODY, mas a definida na tag, não havendo, portanto, diferença entre links ativos e visitados (veja mais detalhes sobre links em capítulo específico). <A HREF= > <FONT FACE= VERDANA SIZE= 5" COLOR= #44D4F4">UNB</FONT> </A> Dica: utilize cores de fontes que contrastem com a cor do segundo plano (atributo BGCOLOR) ou com a figura de papel de parede (atributo BACKGROUND). 4. FORMATAÇÃO DE TEXTOS Agora, você vai aprender um pouco mais sobre HTML visualizando como algumas páginas foram construídas. A forma pela qual a codificação HTML é implementada faz com que o códigofonte das páginas seja transparente para qualquer usuário. Assim, para visualizar o código-fonte de uma página, clique com o botão direito sobre ela e escolha a opção View source code. 4.1 Tags de formação <STRONG> Forte ênfase, mostrado normalmente em negrito. Ex.: Antes de enviar um , confira o campo Subject:! <B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado). <I> Itálico (em alguns casos, caracteres apenas inclinados). <TT> Tipo teletype: fonte de espaçamento fixo. <U> Sublinhado: deve ser usado com cuidado, pois se confunde com a apresentação de links. <STRIKE> ou <S> Frase riscada <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H 2 O. <SUP> Frase em estilo expoente, como em Km 2. <BLOCKQUOTE>

10 Como fazer uma citação em uma página HTML? É usado para citações longas: <blockquote>a massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parecenos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, Uma Breve História do Tempo ). A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, Uma Breve História do Tempo ). 4.2 Caracteres especiais HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caractere < < > > & & Outras seqüências de escape suportam caracteres ISO Latin1. Temos, a seguir, uma tabela com os caracteres mais utilizados em Português. Entidade Caractere Entidade Caractere á á Á Á â â Â Â à à À À ã ã Ã Ã ç ç Ç Ç é é É É ê ê Ê Ê í í Í Í ó ó Ó Ó ô ô Ô Ô õ õ Õ Õ ú ú Ú Ú ü ü Ü Ü Como vemos, as seqüências de escape são sensíveis à caixa. Ao usar caracteres acentuados, pode-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo: <HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV= Content-Type CONTENT= text/html; charset=iso "> </HEAD>... Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML 3.2. Por exemplo,, que é o símbolo, para, e para. Também se pode usar seqüências com códigos ASCII, por exemplo: Qué pasa, señor? 111

11 5. INSERÇÃO DE IMAGENS A tag <IMG> define uma imagem. No nosso exemplo, a árvore de diretórios é exatamente a definida abaixo, junto à figura imagem2.jpg: Imagem2.jpg 400 x 277 pixels Para que se possa definir a fotografia acima em nossa página index.html, escreveremos o seguinte: <IMG SRC= imagem2.jpg > Em nossa página arquivo2.html, para que possamos definir a mesma imagem, é necessário escrever o seguinte, visto que a fotografia encontra-se no diretório acima: <IMG SRC=../imagem2.jpg > Para definir o tamanho da figura (altura e largura), podemos utilizar os atributos opcionais HEIGHT e WIDTH: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400"> No exemplo acima, a imagem2.jpg, que aparecerá no arquivo2.html, não terá distorções de altura e largura, mas é possível alterar seu tamanho definindo outros valores para HEIGHT e WIDTH. Para que coloquemos bordas na imagem, deveremos inserir o atributo opcional BORDER, atribuindo a esse um valor diferente de zero: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" border= 1"> O valor dado ao atributo BORDER é a largura da borda que a imagem terá, definida em pixels. Para definir uma imagem sem bordas, escreva BORDER= 0. O atributo ALT define uma mensagem que poderá ser apresentada ao parar com o mouse sobre a figura: <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" border= 0" ALT= CIDADE >. Pode-se ajustar o espaço não-preenchido entre uma imagem e outra, entre uma imagem e o texto que a precede ou a sucede, ou entre essa imagem e bordas de tabelas. Para definir esse espaço, usa-se o atributo opcional HSPACE. Ao dar um valor (em pixels) a esse atributo, o espaço não será preenchido por outra imagem ou texto, ficando apenas o BACKGROUND aparecendo. <IMG SRC=../imagem2.jpg HEIGHT= 277" WIDTH= 400" ALT= CIDADE hspace= 5"> Com esse valor, a imagem ficará isolada 5 pixels à esquerda e à direita de outra imagem, texto ou borda. Uma imagem pode ser referenciada relativamente, como nos exemplos acima, ou absolutamente. No caso de definição absoluta, define-se o caminho de uma imagem, contendo o protocolo, em quase todos os casos, HTTP, como no exemplo abaixo: <IMG SRC= ALT= UnB > No caso acima, sempre que a Universidade de Brasília alterar seu logotipo, a página que referencia essa figura também terá sua imagem alterada. BACKGROUND Imagem2.GIF figura de tamanho 1600 x 128 pixels É possível definir uma imagem a ser repetida indefinidas vezes, atrás de tudo que é definido na página HTML. Podemos definir a figura abaixo como nosso papel de parede, plano de fundo ou, se preferir, BACKGROUND. No caso acima, a imagem será repetida indefinidas vezes, horizontalmente e verticalmente, até o final da página em cada um dos sentidos. A imagem2.gif foi escolhida para BACKGROUND por ser uma figura de baixo contraste e que verticalmente pode ser repetida indefinidas vezes, sem que isso prejudique o layout da página, ou a repetição vertical da figura possa ser notada. Para definir a imagem como BACKGROUND, escreve-se na tag <BODY>, do arquivo index.html: <BODY background= imagem1.gif >.

12 6. LINKS Link é vínculo entre dois arquivos distintos, usando o atributo HREF, junto da tag <A>. Em linguagem HTML, o link é representado pela tag A HREF=, que possui a seguinte sintaxe: <A HREF= ARQUIVO DE DESTINO >TEXTO ONDE O USUÁRIO CLICARÁ</A>. O TEXTO ONDE O USUÁRIO CLICARÁ aparecerá na cor de links não-visitados, definida pelo usuário (em geral, azul) ou na cor que a página indica, e sublinhado. Um link pode fazer referência a um arquivo que se encontra em certo caminho em relação à página visitada ou pode referenciar-se a uma página que está fora da árvore de diretórios, não podendo ser referenciada relativamente. 6.1 Link com referência relativa Um link com referência relativa é normalmente usado quando a página de destino encontra-se na mesma árvore de diretórios da página de origem. Obs.: para definir o acento agudo na letra a, em códigos do padrão HTML, escreve-se á, sem aspas. Para escrever é, escreve-se, portanto, é. Caso deseje da sua página arquivo2.html voltar para a página Index.html, a sintaxe ficará da seguinte forma: <A HREF=../Index.html >Volta para pagina Index</A>. 6.2 Link com referência absoluta Link com referência absoluta é normalmente usado quando o arquivo de destino encontra-se fora da árvore de diretórios da página de origem. Para que se possa diferenciar um link de referência absoluta de um link de referência relativa, usa-se no link de referência absoluta o protocolo de comunicação utilizado para que se tenha acesso à página (normalmente ). Exemplo: Para que coloquemos um link que referencie a página da Universidade de Brasília, em nosso arquivo HTML, escreveremos o seguinte: <A HREF= > Universidade de Brasília</A>. No exemplo abaixo, a página Index.html referenciará a página arquivo.html de forma relativa, portanto a sintaxe da tag ficará da seguinte maneira: <A HREF= diretorio1/arquivo.html>clique aqui para ir para a página arquivo</a>. Dessa forma, a frase clique aqui... aparecerá na cor definida na página ou na configuração do Internet Explorer, se não houver definições de tanto. Para ir da página arquivo.html para a página arquivo2.html, deverá estar escrito no código fonte o que se segue: <A HREF=../diretorio3/arquivo2.html >clicando nesta frase, você irá para a página arquivo2</a>. 6.3 Atribuindo um link em uma imagem É possível atribuir um link a uma imagem, fazendo com que, ao ser clicado, acesse o arquivo apontado. Para tanto, utiliza-se, no lugar de uma seqüência de palavras, a tag de imagem, como no exemplo abaixo, que insere um link na imagem1.gif, que se encontra na página arquivo.html, para a página arquivo2.html: <A HREF=../diretorio3/arquivo2.html ><img src=../imagem1.gif ></A> Assim, ao clicar com o mouse na imagem1.gif, essa abrirá a página arquivo2.html. 6.4 Atributos opcionais COORDS e SHAPE É possível atribuir um mapa dentro da imagem. Como exemplo, citaremos o mapa mundi. Esse mapa pode ser constituído de apenas uma imagem, mas ao clicar em determinados países, podem abrir-se páginas específicas de cada país. 113

13 Ao atribuir SHAPE= RECT (retângulo), é possível atribuir uma área retangular para ser clicada, na imagem, atribuindo COORDS= ESQUERDA,CIMA,DIREITA,BAIXO (ou ainda, podemos pensar como retas, na forma de y1, x1, y2, x2, respectivamente). Toda a área formada por retas que partem da esquerda para a direita, da primeira para a terceira coordenada, e de cima para baixo, da segunda para a quarta, é, portanto, um link. Nota: a imagem deve ser maior que as coordenadas, sob pena de má interpretação do servidor de Internet. <A HREF=../diretorio3/arquivo2.html shape= rect coords= 1,1,20,25"><img src=../imagem1.gif ></A>. Nesse exemplo, a imagem1.gif, ao ser clicada em toda a área que vai do ponto superior onde cruzam as retas x1=1, y2=1 até o ponto onde se cruzam as retas x2=25, y2=20, abrirá o arquivo2.html. Ao atribuir SHAPE= CIRC (circular), é possível atribuir uma área elíptica para ser clicada, na imagem, atribuindo COORDS= CENTROX,CENTROY,RAIO (ou ainda, podemos pensar como coordenadas do centro da imagem e raio, respectivamente). Toda a área formada pelo círculo de raio=raio e centro nas coordenadas CENTROX e CENTROY, é, portanto, um link. <A HREF=../diretorio3/arquivo2.html shape= circ coords= 20,20,15"><img src=../imagem2.gif ></A> Nesse exemplo, a imagem2.gif, ao ser clicada em toda a área formada pelo círculo centrado na coordenada X=20, Y=20 e de raio=15, abrirá o arquivo2.html. Ao atribuir SHAPE= POLY (polígono), é possível atribuir uma área poligonal para ser clicada, na imagem, atribuindo COORDS= X1,Y1, X2,Y2,..., Xn,Yn. Toda a área interna da figura formada pelas retas que vão do ponto X1,Y1 até X2,Y2, e desse até X3,Y3, etc. até Xn,Yn, e desse até X1,Y1, é, portanto, um link. TARGET Define onde o arquivo vinculado abrirá. TARGET= _blank a URL alvo abrirá em uma nova janela do Internet Explorer; TARGET= _self a URL alvo abrirá no mesmo frame no qual o link foi clicado; TARGET= _parent a URL abrirá no frameset pai; TARGET= _top a URL alvo abrirá em toda a janela. Exemplo: Na página Index.html, ao clicar no link definido pelo código abaixo, a página arquivo.html abrirá em nova janela do Internet Explorer. <A HREF= diretorio1/arquivo.html TARGET= _BLANK >arquivo</a>. 6.5 Âncora ou Bookmark Âncora é um local na página HTML que pode ser referenciado por um link, localizando-o com mais facilidade. Uma âncora é normalmente usada quando a página é verticalmente muito extensa, dificultando a localização de certas partes de um texto. Imaginemos agora um artigo de uma monografia escrita em uma única página HTML. Para que se possa localizar um capítulo específico, o autor dessa monografia colocará no princípio de cada capítulo uma âncora de nome CAPÍTULO, seguido do número do capítulo (CAPÍTULO 1, CAPÍTULO 2). Dessa forma, para criar uma referência na mesma página para essa âncora, escreve-se o seguinte: No link que se encontra na mesma página: <A HREF= #CAPITULO1">Capítulo1</A>. Caso a página arquivo2.html seja a monografia e exista link na página Index.html: <A HREF= diretorio/arquivo2.html#capitulo1">capítulo1</a>. Na âncora, para que seja definida: <A NAME= CAPITULO1"></A>Capítulo1</P>. Seguindo esse raciocínio, seria possível criar uma página HTML, com a seguinte forma: <BODY LINK= #0000ff VLINK= #800080"> <FONT FACE= Verdana ><P>Índice:</P> <P><AHREF= #Introducao ><FONTFACE= Verdana SIZE=1>Introdução</ FONT></A></P> <P><A HREF= #CAPITULO1"><FONT FACE= Verdana SIZE=1>Capítulo 1</FONT></A></P>

14 <P><AHREF= #CAPITULO2"><FONT FACE= Verdana SIZE=1>Capítulo 2</FONT></A></P> <P><AHREF= #CAPITULO3"><FONT FACE= Verdana SIZE=1>Capítulo 3</FONT></A></P> <FONT FACE= Verdana ><P> </P> <P> </P> <P> </P> <P>Introdução</P> <P>Texto</P> <P>Texto</P> <P><A NAME= Introducao ><A NAME= CAPITULO1">Capítulo 1</A></A></P> <P>Texto</P> <P>Texto</P> <P><A NAME= CAPITULO2">Capítulo 2</A></P> <P>Texto</P> <P>Texto</P> <P><A NAME= CAPITULO3">Capítulo 3</A></P> <P>Texto</P> <P>Texto</P></FONT></BODY> 7. TABELAS As tabelas utilizadas em HTML possuem várias tags para sua construção e formatação. A principal tag é a <TABLE> e o seu respectivo final </TABLE>. Abaixo, à esquerda, temos o exemplo de uma tabela simples com três linhas e duas colunas. Obs.: : blank space ou espaço em branco. ç : cê cedilha ( ç ). ã : a com til ( ã ). A seguir, temos o resultado do código HTML acima. Perceba que, no código acima, não temos as tags essenciais de uma página HTML. Assim, para a tabela abaixo aparecer em uma página HTML, deve-se ter as tags como <table>... </table>, <head>... </head> e <body>... </body>. Existe também a tag <th>... </th> que pode substituir a tag <td>... </td>. A única diferença entre as duas tags é que o <th> indica uma célula como se fosse um título. Assim, ela negrita automaticamente o texto da célula. No entanto, outra forma de negritar o texto da célula é colocar <td><b>... </b></td>. 115

15 7.1 Mesclando células O HTML permite que células sejam mescladas tanto de uma linha para outra quanto de uma coluna para outra Mesclando células em colunas diferentes De modo semelhante ao colspan, temos o parâmetro rowspan, que mescla as células em linhas diferentes. Portanto, se quisermos mesclar as primeiras células das linhas um e dois, colocaremos o padrão rowspan na primeira célula e simplesmente omitiremos a segunda célula. A seguir, vemos o exemplo do código e o seu respectivo resultado. <table border= 1"> <td colspan= 2">linha 1, coluna 1</td> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> <td>linha 3, coluna 1</td> <td>linha 3, coluna 2</td> </table> Para mesclar células em colunas diferentes, deve-se utilizar o parâmetro colspan na tag <td> indicando quantas células a célula deverá ocupar. No exemplo inicial de tabelas, podemos fazer com que as células da primeira linha fiquem como uma só. 7.2 Parâmetro cellpadding Se você desejar que o texto fique mais distante das bordas da célula, use o parâmetro cellpadding, na tag <table>. A seguir, temos o exemplo da primeira tabela deste capítulo com um espaçamento maior Mesclando células em linhas diferentes

16 7.3 Parâmetro cellspacing 7.4 Definindo cor de fundo e imagem de fundo para a tabela Outro parâmetro interessante em tabelas é o cellspacing. Por meio dele, podese definir o espaçamento entre as células. Do mesmo modo que o parâmetro cellpadding, ele deve ser utilizado na tag <table>. Abaixo, temos o primeiro exemplo do capítulo alterado com o parâmetro cellspacing. Deve-se perceber que se o parâmetro border tiver seu valor aumentado, a tabela dará uma impressão de estar mais fora do monitor, ou seja, parecerá que a borda tem três dimensões. Faça o teste e verifique como ficaria o exemplo acima com o parâmetro border= 10". De forma análoga, se você especificar que o valor de border é zero, então sua tabela não terá borda aparente. <table border= 1" cellspacing= 10"> </table> Trecho do código HTML <td>linha 1, coluna 1</td> <td>linha 1, coluna 2</td> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> <td>linha 3, coluna 1</td> <td>linha 3, coluna 2</td> Resultado A tabela HTML também pode ter como plano de fundo uma cor ou uma imagem, assim como a página HTML. Para definir a cor de fundo da tabela, utilize o parâmetro BGCOLOR na tag <table>. A seguir, temos um exemplo de como isso funciona. Também se pode utilizar o parâmetro BGCOLOR em <td>. Assim, a célula especificada terá uma cor diferente das demais. Trecho do código HTML <table border= 1" bgcolor= red > <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> De forma análoga, temos o parâmetro background. Nele, definimos a imagem de fundo que a tabela ou a célula terá. A seguir, o exemplo. Trecho do código HTML <table border= 1" background= imi.gif cellpadding= 10" cellspacing= 10"> <td>célula 1</td> <td>célula 2</td> <td>célula 3</td> <td>célula 4</td> </table> Resultado Resultado 117

17 7.5 Alinhando o texto dentro da célula Podemos alinhar o texto dentro de uma célula utilizando o parâmetro ALIGN com os valores LEFT, CENTER e RIGHT. Veja o exemplo a seguir. 7.6 O parâmetro frame <table border= 1"> <th colspan= 2">Horas estudadas no dia</th> <th align= center >Aluno</th> <th align= center >Qtd horas</th> <td>chiquinho</td> <td align= right >10</td> <td>zezinho</td> <td align= right >10</td> </table> Trecho do código HTML Resultado Existe um parâmetro da tabela que define como serão suas bordas. Assim, podemos definir se queremos bordas somente abaixo de cada célula, somente do lado direito, etc. Ao lado, temos um exemplo do parâmetro frame na tag <table> utilizando como valor below.. Trecho do código HTML <table frame= below > <td>primeira</td> <td>linha</td> <td>segunda</td> <td>linha</td> </table> Na tabela abaixo, temos outros valores para o parâmetro below e suas respectivas funções. Valor de frame Função border Padrão da tabela. Se for omitido, a tabela ficará igual. box O mesmo que border. Se for omitido, a tabela ficará igual. void Omite as bordas. O mesmo que border= 0". above Deixa as bordas somente acima das células. below Deixa as bordas somente abaixo das células. hsides Deixa somente as bordas horizontais. vsides Deixa somente as bordas verticais. lhs Deixa somente as bordas à esquerda. rhs Deixa somente as bordas à direita. 7.7 Referências sobre tabelas Resultado No link você encontrará uma ótima referência sobre todos os links discutidos neste capítulo e todos os outros do HTML 4.01.

18 8. FRAMES Atividade 1. Escolha um tema e faça uma tabela, utilizando todos esses recursos: várias células e colunas; células mescladas em linhas diferentes e outras colunas diferentes; espaçamento entre o texto e a borda da célula e entre as células; uma cor de fundo definida para a tabela e uma diferente para pelo menos uma das células; alinhamentos diferentes do texto dentro da célula; somente bordas horizontais. Os frames são divisões da tela do browser em diversas telas (ou quadros ). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. É muito fácil colocar frames em páginas; porém, nem todos os usuários gostam deles. Uma página com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS= 20%, 80% > <FRAME SRC= indice1.html > <FRAME SRC= apresenta.html NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo à página do assunto X!</h2> <P> Blá blá blá blá blá blá blá blá blá blá </BODY> </NOFRAME> </FRAMESET> </HTML> A parte FRAMESET define a divisão da página em quadros. Nesse exemplo, a página será dividida em dois quadros, sendo o primeiro com 20% do tamanho da tela, e o segundo, com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são as referências às páginas que serão mostradas nos frames definidos. Assim, aqui vemos que a página indice1.html será mostrada no primeiro quadro (que ocupará 20% da tela), e apresenta.html será mostrada no segundo (ocupando 80% da tela). A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam a apresentação de frames. 119

19

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

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

Profa. Reane Franco Goulart

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

Leia mais

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

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

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

Leia mais

A estrutura de um documento HTML apresenta os seguintes componentes:

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

Leia mais

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

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

Leia mais

> 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

Web Design Aula 11: XHTML

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

Leia mais

Desenvolvimento em Ambiente Web. HTML - Introdução

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

Leia mais

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

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

Leia mais

Links e Frames José Antônio da Cunha

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

Leia mais

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

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

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

Leia mais

Programação de Servidores CST Redes de Computadores

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

Leia mais

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

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

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

Leia mais

André Kawamoto NE31A

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

Leia mais

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

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

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

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

Leia mais

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

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

Leia mais

Scientific Electronic Library Online

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

Leia mais

Certificado ISO 9001:2000 Nº 23.0021/98. Centro de Informática CETEP Quintino www.ciquintino.com.br. Elaborada por: Wanderson Mirandela

Certificado ISO 9001:2000 Nº 23.0021/98. Centro de Informática CETEP Quintino www.ciquintino.com.br. Elaborada por: Wanderson Mirandela Certificado ISO 9001:2000 Nº 23.0021/98 Centro de Informática CETEP Quintino www.ciquintino.com.br Elaborada por: Wanderson Mirandela A POLÍTICA DA QUALIDADE DO CI Prover cursos de nível básico profissionalizante

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

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

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

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

CRIAÇÃO DE SITES (AULA 3)

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

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

Leia mais

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

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

Leia mais

Aula 2: Listas e Links

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

Leia mais

Unidade IV Introdução à Linguagem PHP Parte 1

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

Leia mais

Portal do Projeto Tempo de Ser

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

Leia mais

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

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

Leia mais

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

Introdução à Linguagem HTML

Introdução à Linguagem HTML Introdução à Linguagem HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto do "casamento" dos padrões HyTime e SGML.; HyTime - Hypermedia/Time-based Document Structuring

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

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

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

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

Leia mais

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

Universidade Federal do Espírito Santo

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

Leia mais

Web Design Livre. do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius

Web Design Livre. do GIMP ao HTML <HTML> Jezmael Basilio Marcos Vinícius Web Design Livre do GIMP ao HTML Jezmael Basilio Marcos Vinícius GIMP 1. Introdução GIMP é o acrônimo para GNU Image Manipulation Program (Programa de Manipulação de Imagens do GNU). Como o próprio

Leia mais

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

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

Leia mais

HTML Página 1. Índice

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

Leia mais

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

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

HTML Página 29. Índice

HTML Página 29. Índice PARTE - 5 HTML Página 29 Índice HTML - Hiperlinks... 30 Frames com links... 31 O código fonte do arquivo índex.htm... 31 Conhecendo os comandos border e bordercolor do frame... 31 Conhecendo os comandos

Leia mais

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

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

Leia mais

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

Guia da Internet. Página 1

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

Leia mais

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

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

Leia mais

Prova de pré-requisito

Prova de pré-requisito Prova de pré-requisito PHP & MySQL: Técnicas para Web 2.0 1 - Qual das opções constrói a tabela abaixo: DIA MÊS ANO 28 04 1988 22 02 2002 a) b) c) dia mês ano

Leia mais

Layouts de páginas com HTML e CSS

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

Leia mais

REVISÃO DAS PUBLICAÇÕES

REVISÃO DAS PUBLICAÇÕES O arquivo index.htm. Código fonte. REVISÃO DAS PUBLICAÇÕES Erros que podem ocorrer: Verificar a barra ( / ) que fecha as marcações; Inverter os comandos FRAMESET E FRAME SRC; Espaço entre a marcação FRAME

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

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

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

Relatório: Página HTML

Relatório: Página HTML Universidade do Minho Escola de Engenharia Relatório: Disciplina: Linguagens de Programação Curso: Engenharia e Gestão Industrial Carolina Fernandes N.º40532 Guilherme Bacinello N.º42119 Diana Rocha N.º40536

Leia mais

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

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

Leia mais

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

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

Leia mais

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

COMPETÊNCIAS BÁSICAS EM TIC NAS EB1. Oficina da Internet

COMPETÊNCIAS BÁSICAS EM TIC NAS EB1. Oficina da Internet COMPETÊNCIAS BÁSICAS EM TIC NAS EB1 Oficina da Internet Utilização Educativa da Internet Guião de iniciação à consulta e pesquisa de informação na Web Índice Introdução... 2 Alguns conceitos básicos...2

Leia mais

Manual do Usuário Publicador

Manual do Usuário Publicador Manual do Usuário Publicador Portal STN SERPRO Superintendência de Desenvolvimento SUPDE Setor de Desenvolvimento de Sítios e Portais DEDS2 Versão 1.1 Fevereiro 2014 Sumário Sobre o Manual... 3 Objetivo...

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

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

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

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

Leia mais

Introdução à Tecnologia Web 2010

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

Leia mais

ROBERTO OLIVEIRA CUNHA

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

Leia mais

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

Manual de Publicação Wordpress

Manual de Publicação Wordpress Fundação Universidade Federal de Mato Grosso do Sul Manual de Publicação Wordpress Núcleo de Tecnologia da Informação - UFMS Maurílio Mussi Montanha 2014 Sumário 1 Introdução... 3 2 ACESSO À INTERFACE

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

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

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

Aula de JavaScript 05/03/10

Aula de JavaScript 05/03/10 Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive

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

UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE

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

Leia mais

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

Noções de Informática

Noções de Informática Noções de Informática Caderno 2 CONTEÚDO MS-Excel 2010: estrutura básica das planilhas, conceitos de células, linhas, colunas, pastas e gráficos, elaboração de tabelas e gráficos, uso de fórmulas, funções

Leia mais

Índice. 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8

Índice. 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8 Textos no Flash Índice 1. Texto no Flash...1 1.1. Static Text (texto estático)...1 1.2. Dynamic Text (Texto Dinâmico)...3 1.3. Input Text...7 1.4. Exercício...8 1. Texto no Flash Há três maneiras de se

Leia mais

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

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

Treinamento em BrOffice.org Writer

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

Leia mais

Curso 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

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

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

Leia mais

Ajuda On-line - Sistema de Relacionamento com o Cliente. Versão 1.1

Ajuda On-line - Sistema de Relacionamento com o Cliente. Versão 1.1 Ajuda On-line - Sistema de Relacionamento com o Cliente Versão 1.1 Sumário Sistema de Relacionamento com Cliente 3 1 Introdução... ao Ambiente do Sistema 4 Acessando... o Sistema 4 Sobre a Tela... do Sistema

Leia mais

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto. Apostila de web estático Prof. Eduardo 2 CAPÍTULO PADRÕES DE FUNDO Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação

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

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

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

Leia mais

Questões de Informática 2011 - Editores de Texto

Questões de Informática 2011 - Editores de Texto 1. Existe uma operação específica no Word que serve para destacar um texto selecionado colocando uma moldura colorida em sua volta, como uma caneta "destaque" (iluminadora). Trata-se de a) "Cor da borda".

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

Web design & HTML. avançado

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

Leia mais

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