SlideShare uma empresa Scribd logo
Introdução a Linguagem HTML:
 Conceitos Básicos e Estrutura
     Prof. André Constantino da Silva
    Prof. Rodolfo Francisco de Oliveira
                   IAM
            1 semestre de 2012


              12 de março de 2012
Aula de Hoje
• Como escrevo uma página para a internet?

• Estrutura básica de um documento HTML

• Conceitos

• Algumas formatações em HTML
HTML, onde está?
Tudo na WWW tem HTML?
1.   Abrir o Firefox
2.   Entrar em um site (digitar URL e teclar enter)
3.   Clicar com o botão direito
4.   Clicar na opção Código-fonte
5.   Irá abrir uma janela com o código HTML

• Faça esses passos em mais dois sites
O que está acontecendo?




      Navegador
Contando as Palavras
• Ver o código-fonte do site www.folha.com.br
• Verificar quantas vezes as palavras aparecem:
   N.    Palavra    Repetições        N.   Palavra    Repetições
   1     <html>                       7    <h1>
   2     </html>                      8    </h1>
   3     <body>                       9    <h2>
   4     </body>                      10   </h2>
   5     <title>                      11   <h3>
   6     </title>                     12   </h3>


• Dica: pressione CTRL+F para o navegador exibir os campos de busca
Um Exemplo de HTML
• Abrir o Bloco de Notas e digitar o seguinte texto:
      <html>
             <head>
             </head>
             <body>
                   Olá!
                   Este é um exemplo de código HTML.
             <body>
      </html>
• Salvar na pasta htdocs com o nome exemplo1.html
• No Firefox, digitar:
              http://localhost/~seulogin/exemplo1.html
• O que aparece?
O que aconteceu com as palavras?
• <html>, </html>, <head>, </head>, <body>,
  </body> são palavras chamadas tags

• Uma tag é um comando (instrução) de
  formatação
  – Não são exibidas pelo navegador

• Sempre são escritas entre < >
• Possuem seu respectivo elemento de fechamento
  </ >
Conceitos - Tag
<html>
  <head>
  </head>
  <body>
     Olá!
     Este é um <b>exemplo de código HTML.</b>
  <body>
</html>
Um Exemplo de HTML
• Modificar o texto para:
     <html>
              <head>
              </head>
              <body>
                     <b>Olá!</b>
                     Este é um exemplo de código HTML.
              <body>
       </html>

• Salvar
• No Firefox, clicar no botão atualizar (refresh)
• O que acontece?
Um Exemplo de HTML
• Modificar o texto para:
     <html>
               <head>
               </head>
               <body>
                      Olá!
                      Este é um <b>exemplo de código HTML.</b>
               <body>
        </html>

•   Alterar a posição de <b> e </b> para ver o resultado
•   Salvar
•   No Firefox, clicar no botão atualizar (refresh)
•   O que acontece?
A Tag <b>
• <b> indica ao navegador para escrever em
  negrito

• </b> indica onde deve-se terminar de aplicar a
  formatação de negrito
Conceitos
• HTML: HyperText Markup Language
  – Tradução: Linguagem de Marcação de Hipertexto
  – Usado para produzir páginas na Web


• Tag: uma marcação, um comando de
  formatação
  – Escrito usando <>
  – Fechamento </>
Estrutura básica
<html>          Indica que este
            documento possui uma
            estrutura HTML que se
                  inicia aqui




</html>
             E termina aqui
Estrutura básica
<html>
                    O cabeçalho (head ) é
  <head>        elemento fundamental de um
  </head>       documento HTML. O propósito
                  é apresentar informações
                    gerais sobre a página.



</html>
Estrutura básica
<html>
  <head>
  </head>
                 O corpo (body) é outro
  <body>
                elemento fundamental. O
                   conteúdo dentro de
                <body> será exibido pelo
  <body>               navegador.
</html>
Estrutura básica
<html>
  <head>
  </head>
  <body>           Conteúdo
     Olá!
     Este é um <b>exemplo de código HTML.</b>
  <body>
</html>
A Tag <title>
• Modificar o texto para:
     <html>
               <head>
                      <title>Exemplo de documento HTML</title>
               </head>
               <body>
                      Olá!
                      Este é um <b>exemplo de código HTML.</b>
               <body>
         </html>
