Tecnologias para Internet - 2013.2 - Aula 2
-
Upload
thyago-maia -
Category
Education
-
view
244 -
download
2
description
Transcript of Tecnologias para Internet - 2013.2 - Aula 2
Tecnologias para Internet
Prof.º Thyago MaiaProf. Thyago MaiaGestão da TI – 2013.2
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 Web
• Qual camada a linguagem HTML se enquadra?
5
Arquitetura de Sistemas Web
• Qual camada a linguagem HTML se enquadra?
6
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
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
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
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
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>
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
/
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
/
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
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>
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>
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>
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>
<!-- Elementos de entrada -->
</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
Prática em LaboratórioPrá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 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