Linguagem html

Instituto Superior de Entre Douro e Vouga
Tecnologias da Informação e da Comunicação│2011/2012

Tecnologia de Internet

Trabalho realizado por:

Liliana João Monteiro da Costa

Santa Maria da Feira, 19 Novembro de 2011

3- Tecnologias de Internet HTML

ÍNDICE

1.Definição do HTML……………………………………………………………………. 2

2.A importância do HTML……………………………………………………………… 2

3.Elementos básicos da linguagem HTM…………………………………………… 2

3.1. O elemento HTML ………………………………………………………….. 3

3.2.O cabeçalho do documento…………………………………………………. 3

3.2.1.Meta – informação………………………………………. 4

3.3. O Corpo do Documento……………………………………………………. 5

4.Texto……………………………………………………………………………………. 7

4.1 Espaços em branco…………………………………………………………… 7

4.2 Linhas e parágrafos……………………………………………………………. 8

4.3 Os elementos h1, h2, h3, h4,h5, h6…………………………………………. 9

4.4 Elementos de estruturação de texto…………………………………………. 9

5.Listas …………………………………………………………………………………… 11

6.Links .................................................................................................................... 13

7.Imagens............................................................................................................... 14

8.Conclusão …………………………………………………………………………… 15

9.Bibliografia …………………………………………………………………………….. 16

Liliana Costa 3722 ISVOUGA Página 1 de 12


1.DEFINIÇÃO DE HTML

É uma sigla inglesa da expressão Hypertext Markup Language e designa uma

linguagem de descrição de documentos standard da World Wide Web. É uma aplicação

da SGML que utiliza (tags) para definir os diferentes elementos, tais como texto,

elementos multimédia, formulários, hiperligações, etc2.

2.A IMPORTÂNCIA DO HTML

Existem vários programas editores de HTML (DreamWeaver, Front Page, NVU, Quanta

Plus, kumpozer, Hot Dog, Star Web...) que codificam as ações em cima de um texto

para códigos HTML. Para que, então, aprender HTML? Os editores têm limitações,

podendo apresentar resultados nem sempre esperados. Por não conter alguns

recursos vai querer aperfeiçoar cada vez mais a sua página e para que isso ocorra,

precisará recorrer aos códigos HTML

3.ELEMENTOS BÁSICOS DA LINGUAGEM HTM

Toda a página da internet tem que começar e terminar, obrigatoriamente, assim:

<html> = Marca o início da página;

<head> = início do cabeçalho;

<title> =titulo da página </title> = Título da página;

</head> = fecha cabeçalho;

<body> = início do conteúdo da página;

</body> = fecha o conteúdo da página;

</html> = Marca o fim da página.



3.1. O Elemento HTML

A seguir à definição do tipo de documento, todo o resto do documento é englobado
pela etiqueta (tag) HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...o cabeçalho e o corpo do documento...
</HTML>

3.2.O Cabeçalho Do Documento:

O cabeçalho contém informação sobre o documento como o título, o autor, palavras-
chave que serão utilizadas por motores de busca, etc. A informação contida no
cabeçalho não é geralmente apresentada.

 O título:

 Todo o documento HTML tem que ter um título.
 O título deve ser uma frase curta mas identificadora do documento.
 O título só pode aparecer uma única vez em cada documento.

<TITLE>O título do documento/TITLE>
... outros elementos do cabeçalho...
</HEAD>
<BODY>
... o corpo do documento...
</BODY>
</HTML>



3.2.1.Meta - Informação:

 A linguagem HTML permite que os autores coloquem no documento
informação sobre o próprio documento, denominada meta -informação.
Por exemplo, é possível:

 Indicar o autor do documento:

<META name="Author" lang="pt" content="António Costa">

 Indicar palavras-chave:

<-- Palavras chave -->
<META name="keywords" lang="pt"
content="html, estrutura, tutorial">
<HTML>
<HEAD>
<TITLE>O título do documento.</TITLE>
<META name="Author" lang="pt" content="António
Pereira">
<-- Palavras chave -->
<META name="keywords" lang="pt"
content="html, estrutura, tutorial">
... outros elementos do cabeçalho...
</HEAD>
<BODY>



3.3. O Corpo do Documento:

É no corpo do documento que se encontra o conteúdo (informação) propriamente dita.
A forma como esse conteúdo é apresentado pode variar consoante os dispositivos e o
software que o utilizador está a utilizar, para aceder aos documentos.
Para os browsers gráficos mais comuns, o corpo do documento pode ser encarado
como uma "tela" onde se posicionam elementos de texto, cores, figuras, gráficos, etc.
No entanto, o mesmo documento, pode ser acedido por browsers de texto, em que a
informação relativa aos elementos gráficos deve estar presente de outra forma.
Podemos pensar ainda, que esse conteúdo possa vir a ser processado por um
sintetizador de voz, ou mostrado no reduzido visor de um telemóvel.

