Tecnologias para Internet - 2013.1 - Aula 2

Tecnologias para Internet

Prof.º Thyago MaiaProf. Thyago MaiaGestão da TI – 2013.1

Aula 2: Introdução ao HTMLç

Objetivos• Introduzir a linguagem HTML• Enquadrar a tecnologia em sua q g

respectiva camada na arquitetura de sistemas Web

• Definir e apresentar as principais tagsHTMLHTML

• Fazer com que o aluno crie seu primeiro documento HTMLprimeiro documento HTML

2

Introdução ao HTMLIntrodução ao HTML

Introdução ao HTMLç

• HTML

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

– Utilizada na descrição e produção de páginas W bWeb;

– Lembre‐se: Não é uma linguagem de programação!!

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

4

Arquitetura de Sistemas WebWeb

• Qual camada a linguagem HTML se enquadra?

5

Arquitetura de Sistemas WebWeb

• Qual camada a linguagem HTML se enquadra?

6


• Tags HTML

– Palavras chave, digitadas entre < e > (Ex.: <b>);N l ã iili d E– 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:

<html><html><body>

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

</body></body></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


• Onde:

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

– O texto entre <body> e </body> será o conteúdo i í l d á ivisí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 p /p pparágrafo;

9


• Do que eu preciso para escrever documentos HTML?– Um editor de texto:

• Bloco de Notas;Bloco de Notas;• Notepad++;• Gedit (Linux);• Gedit (Linux);• Entre outros;

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

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

10

Exemplos de Tags HTMLExemplos de Tags HTML

Exemplos de Tags HTMLp g

Tags de TítuloSã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:

<html><body><body>

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

</body>

12

</body></html>


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

<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>p p p /p

</body></html>

13

/


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

<html><body>

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

</body></html>

14

/


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

<html><body>y

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

</body></html>

15


Linhas HTMLA tag <hr/> cria uma linha horizontal em uma página HTML, podendo ser usada para separar conteúdo;Exemplo:

<html><body>y

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

</body>

16

/ y</html>


Comentários HTMLComentá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;

<html><body><body>

<p>Parágrafo</p><p>Parágrafo</p>

</body></html>

17

</html>


Quebras de Linha HTMLUse a tag <br/> caso deseje pular uma linha em g / j pum documento HTML;Exemplo:Exemplo:

<html><body><body>

Parágrafo<br/><br/>Parágrafo

</body>

18

</body></html>

Elementos HTMLElementos HTML

Elementos HTML

Elementos HTMLUm elemento HTML é o conjunto formado por j puma tag de abertura, uma tag de fechamento e seu conteúdo (o que estiver entre as tags);( q g );

<html><body>

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

</body> Um elemento HTML

20

</html>

Elementos HTML

Sintaxe dos elementos HTMLUm 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 i )imagem);Elementos sem conteúdo são fechados na própria tag de abertura (como na tag de imagem);abertura (como na tag de imagem);Vários elementos HTML podem ter atributos (como na tagde imagem e de link);de imagem e de link);

21

Elementos HTML

Aninhamento de elementos HTMLAlguns elementos HTML podem ser aninhados, g p ,isto é, podemos inserir elementos HTML como conteúdo de outros elementos;;

<html><body>y

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

22

</body></html>

Atributos HTMLAtributos HTML

Atributos HTML

Atributos HTMLAtributos fornecem informações adicionais aos çelementos HTML;Elementos HTML podem ou não ter atributos;Elementos HTML podem ou não ter atributos;Atributos são sempre especificados nas tags de abertura;abertura;Atributos são formados pelo seguinte conjunto:

” l ”nome=”valor”Valores de atributos sempre devem estar delimitados por aspas duplas ou simples;

24

Atributos HTML

Exemplo de atributo HTMLLinks HTML são definidos pela tag <a>. O p gendereço do link é especificado pelo atributo href;;

<html><body>y

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

</body>

25

/ y</html>

Tags de formataçãoTags de formatação

Tags de formataçãog ç

Tags de formatação em HTMLHTML fornece tags como <b> (negrito) e <i> g ( g )(itálico) para formatação de texto;Exemplo:Exemplo:

<html><body>y

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

</body></html>

27

/

Tags de formataçãog ç

Tag de formatação de fontes em HTMLA partir da tag <font>, podemos formatar a cor, tamanho e tipo de fontes a ser utilizada no conteúdo do referido elemento;Exemplo:

<html><b d ><body>

<font size=“5” face=“arial” color=“red”>T h 5 f t i l lhTamanho 5, fonte arial, cor vermelha</font>

</b d >

28

</body></html>

Tabelas HTMLTabelas HTML

Tabelas HTML

Tabelas HTMLSão definidas a partir da tag <table>;Uma tabela é dividida em linhas (Tag <tr>);Cada linha é dividida em células (Tag <td>);

<html><body>

<t bl ><table><tr>

<td>Linha 1 – Coluna 1</td><td>Li h 1 C l 1</td><td>Linha 1 – Coluna 1</td>

