Curso de html para Cegos.

Aula 1 - Página Básica.



-= Curso HTML - página básica =-
Marco Antonio de Queiroz.

A princípio devemos saber o seguinte: as extenções de qualquer página -- arquivo -- em html são .htm ou .hhtml. Os arquivos a serem exibidos na web devem ser enviados a uma conta de ftp onde serão armazenados. Para isso temos de criar uma conta própria em um provedor de nossa preferência e utilizarmos os programas de ftp (envio e recepção de arquivos -- upload e download) que dispusermos. O ftpvox tem sido o programa de ftp mais acessível a nós cegos, mas é possível utilizarmos vários outros (ws ftp pro, cut ftp, etc) através dos ledores de tela disponíveis e da preferência de cada um.

A página principal que aparece quando entramos em um endereço da web será sempre um index.htm ou index.html. Os demais links hypertext de um site podem possuir os nomes dados segundo o entendimento do criador do site, mas existem, conforme iremos constatar, extenções reservadas a função de cada arquivo.

O princípio essencial da linguagem HTML (Hyper Text Markup Language) é o uso de etiquetas (tags). Funcionam da seguinte maneira:

<XXX> - início de uma etiqueta. </XXX> - fim de uma etiqueta.

As letras de uma etiqueta (tag) podem estar em minúsculas ou MAIÚSCULAS. (mas sempre totalmente em minúsculas ou totalmente em maiúsculas).

Todo HTML deve estar entre as etiquetas <HTML> e </HTML>. Ou seja, a página sempre se insere entre essas duas etiquetas.

<HTML>Toda a pagina</HTML>

a página em si está dividida em duas zonas principais:

O cabeçalho, compreendido entre as etiquetas <HEAD> e </HEAD>.

O corpo, compreendido entre as etiquetas <BODY> e </BODY>.

Até agora temos:
<html>
<head>cabecalho.</head>
<body>Corpo da página.</body>
</html>

Dentro do cabeçalho(<head>cabeçalho</head> tem informações do documento que, de forma geral, não são vistos na tela. Por vezes possuem funções úteis, mas não são obrigatórios, com excessão do:

Título do documento: compreendido entre as etiquetas <TITLE> e </TITLE>. O título deve ser breve e descritivo, pois é o que constará no bookmark (favoritos) quando alguém quiser salvar o endereço de sua página, alé de que alguns sites de busca (robots) se utilizam do título para a apresentação da página em suas listas de resultados.

Dentro do corpo (<body>Corpo</body>) está tudo o que queremos que apareça na tela principal (texto, imagens, links, formulários, etc.).

Os Textos em html.

Antes de criarmos nossa primeira página, algumas considerações sobre o texto: quando escrevemos no html o texto que queremos que apareça na tela, vemos que ele se acomoda à ela sem que tenhamos de ajustá-lo manualmente, colocando o maior número de palavras numa só linha. Se quisermos separar o texto em parágrafos, devemos usar a etiqueta <P> (não precisa ser encerrada com </P>).

a etiqueta <br> é muito parecida com a <p> mas não fazem a mesma coisa: a <p> sempre que colocada depois de um texto pula uma linha em branco, enquanto a <br> faz com que depois dela a linha fique interrompida, deixando espaços em branco posteriores. Assim, se sua linha tiver um conteúdo de texto qualquer e ao final desse conteúdo colocarmos <br> a partir daí a linha ficará em branco, mas não pulará de linha, simplesmente irá para a próxima. se colocarmos, além desse <br> no final da linha com texto e um outro <br> depois. Esse segundo <br> será interpretado que, após a linha anterior já ter acabado, a próxima, sem texto, terá brancos depois do nada. Assim, uma linha ficará em branco após 2 <br> seguidos. Isso acontece e fica melhor compreendido ao sabermos que o <br> não é derivado de blanc, brancos ou coisa parecida e sim de break (quebra).

O texto pode ter títulos, compreendidos entre as etiquetas <H1> e </H1>, <H2> e </H2> ... <H6> e </H6>, sendo o número, indicativo de tamanho. O maior tamanho é correspondente ao número 1 e não ao 6.

Uma etiqueta muito interessante é <CENTER> e </CENTER> (centralizar). Serve para centralizar imagens, textos, etc.
Também temos os separadores (horizontal rules), que conseguimos com <HR> (não precisa ser encerrada com </HR>). Com esta etiqueta, obtemos uma linha horizontal cheia de hifens, própria para separação de assuntos.
Ao escrever o texto, se colocarmos mais de um espaço em branco entre duas palavras, observamos que o navegador só reconhece um deles. Para forçarmos o reconhecimento de mais de um branco entre palavras devemos colocar o código "&nbsp;" (non-breaking space).

Para destacar alguma parte do texto, podemos usar:
<B> e </B> para negrito (bold).
<STRONG> e </STRONG> exibe um texto em negrito.
<U> e </U> para sublinhado (underline)
<I> e </I> para itálico.

<BIG> e </BIG> texto em fonte maior (big).
<BLINK> e </BLINK> texto piscante (Blink) (alguns Browsers não mostram).
<SMALL> e </SMALL> texto em fonte menor (Small).
Outra etiqueta interessante é <PRE> e </PRE>. Para pré-formatar o texto, como se fossem caracteres de máquina de escrever, com espaço fixo (tipo Courier). Muito apropriado para confecção de tabelas e outros documentos similares.
Com a etiqueta <TT> e </TT>, conseguimos também que o texto tenha um tamanho menor com aparência de caracter de máquina de escrever (typewriter).

A etiqueta <BLOCKQUOTE> e </BLOCKQUOTE> faz uma margem à esquerda através de uma endentação à direita. Pode ser usado mais de uma vez, deixando o texto mais ainda à direita e tendo de ser fechado </blockquote> tantas vezes quantas for utilizado <blockquote>
As linhas de comentário são assim:
<!-- Isto é um comentário do código, não será visto no Browser -->

Exemplo prático:

Em um processador de textos qualquer, que grave o conteúdo em ASCII, vamos digitar o seguinte código:
<HTML> <HEAD> <TITLE> nome - Minha primeira página.</TITLE> </HEAD> <BODY> <H1><CENTER> Primeira página </CENTER></H1> <p> Esta é minha primeira página. Como a linguagem HTML não é difícil, estou disposto a fazer coisas mais interessantes.
<p>
<hr>
<P> Aqui é um parágrafo.

</BODY>
</HTML>

As linhas em branco e as indentações do texto são colocadas para maior clareza, porém não são necessárias. O importante é a ordem correta das etiquetas. Uma etiqueta pode estar aninhada dentro de outra. No nosso exemplo, a etiqueta <CENTER> está dentro da etiqueta <H1>. É muito importante que as etiquetas de início e de encerramento estejam em ordem correta, pois do contrário, não atingiremos o que pretendemos.

Vamos gravar nosso exemplo com o nome de aula1.htm e vamos carregá-la no nosso navegador ou vê-la em off.
Haverá um arquivo distinto em algumas aulas. É conveniente criar, no HD, um diretório para gravarmos nossos exemplos.

Abaixo essa aula em txt.

Aula 1 - Página Básica em txt.



Voltar para a Página Principal.

Proceguir para a Próxima Página.

Bengala Legal.





Hosted by www.Geocities.ws

1