INDICE INDICE...2 HTML BÁSICO...5 COMO SE CRIA UM DOCUMENTO HTML...5 TAGS OU COMANDOS HTML...5 ESTRUTURA BÁSICA...6 Criando o primeiro documento HTML...6 Comentários...6 Caracteres especiais...6 PARÁGRAFOS E QUEBRAS DE LINHA...7 O COMANDO <P>...7 Alinhando parágrafos...7 O COMANDO <BR>...7 O COMANDO <HR>...7 Alterando o formato de linha de separação...7 USANDO IMAGENS COMO LINHAS SEPARADORAS...7 DIV...7 BLOCKQUOTE...8 ESTILOS DE TEXTO E FONTE...8 APLICANDO CORES E TAMANHOS NO TEXTO...8 ALTERANDO O TAMANHO DA FONTE...8 Size...9 Face...9 Color...9 CABEÇALHOS...10 ALINHANDO CABEÇALHOS...10 LISTAS...10 LISTAS ORDENADAS...10 LISTAS NÃO ORDENADAS...10 LISTA DE DEFINIÇÃO...10 IMAGENS...11 O COMANDO IMG...11 URLS E LINKS...13 URL...13 Criando um Link com Arquivos Locais...13 Usando uma Imagem como Hiperlink...13 Vinculando Arquivos de outros diretórios...13 CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA...13 Criando uma Âncora...14 ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML...14 DEFININDO DESTINOS...14 TABELAS...14 ELEMENTOS BÁSICOS DE TABELAS...14 PARÂMETROS...15 Parâmetros do elemento <TABLE>...15 Parâmetros do elemento <TR>...15 Parâmetros dos Elementos <TD> e <TH>...16 FRAMES...17 http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 2
Como funcionam os frames...17 O Comando Document...17 O Comando FRAMESET...17 Cols=tamanho...17 ROWS=tamanho...17 Combinando ROWS e COLS...18 O ATRIBUTO <FRAMESPACING=VALOR>...18 O ATRIBUTO <FRAMEBORDER=1/0>...18 O COMANDO <FRAME SRC>...18 Ajustando as margens internas do Frame...19 Barras de Rolagem e Redimensionamento dos Frames...19 INTERLIGAÇÃO DE FRAMES...19 Criando a Estrutura dos Frames...19 Criando o conteúdo do Menu...19 IFRAME...20 META...21 INFORMAÇÕES ESPECÍFICAS...21 VARIAÇÕES DO COMANDO META...21 MULTIMIDEA...21 CONSIDERAÇÃO NO USO DE MULTIMIDEA...21 INSERINDO UM VÍDEO...21 ATRIBUTOS UTILIZADOS EM VÍDEOS...22 USANDO O COMANDO EMBED PARA EXIBIR VÍDEO...23 O comando NOEMBED...23 MARQUEE...24 Combinando a utilização de vários Marquees...25 SOM...25 Inserindo Áudio...26 Inserindo Áudio através de Hiperlinks...26 INSERINDO MÚSICA DE FUNDO...26 O comando BGSOUND (Internet Explorer)...26 JAVA...27 ELEMENTO HTML PARA APPLETS JAVA...27 FOLHAS DE ESTILO...27 VERSÕES DA CSS...27 CSS - 1...28 CSS Positioning (CSS-P)...28 CSS 2...28 CSS 3...28 REGRAS DA CSS...28 INCLUINDO CSS NO DOCUMENTO...28 Incluindo a CSS em uma página WEB...29 Incluindo a CSS em um site da WEB...29 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO...30 DEFININDO CLASSES...31 DEFININDO IDS...31 LAYERS...31 DEFININDO TAGS DENTRO DO CONTEXTO...31 CRIANDO UMA DEFINIÇÃO!IMPORTANT...32 DEFININDO A CSS PARA IMPRESSÃO...32 DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO...33 FAZENDO O DOWNLOADS DE FONTES...33 CONTROLES DE TEXTO...33 Ajustando o Kerning...33 Ajustando o espaçamento entre as palavras...34 Ajustando as Entrelinhas...34 DEFININDO SEGUNDO PLANO...34 BORDAS...35 http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 3
ENVOLVENDO UM ELEMENTO COM TEXTO...36 POSICIONAMENTOS...36 Posicionamento Estático...36 Posicionamento Relativo...36 Posicionamento Absoluto...36 Posicionamento 3D...36 DEFININDO A VISIBILIDADE DE UM ELEMENTO...37 DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE)...37 Definindo o lugar do Overflow...37 BARRAS DE ROLAGEM COLORIDAS...38 CUIDADOS NA CONSTRUÇÃO DE UM SITE...39 TRACE METAS...39 FAÇA UM ESBOÇO...39 DIVIDA O SEU SITE...39 ACESSO DIRETO A INFORMAÇÃO...39 EVITE SITES TIPO CARNAVAL...39 NÃO SE PRENDA A PLATAFORMAS...39 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...39 GLOSSÁRIO...39 http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 4
HTML BÁSICO A Internet é, sem sombra de dúvida, o lugar mais quente da atualidade, onde os internautas passam a maior parte do tempo, e onde proliferam home pages de universidades, empresas, tendências, jornais, lojas e tudo o mais que se possa imaginar. Até pouco tempo, atingir o grande público era privilégio de poucos. Com a WWW, tudo fica diferente; coloque uma home page no ar, mande um e-mail para algumas pessoas, e saiba que, se o conteúdo for bom, a sua página será visitada e divulgada para outras pessoas. Para colocar uma página no ar, duas coisas: fazer a Home Page e conseguir um espaço em disco em uma máquina conectada permanentemente na Internet. Agora você conhecerá o básico da linguagem HTML, utilizada para se construírem páginas Web. Para fazer Home Pages, você terá que aprender pelo menos um pouco de HTML (Hipertext Markup Language) que pode ser traduzido como Linguagem de Hipertexto baseada em Marcas. Apesar da palavra linguagem, que leva a associação com linguagens de programação, ao final deste curso você vai perceber que gerar documentos HTML é bastante fácil e parecido com formatação de textos. Para que qualquer computador pudesse entender os documentos HTML, sem as complicações que trazem os caracteres de controles e coisa do tipo, foi definido que estes documentos deveriam ser gerados no formato mais simples possível, o bom e velho txt. Desta forma, documentos HTML podem ser gerados por qualquer editor de textos, desde que gravados no formato texto e com extensão.htm ou.html. COMO SE CRIA UM DOCUMENTO HTML Uma página Web é composta de textos e comandos especiais (tags). Assim como qualquer linguagem, o programador deve escrever o código-fonte seguindo as regras da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos (tags) do código para formatar e acessar recursos da Web. O código fonte pode ser escrito usando-se o mais simples dos editores de texto. Até o programa Bloco de Notas pode ser usado para esta tarefa. Mas existem editores WYSIWYG (What you see is what you get, ou o que você vê é o que realmente obtém) como exemplo podemos citar o Microsoft FrontPage, DreamWeaver. Existem ainda editores não WYSIWIG, onde você tem que construir o código, mas ele completa muitos comando, como exemplo podemos citar o Arachnophilia e o AceExpert, e na própria Internet existem vários destes editores gratuitos. TAGS OU COMANDOS HTML As TAGS normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As TAGS são identificadas pelo sinais < > ou </ >. Entre os sinais <> são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão /, indicando que a TAG está finalizando a marcação de texto. Os principais elementos de página HTML são, títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela: 1. Título: É o texto que aparece na barra de título do browser. 2. Imagem: São figuras, desenhos e fotos usados para ilustrar a página. 3. Texto: É a informação mais comum dentro de uma página. Pode ser formatado através de comandos. 4. Link: É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na Internet. Uma figura também pode ser usada como link, ou seja, clicando na figura saltamos para outro local. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 5
5. Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis tamanhos de cabeçalhos. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 6
ESTRUTURA BÁSICA A estrutura básica de um documento HTML é a seguinte: <HTML> <HEAD> <TITLE> Título do Documento</TITLE> </HEAD> <BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão aparecer em sua Home Page </BODY> </HTML> Vamos ver um pouco sobre os elementos básicos do HTML: <HTML></HTML>: Indicam respectivamente o início e o fim do documento. Todo o resto deve estar entre estas marcas. <HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento. <TITLE></TITLE>: Indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho. <BODY></BODY>: Corpo do documento. Entre estas marcas estará o conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parâmetros opcionais: BACKGROUND: configura especificar uma imagem como fundo da página. EX. <BODY BACKGROUND= fundo.gif > configura uma página com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da página. EX: <BODY BGCOLOR= White > configura uma página com fundo branco (padrão). TEXT: configura a cor padrão do texto da página. EX: <BODY TEXT= Black > configura uma página com texto em cor preta. (padrão). LINK, ALINK, VLINK: configura as cores dos links da página. ALINK configura a cor do link ativo, isto é quando é clicado, e VLINK configura a cor de um link já visitado. EX: <BODY LINK= Blue VLINK= Purple ALINK= Red > configura uma página com links azuis, links ativos vermelhos e links visitados roxos. Esta estrutura inicial é simples, no entanto existem detalhes que devem ser respeitados: Todas as marcas apresentadas são do tipo início-fim, ou seja, funcionam em pares. Em cada documento HTML só deve haver uma marca de cada tipo acima. Existe uma ordem seqüencial lógica entre as marcas. Estes detalhes devem ser respeitados, senão o browser não conseguirá apresentar o documento. Como HTML não é uma linguagem de programação, você não será avisado de erros que tenha cometido na edição do seu documento. Criando o primeiro documento HTML <HTML> <HEAD> <TITLE>Este é o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR= Red TEXT= White > Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento não usarei nenhuma formatação especial aqui dentro. </BODY> </HTML> Comentários Podemos também acrescentar comentários ao nosso código HTML, estes comentários não aparecem para no navegado e somente no código, são representados pela seguinte TAG <!- - inicia o comentário //- - >, finaliza o comentário. São utilizados para ocultar scripts dentro do código Html, pois caso o script não possa ser processado o mesmo será ignorado pelo navegador. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 7
Caracteres especiais Existem caracteres que não podem ser obtidos através de teclado. Eles podem ser inseridos em sua página através da especificação de um código especial que o browser interpreta e substitui por um caractere específico. Esses códigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. Alguns dos símbolos mais utilizados no HTML é o que corresponde ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para uma tabela mais completa visite o link http://www.w3.org/tr/html401/sgml/entities.html PARÁGRAFOS E QUEBRAS DE LINHA Ao contrário dos editores de texto comum, nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa HTML é necessário colocar um comando específico para que o browser entenda que você deseja mudar de linha e iniciar uma nova linha ou começar um novo parágrafo. Existem dois comandos para criar quebras de linha e novos parágrafos. São os comandos <P> e <BR> O COMANDO <P> Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na segunda linha após o final do parágrafo anterior deve ser usado o comando <P>. Alinhando parágrafos O Comando <P> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o parágrafo. ALIGN=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT Centraliza o texto. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padrão) O COMANDO <BR> O comando <P> insere uma linha em branco no seu local ou na linha seguinte à qual ele foi inserido, caso esteja no meio de uma linha de texto e não em seu final. O comando <BR> tem como função avançar para a linha imediatamente após àquela em que ele se encontra, sem, contudo, deixar uma linha em branco. O COMANDO <HR> O comando <HR> tem como finalidade inserir uma linha divisória na posição em que foi especificado. Seu uso é recomendado para criar uma divisão na página. Alterando o formato de linha de separação As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) da linha, deixando-a mais grossa em função do valor especificado. Esse valor é expresso em pixels. A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode ser expresso em pixels, sendo que, nesse caso, o tamanho da linha é fixo ou utiliza uma porcentagem relativa à largura da janela. Assim, seu tamanho varia em função da largura da janela. Veja o código abaixo: USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando <HR> como separador, podemos usar uma imagem com o comando <IMG>. Assim como o comando HR, podemos usar os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem. DIV http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 8
A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto. Podemos envolver vários parágrafos com o elemento DIV BLOCKQUOTE O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e pode ser cumulativo Vamos a um exemplo: <html> <head> <title>formatação de Parágrafos</title> </head> <body> <P align="center">texto centralizado</p> <P align="justify">aqui temos um texto justificado, aqui temos um texto justificado, Aqui temos um texto justificado, <BR> <div align="center">aqui centralizamos um texto com o elemento DIV</div> <div align="justify">começamos justificado<p align="center">centralizei</p> continuamos justificado</div> <hr align="center"> <blockquote>recuando o Texto</blockquote> <blockquote><blockquote>recuando o Texto 2 vezes</blockquote></blockquote> <HR color="red" size=10 width=75%> </body> </html> ESTILOS DE TEXTO E FONTE Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser especificados em pares, marcando o início e fim do texto que sofrerá a formatação. Os principais comandos de estilo de texto são: Comando Sintaxe Função Negrito <B>Texto</B> Aplica o estilo Negrito Itálico <I>Texto</I> Aplica o estilo Itálico Sublinhado <U>Texto</U> Aplica o estilo sublinhado(não funciona em alguns Browsers Strong <Strong>Texto</Strong> Similar ao Negrito Typerwriter <TT>Texto</TT> Deixa o texto com espaçamento regular Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito Small <SMALL>Texto</SMALL> Reduz e altera a fonte Sobrescrito <SUP>Texto</SUP> Eleva o texto e diminui seu corpo Subscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK>Texto</BLINK> Faz com que o texto pisque (Não funciona no IE 4. APLICANDO CORES E TAMANHOS NO TEXTO http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 9
ALTERANDO O TAMANHO DA FONTE Um dos recursos de tratamento do texto mais interessantes da linguagem HTML é a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsável por isso é o comando <FONT>, que é do tipo liga desliga. Size O parâmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado um número antecedido pelo sinal de adição ou de subtração, o tamanho da fonte atual será aumentado ou diminuído nesse valor. Por exemplo, se a fonte atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte será exibida no tamanho especificado. Face Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar várias fontes, de maneira que, se o sistema não possuir a primeira opção, a segunda é carregada. Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na fonte padrão. Color Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no formato hexadecimal, RGB ou através de um nome predefinido de cores como mostra a tabela abaixo: Cor Código Cor Código Aqua #70DB93 Blue #0000FF Black #000000 Cyan #00FFFF Fuchsia #FF00FF Gray #C0C0C0 Green #00FF00 Lime #32CD32 Brown #800000 Navy #23238E Olive #808000 Red #FF0000 Silver #E6E8FA Teal #008080 White #FFFFFF Yellow #FFFF00 Não exagere na quantidade cores e tamanho das letras do texto ou a sua página parecerá uma mensagem enviada por código. Veja o exemplo abaixo: As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape, observem que no IE o comando BLINK não é aplicado. <HTML> <HEAD><TITLE>Aplicando estilos de texto</title> </HEAD> <BODY> <font face="arial" size="4" color="red">este texto está em<b>negrito</b><br> Este texto está em <I>Itálico</I><BR> Este texto está em <U>Sublinhado</U><BR> Este texto está em<b><i> Negrito e Itálico</B></I><P> Este texto recebeu o estilo<strong> chamado Strong que é parecido com </STRONG>negrito<BR> Este texto recebeu o estilo<tt>typerwriter</tt>.<hr> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<br> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. <BR> Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.<BR> Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.<P> http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 10
Para chamar a <BLINK>atenção</BLINK> use o comando BLINK.</font> </BODY> </HTML> CABEÇALHOS Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos de cabeçalho de <H1> até <H6>. Além do tamanho diferenciado, o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma página. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte. ALINHANDO CABEÇALHOS Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado no lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou ajustar o cabeçalho à direita da linha. Veja o código: <HTML> <HEAD> <TITLE>Alinhando Cabeçalhos</TITLE> </HEAD> <BODY> <H2> Cabeçalho sem alinhamento especial</h2> <HR> <H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</h2> <HR> <H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</h2> </BODY> </HTML> LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL). Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características de cada umas delas. LISTAS ORDENADAS <OL TYPE=...START=...>...</OL> são os elementos delimitadores de listas ordenadas (OL Ordered Lists). A estrutura das listas ordenadas é bastante simples: entre os elementos de início e fim, os itens da lista são definidos pelos elementos <LI></LI>. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: A (A,B,...Z), a (a,b,...z), I (I,II,III, etc.), i (i,ii,iii,etc), e 1 (1,2,3,etc). Se omitido, é utilizado o tipo padrão (1,2,3, etc). O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve receber como valor um número indicando em que posição a contagem deve se iniciar. LISTAS NÃO ORDENADAS <UL>...</UL> são os elementos delimitadores de listas sem ordenação (UL Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um marcador (bullet) diferente para os itens de cada lista. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 11
Como já foi visto acima <LI>...</LI> é o elemento que define um item de uma lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens, links,etc. LISTA DE DEFINIÇÃO <DL>...</DL> são as marcas que englobam uma lista de definições, ideais para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos o termo a ser definido (DT), e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. <HTML> <HEAD> <TITLE>Listas de definição</title> </HEAD> <BODY> <H2>Listas de definição</h2> <DL> <DT>HTML</DT> <DD>Hiper Text Markup Language</DD> <DT>OL</DT> <DD>Listas ordenadas com numeração.</dd> <DT>UL</DT> <DD>Listas sem ordenação</dd> <DT>LI</DT> <DD>Elemento da Lista</DD> </DL> <H2>Listas não ordenadas combinadas<br>com uma lista de Definição</H2> <DL> <DT>Parâmetro do elemento OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parâmetros do elemento IMG</DT> <DD> <UL> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> <LI>HEIGHT</LI> <LI>VSPACE</LI> <LI>HSPACE</LI> </UL> </DD> </DL> </BODY> </HTML> IMAGENS Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet, através de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa de imagens. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 12
O COMANDO IMG Esse comando define a posição de uma imagem que aparece no corpo do documento. <IMG SRC= URL WIDTH=... HEIGHT= BORDER= ALT= Texto VSPACE= HSPACE= > ALIGN= BOTTOM TOP MIDLE SRC= URL É o nome da figura, se estiver no mesmo diretório do programa ou seu caminho completo. ALT= texto Exibe o texto quando o browser não encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado. ALIGN= TOP MIDLE Especifica o alinhamento da imagem BOTTOM relativamente à linha de texto onde é exibida. ALIGN= LEFT RIGHT Especifica o alinhamento da imagem relativamente às bordas laterais da janela WIDTH= número número% Esse parâmetro especifica a largura de exibição da imagem independentemente do seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado, ela será esticada ou comprimida para caber no espaço especificado. Se for o colocado o sinal de porcentagem, ele é relativo à largura da janela. HEIGHT= número Especifica a altura de exibição da imagem independentemente de seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado. BORDER= número Especifica em pixels a largura da borda da imagem. O valor zero remove a imagem VSPACE= número HSPACE= número Determina em pixels o espaço que deve ser deixado em branco na parte de cima e na parte de baixo da imagem. Determina em pixels o espaço que deve ser deixado em branco nas laterais da imagem Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando: IMG SRC= foto.gif <html> <head> <title>imagens</title> </head> <body background="images/backarvore.jpg" text="yellow"> <img src="images/worldmap.jpg" width="200" height="100" alt="mapa Mundi" align="left" align="midle"> <DIV align="justify">o Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa,O Mapa,O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, </div><hr> http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 13
<img src="images/batlow.gif" alt="morcego" align="right"><div align="justify">o Morcego,O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego, </div> <Br> <img src="images/hlpglobe.gif" width="20" height="20"><b>usando uma imagem como marcador</b><br> Usando imagens como linhas separadoras <br> <img src="images/arame.gif" width="120%"> </body> </html> URLS E LINKS Até agora você aprendeu como criar documentos interessantes, mas que poderiam ter sido criados em um processador de textos. O Principal atrativo da Internet é a criação de documentos com o conceito de hipertexto, ou seja, um documento que se liga a outros por meio de vínculos especiais chamados hyperlinks. Com esse conceito você pode criar documentos que façam referência a um endereço qualquer do computador ou da Web e permitam ao usuário acessar essas referências, não importando se elas estão em outra página WEB, no seu micro ou em qualquer servidor da rede. URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereço servidor e a localização do arquivo, usando a seguinte sintaxe: Protocolo://servidor.NomeDoArquivo http://www.hardcore.com.br/index.htm http: É o protocolo www.hardcore.com.br: É o nome do servidor index.htm: É o nome do documento que será acessado. Criando um Link com Arquivos Locais Vincular um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado, utilizando o comando <A> de âncora. Veja a sintaxe básica deste comando: <A HREF=... NAME... >caracteres</a> Principais parâmetros: HREF= URL NAME= String Especifica o endereço do URL ao qual o link está associado. Pode ser usado dentro e fora do documento. Especifica o nome da seção de um documento à qual um link de hipertexto faz referência. Usando uma Imagem como Hiperlink Você pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>. Em vez de especificar um texto de hiperlink, você usa o comando <IMG> para colocar a imagem. Vinculando Arquivos de outros diretórios http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 14
Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na Web você deve inverter a barra de espaços, usando a barra / no lugar da barra \, para separar diretórios. CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parâmetros da linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A NAME>, que cria âncoras ou endereços de seções de um documento, permitindo seu endereçamento. Criando uma Âncora Para interligar uma página, você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção do documento. Essa âncora recebe um nome que será mencionado pelo link que acessará. <A NAME= #nome da âncora >Texto Opcional</A> Iremos criar agora uma página Web com exemplos de links e âncoras : Neste código criamos primeiramente os links com as âncoras da página, e depois as âncoras, aproveitamos também e trabalhamos com inserção de imagens na página: ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML Você pode acionar o programa padrão de e-mail diretamente de uma página HTML usando uma variação do comando <A>, que usa a opção MAILTO no lugar da URL. <A HREF= MAILTO:faleconosco@provedor.com.br >Tire as suas dúvidas </A> DEFININDO DESTINOS Podemos também definir destinos para os nossos links,(recurso muito utilizado em frames) através do parâmetro target:. E podem ser _self: Mesmo quadro, _top: página inteira, _blank: nova janela e _parent: quadro pai. <html> <head> <title>links</title> </head> <body> <p align="center">links</p> <p><a href="http://www.microsoft.com.br">microsoft</a> <p><a href="http://www.macromedia.com.br">macromedia</a> <p><a href="http://www.adobe.com.br" target="_blank">adobe</a> <p><a href="mailto:softwaresuporte@hardcoreinformatica.zzn.com">e-mail</a> <hr> <P Align="center">Criando as Âncoras</P> <a href="#textos">textos</a> <a href="#imagens">imagens</a> <P> <a name="textos">textos</a> <p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> <a name="imagens">imagens</a> <p align="center"><img border="0" src="entrar1.gif" width="150" height="50"></p> </body> </html> TABELAS Assim com as listas que nós já vimos, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 15
O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células. Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas. ELEMENTOS BÁSICOS DE TABELAS <TABLE>...</TABLE> São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas linhas e células somente serão consideradas se incluídas entre <TABLE>e </TABLE>. <CAPTION>...</CAPTION> Trata-se de um elemento opcional que define o título da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parâmetros, o título á apresentado acima da tabela e centralizado. <TR>...</TR> Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela corresponde ao número de <TR></TR>. <TD>...</TD> Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML Links, referências a imagens, textos, e até tabelas. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente, e caso o número de células varie de uma linha para outra, as linhas com menos células são completadas à direita com células em branco. <TH>...</TH> Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho. Células de cabeçalho têm características idênticas a células de dados definidas por <TD>, a não ser pelo alinhamento horizontal, que é centralizado, e pela utilização de fonte em Negrito. PARÂMETROS Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela. Parâmetros do elemento <TABLE> BORDER A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com BORDER=X. Exemplo: <TABLE BORDER=2> BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variações: bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em volta de sua tabela. WIDTH Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente à largura da janela. Caso não seja especificado, o próprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas células. Exemplo: <TABLE WIDTH=75%> CELLSPACING Define o espaço entra as células, ou seja, a largura das linhas de grade (as bordas que envolvem as células). É especificado em pixels. Exemplo: <TABLE CELLSPACING=3> CELLPADDING Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Exemplo: <TABLE CELLPADING=6> ALIGN http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 16
Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parâmetro não funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela. Parâmetros do elemento <TR> ALIGN Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos nas células de uma linha. Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha. Parâmetros dos Elementos <TD> e <TH> ALIGN Configura o alinhamento horizontal dos elementos contidos na célula. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos na célula. Pode conter os valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha. NOWRAP Quando este parâmetro encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. COLSPAN Especifica o número de colunas de uma tabela a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já que uma de suas células vale por duas. ROWSPAN Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma célula, diminuirá em 1 o número de células da linha de baixo. Vamos a um exemplo: <html> <head> <title>tabelas</title> </head> <body> <table border="10" width="100%" bordercolorlight="#000080" bordercolordark="#0000ff"> <tr> <th width="100%" colspan="3"> <p align="center">título da Tabela</th> </tr> <tr> <td width="33%">texto1</td> <td width="33%">texto 2</td> <td width="34%">texto 3</td> http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 17
</tr> </table> </body> </html> Atenção: Além de criar tabelas para exibir dados como numa planilha, os elementos de tabelas são usados para formatar páginas de uma forma geral. Eles são usados para criar textos com elementos na tela de forma mais fácil, para delimitar áreas de uma página e diversas outras utilidades que você nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B, independente da resolução de vídeo do visitante de sua página. Utilizando uma tabela de tamanho definido, podemos evitar que a página fique grande demais para resoluções de 640x480, podemos simular colunas de texto, entre outras aplicações. FRAMES O recurso de frames (janelas), compatível com a versão 2 e superiores do Navigator e do IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas simultaneamente na janela do browser. Com esse recurso, a janela do browser é dividida em frames que compartilham o espaço disponível. Sem o recurso de frames, para visualizar três páginas diferentes chamadas A. HTM, B.HTM e C.HTM, o usuário precisaria acessá-las individualmente por meio de uma página inicial que contivesse um menu ou então através da especificação de seu URL Usando o recurso de frames, podemos exibir mais de um frame (janela) simultaneamente. Em nosso projeto iremos usar um dos frames para exibir permanentemente o conteúdo da página do menu e a outra para exibir o conteúdo dos capítulos, facilitando a navegação pelo manual. Como funcionam os frames Ao contrário da maioria dos recursos da linguagem HTML, o uso frames requer um planejamento prévio. Esse planejamento consiste na criação da estrutura dos frames, na qual você irá especificar a quantidade de frames, a disposição que eles terão na tela, a largura e a altura de cada frame, assim como o conteúdo que será exibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira você cria o layout dos frames, na segunda, define seu conteúdo. O Comando Document O uso de frames exige a criação de um documento HTML especial que contém todas as definições dos frames. Você pode considera-lo como um documento mestre. Esse documento se diferencia dos demais documentos HTML, pois ele não usa os comandos <BODY> e </BODY>. Em seu lugar é usado o comando <FRAMESET></FRAMESET>. Dentro desse par de comandos são especificados todos os atributos dos frames que serão criados. O frameset define as características gerais dos frames, como sua quantidade e disposição horizontal e vertical. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais. O Comando FRAMESET Este comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a sintaxe deste comando: <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho></FRAMESET> Cols=tamanho O atributo cols é usado para criar um documento com frames dispostos em colunas. Nele deverá ser especificada a largura de cada coluna do documento. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. Os valores podem ser especificados em pixels, percentagem ou tamanho relativo. Usando valores em pixels <FRAMESET COLS= 100,300,200 > http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 18
Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser, a melhor opção é usar um asterisco (*) para cada coluna <FRAMESET COLS=*,*,*> Usando valores percentuais A terceira forma de determinar a largura de uma coluna é especificar os valores em forma de percentual, totalizando 100 por cento <FRAMESET COLS=25%,50%,25% Os diferentes valores podem ser combinados entre si. Por exemplo, para criar um frameset com três colunas de modo que a primeira ocupe 25%, a terceira tenha 100 pixels e a outra ocupe o espaço restante, pode-se usar o seguinte comando: <FRAMESET COLS=25%,*,100> ROWS=tamanho O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria os frames horizontalmente. Tudo o que foi exposto para COLS, aplica-se a ROWS. Combinando ROWS e COLS Pode-se combinar a criação de frames, usando os dois atributos. Você pode criar um janela dividida em dois frames horizontais, onde o primeiro deles é dividido em duas colunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET> O ATRIBUTO <FRAMESPACING=VALOR> Esse atributo tem como finalidade alterar o espaço entre os frames, dando a impressão de que a borda dos frames foi aumentada. Contudo, ele apenas distancia um frame de outro pela quantidade de pixels especificada. O código pode ser o mesmo do exemplo anterior. A penas a primeira linha deve ser alterada para: <FRAMESET ROWS=50%,50% FRAMESPACING=10> O ATRIBUTO <FRAMEBORDER=1/0> Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão, ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão omitidas. A omissão de bordas é interessante para criar a ilusão de uma única janela, onde as partes dessa janela são independentes das outras. Outro efeito interessante é a mudança da cor de fundo de cada janela, permitindo dividir a tela em áreas coloridas distintas. O COMANDO <FRAME SRC> Sintaxe: <FRAME ALIGN=posição FRAMEBORDER=1/0 MARGINHEIGHT=altura MARGINWIDTH=largura NAME=nome SCROLLING=yes/no SRC=endereço Align=posição Ajusta o alinhamento do frame ou do texto. Os valores permitidos são: TOP O texto ao redor do frame é alinhado pela parte superior do frame. MIDDLE O texto ao redor do frame é alinhado pelo meio do frame. BOTTO O texto aos redor do frame é alinhado pela parte inferior do M frame. LEFT O frame é alinhado à esquerda, deixando o texto posicionado no seu lado direito. http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 19
RIGHT O frame é alinhado à direita, deixando o texto posicionado no seu lado esquerdo Frameborder=0/1 Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou desativa a exibição de borda para o frame atual. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. Name=nome Atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos. Noresize Esse atributo evita que o frame seja redimensionado pelo usuário. Scrolling=yes/no Esse atributo, quando ajustado para o valor no, não permite que o frame tenha barras de rolagem quando a janela for redimensionada. SRC=endereço Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame. Ajustando as margens internas do Frame O desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar o conteúdo da janela da sua borda. Para criar um margem nas laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma margem na parte superior e outra no rodapé do frame, deve ser usado o atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em pixels. Barras de Rolagem e Redimensionamento dos Frames Como padrão, os frames possuem os atributos que permitem seu redimensionamento e a inclusão automática de barras de rolagem quando suas dimensões ficam menores do que o conteúdo a ser exibido. Para alterar essas características, você deve usar os comandos SCROLLING E NORESIZE. No caso do comando SCROLLING, deve ser atribuído a ele o valor no para desativar as barras de rolagem. INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos independentes um do outro. Nosso projeto inicial previa a criação de um manual eletrônico usando frames para mostrar um índice permanente na tela enquanto outra janela exibia o conteúdo selecionado. Para isso iremos aprender mais alguns itens. O primeiro deles é a atribuição de um nome para o frame e o segundo é direcionar o carregamento de um documento em uma janela específica. Para indicar ao browser em qual janela os documentos dos capítulos deverão ser carregados, devemos incluir no documento que contém os links um novo comando chamado <BASE TARGET= nome da janela > contendo o nome da janela-alvo. Criando a Estrutura dos Frames Esse arquivo contém a definição de dois frames, um para o menu e outro para os capítulos. O frame que receberá o nome de textos, e nenhum arquivo será previamente carregado. O frame que conterá o menu principal recebera o nome de menu. Nessa situação, apenas o nome do frame textos tem de ser obrigatoriamente especificado. Criando o conteúdo do Menu O arquivo de menu contém os links para os capítulos do manual. Nesse documento, você deve incluir o comando <BASE TARGET>, que é responsável por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os links no frame chamado textos. Se esse comando for omitido, os capítulos serão carregados no frame do menu. Os códigos dos documentos ficarão da seguinte maneira e salve o documento como menu: <HTML> <HEAD> <TITLE>Menu Principal</TITLE> http://apostilas.fok.com.br Seu site de Apostilas e Tutoriais 20