Você está na página 1de 29

TECNOLOGIAS WEB Aula 5

Prof. Rafael Monteiro Ribeiro www.r2m@gmail.com

Objetivos:
Apresentar as principais tags utilizadas na construo de pginas Web. Compreender as principais funcionalidades de cada tag utilizada. Listas as principais tags para tratamento de imagens, textos e contedos

Linguagem HTML (Hypertext Markup Language)


Caractersticas
Interpretada pelo navegador No linearidade da informao Formatao do texto podendo ser interpretvel por todo e qualquer navegador ( padro do W3C)

Linguagem HTML - Estrutura


Cada elemento chamado de tag

<tag> </tag> - abertura e fechamento

<tag> - sem elementos adicionais

Linguagem HTML - Estrutura


Cada elemento chamado de tag

<font color=red>Texto </font> Texto Linha1<br>Linha2 <hr>


Linha1 Linha2

Linguagem HTML - Estrutura <tag atributo=valor> XXXX</tag> Exemplo: <font size=2 color=red> Texto que sofrer alteraes </font>

Linguagem HTML - Documento HTML


<html> <head></head> <body> <html> Define o incio de um </body> documento HTML ao navegador </html>
web.

Linguagem HTML - Documento HTML


<html> <head></head> <body> <head> Define o cabealho do </body> documento. rea onde so </html> inseridas chamadas Javascript, CSS,
tags META,...

Linguagem HTML - Documento HTML


<html> <head></head> <body> </body> </html>
<body> A partir desta tag at o fechamento da mesma, todos os elementos aqui descritos sero apresentados como contedos na pgina em seu navegador.

Linguagem HTML - Documento HTML


<html> <head>

<title>Aula de Tecnologias Web</title>

</head> <body></body></html>

Linguagem HTML - Documento HTML


<html><head> <title>Aula de Tecnologias Web</title>

<STYLE type="text/css"> p {color:red}</STYLE>


</head>

<body>

<p>Texto com o Estilo aplicado</p>


</body></html>

Linguagem HTML - Documento HTML


<html><head> <title>Aula de Tecnologias Web</title>

<SCRIPT type="text/javascript"> document.write("Ol Alunos do Curso!") </SCRIPT>


</head> <body> </body></html>

Linguagem HTML - META TAGS


Cdigo HTML ("etiquetas) utilizadas para dar aos robs de busca informaes a respeito de sua pgina e site.
<html><head> <META NAME="author" CONTENT=Rafael Ribeiro"> <META NAME="description" CONTENT="Meta Tags Facilidade para robs Web"> <META NAME="keywords" CONTENT="sites,web,desenvolvimento, eletrnico"> </head><body></body></html>

Web Aula -> Aula 5 -> Tela 8

Linguagem HTML - Documento HTML


Tags de Corpo <body> : Comentrio <!- TEXTO COMENTADO - >
<html><head><title>Aula de Tecnologias Web</title> </head> <body> <!- Inicio da montagem do Menu -> XXX XXX XXX <!- Fim da montagem do Menu -> </body> </html>

Linguagem HTML - Documento HTML


Primeiro Exemplo:
<html><head><title>Aula de Tecnologias Web</title> </head> <body>

<p align=center> Ol ! Minha primeira pgina</p>


</body> </html>

Linguagem HTML - Documento HTML


DICAS:
Atribua nomes de arquivos que descrevam a funcionalidade do documento Utilize comentrios -> Ajudam outros programadores a entenderem a marcao Indentar elementos aninhados -> Promove a legibilidade do documento

Linguagem HTML - Documento HTML


Erros comuns:
No incluir os valores de atributos entre aspas simples ou dupla (Erro de Sintaxe) O XHTML no permite TAGS superpostas
<html> <head> <title></head></title> <body> </body> </html>

Linguagem HTML - Documento HTML


Ex: Lista Ordenada
<html><head><title></title></head> <body>

<ol> <li>item nmero um.</li> <li>item nmero dois.</li> <li>item nmero trs.</li> </ol>
</body> </html>

Linguagem HTML - Documento HTML


Ex: Lista Ordenada
<ol> <li type=a>item nmero um.</li> <li>item nmero dois.</li> <li>item nmero trs.</li> </ol>

Linguagem HTML - Vnculos (Links)

Linguagem HTML - Vnculos (Links)


SINTAXE: <a href=caminho para o destino> Objeto </a>

Linguagem HTML - Vnculos (Links)


Pgina Externa
<a href=http://www.estacio.br> Site da Estcio</a>

Linguagem HTML - Vnculos (Links)


E-Mail
<a href=mailto: nome@exemplo. br>Fale comigo !</a>

Linguagem HTML - Vnculos (Links)

<a href=__________________> __________ </a>

Linguagem HTML ncora (Link Interno)


Para o funcionamento de uma ncora deve-se estabelecer dois comandos: . Um que defina o lugar da pgina para onde se pretende "saltar . Outro que identifique esse ponto de destino

Linguagem HTML ncora (Link Interno) Sintaxe:


<A NAME="Coloque o nome da ancora aqui"></A>

<a href="#nome da ancora">Texto</a>

Linguagem HTML
Links com ncoras para uma outra pgina <a href=pagina#nomedaancora">Texto</a>

Fontes de Consulta

http://www.w3schools.com/tags/ http://www.htmlstaff.org/

Você também pode gostar