Desenvolvimento - HTML
Guia Prático de HTML - Parte 4
Aprenda HTML através deste guia. O HTML é uma Linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto.
por Tiago Daniel de Souza16. FRAMES HTML
As molduras ("frames") são subjanelas definidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar uma página da Web diferente. As subjanelas são habitualmente designadas por molduras, ou "frames".
16.1 - Vantagens e desvantagens das molduras
As molduras ("frames") nos permitem apresentar mais do que uma página HTML numa única janela do browser. Cada página está dentro da sua própria moldura (subjanela) e é independente das restantes páginas. Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barras de navegação em conjuntos de documentos com muitas páginas e de tornarem bastante mais rápido o carregamento das páginas, as molduras também podem dar origem a algumas dificuldades, tais como:
- O criador de páginas vê-se obrigado a lidar com um número maior de páginas ao mesmo tempo.
- A impressão do conteúdo do navegador fica mais difícil.
- Algumas vezes será necessário a utilização de um único elemento <a>, para que ele realize a ligação de duas ou mais páginas, o que obriga a utilizar JavaScript.
16.2 - O Elemento frameset
- O elemento <frameset> define a forma como a janela do browser se subdivide para acomodar as molduras.
- Este elemento divide a janela do browser em linhas e colunas.
- Os valores atribuídos às linhas e às colunas indicam a quantidade de área de écran que cada linha e cada coluna devem ocupar.
16.3 – O Elemento frame
O elemento <frame> define qual o documento HTML a colocar numa determinada moldura.
No exemplo apresentado abaixo, temos um conjunto de molduras com duas colunas. A primeira coluna ocupa 25% da largura da janela do navegador, enquanto a segunda coluna ocupa 75% da largura. O documento moldura_a.html ocupa a primeira coluna e o documento moldura_b.html ocupa a segunda coluna:
<frameset cols="25%,75%">
<frame src="moldura_a.html">
<frame src="moldura_b.html">
<frameset>
16.4 – Dicas
Quando uma moldura possui linhas de contorno visíveis, você pode alterar suas dimensões arrastando as linhas de limite com o mouse. Para impedir que isso aconteça, utilize o atributo noresize="noresize" dentro da tag <frame>
Utilize a tag <noframes> para que os navegadores que não suportam frames possam mostrar um aviso na janela de quem está acessando o site.
<a href ="pagina_1.html" target="principal">Página 1</a><br>
<a href="pagina_2.html" target ="principal">Página 2</a><br>
<a href="pagina_3.html" target ="principal">Página 3</a>
Ao clicar num link dentro da moldura de navegação a nova página abre-se na segunda moldura (à direita), que tem por nome "principal”.
16.5 – Elementos para Frames
|
ELEMENTO |
DESCRIÇÃO |
|
<frameset> |
Define um conjunto de molduras |
|
<frame> |
Define o conteúdo de uma subjanela (moldura, ou "frame") |
|
<noframes> |
Define uma seção "noframes" para ser usada pelos browsers que não suportam molduras |
|
Define uma subjanela (moldura) interior ("inline frame") |
17. INSERÇÃO DE SCRIPTS
A inserção de scripts em suas páginas escritas em HTML podem fazer com que elas sejam capazes de reagir de forma dinâmica e interagir com seus visitantes.
17.1 - Inserir um script numa página HTML
A inserção de um script em HTML faz-se através do elemento <script>
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Olá Mundo!");
</script>
</body>
</html>
O script acima fará o seguinte resultado:
Olá Mundo!
17.1.1 - Um exemplo prático
<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá mundo!");
-->
</script>
</body>
</html>
17.2 - Como lidar com os browsers antigos
Um navegador que não reconhece o elemento <script> é muito antigo e a sua utilidade na Web atual é muito reduzida. Estes browsers, ao encontrarem um elemento <script> (cujo significado desconhecem), limitam-se a apresentar o texto que está dentro do elemento como se tratasse de conteúdo normal. Para impedir que isso aconteça, deve-se colocar o conteúdo do elemento <script> dentro de um comentário. Deste modo, os navegadores que não suportam scripts ignoram-nos, mas os outros navegadores reconhecem os scripts e executam-nos (apesar dos comentários). Mesmo com browsers modernos, a utilização de comentários nos scripts é uma prática recomendável porque evita muitos problemas que surgem quando utilizamos scripts na linguagem XHTML.
17.2.1 - O Elemento <noscript>
Além de escondermos o código dentro de um comentário, uma outra forma de ajudar os browsers muito antigos seria utilizar o elemento <noscript> para oferecer conteúdos alternativos.
O elemento <noscript> é usado para compensar de alguma forma a falta de execução de um script. O conteúdo deste elemento será apresentado pelos browsers que não reconhecem scripts, mas será ignorado pelos browsers mais modernos e não interfere na apresentação da página.
17.2.2 - Um exemplo
<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá mundo!")
-->
</script>
<noscript>
O seu browser não suporta
JavaScript!
</noscript>
</body>
</html>
17.3 - Elementos para inserir scripts e código
|
Elemento |
Descrição |
|
Define um bloco que contém um script |
|
|
Define texto alternativo para ser apresentado sempre que o script não é executado |
|
|
Insere um objeto na página |
|
|
Define parâmetros para controlar o objeto |
|
|
Desuso. Use <object> |
18. OUTRAS POSSIBILIDADES
O princípio de funcionamento do HTML já deve estar sólido em sua mente, se é que você leu tudo o que antecede esta seção. Para que este texto não se torne enfadonho, passaremos para a Especificação HTM, desenvolvida pelo consórcio da web, a tarefa de detalhar cada um dos tópicos listados a seguir.
Especificação HTML (em inglês)à http://www.w3.org/TR/html4
Especificação HTML (em espanhol)à http://html.conclase.net/w3c/html401-es/cover.html
Consórcio da web à docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web
- Texto estruturado: blocos que permitem estruturar lógica e visualmente seu texto
http://www.w3.org/TR/html4/struct/text.html
- Listas: blocos para a criação de listagens
http://www.w3.org/TR/html4/struct/lists.html
- Frames: permite que a página exibida no navegador seja formada por mais de um arquivo html (não recomendado, veja em Acessibilidade)
http://www.w3.org/TR/html4/present/frames.html
- Formulários: possibilita a interação do seu html com aplicações web.
http://www.w3.org/TR/html4/interact/forms.html
- Scripting: permite a automatização de certas seções do seu documento.
http://www.w3.org/TR/html4/interact/scripts.html
- Meta-informações: fornecem dados a respeito do próprio documento, como data, conjunto de caracteres usado, data de validade, etc
http://www.w3.org/TR/html4/struct/global.html#h-7.4.4
Essas funcionalidades permitirão que você faça documentos HTML bem completos. Prosseguiremos agora a parte final desta apostila, onde serão abordados alguns temas bem bacanas ;-)
19. COLOCANDO SEU SITE NO AR
Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o mundo todo.
Para publicar seu trabalho na Internet, você precisa somente de espaço em um servidor e um programa FTP gratuito.
Se você costuma acessar a Internet já deve ter visto que existem vários serviços gratuitos de hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com http://home.servidor.com/~nomedousuario. Você tem que ativar o serviço. Informe-se como fazer isto na documentação fornecida pelo serviço de hospedagem.
Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) você pode registrar-se gratuitamente para obter um espaço em um servidor na Internet. Existem várias companhias que oferecem este serviço gratuito - entre elas a Angelfire (clique em "Sign Up" e escolha membro gratuito - ou veja mais abaixo uma lista com sérvios gratuitos de hospedagem) - isto é um processo bem rápido.
Angelfire à http://angelfire.lycos.com
Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (por exemplo, ftp.angelfire.com) e ter um nome de usuário e senha.
19.1 – Isto é tudo que eu preciso?!
Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve ter um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos.
Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o FileZilla em http://filezilla.sourceforge.net
19.2 - Como eu faço envio os arquivos do meu site?!
Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programa FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP.
Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no "Address"), nome do usuário (em "User") e senha (em "Password") clique "Connect". Você agora tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):
Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo poderá ver seu site.
Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a página de entrada no site, ou seja, basta digitar http://www.angelfire.com/folk/htmlnet (sem qualquer nome de arquivo) e abrirá http://www.angelfire.com/folk/htmlnet/index.htm
Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para você (www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles fornecidos por um serviço gratuito da Internet. Você pode encontrar na Internet várias firmas que vendem domínio. Faça uma busca do Google.
LISTA DE SITES COM INFORMAÇÕES SOBRE HOSPEDAGEM GRATUITA
Link 01
http://neosite.ilogic.com.br/artigos/hospedagemgratis.htm
Link 02
http://criandosite.virgula.com.br/
20. HTML AVANÇADO
Esta parte assume que você já treinou HTML o suficiente para estar familiarizado com a linguagem e fazer sites na internet. Daqui em diante, este artigo apenas fará um tour por outras linguagens e tecnologias que podem ser utilizadas para organizar seus documentos, separar a aparência do conteúdo, facilitar buscas e criar documentos que, sobretudo não utilizem formatos que venham a ser tornar obsoletos.
Estarei dando aqui uma visão geral de todas as tecnologias usadas atualmente que podem ser integradas ou tem alguma relação com o HTML e linguagens de marcação:
- Folhas de Estilo (CSS)
- Templates
- Acessibilidade
- Sítios dinâmicos ou automatizados
- Web standards e validação
20.1 - Folhas de Estilo (CSS)
Folhas de estilo permitem que você separe o conteúdo do seu documento da sua representação gráfica. Como exemplo, ao invés de uma expressão do tipo:
<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>
Você utiliza algo mais organizado, como:
<div class="estilosa">Estilo separado do texto</div>
E então você definiria uma classe de nome estilosa onde os atributos, como tipo de fonte, tamanho e cor seriam definidos. Essa definição pode inclusive estar armazenada num arquivo separado do seu documento, sendo que neste último é necessário apenas uma referência ao arquivo que contenha os estilos.
O mecanismo mais utilizado para criar folhas de estilo para um arquivo HTML é o Cascading Style Sheet, ou CSS. Em CSS, o estilo estilosa para o exemplo acima poderia ser definido como:
div.estilosa {
color : red;
font : fixed;
font-size: 14;
}
As vantagens de usar folhas de estilo são:
- Separação entre a informação que o seu texto pretende passar e sua apresentação
- Permite que toda a apresentação do seu texto seja mudada sem que seja preciso alterar o html, bastando apenas que o arquivo que contenha a folha de estilo seja alterado
- Mais organização para seus documentos
- Facilita a criação de Templates
Pela clareza e organização resultante do uso de folhas de estilo, muitas tags e atributos do HTML são consideradas obsoletas ou seu uso é depreciado, inclusive muitas das quais ensinadas neste tutorial. Sempre que possível, utilize CSS nos seus documentos.
Para mais informações sobre Folhas de Estilo em HTML, consulte os links que anexei abaixo:
Materiais de CSS à http://www.codigofonte.com/css
Especificação HTML à http://www.w3.org/TR/html4/present/styles.html
Cascading Style Sheets, level 1 à http://www.w3.org/TR/1999/REC-CSS1-19990111
20.2 – Templates
Quem usa HTML provavelmente não o faz para escrever um único documento e sim um grande número deles. Se você está redigindo um texto ou fazendo um site composto por muitos arquivos, provavelmente você deseja que todos seus documentos HTML tenham a mesma aparência ou o mesmo estilo.
Para uniformizar o estilo e a apresentação, você pode criar um modelo, também conhecido como Template, que contenha o esqueleto de qualquer página de um site ou texto que seja dividido em vários arquivos. Esse template pode conter menus, tabelas e todos os campos que você for utilizar.
Existem ainda os motores de template, que são softwares que juntam o conteúdo com os templates e produzem páginas HTML. Criar um template depende do gosto de cada um, porém se você pretende utilizar um sítio automatizado existem vários motores de template que você pode utilizar, como por exemplo:
- FreeMarker: é um template engine. Ele facilita a geração de textual (HTML, PostScript, TeX, source code, etc) e ajuda a separar edição de design da lógica. Integrado com servlets, XML, Python e mais.
- Smarty: é uma classe de templates. Funciona de uma forma que separe interface da lógica de programação e tem por objetivo, facilitar e melhorar o desenvolvimento de qualquer aplicação em PHP.
20.3 – Acessibilidade
Uma consideração importante ao escrever seus documentos HTML é o quão usável e acessível ele é, tanto em termos visuais quanto na organização do conteúdo. Lembre-se que todos os tipos de pessoas podem acessar seu site, desde as leigas até as especialistas no assunto que você trata, desde aquelas que já conhecem o site até as que nunca ouviram falar dele. Seu conteúdo também precisa estar organizado para que ao longo do tempo as coisas não se percam.
Para ter um bom nível de usabilidade em seu site, siga as seguintes recomendações:
- Use esquemas simples
- A navegação do seu sítio deve ser intuitiva
- Crie seções do tipo "Sobre este sítio", "Quem somos", etc
- Use índices na medida do possível
- Escreva resumos
- Use referências
- Use uma lógica para os nomes de arquivos e pastas
- Evite usar frames, elas bloqueiam o modo natural de se navegar pela web
- Escolha mais de um estilo para seu sítio e evite usar combinações de cores que dificultem a visualização
- Disponibilize, na medida do possível, seu conteúdo em mais de um formato: texto simples, documento HTML, etc
- Disponibilize seu conteúdo em copyleft ou em outras licenças
- Valide seu HTML: verifique se seu código HTML está válido ou se existem incorreções
A acessibilidade de um site também leva em consideração os portadores de necessidades especiais.
O W3C possui linhas gerais de recomendação quanto à acessibilidade do conteúdo de documentos que usam linguagem de marcação.
20.4 – Sites dinâmicos ou automatizados
Seu texto ou site pode ser composto simplesmente por meia dúzia de documentos HTML e ter pouca ou nenhuma atualização ao longo da sua existência. Caso nada disso seja verdade e você está fazendo algo grande ou então você não tem tempo para escrever seu código HTML na mão, talvez seja o momento de considerar a adoção de um sistema automatizado. Destaco três tipos deles:
- Gerenciadores de conteúdo
- Blogs
- Wikis
Gerenciadores de conteúdo são softwares que rodam em servidores e que administram informações disponíveis em sites. Muitos sites na web são apenas arquivos html, mas também existem sites automatizados que permitem armazenar o conteúdo das páginas num banco de dados e a partir desse banco criar muitas páginas html e ainda manter o sistema de busca e a publicação sem que para isso o usuário precise saber html ou qualquer outra linguagem de marcação. Alguns gerenciadores de conteúdo permitem que existam usuários capazes de adicionar comentários em publicações existentes ou até mesmo criar suas próprias páginas através do preenchimento de formulários.
Os Blogs são casos especiais de gerenciadores de conteúdo que funcionam como diários ou coluna de editorial, onde o dono do blog adiciona texto, imagens e código HTML no site apenas preenchendo um formulário.
Já os Wikis são ferramentas que permitem qualquer pessoa criar ou editar um texto utilizando uma linguagem de marcação especial e mais simples de ser utilizada do que o HTML. Duas características principais dos sistemas Wiki são: você pode criar facilmente uma nova página simplesmente escolhendo um nome especial para ela e escrever na página já existente. A outra característica dos wikis é a preservação das modificações: o wiki possui um histórico de todas as modificações feitas num documento.
Os gerenciadores de conteúdo, blogs e wikis são escritos nalguma linguagem de programação como PHP, Perl, Python, Java, Ruby e muitas vezes utilizam um banco de dados para armazenar o conteúdo. Com um pouco de estudo, você pode escrever seu próprio sistema ou então utilizar uma solução pronta, como por exemplo:
- Gerenciadores de conteúdo: Drupal, SPIP, etc
- Wikis: PmWiki, PhpWiki, MediaWiki, TWiki, etc
- Blogs: b2, WordPress, etc
20.5 - Web standards e validação
Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.
20.5.1 - O que mais há para conhecer sobre HTML?!
HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porque alguns websites são apresentados de formas diversas em diferentes navegadores.
Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um árduo e longo caminho.
No passado - quando você tinha que comprar um navegador – o Netscape dominava o mercado de navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape não teria - e não teve - que se preocupar muito com normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não funcionavam em outros navegadores.
Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador da Microsoft"s, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.
A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada versão 4.
O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape também suportam as normas.
Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores - não só agora mas também no futuro. E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão do HTML, que é o XHTML.
20.5.1.1 - Legal!! Posso anunciar?!
Devido à existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o "dialeto" do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento:
Exemplo 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<title>Título</title>
</head>
<body>
<p>texto texto</p>
</body>
</html>
Além do Document Type Definition, que informa ao navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag html, usando os atributos xmlns e lang.
xmlns é abreviação de "XML-Name-Space" e deve ter sempre o valor http://www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você tem o hábito ou gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do W3C.
namespaces no site do W3C - http://www.w3.org/TR/1999/REC-xml-names-19990114
No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No exemplo acima a língua definida no atributo é o português do Brasil ("pt-br").
Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML.
O DTD é importante ainda, para a validação da página.
20.5.1.2 - Validação?! Porquê deveria eu fazer isto?!
Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador gratuito do W3C. ( http://validator.w3.org )
Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em http://validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu código para verificar o que acontece.
O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não aceitam o erro e apresentam a página arruinada ou mesmo nem apresentam. O validador então ajuda você a encontrar erros que você não tenha nem idéia de que existiam
Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.
