Você está na página 1de 73

Projeto e­Jovem ­ Módulo II: HTML

1

Capí tulo 1. HTML

1.1. Introdu ção

Antes de começarmos a estudar HTML, é necessário que se entenda alguns princípios básicos que envolvem esta linguagem.

1.1.1. Internet

Mais que um modismo, a Internet tornou­se um fenômeno. Conectando mais de um milhão de computadores e cerca de 40 milhões de usuários, espalhados em diversos países, valores estes que mudam a cada dia. Sem dúvidas, não dá para ficar de fora desta teia.

Enfim, se formos definir Internet, o melhor é utilizarmos o termo comunicação, pois através dela encontramos serviços e facilidades; notícias e atualidades; ou ainda, como é o caso de muitas pessoas, um excelente local para encontrar amigos, jogos, bate papo e muito mais, como lojas virtuais, onde podemos comprar ou vender com toda segurança.

1.1.2. Hist órico da Internet

A Internet teve início em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores tinha como finalidade demonstrar as potencialidades na construção de redes, usando computadores dispersos (espalhados) em uma grande área. A idéia foi boa, e em 1972, 50 universidades e instituições militares já possuíam conexões.

Hoje é uma arquitetura de softwares e hardwares que estabelecem comunicação entre si, a qual é mantida por organizações comerciais e governamentais. Mais uma das principais características da Internet, é que não possui proprietário.

Para organizar todas estas trocas de informações, existem associações e grupos que se dedicam para suportar, ratificar padrões e resolver questões operacionais, visando promover os objetivos da Internet.

1.1.3. A Word Wide Web (WWW)

As pessoas costumam falar em Internet e Web, será a mesma coisa? Será apenas uma gíria da moçada do bate papo? Ou existe realmente um conceito científico para isto?

Para resolver esta dúvida e também para começarmos a entender esta série de definição de conceitos, vamos partir do seguinte princípio:

A Word Wide Web (Ampla Rede Mundial) é conhecida como WWW, uma nova estrutura de navegação pelos diversos itens de dados em vários computadores diferentes. O modelo WWW trata todos os dados da Internet como hipertexto, isto é, vinculações entre as diferentes partes do documento para permitir que as informações sejam exploradas interativamente e não apenas de uma forma linear.

Por isso, existem programas como o Mozilla Firefox e o Microsoft Internet Explorer que aumentaram muito a popularidade da Internet e graças às suas potencialidades.

Hoje, podemos nas páginas da Internet: ver documentos formatados (cores, efeitos e etc ),

Projeto e­Jovem ­ Módulo II: HTML

2

escutar música, assistir a vídeos, e muito mais.

Enfim, a Web é a interface gráfica da Internet, pois podemos acessá­la, transferir arquivos (Processo este que chamamos UpLoad) e realizar outras operações básicas, sem precisar de uma interface gráfica.

Para concluir, só estamos de fato usando a Web quando estamos navegando, fazendo uso das Home Pages para acessar um site, ou seja, um endereço único que contêm a Home Page (página inicial) e outras páginas que fazem parte deste conjunto de páginas e todas em um único código fonte escrito em uma linguagem chamada HTML.

1.1.4.

Web

Web é o diminutivo para World Wide Web. Termo esse usado originalmente para a parte da Internet que surgiu no início da década de 90, composta por informações dispostas em forma de textos, imagens e sons. É através da Web que se navega com a ajuda de Browsers. Antes, trocava­se basicamente mensagens. As duas redes acabaram se fundindo e hoje a palavra Web é usada como sinônimo da própria Internet ("Grande Rede").

1.1.5. Hipertexto

Originalmente, Hipertexto é qualquer informação de texto em um computador, que contenha saltos (links) para outras informações.

Os documentos visualizados através dos Browsers são escritos em Hipertextos, utilizando­se uma linguagem especial chamada HTML (HyperText Markup Language).

Através de um hipertexto podemos “navegar” de forma especial através de elementos chamados “links”, os quais remetem para outros documentos ou para partes do mesmo documento.

Um documento “não­hipertexto” permite somente que naveguemos em uma seqüência, percorrendo seu conteúdo para frente e para trás.

O hipertexto nas páginas da Web foi expandido para incluir hyperlinks a partir de texto, de uma figura, de um elemento gráfico, de mapas de imagens, som e até mesmo animações, sendo definido com a inserção desses novos recursos de “hipermídia”.

Para se ter uma idéia de hipertexto, basta visualizar o sistema de "Ajuda" do Microsoft Windows.

1.1.6. Links ou Hyperlinks

Link é um ponto de acesso ou salto até um local na mesma pasta de trabalho ou em outro arquivo, representado por meio de texto colorido ou sublinhado, de uma figura, de um elemento gráfico ou de um mapa de imagens.

Você pode clicar em um link para saltar até um local onde se encontra um arquivo em seu sistema local, para um compartilhamento de rede na World Wide Web ou até para uma Intranet.

Projeto e­Jovem ­ Módulo II: HTML

3

1.1.7. Home Page

Home Page é um conjunto de “páginas", documentos disponíveis na Web, interligados entre si (através de links). O termo Home Page também é usado para designar a "página principal" de um conjunto de documentos. Um conjunto de "páginas" também é chamado de Site.

Alguns Servidores da Web reservam index.htm como o nome da home page (página principal), enquanto outros a denominam como default.htm.

1.1.8. Site

Palavra em inglês que significa local, lugar. Na Internet, designa um conjunto de páginas que representa uma pessoa, instituição ou empresa na rede.

1.1.9. Browsers (Navegadores da Web)

Browsers são softwares que leem e interpretam arquivos HTML (Hyper Text Markup Language) enviados para a World Wide Web, formata­os em páginas da Web e os exibe ao usuário. Navegadores da Web também podem executar som ou arquivos de vídeo incorporados em documentos da Web, bastando ter disponível o hardware necessário.

Existem Browsers para todos os gostos. Os mais utilizados, o Internet Explorer e o Mozilla Firefox, vêm acompanhados de outros programas para Internet, como o leitor de Correio Eletrônico (e­mail). Existem outras opções de Browsers, basta escolher um deles e partir tranquilo pelos “mares" da Internet.

1.1.10. Protocolo

Protocolo é um conjunto de regras estabelecidas com o objetivo de permitir a comunicação entre computadores. É um método de acesso a um documento ou serviço através da Internet. Dois principais protocolos usados são o File Transfer Protocol (FTP) e o Hypertext Transfer Protocol (HTTP).

