Linguagem HTML - Apostilas - Informática, Notas de estudo de Informática

Baixe Linguagem HTML - Apostilas - Informática e outras Notas de estudo em PDF para Informática, somente na Docsity!

F

141 Páginas

Linguagem Linguagem

HTML HTML

Professora Ana Carolina Jaskulski

http://anacarol.blog.br

[email protected]

Março/

Índice

• Introdução..................................................................................................................................
• 1 História..................................................................................................................................
  • 1.1 Evolução do HTML
  • 1.2 Fundamentos da Linguagem HTML................................................................................................................................
  • 1.3 Os Nomes dos Arquivos
  • 1.4 A Lógica LIFO..................................................................................................................................................................
  • 1.5 O Arquivo HTML Básico
  • 1.6 O Arquivo index.htm
• 2 Elementos Estruturais..........................................................................................................
  • ....................................................................................................................................................
    • version= "versão"
    • lan="idioma".........................................................................................................................................................................
    • dir= "rtl| ltr"
  • ..................................................................................................................................................
  • • background= "URL".............................................................................................................................................................
    • bgcolor= "#rrggbb" ou "nome".............................................................................................................................................
    • text= "#rrggbb" ou "nome"...................................................................................................................................................
    • link= "#rrggbb" ou "nome"....................................................................................................................................................
    • alink= "#rrggbb" ou "nome"..................................................................................................................................................
    • vlink= "#rrggbb" ou "nome"..................................................................................................................................................
    • hover= "#rrggbb" ou "nome"................................................................................................................................................
    • bgproperties= "fixed"...........................................................................................................................................................
    • leftmargin= "n".....................................................................................................................................................................
    • topmargin= "n".....................................................................................................................................................................
    • scroll= "yes | no | auto"........................................................................................................................................................

• 3 Elementos do Cabeçalho.....................................................................................................

  - status= "mensagem"............................................................................................................................................................ - defaultstatus= "mensagem"................................................................................................................................................. 

  • Alterando o Formato do Cursor
  • Usando um Arquivo como Cursor..........................................................................................................................................
    • cursor:url(...)........................................................................................................................................................................
  • Anexando Objetos ao Cursor
• 4 Links e Imagens
  • Links Internos e Externos
  • href= "..."................................................................................................................................................................................
    • name= "..."...........................................................................................................................................................................
    • target="_blank", "nome" ou "_top".......................................................................................................................................
    • title="descrição"...................................................................................................................................................................
  • style=text-decoration=: " "......................................................................................................................................................
  • Link Que Muda o Cursor........................................................................................................................................................
  • onmouseover=" "...................................................................................................................................................................
  • Fazendo um link oculto..........................................................................................................................................................
  • onclick="alert('...')".................................................................................................................................................................
  • mailto:....................................................................................................................................................................................
  • Criando Links Para Download...............................................................................................................................................
  • Abrir no Browser Arquivos de Outros Softwares
  • Configurando a Página Inicial - Página de Abertura
• 5 Imagens................................................................................................................................
  • ......................................................................................................................................................................
    • src="..."................................................................................................................................................................................
    • align="top | middle | bottom | left | right"..............................................................................................................................
    • width="largura", height="altura"...........................................................................................................................................
    • border="valor"......................................................................................................................................................................
    • vspace="y" hspace="x"........................................................................................................................................................
    • alt="texto".............................................................................................................................................................................
    • onmouseover, onmouseout="imagem"...............................................................................................................................
  • Criando um Diretório de Imagens Reduzidas
  • Imagem de Baixa Resolução
    • lowsrc="arquivo"..................................................................................................................................................................
• 6 Elementos Especiais............................................................................................................
  • .............................................................................................................................................................
    • code="classe Java".............................................................................................................................................................
    • codebase="URL base".........................................................................................................................................................
    • name="nome"......................................................................................................................................................................
    • align, alt, hspace, vspace, height, width..............................................................................................................................
  • • name="nome"......................................................................................................................................................................
    • value="valor"........................................................................................................................................................................
  • • size="valor" ou "incremento"...............................................................................................................................................
    • color="#rrggbb" ou "nome"..................................................................................................................................................
    • face="nome de fonte"..........................................................................................................................................................
  • 
    ........................................................................................................................................................................
    • clear="left", "right", "all"........................................................................................................................................................
  • ..................................................................................................................................................................
  • • name="nome_do_mapa".....................................................................................................................................................
    • ismap...................................................................................................................................................................................
    • usemap="#nome_do_mapa"...............................................................................................................................................
  • • shape="circ", "poly" ou "rect"...............................................................................................................................................
    • coords="coordenadas"........................................................................................................................................................
    • href="URL"...........................................................................................................................................................................
    • nohref...................................................................................................................................................................................
