Subunidade 2 - Construção de páginas web

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Subunidade 2 - Construção de páginas web"

Transcrição

1 Unidade 4 Concepção de web sites. Subunidade 2 - Construção de páginas web -Introdução ao HTML o Tags e elementos o Estrutura básica de uma página em HTML o As tags HTML, HEAD, TITLE e BODY o Definições de character entities o Tags elementares o Listas o Definição do fundo da página o Texto nas páginas em HTML o Uso das cores o Uso de imagens o Hiperligações o Image maps o Inserção de elementos multimédia o Tabelas o Formulários o Molduras (frames) o Promoção do web site o Todos os elementos do HTML ordenados alfabeticamente o Truques e Dicas o Bibliografia - 1 -

2 1. Introdução ao HTML A linguagem HTML significa Hypertext Markup Language Linguagem de Marcação de Hipertexto. É uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hipertexto é muito simples: certos itens de um documento contêm uma ligação a outra zona do mesmo documento ou, como é mais vulgar a outros documentos. A principal aplicação do HTML é a criação de páginas da WEB, e convém esclarecer que não se trata de uma linguagem de programação. O HTML é uma espécie de linguagem de formatação, um ficheiro de texto que é formatado através de um série de comandos designado por TAGS GS. Para criar uma página HTML, não é necessário nenhum software especial. O Notepad do Windows é suficiente para a criação de uma página. Para testar a página é necessário um Browser (Netscape Communicator e/ou Microsoft Internet Explorer). TAGS (Marcações) e elementos As tags consistem do sinal (<), (o símbolo de menor que ), seguida pelo nome da marcação e fechada por (>) ( maior que ). Todas as tags de formatação devem ser abertas e fechadas. O símbolo que termina uma determinada tag é igual aquele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. Exemplo: <tag> </tag> Todas as tags obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a> - Correcto <a> <b> <c> </a> </b> </c> - Incorrecto O primeiro a abrir é o último a fechar, e vice-versa. Existem algumas excessões das tags: a tag que indica um final de parágrafo: <P>, não necessita de fechar: </P>. A tag que indica quebra de linha - <br> - também não precisa de fechar, e outras tais como <hr> e <li>. A linguagem HTML não diferencia as maiúsculas das minúsculas (não é Case Sensitive), pois se escrever uma tag como <html>, <HTML>, <Html>, <html> ou <HtMl>, o comando é o mesmo e os browsers vão interpretá-lo da mesma forma

3 Estrutura básica de uma página em HTML Existem quatro pares de tags que devem ser sempre colocados na página. As tags <HTML> e </HTML> devem englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao browser que se trata de um documento HTML. O documento, por sua vez, está dividido em duas partes: o cabeçalho e o corpo do texto, cada um indicado por tags diferente. Tudo que estiver entre <HEAD> e </HEAD> irá compor o cabeçalho, não aparecendo na página. O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre <TITLE> e </TITLE>. Por fim, existe o <BODY> Y> e </BODY> Y>, que serve para indicar o corpo do texto. Exemplo: <HTML> <HEAD> Cabeçalho do documento </HEAD> <BODY> Corpo do Documento </BODY> </HTML> As tags HTML, HEAD, TITLE e BODY As tags <HTML> e </HTML> servem para indicar ao browser onde começa e termina um documento. As tags <HEAD> e </HEAD> determina os comandos que devem ser lidos antes de carregar o texto HTML, como por exemplo, métodos de abertura da página, linguagens incorporadas ao texto e o título da página. A utilização da tag HEAD é opcional, porém ferramentas de pesquisa como o Google utilizam esta tag como parâmetro para encontrar palavras-chave que identificarão um site. As tags que podem ser colocadas na parte HEAD são: base, link, meta, title, style, script

4 Base: define o URL do documento actual. Exemplo: <base href=http://www.alcobias.net> Link: estabelece uma organização hierárquica para a navegação entre documentos Exemplo: <link rel= index href= index.html > <link rel= previous href= anterior.html > <link rel= next href= seguinte.html > Meta Meta: serve para definir os atributos identificadores do site como por exemplo o autor da página, os direitos de autor e as palavras-chaves. Sintaxe: <META NAME= [author/copyright/keywords] CONTENT= [Valor do atributo] > Exemplo: <META NAME= author CONTENT= > Atributos: NAME identifica o identificador que se vai adicionar à página, podendo ser: - AUTHOR: autor da página. - COPYRIGHT: direitos de autor - KEYWORDS: palavras-chave, utilizadas por ferramentas de pesquisa para conhecer o conteúdo do site. CONTENT determina o conteúdo do identificador. Se um item possuir mais do que um identificador, então é necessário separá-los por vírgulas. Exemplo: <HEAD> </HEAD> <META NAME= author CONTENT= > <META NAME= copyrigt CONTENT= Paula Alcobia > <META NAME= Keywords CONTENT= API A, Curso Tecnológico de Informática, 11º Ano, Aplicações Informáticas > - 4 -

5 HTTP-EQUIV= REFRESH Um recurso da tag Meta que determina um tempo em segundos, antes que o browser seja direccionado para outra página. Exemplo: <html> <head> </head> <META HTTP-EQUIV= REFRESH CONTENT= 5; URL=http:// > veja esta página por 5 segundos e depois verá o portal alcobia. </html> TITLE é responsável por identificar o título da página, colocando na janela do browser, ou seja na barra de títulos. Sixtaxe: <TITLE> [Título da página] </TITLE> Exemplo: <head> <title> Página Pessoal da </title> </head> STYLE STYLE- define um estilo embutido na página. Exemplo: <style type= Text/css > h1.mine{text-align:center;color:blue}</style> Script Script- inclui scripts no documento. Estes são executados pela ordem que aparecem no documento. Exemplo: <HEAD> <SCRIPT LANGUAGE= JavaScript >document.write( o meu primeiro script ) </script> </HEAD> - 5 -

6 As tags <body> e </body> delimitam o corpo do documento. Estas contêm as tags e o texto que formam o conteúdo principal da página web, por exemplo parágrafos, listas, imagens, hiperligações entre outros. Definições de character entities Alguns caracteres tem um significado próprio para o html e por isso, são caracteres reservados, como, por exemplo o símbolo <. Para poder visualizar estes caracteres é necessário recorrer ao uso de character entities. O character entity é composto por: -o E comercial(&), o nome ou número da entidade precedido de cardinal(#) e o símbolo ponto e vírgula(;). Alguns character entities: Os caracteres acentuados O HTML 4.01 suporta o conjunto de caracteres ISO (Latin-1,) que contém os caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracteres acentuados da língua portuguesa podem ser todos obtidos usando este conjunto de caracteres. Os caracteres da primeira metade do conjunto ISO (códigos desde 0 a 127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destes caracteres pode ser usada directamente sem necessidade de recorrer a entidades porque estão sempre disponíveis em todas as máquinas qualquer que seja a sua configuração. Os caracteres finais do conjunto ISO (códigos desde 160 até 255) podem ser usados recorrendo a nomes de entidade de carácter definidos em HTML. Nota: os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscula.) - 6 -

7 Entidades para caracteres do conjunto ISO (não ASCII) - 7 -

8 - 8 -

9 Entidades HTML não pertencentes ao conjunto ISO

10 EXERCÍCIO 1 Grupo I Assinale com uma cruz a resposta correcta 1. HTML significa:!a) HyperText Manipulation Language.!b) HyperText Markup Language.!c) HyperText Make Language. 2. Em HTML o tag obrigatório no início de cada página é:!a) <HEAD>!b) <TITLE>!c) <HTML> 3. Todos os tags de formatação devem ser abertos e fechados. Para fechar um tag utilizo o caracter:!a) /!b) \!c) % 4. Para inserir um titulo na página HTML utilizo o tag <TITLE>. Este tem que ser colocado na área:!a) <HEAD>!b) <BODY>!c) <FOOTER> 5. Qual destas tags está realmente certa?:!a) <BODY>!b) <body>!c) </Body>!d) Todas!e) nenhuma das anteriores

