Tecnologias para Internet - 2013.2 - Aula 2
Upcoming SlideShare
Loading in...5
×
 

Tecnologias para Internet - 2013.2 - Aula 2

on

  • 492 views

Tecnologias para Internet - 2013.2 - Aula 2

Tecnologias para Internet - 2013.2 - Aula 2

Statistics

Views

Total Views
492
Views on SlideShare
492
Embed Views
0

Actions

Likes
0
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tecnologias para Internet - 2013.2 - Aula 2 Tecnologias para Internet - 2013.2 - Aula 2 Presentation Transcript

  • Tecnologias para Internet Prof.º Thyago MaiaProf.  Thyago Maia Gestã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 tags HTMLHTML • 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 .html 8
  • 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 p pará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í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: <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 HTML A 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 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; <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 HTML Use a tag <br/> caso deseje pular uma linha em g / j p um documento HTML; Exemplo:Exemplo: <html> <body><body> Parágrafo <br/><br/> Parágrafo </body> 18 </body> </html>
  • Elementos HTMLElementos HTML
  • Elementos HTML Elementos HTML Um elemento HTML é o conjunto formado por j p uma 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 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  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 tag de imagem e de link);de imagem e de link); 21
  • Elementos HTML Aninhamento de elementos HTML Alguns 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 HTML Atributos 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 HTML Links HTML são definidos pela tag <a>. O p g endereç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 HTML HTML 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 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: <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 HTML Sã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 HTML Sã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 HTML Sã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 HTML Sã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 HTML A 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 provas@thyagomaia.net – 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