• 7 Bloqueando a Cópia da Página............................................................................................ - oncontextmenu="return false"............................................................................................................................................. - onselectstart="return false"..................................................................................................................................................
• 8 Formatação de textos e caracteres......................................................................................
  • Elementos Lógicos................................................................................................................................................................
  • ............................................................................................................................................................
  • ......................................................................................................................................................................
  • .....................................................................................................................................................................
  • ......................................................................................................................................................................
  • ...............................................................................................................................................................
  • .....................................................................................................................................................................
  • ......................................................................................................................................................................
  • .................................................................................................................................................................
  • Elementos Físicos.................................................................................................................................................................
  • ............................................................................................................................................................................
  • ...............................................................................................................................................................................
  • ............................................................................................................................................................................
  • ............................................................................................................................................................................
  • ...............................................................................................................................................................
  • .......................................................................................................................................................................
  • .............................................................................................................................................................................
  • .....................................................................................................................................................................
  • .....................................................................................................................................................................
  • ................................................................................................................................................................
  • .......................................................................................................................................................................
  • ..................................................................................................................................................................
    • align="top", "middle", "bottom"
    • behavior =scroll, slide, alternate
    • bgcolor="cor"
    • direction=left, right, up, down...............................................................................................................................................
    • height="número", %:............................................................................................................................................................
    • hspace="número"................................................................................................................................................................
    • loop="número", -1 a infinite.................................................................................................................................................
    • scrollamount="número".......................................................................................................................................................
    • scrolldelay="número"...........................................................................................................................................................
    • vspace="número".................................................................................................................................................................
    • width="número", %..............................................................................................................................................................
• 9 Formatações.........................................................................................................................
  • .....................................................................................................................................................
  • • align="center", "left", "right" ou "justify"...............................................................................................................................
    • style="propriedades"............................................................................................................................................................

  • • align.....................................................................................................................................................................................
    • style="propriedades"

• 10 Linhas Horizontais

  - size="número"...................................................................................................................................................................... - width="número".................................................................................................................................................................... - align="left", "center" ou "right"............................................................................................................................................. - noshade............................................................................................................................................................................... - color="#rrggbb" ou "nome".................................................................................................................................................. 

• 11 Linhas Verticais..................................................................................................................
  • Outros Separadores de Texto...............................................................................................................................................

• 12 Texto Pré-Formatado

  - width="..."............................................................................................................................................................................. 

  • Espaçamento Forçado...........................................................................................................................................................
  • • cite=URL..............................................................................................................................................................................
  • • align="center", "left" ou "right".............................................................................................................................................
    • style="propriedades"............................................................................................................................................................
  • • title
• 13 Listas..................................................................................................................................
  • Não Ordenada.......................................................................................................................................................................
  • • type= “tipo"...........................................................................................................................................................................
  • Ordenada...............................................................................................................................................................................
  • • type="tipo"............................................................................................................................................................................
    • start="valor".........................................................................................................................................................................
  • • compact...............................................................................................................................................................................
  • Usando Figuras como Marcadores
