Aula 2 web
Transferir como PPTX, PDF0 gostou1,580 visualizações
O documento discute a linguagem HTML: (1) HTML é usada para criar páginas da web e todos os documentos na internet são escritos nela, (2) a estrutura lógica de HTML usa tags para formatar o conteúdo, (3) o documento fornece exemplos de como usar diferentes tags HTML.
Aula 2 web
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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