Início do Título do Documento Aqui entra o Título do documento



Baixar 485.94 Kb.
Encontro09.08.2019
Tamanho485.94 Kb.

LINGUAGEM DE PROGRAMAÇÃO HTML


ÍNDICE



1. Introdução 6

1.1. Internet 6

1.2. Intranet 6

1.3. WWW (World Wide Web) 7

1.4. Web 7

1.5. Hipertexto 8

1.6. Links ou Hyperlinks 8

1.7. Home Page 8

1.8. Site 8

1.9. Browsers (Navegadores da Web) 9

1.10. Protocolo 10

1.11. Protocolo HTTP (HyperText Transfer Protocol) 10

1.12. Protocolo FTP (File Transfer Protocol) 10

1.12.1. FTP Anônimo 11



1.13. URL (Uniform Resource Locator) 11

1.13.1. URL Absoluto 11

1.13.2. URL Relativo 12

1.13.3. Endereço 12

1.13.4. Entendendo uma URL 13

1.14. ISP (Internet Service Provider) 14

1.14.1. Provedores 14

1.14.2. Seu Site na Grande Rede 14

1.14.3. Login 14



1.15. Resolução 15

2. HTML (HyperText Markup Language) 15

2.1. TAGs 16

2.2. Estrutura Básica 17

2.2.1. Início e Fim do Documento 17

2.2.2. Definições Lógicas sobre o Documento 17

2.2.3. Título da Página 17

2.2.4. Conteúdo da Página 17

2.3. TAG com Atributos 18

3. Estrutura da Página 19

3.1. HTML ... 19

3.2. HEAD ... 19

3.2.1. Elementos presentes em HEAD 20

TITLE ... 20

SCRIPT 20

META 20

3.3. BODY ... > Início do Conteúdo do Documento

Aqui entra todo o conteúdo que será exposto pelo Browser...

. . . > Início do Conteúdo do Documento

Esta é a Home Page da XYZ Informática e este texto está centralizado.


> O TAG
(parágrafo) está acompanhado do Atributo ALIGN especificando o Valor “CENTER”, determinando que o texto do parágrafo deve ser alinhado ao centro
.

O TAG </b> localizado na <i>área de influência</i>, é obrigatório, segundo a especificação do <i>HTML.</i></p> <br /><b>Exemplo: </b> <br /> <br /><html> <br /><head> <br /> <br /><title>XYZ Informática



Aqui entra todo o conteúdo que será exposto pelo Browser...

...


...diversos TAGs, textos etc...


Atributo: TEXT

Explicação: Define a cor do texto da página

Exemplo:


Atributo: LINK

Explicação: Define a cor dos links ainda não visitados

Exemplo:


Atributo: VLINK

Explicação: Define a cor dos links já visitados nos últimos x dias onde x é um valor definido pelo usuário em seu browser.

Exemplo:


Atributo: ALINK

Explicação: Define a cor dos links no instante em que são clicados pelo usuário.

Exemplo:


Exemplo:


Atributo: BGPROPERTIES (Microsoft Internet Explorer)

Explicação: Deve ter o valor "fixed". Indica que o fundo da página é fixo, isto é, não "rola" junto com o conteúdo da página.

Exemplo:


Atributo: LEFTMARGIN (Microsoft Internet Explorer)

Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem esquerda do documento.

Exemplo:


Atributo: TOPMARGIN (Microsoft Internet Explorer)

Explicação: Especifica uma quantidade de espaço (em pixels) a ser deixada como margem superior do documento.

Exemplo:



Exemplo do Elemento BODY com todos os seus Atributos:




XYZ Informática

Oi! Eu sou um link!

Esta é a Home Page XYZ Informática

Corpo do Documento


Aqui entra todo o conteúdo que será exposto pelo Browser...

Aqui entra todo o conteúdo que será exposto pelo Browser...

Aqui entra todo o conteúdo que será exposto pelo Browser...


Veja como fica com      espaço não ignorável!

Oi! Eu sou um link para o site da XYZ Informática!


