Tudo sobre HTML 35
26 pág.

Tudo sobre HTML 35


DisciplinaAnálise Textual9.509 materiais293.875 seguidores
Pré-visualização6 páginas
INTRODUÇÃO A LINGUAGEM HTML 
 
Esta página foi adaptada de: Aprenda HTML jeguinho.cjb.net 
e-mail: maurinho@brazil.zzn.com 
 
 Esta página tem o objetivo de ensinar as noções básicas da linguagem HTML, pois 
para fazer uma Home Page vacê pode usar programas que usam uma linguagem visual 
(como por exemplo, Front Page ou PageMill), ou seja, você faz a formatação de sua 
página sem precisar saber códigos. 
O Que é HTML ??? 
 HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como 
Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como 
cabeçalhos, parágrafos, listas e tabelas que compões uma página da WWW e serve para 
indicarmos formatações para textos, inserir imagens e ligações de hipertexto. 
Tags ou Diretivas. 
 A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter 
o resultado desejado. 
 Todo documento HTML apresenta elementos entre parênteses angulares 
(<ELEMENTOS>), esses elementos são as etiquetas da linguagem HTML, que são os 
comandos de formatação da linguagem. As etiquetas, tags ou diretivas, tem sua 
correspondente etiqueta de fechamento (<ETIQUETA> ... </ETIQUETA>). Isto é 
nescessário porque as tags servem para definir a formatação de uma porção de texto, e 
assim marca-se onde começa e onde termina o texto com formatação especificada por 
ela. Alguns tags são chamados &quot;vazios&quot; ou unidirecionais, pois não marcam uma região 
de texto, apenas inserem alguma coisa no documento. As etiquetas serão escritas em 
maiúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo 
minúsculo que é igualmente aceito pelos Browsers. 
Como Editar as Páginas em HTML. 
 As páginas desenvolvidas em HTML são arquivos simples e podem ser lidos e 
confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS, 
NotePad). Depois de editar os códigos e textos é só gravar o arquivo mudando a 
extenção (ex.: .txt) para .html ou .htm. 
 A diferença entre .htm e .html é que o .html é mais novo e são comandos melhores 
aceitos e .htm é como se iniciou o html mais não mudou praticamente nada. Tanto faz 
você salvar em qualquer uma das duas. 
 Então, basicamente, os arquivos HTML possuem dois componentes: 
1. O texto propriamente dito; 
2. As tags que indicarão os elementos de página: 
estrutura; 
formatação; 
vínculos a outras páginas. 
 Obs.: Para exibir o resultado do arquivo HTML não é nescessário estar conectado à rede, basta acessar um 
Browser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo. 
 
 
Formatação de Textos 
 Em uma página HTML podem existir textos, imagens, itens multimídia e hipertexto. 
Para isso o documento HTML apresenta a seguinte estrutura: 
<HTML> 
<HEAD> 
<TITLE>Titulo do documento</TITLE> 
</HEAD> 
<BODY> 
texto, imagem, links, etc... 
</BODY> 
</HTML> 
 Como o HTML não é uma linguagem de programação, você nunca será avisado de 
erros cometidos na edição do seu documento. Um simples esquecimento de uma barra 
pode mudar toda sua página. 
Seções 
\uf0b7 <HTML> e </HTML>: 
Identifica o documento como sendo HTML. 
\uf0b7 <HEAD> e </HEAD>: 
É o cabechalho e contém as informações sobre o documento. 
\uf0b7 <TITLE> e </TITLE>: 
Define um título que é mostrado no alto da janela do Browser. Todo documento 
WWW deve ter um título. Esse título é referenciado em busca pela rede, dando 
uma identidade ao documento, facilitando assim, a classificação em catalogos de 
busca. 
\uf0b7 <BODY> e </BODY>: 
Tudo que estiver na seção BODY será mostrado na janela do browser e, 
consequentemente, apresentado ao leitor. Esta seção pode conter cabeçalhos, 
parágrafor, listas, tabelas, imagens e links para outros documentos. Dentro da 
tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso 
não existam assumem o valor default: 
BGCOLOR - especifica uma cor de fundo para a página; 
BACKGROUND - especifica a imagem (.gif ou .jpg) usada no fundo da tela; 
BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela; 
TEXT - define uma cor para o texto; 
LINK - define uma cor para os links; 
VLINK - define uma cor para os links já visitados; 
ALINK - define uma cor para o link na hora que for ativado. 
Por exemplo: 
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor 
TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> 
Ou então, podemos usar o código equivalente da cor em hexadecimal: 
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor 
TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor> 
Não importa a seqüência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se 
coloca um espaço entre os atributos. 
Formatação de Textos 
 Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, 
negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas são nescessário 
delimitar o início e o fim do texto a ser formatado. 
\uf0b7 <FONT COLOR=nome_cor> texto </FONT>: 
Muda a cor do texto que estiver entre as tags início e fim. 
\uf0b7 <FONT FACE=nome_letra> texto </FONT>: 
Muda o tipo de letra do texto que estiver entre as tags início e fim. 
\uf0b7 <FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>: 
Muda o tamanho da letra do texto que estiver entre as tags início e fim. O n da tag 
<Hn> pode variar de 1 (o maior) até 6 (o menor). 
\uf0b7 <B> texto </B>: 
Coloca o texto que estiver entre as tags início e fim em negrito. 
\uf0b7 <I> texto </I>: 
Coloca o texto que estiver entre as tags início e fim em itálico. 
\uf0b7 <TT> texto </TT>: 
Coloca o texto que estiver entre as tags início e fim com fonte monoespaçada. 
\uf0b7 <U> texto </U>: 
Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhavel 
colocar o texto sublinhado, pois os links já são sublinhados e pode confundir). 
\uf0b7 <SUP> texto </SUP>: 
Coloca o texto que estiver entre as tags início e fim em sobscrito. 
\uf0b7 <SUB> texto </SUB>: 
Coloca o texto que estiver entre as tags início e fim em subscrito. 
\uf0b7 <S> texto </S>: 
Taxa o texto que estiver entre as tags início e fim. 
 Ainda falando da disposição de texto na tela, se desejarmos mudar de linha não 
basta usar o ENTER como em um editor de textos, existem tags específicas para isso, 
além de outros recursos para alocar um texto na página. São eles: 
\uf0b7 <CENTER> texto </CENTER>: 
Centraliza o texto em relação à página. 
\uf0b7 <BR>: 
Quebra de linha, inicia o texto seguinte na linha logo abaixo. 
\uf0b7 <NOBR> texto </NOBR>: 
Faz com que o texto não tenha quebras de linhas e crie uma barra de rolagem 
horizontal para poder ver o texto inteiro. 
\uf0b7 <WBR>: 
Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde 
você colocou este comando. 
\uf0b7 <P>: 
Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro 
parágrafo. 
 Exite também um comando de preformatação (<PRE> texto a ser preformatado 
</PRE>), ele é usado para que o browser aceite seus espaços grandes de uma letra para 
outra e o ENTER, Se você colocar a tag <PRE> do jeito que você digitar o texto será 
exatamente como aparecerá no Browser. 
 
 Linhas horizontais são formas de deixar sua página com mais facilidade de encontrar 
coisas e também mais apresentável. Essas linhas são boas saídas para textos grandes 
em que os assuntos são diversos. 
<HR>: 
Inclui uma linah horizontal no texto, separando-o em blocos. Nesta tag podemos 
especificar: 
\uf0b7 WIDTH - nº % do comprimento ou o nº em pixel - Ex.: <HR WIDTH=50%> 
ou <HR WIDTH=100>; 
\uf0b7 SIZE - espessura do traço - Ex.: <HR SIZE=5>. 
 
Exemplo contendo os tags de formatação de texto: 
<HTML> 
<HEAD> 
<TITLE>Exemplo das tags</TITLE> 
</HEAD> 
<BODY BGCOLOR=White TEXT=Black> 
<HR WIDTH=80% SIZE=3> 
<PRE> 
 
 
 
 
 
 
 
 
 
<CENTER>E X E M P L O</CENTER> 
 
 
 
 
 
 
 
 
 
</PRE> 
<HR WIDTH=80% SIZE=3> <P> 
<H1>Tamanho1</H1> <BR> 
<H2>Tamanho2</H2> <BR> 
<H3>Tamanho3</H3> <BR> 
<H4>Tamanho4</H4> <BR>