1.1.11. Protocolo HTTP (HyperText Transfer Protocol)

HTTP (Protocolo de Transferência de Hipertexto) é um protocolo da Internet utilizado pelos computadores ligados à Web para se comunicarem, ativa os navegadores da Web para recuperarem informações de servidores da World Wide Web.

O protocolo permite a um usuário usar um programa cliente para entrar em um URL (ou clicar em um hyperlink) e recuperar texto, elementos gráficos, som e outras informações digitais de um servidor da Web.

Endereços URL de recursos HTTP começam com http://.

1.1.12. Protocolo FTP (File Transfer Protocol)

FTP (Protocolo de Transferência de Arquivo) é um protocolo que possibilita a transferência de arquivos de um local para outro pela Internet.

Normalmente, os sites têm áreas públicas de FTP, permitindo que os usuários façam

Projeto e­Jovem ­ Módulo II: HTML

4

download de programas por esse processo.

Protegido por senhas, o FTP também é utilizado para atualizar, à distância, sites localizados

em empresas hospedeiras.

URLs de arquivos em servidores FTP começam com ftp://.

1.1.13. URL (Uniform Resource Locator­ Localizador de Recursos Uniforme)

Um dos principais objetivos do projeto da WWW era o desenvolvimento de um padrão de referência a um item independente de seu tipo (som, filme, imagem, etc.). Para este objetivo foi desenvolvido a URL (Uniform Resource Locator).

URL (Uniforme Resource Locator, numa tradução literal, Localizador Uniforme de Recursos) é uma seqüência de caracteres que fornece o endereço Internet de um Site da Web ou um recurso da World Wide Web, juntamente com o protocolo (como FTP ou HTTP), através do qual o site ou o recurso é acessado.

Internet

está sendo usado.

As duas barras indicam que o que vem a seguir é o endereço de um servidor válido da

Internet ou localização simbólica.

A parte inicial do URL (a que termina com os dois pontos) indica qual protocolo

(www.xyz.com.br, por exemplo) ou o endereço IP do site.

1.1.13.1. URL Absoluto

O URL absoluto inclui um protocolo, como “http", local da rede, além de caminho e nome

de arquivo opcionais.

1.1.13.2. URL Relativo

Em uma referência relativa assume­se que a máquina e diretório do item já estão sendo usados e apenas é necessário indicar o nome do arquivo desejado (ou possivelmente subdiretório e arquivo). Um URL relativo inclui um protocolo.

Exemplo:

O URL

relativo

Treinamento/Cursos.htm

refere­se

à

página

Cursos.htm,

na

pasta

Treinamento, abaixo da pasta atual.

1.1.13.3. Endereço

Endereço é o caminho até um objeto, documento, arquivo, página ou outro destino.

Um endereço pode ser um URL (Uniforme Resource Locator ­ Localizador Uniforme de Recursos) ou um caminho de rede UNC (Universal Naming Convention ­ Convenção Universal para Nomes), o formato padrão para caminhos que incluem um servidor de arquivo de rede de área local que utiliza a sintaxe a seguir:

Exemplo: /servidor/compartilhamento/caminho/nome do arquivo

O endereço http://www.xyz.com.br indica um URL do Web Site da XYZ Informática Ltda.

Projeto e­Jovem ­ Módulo II: HTML

5

1.1.13.4. Entendendo uma URL

http://www.xyz.com.br/treinamento/cursos.htm#local

http:// Protocolo ­ Protocolo da Internet utilizado pelos computadores ligados à Web para comunicarem­se entre si.

www.xyz.com.br Nome do Domínio ­ Domínio são as categorias de endereços da Internet que representam países ou tipos de organização.

www Sigla de World Wide Web, significa Rede Mundial

por

hifens (ex.: XYZ­informática), que simboliza, por exemplo, o nome da empresa, ou de um

produto especifico.

com Tipo de Domínio ­ Indica a natureza do Site. No caso, como trata­se de um Site de uma empresa privada, ".com" vem de comercial. Outros Exemplo: .gov (governo) e .org (organizações sem fins lucrativos).

br Sigla do País ­ composta de duas letras, significa que a página está situada em um computador no Brasil. Páginas que não possuem terminação indicando o país de origem estão situadas nos Estados Unidos. Outros Exemplo: .pt (Portugal) e .jp (Japão).

treinamento Diretório (pasta) onde está localizado a página (arquivo) cursos.htm.

