Tecnologias para Internet - Aula 2

  • 639 views
Uploaded on

Tecnologias para Internet - Aula 2

Tecnologias para Internet - Aula 2

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
639
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Profº Thyago Maia Tecnologias para Internet Aula 2
  • 2. Sumário
    • Camada de Apresentação
      • Introdução ao HTML
  • 3. Introdução ao HTML
    • HTML: Hypertext Markup Language, ou Linguagem de marcação de hipertexto;
    • Trata-se de uma linguagem de marcação, utilizada na descrição de páginas Web;
      • Não é uma linguagem de programação!!!!
      • Uma linguagem de marcação é composta por uma série de TAGs de marcação;
      • Não é case sensitive;
  • 4. Introdução ao HTML
    • Tags HTML
      • São palavras chave, digitadas entre < e > , como em <html> ;
      • Normalmente são utilizadas em pares, como em <b> Texto em Negrito </b> , onde...
        • < b > : Tag de abertura;
        • </ b > : Tag de fechamento;
  • 5. Introdução ao HTML
    • Documentos HTML = Páginas Web
      • Documentos HTML descrevem páginas Web;
      • Documentos HTML contém tags HTML e texto;
    • Navegadores (Browsers)
      • Lêem documentos HTML, apresentando-os como páginas Web;
      • Não apresentam as tags HTML...
        • Usam as tags para interpretar o conteúdo de uma página Web;
  • 6. Introdução ao HTML
    • Corpo (simples) de uma página HTML:
    • Onde:
      • O texto entre <html> e </html> descreve a página Web;
      • O texto entre <body> e </body> é o conteúdo visível da página;
      • O texto entre <h1> e </h1> é apresentado como um título;
      • O texto entre <p> e </p> é apresentado como um parágrafo;
    <html> <body> <h1> Meu primeiro título </h1> <p> Meu primeiro título </p> </body> </html>
  • 7. Introdução ao HTML
    • Do que eu preciso para escrever e documentos HTML?
      • Um editor de texto (apenas!!) ...
        • Bloco de notas;
        • Word Pad;
        • Notepad++;
        • Gedit (Linux);
        • Entre outros;
      • Um navegador Web
        • Firefox, IE, Chrome...
  • 8. Introdução ao HTML
    • Como salvar um documento HTML?
      • Todo documento HTML deverá ser salvo com a extensão .htm ou .html;
  • 9. Introdução ao 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:
    <html> <body> <h1> Título da página </h1> <h2> Subtítulo </h2> <h3> Subtítulo do subtítulo </h3> </body> </html>
  • 10. Introdução ao HTML
    • Tag de Parágrafo
      • É definida através das tags <p> e </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> </body> </html>
  • 11. Introdução ao HTML
    • Tag de Link
      • É definida através das tags <a> e </a> ;
      • Exemplos:
    <html> <body> <a href=” http://www .sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html>
  • 12. Introdução ao HTML
    • Tag de Imagem
      • É definida através das tag <img> ;
      • Exemplos:
    <html> <body> <img src=”bandeira.jpg” width=”104” height=”142” /> </body> </html>
  • 13. Introdução ao 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);
    <html> <body> <a href=” http://www .sportrecife.com.br”> Ir para o site do Sport Club do Recife </a> </body> </html> Um elemento HTML
  • 14. Introdução ao 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);
  • 15. Introdução ao HTML
    • Aninhamento de elementos HTML
      • Alguns elementos HTML podem ser aninhados, isto é, podemos inserir elementos HTML como conteúdo de outros elementos;
    <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>
  • 16. Introdução ao 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;
  • 17. Introdução ao HTML
    • Exemplo de atributo HTML
      • Links HTML são definidos pela tag <a> . O endereço do link é especificado pelo atributo href ;
    <html> <body> <a href=” http://www .sportrecife.com.br” > Ir para o site do Sport Club do Recife </a> </body> </html>
  • 18. Introdução ao HTML
    • Linhas HTML
      • A tag <hr/> cria uma linha horizontal em uma página HTML, podendo ser usada para separar conteúdo;
      • Exemplo:
    <html> <body> <p> Sport Club do Recife </p> <hr/> <p> Campeão de 87!!! </p> </body> </html>
  • 19. Introdução ao 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;
    <html> <body> <!-- Isto é um comentário --> <p>Parágrafo</p> </body> </html>
  • 20. Introdução ao HTML
    • Quebras de Linha HTML
      • Use a tag <br/> caso deseje pular uma linha em um documento HTML;
      • Exemplo:
    <html> <body> Parágrafo <br/> Parágrafo </body> </html>