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
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.
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
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.
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
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.
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.
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.
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.
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.
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>
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>
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.
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>
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.
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
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
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.
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>
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>
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">
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?
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

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 abriruma 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