11 Grupo II 1. Todas as páginas em HTML contêm duas partes. a. Indique quais? b. Diga o que contém cada uma delas. 2. Indique se o fecho dos seguintes tags estão correctos. Porquê? <a> <b> <c> </a> </b> </c> 3. Na sua opinião, a tag <META> é útil? 4.Indique os nomes das entidades para escrever os caracteres maior que e menor que. 5.Escreva o código HTML atribuindo o seguinte: título à página: Exercício 1 nome do autor; direitos de autor deverá ser atribuído à Escola SJE palavra-chave = exercicios e HTML

12 EXERCÍCIO 2 Criar a primeira página HTML 1º - Abra o Bloco de notas. 2º - Escreva a seguinte tag: <HTML> 3º- Escreva: <HEAD> 4º- Escreva: <TITLE>A minha primeira página HTML</TITLE> 5º- Feche agora o cabeçalho de sua página. 6º- Escreva: </HEAD> <BODY> 7º - Para inserir texto escreva: Páginas HTML podem ser criadas em qualquer editor de texto. Ex: Bloco de notas. A página deve ser guardada com a extensão.htm ou.html. 8º - Feche o corpo da página: </BODY> 9º- Feche a página: </HTML> 10º - Grave a página com o seguinte nome: exercicio2.html 11º - Abre o browser e veja a sua página

13 Cabeçalhos Tags elementares No corpo do texto podem ser colocados até seis níveis de cabeçalhos. A hierarquia começa em <H1>, como o maior cabeçalho, e termina em <H6>, como o menor. Os cabeçalhos <H5> e <H6> aparecem tão pequenos no browser que provavelmente nunca serão usados. Exemplo: <h1>isto é um cabeçalho</h1> <h2>isto é um cabeçalho</h2> <h3>isto é um cabeçalho</h3> <h4>isto é um cabeçalho</h4> <h5>isto é um cabeçalho</h5> <h6>isto é um cabeçalho</h6> O HTML adiciona de forma automática uma linha em branco antes e depois de um cabeçalho. Parágrafos A tag <P> serve para indicar o início de um novo parágrafo. Se a tag <P> for colocado antes de um cabeçalho (<H2>, por exemplo), a marca de parágrafo é ignorada. Nesse caso, o próprio cabeçalho se encarrega de colocar o espaço necessário. Exemplo: <p>isto é um parágrafo</p> Quebras de Linhas Assim como as marcas de parágrafo, as quebras de linha são indicadas por uma tag simples. Para abrir uma nova linha, usa-se a tag <BR>ou "line break". Exemplo: Isto<br> é um pará-<br>grafo A tag<br> é uma tag vazia. Ela não pode ter qualquer conteúdo e não tem tag de fim (fecho.)

14 Divisões Para dividir uma página com linhas horizontais utiliza-se a tag <hr>. O hr não possui uma tag de fecho. O quadro seguinte define os vários atributos desta tag. Exemplo: Isto é algum texto <hr> Isto é mais texto o output fica assim: Comentários As tags de comentário são especiais porque não se escrevem da mesma forma que as tags que representam elementos normais. Os comentários servem para dizer ao browser que o seu conteúdo é um comentário e não pode ser apresentado graficamente. O exemplo seguinte mostra um comentário: <!-- Isto é um comentário --> O facto de termos um ponto de exclamação no início diz ao browser que esta é uma tag especial, a qual não representa um elemento normal da linguagem HTML

15 Listas Listas Ordenadas As listas ordenadas são delimitadas pelas tags <ol> e </ol> e cada um dos seus itens é delimitado pelas tags <li> e </li>. <LI> - Marca um item de lista. Pode ser usado com os tags <DL>, <UL>, <OL>, <DIR> e <MENU>. Exemplo: <UL> <LI>Item 1 <LI>Item 2 </UL> Aceito por: todos os browsers Atributos TYPE=n: modifica o tipo de marca que será colocada antes de cada item da lista. Quando utilizado numa lista ordenada (<OL>), pode modificar o tipo de marca para um círculo ou um quadrado. TYPE=CIRCLE coloca um círculo vazio (uma falha no Netscape 2.0 para Windows faz com que a mesma opção produza um quadrado vazio). TYPE=DISC coloca um círculo cheio. TYPE=SQUARE coloca um quadrado cheio. Quando utilizado numa lista não ordenada, modifica o tipo de caractere que é utilizado para a contagem. TYPE=A ou TYPE=a coloca marcas em ordem alfabética (A, B, C ou a, b, c). TYPE=1 marca os itens em ordem numérica. TYPE=I ou TYPE=i marca os itens com números romanos (I, II, III ou i, ii, iii). Exemplo: ou <UL> <LI TYPE=square>Item 1 <LI> </UL> <OL> <LI TYPE=a>Item 1 <LI>Item 2 </OL> Aceito por: Netscape 1.1 e Internet Explorer

16 <MENU> e </MENU> - Marcam o início e o fim de uma lista. Devem ser usados junto com a tag <LI>. Exemplo: <MENU> <LI>Item 1 <LI>Item 2 </MENU> Aceito por: todos os browsers <DIR> e </DIR> - Marcam o início e o fim de uma lista. Devem ser usados junto com a tag <LI>. Exemplo: <DIR> <LI>Item 1 <LI>Item 2 </DIR> Aceito por: todos os browsers <OL> e </OL> - Marcam o início e o fim de uma lista ordenada. Os itens da lista são colocados em ordem e recebem na primeira linha um número ou letra. Devem ser usados junto com a tag <LI>. Exemplo: <OL> <LI>Item 1 <LI>Iem 2 </OL> Aceito por: todos os browsers Atributo STAR ART=n T=n: especifica o número a partir do qual os itens da lista começam a ser contados. Sendo que n pode ser um número ou uma letra. Também podem ser utilizados números romanos. Exemplo: <OL START=3> <LI>Item 1 <LI>Item 2 </OL> Aceito por: Internet Explorer e Netscape

17 Listas Não Ordenadas(Desordenadas) As listas não ordenadas são delimitadas pelas tags <ul> e </ul> e cada um dos seus itens é delimitado pelas tags <li> e </li>. <UL> e </UL> - Marcam o início e o fim de uma lista não ordenada. Deve ser usado junto com a tag <LI>. Os itens da lista recebem marcas gráficas na primeira linha conhecidas como bullets. Exemplo: <UL> <LI>Item 1 <LI>Item 2 </UL> Aceito por: todos os browsers Listas de definições As listas de definição são delimitadas pelas tags <dl> e </dl>.por sua vez, cada um dos seus itens é delimitado pelas tags <dt> e </dt> e cada uma das suas definições delimitado pelas tags <dd> e </dd>. <DL> e </DL> - Marcam o início e o fim de uma lista de definição. Devem ser usados com as tags <DT> e <DD>. Exemplo: <DL> <DT>Título</DT> <DD>Texto</DD> <DT>Título</DT> <DD>Texto</DD> </DL> Aceito por: todos os browsers

18 <DT> e </DT> - Marcam os títulos de uma lista de definição. Devem ser usados junto com as tags <DL> e <DD>. Exemplo: <DL> <DT>Título</DT> <DD>Texto</DD> <DT>Título</DT> <DD>Texto</DD> </DL> Aceito por: todos os browsers <DD> e </DD> - Marcam o início e o fim do texto de uma lista de definição. Devem ser usados junto com os tags <DL> e <DT>. Exemplo: <DL> <DT>Título</DT> <DD>Texto</DD> <DT>Título</DT> <DD>Texto</DD> </DL> Aceito por: todos os browsers Resumo dos elementos para as Listas