</tr></table>

</b d >

30

</body></html>

Listas HTMLListas HTML

Listas HTML

Listas não ordenadas em HTMLSão definidas a partir da tag <ul>;p g ;Cada elemento da lista é definido a partir da tag<li>;<li>;

<html><body>

<ul><li>Elemento 1</li><li>El t 2</li><li>Elemento 2</li>

</ul>

</b d >

32

</body></html>

Listas HTML

Listas ordenadas em HTMLSão definidas a partir da tag <ol>;p g ;Cada elemento da lista é definido a partir da tag<li>;<li>;

<html><body>

<ol><li>Elemento 1</li><li>El t 2</li><li>Elemento 2</li>

</ol>

</b d >

33

</body></html>

Listas HTML

Listas de Definição em HTMLSão definidas a partir da tag <dl>;Tal lista possui vários itens (Tag <dt>);Cada item possui uma descrição (Tag <dd>);

<html><body>

<dl><dl><dt>Sport</dt>

<dd>Campeão Brasileiro de 87</dd><dt>B t f PB</dt><dt>Botafogo-PB</dt>

<dd>O maior campeão estadual da Paraíba</dd></dl>

</b d >

34

</body></html>

Formulários HTMLFormulários HTML

Formulários HTML

Formulários HTMLA tag <form> é utilizada na definição de um g çformulário;

<html><html><body>

<form><form>



</form>

</body>

36

</body></html>

Formulários HTML

Formulários HTML (Campos de Texto)A tag <input type=“text” /> é utilizada na g p yp /definição de um campo de texto com uma linha;

<html><html><body>

<form><form>Nome: <input type=“text” name=“nome” /><br/>Sobrenome: <input type=“text” name=“sobrenome”Sobrenome: <input type= text name= sobrenome

/></form>

37

</body></html>

Formulários HTML

Formulários HTML (Campos de Senha)A tag <input type=“password” /> é utilizada na g p yp p /definição de um campo de senha;

<html><html><body>

<form><form>

Senha: <input type=“password” name=“senha” />

</form>

</body>

38

</body></html>

Formulários HTML

Formulários HTML (Radio Buttons)A tag <input type=“radio” /> é utilizada na definição de um radio button;Radio Buttons permitem aos usuários selecionarem apenas uma opção em uma lista;

<html><b d ><body><form><input type=“radio” name=“time” value=“SPT” />Sport<b /><br/><input type=“radio” name=“time” value=“FLA” /> Flamengo </f >

39

</form></body></html>

Formulários HTML

Formulários HTML (Checkboxes)A tag <input type=“checkbox” /> é utilizada na definição de um h kbcheckbox; Checkboxes permitem aos usuários selecionarem uma ou mais opções em uma lista;pç ;

<html><body><form><form><input type=“checkbox” name=“carro” value=“ferrari” />Ferrari<br/><br/><input type=“checkbox” name=“carro” value=“Fusca” /> Fusca </form>

40

</form></body></html>

Formulários HTML

Formulários HTML (Botão de Submissão)

A tag <input type=“submit” /> é utilizada na definição de um botão de submissão;um botão de submissão;Um botão de submissão é usado para enviar os dados do formulário para um servidor;p ;Os dados são enviados para uma página específica, indicada no atributo action da tag <form>;O arquivo indicado no referido atributo normalmente executa algum processamento nos dados enviados pelo formulário;

41

Formulários HTML

Formulários HTML (Botão de Submissão)Exemplo:p

<html><body><body>

<form action=“recebe.php” method=“GET”>Nome: <input type=“text” name=“nome” />Nome: <input type= text name= nome /><input type=“submit” value=“Enviar” /></form>

</body></html>

42

Frames HTMLFrames HTML

Frames HTML

Frames HTMLA partir dos frames, uma ou mais páginas podem ser apresentadas ao mesmo tempo na mesma janela/aba de um navegador;Cada documento é chamado de frame, e cada frame é independente dos demais;DDesvantagens:

Frames não serão suportados em versões futuras do HTML;Frames são difíceis de usar;Frames são difíceis de usar;Um desenvolvedor Web deve manter sua atenção para várias páginas ou mesmo tempo;

44

Frames HTML

O elemento framesetUm frameset é um conjunto de um ou mais frames;Cada frame especifica um documento HTML a parte;Tal elemento especifica como cada coluna ou linha de páginas serão apresentadas no navegador;

<ht l><html><frameset cols=“25%, 75%”><frame src=“www.sportrecife.com.br” /><f “ l b t / ” /><frame src=“globoesporte.com/pe” /> </frameset></html>

45

Frames HTML

Iframes HTMLUm iframe é utilizado para apresentar uma p ppágina HTML dentro de outra;Exemplo:Exemplo:

<html><body><body>

<iframe src="demo_iframe.htm" width="200“ height="200"></iframe>height= 200 ></iframe>

</body></html>

46

</html>

Technology

Tecnologias para Internet - 2013.1 - Aula 2