•   Alterar a posição de <b> e </b> para ver o resultado
•   Salvar
•   No Firefox, clicar no botão atualizar (refresh)
•   O que acontece?
A Tag <title>




Sem <title>           Com <title>
As Tags <i>, <u> e <s>
• <i> exibe o texto em itálico
• <u> exibe o texto sublinhado
• <s> exibe o texto riscado

Vamos testar?
As Tags <i>, <u> e <s>
• Modificar seu documento HTML para:
     <html>
              <head>
                       <title>Exemplo de documento HTML</title>
               </head>
               <body>
                       Olá!
                       Este é um <b>exemplo de código HTML.</b>
                       Em HTML indicamos formatação através de
      tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>,
      <u>sublinhado</u> e <s>riscado</s>.
               <body>
      </html>
• O que acontece?
Fechamento de Tags
• E se eu esquecer de fechar uma tag?
Tarefa para Casa
• Com as tags aprendidas hoje, faça uma página
  HTML sobre você com as seguintes
  informações:
  – Seu nome e de sua família (pais, irmãos)
  – O que você gosta de fazer
  – O que você não gosta de fazer
  – Música, filme ou comida favoritos

Mais conteúdo relacionado

Mais procurados

Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Html Básico
Html BásicoHtml Básico
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Introdução CSS
Introdução CSSIntrodução CSS
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
Centro Paula Souza
 
JAVA - Orientação a Objetos
JAVA - Orientação a ObjetosJAVA - Orientação a Objetos
JAVA - Orientação a Objetos
Elaine Cecília Gatto
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetos
Cleyton Ferrari
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Aprendendo a Usar o Netbeans
Aprendendo a Usar o NetbeansAprendendo a Usar o Netbeans
Aprendendo a Usar o Netbeans
Tiago Antônio da Silva
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
Jorge Ávila Miranda
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
Fabio Moura Pereira
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
Daniel Brandão
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
Centro Paula Souza
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 

Mais procurados (20)

Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
JAVA - Orientação a Objetos
JAVA - Orientação a ObjetosJAVA - Orientação a Objetos
JAVA - Orientação a Objetos
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetos
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Aprendendo a Usar o Netbeans
Aprendendo a Usar o NetbeansAprendendo a Usar o Netbeans
Aprendendo a Usar o Netbeans
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 

Destaque

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Tic 10º Ano - Apresentação
Tic 10º Ano - ApresentaçãoTic 10º Ano - Apresentação
Tic 10º Ano - Apresentação
João Torres
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Alamo Saravali
 
Apostila html para-iniciantes
Apostila html para-iniciantesApostila html para-iniciantes
Apostila html para-iniciantes
Jeferson Souza
 
Html
HtmlHtml
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passos
Jeser Cotrim
 
HTML
HTMLHTML
HTML
dotTEC
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
André Constantino da Silva
 
Ementas_curso_de_licenciatura_em_letras
Ementas_curso_de_licenciatura_em_letrasEmentas_curso_de_licenciatura_em_letras
Ementas_curso_de_licenciatura_em_letras
Pedro0123456
 
A origem da Linguagem
A origem da LinguagemA origem da Linguagem
A origem da Linguagem
Jéssica Camila
 
HTML
HTMLHTML
Apresentacao tic profissionais
Apresentacao tic profissionaisApresentacao tic profissionais
Apresentacao tic profissionais
Vanda Pereira
 
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
escolaprofissionalsm
 
Historia de html
Historia de htmlHistoria de html
Historia de html
yulexivargas
 
Linguagem
LinguagemLinguagem
Linguagem
Simone Everton
 
Tic
TicTic
Planode Aula
Planode AulaPlanode Aula
Planode Aula
softeam
 
Exemplos Aula4
Exemplos Aula4Exemplos Aula4
Exemplos Aula4
softeam
 
Códigos da Aula3
Códigos da Aula3Códigos da Aula3
Códigos da Aula3softeam
 

Destaque (20)

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Tic 10º Ano - Apresentação
Tic 10º Ano - ApresentaçãoTic 10º Ano - Apresentação
Tic 10º Ano - Apresentação
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
Apostila html para-iniciantes
Apostila html para-iniciantesApostila html para-iniciantes
Apostila html para-iniciantes
 
Html
HtmlHtml
Html
 
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passos
 
HTML
HTMLHTML
HTML
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
 