19 EXERCÍCIO 3 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags das listas ordenadas e cabeçalhos: <h4>lista Ordenada com números:</h4> <ol> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com letras maiúsculas:</h4> <ol type="a"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com letras minúsculas:</h4> <ol type="a"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol>

20 <h4>lista Ordenada com números romanos (maiúsculas):</h4> <ol type="i"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> <h4>lista Ordenada com números romanos (minúsculas):</h4> <ol type="i"> <li>espinafres</li> <li>ervilhas</li> <li>cenouras</li> <li>alfaces</li> </ol> 4º - Feche as tags body e html 5º - Grave o exercício com o seguinte nome: lordenadas.html

21 EXERCÍCIO 4 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags das listas não ordenadas e cabeçalhos: <h4>lista com discos como marca:</h4> <ul type="disc"> <li>leite</li> <li>água</li> <li>café</li> <li>galão</li> </ul> <h4>lista com anéis como marca:</h4> <ul type="circle"> <li>leite</li> <li>água</li> <li>café</li> <li>galão</li> </ul> <h4>lista com quadrados como marca:</h4> <ul type="square"> <li>leite</li> <li>água</li> <li>café</li> <li>galão</li> </ul> 4º - Feche as tags body e html 5º - Grave o exercício com o seguinte nome: lnordenadas.html

22 EXERCÍCIO 5 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags das listas encaixadas: <h4>listas encaixadas:</h4> <ul> <li>leite</li> <li>bebidas de menina </li> <ul> <li>cházinho</li> <li>garoto</li> </ul> </li> <li>chocolate</li> <li>café</li> </ul> 4º - Feche as tags body e html 5º - Grave o exercício com o seguinte nome: lencaixadas.html

23 EXERCÍCIO 6 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags das listas de definição: <h4>uma Lista de Definições:</h4> <dl> <dt>rum</dt> <dd>bebida com alto teor alcoólico. </dd> <dt>água das pedras</dt> <dd>bebida para senhoras.</dd> </dl> <dt>bagaço</dt> <dd>bebida para Homens.</dd> 4º - Feche as tags body e html 5º - Grave o exercício com o seguinte nome: ldefinicao.html

24 Definição do fundo da página A definição do fundo de um página pode ser feita através da atribuição de uma cor ou de uma imagem. Para a definição do fundo da página utilizam-se os atributos bgcolor e background da tag <body>. O atributo bgcolor O atributo bgcolor permite-nos escolher a cor de fundo da página. Existem três formas de indicar a cor de fundo da página: usando um código de cor hexadecimal um código rgb e um nome de cor. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Todas estas formas são válidas para atribuir a cor preta ao fundo da página. O atributo background O atributo "background" estabelece que o padrão de fundo da página é dado por uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimensões da imagem forem inferiores às dimensões da página o browser repetirá a imagem por forma a ocupar todo o fundo da página. Marca de água <body background= bonecos.gif"> <body background="http://www.clipart.com/smile.gif"> No Internet Explorer pode-se controlar o comportamento da imagem de fundo, o background. Foi criado um atributo para o tag <BODY> chamado BGPROPERTIES. Com a opção BGPROPERTIES=FIXED. O recurso dá a impressão da página ter uma marca d água e de que o texto flutua sobre o fundo. <body background=fundo.gif BGPROPERTIES=FIXED> Dicas Sempre que usar uma imagem de fundo deve-se ter em consideração os seguintes aspectos: o tamanho da imagem (em KBytes) não ser demasiado grande. se a imagem de fundo combina bem com a cor do texto. se o fundo combina bem com as outras imagens que tem na página. se da repetição a imagem de fundo em mosaico resulta um padrão perfeito. se a imagem não é incomodativa e não desvia a atenção do texto

25 Texto nas páginas em HTML A linguagem HTML define vários elementos para formatar texto, como por exemplo escrever em negrito, itálico, ou sublinhado. Estilos de caracteres Exemplo: <B>Texto em negrito</b> <I>Texto em itálico</i> <U> Texto sublinhado </U> As tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos. <B><I>Texto em negrito e itálico</i></b><p> <B><TT>Texto monoespaçado em negrito</tt></b><p> <I><TT>Texto monoespaçado em itálico</tt></i><p> <B><TT><I>Texto monoespaçado em negrito e itálico</i></tt></b>

26 Para alterar a cor, o tipo de letra e o seu tamanho nos documentos HTML, utiliza-se a tag <font> que pode conter os atributos opcionais size, color e face. Tamanhos de caracteres -atributo SIZE da tag <FONT> Exemplo: <FONT SIZE=7>Texto</FONT> A tag <FONT> pode ser atribuído a qualquer parte do texto, com excepção dos títulos (<H1>, <H2> etc.). Os valores do atributo SIZE variam de 1 a 7.O tamanho normal do texto nos browsers é equivalente a SIZE=3. <FONT SIZE=7>Texto com FONT SIZE=7</FONT><P> A tag <FONT> também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo. <FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT> Também é possível modificar o tamanho de todo o texto de uma vez só colocando a tag <BASEFONT> no topo do texto. Exemplo: <BASEFONT SIZE=5> <body> <FONT SIZE=7>Texto com FONT SIZE=7</FONT><P> <FONT SIZE=6>Texto com FONT SIZE=6</FONT><P> <FONT SIZE=5>Texto com FONT SIZE=5</FONT><P> <FONT SIZE=4>Texto com FONT SIZE=4</FONT><P> <FONT SIZE=3>Texto com FONT SIZE=3</FONT><P> <FONT SIZE=2>Texto com FONT SIZE=2</FONT><P> <FONT SIZE=1>Texto com FONT SIZE=1</FONT><P> <FONT SIZE= -2">Texto com FONT SIZE=-2</FONT><P> <FONT SIZE= -1">Texto com FONT SIZE=-1</FONT><P> <FONT SIZE= +1">Texto com FONT SIZE=+1</FONT><P> <FONT SIZE= +2">Texto com FONT SIZE=+2</FONT><P> <FONT SIZE= +3">Texto com FONT SIZE=+3</FONT><P> <FONT SIZE= +4">Texto com FONT SIZE=+4</FONT><P> </body>

27 Cores <FONT COLOR=FFFFFF>Texto na cor branca</font> ou <FONT COLOR=WHITE>Texto na cor branca</font> Tipo ipo de Fontes Um dos tipos de fontes mais comum é o ARIAL. Exemplo: <FONT FACE=ARIAL><H1>Título principal</h1> Alinhamento A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (com o qual vêm configurados os browsers) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo ALIGN dentro das tags que marcam os títulos e os parágrafos. <H1 ALIGN=CENTER>Título</H1> <P ALIGN=CENTER>Este é um parágrafo centralizado.</p> Desta vez, a tag <P> ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar uma tag (</P>) para indicar que apenas aquele parágrafo receberá um alinhamento diferente. Texto pré-formatado Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente qualquer lugar da página. Apesar da vantagem dessa forma de alinhamento arbitrário, o tag <PRE> muda o tipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o i ocupa menos espaço do que o a, por exemplo. Exemplo: <PRE> Este texto está pré-formatado. </PRE>