• 14 Tabelas...............................................................................................................................
  • ...
  • ...
  • ...
  • • border="valor"......................................................................................................................................................................
    • cellpadding="valor"..............................................................................................................................................................
    • width="valor" e height="valor"...........................................................................................................................................
    • bgcolor="#rrggbb" ou "nome"..............................................................................................................................................
    • background ="diretório/nome do arquivo"...........................................................................................................................
    • bordercolor ="#rrggbb" ou "nome".......................................................................................................................................
    • bordercolordark ="#rrggbb" ou "nome"................................................................................................................................
    • bordercolorlight ="#rrggbb" ou "nome"................................................................................................................................
  • • align="left, right" ou "center"................................................................................................................................................
    • valign="baseline, bottom, top" ou "middle"..........................................................................................................................
    • bgcolor="cor".......................................................................................................................................................................
    • bordercolor="cor".................................................................................................................................................................
    • bordercolordark="cor"..........................................................................................................................................................
    • bordercolorlight="cor"..........................................................................................................................................................
    • char="caracter"....................................................................................................................................................................
    • charoff="número".................................................................................................................................................................
    • table data
    • rowspan=número.................................................................................................................................................................
    • colspan=número..................................................................................................................................................................
    • align=left, right ou center
    • valign=baseline, bottom, top ou middle
    • nowrap.................................................................................................................................................................................
    • width=valor...........................................................................................................................................................................
    • bgcolor="#RRGGBB"...........................................................................................................................................................
    • background="diretório/nome do arquivo"............................................................................................................................
    • bordercolor...........................................................................................................................................................................
    • bordercolordark e bordercolorlight.......................................................................................................................................
  • • align=top, (default) ou bottom..............................................................................................................................................
  • Formatando grandes tabelas
  • ...
  • ...
  • ...
  • Usando Tabelas para criar Colunas de Texto.......................................................................................................................
  • Imagens, Cores e Backgrounds em Tabelas.........................................................................................................................
  • Fazendo Gráficos de Estatísticas........................................................................................................................................
  • Tabela com Imagens Linkadas............................................................................................................................................

• 15 Multimídia

  - src="URL".......................................................................................................................................................................... - loop="número | infinite"...................................................................................................................................................... 

  • meta.....................................................................................................................................................................................
• 16 Vídeos com img................................................................................................................ - align= "".............................................................................................................................................................................. - alt="texto"........................................................................................................................................................................... - border="número"................................................................................................................................................................ - controls.............................................................................................................................................................................. - dynsrc="URL".................................................................................................................................................................... - height="número"................................................................................................................................................................ - hspace="número".............................................................................................................................................................. - loop="número ou infinite"................................................................................................................................................... - src="endereço".................................................................................................................................................................. - start="fileopen / mouseover".............................................................................................................................................. - vspace="número"............................................................................................................................................................... - width="número"..................................................................................................................................................................
  • • align="left", "right", "top", "bottom"
    • border="número"................................................................................................................................................................
    • frameborder="no"...............................................................................................................................................................
    • height="número"................................................................................................................................................................
    • hidden="true", "false".........................................................................................................................................................
    • hspace="número"..............................................................................................................................................................
    • name="texto".....................................................................................................................................................................
    • pallete="foreground", "background"...................................................................................................................................
    • pluginspace="endereço"....................................................................................................................................................
    • vspace="número"...............................................................................................................................................................
    • type="mimetype"................................................................................................................................................................
    • width="número"..................................................................................................................................................................
• 17 Posicionamento de Objetos - div..................................................................................... - left (esquerdo) e top (topo)................................................................................................................................................ - width (largura) e height (altura)......................................................................................................................................... - position............................................................................................................................................................................... - z-index............................................................................................................................................................................... - overflow..............................................................................................................................................................................
• 18 Filtros................................................................................................................................
  • alpha....................................................................................................................................................................................
  • opacity
    • finishopacity
    • style
    • startx
    • starty
    • finishx
    • finishx
  • blur.......................................................................................................................................................................................
    • add
    • direction
    • strength
  • chroma
    • color
  • dropshadow
    • color...................................................................................................................................................................................
    • offx
    • offy
    • positive
  • fliph e flipv............................................................................................................................................................................
  • glow
    • color
    • strength
  • gray......................................................................................................................................................................................
  • invert....................................................................................................................................................................................
  • motion blur
    • strenght
    • direction
    • progid:DXimagetransform.Microsoft
  • wave
    • add
    • freq
    • lightstrength
    • phase
    • strength
  • xray

