Tecnologias para Internet - 2015.2 - Aula 2

Tecnologias para Internet

Prof.º Thyago MaiaGestão da TI – 2015.2

Objetivos

Aula 2: Introdução ao HTML

• Introduzir a linguagem HTML• Enquadrar a tecnologia em sua

respectiva camada na arquitetura de sistemas Web

• Definir e apresentar as principais tags HTML

• Fazer com que o aluno crie seu primeiro documento HTML

2

Introdução ao HTML


• HTML

– Hypertext Markup Language, ou linguagem de marcação de hipertexto;

– Utilizada na descrição e produção de páginas Web;– Lembre-se: Não é uma linguagem de

programação!!– Composta por uma série de TAGs de marcação;

4

Arquitetura de Sistemas Web

• Qual camada a linguagem HTML se enquadra?

5

Arquitetura de Sistemas Web

• Qual camada a linguagem HTML se enquadra?

6


• Tags HTML

– Palavras chave, digitadas entre < e > (Ex.: <b>);– Normalmente são utiilizadas em pares. Ex.:• <b>Texto em negrito</b>

– Onde:• <b> - Tag de abertura;• </b> - Tag de fechamento;

7


• Exemplo de um documento HTML:

– Digite o exemplo acima em um editor de texto simples, como o notepad, gedit ou Notepad++;

– Salve o arquivo com a extensão .htm ou .html8

<html><body>

<h1>Meu primeiro título</h1><p>Meu primeiro título</p>

</body></html>


• Onde:

– O texto entre <html> e </html> descreve a página Web;

– O texto entre <body> e </body> será o conteúdo visível da página;

– O texto entre <h1> e </h1> é apresentado em destaque, como um título;

– O texto entre <p> e </p> é apresentado em um parágrafo;

9


• Do que eu preciso para escrever documentos HTML?– Um editor de texto:• Bloco de Notas;• Notepad++;• Gedit (Linux);• Entre outros;

– OBS: Sempre salve os arquivos com a extensão .html ou .htm

– Um navegador Web:• Firefox, IE, Chrome, etc.;

10

Exemplos de Tags HTML


Tags de Título São definidas através das tags <hx> e </hx>, onde o x

define o nível do título, através de um número de 1 a 6; Exemplos:

12

<html><body>

<h1>Título da página</h1><h2>Subtítulo</h2><h3>Subtítulo do subtítulo</h3>

</body></html>


Tag de Parágrafo É definida através das tags <p> e </p>; Exemplos:

13

<html><body>

<p>Sport Club do Recife</p><p>Campeão Brasileiro de 87</p><p>Campeão da Copa do Brasil de 2008</p>

</body></html>


Tag de Link É definida através das tags <a> e </a>; Exemplos:

14

<html><body>

<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a>

</body></html>


Tag de Imagem É definida através das tag <img>; Exemplos:

15

<html><body>

<img src=”bandeira.jpg” width=”104” height=”142” />

</body></html>


Linhas HTML A tag <hr/> cria uma linha horizontal em uma página

HTML, podendo ser usada para separar conteúdo; Exemplo:

16

<html><body>

<p>Sport Club do Recife</p><hr/><p>Campeão de 87!!!</p>

</body></html>


Comentários HTML Comentários podem ser inseridos em um código HTML

para torná-lo mais legível e compreensível; São ignorados pelo navegador e não são apresentados;

17

<html><body>

<p>Parágrafo</p>

</body></html>


Quebras de Linha HTML Use a tag <br/> caso deseje pular uma linha em

um documento HTML; Exemplo:

18

<html><body>

Parágrafo<br/>Parágrafo

</body></html>

Elementos HTML

Elementos HTML

Elementos HTML Um elemento HTML é o conjunto formado por

uma tag de abertura, uma tag de fechamento e seu conteúdo (o que estiver entre as tags);

20

<html><body>


</body></html>

Um elemento HTML

Elementos HTML

Sintaxe dos elementos HTML Um elemento HTML começa com uma tag de abertura e

termina com uma tag de fechamento; O conteúdo de um elemento HTML é tudo aquilo que está

entre tags; Vários elementos HTML não tem conteúdo (como a tag de

imagem); Elementos sem conteúdo são fechados na própria tag de

abertura (como na tag de imagem); Vários elementos HTML podem ter atributos (como na tag

de imagem e de link);

21

Elementos HTML

Aninhamento de elementos HTML Alguns elementos HTML podem ser aninhados,

isto é, podemos inserir elementos HTML como conteúdo de outros elementos;

22

<html><body>

<p>Sport Club do Recife</p><p><img src=”fig.jpg” widht=”200” height=”10” /></p><p><b>O melhor do Nordeste</b></p>

</body></html>

Atributos HTML

Atributos HTML

Atributos HTML Atributos fornecem informações adicionais aos

elementos HTML; Elementos HTML podem ou não ter atributos; Atributos são sempre especificados nas tags de

abertura; Atributos são formados pelo seguinte conjunto:

nome=”valor” Valores de atributos sempre devem estar

delimitados por aspas duplas ou simples;24

Atributos HTML

Exemplo de atributo HTML Links HTML são definidos pela tag <a>. O

endereço do link é especificado pelo atributo href;

25

<html><body>


</body></html>

Tags de formatação


Tags de formatação em HTML HTML fornece tags como <b> (negrito) e <i>

(itálico) para formatação de texto; Exemplo:

27

<html><body>

<b>Este texto será exibido em negrito</b><br/><i>Este texto será exibido em itálico</i>

</body></html>


Tag de formatação de fontes em HTML A partir da tag <font>, podemos formatar a cor, tamanho

e tipo de fontes a ser utilizada no conteúdo do referido elemento;

Exemplo:

28

<html><body>

<font size=“5” face=“arial” color=“red”>Tamanho 5, fonte arial, cor vermelha</font>

</body></html>

Prática em Laboratório

Prática em Laboratório

• Faça um documento HTML que estruture um currículo online (o seu!)– A atividade vale de 0 a 1 ponto para a nota do 1º estágio;– Data de entrega: Até 18/08/2015

• Enviar os arquivos para [email protected]

– Critérios de avaliação: Conteúdo (uso de texto, imagem, vídeo, etc.), Formatação, Organização do Código e Pesquisa (o aluno pesquisou e utilizou tags não apresentadas em sala de aula);

– Os documentos deverão ser editados APENAS através dos softwares Notepad++, Notepad ou Gedit;

30

mailto:[email protected]

Education

Tecnologias para Internet - 2015.2 - Aula 2