28 Margem O texto sempre começa a uma determinada distância da janela do browser. Às vezes, é necessário aumentar a margem e fazer com que o texto comece mais para dentro da página. As tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito dessa tag pode ser acumulado para conseguir margens maiores. Veja os exemplos: <BLOCKQUOTE>Texto com mais margem</blockquote> <BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda </BLOCKQUOTE></BLOCKQUOTE> Formatações Lógicas Marquee O Internet Explorer implementa uma forma muito simples de dar movimento ao texto. Uma série de atributos permitem controlar o tipo de rolagem do texto (da esquerda para a direita ou vice-versa), a velocidade e o tamanho, entre outras coisas. Sintaxe: <MARQUEE BEHAVIOR= [SCROLL/SLIDE/ALTERNATE] DIRECTION= [LEFT/RIGHT] LOOP= [1..N/INFINITE] ALIGN= [LEFT/RIGHT/CENTER] BGCOLOR= [COR] SCROLLAMOUNT= [ESPAÇO] SCROLLDELAY= [TEMPO] HEIGHT= [ALTURA] WIDTH= [LARGURA] HSPACE= [ESPAÇAMENTO HORIZONTAL] VSPACE = [ESPAÇAMENTO VERTICAL] > [LETREIRO] </MARQUEE>

29 BEHAVIOR - define como o texto em movimento vai deslizar no monitor. Scroll passa o texto continuamente no mesmo sentido Slide o texto parte de um ponto do monitor e vai até outro e para. Alternate o texto vai e vem. DIRECTION - define a direcção em que o texto vai deslizar. LOOP determina quantas vezes o texto vai deslizar no monitor. HEIGHT e WIDTH altura e largura HSPACE e VSPACE determina o espaço em pixeis que deve ficar livre em torno do texto em movimento. HSPACE - espaço horizontal e VSPACE espaço vertical. BGCOLOR Cor de fundo do texto em movimento SCROLLAMOUNT e SCROLLDELAY controlam a velocidade do texto em movimento. O SCROLLDELAY define o templo em milissegundos, que o texto em movimento vai demorar em cada um dos quadros. O SCROLLAMOUNT define a quantidade de pixeis que vai percorrer em cada quadro. Exemplo: <MARQUEE BEHAVIOR=Alternate HEIGHT=30 WIDTH=300 DIRECTION=LEFT SCROLLAMOUNT=20 BGCOLOR=BLUE>Olá melguinhas.</marquee> BLINK -Faz - com que o texto fique a piscar. Exemplo: <BLINK> A minha Escola </BLINK>

30 EXERCÍCIO 7 Formatação de Texto 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags de formatação de texto: <FONT SIZE=7>Texto com FONT SIZE=7</FONT><P> <FONT SIZE=6>Texto com FONT SIZE=6</FONT><P> <FONT SIZE=5>Texto com FONT SIZE=5</FONT><P> <FONT SIZE=4>Texto com FONT SIZE=4</FONT><P> <FONT SIZE=3>Texto com FONT SIZE=3</FONT><P> <FONT SIZE=2>Texto com FONT SIZE=2</FONT><P> <FONT SIZE=1>Texto com FONT SIZE=1</FONT><P> <FONT SIZE= -2">Texto com FONT SIZE=-2</FONT><P> <FONT SIZE= -1">Texto com FONT SIZE=-1</FONT><P> <FONT SIZE= +1">Texto com FONT SIZE=+1</FONT><P> <FONT SIZE= +2">Texto com FONT SIZE=+2</FONT><P> <FONT SIZE= +3">Texto com FONT SIZE=+3</FONT><P> <FONT SIZE= +4">Texto com FONT SIZE=+4</FONT><P> <FONT FACE= ARIAL COLOR= BLUE SIZE=2> <P ALIGN= CENTER >Texto alinhado ao centro. Formatos para alinhamento ALIGN (RIGHT, CENTER e LEFT).</P> <B>Texto negrito</b> <I>Texto em Itálico</I> <U>Texto sublinhado</u> <SUP>Texto sobrescrito</sup> <SUB>Texto subscrito</sub> <TT>Texto monoespaço </TT> <BLOCKQUOTE>texto com margem</blockquote> <PRE> texto pré- formatado</pre> <strong>isto é texto forte</strong> <br/> <big>isto é texto maior</big> <br/> <em>isto é texto enfatizado</em> <br/> <small>isto é texto mais pequeno</small> 4º - Feche as tags body e html 5º - Grave o exercício com o seguinte nome: formatacao1.html

31 EXERCÍCIO 8 Formatação de Texto 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente as tags de formatação de texto: <address>josé Manuel Fernandes<br/> Rua Maria Lucas<br/> Santa Margarida<br/> 1000 Lisboa</address> <p> <abbr title="united Nations">UN</abbr> <acronym title="world Wide Web">WWW</acronym> </p> 4º - Feche as tags body e html. 5º - Grave o exercício com o seguinte nome: formatacao2.html. 6º - Abra um novo documento. 7º - Insira as tags principais (html, head, title e body). 8º - Escreva em HTML a formúla H 2 O 3. 9º - Coloque uma linha a dividir o texto com sombra. 10º - Escreva o código para colocar a seguinte frase em negrito, itálico e sublinhado ao mesmo tempo. A novela Morangos com Açúcar dá todos os dias na TVI. 11º - Feche as tags body e html. 12º - Grave o exercício com o seguinte nome: formatacao3.html

32 EXERCÍCIO 9 1º - Abra um novo documento. 2º - Insira as tags principais (html, head, title e body). 3º - No body experimente todos os parâmetros para colocar o seu nome em movimento (marquee). 4º - Crie outro texto em movimento que dê duas voltas no ecrã e que pare no lado esquerdo do monitor. 5º- Coloque como cor de fundo da página a cor azul. 6º - Feche as Tags e grave o seu ficheiro. 7º - Responda às seguintes questões: 7.1.Indique qual os tags para escolher a Fonte, o tamanho e a cor de um determinado texto Qual o significado da tag <P> O tag <BR> dá instruções ao browser para:!a) fazer uma quebra de página!b) fazer uma pausa!c) fazer uma mudança de linha 7.4.Indique a tag que permite colocar um texto a piscar. 7.5.Indique alguns aspectos que se deve ter em conta ao colocar uma imagem como fundo da página

33 Uso de Cores Os códigos das cores em HTML têm por base a codificação RGB(Red, Green, Blue) e podem ser referenciadas de 3 formas distintas: - pelo nome da cor em inglês, por exemplo, black; - pelo sistema de numeração hexadecimal, por exemplo, #FFFF00; - pelo sistema de numeração decimal, por exemplo, rgb(2,255,0). Formas de exprimir cores Na notação hexadecimal as cores exprimem-se usando três números hexadecimais que definem as quantidades de encarnado, verde e azul que entram na composição de uma determinada cor. O valor mais baixo de uma determinada cor é 0 (#00 na notação hexadecimal) e o valor mais alto é 255 (#FF em notação hexadecimal.) Assim, a cor preta tem 0 encarnado, 0 verde e 0 azul pelo que se escreve na forma # Já o branco tem 255 encarnado, 255 verde e 255 azul pelo que se escreve como #FFFFFF. O amarelo forte tem 255 de encarnado, 255 de verde e zero de azul e escreve-se como #FFFF00. A tabela seguinte mostra os resultados de diversas combinações de cores:

34 Nomes de cores A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pelo W3C. Todos os browsers reconhecem estes nomes pelo que pode usá-los sem qualquer problema: Cores com Nomes Atribuídos Oficialmente Cores seguras da Web Problemas causados por um número reduzido de cores Todos os computadores modernos são capazes de mostrar dezenas de milhar ou milhões de cores em simultâneo. Contudo, até meados da década de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Esta limitação obrigava os browsers a trabalharem com uma paleta fixa que continha apenas 256 cores. Os browsers eram obrigados a usar apenas 256 cores para simular todas as cores que não conseguiam apresentar. Os efeitos destas aproximações eram visíveis na forma pontos adjacentes com cores diferentes e de manchas de cor. Actualmente estas limitaçõe já quase não existem. Como acabámos de ver, na primeira metade da década de 1990, a maioria dos computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas operativos Windows e Apple Macintosh reservavam 20 cores cada um (40 no total) para desenhar os seus interfaces gráficos. Assim, de um total de 256 cores possíveis, apenas 216 podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numa máquina Windows como num Mac. Estas 216 cores receberam a designação de cores seguras da Web. A forma encontrada para limitar as consequências resultantes da utilização de uma paleta com apenas 216 cores consiste em usar apenas cores cujos códigos hexadecimais usam apenas combinações dos números indicados na tabela seguinte: RGB Hex CC FF