Às vezes uma URL indica apenas o diretório (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado.

cursos.htm Nome da página escrita em HTML requerida (páginas da Web geralmente tem terminação em .htm ou .html).

#local Aponta para o local específico dentro da página que será exibida.

xyz Nome específico que pode conter uma ou mais palavras, separadas ou não,

1.1.14. Endereç o IP (Endereço do Protocolo Internet)

É a maneira padrão de identificar um computador conectado à Internet, da mesma forma que um número de telefone identifica um telefone em uma rede telefônica. Um endereço IP é representado por quatro números separados por pontos e onde cada número é menor que 256, por exemplo, 192.200.44.69. O administrador de seu servidor Web ou o provedor de serviços de Internet irá atribuir um endereço IP a seu computador.

O tipo mais comum de URL é http://, que fornece o endereço Internet de uma página da Web. Alguns outros tipos de URL são:

ftp:// que fornece o local da rede de um recurso FTP (este serviço representa o protocolo de transferência de arquivo na Internet).

gopher:// que fornece o endereço Internet de um diretório gopher (representa um serviço não­gráfico de informações, dirigido por menus).

news:// grupos de discussão ou de notícias (representa o serviço de BBS (bulletin board) organizado em áreas de interesse especial).

mailto:// para especificar um endereço de Correio Eletrônico da Internet (para enviar correio eletrônico).

Projeto e­Jovem ­ Módulo II: HTML

6

1.1.15. ISP (Internet Service Provider)

1.1.15.1. Provedores

O Provedor é uma Empresa ou Organização que oferece conexão para Internet. Através de

um Provedor podemos ter acesso à Internet e serviços de hospedagem de Site. O Provedor disponibiliza as informações solicitadas pelos "navegadores" (Browsers) por uma combinação de computador e programas que formam os servidores situados em instalações apropriadas. Neste caso, o Provedor aluga espaço em um disco rígido, cuja máquina deve estar permanentemente conectada à rede, disponibilizando sua Home Page 24 horas por dia a todos os usuários da Internet.

A ligação com o provedor pode ser feita por linhas telefônicas normais (conexão discada)

ou por linhas especiais, ligadas 24 horas por dia (conexão dedicada) e ainda, através de

banda larga.

Um provedor geralmente oferece várias funções de aplicações como World Wide Web (http), transferência de arquivos (ftp) e gerenciamento de conteúdo (armazenamento de dados). A maioria dos provedores também disponibiliza caixa postal eletrônica, "contas" de e­mail para seus usuários, juntamente com os serviços de acesso e hospedagem.

1.1.15.2. Seu Site na Grande Rede

Ao desenvolver sua Home Page, basta transferir seus arquivos via FTP para o Provedor.

Alguns programas específicos podem facilitar o seu Upload, já que o Browser funciona apenas para busca de arquivos, e não para o envio. O CuteFTP é um dos mais indicados pelos provedores, que permite um acesso totalmente gráfico e interativo a servidores FTP. Mas, sem dúvidas, existe um excelente, o Internet Neighborhood. Sua interface é comum ao do Microsoft Windows Explorer, funcionando de maneira simples, possibilitando Download

e Upload da máquina local para o servidor FTP, transferindo arquivos de uma pasta para outra.

1.1.15.3. Login

Acesso É o processo de identificar­se ao entrar num computador ou em uma rede de computadores. A cada entrada na Internet, você se "loga" (faz o login) em seu Provedor, colocando nome (username) e senha (password).

1.2. Introdu ção à Linguagem HTML

Originado do casamento dos padrões HyTime (Hypermedia/Time­based Doumnt Structuring Language) e SGML (Standard Generalized Markup Language), o HTML, sigla para HyperText Markup Language (Linguagem de Formatação de Hipertexto), linguagem usada para criar páginas na Web, estabelece como um determinado elemento deve ser visualizado, não sendo portanto uma linguagem de programação, e sim, uma linguagem de formatação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas, como:

textos, fotos ou animações, que serão visualizadas pelo programa de navegação (Browser).

Projeto e­Jovem ­ Módulo II: HTML

7

1.2.1. HyTime (Hyprmedia/Time­based Document Structuring Language)

HyTime (ISO 10744:1992) é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks.

O padrão HyTime é independente dos padrões e processamento de texto em geral. Ele

fornece a base para a construção de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padrões de maneira particular.

1.2.2. SGML (Standard Generalized Marup Language)

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna­

se conveniente para transformar documentos em hiper­objetos e para descrever as ligações.

SGML não é aplicado de maneira padronizada: todos os produtos SGML tem seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.ssa, sendo esta uma postura que deve ser tomada.

O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a

capacidade de gravá­lo como código ASCII (American Standard Code for Information Interchange ­ código utilizado para representar textos quando há computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle. Pode­se usar, portanto, o gedit, kate, kedit nas distribuições linux, ou o Notepad, do Windows. Pode­se também usar editores mais modernos, como o BrOffice Writer ou o Word, sendo necessário neste caso, que o documento seja gravado no formato texto, e não, como um ''.odt" normal do BrOffice Writer ou “.doc" normal do MS­Word.

1.2.3. Conjunto de caracteres ASCII

O conjunto de caracteres de 7 bits do código padrão americano para intercâmbio de

informações (ASCII, American Standard Code for Information Interchange) e que é amplamente usado para representar letras e símbolos encontrados em um teclado americano padrão. O conjunto de caracteres ASCII é igual aos 128 primeiros caracteres (0127) do conjunto de caracteres ANSI.

1.2.4. Conjunto de caracteres ANSI

O conjunto de caracteres de 8 bits, do Instituto Nacional de Padronização Americano

(ANSI, American National Standards Institute), que é usado pelo Microsoft Windows e que

possibilita a representação de até 256 caracteres (0­255), através do teclado. Os 128 primeiros caracteres (0­127) correspondem a letras e símbolos de um teclado americano padrão. Os outros 128 caracteres (128­255) representam caracteres especiais, como letras

de alfabetos internacionais, acentos, símbolos monetários e frações.

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 (Browser), você verá páginas na WEB bem dinâmicas, organizadas, animadas e com ela trazendo informações, imagens, sons, vídeos e etc.

Então, você deve se perguntar: Como é feito? Como elas se propagam? Todas estas páginas

Projeto e­Jovem ­ Módulo II: HTML

8

possuem um código fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language).

Este manual tem por objetivo mostrá­lo como criar e exibir páginas HTML, como as que você ver através da WEB. Tais páginas são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão“.html”. Portanto, deveremos salvar nossos exercícios com esta extensão.

Já que entendemos melhor como funciona a internet em geral, daremos inicio ao curso de HTML.

Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma “barra” ( / ):

de fechamento, representada com uma “barra” ( / ): Isso é necess á rio porque as

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e onde termina o texto com a formatação especificada por ela. Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento, não havendo a necessidade do fechamento:

no documento, n ã o havendo a necessidade do fechamento: Todos os elementos podem ter atributos:

Todos os elementos podem ter atributos:

do fechamento: Todos os elementos podem ter atributos: HTML é um recurso muito simples e acess

HTML é um recurso muito simples e acessível para a produção de documentos. Nesta apostila, será possível aprender grande parte de seus elementos.

Nota: Não existem programas em HTML, pois HTML não é uma linguagem de programação, mas de formatação (marcação). Portanto, a rigor, não existem "programadores" de HTML.

1.3. Edi ção de Documentos HTML

Existem Editores HTML chamados WYSIWYG (what you see is what you get ­ o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser1 usado para visitar a página). Alguns bastante conhecidos são, por exemplo: FrontPage e Dreamweaver.

Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo).

Um documento HTML, como dito anteriormente, normalmente terá extensão .html. Porém, poderão também estar no formato .htm.

Gostaria de lembrar, como citei na linha acima, que existem vários editores de Home Pages, como por exemplo: o Front Page Express, Netscape Composer, Home Site, etc. Só que na

Projeto e­Jovem ­ Módulo II: HTML

9

ausência destes aplicativos e sendo desconhecida a Linguagem de HyperTextos, HTML, não poderia criar suas páginas. Daí, a importância de se conhecer esta linguagem.

