SlideShare una empresa de Scribd logo
1 de 23
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

Más contenido relacionado

La actualidad más candente (20)

Aula 01 word
Aula 01 wordAula 01 word
Aula 01 word
 
Aula 13 web
Aula 13 webAula 13 web
Aula 13 web
 
Aula 04 word
Aula 04 wordAula 04 word
Aula 04 word
 
Aula 7 word
Aula 7  wordAula 7  word
Aula 7 word
 
Aula 08 word
Aula 08  wordAula 08  word
Aula 08 word
 
Aula 4 web
Aula 4 webAula 4 web
Aula 4 web
 
Aula 15 web
Aula 15 webAula 15 web
Aula 15 web
 
Aula 7 web
Aula 7 webAula 7 web
Aula 7 web
 
Aula 03 word
Aula 03 wordAula 03 word
Aula 03 word
 
Aula 10 word
Aula 10 wordAula 10 word
Aula 10 word
 
Aula 12 word
Aula 12  wordAula 12  word
Aula 12 word
 
Aula 6 word
Aula 6 wordAula 6 word
Aula 6 word
 
Aula 13 formulário
Aula 13 formulárioAula 13 formulário
Aula 13 formulário
 
Aula 09 word
Aula 09  wordAula 09  word
Aula 09 word
 
Aula 1 web
Aula 1 webAula 1 web
Aula 1 web
 
Aula 14 curriculum word
Aula 14 curriculum wordAula 14 curriculum word
Aula 14 curriculum word
 
Aula 5 word
Aula 5   wordAula 5   word
Aula 5 word
 
Aula 11 word
Aula 11  wordAula 11  word
Aula 11 word
 
Aula 3 excel
Aula 3 excelAula 3 excel
Aula 3 excel
 
Aula 1 dreamweavernova
Aula 1  dreamweavernovaAula 1  dreamweavernova
Aula 1 dreamweavernova
 

Destacado

Aula de Ambiente Web - 03 - Cedaspy
Aula de Ambiente Web - 03 - CedaspyAula de Ambiente Web - 03 - Cedaspy
Aula de Ambiente Web - 03 - CedaspyWillian Profe
 
Aula de Ambiente Web - 05-06 - Cedaspy
Aula de Ambiente Web - 05-06 - CedaspyAula de Ambiente Web - 05-06 - Cedaspy
Aula de Ambiente Web - 05-06 - CedaspyWillian Profe
 
Aula de Ambiente Web - 07 - Cedaspy
Aula de Ambiente Web - 07 - CedaspyAula de Ambiente Web - 07 - Cedaspy
Aula de Ambiente Web - 07 - CedaspyWillian Profe
 
Aula de Ambiente Web - 07-08 - Cedaspy
Aula de Ambiente Web - 07-08 - CedaspyAula de Ambiente Web - 07-08 - Cedaspy
Aula de Ambiente Web - 07-08 - CedaspyWillian Profe
 
Aula de Ambiente Web - 02 - Cedaspy
Aula de Ambiente Web - 02 - CedaspyAula de Ambiente Web - 02 - Cedaspy
Aula de Ambiente Web - 02 - CedaspyWillian Profe
 
Producao de documentos - aula 01
Producao de documentos - aula 01Producao de documentos - aula 01
Producao de documentos - aula 01Katia Rocha
 

Destacado (16)

Aula 3 web
Aula 3 webAula 3 web
Aula 3 web
 
Atividade aula 4
Atividade aula 4Atividade aula 4
Atividade aula 4
 
Projeto final
Projeto finalProjeto final
Projeto final
 
Aula de Ambiente Web - 03 - Cedaspy
Aula de Ambiente Web - 03 - CedaspyAula de Ambiente Web - 03 - Cedaspy
Aula de Ambiente Web - 03 - Cedaspy
 
Aula de Ambiente Web - 05-06 - Cedaspy
Aula de Ambiente Web - 05-06 - CedaspyAula de Ambiente Web - 05-06 - Cedaspy
Aula de Ambiente Web - 05-06 - Cedaspy
 
Aula de Ambiente Web - 07 - Cedaspy
Aula de Ambiente Web - 07 - CedaspyAula de Ambiente Web - 07 - Cedaspy
Aula de Ambiente Web - 07 - Cedaspy
 
Aula 07
Aula 07Aula 07
Aula 07
 
Pirataria
PiratariaPirataria
Pirataria
 
Ambiente web aula 03
Ambiente web   aula 03Ambiente web   aula 03
Ambiente web aula 03
 
Aula de Ambiente Web - 07-08 - Cedaspy
Aula de Ambiente Web - 07-08 - CedaspyAula de Ambiente Web - 07-08 - Cedaspy
Aula de Ambiente Web - 07-08 - Cedaspy
 
Ambiente web aula 10
Ambiente web   aula 10Ambiente web   aula 10
Ambiente web aula 10
 
