4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language). A linguagem HTML é uma linguagem utilizada para estruturar e marcar o conteúdo HTML (formatação) dos documentos na Web. 4.2 - Criando documentos HTML: 4.2.1 - Comandos HTML (TAGS): Os comandos HTML são descritores que indicam ao browser como as informações devem aparecer e são chamados de TAGS. São escritos obrigatoriamente entre os sinais "<" (menor que) e ">" (maior que). 4.2.1.1 - Formas dos Comandos HTML: Os comandos (TAGS) podem ser: - Abertos (simples): <comando> - Fechados: <comando>... </comando> - Compostos: <comando> <elemento 1>... </elemento 1> <elemento 2>... </elemento 2>... <elemento n>... </elemento n> </comando> - 29 -
4.2.1.2 - Regras HTML e Dicas: Fechar sempre os TAGS fechados e compostos; NUNCA esquecer um sinal de < ou de >, no início ou no fim do TAG; Não usar espaços no TAG (no interior dos sinais < e > ). EX: </ comando> ERRADO!!! < com an do> - NUNCA!!!! Os agrupamentos de espaços colocados FORA dos TAGS serão interpretados como apenas um espaço. Fora dos TAGS não há restrição do uso dos espaços ( é usado para adicionar mais espaços); NOMES DOS ARQUIVOS (inclusive extensão.html ou.htm ) Sempre em minúsculas. Algumas dicas importantes para o seu sucesso na Web: Verifique suas páginas com diferentes navegadores e em diferentes plataformas para assegurar que você terá uma experiência de visualização consistente; Como alguns usuários da Web ainda se conectam a velocidades baixas, verifique se suas páginas podem ser visualizadas com estes modems; Revise a grafia e a gramática antes de publicar a sua página (peça que outra pessoa a leia). Verifique todos os links entre as páginas. Esta dica é simples mas muitas pessoas esquecem dela e publicam péssimos trabalhos; Não coloque informações do tipo Este site está em processo de criação (geralmente acompanhada de sinais amarelos), pois praticamente todos os sites da Web estão em criação e em desenvolvimento. É preferível não colocar nada a colocar uma página com um aviso deste tipo; - 30 -
Peça a opinião de outras pessoas antes de publicar o seu site, o olhar crítico de alguém pode detectar erros que não foram percebidos por você. Observações em relação aos nomes dos arquivos: As extensões ".html" ou ".htm" são importantes quando o servidor Web está identificando o arquivo. Usaremos como convenção para os nossos trabalhos a extensão ".html"; Os nomes devem iniciar com uma letra obrigatoriamente; Pode-se utilizar caracteres como "-" e "_"; Evite utilizar "ç", caracteres especiais e letras acentuadas em nomes de arquivos; Procure usar nomes significativos, que remetam ao conteúdo do arquivo. Para edição dos arquivos.html, utilizaremos o programa PHP Editor Versão 2.22. PHP Editor é um editor freeware e totalmente em português destinado a edição de páginas PHP e HTML. Vamos salvar nossos arquivos de exemplo na pasta c:/wamp/www/dw1 4.3 - Estrutura básica de uma página <html> <head> <title>titulo da Página</title> </head> <body> <!-- Corpo da Página --> </body> </html> - 31 -
Um documento HTML básico é composto de duas partes: A seção de cabeçalho descritiva; O corpo do conteúdo. Analisaremos, mais adiante, cada um destes TAGS (comandos). 4.4 - Cabeçalhos Uma forma usada para configurar o tamanho da fonte é o TAG <H*>TEXTO FORMATADO</H*> onde o asterisco é substituído por um número que vai de 6 (menor) a 1 (maior). Este TAG é mais usado para títulos de textos. Faça o exemplo abaixo (cabecalho.html): Veja como o arquivo acima será visualizado no navegador WEB: - 32 -
4.5 - Alinhamentos de parágrafos O alinhamento de parágrafo é definido pela propriedade align que pode receber quatro valores diferentes: VALOR EFEITO left alinhar à esquerda right alinhar à direita center alinhar ao centro justify justificar Faça o exemplo abaixo (paragrafos.html) e veja o resultado: 4.6 - Quebra de Linha A quebra de linha é usada apenas para mudar um determinado ponto do parágrafo de linha. Isso acarreta uma diferença na visualização. Se prestarmos atenção, há um grande espaço deixado entre uma linha e outra do parágrafo, porque são dois parágrafos diferentes. Mas se quisermos criar um parágrafo com duas linhas, obrigatoriamente, usaremos a quebra de linha que é identificado pelo TAG <br>. Faça o exemplo abaixo (quebra_linha.html) e veja o resultado: - 33 -
4.7 - Formatando Textos: Todo documento HTML segue o mesmo modelo básico, e este modelo deve sempre estar completo para o browser reconhecer o seu documento. Conforme já explicado anteriormente, o modelo é o seguinte: <html> <head> <title>o título que ficará no topo da sua página você escreve aqui </title> </head> <body> Todo o texto contido no seu documento HTML deve estar aqui. </body> </html> Obs: Nunca se esqueça de fechar cada TAG, com a barra e o nome da tarefa. Quando seu TAG tiver vários atributos eles devem ser omitidos no fechamento do TAG. Por exemplo: <a href="agenda.html">agenda</a> Este TAG é um link, que você aprenderá com mais detalhes depois, mais agora o importante é que você perceba que os atributos (detalhes do TAG) foram omitidos no seu fechamento. Se você não fechar um TAG ele ficará aberto até o final do documento, alterando a propriedade de todo ele, por exemplo: se você não fechar <b> que é o TAG que cria textos em negrito, o documento inteiro ficará em negrito. 4.7.1 - Formatação básica da Fonte: Dentro do TAG body, você escreve todo o texto da sua página. E é neste texto que vamos nos concentrar agora. Os principais TAGS para a formatação de texto são: - 34 -
<p>cria um parágrafo</p> <center>centraliza o texto</center> <b>textos em negrito</b> <i>textos em itálico</i> <s>texto tachado (riscado)</s> <u>textos sublinhados</u> <tt>textos no estilo da máquina de escrever</tt> <sub>texto subscrito</sub> <sup>texto sobrescrito</sup> <br>quebra de linha, não necessita ser fechado <!--Este TAG foi feito para comentários e é ignorado pelo browser --> <dd>este TAG é usado para criar parágrafo (o espaço para a primeira linha). Se você quiser um parágrafo maior ou menor é necessário o uso de espaços através do caractere " ". (Dado: 1 "<dd>" é igual a 10 " ". Com o tempo você irá memorizar o nome e a função de cada TAG!! 4.7.1.1 - Exercício - Formatação Básica (fbasica.html) - 35 -
4.8 - Estilos de Textos: Um TAG muito importante na linguagem HTML é o TAG <font>. Ele determina a cor, tamanho e tipo da fonte. Primeiramente vamos ver como mudar o tamanho e tipo da fonte. 4.8.1 - Atributo SIZE: O tamanho da fonte, em HTML, varia de 1 (menor) a 7 (maior). Lembre-se sempre que o tamanho em HTML não corresponde ao usual, que é dado em pixels. Para configurarmos o nosso texto com estas fontes é só fazer assim: <font size="n">onde n=tamanho da fonte desejado</font> Você também pode querer aumentar ou diminuir a fonte em relação a que está configurada no momento, então é só por um sinal de mais (para aumentar) ou menos (para diminuir) o tamanho da fonte. Exemplo de Formatação de fonte (fonte1.html): Veja como o arquivo acima será visualizado no navegador WEB: 4.8.2 - Atributo FACE: Para mudar o estilo da fonte é só usar o atributo face. Por exemplo, se eu quero que o meu texto use Arial, tamanho 2, é só fazer assim: <font size="2" face="arial">exemplo da combinação de estilo e tamanho de Fonte</font> - 36 -
Neste exemplo demonstramos que os atributos podem ser usados ao mesmo tempo sem nenhum problema para o browser. Nota: Os tamanhos e estilos padrões são configurados de acordo com cada browser, ou seja, se você não determinar estes valores, o browser que abrir a sua página irá interpretar o seu texto com a fonte e estilo configurada nele. 4.8.3 - Atributo COLOR: As cores das fontes são determinadas pelo atributo color, no TAG font. Você pode citar a cor que você quer de duas formas: <font color="nome da cor"></font> <font color="#xxxxxx"></font> Exemplo de Formatação de fonte (fonte2.html): Veja como o arquivo acima será visualizado no navegador WEB: - 37 -
A primeira forma é mais simples, e admite os nomes de cores: red (vermelho), blue (azul), green (verde), yellow (amarelo), maroon (marrom), navy (azul-marinho), purple (roxo), olive (verde-oliva), teal (verde-azulado), fuchsia (mangenta), aqua (azul-ciano), lime (verde-limão), silver (prata), gray (cinza), black (preto), white (branco). Alguns browsers não aceitam este tipo de configuração, então o melhor é fazer a configuração de cores pelo segundo método. O segundo método usa o código RGB (red green blue). Todos os browsers reconhecem este código. Os XXXXXX podem ser qualquer número de 0 a 9 e qualquer letra de A a F. Esses números e letras representam uma ordem tonal do tom mais escuro para o mais claro: 0 1 2 3 4 5 6 7 8 9 A B C D E F Os dois primeiros X representam a quantidade de luz vermelha em uma cor, os dois do meio de luz verde e os dois últimos de luz azul. Alguns exemplos de misturas: FFFFFF = branco 000000 = preto FF0000 = vermelho 00FF00 = verde 0000FF = azul FFFF00 = amarelo Para definir as cores em todo o texto de uma página usa-se o atributo text no TAG body. <body text="#xxxxxx"> text - cor dos textos da página => cor padrão (default) é preta Seus valores são dados em valores hexadecimais, equivalentes a cores no padrão RGB (Red, Green, Blue). Exemplos: #FFFFFF, #804040, #000000. Exercício: Crie uma página com o nome ex_fonte.html, aplicando os Estilos de Textos vistos no item 4.8 e subitens correspondentes. - 38 -
4.9 - Atributos: Background e BGColor O TAG <body> tem dois atributos onde você pode especificar planos de fundo. O plano de fundo pode ser uma imagem ou uma cor. 4.9.1 - Background: O atributo background configura o plano de fundo para uma imagem. O valor do atributo é a URL da imagem que você quer usar. Se a imagem é menor do que a janela do navegador, a imagem será repetida até preencher a janela inteira do navegador. Veja abaixo como este atributo é usado: <body background="fundo.gif"> => Usado se a imagem estiver no mesmo diretório da página.html <body background="http://www.meusite.com/fundo.gif"> => Neste caso estou buscando uma imagem da WEB. Observação: Se você quer usar uma imagem de plano de fundo, você deve ter em mente: A imagem de fundo aumentará o tempo de carga da página. Dica: Arquivos de imagem de fundo devem ter no máximo 10k A imagem de fundo aparecerá boa com outras imagens na página? A imagem de fundo aparecerá boa com as cores do texto na página? A imagem de fundo aparecerá boa quando ela for repetida na página? A imagem de fundo afasta o foco do texto? 4.9.2 - Bgcolor: O atributo bgcolor configura o plano de fundo em uma cor. O valor deste atributo pode ser um número hexadecimal (valor RGB) ou um nome de cor. - 39 -
<body bgcolor="#000000"> OU <body bgcolor="black"> As linhas acima configuram a cor do plano de fundo para preto. 4.9.3 - Observações Básicas - Dicas Úteis: Os atributos bgcolor, background e text no TAG <body> estão desaprovados nas versões mais recentes da HTML (HTML 5 e XHTML). O World Wide Web Consortium (W3C) removeu estes atributos de suas recomendações. Nas versões futuras do HTML, as folhas de estilo (CSS) serão usadas para definir o layout e a exibir as propriedades dos elementos da página HTML. Poucos sites Web mais visitados usam imagens de fundo. As cores de fundo mais usadas são: branco, preto e cinza. Exercício: Crie uma página WEB com o nome plano_de_fundo.html aplicando os conceitos dos atributos background e bgcolor. 4.10 - Atributos: Link, VLink e ALink Os atributos Link, Vlink e Alink servem para fazer o controle das cores dos textos que funcionam como links em páginas WEB. Imagine a seguinte situação: quando você entra em uma página web ao clicar em um link no corpo da página, quando você retorna a página pode perceber que o link que você clicou já não esta mais com a mesma cor. É aí que entra os comandos link, vlink e alink. link - a cor dos links não visitados ainda (padrão: azul) alink - cor dos links, quando acionados (padrão: vermelho) vlink - cor dos links, depois de visitados (padrão: azul escuro ou roxo) - 40 -
Sua sintaxe é: <BODY link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"><\body> 4.11 - Criando Links ou Hiperlinks Um dos TAGS mais importantes é o que permite fazer links, ou seja, fazer referência a um outro recurso da WEB ou a um ponto específico da sua página. Veja como usá-lo: <a href="url">texto que aparece no link</a> O atributo href determina a localização do arquivo da sua página ou do local da WEB a que o link se referencia. A URL (Uniforme Resource Locator) é o endereço do link. O texto entre os TAGS aparecerá sublinhado, indicando que é um link de hipertexto. Nota 1: Evite sublinhar o seu texto, para não confundir o seu usuário. Nota 2: As cores dos links podem ser alteradas utilizando-se os seguintes atributos link, vlink e alink dentro da TAG <body>, conforme já verificado. Exemplos: <a href="http://www.universo.edu.br">link para o site da Universo</a> <a href="exemplo.html">link para o arquivo exemplo.html</a> Você pode fazer link para um e-mail também, para isso escreva: <a href="mailto:dalamura@gmail.com">e-mail para o Dalamura</a> Exercício: Crie um arquivo com o nome links01.html aplicando os conceitos aprendidos acima (Itens 4.10 e 4.11). - 41 -
4.11.1 - Embutindo links em textos: Âncoras Internas Para navegar dentro do próprio documento. São links que levam a outras partes do mesmo arquivo. É mais usado com arquivos extensos. Você pode referenciar área de texto para a qual você quer ir. No local que você quer acessar digite: <a name="nome da área de texto"></a> Para criar o link para chamar esta parte do texto, digite: <a href="#nome-da-área-de-texto">link</a> Se a área estiver em outro arquivo digite: <a href="outro.html#nome-da-área-do-arquivo">clique aqui</a> Outros atributos podem ainda ser usados em TAGS <a>. Por exemplo: target=" ": Especifica o carregamento de um link em uma janela de destino. Ele é usado muitas vezes com a TAG FRAME. Ele pode assumir diversos valores: o _top: Carrega o link no corpo inteiro da janela o _blank: Carrega o link em uma janela em branco o _parent: Carrega o link no seu pai imediato o _self: Carrega o link na mesma janela dele Exercício: Crie um arquivo com o nome links02.html aplicando os conceitos aprendidos acima. - 42 -
4.12 - Listas - Numeradas e Não Numeradas Outros recursos importantes para a formatação de textos em HTML são o uso de marcadores. Os marcadores podem ser usados de três formas básicas: 4.12.1 - Lista com marcadores: Listas não-numeradas são equivalentes às listas com marcadores do Microsoft Word. Primeiramente você abre a lista com o TAG <ul>. Depois, quando você quiser incluir os itens é só usar o TAG <li> para cada item incluído. Não se esqueça de fechar a lista com o TAG </ul>. O atributo TYPE, assume os valores circle, square e disc (default). Crie o arquivo listas_nao_numeradas.html conforme abaixo e veja a aplicação desde conceito: - 43 -
4.12.2 - Lista numerada ou alfabética: Nesta lista os marcadores são números ou letras. Para abrir a lista use o TAG <ol>, para cada item use novamente <li>, fechando a lista com </ol>. Para escolher o tipo de marcador use um dos seguintes atributos: TYPE="A" (A, B, C...); TYPE="a" (a, b, c...); TYPE="I" (I, II, III...); TYPE="i" (i, ii, iii...); TYPE="1" (1, 2, 3...). START= "número": indica o marcador inicial. Crie o arquivo listas_numeradas.html conforme abaixo e veja a aplicação desde conceito: - 44 -
4.12.3 - Lista sem marcadores: Se você quiser usar uma lista sem marcadores, use o TAG <dl> para abrir a lista, <dt> para cada item desejado e <dd> para cada subitem. Crie o arquivo listas_sem_marcadores.html conforme abaixo e veja a aplicação desde conceito: 4.13 - Réguas: Para a inclusão de uma régua simples horizontal em um texto é só usar o TAG <hr>. Se você quiser mudar a aparência da régua, use os seguintes atributos: Para alterar a largura use o atributo width. Por exemplo: <hr width="50%"> cria uma régua com largura de 50% da página. Para alterar a altura use o atributo size. Por exemplo: <hr size="5"> cria uma régua de altura 5 pixels. A configuração padrão (default) cria uma régua 3D, com o atributo noshade você cria uma régua em negrito. Por exemplo: <hr size="5" noshade> A configuração padrão cria uma régua centralizada. Se você quiser que ela fique alinhada a esquerda ou direita, use o atributo align igual a left (esquerda) ou right (direita). Você pode definir qual cor você deseja usar na sua régua, através do atributo color. Ex: <hr size="5" width="33%" color="blue"> - 45 -
Exercício: Crie um arquivo com o nome reguas.html, de acordo com as considerações abaixo, aplicando os conceitos aprendidos acima. Crie uma régua com 40% da largura da página, centralizada. Crie uma régua com 5 pixels de altura e 250 pixels de largura, em negrito e alinhada à direita, de cor vermelha. Crie uma régua com 10 pixels de altura e 250 pixels de largura, em 3D e alinhada à esquerda. Exercício de Fixação: Crie o arquivo exercicio_fixacao.html de acordo com a imagem e as informações abaixo: Cabeçalho 1, centralizado, cor preta, fonte Courier New Régua cor azul, altura de 5 pixels Texto em Arial, centralizado, tamanho 7 e cor vermelha Régua cor azul, altura de 5 pixels Lista Ordenada, em Negrito, com Links para Âncoras nesta Página Web. Definir cor preta para Link, Link Visitado e Link em Acesso. Régua simples Texto em Tahoma, centralizado, tamanho 5 e cor vermelha Régua simples Lista Aninhada Ordenada em Negrito, com subitens Não Ordenados em Itálico. Link somente na palavra E-Mail com o endereço de e-mail do referido aluno. Links para Âncora chamada #topo para exibir o topo da Página Web, com fonte normal (Voltar ao topo). - 46 -