Para estudarmos HTML, usaremos editores de texto simples, como: gedit, kate ou Bloco de Notas. Precisaremos também de um Browser (Mozilla Firefox ou Internet Explorer) para que possamos visualizar como nossa página está ficando. Para nossos exemplos, usarei o Mozilla Firefox. Tudo Bem? Mas antes, vamos entender como estas páginas são colocadas para que todos possam ver na Web.

1.4. Publicação de Documentos na Internet (Sites)

Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor.

Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos.

Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo.

Já tendo uma idéia dos principais conceitos, vamos começar a produzir nossas páginas.

1.5. Documento HTML Básico e seus Componentes

A estrutura básica de uma página HTML é mostrada na abaixo. Observe que a construção de páginas exige o uso das TAGS:

que a constru çã o de p á ginas exige o uso das TAGS: Com certeza,

Com certeza, você observou melhor o que foi dito anteriormente, que as TAGs normalmente estarão antes e depois de algo, onde este algo pode ser algum texto, ou outro conjunto de TAGs que estão entre estas duas TAGS.

As etiquetas (tags) HTML não são case sensitive, ou seja, as TAGS não fazem diferença entre letras maiúsculas ou minúsculas. Tanto faz escrever, por exemplo, <HTML>, <Html>, <html>, <HtMl>, etc.

Onde :

Principais TAG's

<html>

Marca o início e fim do documento

<head>

Marca o início e o fim do cabeçalho

<title>

Marca o inicio e o fim do título

<body>

Marca o início e o fim do do corpo da página

Projeto e­Jovem ­ Módulo II: HTML

10

O documento HTML básico divide­se, principalmente, em duas TAGS principais das vistas acima, sendo elas: <HEAD> e <BODY>.

1.5.1. <HEAD>

Esta TAG contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser.

Exemplo:

que é mostrado no alto da janela do browser. Exemplo: Todo documento WWW deve ter um

Todo documento WWW deve ter um título, onde principalmente esse título é referenciado em buscas pela rede, dando uma identidade ao documento.

Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Portanto, este é um dos motivos pelo qual se sugere que, ao dar um título a uma página ele seja sugestivo, evitando­se títulos genéricos, como "Introdução", por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet.

1.5.2.

<BODY>

Tudo que estiver contido em <BODY> (Corpo do Texto) será mostrado na janela principal do browser, sendo apresentado ao leitor. No corpo do texto pode conter, por exemplo:

imagens, vídeos, sons, cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, formulários, animações, entre outros.

Exercí cio 1:

Com o que foi visto até agora, vamos criar uma página HTML simples.

(Iniciar>Desenvolvimento

Passo

WEB>Quanta Plus)

Passo 2: Digite o código exatamente como está abaixo:

1:

Abrir

o

Ambiente

de

Desenvolvimento

WEB

est á abaixo: 1: Abrir o Ambiente de Desenvolvimento WEB Passo 3: Ap ó s digit

Passo 3: Após digitá­lo, salvar em uma pasta (Crie uma pasta no computador com seu nome, e dentro dela outra pasta com o nome “Minhas páginas HTML” ) com o nome “Minha_primeira_página.html”

Como salvar:

Para Salvar, é simples: Basta primeiramente clicar no menu: Arquivo Salvar. Localiza­se

clicar no menu: Arquivo → Salvar . Localiza­se onde est á sua pasta e é s

onde está sua pasta e é só salvar quando estiver dento de “Minhas páginas HTML”

Projeto e­Jovem ­ Módulo II: HTML

11

Para ver o resultado deste exemplo, abra o arquivo com o Mozilla Firefox ou com o Konqueror.

abra o arquivo com o Mozilla Firefox ou com o Konqueror. Perceba que existe uma parte

Perceba que existe uma parte do texto que não é mostrada e que existe um texto após a tag title: “<!­­Título do Documento­­>”. Isto é um comentário e não será mostrado na página.

Poderão existir, dentro de cada tag, atributos para implementar. Veremos então abaixo alguns destes atributos da TAG <BODY>.

1.5.2.1. Atributos de <BODY>

Dentro da TAG <BODY> é possível ter vários atributos e podemos defini­los, por exemplo, as cores: para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

Onde:

Atributos da TAG <BODY>

BGCOLOR

Background Color (ou cor de fundo da página). A cor padrão é branca.

TEXT

Cor dos textos da página (padrão: preto).

LINK

Cor dos links (padrão: azul).

ALINK

Cor dos links quando acionados, clicados (padrão: vermelho).

VLINK

Cor dos links depois de visitados (padrão: azul escuro ou roxo).

BACKGROUND

Caminho para a figura de fundo.

Na TAG <BODY> acima, percebemos que, por exemplo, no bgcolor temos “#rrggbb”. Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos, tais como #FF80A0.

Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows ­ por exemplo, podemos escrever:

BGCOLOR="BLUE".

Projeto e­Jovem ­ Módulo II: HTML

12

Porém, browsers mais antigos não apresentarão as cores indicadas.

BACKGROUND: Indica a URL da imagem a ser replicada no fundo da página, como uma marca imagem de fundo.

O significado do link, alink e vlink, não serão discutidos agora, mas estas TAGS servirão

para o uso de links, ou seja, atalho para outras páginas, o que será visto posteriormente.

Nota: Os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Exercí cio 2:

Abra novamente o editor de texto e digite o código abaixo:

Salve com o nome “segunda_pagina.html”

c ó digo abaixo: Salve com o nome “segunda_pagina.html” O resultado da p á gina poder

O resultado da página poderá ser feito no próprio programa ou como visualizamos o

primeiro exercício. Para visualizar pelo programa, clique no ícone em destaque, como mostrado na imagem abaixo:

no í cone em destaque, como mostrado na imagem abaixo: Agora, vamos Visualizar pelo Konqueror, como

Agora, vamos Visualizar pelo Konqueror, como foi visualizado o primeiro exercício. Veja o

resultado:

na imagem abaixo: Agora, vamos Visualizar pelo Konqueror, como foi visualizado o primeiro exerc í cio.

Projeto e­Jovem ­ Módulo II: HTML

13

Opa! Aconteceu algo errado! Os acentos viraram caracteres malucos?

Bom, é preciso falar para o navegador qual codificação ele está usando. Para que nosso texto seja mostrado normalmente, iremos criar uma nova página e colocar nossas informações nela para sair corretamente.

Primeiramente, vamos criar um novo arquivo:

Clique no ícone Kommander Quick Start Dialog (Figura abaixo).

no í cone Kommander Quick Start Dialog (Figura abaixo). Ir á abrir uma janela (Imagem ao
no í cone Kommander Quick Start Dialog (Figura abaixo). Ir á abrir uma janela (Imagem ao

Irá abrir uma janela (Imagem ao lado). Como apresentado nela, desmarque as opções “Mostrar DTD” e “Meta Quanta”. Confirme clicando em “OK”, após estas alterações.

Aparecerá um documento com a estrutura que vimos anteriormente, mas com uma novidade, a TAG

que vimos anteriormente, mas com uma novidade, a TAG N ã o é preciso entendermos a

Não é preciso entendermos a fundo sobre esta TAG agora, pois o importante é saber que ela resolverá nosso problema.

Agora, com esta estrutura montada, percebamos que no rodapé da página existe a página que salvamos este novo documento.

á gina existe a p á gina que salvamos este novo documento. Com base nisso, clique

Com base nisso, clique em Segunda_página.html e copie o que está dentro da tag <title> e o que está dentro da tag <body>, e faça alteração no texto, como mostra a figura abaixo:

fa ç a altera çã o no texto, como mostra a figura abaixo: Salve como “Segunda_p

Salve como “Segunda_página_modificada.html”, e volte para ver como ficou esta página.

Viu a diferença?

Projeto e­Jovem ­ Módulo II: HTML

14

Concordo que é muito chato ficar toda vez digitando todo o código principal. Sabemos então que, para nossa página sair mais interessante, o uso da TAG <meta> para a codificação é muito importante. Portanto, vamos criar um novo documento, como feito no exemplo anterior, e vamos fazer o Exercício 3, já que ela nos dá a estrutura principal da nossa página.

Exercí cio 3:

Algumas vezes é melhor colocar na nossa página uma imagem de fundo, no lugar de uma cor de fundo, não acha? Então, que tal agora colocar uma imagem, ao invés da cor de fundo?

Vamos digitar o arquivo para depois explicar como colocar a imagem. Deixe o seu arquivo, como mostra abaixo:

colocar a imagem. Deixe o seu arquivo, como mostra abaixo: Agora, teremos que ir buscar na

Agora, teremos que ir buscar na internet alguma imagem para colocar como plano de fundo.

Que tal escolher uma imagem no Firefox, por exemplo?

Após escolhida a imagem, salve­a dentro da pasta que estarão nossas páginas HTML, no nosso caso, dentro de “Minhas Páginas HTML”. Escolhemos a imagem com o nome “firefox­ wallpaper.jpg”.

Portanto, colocaremos, do mesmo jeito que salvamos, o nome do arquivo dentro da TAG <body>, como mostra abaixo:

do arquivo dentro da TAG <body>, como mostra abaixo: Salve com o nome “Segunda_pagina_com_background.html”, e

Salve com o nome “Segunda_pagina_com_background.html”, e faça a visualização novamente. Veja o resultado:

Salve com o nome “Segunda_pagina_com_background.html”, e fa ç a a visualiza çã o novamente. Veja o

Projeto e­Jovem ­ Módulo II: HTML

15

Nota: Deve­se ter cuidado na hora de escolher o tipo de plano de fundo ou cor de fundo, pois, por exemplo, se neste caso tivessemos usado um plano de fundo com cor mais clara, provavelmente ficaria difícil enxergar as letras do texto.

É importante que mesmo que sua página tenha uma imagem de fundo, ela também tenha uma cor de fundo. Sempre coloque uma cor de fundo parecida com o do plano de fundo, pois pode ser que por algum motivo a imagem não seja carregada. Então, o Leitor da sua página poderá ainda sim, mesmo não visualizando a imagem, ver o texto escrito.

1.6. Cabe çalho (Tí tulos) <Hn></Hn>

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:

de cabe ç alhos em HTML, de <H1> a <H6>: Esses cabe ç alhos s ã

Esses cabeçalhos são mostrados no browser da seguinte forma:

cabe ç alhos s ã o mostrados no browser da seguinte forma: Exerc í cio 4:

Exercí cio 4:

Vamos

“Pagina_com_cabeçalho.html”. Observe abaixo e faça as alterações necessárias:

agora

utilizar

a

página

do

exercício

3,

salvando­a

como

utilizar a p á gina do exerc í cio 3, salvando­a como Salve novamente, mas como

Salve novamente, mas como a página já tem um nome, é necessário só atualizar as alterações.

A seguir, vamos ver algo mais sobre os cabeçalhos.

Projeto e­Jovem ­ Módulo II: HTML

16

Aninhamento de cabe çalhos

Os cabeçalhos não podem ser aninhados (Colocados um dentro do outro), pois a formatação pode produzir algum resultado próximo ao desejado. Observe abaixo o código e, logo em seguida, como ficou:

Observe abaixo o c ó digo e, logo em seguida, como ficou: Mas o mais comum
Observe abaixo o c ó digo e, logo em seguida, como ficou: Mas o mais comum

Mas o mais comum é que os browsers "entendam" essa formatação como sendo:

browsers "entendam" essa formata çã o como sendo: Ou seja, como se estivesse faltando uma etiqueta

Ou seja, como se estivesse faltando uma etiqueta de fechamento de <h2> antes de <h1> e faltando uma abertura de <h2> depois do fechamento de <h1>, oferecendo o seguinte resultado:

Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos.

Alinhamento de cabe çalhos

Os cabeçalhos têm atributos de alinhamento:

ç alhos Os cabe ç alhos t ê m atributos de alinhamento: Como resultado: 1.7. Fonte

Como resultado:

ç alhos t ê m atributos de alinhamento: Como resultado: 1.7. Fonte <FONT></FONT> At é agora,

1.7. Fonte <FONT></FONT>

Até agora, construímos uma página relativamente simples. Percebemos então que o texto todo ficou de uma cor só até o momento. Mas será que a página só poderá ficar assim? Não poderíamos codificar o tipo de fonte, nem o tamanho, muito menos a cor?

Claro que isso é possível! E é para isso que serve a TAG <FONT>

poss í vel! E é para isso que serve a TAG <FONT> Para utilizar as mudan

Para utilizar as mudanças acima, devemos complementar a TAG <FONT> com os seus atributos, como por exemplo:

Para utilizar as mudan ç as acima, devemos complementar a TAG <FONT> com os seus atributos,

Projeto e­Jovem ­ Módulo II: HTML

17

Onde:

Artibuotos da TAG <FONT>

SIZE

Determina o tamanho da fonte. Esta opção especifica o tamanho da fonte utilizada;

FACE

Determina o tipo de fonte que será usado. Se nenhuma fonte for colocada, será usada a fonte padrão. Esta opção permite que seja definida uma fonte diferente para o texto;

COLOR

Determina a cor da forte. Esta opção especifica a cor do texto. Seu valor pode ser especificado pelo código hexadecimal ou, para algumas cores, pelo seu nome em inglês (blue, black, white etc.).

Abaixo, vemos a diferença das duas TAGs citadas acima:

Abaixo, vemos a diferen ç a das duas TAGs citadas acima: Veremos um pouco sobre cada

Veremos um pouco sobre cada um dos atributos, começando pelo tamanho.

sobre cada um dos atributos, come ç ando pelo tamanho. A TAG acima produzir á a

A TAG acima produzirá a palavra “Texto” com o tamanho numero 3(tamanho padrão).

Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos a esse, por exemplo:

o). Podemos indicar tamanhos relativos a esse, por exemplo: Digite os exemplos e veja a diferen
o). Podemos indicar tamanhos relativos a esse, por exemplo: Digite os exemplos e veja a diferen

