Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 
xxxxxx 2 10-17 15/09/2014 
Instrutor: Ricardo Paladini Matos 
Elielso...
5- Vamos abrir uma página do Notpad++ e criar uma homepage sobre 
um assunto que o interessar. É importante que as páginas...
Próximos SlideShares
Carregando em…5
×

Aula 2 web

1.450 visualizações

Publicada em

Aula 2 Web

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Aula 2 web

  1. 1. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Benefícios  O que é linguagem de programação?  Desvendando o Hyper Text Markup Language (HTML)  Estrutura das páginas da Internet  Usando os aplicativos do Notpad ++  Dicas de comandos turmascedaspybsl@gmail.com
  2. 2. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias O que o HTML? • O HTML é uma linguagem da WWW, que significa: Hyper Text Language Markup – (Linguagem de marcação de texto). • O HTML é a linguagem padrão da internet. Todos os navegadores lêem e interpretam de forma correta o HTML.
  3. 3. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias DESVENDANDO O HYPER TEXT MARKUP LANGUAGE (HTML) Todos os documentos visualizados no navegador são escritos em HTML. A partir deles é possível utilizar os links.  Vale lembrar que todos os:  Celulares,  Câmeras digitais,  Ipods, mp3,  Vídeos games
  4. 4. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias A Linguagem é conhecida como o código fonte dos softwares.
  5. 5. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias  HTML  Java  C, C++  Python  PHP  Visual Basic  Objective C JavaScript Pert Ruby Assembly Delphi Lisp Pascal
  6. 6. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Home Page São todas as páginas que estão disponíveis na internet, também conhecida como INDEX. Vinculada através de links.
  7. 7. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Estabelece contatos entre os computadores. Através destas regras as máquinas se reconhecem e trocam informações.
  8. 8. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias FTP: O protocolo de transferência de dados. HTTP: O protocolo de transferência de hipertexto é usado para conectar as páginas de internet. TCP/IP: São os protocolos de comunicação entre os computadores em rede.
  9. 9. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias O aplicativo tem a aparência de um bloco de notas, mas tratam-se de um editor de código fonte.
  10. 10. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias O aplicativo tem a aparência de um bloco de notas, contudo trata-se de um editor de código fonte, nele o usuário pode optar por qual programação trabalhar.
  11. 11. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias <font color=“red”> Esse texto sairá em vermelho </font> Outra coisa, primeiro vem a tag e depois o atributo, sendo separados apenas por um Tag Atributo espaço simples. <FONT COLOR=“BLUE”> TEXTO 1 </FONT> <FONT SIZE=“7”> TEXTO 2</FONT> <FONT FACE=“ARIAL BLACK”> TEXTO 3</FONT>
  12. 12. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Tags: instruções que passaremos para o computador, a fim de que elas sejam descodificadas como uma página da internet posteriormente. Toda TAG é iniciada com o sinal de menor < e maior > <HTML>
  13. 13. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias <HTML> Inicio do documento <HEAD> Inicio do cabeçalho do documento <TITLE> Inicio do documento </TITLE> fim do documento <HEAD> Fim de cabeçalho do documento <BODY> Inicio do conteúdo do documento (É o corpo da página) </HTML> Fim do documento.
  14. 14. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Tamanho da fonte <h1> Titulo tamanho 01</h1> <h2> Titulo tamanho 02</h2> <h3> Titulo tamanho 03</h3> <h4> Titulo tamanho 04</h4>
  15. 15. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias <P> Inicio de um parágrafo, deixando uma linha em branco em cada parágrafo. <BR> Faz uma quebra de linha sem acrescentar espaço entre as linhas.
  16. 16. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Tag P e BR Em processadores de textos para saltarmos uma linha ou iniciar um parágrafo, basta apertarmos a tecla ENTRER. Mas, no HTML isso não basta. Para isso, devemos utilizar as Tags <P> ou <BR> TESTE 1 <BR> TESTE 2 <P> Veja como ficou
  17. 17. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias
  18. 18. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Note que o que digitamos entre as tags revelam os textos e seu espaçamento.
  19. 19. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias FUNDO NA PÁGINA <BODY BGCOLOR=“RED”> Conteúdo da página </BODY>
  20. 20. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias <BODY background=“imagem.jpg”> Conteúdo da página </BODY>
  21. 21. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias INSERINDO UMA IMAGEM <img src="Computador.jpg">
  22. 22. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Atividade 1- O que é a linguagem HTML? 2- Qual a estrutura lógica desta programação? 3- Estrutura das páginas da Internet 4- Quais os cuidados devemos tomar antes de iniciar nosso projeto?
  23. 23. 5- Vamos abrir uma página do Notpad++ e criar uma homepage sobre um assunto que o interessar. É importante que as páginas sejam salvas com a extensão HTML em uma pasta. Turma: 2503-B Aula: 10 Pág: 10 a 17 Data: 18-jan-12 xxxxxx 2 10-17 15/09/2014 Instrutor: Ricardo Paladini Matos Elielso Dias Nesta página deve conter os seguintes quesitos: A) Cabeçalho B) Parágrafo C) Fundo da página D) Imagem

×