.

Exemplo:





Texto


Texto


.
A ...
Explicação: Indica a região a ser tratada como hyperlink

Exemplo:

XYZ Informática



Visualização pelo Browser:

XYZ Informática
Atributos de A
Atributo: HREF

Explicação: Define que sua área de influência é um link.

Exemplo:

Clique em Cursos para acessar a página dos Descritivos dos Cursos.




Visualização pelo Browser:

Clique em Cursos para acessar a página dos Descritivos dos Cursos.

Existem quatro formas de se especificar um link:

10.1. Links para dentro da própria página

O local precisa ter um "nome". Este "nome" é definido da seguinte forma:


Exemplo:

Link para o Nome

.

.

.





10.2. Para outras páginas de um mesmo Site



Exemplo:

Link para o Nome


Nesse caso, assumiu-se que o arquivo nome.htm estava localizado no mesmo diretório da página que referência.
Caso o arquivo nome.htm esteja em outro diretório, pode-se utilizar a "URL relativa" à página de destino.
Exemplo:

Link para a Página


Pode-se, ainda, referenciar uma página utilizando-se a navegação em diretórios, semelhante ao que se faz no DOS, lançando mão do operador "..".
Se na página http://www.xyz.com.br/treinamento/cursos.htm existir um link que aponta para o endereço:

http://www.xyz.com.br/consultoria/desenvolvimento.htm, este pode ser representado da seguinte maneira:
Exemplo:

Link para o Desenvolvimento



10.3. Links para outros Sites

Deve-se usar a URL completa da página destino.


Exemplo:

Link para outro Site



10.4. Link especial: "mailto"

Existe um tipo de link chamado de "mailto:". Se, quando o link for definido, o protocolo utilizado for "mailto:" ao invés de "http://", o link abrirá uma janela especial para que se possa enviar um e-mail (correio eletrônico) para o endereço específico.


Exemplo:

Mande ume-mailpara a XYZ.



Visualização pelo Browser:

Mande um e-mail para a XYZ.



11. Imagens




IMG
Explicação: Este TAG exibe uma imagem na página.
Atributos de IMG
Atributo: SRC

Explicação: Obrigatório, indica a URL da imagem a ser exibida. Podem ser usadas