Digite os exemplos e veja a diferença entre eles.

Para a seleção das fontes, usaremos o atributo FACE:

Para a sele çã o das fontes, usaremos o atributo FACE: Digite e veja o resultado.

Digite e veja o resultado. Descubra as outras fontes que existem e faça o texto também.

As cores são introduzidas também através do elemento <FONT> quando queremos que alguma parte do texto fique diferente da forma padrão, ou da que foi definida na TAG <BODY>. Usa­se também o sistema RGB, para cores (da mesma forma que vimos para cores anteriormente), como mostrado no exemplo a seguir:

cores anteriormente), como mostrado no exemplo a seguir: Assim, um trecho de texto pode ter uma

Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>.

Mais exemplos:

ter uma cor diferente da defini çã o geral de cores, feita atrav é s dos

Projeto e­Jovem ­ Módulo II: HTML

18

Perceba, como foi dito anteriormente, que tanto faz colocar em letras maiúsculas ou minúsculas, pois o navegador vai interpretar corretamente.

1.8. Estilos de texto

Até agora vimos a estrutura principal do HTML, como modificar a cor de todo o texto, como colocar um plano e fundo e como alterar partes do texto, mas e se quisermos colocar, por exemplo, uma palavra em negrito e sublinhado, como o título? Sim, isso é possível, por isso vamos estudar os estilos.

Estilos Fí sicos

<B>

Negrito

<I>

Itálico

<U>

Sublinhado.

<STRIKE> ou

Frase riscada.

<S>

<BIG>

Fonte um pouco maior.

<SMALL>

Fonte um pouco menor.

<SUB>

Frase em estilo índice, como em H2O, por exemplo.

<SUP>

Frase em estilo expoente, como em Km2, por exemplo.

Outras TAGs de formatação

Temos outras TAGs que, dependendo no Navegador, podem ou não funcionar corretamente:

HTML oferece outras TAGs para formatação:

Outras TAGs de Formataçã o

<PRE>

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações

<BLOCKQUOTE>

É usado para citações longas

<ADDRESS>

Usado para formatar endereços de E­Mail e referências a autores de documentos, como por exemplo:

<CODE>.

Utilizada para relacionar o código­fonte de programas. Geralmente será visualizado em fonte monoespaçada.

<STRONG>

Utilizada para dar ênfase especial a um trecho de texto. Geralmente será visualizado em fonte

<DFN>

Utilizada para destacar um definição. Geralmente será visualizado em fonte itálica.

<EM>

Utilizado para sublinhar parte do texto

<CENTER>

Utilizada para centralizar um texto na tela.

A TAG <PRE> permite criar textos pré­formatados, semelhantes aos produzidos em editores de texto. Espaços em branco, marcas de tabulação e quebras de linha são reconhecidos e colocados nos respectivos pontos de inserção. Textos pré­formatados são representados pela fonte mono espaçada, definida pelo usuário.

Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

Dentro de um texto pré­formatado:

Projeto e­Jovem ­ Módulo II: HTML

19

É permitido utilizar links e âncoras. Entretanto, não existe certeza de como o browser interpretará essas marcações.

A TAG <P> não deve ser utilizado.

Não devem ser usados outros comandos de formatação, tais como os de listas e de cabeçalhos.

Observe abaixo:

tais como os de listas e de cabe ç alhos. Observe abaixo: Que resultaria na seguinte

Que resultaria na seguinte representação na tela:

Que resultaria na seguinte representa çã o na tela: A Tag <ADDRESS> formata informa çõ es,

A Tag <ADDRESS> formata informações, tais como: o endereço, a assinatura e a autoria

de quem publicou a página. Normalmente, estes dados são colocados no final de um

documento e, geralmente, serão visualizados em itálico. Exemplo:

s ã o colocados no final de um documento e, geralmente, ser ã o visualizados em

O resultado seria:

s ã o colocados no final de um documento e, geralmente, ser ã o visualizados em

Projeto e­Jovem ­ Módulo II: HTML

20

Exerc í cio 5:

Produza uma página utilizando os conhecimentos adquiridos até agora. Faça uma página com se fosse um currículo seu, colocando alguns dados pessoais: o que gosta (Tipo de música, por exemplo). Chame­a de “meus_dados.html”.

1.9. Par ágrafo <P>

Para separar blocos de texto, usamos o elemento <P>, por exemplo:

blocos de texto, usamos o elemento <P>, por exemplo: que produz o seguinte: Combinando par á

que produz o seguinte:

o elemento <P>, por exemplo: que produz o seguinte: Combinando par á grafos e quebras de

Combinando parágrafos e quebras de linhas (Veremos em breve), temos por exemplo:

e quebras de linhas (Veremos em breve), temos por exemplo: O resultado da marca çã o

O resultado da marcação acima é:

temos por exemplo: O resultado da marca çã o acima é : A TAG <P> tem

A TAG <P> tem atributo de alinhamento semelhante aos cabeçalhos, como nos exemplos a

seguir:

semelhante aos cabe ç alhos, como nos exemplos a seguir: Como vimos anteriormente, podemos tamb é
semelhante aos cabe ç alhos, como nos exemplos a seguir: Como vimos anteriormente, podemos tamb é

Como vimos anteriormente, podemos também alinhar à esquerda (align=left), que já é padrão e também à direita (align=right).

Exercí cio 6:

Pegue a página“meus_dados.html”e implemente com estes conhecimentos de parágrafos. Salve a página, antes de modificar, como “meus_dados_modificados.html”

Projeto e­Jovem ­ Módulo II: HTML

21

1.10. Quebra de linha <BR>

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.

Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens.

1.11. Linhas horizontais <HR>

A TAG <HR> insere uma linha horizontal que tem diversos atributos, oferecendo

resultados diversos.

Exercí cio 7:

Para exercitar, através do “meus_dados_modificados.html”, implemente as linhas horizontais da melhor forma possível.

1.12. HiperTexto (Hyperlink)<A>

Agora, teremos a oportunidade de interligar todas as nossas páginas através dos hyperlinks.

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto ­ também chamadas hypertext links ou hiperlinks, ou simplesmente links, onde normalmente, o mouse vira uma “mãozinha” e, ao clicar “chamamos” (abrimos) um outro documento, página web ou figura por exemplo.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:

utilizamos a etiqueta <A>, da seguinte forma: Onde: • arquivo_destino → é o endere ç o

Onde:

arquivo_destino é o endereço do documento de destino, da página ou imagem que queremos abrir.

âncora é o texto ou imagem que servirá de ligação hipertexto do documento, sendo apresentado para o documento de destino.

Atributos

A TAG <A> tem vários atributos que são utilizados de acordo com a ação associada ao link.

Os mais usados são apresentados a seguir:

HREF

Indica o arquivo de destino da ligação de hipertexto.

TARGET

Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na seção sobre frames.

NAME

Marca um indicador, isto é, uma região de um documento como destino de uma ligação.

Projeto e­Jovem ­ Módulo II: HTML

22

1.12.1. Caminhos (uso de Links)

Os links podem estar indicados como caminhos relativos ou absolutos.

1.12.2. Caminho Relativo

O caminho relativo pode ser usado sempre que queremos fazer referência a um documento

armazenado no mesmo servidor do documento atual.

Através do campo de endereços do browser, é possível identificar se um documento (página) que está sendo visualizado está dentro de algum diretório (pasta). Como, por exemplo, se estivermos em um browser acessando a página da FACCAT e vemos o seguinte endereço: http://www.faccat.br/apostilas/apostila_de_informatica.html. O que podemos concluir é que o documento que está sendo visualizado no momento, chamado apostila_de_informatica.html, está localizado dentro de um diretório (pasta) chamado apostilas do servidor www.faccat.br.

Então, para escrevermos um link deste documento (apostila_de_informatica.html) para um documento chamado (doc.html), que está localizado no diretório /apostilas/documentos/, do mesmo servidor (www.faccat.br), tudo que precisamos fazer é escrever:

<A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A>

Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde está o documento a que estamos nos referindo no link. Quando há alguma dúvida, o melhor é usar o caminho absoluto.

1.12.3. Caminho Absoluto

Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:

<A HREF="http://www.faccat.br"> FACCAT ­ Faculdades de Taquara </A>

Que oferece um link FACCAT ­ Faculdades de Taquara que ao ser clicado com o mouse abrirá a página, cujo endereço é: http://www.faccat.br.

Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet.

1.12.4. Indicadores (uso de Links)

Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto.

A formatação:

<A NAME="inicio"> Indicadores (uso de links) </A> faz com que a âncora Indicadores (uso de links) seja o destino de um link.

Se escrevermos:

<A HREF="#inicio"> Topo do Documento </A> , teremos uma ligação hipertexto para um trecho deste mesmo documento.

Projeto e­Jovem ­ Módulo II: HTML

23

Exercí cio 8:

Vamos agora treinar os indicadores. Vamos fazer uma página sobre as ferramentas estudadas até aqui. Ou seja, elabore um pequeno texto sobre: Inkscape, Gimp, BrOffice. Faça no início da página um link para cada um dos conteúdos. E em cada conteúdo, dê a opção para ir ao topo. Veja como vai funcionar isso. Salve como “Ferramentas_Livres”

Exercí cio 9:

Agora, vamos criar links entre suas páginas criadas. Crie uma página chamada “index.html” com os links de todas as páginas criadas até agora. Se preferir (o que é importante), em cada página crie os mesmos links para o acesso mais rápido.

1.13. Lista de caracteres

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 desejado, e um ; final.

Quatro caracteres ASCII ­ <, >, e & têm significados especiais em HTML, e são usados dentro de documentos, seguindo a correspondência:

1.13.1. Caracteres Acentuados no Português e especiais

á &aacute;

Á &Aacute;

ã &atilde;

à &Atilde;

â &acirc;

 &Acirc;

à &agrave;

À &Agrave;

é &eacute;

É &Eacute;

ê &ecirc;

Ê &Ecirc;

í &iacute;

Í &Iacute;

ó &oacute;

Ó &Oacute;

õ &otilde;

Õ &Otilde;

ô &ocirc;

Ô &Ocirc;

ú &uacute;

Ú &Uacute;

ü &uuml;

Ü &Uuml;

ç &ccedil;

Ç &Ccedil;

1.13.2. Caracteres Especiais

e

aspas duplas

&ldquo; e &rdquo;

espadas

&spades;

e

aspas simples

&lsquo; e &rsquo;

paus

&clubs;

e

aspas angulares simples

&lsaquo; e &rsaquo;

º

ordenal masculino

&ordm;

« e »

aspas angulares duplas

&laquo; e &raquo;

ª

ordinal feminino

&ordf;

 

espaço

&nbsp;

travessão ‘en’

&ndash;

&

e comercial

&amp;

travessão ‘em’

&mdash;

>

maior que

&gt;

 

hífen oculto

&shy;

<

menor que

&lt;

ˉ

macron

&macr;

ˆ

acento circunflexo

&circ;

reticências

&hellip;

˜

acento til

&tilde;

¦

barra vertical

&brvbar;

¨

acento trema

&uml;

marcador (bullet)

&bull;

´

acento agudo

&cute;

parágrafo

&para;

¸

cedilha

&cedil;

copas

&hearts;

"

aspas duplas

&quot;

ouros

&diams;

§

parágrafo legal