Aula de Ambiente Web - 02 - Cedaspy
Aula de Ambiente Web - 02 - CedaspyAula de Ambiente Web - 02 - Cedaspy
Aula de Ambiente Web - 02 - Cedaspy
 
Ambiente web
Ambiente webAmbiente web
Ambiente web
 
Ambiente web aula 02
Ambiente web   aula 02Ambiente web   aula 02
Ambiente web aula 02
 
Ambiente web aula 01
Ambiente web   aula 01Ambiente web   aula 01
Ambiente web aula 01
 
Producao de documentos - aula 01
Producao de documentos - aula 01Producao de documentos - aula 01
Producao de documentos - aula 01
 

Similar a Aula 2 web (17)

Aula 12 word
Aula 12  wordAula 12  word
Aula 12 word
 
Aula 1 dreamweavernova
Aula 1  dreamweavernovaAula 1  dreamweavernova
Aula 1 dreamweavernova
 
Aula 1 dreamweavernova
Aula 1  dreamweavernovaAula 1  dreamweavernova
Aula 1 dreamweavernova
 
Aula 15 so
Aula 15 soAula 15 so
Aula 15 so
 
Aula 2 so
Aula 2 soAula 2 so
Aula 2 so
 
Aula 3 so
Aula 3 soAula 3 so
Aula 3 so
 
Aula 6 so
Aula 6 soAula 6 so
Aula 6 so
 
Aula 9 so
Aula 9 soAula 9 so
Aula 9 so
 
Aula 14 so
Aula 14 soAula 14 so
Aula 14 so
 
Aula 1 atualizada
Aula 1 atualizadaAula 1 atualizada
Aula 1 atualizada
 
Aula 3 excel
Aula 3 excelAula 3 excel
Aula 3 excel
 
Aula 11 so
Aula 11 soAula 11 so
Aula 11 so
 
Aula 1 excel
Aula 1 excelAula 1 excel
Aula 1 excel
 
Aula 10 web
Aula 10 webAula 10 web
Aula 10 web
 
Aula 01
Aula 01Aula 01
Aula 01
 
Aula 7 excel
Aula 7 excelAula 7 excel
Aula 7 excel
 
Aula 4 so
Aula 4 soAula 4 so
Aula 4 so
 

Más de Elielso Dias

Slides professores
Slides professoresSlides professores
Slides professoresElielso Dias
 
Atividade de sites
Atividade de sitesAtividade de sites
Atividade de sitesElielso Dias
 
Nota final projeto
Nota final projetoNota final projeto
Nota final projetoElielso Dias
 
Redes socias 12 pinterest
Redes socias 12 pinterestRedes socias 12 pinterest
Redes socias 12 pinterestElielso Dias
 
Aula 12 corel flyers x folders
Aula 12 corel flyers x foldersAula 12 corel flyers x folders
Aula 12 corel flyers x foldersElielso Dias
 
Aula 11 criar banner e botões para web
Aula 11 criar banner e botões para webAula 11 criar banner e botões para web
Aula 11 criar banner e botões para webElielso Dias
 
Aula 10 corel comunicação visual
Aula 10 corel comunicação visualAula 10 corel comunicação visual
Aula 10 corel comunicação visualElielso Dias
 
Aula 09 criando letras
Aula 09 criando letrasAula 09 criando letras
Aula 09 criando letrasElielso Dias
 
Aula 3 redes sociais twitter
Aula 3 redes sociais  twitterAula 3 redes sociais  twitter
Aula 3 redes sociais twitterElielso Dias
 
Aula 1 redes sociais
Aula 1 redes sociaisAula 1 redes sociais
Aula 1 redes sociaisElielso Dias
 
Aula 2 nova 2015 tcp
Aula 2 nova 2015 tcpAula 2 nova 2015 tcp
Aula 2 nova 2015 tcpElielso Dias
 
Aula 4 marketing pessoal e inglês
Aula 4   marketing pessoal e inglêsAula 4   marketing pessoal e inglês
Aula 4 marketing pessoal e inglêsElielso Dias
 
Aula 1 nova 2015 tcp
Aula 1 nova 2015 tcpAula 1 nova 2015 tcp
Aula 1 nova 2015 tcpElielso Dias
 

Más de Elielso Dias (20)

Slides professores
Slides professoresSlides professores
Slides professores
 
Atividade de sites
Atividade de sitesAtividade de sites
Atividade de sites
 
Projeto final
Projeto finalProjeto final
Projeto final
 
Projeto final
Projeto finalProjeto final
Projeto final
 
Nota final projeto
Nota final projetoNota final projeto
Nota final projeto
 
Filme confiar
Filme confiarFilme confiar
Filme confiar
 
Redes socias 12 pinterest
Redes socias 12 pinterestRedes socias 12 pinterest
Redes socias 12 pinterest
 
Estagio
EstagioEstagio
Estagio
 