35 As 216 cores seguras da Web, juntamente com os seus códigos hexadecimais (o carácter # no início foi omitido):

36 Tons de Cinzento As cores cinzentas obtêm-se combinado quantidades iguais de encarnado, verde e azul. A cor branca corresponde ao cinzento mais claro de todos e obtém-se juntando 255 de encarnado, 255 de verde e 255 de azul (#FFFFFF em hexadecimal.) O preto é o cinzento mais escuro de todos e obtém-se colocando todas as cores a zero (# em hexadecimal.) Entre estes dois valores extremos temos 254 graus de intensidade possíveis. A tabela seguinte dá uma ideia dos tons de cinzento que podemos obter: A tabela correspondente ao código das cores seguras pode ser consultada em:

37 Uso de Imagens É possível colocar variados formatos de imagens nos documentos HTML, embora, por questões de eficiência e tamanho, os formatos mais comuns são o JPEG, o GIF e o PNG. Sintaxe: <IMG SRC= [url da imagem] ALIGN= [center/left/right/top/middle/bottom/absmiddle/texttop/ baseline/absbottom] WIDTH= [largura] HEIGHT= [altura] VSPACE= [espaçamento vertical] HSPACE= [espaçamento horizontal] BORDER= [borda] ALT= [texto alternativo] LOWSRC= [url de baixa qualidade] > O elemento <img> e o atributo src. A inserção de imagens num documento faz-se com o elemento <img>. Este elemento tem conteúdo vazio, o que significa que ele apenas possui atributos e não tem a tag de fecho. O atributo src (que é uma abreviação de "source," ou origem) indica o nome e o local em que pode ser encontrado o ficheiro que contém a imagem. Exemplos: <IMG SRC = imagem.jpg > - apresenta uma imagem de nome imagem.jpg que se encontra no mesmo directório da página. <IMG SRC = /imagem.gif > - apresenta uma imagem de nome imagem.gif que se encontra no directório raiz do host. <IMG SRC =../imagem.jpg > - apresenta uma imagem de nome imagem.jpg que se encontra no directório um nível abaixo do directório da página. <IMG SRC = > - apresenta uma imagem de nome imagem.jpg que se encontra no site Alcobia

38 O O atributo alt O atributo alt usa-se para definir "texto alternativo" à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la, e usase assim: <IMG SRC=imagem.gif ALT=nome_da_imagem> Exemplo: <img src="imagem.gif" alt="escola SJE"> O atributo "alt" deve conter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo mesmo sem a ver. A utilização do atributo "alt" é recomendada porque melhora a acessibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos, sem o atributo "alt" o conteúdo das imagens seria sempre um mistério. Alinhamento da imagem É possível mudar o alinhamento utilizando o atributo ALIGN= dentro da tag <IMG>. Exemplo: <IMG SRC=imagem.gif ALIGN=TOP> ALIGN=LEFT faz a imagem flutuar à esquerda, enquanto o texto circunda a imagem pela direita. ALIGN=RIGHT faz a imagem flutuar à direita, enquanto o texto circunda a imagem pela esquerda

39 ALIGN=TOP OP alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser uma outra imagem. ALIGN=TEXTTOP OP alinha o topo da imagem com o topo do texto. ALIGN=MIDDLE alinha a base do texto com o centro da imagem. ALIGN=BOTT TTOM alinha a imagem com a base dos outros elementos da linha. ALIGN=BASELINE e ALIGN=ABSBOTT TTOM alinham a imagem com a base dos outros. ALIGN=ABSMIDDLE alinha o centro do texto com o centro da imagem. Contorno O atributo é BORDER. O valor da borda é expresso em pixels. Exemplo: <IMG SRC=imagens/imagem.gif BORDER=2>

40 Margens É possível definir as margens separadamente ou em conjunto. Para mais espaço em cima e embaixo da imagem, o atributo é VSPACE. Se o problema for espaço dos lados da imagem, usa-se o atributo HSPACE para definir as margens horizontais. <IMG SRC=imagem.gif VSPACE=10 HSPACE=20> Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces da imagem (em cima e em baixo e à direita e à esquerda). Baixa resolução A inclusão da imagem de baixa resolução é conseguida com a colocação do atributo LOWSRC, que indica o ficheiro que será carregado primeiro. <IMG SRC=altareso.gif LOWSRC=baixares.gif> No exemplo acima, o arquivo altareso.gif é a imagem definitiva, de alta resolução. O arquivo baixares.gif é a imagem de baixa resolução, que será carregada antes. Controlar a Quebra de linha Quando aplicamos atributos de alinhamento na imagem, o texto fica colocado ao lado da imagem. Quando é necessário quebrar o texto e o próximo parágrafo se apresente após a imagem, então utiliza-se o atributo clear, na tag BR. Sintaxe: <BR CLEAR= [left/right/all] Exemplo: <p align="left"><img src="../imagens/cafevermelhow.jpg".jpg" width="96" height="142" align="left">o café é a semente de uma planta nativa de África. Sendo diversas as lendas em torno da origem de café existe uma - mais consensual - que atribui a sua descoberta a um pastor da Arábia. <BR CLEAR=left> Assim, enquanto acompanhava o rebanho nas pastagens das montanhas reparou que este, após ter ingerido as bagas vermelhas de uma planta silvestre, havia-se tornado mais agitado e vivaz. Estupefacto com a transformação no comportamento do rebanho, Kaldi - assim se chamava o pastor - decidira provar das mesmas bagas

41 Hiperligações Ao criar links, é essencial compreender o caminho do ficheiro entre o documento do qual parte o link e o que está a ser vinculado. Cada página da Web tem um endereço único chamado Universal Resource Locator (URL). Existem três tipos de caminhos de link: Caminhos absolutos Caminhos relativos a documento Caminhos relativos à raiz Caminhos absolutos - fornecem a URL completa do documento vinculado.por exemplo: é um caminho absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a um documento noutro servidor. Caminhos relativos a documentos - são os mais apropriados para os links locais na maioria dos sites da Web. Eles são particularmente úteis quando o documento actual e o vinculado estão na mesma pasta, e possivelmente permanecerão juntos. O caminho relativo a documento também é utilizado para estabelecer um link a um documento noutra pasta, especificando o caminho através da hierarquia de pastas, do documento actual ao vinculado. Na especificação desse caminho, não consta a parte da URL absoluta, que é a mesma para ambos os documentos. É fornecido apenas o segmento do caminho que é diferente. Para estabelecer um link a outro ficheiro na mesma pasta que o documento actual, basta indicar o nome do ficheiro. Para vincular a um ficheiro numa subpasta da pasta do documento actual, forneça o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida, o nome do ficheiro. Para vincular a um ficheiro numa pasta-mãe daquela onde está o documento actual, preceda o nome do arquivo por../ (onde.. significa um nível acima na hierarquia de pastas ). Caminhos relativos à raiz - fornecem o caminho da pasta raiz do site a um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar num site grande da Web, que use vários servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se não estiver familiarizado com este tipo de caminho, pode ser melhor continuar a usar os caminhos relativos a documento. Um caminho relativo à raiz inicia com uma barra inclinada para a direita, que representa a pasta raiz do site. Por exemplo: /escola/orgaos.html é um caminho relativo à raiz

42 Podem ser criados diversos tipos de links num documento: Um link a outro documento ou ficheiro, como um ficheiro de imagem, filme, PDF ou som. Um link de âncora com nome, que salta para uma localização específica num documento. Um link de correio electrónico, que cria uma nova mensagem com o endereço do destinatário já preenchido. Os links nulos e de script, que permitem anexar comportamentos a um objecto ou criar um link que execute código JavaScript. O elemento <a> serve para criar uma ligação ("link") para outro documento. A ligação pode apontar para qualquer recurso disponível na Web: uma página escrita em HTML, uma imagem, um ficheiro de som, um filme, etc. Sintaxe: <a href="url">texto a mostrar</a> O atributo href(hipertext REFerence) contém o endereço (URL) do recurso ao qual se faz a ligação. Aquilo que está dentro do elemento constitui o material visível sobre o qual se deve clicar para ligar ao recurso. Nota: todos os ficheiros referidos numa página, quer links a outras páginas, quer imagens,etc, devem ser escritos em minúsculas, pois a grande maioria dos servidores Web fazem a distinção entre maiúsculas e minúsculas. Diversos tipos de links - uma imagem com um link: <a href="contactos.htm"><img src="contactos.gif" ></a> -um link a outra site: <a HREF=http://www.essje.pt>HTML Página da Escola</a> -um link para download: <a HREF= Exemplos.ZIP > Faça o Download Aqui</a> - um link a outra página do mesmo site: <a HREF= alunos.html ></a>

43 O O atributo target O atributo target permite-nos abrir a ligação numa janela ou moldura ("frame") diferente daquela em que foi feito o clique.os valores padrão são: _blank (uma nova janela) _self (própria janela) _top (na janela principal do browser, em casos de frames) _parent (só para ligações que estão numa moldura, ou "frame") a ligação abre-se no documento que contém a moldura (que terá sido criada através de um <frame> ou de um <iframe>) nome a especificar (nome da frame) O O atributo name O atributo name usa-se para dar um nome único à âncora. Este nome serve para marcar o lugar em que a âncora se encontra e tornar possível saltar directamente para esse local a partir de outros documentos ou de outros pontos do mesmo documento sem que o utilizador tenha de se deslocar na página. A criação de um link a uma âncora com nome é um processo em duas etapas. Primeiro, crie uma âncora com nome e, em seguida, crie um link a essa âncora. Sintaxe de uma âncora: <a name="nome">texto a mostrar</a> O atributo name dá uma nome único ao local em que se encontra a âncora. Esse nome pode ser um texto à sua escolha e não deve ser repetido em nenhuma outra âncora que esteja no mesmo documento. A linha seguinte define uma âncora com um nome: <a name="topo">voltar ao Menu</a> Nota: uma âncora com atributo name não pode ter atributo href. Por isso ela não é sensível a cliques. Ela serve apenas para marcar um local do documento para o qual podem apontar outras ligações. Depois de darmos um nome a um local do documento podemos ligar directamente a ele. <a href="#topo">topo</a>

44 Exemplo de âncoras âncora topo link à âncora topo Âncora Topo: <p><font color="#990000" size="5" face="arial, Helvetica, sans-serif"><a name="topo"></a> opo"></a>grãos</font></p> Link à âncora Topo: <a href="#topo">topo</a> Cores dos links A cor dos links é definida na tag <BODY>. <BODY LINK=RED ALINK=BLUE VLINK=GREEN> Onde: LINK determina a cor dos links não visitados ALINK determina a cor que os links devem ter quando clicados VLINK determina a cor dos links já visitados Link de correio electrónico Um link de correio electrónico abre uma nova janela de mensagem sempre que for clicado. Para que um link seja identificado como link de correio electrónico é necessário escrever antes do endereço electrónico a palavra mailto:. Exemplo para criar um link de correio electrónico: <a href="mailto: através de </a>

45 EXERCÍCIO 10 1º - Dentro da pasta 1112\API\, está uma pasta designada por Exercicio10. Copie essa pasta para dentro da sua. 2º- Abra um novo documento e grave sempre dentro da pasta copiada anteriormente. 3º - Insira as tags principais (html, head). 4º - Atribua como título à pagina o seguinte: A primeira página do (escreva o seu nome). 5º - No body coloque a seguinte cor de fundo da página: #C0C0C0. 6º - Escreva o seguinte texto: Imagens. O tipo de letra é Arial, o tamanho é de 7 e a cor é a seguinte:#ff9966, negrito e centrado. 7º - Coloque um parágrafo. 8º - Insira o seguinte botão: fotografia.gif, que se encontra na pasta /imagens/ botoes/. O texto alternativo desta imagem deverá ser Fotografias. 9º - Coloque um parágrafo. 10º -Insira outro botão: clipart.gif, que se encontra na pasta /imagens/botoes/. O texto alternativo desta imagem deverá ser Clipart. 11º - Coloque um parágrafo. 12º - Insira a última imagem: correio.gif que se encontra na pasta/imagens/clipart/ diversos. O texto alternativo deverá ser: correio electrónico. 13º - Nesta imagem insira um link de correio electrónico. O é o 14º - Insira uma linha divisória. 15º - Escreva o seguinte: Última actualização: (data). Com o nível de cabeçalho igual a 4 e alinhado à direita. 16º- Feche as Tags e grave esta página com o nome de index. 17º - Vamos agora criar as outras páginas com a cor de fundo branco. 18º - Abra um novo ficheiro e atribua como titulo: Clipart. 19º - Escreva o seguinte texto: Clipart. O tipo de letra é Arial, o tamanho é de 7 e a cor é a seguinte:#ff9966, negrito e centrado. 20º - Coloque um parágrafo. 21º - Escreva Animais, faça mudança de linha e escreva Meninas, faça novamente mudança de linha e escreva Diversos. O tipo de letra é Arial, o tamanho é de 3 e a cor é a seguinte:#

46 22º - Coloque um parágrafo, uma linha divisória e novamente um parágrafo. 23º - Coloque um subtítulo: Animais (tamanho 5 e centrado).faça parágrafo. 24º - Insira todas as imagens de animais que se encontram na pasta imagens\clipart\animais.em cada imagem faça um parágrafo. 27º - Escreva o seguinte TOPO (depois das imagens). Centrado e tamanho 4. 26º - Insira novamente uma linha divisória. 27º - Proceda todos s passos(23º até ao26º) para criar as meninas e os diversos. 28º - Vamos criar âncoras.coloque as seguintes âncoras: inicio; animais, meninas e diversos. Faça todos os links necessários. 29º - No fim da página coloque o botão voltar, que se encontra na pasta \imagens\botoes\. O botão deve estar centrado e deve ter um link para a página index. 30º - Grave este documento com o seguinte nome: clipart.html e grave dentro da pasta ficheiroshtml. 31º- Faça agora a página das Fotografias. Grave na pasta ficheiros html e com o seguinte nome fotos.html. 32º- Abra a página index.html e faça os links para as outras páginas

47 Image maps Um mapa de imagens é uma imagem que foi dividida em regiões, ou pontos activos; quando um ponto activo é clicado, ocorre uma acção (um novo ficheiro é aberto, por exemplo). O conjunto destes pontos activos permite criar diferentes formas, como círculos, rectângulos e polígonos, construindo, desta forma um mapa de imagem, em que cada uma das formas geométricas possibilita uma hiperligação para outro documento. Definir as zonas das imagens Para definir as zonas das imagens é necessário conhecer as coordenadas dos pontos essenciais, que identificam as formas dessas zonas num mapa de imagem. Criação de server-side side e client-side image maps A criação de mapas pode ser feita de duas formas: criação do mapa do lado do servidor (server-side image map) ou do lado do cliente ( client-side image map). A criação do mapa de imagem do lado do servidor, método inicialmente usado, é guardar e executar no servidor web, como recurso ao CGI, um mapa separado do documento. Se a grande vantagem é ser suportado por todos os browsers, o maior inconveniente é provocar uma carga de processamento no próprio servidor, pelo que se torna difícil encontrar quem permita este tipo de processo nos seus servidores. Para utilizar este método é necessário referenciá-lo através do atributo ismap da tag img. Este atributo indica ao browser que a referida imagem não é uma hiperligação, mas sim o fundo sobre a qual estarão as hiperligações definidas no mapa. <a href= nome_do_ficheiro_do_mapa_de_imagem.map > <img src= nome_do_ficheiro_de_imagem.gif ismap> </a> A criação do mapa de imagem do lado do cliente é feita aproveitando a capacidade de processamento deste. Para utilizar este método é necessário enviar o mapa de imagem dentro do documento HTML, indicando ao browser o que fazer, através da utilização do atributo usemap da tag img. Este atributo indica ao browser que a referida imagem é o fundo sobre o qual estão as hiperligações definidas no mapa. <img src= nome_do_ficheiro_de_imagem.gif usemap= nome do mapa de imagem alt= > Para definir um mapa de imagem utiliza-se as tags <map> e </map>. Dentro desta tag, utiliza-se a tag <area> que contém os atributos que permitem definir as zonas do mapa de imagem e as respectivas hiperligações, entre outros

48 Atributos da tag <area> Os atributos id e name da tag <map>

49 Exemplo: <html> <head> <title>exemplo</title> </head> <body> <img src= botoes/principal.gif width= 800" height= 100" align= top bordercolor= #FFFFFF border= 0" usemap= #banner > <map id= "banner" name="banner"> <area shape= rect coords= 189,81,288,100" href= index.html target= _self alt= Página Principal > <area shape= rect coords= 323,81,425,102" href= paginas/trabalhos.html target= _self alt= Trabalhos por mim realizados > </map> <p><b>nota:</b> O atributo "usemap" utilizado com o elemento img refere-se ao atributo "id" ou ao atributo "name" (depende do browser) existente num elemento map. Por isso, se queremos garantir a compatibilidade da página com todos os browsers, devemos aplicar ambos os atributos ("id" e "name") ao elemento map.</p> </body> </html> Compatibilidade com os vários browsers Para tornar o HTML compatível com os browsers como o Netscape e afins, deve-se acrescentar o atributo id à tag <map>, já que este não reconhecem o atributo name. <map id= "banner" name="banner">

50 EXERCÍCIO 11 1º - Dentro da pasta 1112\API\, está uma pasta designada por Exercicio11. Copie essa pasta para dentro da sua. 2º- Abre o software Mapedit (software shareware para utilização de imagens mapeadas). 3º - No mapedit abra a imagem Portugal.gif. 4º - Clique no ícone add polygons e faça o contorno às diversas regiões conforme imagem. ícone add polygons 5º - Depois de fazer o contorno, minimize o software Mapedit e abra o software CoffeCup. Nota: em casa região deverá ter o link e o respectivo título. Exemplo para Lisboa o link será lisboa.html e o título: Lisboa. 6º - Faça File - New Blank page. 7º - Atribua um título à página. 8º - Insira a imagem Portugal.gif (vejo o código)

51 <img src= imagens/portugal.gif width= 234" height= 439" border= 0" alt= Mapa de Portugal usemap= #Portugal ortugal > 9º - No software Mapedit, clique no ícone HTML e copie o código para o software coffecup, mas apenas a parte das tags <map> </map>. 10º - Deverá ter algo semelhante, ao seguinte código, excepto no que diz respeito às coordenadas(coords). <map id= Portugal name= Portugal > <area shape= poly coords= 169,93,170,102,171,106,175,100,179,98,1 82,93,189,94,197,88,195,82,202,76,211,71,219,64,225,55,227,44,217,43,211,39,207,37,207,2 4,208,17,202,14,196,16,183,19,175,14,169,22,159,24,144,29,140,27,128,24,102,30,102,20,111, 9,94,7,69,17,64,33,70,47,70,62,76,87, 81,102,83,114,92,111,103,106,99, 114,111,97,123,95,138,101,139,110,145,107,149,112,155,116,156,100,157,93" href= norte.html title= Norte /> <area shape= poly coords= 65,221,69,211,80,197,93,198,109,198,106,210,116,214,1 17,226,125,207,127,216,127,219,143,211,152,206,170,208,18 0,199,184,185,180,174,181,159,190,152,188,1 37,188,122,187,110,185,99,174,104, 164,99,163,110,157,119,141,113,131,105,115,104,108,119,87,121,78,104,68,161,56,193" href= centro.html title= Centro /> <area shape= poly coords= 39,312,59,302,68,303,80,289,88,2 74,103,278,99,266,97,244,110,232,129,226,107,214,81,205,74,2 27,59,223,54,209,31,236,30,263,24,281,41,287,49,267,62,269,57,290,46,297,40,294" href= lisboa.html title= Lisboa /> <area shape= poly coords= 134,223,149,217,167,251,170, 269,156,304,169,334,146,377, 118,398,97,388,79,395,69,395,71,339,72,318,87,306,99,292,113,283,114,267,117,242,129,239" href= alentejo.html title= Alentejo /> <area shape= poly coords= 68,401,57,425,71,419,86,420,110,422, 121,429,143,418,153,406,144,394,126,406,103,408,94,402,88,403" href= algarve.html title= Algarve /> <area shape= default nohref= nohref alt= /> </map> 11º - Grave esta página com o nome index. 12º- Crie 5 páginas html, uma para cada região. Nelas coloque um Cabeçalho com o nome da região, uma fotografia que se encontra na pasta imagens da respectiva região e um link à página index com a designação de voltar. 13º - No caso de dúvidas poderá visualizar a resolução

52 Gifs animados Inserção de elementos multimédia Para inserir um gif animado num documento html utiliza-se a tag <img> e indicase o nome do ficheiro que se deseja abrir através do seu atributo src. <img src= nome do ficheiro do gif animado > Vídeo A Microsoft inventou um atributo chamado DYNSRC (de dynamic source, fonte dinâmica) para ser incluído dentro do tag <IMG>. O formato do ficheiro de vídeo suportado é o AVI (Audio Video Interleave). <IMG DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50 START=MOUSEOVER LOOP=INFINITE> O atributo START=MOUSEOVER indica que o vídeo começará a ser executado quando o utilizador passar o mouse sobre ele. O atributo LOOP=INFINITE declara que o vídeo será visualizado continuamente até que o utilizador mude de página. Outros atributos são: START=FILEOPEN: o vídeo começa a ser visualizado assim que a página é carregada CONTROLS: adiciona um conjunto de botões para controlar a execução do vídeo LOOP=n: Executa o vídeo n vezes. Se for colocado LOOP=5, o vídeo será visualizado cinco vezes. LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o vídeo será executado quando colocado em loop. SOM Para colocar som, a Microsoft criou o tag BGSOUND. Pode-se incluir áudio nos formatos WAV, AU ou MIDI. <BGSOUND SRC=som.wav LOOP=INFINITE>

53 Ficheiros de vídeo e áudio embebidos e ancorados Para embeber ou inserir um ficheiro de som ou de vídeo num documento HTML utiliza-se a tag <embed>. Quando se utiliza esta tag, os ficheiros de som podem ser automaticamente reproduzidos utilizando suplementos ou plug-ins e surgem como objecto a ser controlado na página web. Caso o suplemento ou plug-in não exista, o browser reagirá com uma das três possibilidades: ignora a instrução, pergunta o que deseja fazer com o ficheiro ou indica que necessita de um suplemento e se gostaria de o descarregar. A tag embed tem como principais atributos o src, que se iguala ao url do ficheiro a embeber, o autostart, o hidden e o loop, que pode assumir valores True ou false. Autostart define se o objecto deve ser iniciado imediatamente após ter sido carregado. Hidden define se o objecto deve ser visível na página web. Loop reproduz continuamente o ficheiro. Áudio: <embed src= nome do ficheiro de som autostart=true hidden=false loop=false width=145 height=55 align= center > </embed> Video: <embed src= nome do ficheiro de video autostart=false loop=false align= center > </embed> <a href= nome do ficheiro de vídeo > Texto associado à hiperligação </a>

54 EXERCÍCIO 12 1º - Abre o software Ani_gif. 2º - Clique no ícone B, conforme imagem: 3º - Aparece-lhe outra caixa de dialógo, conforme imagem: 4º - Aqui escreva na parte Text o seu Nome, altere as cores do fundo, do texto e da sombra. Altere também o tipo de letra.a altura e a largura. Quanto à altura deverá ser de 100 e a largura de º - Faça Ok. 6º - Seguidamente, ao seu banner aplique efeitos e transições. Para aplicar efeitos clique no ícone E e para aplicar transições clique no ícone T. 7º - Altere os parâmetros do seu banner (Preferences- Parameters), conforme imagem: 8º - Por último grave o seu ícone numa nova pasta designada por exercício 12, com o seguinte nome: banner. 9º - Abra o coffecup e crie um novo documento. 10º - No novo documento insira o banner criado. 11º - Visualize o seu documento e grave com o nome de banner.html

QUEM FEZ O TRABALHO?

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

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

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

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

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

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

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

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

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

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

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

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

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

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

Leia mais

Desenvolvimento 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

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

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

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

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

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

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

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

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

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

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

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

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S UFCD 21 Criação de sites webs 1 D U R A Ç Ã O : 5 0 H O R A S Objectivos: 2 C R I A R D O C U M E N T O S E M H I P E R T E X T O D E S E N V O L V E R E A L O J A R U M S I T E N A I N T E R N E T Conteúdos

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

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 Actividades de exploração Objectivo Explorar as funcionalidades essenciais do Programa, na perspectiva da construção/actualizaçã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

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

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

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

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

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

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

Leia mais

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

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

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

Leia mais

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

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

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

Leia mais

Programação web 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

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

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis)

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis) Imagens - Formatos GIF (Graphics Interchange Format) - Muito popular na web. - Permite ter um máximo de 256 cores. - Indicado para cartoons, logos, imagens com áreas transparentes e animações. JPEG (ou

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

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

Introdução aos Sistemas Informáticos

Introdução aos Sistemas Informáticos I 1. Dentro da janela da ferramenta de construção de portais web FrontPage, crie uma página nova e guarde-a como index.htm. 2. Escreva nessa página o texto "O Meu Primeiro Portal Web". Formate-o com o

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

Os elementos básicos do Word

Os elementos básicos do Word Os elementos básicos do Word 1 Barra de Menus: Permite aceder aos diferentes menus. Barra de ferramentas-padrão As ferramentas de acesso a Ficheiros: Ficheiro novo, Abertura de um documento existente e

Leia mais

Manual Completo de HTML

Manual Completo de HTML Manual Completo de HTML Uma página Web simples 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

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

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

Leia mais

Editor HTML. Composer

Editor HTML. Composer 6 Editor HTML 6 Composer Onde criar Páginas Web no Netscape Communicator? 142 A estrutura visual do Composer 143 Os ecrãs de apoio 144 Configurando o Composer 146 A edição de Páginas 148 Publicando a sua

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

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

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: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

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

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

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

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

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

Leia mais

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

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

Criação de Páginas Web - MS Word 2000

Criação de Páginas Web - MS Word 2000 Gestão Comercial e da Produção Informática I 2003/04 Ficha de Trabalho N.º 9 Criação de Páginas Web - MS Word 2000 1. Criação de uma página Web (HTML): Escreva o seu texto e introduza as imagens pretendidas

Leia mais

Como criar e editar Blogs. Manual Básico do. Mario Roberto Barro Jerino Queiroz Ferreira Profª Drª Salete Linhares Queiroz

Como criar e editar Blogs. Manual Básico do. Mario Roberto Barro Jerino Queiroz Ferreira Profª Drª Salete Linhares Queiroz Como criar e editar Blogs Manual Básico do Mario Roberto Barro Jerino Queiroz Ferreira Profª Drª Salete Linhares Queiroz São Carlos Setembro / 2008 Sumário Introdução...3 Criando um Blog no Edublogs...4

Leia mais

Para iniciar a construção de WebQuest no Servidor PHP de webquests do Centro de Competência CRIE do CAPAG, aceda ao seguinte url:

Para iniciar a construção de WebQuest no Servidor PHP de webquests do Centro de Competência CRIE do CAPAG, aceda ao seguinte url: C e n tro d e C ompetênci a CRIE d o CA PAG Versão Beta 4 E l a b o r a d o p o r : M a r i a d e B a l s a m ã o M e n d e s G u i ã o d e P H P W e b Q u e s t V a m o s C r i a r W e b q u e s t s?

Leia mais

0777 Processador de Texto

0777 Processador de Texto 0777 Processador de Texto Objectivo (s) Utilizar aplicações informáticas de processamento de texto. Processador de texto conceitos gerais Criação de um documento Abertura de documentos Gravação de documentos

Leia mais

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,... Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet

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

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

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

Guião para as ferramentas etwinning

Guião para as ferramentas etwinning Guião para as ferramentas etwinning Registo em etwinning Primeiro passo: Dados de quem regista Segundo passo: Preferências de geminação Terceiro passo: Dados da escola Quarto passo: Perfil da escola Ferramenta

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

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

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

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

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

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

HTML Prof.Leonardo INTRODUÇÃO

HTML Prof.Leonardo INTRODUÇÃO HTML Prof.Leonardo INTRODUÇÃO Uma das características mais interessantes da Internet é a oportunidade que todos os usuários têm de disseminar informações. Tanto um vencedor do prêmio Nobel, quanto um estudante

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

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

WEB DESIGNER WEB DESIGNER

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

Leia mais

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

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

Leia mais

Manual de Gerenciamento de Conteúdo

Manual de Gerenciamento de Conteúdo Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6

Leia mais

PACWEB Módulo de Pesquisa MANUAL DO UTILIZADOR

PACWEB Módulo de Pesquisa MANUAL DO UTILIZADOR MANUAL DO UTILIZADOR Versão 1.3 ÍNDICE 1. INTRODUÇÃO 2 2. INSTALAÇÃO E CONFIGURAÇÃO 3 2.1 INSTALAÇÃO 3 Instalar o Pacweb 3 Alterar o Ficheiro Default.htm 3 Criar um Virtual Directory 3 2.2 CONFIGURAÇÃO

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

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

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

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

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

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

Leia mais

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

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável.

A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. A seguir voce vai poder acompanhar, em 10 passos, como gerenciar o conteúdo das páginas pelas quais voce é responsável. Índice Geral TULogarUT 3 TUConhecer e VisualizarUT 6 TUÁrea de Edição / Blocos e

Leia mais

Manual Internet. Professora: Elisa Carvalho elisa_castro@sapo.pt http://elisacarvalho.no.sapo.pt

Manual Internet. Professora: Elisa Carvalho elisa_castro@sapo.pt http://elisacarvalho.no.sapo.pt Manual Internet Professora: Elisa Carvalho elisa_castro@sapo.pt http://elisacarvalho.no.sapo.pt Fevereiro de 2006 Índice Internet... 2 Correio electrónico... 2 Os endereços... 2 Lista de correio... 2 Grupos

Leia mais

Manual Completo de HTML

Manual Completo de HTML Manual Completo de HTML Uma página Web simples 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

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

CRIAÇÃO DE SITES (AULA 4)

CRIAÇÃO DE SITES (AULA 4) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 4) O que eu preciso para construir um link? Para construir um link você usa o que

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