Ementas_curso_de_licenciatura_em_letras
Ementas_curso_de_licenciatura_em_letrasEmentas_curso_de_licenciatura_em_letras
Ementas_curso_de_licenciatura_em_letras
 
A origem da Linguagem
A origem da LinguagemA origem da Linguagem
A origem da Linguagem
 
HTML
HTMLHTML
HTML
 
Apresentacao tic profissionais
Apresentacao tic profissionaisApresentacao tic profissionais
Apresentacao tic profissionais
 
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
 
Historia de html
Historia de htmlHistoria de html
Historia de html
 
Linguagem
LinguagemLinguagem
Linguagem
 
Tic
TicTic
Tic
 
Planode Aula
Planode AulaPlanode Aula
Planode Aula
 
Exemplos Aula4
Exemplos Aula4Exemplos Aula4
Exemplos Aula4
 
Códigos da Aula3
Códigos da Aula3Códigos da Aula3
Códigos da Aula3
 

Semelhante a Aula 2 – Introdução a HTML - conceitos básicos e estrutura

Ambiente web
Ambiente webAmbiente web
Ambiente web
Washington Oliveira
 
Sistemas operacionais html 09
Sistemas operacionais html 09Sistemas operacionais html 09
Sistemas operacionais html 09
Washington Oliveira
 
Sistemas operacionais html
Sistemas operacionais html Sistemas operacionais html
Sistemas operacionais html
Washington Oliveira
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
Washington Oliveira
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Sliedesharessbarbosa
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
Centro Paula Souza
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
ssusercbd9c4
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Cravid Ekuikui
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
Tiago
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
Geomar matias
 
Web design
Web designWeb design
Web design
Zito Bongo
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
André Constantino da Silva
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
mario_venancio
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
mvcbotelho
 
Html
HtmlHtml
HTML- conceitos. pptx
HTML- conceitos.                    pptxHTML- conceitos.                    pptx
HTML- conceitos. pptx
TomasSousa7
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 

Semelhante a Aula 2 – Introdução a HTML - conceitos básicos e estrutura (20)

Ambiente web
Ambiente webAmbiente web
Ambiente web
 
Sistemas operacionais html 09
Sistemas operacionais html 09Sistemas operacionais html 09
Sistemas operacionais html 09
 
Sistemas operacionais html
Sistemas operacionais html Sistemas operacionais html
Sistemas operacionais html
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
 
Web design
Web designWeb design
Web design
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
Html
HtmlHtml
Html
 
HTML- conceitos. pptx
HTML- conceitos.                    pptxHTML- conceitos.                    pptx
HTML- conceitos. pptx
 
Html completo
Html completoHtml completo
Html completo
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Mais de André Constantino da Silva

Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
André Constantino da Silva
 
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
André Constantino da Silva
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
André Constantino da Silva
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
André Constantino da Silva
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
André Constantino da Silva
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
André Constantino da Silva
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
André Constantino da Silva
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
André Constantino da Silva
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
André Constantino da Silva
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
André Constantino da Silva
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
André Constantino da Silva
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
André Constantino da Silva
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
André Constantino da Silva
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
André Constantino da Silva
 
Aula 3
Aula 3Aula 3
Aula 2 final
Aula 2 finalAula 2 final
Aula 1 final
Aula 1 finalAula 1 final
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
André Constantino da Silva
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
André Constantino da Silva
 

Mais de André Constantino da Silva (20)

Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
 
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
 
Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
 
Aula 2 - A área de IHC
Aula 2 - A área de IHCAula 2 - A área de IHC
Aula 2 - A área de IHC
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula 2 final
Aula 2 finalAula 2 final
Aula 2 final
 
Aula 1 final
Aula 1 finalAula 1 final
Aula 1 final
 
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
 

Último

UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
Manuais Formação
 
As sequências didáticas: práticas educativas
As sequências didáticas: práticas educativasAs sequências didáticas: práticas educativas
As sequências didáticas: práticas educativas
rloureiro1
 
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdfMAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
GracinhaSantos6
 
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdf
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdfAula Aberta_Avaliação Digital no ensino basico e secundário.pdf
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdf
Marília Pacheco
 
Vivendo a Arquitetura Salesforce - 02.pptx
Vivendo a Arquitetura Salesforce - 02.pptxVivendo a Arquitetura Salesforce - 02.pptx
Vivendo a Arquitetura Salesforce - 02.pptx
Mauricio Alexandre Silva
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
ProfessoraTatianaT
 
Cartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptxCartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptx
Zenir Carmen Bez Trombeta
 
Roteiro para análise do Livro Didático.pptx
Roteiro para análise do Livro Didático.pptxRoteiro para análise do Livro Didático.pptx
Roteiro para análise do Livro Didático.pptx
pamellaaraujo10
 
planejamento maternal 2 atualizado.pdf e
planejamento maternal 2 atualizado.pdf eplanejamento maternal 2 atualizado.pdf e
planejamento maternal 2 atualizado.pdf e
HelenStefany
 
Aula04A-Potencia em CA eletricidade USP.pdf
Aula04A-Potencia em CA eletricidade USP.pdfAula04A-Potencia em CA eletricidade USP.pdf
Aula04A-Potencia em CA eletricidade USP.pdf
vitorreissouzasilva
 
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
samucajaime015
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
beatrizsilva525654
 
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdfO Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
silvamelosilva300
 
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃOAUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
FernandaOliveira758273
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
joaresmonte3
 
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
fran0410
 
Aula 1 - Ordem Mundial Aula de Geografia
Aula 1 - Ordem Mundial Aula de GeografiaAula 1 - Ordem Mundial Aula de Geografia
Aula 1 - Ordem Mundial Aula de Geografia
WELTONROBERTOFREITAS
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
Manuais Formação
 
Loteria - Adição, subtração, multiplicação e divisão.
Loteria - Adição,  subtração,  multiplicação e divisão.Loteria - Adição,  subtração,  multiplicação e divisão.
Loteria - Adição, subtração, multiplicação e divisão.
Mary Alvarenga
 
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptxSlides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
LuizHenriquedeAlmeid6
 

Último (20)

UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
UFCD_7211_Os sistemas do corpo humano_ imunitário, circulatório, respiratório...
 
As sequências didáticas: práticas educativas
As sequências didáticas: práticas educativasAs sequências didáticas: práticas educativas
As sequências didáticas: práticas educativas
 
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdfMAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
MAPAS MENTAIS Conhecimentos Pedagógicos - ATUALIZADO 2024 PROF. Fernanda.pdf
 
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdf
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdfAula Aberta_Avaliação Digital no ensino basico e secundário.pdf
Aula Aberta_Avaliação Digital no ensino basico e secundário.pdf
 
Vivendo a Arquitetura Salesforce - 02.pptx
Vivendo a Arquitetura Salesforce - 02.pptxVivendo a Arquitetura Salesforce - 02.pptx
Vivendo a Arquitetura Salesforce - 02.pptx
 
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGTUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
TUTORIAL PARA LANÇAMENTOGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
 
Cartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptxCartinhas de solidariedade e esperança.pptx
Cartinhas de solidariedade e esperança.pptx
 
Roteiro para análise do Livro Didático.pptx
Roteiro para análise do Livro Didático.pptxRoteiro para análise do Livro Didático.pptx
Roteiro para análise do Livro Didático.pptx
 
planejamento maternal 2 atualizado.pdf e
planejamento maternal 2 atualizado.pdf eplanejamento maternal 2 atualizado.pdf e
planejamento maternal 2 atualizado.pdf e
 