• 19 Frames

  - cols="x, y, ..."..................................................................................................................................................................... - rows="x, y, ...".................................................................................................................................................................... - frameborder="1 / 0"............................................................................................................................................................ 

  • Frames verticais
  • Frames Horizontais..............................................................................................................................................................
  • Frames Combinados...........................................................................................................................................................
    • framespacing="valor".........................................................................................................................................................
  • • align="top, middle, bottom, left, right"................................................................................................................................
    • frameborder="1 / 0"
    • src="URL"..........................................................................................................................................................................
    • name="rótulo"....................................................................................................................................................................
    • marginheight="número".....................................................................................................................................................
    • marginwidth="número".......................................................................................................................................................
    • noresize
    • scrolling="yes | no"............................................................................................................................................................
  • Montando um Diretório com frames
  • • src="URL"..........................................................................................................................................................................
    • name="texto".....................................................................................................................................................................
    • width="número"..................................................................................................................................................................
    • height="número"................................................................................................................................................................
    • align="top | middle | bottom | left | right"............................................................................................................................
    • Frameborder="1 | 0"..........................................................................................................................................................
    • margnwidth="pixels"..........................................................................................................................................................
    • marginheight="pixels"........................................................................................................................................................
    • scrolling="yes | no | auto"..................................................................................................................................................
• 20 Botões...............................................................................................................................
  • Fechar a janela....................................................................................................................................................................
  • Imprimir a página.................................................................................................................................................................
  • "Voltar" e "Avançar".............................................................................................................................................................
  • Exibir Código Fonte.............................................................................................................................................................
  • Botões Coloridos
  • Botões com Links
  • Botões Texturizados............................................................................................................................................................
• Tamanhos e Formatos
• Botões com Imagens...........................................................................................................................................................

1 História1 História A internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratórios de pesquisa e se chamava ARPANET (ARPA: Advanced Research Projects Agency ). Era uma rede do Departamento de Defesa norte-americano. Era o auge da Guerra Fria, e os cientistas queriam uma rede que continuasse de pé em caso de um bombardeio. Surgiu então o conceito central da internet: uma rede em que todos os pontos se equivalem e não há um comando central. Assim, se B deixa de funcionar, A e C continuam podendo se comunicar. O nome “internet" surgiu bem mais tarde, quando a tecnologia da ARPANET passou a ser usada para conectar universidades e laboratórios, primeiro nos EUA e depois em outros países. Por isso que não há um único lugar que "governa" a internet. Hoje ela é um conjunto de milhares de redes no mundo inteiro. O que essas redes têm em comum é o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol ), que permite que elas se comuniquem umas com as outras. Então, a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP; uma comunidade de pessoas que usam e desenvolvem essas redes; uma coleção de recursos que podem ser alcançados através destas redes. Durante cerca de duas décadas, a internet ficou restrita ao ambiente acadêmico e científico. Em 87 pela primeira vez foi liberado seu uso comercial nos EUA. A "antiga" internet, antes da Web, exigia do usuário disposição para aprender comandos em Unix (uma linguagem de programação) bastante complicados, e enfrentar um ambiente pouco amigável (unicamente em texto). A Web fez pela internet o que o Windows fez pelo computador pessoal – tornou acessível. O poder da WWW ( World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada parte de um documento eletrônico a outro computador e a outro documento à milhares de quilômetros afastado. Essa conexão entre documentos é possível graças à utilização do protocolo de comunicação chamado HTTP ( Hypertext Transfer Protocol - Protocolo de transferência de Hipertexto) e da linguagem HTML ( Hypertext Markup Language – Linguagem de Desenvolvimento de Hipertexto). O HTML nasceu em 1991 no CERN ( European Council for Nuclear Research – Conselho Europeu de Pesquisas Nucleares), na suíça. Seu criador, o inglês Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar. Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. Foi essa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável. Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídia da WEB. Desenvolvido por Marc Andreson, então do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono 1993 tornou-se disponível a milhões de usuários, com a liberação das versões para Mac e Windows. Se por um lado novos browsers têm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinônimo da WEB. Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de software para que o investimento feito pelos autores de páginas não seja desperdiçado e que os seus documentos não deixem de se poder ler num curto período de tempo. O HTML tem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web, computadores com monitores de diversas resoluções e vários números de cores, equipamentos para input e output de voz, computadores com alta e baixa largura de freqüência e muito mais. Não desperdiçando o tempo (e custo) de serviço de um Webmaster que faz um site e logo-logo esse site deixa de funcionar - para isso é mantido o padrão. Com o HTML (e a facilidade dele), a internet se tornou uma imensa biblioteca, onde há de tudo. Tornou-se uma grande arena de conhecimento e diversão O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suporte para texto com direção variável (esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor acessibilidade para pessoas com incapacidades. 1.1 Evolução do HTML 1992 - Primeira aparição do HTML. 1993 - HTML+ Algumas definições da aparência, tabelas, formulários. 1994 - HTML v2.0 Padronização para as características principais. 1994 - HTML v3.0 uma extensão do HTML+ entendido como um rascunho de padrão. 1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes. 1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript é uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos que faltavam ao HTML: abertura de janelas de avisos etc. 1996 - CSS1 em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem HTML. Possuía uma formatação simples e cerca de 60 propriedades. 1997 - HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e internet Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico. Surge então o DHTML. 1998 - CSS2 em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda

apresenta por volta de 70 novas propriedades. 1999 - HTML v4.01 Alguma modificações da versão anterior. 2000 - XHTML v1.0 É criado e consiste de uma versão XML do HTML v4.01. 1.2 Fundamentos da Linguagem HTML O Edit foi um dos primeiros (e mais simples) editores de texto. Caracteres ASCii puro, sem formatação alguma (mudança de cor de fonte, tabulações nem parágrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações (suas possibilidades), que infelizmente não eram compatíveis entre si, ou seja: uma arquivo do Word não abria no Carta Certa. A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros não conheciam), mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa, por exemplo. Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padrão HTML. O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser ). Seus arquivos são de texto puro com códigos de marcação (as Tags ). Cada Tag é um comando que será interpretado pelo browser (por exemplo, a tag é o comando para transformar o texto em negrito). Ser em texto puro significa que os arquivos em HTML não contêm nada além de letras, números, sinais de pontuação e caracteres em geral que podem ser impressos. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a extensão .htm ou .html, exemplo: index.htm. Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar o ponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte]. Muitos Webmaster s não gostam que os usuários da internet fiquem xeretando no código fonte de sua home page porque lá está toda a sua criatividade, truques de macetes de elaboração da página (a questão de copyright ou direitos autorais), por isso é comum encontrarmos sites com bloqueio deste recurso A grande van tag em da linguagem HTML é que, por ela ser muito simples, não necessita de conhecimentos prévios de programação, por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. Outro fator é o de não precisar de um editor específico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, são excelente para isso), mas existem editores exclusivamente HTML, os WYSiWYG ( What You See is What You Get - O que você vê é o que você tem). Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster , porém, como tudo na Rede está em fase de transição, estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML (que normalmente levam tempo para serem incorporados aos editores), como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem. Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no código fonte e "faz na mão", pois não tem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundâncias e os caracteres de controle dos editores ("sujeiras do código") é um grande artifício, principalmente para diminuir o tamanho do arquivo. Sabendo HTML se ganha independência para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que se estaria usando. 1.3 Os Nomes dos Arquivos HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). Tanto faz escrever como . Porém o servidor onde a página estiver hospedada (ou o sistema operacional, caso a página esteja no seu próprio computador) diferencia letras minúsculas e maiúsculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nome Apostila.htm, o servidor simplesmente não irá encontrá-lo. É por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo não encontrado". Os nomes não devem conter mais que 32 caracteres nem espaços em branco (use o símbolo _ para substituir o espaço em branco), assim, ao invés de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html" O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. Não use pagina..html, use pagina.html para o nome do arquivo. Os nomes de arquivos não devem conter caracteres, tais como: acentos, cedilha, pontuações, sinais de maior e menor, pipe, trema, e comercial, asterisco, parênteses, chaves etc. use somente números, letras e underline (o _) 1.4 A Lógica LIFO O HTML é uma Linguagem de Marcação., onde se insere marcações ( tags ), na forma de elementos HTML no conteúdo da informação que será publicada. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos, Parágrafos, Listas e Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos. As tag s são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tag s funciona em dois tempos, ou seja, tem que se especificar onde começa e onde termina, por exemplo: < tag >texto, onde o sinal "/" significa o fim da atuação da tag. Nunca se deve 'embaralhar' as tag s, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamente terminar por último, assim:

2 Elementos2 Elementos EstruturaisEstruturais ** ... ... ** É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele.