Aula 12 corel flyers x folders
Aula 12 corel flyers x foldersAula 12 corel flyers x folders
Aula 12 corel flyers x folders
 
Aula 11 criar banner e botões para web
Aula 11 criar banner e botões para webAula 11 criar banner e botões para web
Aula 11 criar banner e botões para web
 
Aula 10 corel comunicação visual
Aula 10 corel comunicação visualAula 10 corel comunicação visual
Aula 10 corel comunicação visual
 
Aula 09 criando letras
Aula 09 criando letrasAula 09 criando letras
Aula 09 criando letras
 
Aula 8 corel
Aula 8 corelAula 8 corel
Aula 8 corel
 
Aula 3 redes sociais twitter
Aula 3 redes sociais  twitterAula 3 redes sociais  twitter
Aula 3 redes sociais twitter
 
Aula 1 redes sociais
Aula 1 redes sociaisAula 1 redes sociais
Aula 1 redes sociais
 
Redes sociais 01
Redes sociais 01Redes sociais 01
Redes sociais 01
 
Aula 2 nova 2015 tcp
Aula 2 nova 2015 tcpAula 2 nova 2015 tcp
Aula 2 nova 2015 tcp
 
Aula 4 marketing pessoal e inglês
Aula 4   marketing pessoal e inglêsAula 4   marketing pessoal e inglês
Aula 4 marketing pessoal e inglês
 
Aula 1 nova 2015 tcp
Aula 1 nova 2015 tcpAula 1 nova 2015 tcp
Aula 1 nova 2015 tcp
 
Projeto final 1
Projeto final 1Projeto final 1
Projeto final 1
 

Último

Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticash5kpmr7w7
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxMarcosLemes28
 
Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasrfmbrandao
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...azulassessoria9
 
Slides 9º ano 2024.pptx- Geografia - exercicios
Slides 9º ano 2024.pptx- Geografia - exerciciosSlides 9º ano 2024.pptx- Geografia - exercicios
Slides 9º ano 2024.pptx- Geografia - exerciciosGentil Eronides
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptxJssicaCassiano2
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º anoRachel Facundo
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptssuser2b53fe
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxFlviaGomes64
 
Falando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introdFalando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introdLeonardoDeOliveiraLu2
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...marcelafinkler
 
Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)Centro Jacques Delors
 
Caderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdfCaderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdfJuliana Barbosa
 
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...SileideDaSilvaNascim
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do séculoBiblioteca UCS
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxMarcosLemes28
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxTailsonSantos1
 
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdfMESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdfprofesfrancleite
 
Quiz | Dia da Europa 2024 (comemoração)
Quiz | Dia da Europa 2024  (comemoração)Quiz | Dia da Europa 2024  (comemoração)
Quiz | Dia da Europa 2024 (comemoração)Centro Jacques Delors
 

Último (20)

Slide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemáticaSlide - SAEB. língua portuguesa e matemática
Slide - SAEB. língua portuguesa e matemática
 
Educação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptxEducação Financeira - Cartão de crédito665933.pptx
Educação Financeira - Cartão de crédito665933.pptx
 
Sistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturasSistema articular aula 4 (1).pdf articulações e junturas
Sistema articular aula 4 (1).pdf articulações e junturas
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
 
Slides 9º ano 2024.pptx- Geografia - exercicios
Slides 9º ano 2024.pptx- Geografia - exerciciosSlides 9º ano 2024.pptx- Geografia - exercicios
Slides 9º ano 2024.pptx- Geografia - exercicios
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º ano
 
aula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.pptaula de bioquímica bioquímica dos carboidratos.ppt
aula de bioquímica bioquímica dos carboidratos.ppt
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
Falando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introdFalando de Física Quântica apresentação introd
Falando de Física Quântica apresentação introd
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)Sopa de letras | Dia da Europa 2024 (nível 1)
Sopa de letras | Dia da Europa 2024 (nível 1)
 
Caderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdfCaderno de exercícios Revisão para o ENEM (1).pdf
Caderno de exercícios Revisão para o ENEM (1).pdf
 
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...apostila filosofia 1 ano  1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
apostila filosofia 1 ano 1s (1).pdf 1 ANO DO ENSINO MEDIO . CONCEITOSE CARAC...
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do século
 
Novena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João EudesNovena de Pentecostes com textos de São João Eudes
Novena de Pentecostes com textos de São João Eudes
 
Cartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptxCartão de crédito e fatura do cartão.pptx
Cartão de crédito e fatura do cartão.pptx
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdfMESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
MESTRES DA CULTURA DE ASSARÉ Prof. Francisco Leite.pdf
 
Quiz | Dia da Europa 2024 (comemoração)
Quiz | Dia da Europa 2024  (comemoração)Quiz | Dia da Europa 2024  (comemoração)
Quiz | Dia da Europa 2024 (comemoração)
 

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