Aula04A-Potencia em CA eletricidade USP.pdf
Aula04A-Potencia em CA eletricidade USP.pdfAula04A-Potencia em CA eletricidade USP.pdf
Aula04A-Potencia em CA eletricidade USP.pdf
 
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
Aula de fundamentos de Programação Orientada a Objeto na linguagem de program...
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
 
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdfO Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
 
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃOAUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
AUTISMO LEGAL - DIREITOS DOS AUTISTAS- LEGISLAÇÃO
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
 
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
Telepsiquismo Utilize seu poder extrassensorial para atrair prosperidade (Jos...
 
Aula 1 - Ordem Mundial Aula de Geografia
Aula 1 - Ordem Mundial Aula de GeografiaAula 1 - Ordem Mundial Aula de Geografia
Aula 1 - Ordem Mundial Aula de Geografia
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
 
Loteria - Adição, subtração, multiplicação e divisão.
Loteria - Adição,  subtração,  multiplicação e divisão.Loteria - Adição,  subtração,  multiplicação e divisão.
Loteria - Adição, subtração, multiplicação e divisão.
 
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptxSlides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
 

Aula 2 – Introdução a HTML - conceitos básicos e estrutura

  • 1. Introdução a Linguagem HTML: Conceitos Básicos e Estrutura Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
  • 2. Aula de Hoje • Como escrevo uma página para a internet? • Estrutura básica de um documento HTML • Conceitos • Algumas formatações em HTML
  • 4. Tudo na WWW tem HTML? 1. Abrir o Firefox 2. Entrar em um site (digitar URL e teclar enter) 3. Clicar com o botão direito 4. Clicar na opção Código-fonte 5. Irá abrir uma janela com o código HTML • Faça esses passos em mais dois sites
  • 5. O que está acontecendo? Navegador
  • 6. Contando as Palavras • Ver o código-fonte do site www.folha.com.br • Verificar quantas vezes as palavras aparecem: N. Palavra Repetições N. Palavra Repetições 1 <html> 7 <h1> 2 </html> 8 </h1> 3 <body> 9 <h2> 4 </body> 10 </h2> 5 <title> 11 <h3> 6 </title> 12 </h3> • Dica: pressione CTRL+F para o navegador exibir os campos de busca
  • 7. Um Exemplo de HTML • Abrir o Bloco de Notas e digitar o seguinte texto: <html> <head> </head> <body> Olá! Este é um exemplo de código HTML. <body> </html> • Salvar na pasta htdocs com o nome exemplo1.html • No Firefox, digitar: http://localhost/~seulogin/exemplo1.html • O que aparece?
  • 8. O que aconteceu com as palavras? • <html>, </html>, <head>, </head>, <body>, </body> são palavras chamadas tags • Uma tag é um comando (instrução) de formatação – Não são exibidas pelo navegador • Sempre são escritas entre < > • Possuem seu respectivo elemento de fechamento </ >
  • 9. Conceitos - Tag <html> <head> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>
  • 10. Um Exemplo de HTML • Modificar o texto para: <html> <head> </head> <body> <b>Olá!</b> Este é um exemplo de código HTML. <body> </html> • Salvar • No Firefox, clicar no botão atualizar (refresh) • O que acontece?
  • 11. Um Exemplo de HTML • Modificar o texto para: <html> <head> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html> • Alterar a posição de <b> e </b> para ver o resultado • Salvar • No Firefox, clicar no botão atualizar (refresh) • O que acontece?
  • 12. A Tag <b> • <b> indica ao navegador para escrever em negrito • </b> indica onde deve-se terminar de aplicar a formatação de negrito
  • 13. Conceitos • HTML: HyperText Markup Language – Tradução: Linguagem de Marcação de Hipertexto – Usado para produzir páginas na Web • Tag: uma marcação, um comando de formatação – Escrito usando <> – Fechamento </>
  • 14. Estrutura básica <html> Indica que este documento possui uma estrutura HTML que se inicia aqui </html> E termina aqui
  • 15. Estrutura básica <html> O cabeçalho (head ) é <head> elemento fundamental de um </head> documento HTML. O propósito é apresentar informações gerais sobre a página. </html>
  • 16. Estrutura básica <html> <head> </head> O corpo (body) é outro <body> elemento fundamental. O conteúdo dentro de <body> será exibido pelo <body> navegador. </html>
  • 17. Estrutura básica <html> <head> </head> <body> Conteúdo Olá! Este é um <b>exemplo de código HTML.</b> <body> </html>
  • 18. A Tag <title> • Modificar o texto para: <html> <head> <title>Exemplo de documento HTML</title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> <body> </html> • Alterar a posição de <b> e </b> para ver o resultado • Salvar • No Firefox, clicar no botão atualizar (refresh) • O que acontece?
  • 19. A Tag <title> Sem <title> Com <title>
  • 20. As Tags <i>, <u> e <s> • <i> exibe o texto em itálico • <u> exibe o texto sublinhado • <s> exibe o texto riscado Vamos testar?
  • 21. As Tags <i>, <u> e <s> • Modificar seu documento HTML para: <html> <head> <title>Exemplo de documento HTML</title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. <body> </html> • O que acontece?
  • 22. Fechamento de Tags • E se eu esquecer de fechar uma tag?
  • 23. Tarefa para Casa • Com as tags aprendidas hoje, faça uma página HTML sobre você com as seguintes informações: – Seu nome e de sua família (pais, irmãos) – O que você gosta de fazer – O que você não gosta de fazer – Música, filme ou comida favoritos