version= "versão"

informa a versão do HTML usado.

lan="idioma"

O corpo do arquivo...

No exemplo acima estou declarando que o arquivo HTML está no idioma inglês Americano. Os idiomas diferem de muitas maneiras quanto à aparência impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nos idiomas orientais.

dir= "rtl| ltr"

Determina a direção do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita.

Essa é uma página formatada para o Hebraico.

Visualização: rtl (observe que a barra de rolagem vertical passou para o lado esquerdo): Visualização dir.= "Ltr" ** ... ... **

Contém o cabeçalho do documento HTML também conhecido como Meta Tag (informações sobre o documento para classificação e indexação dele). Elas não aparecem na página visualizada.

Apostila de HTML

< link rev=made href="mailto:[email protected]">

".

Este é um exemplo de corpo do site para mostrar que só o que está aqui vai aparecer para nosso caro internauta!!

Visualização (observe que as informações estão somente no código): ** ... ... ** Contém o corpo do documento HTML, a parte que aparece na área de visualização do browser. Os atributos alteram a aparência.

background= "URL"

Contém a URL (localização) da imagem que cobrirá o fundo da área de visualização do documento se repetindo para cobrir toda a tela ( tiling ou lado -a- lado). Atenção para cores fortes: isso não poderá impedir a leitura do texto.

Esse é o body - o conteúdo do seu site.... e as figuras aqui atrás são o background e não aparecerão quando o internauta imprimir o site;

Visualização:

v link = "#rrggbb" ou "nome"

Configura a cor do link ativo, sendo que a cor padrão é vermelho púrpura (vlink= "#800080").

hover= "#rrggbb" ou "nome"

Cor do link quando o cursor estiver sobre ele.

bgproperties= "fixed".

Mantém o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o conteúdo da página.

Observe que mesmo movimentando AS BARRAS de rolagem (tanto a vertical quanto a horizontal) a figura de fundo permanece fixa - ela não se move junto com o texto

---

---

---

Visualização: Visualização (depois de mover a barra):

leftmargin = "n"

Define o tamanho, em pixels, do espaço entre o início do texto e a borda esquerda da área de visualização do browser.

Observe o espaço entre a margem e o início desse texto --- LEFTMARGIN =

Visualização com leftmargin = 10:

Visualização com leftmargin = 100

topmargin= "n".

Define o tamanho, em pixels, do espaço entre o início do texto e a borda superior da área de visualização do browser.

Observe o espaço entre o início desse texto e a parte SUPERIOR--- TOPMARGiN=

Visualização:

scroll= "yes | no | auto"

Este atributo define se a página terá as barras de rolagens horizontal e vertical. Onde "yes" Sempre apresentará as barras mesmo que a página não precise, "no" NUNCA apresentará as barras mesmo que a página precise e "auto" apresentará as barras automaticamente caso a página venha a precisar delas. No exemplo a seguir configurei SCRolL= "no", isso é, ele irá apresentar uma página sem as barras.

Usando um Arquivo como Cursor

cursor:url(...)

especifica um arquivo.ani a escolher. Por exemplo com o arquivo meu_cursor.ani.

Aqui esta um link

Para mudar definitivamente um cursor de uma página basta usar a classe de estilo inserindo body {cursor:url( ... )} entre as tags ... . Este cursor só irá funcionar nesta homepage, de modos que, quando você clicar num link ou fechar a página ele voltará ao cursor normal configurado em seu sistema operacional. No exemplo abaixo, o cursor default da página (quando não estiver sobre um outro link definido) será o cursor progress.

---

Historia

Anexando Objetos ao Cursor Deve-se tomar cuidado ao usar este tipo de efeito porque ele pode acabar irritando o internauta que ao movimentar o cursor tem esse objeto atrapalhando ou distraindo sua atenção. Para vincular um arquivo de imagem ao cursor, de modo que essa imagem o acompanhará, fazemos assim: Entre e colocamos o código javascript a seguir:

Depois colocamos o parâmetro onmousemove= "cursor()" na tag , ficando assim ... Por último colocamos dentro do corpo do documento (entre e ) a linha que identificará a figura que se movimentará com o cursor e seu tamanho.

Todo o código ficará assim:

---