&sect;

 

Projeto e­Jovem ­ Módulo II: HTML

24

1.13.3. Caracteres Comerciais

©

copyright

&copy;

¢

centavo

&cent;

®

marca registrada

&reg

euro

&euro;

trade mark

&trade;

¥

iene (yen)

&yen;

£

libra esterlina

&pound;

¤

símbolo monetário

&curren;

1.13.4. Caracteres Matemáticos e L ógicos

¹

elevado a um

&sup1;

±

mais ou menos

&plusmn;

²

ao quadrado

&sup2;

sinal de subtração

&minus;

³

ao cubo

&sup3;

×

sinal de multiplicação

&times;

½

um meio

&frac12;

÷

sinal de divisão

&divide;

¼

um quarto

&frac14;

Asterisco

&lowast;

¾

três quartos

&frac34;

barra de fração

&frasl;

>

maior que

&gt;

por­mil

&permil;

<

menor que

&lt;

sinal de integral

&int;

somatório

&sum;

Diferente

&ne;

PI

&prod;

menor ou igual

&le;

raiz quadrada

&radic;

maior ou igual

&ge;

infinito

&infin;

consequentemente

&there4;

quase igual

&asymp;

Ponto

&sdot;

Aprox. igual

&cong;

ponto do meio

&middot;

proporcional

&prop;

diferença parcial

&part;

idêntico

&equiv;

parte imaginária do número

&image;

parte real do número

&real;

segundo

&Prime;

minuto

&prime;

°

grau

&deg;

Ângulo

&ang;

elemento de/pertence a

&isin;

perpendicular

&perp;

nã é elemento de

&notin;

Nabla

&nabla;

Interseção

&cap;

soma direta

&oplus;

União

&cup;

produto de vetor

&otimes;

subconjunto de

&sub;

Alef

&alefsym;

superconjunto de

&sup;

ø

produto vazio

&oslash;

subconjunto de ou igual a

&sube;

Ø

produto vazio

&Oslash;

superconjunto de ou igual a

&supe;

existe

&exist;

e

setas simples

&uarr; e &darr;

qualquer

&forall;

seta simples

&harr;

vazio

&empty;

e

setas duplas

&lArr; e &hrrr;

 

não lógico

 

e

setas duplas

&uArr; e

¬

&not;

&dArr;

e lógico

&and;

seta dupla

&hArr;

ou lógico

&or;

e

teto (esquerdo e direito)

&lceil; e &rceil;

Projeto e­Jovem ­ Módulo II: HTML

25

 

retorno de carro

 

e

piso (esquerdo e direito)

&lfloor; e

&crarr;

&rfloor;

 

setas simples

&larr; e

losango

&loz;

e

&rarr;

1.13.5. Outros Acentos e Caracteres Especiais

ñ &ntilde;

Ñ

&Ntilde;

¡ &iexcl;

¿ &iquest;

ä &auml;

Ä

&Auml;

å &aring;

Å &Aring;

ë &euml;

Ë

&Euml;

è &grave;

È &Egrave;

ï &iuml;

Ï

&Iuml;

ì &igrave;

Ì &Igrave;

î &icirc;

Î

&Icirc;

ò &ograve;

Ò &Ograve;

ö &ouml;

Ö

&Ouml;

û &ucirc;

Û &Ucirc;

ù &ugrave;

Ù

&Ugrave;

ÿ &yuml;

Ÿ &Yuml;

ý &yacute;

Ý

&Yacute;

œ &oelig;

Π&OElig;

æ &aelig;

Æ

&AElig;

š &scaron;

Š &Scaron;

† &dagger;

&Dagger;

ð &eth;

Ð &ETH;

þ &thorn;

Þ

&THORN;

ß &szlig;

µ &micro;

§ &sect;

ƒ

&fnof;

1.13.6. Caracteres Gregos

α &alpha;

Α &Alpha;

β &beta;

Β &Beta;

δ &delta;

Δ &Delta;

ε &epsilon;

Ε &Epsilon;

η &eta;

Η &Eta;

θ &theta;

Θ &Theta;

κ &kappa;

Κ &Kappa;

λ &lambda;

Λ &Lambda;

ν &nu;

Ν &Nu;

ξ &xi;

Ξ &Xi;

π &pi;

Π &Pi;

ρ &rho;

Ρ &Rho;

ς &sigmaf;

τ &tau;

Τ &Tau;

υ &upsilon;

Φ &Phi;

χ &chi;

Χ &Chi;

ψ &psi;

Ω &Omega;

ϑ &thetasym;

ϒ &upsih;

ϖ &piv;

γ &gamma;

Γ &Gamma;

ο &omicron;

Ο &Omicron;

ζ &zeta;

Ζ &Zeta;

σ &sigma;

Σ &Sigma;

ι &iota;

Ι &Iota;

Υ &Upsilon;

φ &phi;

μ &mu;

Μ &Mu;

Ψ &Psi;

ω &omega;

Projeto e­Jovem ­ Módulo II: HTML

26

1.14. Tabela de Cores Hexadecimal

­ Módulo II: HTML 26 1.14. Tabela de Cores Hexadecimal 1.15. Imagens<IMG> A TAG <IMG> insere

1.15. Imagens<IMG>

A TAG <IMG> insere imagens que são apresentadas junto com os textos. E segue a seguinte forma:

apresentadas junto com os textos. E segue a seguinte forma: Um atributo SRC deve estar presente,

Um atributo SRC deve estar presente, onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir. Pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente).

Projeto e­Jovem ­ Módulo II: HTML

27

Assim, escrevendo:

<IMG SRC = "nome_da_figura.extensão">

ou, se ela estiver dentro de uma pasta no mesmo servidor:

<IMG SRC = "nome_da_pasta/nome_da_figura.extensão">

Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim:

<IMG SRC = "arvore.gif">

As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes extensões: .gif, .jpg (ou .jpeg), .png, .bmp.

Atributos Básicos de Imagem:

ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao “passar o mouse sobre a imagem”. <IMG SRC="URL_imagem" ALT="descrição_da_imagem"> Dessa forma:

<IMG SRC="newred.gif" ALT="Novo!!!">

WIDTH e

Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. <IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.

HEIGHT

 

Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda, que indica sua condição de link. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Se quisermos uma borda mais larga:

BORDER

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> </A> Se quisermos uma imagem sem borda:

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A> Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação:

<IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2>