Tecnologias para Internet - 2013.2 - Aula 2
-
Upload
thyago-maia -
Category
Education
-
view
252 -
download
2
description
Transcript of Tecnologias para Internet - 2013.2 - Aula 2
![Page 1: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/1.jpg)
Tecnologias para Internet
Prof.º Thyago MaiaProf. Thyago MaiaGestão da TI – 2013.2
![Page 2: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/2.jpg)
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
![Page 3: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/3.jpg)
Introdução ao HTMLIntrodução ao HTML
![Page 4: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/4.jpg)
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
![Page 5: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/5.jpg)
Arquitetura de Sistemas Web
• Qual camada a linguagem HTML se enquadra?
5
![Page 6: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/6.jpg)
Arquitetura de Sistemas Web
• Qual camada a linguagem HTML se enquadra?
6
![Page 7: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/7.jpg)
Introdução ao HTMLç
• 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
![Page 8: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/8.jpg)
Introdução ao HTMLç
• 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
![Page 9: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/9.jpg)
Introdução ao HTMLç
• 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
![Page 10: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/10.jpg)
Introdução ao HTMLç
• 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
![Page 11: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/11.jpg)
Exemplos de Tags HTMLExemplos de Tags HTML
![Page 12: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/12.jpg)
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>
![Page 13: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/13.jpg)
Exemplos de Tags HTMLp g
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
/
![Page 14: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/14.jpg)
Exemplos de Tags HTMLp g
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
/
![Page 15: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/15.jpg)
Exemplos de Tags HTMLp g
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
![Page 16: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/16.jpg)
Exemplos de Tags HTMLp g
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>
![Page 17: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/17.jpg)
Exemplos de Tags HTMLp g
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>
<!-- Isto é um comentário --><p>Parágrafo</p><p>Parágrafo</p>
</body></html>
17
</html>
![Page 18: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/18.jpg)
Exemplos de Tags HTMLp g
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>
![Page 19: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/19.jpg)
Elementos HTMLElementos HTML
![Page 20: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/20.jpg)
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>
![Page 21: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/21.jpg)
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
![Page 22: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/22.jpg)
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>
![Page 23: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/23.jpg)
Atributos HTMLAtributos HTML
![Page 24: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/24.jpg)
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
![Page 25: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/25.jpg)
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>
![Page 26: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/26.jpg)
Tags de formataçãoTags de formatação
![Page 27: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/27.jpg)
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
/
![Page 28: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/28.jpg)
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>
![Page 29: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/29.jpg)
Tabelas HTMLTabelas HTML
![Page 30: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/30.jpg)
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>
![Page 31: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/31.jpg)
Listas HTMLListas HTML
![Page 32: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/32.jpg)
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>
![Page 33: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/33.jpg)
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>
![Page 34: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/34.jpg)
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>
![Page 35: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/35.jpg)
Formulários HTMLFormulários HTML
![Page 36: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/36.jpg)
Formulários HTML
Formulários HTMLA tag <form> é utilizada na definição de um g çformulário;
<html><html><body>
<form><form>
<!-- Elementos de entrada -->
</form>
</body>
36
</body></html>
![Page 37: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/37.jpg)
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>
![Page 38: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/38.jpg)
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>
![Page 39: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/39.jpg)
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>
![Page 40: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/40.jpg)
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>
![Page 41: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/41.jpg)
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
![Page 42: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/42.jpg)
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
![Page 43: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/43.jpg)
Prática em LaboratórioPrática em Laboratório
![Page 44: Tecnologias para Internet - 2013.2 - Aula 2](https://reader033.fdocuments.net/reader033/viewer/2022052316/5579a1dfd8b42ac1148b485c/html5/thumbnails/44.jpg)
Prática em Laboratório
• Faça um documento HTML que estruture um currículo online (o seu!)( )– A atividade vale de 0 a 3 pontos para a nota do 1º estágio;– Data de entrega: Até 02/09/2013g / /
• Enviar o site 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
t d l d l )apresentadas em sala de aula);– Os documentos deverão ser editados APENAS através dos softwares Notepad++ Notepad ou Gedit;softwares Notepad++, Notepad ou Gedit;
44