Untitled Document

11ºANO » Desenvolvimento de páginas WEB estáticas » CONCEITOS BÁSICOS |1|2|3|

1. Processamento de pÁginas da Web estÁticas

Um site estático é formado por um conjunto de páginas em HTML relacionadas e hospedadas num servidor Web.

Um servidor Web é o software que apresenta páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de uma página é gerada quando um visitante clica num link numa página da Web, ou quando digita um URL na caixa de texto de endereço do browser.

O conteúdo final de uma página da Web estática é determinado pelo designer da página e não é alterado quando ela é solicitada.

Segue-se um exemplo:

http://help.adobe.com/pt_BR/Dreamweaver/10.0_Using/WSE282D4DA-F2A4-4ac2-91A2-823B3A8C5707.html

<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1> Trio Motors is a leading automobile manufacturer.
</body>
</html>

Todas as linhas do código em HTML da página são escritas pelo designer antes da página ser colocada no servidor. Como o HTML, uma vez no servidor, não é alterado, esse tipo de página é chamado de página estática.

Nota: Mais especificamente, uma página “estática” pode não ser tão estática assim. Por exemplo, uma imagem de sobreposição ou um conteúdo Flash (um arquivo SWF) pode dar vida a uma página estática. No entanto, essa documentação se refere a uma página como sendo estática caso ela seja enviada para o navegador sem modificações.

Quando recebe uma solicitação de uma página estática, o servidor Web lê a solicitação, localiza a página e envia-a para o navegador solicitante, tal mostra o seguinte exemplo:

Imagem1 - Solicitação de uma pagina a um servidor WEB

1.: Navegador da Web solicita a página estática.
2.: Servidor Web localiza a página.
3.: Servidor Web envia a página para o navegador solicitante.

2. HTML

O HTML, ou Hypertext Markup Language, é uma linguagem padrão direccionada ao acesso e à exibição de páginas Web.
As linhas de código HTML são interpretadas pelos browsers que exibem o resultado final ao utilizador, sem necessidade de compilação. Basicamente podemos considerar que a linguagem HTML é constituída por textos e por códigos especiais denominados tags (os comandos da linguagem).

3. Conceitos bÁsicos de HTML

As tags são constituídas por um comando inserido dentro dos símbolos de menor que < e maior que >.

Exemplo: <html>; <body>; .

As tags começam com <>e são fechadas por </>.

Exemplo:

<html> ... </html>

Um documento HTML básico deve conter pelo menos as seguintes tags:

<html>
<head>
<title>Título da página</title>
</head>
<body>

Corpo da página

</body>
</html>

Não precisamos de um compilador para obter um resultado dos códigos HTML.
Tudo o que precisamos é de um editor de textos comum e de um navegador que se encarregará de interpretar o código.
A diferença básica que fará com que o sistema operacional identifique que se trata de uma página HTML é a extensão do arquivo.

Ou seja, enquanto um arquivo de texto c é gravado com a extensão ".txt", uma página Web deve ser gravada com a extensão ".htm" ou ".html".

O exemplo que se segue apresenta uma página de titulo "Primeira página" e de conteúdo "Alô, mundo!".

<html>
<head>
<title>Primeira página</title>
</head>
<body>

Alô, mundo!

</body>
</html>

Analisando as linhas de código acima.
Todos os documentos em HTML iniciam-se com a tag <html> e encerram-se com </html>.
Todo o conteúdo do documento deverá estar inserido dentro desse par de tags.

As outras tags fundamentais num documento HTML são aquelas que delimitam o cabeçalho e o corpo do documento.
Tudo aquilo que estiver inserido entre a tag de abertura<head> e a de encerramento </head> é considerado cabeçalho do documento.
A parte mais importante do cabeçalho é o título, que é inserido dentro da tag <title>...</title>.
Os títulos são mostrados na barra de título do programa e na área em que aparecem as páginas já visitadas.
Também é fundamental para os mecanismos de busca da internet que exibirão o título da página como o link de opção encontrada.

O corpo são os textos, imagens, documentos, formulários etc mostrados pela janela do navegador.
No código, corpo é tudo aquilo inserido entre as tags <body> e </body>.

3.1. ParÂmetros do <body>

■ <body bgcolor=“”> cor de fundo para a página.

■ <body background=“”> imagem de fundo da página.

■ <body text=“”> cor do texto da página.

■ <body link=“”> cor dos links.

■ <body vlink=“”> cor dos links que já foram visitados.

Tabela de cores: http://ufpa.br/dicas/htm/htm-cor1.htm

Exemplo 1:

<html>
<head>
<title>HTML - EXEMPLO1</title>
</head>
<body bgcolor="#FFFFCC" text="#FF3300">
</body>
</html>

Exemplo 2:

<html>
<head>
<title>HTML - EXEMPLO2</title>
</head>
<body text="#FF3300" background="pattern_149.gif">
</body>
</html>

3.2 A TAG (ParÁgrafos )

A tag  utiliza-se para criar parágrafos.

As linhas do parágrafo são criadas com  ; a tag não tem que ser fechada.

Exemplo 3:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML - PARÁGRAFOS </title>
</head>
<body bgcolor="#FFFFCC" text="#FF3300">
Isto é um parágrafo
</body>
</html>

Importante observar que:
os documentos transmitidos por meio do HTTP que são do tipo texto, tais como text/html, text/plain, etc., podem enviar um parâmetro charset no cabeçalho HTTP para especificar a codificação de caracteres a ser utilizada no documento.

+ informação em: http://www.icmc.usp.br/ensino/material/html/head.html

Exemplo 3:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML - Parágrafos e linhas</title>
</head>
<body bgcolor="#FFFFCC" text="#FF3300">
Isto é um parágrafo que vai conter duas linhas
</body>
</html>

Alinhamento de textos com a tag 

Os parágrafos também podem ter atributos para o alinhamento dos textos.
Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento".

Os atributos são:

Left: Alinhamento à esquerda
Rigth: Alinhamento à direita
Center: Centrado
Justify: Texto justificado

Exemplo 4:

Texto alinhado à esquerda
Texto alinhado à direita
Texto centrado
Texto justificado