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>

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


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:

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.


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


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:

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


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

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

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

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

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

linguagem html

Documents