URL absoluto (http://www.xyz.com.br/images/imagem.gif) ou URL relativo (/images/imagem.gif)



Exemplo:


Atributo: ALT

Explicação: Indica um texto asociado à imagem. Quando a imagem não puder ser exibida, o texto é exibido em seu lugar. Este texto também é exibido quando o cursor fica parado sobre a imagem.

Exemplo:

logotipo da xyz informática
Atributo: ALIGN

Explicação: Determina o alinhamento da imagem em relação ao texto existente na mesma linha. Os valores válidos são "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT".

Exemplo:


Atributo: WIDTH

Explicação: Determina a largura, em pixels, da imagem.

Exemplo:


Atributo: HEIGHT

Explicação: Determina a altura, em pixels, da imagem.

Exemplo:


Atributo: BORDER

Explicação: Determina a largura, em pixels, da imagem.

Exemplo:


Atributo: HSPACE

Explicação: Determina a quantidade de espaço deixado em branco aos lados da imagem, de forma que ela não fique demasiadamente próxima dos outros elementos da página.

Exemplo:


Atributo: VSPACE

Explicação: Determina a quantidade de espaço deixado em branco acima e abaixo da imagem.

Exemplo:


Atributo: USEMAP

Explicação: Indica que a imagem é um mapa sensitivo interpretado totalmente.

Exemplo:


Atributo: DYNSRC (Microsoft Internet Explorer)

Explicação: Determina qual o vídeo ou ambiente VRML será exibido. Pode ser usado em conjunto com SRC. Dessa forma, quando o usuário não possuir suporte a vídeo, verá uma imagem estática em seu lugar.

Os vídeos devem estar em formato AVI.



Exemplo:


Atributo: LOOP (Microsoft Internet Explorer)

Explicação: Indica quantas vezes o videoclip será exibido. Se o valor for "-1" ou "infinite" ele será exibido continuamente.


Atributo: START (Microsoft Internet Explorer)

Explicação: Pode assumir os valores "fileopen" (o videoclipe será exibido assim que a página for aberta, o que é o default) ou "mouseover" (o videoclip será exibido quando o cursor toca-lo).


Alguns Browsers, como o Internet Explorer 3 e 4 e o Netscape Comunicator 4, expõe o texto presente no atributo ALT quando o cursor toca a imagem. O texto è exibido em "balões de texto" ou similares.
Os atributos WIDTH e HEIGHT são extremamente importantes. Os browsers, tendo informações sobre a altura e a largura das imagens, não precisam esperar que elas cheguem por inteiro para continuar a exibição do resto do documento. Além disto, WIDTH e HEIGHT podem ser usados para distorcer imagens.
Pode-se usar o atributo BORDER para se retirar a borda de um link (quando é claro, este for uma imagem). No entanto, deve-se tomar cuidado para não confundir o usuário, pois este poderá não perceber que a imagem é também um link.

12. Formatos de Imagens



GIF (Graphics Interchange Format) e JPEG (Joint Photographic Experts Group) são os dois formatos gráficos padrões usados na Internet, cada formato tem suas vantagens e desvantagens, como analisado a seguir.

Os dois formatos de imagens são bastante utilizados, mas possuem características diferentes.



12.1. Usando o GIF (Graphics Interchange Format)

O GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas", sem muito detalhes. Possui suporte para imagens animadas e com partes "transparentes".




  • Trabalha com cores indexadas, podendo representar um máximo de 256 cores.

  • Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante eficiente.

  • Não possui níveis de compreenssão, apesar de já ser naturalmente compactado (GIFs tem uma compressão padrão).

  • Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à medida que vai sendo carregada (melhorando a definição aos poucos).

  • Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que está por trás. O recurso de transparência é muito interessante, pois permite criar a sensação de que as imagens não são todas retangulares.

  • Permite a criação de animações (GIFs Animados). O Princípio do GIF Animado é o mesmo de um filme que vemos no cinema, ou seja uma sequência de imagens transmitida rapidamente, uma animação propriamente dita. Os anúncios (chamados de banners) que se vê na Web, na verdade são, GIFs Animados.



12.2. Usando o JPEG (Joint Photographic Experts Group)

O JPEG é melhor para imagens que apresentam muitos tons de cor. Este formato é ideal para trabalhar com fotografias digitais e imagens complexas.




  • Pode representar imagens com até 16 milhões de cores.

  • Armazena imagens complexas de forma eficiente.

  • Tem uma compressão variável. Porém, como nem tudo é perfeito, quanto mais você comprime, maior será a perda da qualidade. A compressão padrão é em torno de 33 (numa escala de 1 a 100), mas a ideal, só testando mesmo. Quanto maior o número, pior fica a qualidade.

  • Não possui o recurso de transparência, portanto sempre aparecem retangulares na tela.

  • O entrelaçamento pode ser conseguido utilizando o formato Progressive Rendered JPEG, uma nova versão criada para possibilitar um carregamento igual ao de um GIF entrelaçado. Os Browsers de última geração já entendem este formato numa boa, mas não os antigos.

  • Não permite a criação de animações.



12.3. Sobre o PNG (Portable Networ Graphics)

Um formato novo, ainda não muito comum na Internet, é o PNG (Portable Network Graphics), desenvolvido por um grupo formado especialmente com este fim. Ele é uma evolução das GIFs que conhecemos, mantendo diversas de suas características e incorporando novas com pouco custo de implementacão aos desenvolvedores. Suporta cores TRUECOLOR (48 bits por pixel), interlaçamento, transparência, etc. Foi desenvolvido para, no futuro, substituir o GIF e o JPEG.


Nota:

PNG é pronunciado "ping".



12.4. Imagens no Browser

Uma imagem GIF pode conter até 256 cores. Para isso, são necessários 8 bits para cada pixel da imagem. Se a sua imagem tem 128 ou 64 cores, significa que cada pixel vai precisar de 7 ou 6 bits respectivamente. E ainda, se a sua imagem tem somente 16 cores ela requer somente 4 bits por pixel, reduzindo em 50% o tamanho do arquivo quando comparado com o de 256 cores.


Da mesma forma que no GIF, existem ajustes finos possíveis no JPEG. Neste formato, o tamanho do arquivo depende da qualidade que você pode optar para a sua imagem. Além disso, alguns softwares permitem que você configure a resolução da imagem . A maioria das imagens é salva com a resolução de 300 dpi (pontos por polegada). Porém como a resolução da maioria dos monitores (padrão SVGA) de computador é de 96 dpi, pode-se sempre diminuir para este valor.
Experimente fazer alguns testes com os dois formatos, variando o número de cores, compressão e resolução.
Ferramentas Gráficas e GIFs Animados
Paint Shop Pro 6.0 / Animation Shop http://www.jasc.com/psp.html

Photoshop 5.5 / ImageReady 2.0 http://www.adobe.com


Lista com diversas opções no Site da Tucows, na seção Image Animators
Image Animators http://wwwtucows.matrix.com.br/imgani95.html

13. Mapas Sensitivos

Através do conceito de Mapa Sensitivo (Clickable Map), podem ser criados diversos links dentro de uma mesma imagem. O usuário será encaminhado para uma URL determinada pelo local da imagem selecionada.


MAP ...
Explicação: Indica o início e o final do mapa. Pode ficar em qualquer parte da página.

Exemplo:

...



Atributos de MAP
Atributo: NAME

Explicação: Atributo obrigatório, indica o nome do mapa.

Exemplo:

...



AREA
Explicação: Define as áreas da imagem que estão relacionadas a links, e que links são esses. Dentro da área de influência de , podemos ter um número qualquer de tags .

Exemplo:

Atributos de AREA
Atributo: COORDS

Explicação: Define as coordenadas da área. Varia de acordo com o formato declarado em "SHAPE".

Exemplo:


Atributo: HREF

Explicação: Indica a URL destino da área.

Exemplo:


Atributo: NOHREF

Explicação: Indica que aquela área será neutra.

Exemplo:


Atributo: SHAPE

Explicação: Indica o formato da área. Pode ser "RECT", "CIRCLE" ou "POLYGON". Caso seja omitido, assume-se "RECT".

Exemplo:


Nota:

Para "RECT", usa-se o formato "x1, y1, x2, y2", definindo-se o canto superior esquerdo e o inferior direito do retângulo.

Para "CIRCLE", "x,y,r", definindo-se o ponto central e o raio.

Para "POLYGON", "x1, y1, x2, y2, x3, y3, x4, y4, ..." .
Para se criar um Mapa Sensitivo Interpretado localmente deve-se passar por duas etapas: Definição e Descrição

13.1. Definição

Adiciona-se o atributo "USEMAP" no TAG da imagem que virá a ser o Mapa Sensitivo.



USEMAP="#mapa1", onde "mapa1" é o nome do mapa descrito através dos TAGs ...

Exemplo:

imagem.gifborder="0" usemap="#mapa1">



Foi inserida, através do TAG uma imagem no documento. O atributo "USEMAP" define esta imagem como um Mapa Sensitivo local.



Exemplo:

imagem.gifborder="0" usemap="#mapa1">


O Mapa Sensitivo será descrito através do TAG . O nome da descrição será "mapa1".

Exemplo:


Esta imagem não funcionará como um Mapa Sensitivo em browsers antigos, pois estes ignorarão o atributo "USEMAP".


13.2. Descrição

Uma imagem com 600 Pixels de Largura e 60 Pixels de Altura será dividida em dois blocos para serem feitos links para duas páginas distintas.




Exemplo:





XYZ Informática




imagem.gifborder="0" usemap="#mapa1">










rectangle="(300,2) (600, 60) http://www.xyz.com.br/treinamento.htm"

rectangle="(0,0) (300, 60) http://www.xyz.com.br/consultoria.htm"

src="imagem.gif" width="600" height="60" alt="imagem.gif" border="0" -->

Deixe aqui seus

comentários!


Olá! Obrigado por visitar o meu

WebSite.

Use este formulário para deixar aqui os seus comentários:










Entre com seu e-mail:

Entre com seu nome:

Você gostou da minha página:



Sim

Mais ou Menos

Não

Qual a página de que você mais gostou?



Deixe aqui os seus comentários:




Você gostaria que eu respondesse a este seu comentário?



Sim

value="Limpar todos os campos">






em um documento de layout. Ele define a divisão da janela em duas ou mais linhas ou em duas ou mais colunas. Podem haver vàrios TAGs encadeados, fazendo-se, desta maneira, divisões das divisões da página. Assim como o , o TAG precisa ser fechado contém todas as informações sobre cada uma das subdivisões da janela, sobre cada uma das frames.
FRAMESET ...
Explicação: Contém os elementos "FRAME", "NOFRAMES" e outros "FRAMESETs" que podem ser aninhados para que se tenha uma divisões dentro de uma divisão de layout.

Exemplo:










Atributos do FRAMESET
Atributo: COLS

Explicação: Divide a janela (ou frame) em diversas frames verticais, tantas quantas forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros.

Exemplo:



Exemplo:


Atributo: FRAMEBORDER

Explicação: Indica se será exibida uma borda 3D para as frames, ou se as frames não aparecerão destacadas por uma borda. O parâmetro pode assumir os valores "1" (default, indica a exibição da borda) ou "0" (suprime a exibição de borda).

Exemplo:



Exemplo:


Atributo: FRAMESPACING

Explicação: Cria um espaço adicional, em pixels, entre as frames.

Exemplo:


Atributo: ROWS

Explicação: Divide a janela (ou frame) em diversas frames horizontais, tantas quantos forem os valores descritos. Os valores podem estar expressos em pixels, percentuais ou relativamente uns aos outros.

Exemplo:


Os atributos "FRAMESPACING" e "FRAMEBORDER" funcionam igualmente por toda a cadeia de "FRAMESETs" encadeados, bastando que sejam declarados no primeiro comando "FRAMESET" a ser utilizado.

A definição de frames através de percentuais é interessante, pois a diagramação da janela é preservada, não importando a resolução em que se estiver visualizando a página.


FRAME
Explicação: Define o conteúdo de cada frame do documento.

Exemplo:


Atributos de FRAME
Atributo: SRC

Explicação: Associa uma URL à frame.

Exemplo:


Atributo: NAME

Explicação: Associa um valor (nome) à janela.

Exemplo:


Atributo: MARGINWIDTH (Microsoft Internet Explorer)

Explicação: Especifica o valor da margem direita/esquerda da frame. Caso seja impossível para o browser seguir o valor determinado, este é ignorado.

Exemplo:


Atributo: MARGINHEIGHT (Microsoft Internet Explorer)

Explicação: Especifica o valor da margem superior/inferior da frame. Caso seja impossível para o browser seguir o valor determinado, este é ignorado.

Exemplo:


Atributo: SCROLLING

Explicação: Define apresença, ausência ou atribuição automática pelo browser das barras de rolagem. Pode ser "YES", "NO" ou "AUTO".

Exemplo:


Atributo: NORESIZE

Explicação: Impede que o usuário mude o tamanho da frame.

Exemplo:



NOFRAME ...
Explicação: Permite a criação de uma opção de navegação para browsers mais antigos, que não entendem frames.

Exemplo:

<br /> <br /><body> <br /> <p>Esta página usa Frame, mas o seu Browser não os suporta.</p> <br /> <p>Clicando neste Link, a Frame "pagina1"será atualizada</p> <br /> <br />com o arquivo "html1.htm".</body>





©aneste.org 2017
enviar mensagem

    Página principal