As folhas de estilo devem ser utilizadas para tratar da apresentação da informação
(aspectos visuais).

O corpo do documento deve conter o mínimo possível de atributos visuais.

Mostra-se em seguida um exemplo (a evitar) da utilização de atributos visuais no corpo
do documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>HTML básico</TITLE>
</HEAD>
<BODY
bgcolor="white" text="black"link="red" alink="fuchsia"
vlink="maroon">
... corpo do documento...
</BODY>
</HTML>



O mesmo efeito pode ser conseguido utilizando uma folha de estilo incorporada no
documento:

<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

De uma forma mais correcta, é possível ligar o documento a uma folha de estilo externa.
Assim, podemos alterar o estilo do documento sem o editar e aplicar o mesmo estilo a
vários documentos:

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="estilos.css">
</HEAD>
<BODY



</BODY>
</HTML>

Os elementos que aparecem no corpo do documento são classificados em:

 Elementos de bloco (block level)- aqueles que podem conter outros elementos
de bloco ou elementos em linha. Geralmente cada elemento de bloco tem início
numa nova linha do ecrã.
 Elementos em linha (inline) - aqueles que apenas podem conter outros
elementos em linha e dados. Geralmente estes elementos não dão origem ao
aparecimento de uma nova linha.

Os elementos do corpo do documento podem ser agrupados com dois "contentores"
géneros de elementos, que permitem, conjuntamente com as folhas de estilo estruturar
o documento e aplicar o layout desejado à informação:

 DIV - permite agrupar elementos de bloco e elementos em linha. É um elemento
de bloco.
 SPAN - permite agrupar elementos em linha. É um elemento em linha.

4.TEXTO

4.1 Espaços em Branco:

Em qualquer documento HTML, sequências de espaços, tabulações e mudanças de
linha são tratadas como um único espaço.

Os espaços, mudanças de linha e tabulações servem para separar as palavras e os
vários elementos do documento, não tenho assim qualquer influência na formatação do
mesmo.
O caracter   (no breaking space) é muitas vezes utilizado para questões de
formatação: essa utilização deve ser evitada!



A função deste carácter (como o nome indica) é evitar que o browser separe duas
palavras. Exemplo:

Windows 2007

4.2 Linhas e Parágrafos:

Para organizar o texto em parágrafos utiliza-se o elemento P. Exemplo:

<P> Este é um parágrafo.</P>
<P> Este é outro parágrafo.</P>
<P> E mais um parágrafo.</P>

Podemos verificar que um parágrafo não pode conter elementos de bloco nem outros
parágrafos.

Para se forçar uma mudança de linha dentro de um parágrafo utiliza-se o elemento BR.
Exemplo:

<P>Esta é a primeira linha de texto.<BR>
Esta é a segunda linha de texto<BR>
Esta é a terceira linha de texto<BR></P>

Note que o elemento BR não tem a etiqueta de fim.



4.3 Os Elementos H1, H2, H3, H4,H5, H6

Estes elementos permitem descrever o título de uma secção do documento, desde o
nível 1 (o mais importante) até ao nível 6 (que corresponde a uma sub-sub-sub-sub-
sub-secção).

Geralmente os browsers apresentam os cabeçalhos mais importantes com um tipo de
letra maior que os menos importantes. O elemento DIV pode ser utilizado para associar
um elemento Hi com cada secção do documento. Assim, é possível definir um estilo
diferente para cada secção do documento:

<DIV class="section" >
<H1>Título da secção</H1>
<P>Nesta secção discutimos ....
...esta secção continua...
<DIV class="subsection">
<H2>Título da sub-secção</H2>
<P>Nesta sub-secção ...
...esta sub-secção continua...
</DIV>
</DIV>

4.4 Elementos de estruturação de texto:

O elemento PRE permite escrever texto pré-formatado. Neste caso os espaços em
branco, tabulações e mudanças de linha são respeitados. Exemplo:



<PRE>
program ola;
var i:integer;
begin
for i:=1 to 100
do begin
writeln('olá');
writeln('E viva o mundo!');
end
end.
</PRE>

EM: Este elemento dá ênfase ao texto.

STRONG: Este elemento dá uma ênfase maior ao texto que o elemento EM.

CITE: Contém uma referência.

Exemplos:

<P>Nesta frase é dado ênfase na última <EM>palavra</EM><BR>

Nesta frase a última palavra ainda tem mais

<STRONG>ênfase</STRONG></P>

O elemento BLOCKQUOTE utiliza-se para fazer citações longas de texto.
O elemento Q serve para fazer pequenas citações numa linha.
Exemplos:



<BLOCKQUOTE
cite="http://www.twainquotes.com/Mathematics.html">
<P>We could use up two Eternities in learning all that
is to be learned about our own world and the thousands
of nations
that have arisen and flourished and vanished from
it.<>br>
Mathematics alone would occupy me eight million years.
</P>
</BLOCKQUOTE>
<P>A Maria diz, <Q>Vi a Joana ao jantar, ela disse
<Q>Preciso de falar urgentemente com o Paulo.</Q> Acho
que lhe vou telefonar.</Q>
</P>

NOTA: O elemento BLOCKQUOTE não deve ser utilizado para fazer identificação de
blocos de texto.

Índices (SUB) e Expoentes (SUP) - servem para levantar ou baixar o texto numa linha.
Exemplos:

<P>4<sup>2</sup> = 16<BR>
x<sub>1</sub> + x<sub>2</sub> = 0</P>

5.LISTAS

A linguagem HTML permite utilizar três tipos de listas:

 Listas sem ordem
 Listas numeradas
 Listas de definições

Por exemplo, a lista anterior é uma lista sem ordem (UL) e foi criada da seguinte forma:



<UL>
<LI>Listas sem ordem</LI>
<LI>Listas numeradas</LI>
<LI>Listas de definições</LI>
</UL>

Um exemplo da utilização de uma lista ordenada (OL) é o seguinte

<OL>
<LI>O primeiro item.</LI>
<LI>O segundo item.</LI>
<LI>O terceiro item.</LI>
</OL>

O resultado do exemplo anterior é:

 O primeiro item.
 O segundo item.
 O terceiro item

Quanto às listas de definições (DL), estas são constituídas por sequências de pares da
forma (termo, definição). Exemplo:

<DL>
<DT>Triângulo</DT><DD>Tem três lados.</DD>
<DT>Quadrado</DT><DD>Tem quatro lados.</DD>
<DT>Hexágono</DT><DD>Tem seis lados.</DD>
</DL>



Este exemplo produz o seguinte resultado:

Triângulo
Tem três lados.
Quadrado
Tem quatro lados.
Hexágono
Tem seis lados

6. LINKS

O que realmente diferencia a linguagem HTML de outras linguagens (como o TeX) é o
poder de estabelecer ligações para outros documentos.Estas ligações (links) são
definidas com o elemento A. Por exemplo, para definir um link para o ficheiro
"aveiro.htm", existente no mesmo directório do documento actual, basta escrever:

Este é um link para <A href="aveiro.htm">a página de Aveiro</A>

Para estabelecer um link para um documento num outro lugar da Web é necessário
escrever o endereço completo. Por exemplo:

Este é um link para o site do
<A href="http://www.w3.org/">World Wide Web
Consortium</A>

Para estabelecer um link para um outro ponto do mesmo documento, é necessário
primeiro que tudo identificar esse ponto, com o atributo "name". Por exemplo, para
identificar a secção "Introdução ao HTML" fazemos:

<H1><A name="int_html">Introdução ao HTML<A></H2>



O atributo "name" identifica unicamente a secção do documento e é possível criar um
link para ela em qualquer outra zona do documento (ou mesmo em outro documento).
Por exemplo:

Vamos seguir para a secção <A href="int_html">Introdução ao HTML</A>

7.IMAGENS

As imagens podem ser usadas para suscitar o interesse por uma página.
Nota-se no entanto que à máxima "uma imagem vale por mil palavras" se pode
contrapor: “ mil imagens podem não valer uma única palavra”. Vamos sopor, que
"foto_ferias.jpg" é uma imagem com 200×300 pixels existente no mesmo directório que
o documento. Para inserir a imagem usa-se o elemento IMG:

<IMG src="foto_ferias.jpg" width="200" height="300"
alt="Foto das férias nos Açores">

Notas:

 Deve sempre especificar-se o tamanho das imagens.
 O atributo "alt" é fundamental pela questão de acessibilidade. Nunca o devemos
esquecer.



8.CONCLUSÃO

Com a proliferação de editores de HTML simples e elegantes, como o Frontpage
Express ou o Netscape Composer, é pouco provável que se comece a preparar uma
página usando o código HTML directamente. Mas é útil conhecer algo sobre ele, já que
o estamos a usar quase todos os dias! Podemos aprender HTML de muitas maneiras
sem estudar especificamente a linguagem como se fosse uma linguagem de
programação. Mas apesar de tudo e depois da abordagem efectuada neste trabalho,
conclui-se que é um método simples mas que necessita de algumas regras básicas
que sem elas não se conseguirá atingir o objectivo de criar um página15.



9.BIBLIOGRAFIA

 http://pt.wikipedia.org/wiki/HTML

 http://aero-planos.planetaclix.pt/SOS/HTML/

 http://ufpa.br/dicas/htm/htm-intr.htm

 http://www.apostilando.com/sessao.php?cod=35

 http://www.alfa.ind.br/luiz/html/basicos.htm


Linguagem html

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Linguagem html

Similaire à Linguagem html (20)

Linguagem html