SlideShare uma empresa Scribd logo

Desenvolvimento
Web
Com HTML, CSS e
JavaScript
Prof. Zé Maria Lehrback Filho
zmlehrback@hotmail.com
“Você precisa correr cada vez mais rápido,
apenas para continuar no mesmo lugar.”
Lewis Carroll
O Profissional de
TI
Visão
Geral
 Ao final deste curso, você será capaz
de:
 Criar páginas HTML5;
 Utilizar folhas de estilo CSS3;
 Utilizar JavaScript e o framework jQuery;
 Criar páginas com funcionalidades Ajax;
 Utilizar frameworks como o Bootstrap;
Desenvolvimento
Web
MÓDULO 01
 Pauta:
 Introdução ao Desenvolvimento Web
 Introdução à comunicação na internet
 O protocolo HTTP
 As páginas da internet
 O servidor web (Apache)
 O ambiente de desenvolvimento e nossas
ferramentas
 HTML Base
 Tags HTML
 Exercícios

A
Interne
t
 O cliente (navegador web) requisita uma página ao servidor.
 O servidor web responde a requisição com a página
requisitada e a envia ao cliente.
Cliente
(Navegador Web) Servidor Web
Armazenamento
(HD)
Armazenamento
(Banco de Dados)
Requisição
Resposta
Comunicação na
Internet
 Hypertext Transfer Protocol (HTTP) é o protocolo
utilizado para enviar e receber informações na
web.
 É baseado em requisições e respostas entre
clientes e servidores.
 Exemplo de requisição HTTP:
 GET / HTTP/1.1
 Foi criado especificamente para a World Wide
Web.
Protocolo HTTP
 Os clientes de uma conexão HTTP são os
browsers (navegadores).
 São capazes de enviar requisições em protocolo
HTTP e processar os retornos recebidos, exibindo
as páginas da web.
 Exemplos: Google Chrome, Internet Explorer,
Edge, Mozilla Firefox, Opera, etc.
Clientes
HTTP
 São serviços HTTP que disponibilizam as páginas
na Internet.
 Exemplos:
 Apache HTTP Server
 Microsoft Internet Information Services
 Nginx
Servidores
HTTP
 São codificadas em linguagem HTML
(HyperText Markup Language, que significa
Linguagem de Marcação de Hipertexto).
 Possuem ligações de hipertexto.
 São hospedadas por um servidor web.
Páginas da
Internet
Vantagen
s
Portabilidade da solução no lado do
cliente.
Facilidade de deployment.
Facilidade de manutenção,
restauração e atualização da
aplicação.
Desvantagen
s
 Número expressivo e crescente de dispositivos
diferentes com acesso a web (computação
ubíqua).
 Compatibilidade entre browsers.
 Novos desafios para a Engenharia de
Software:
 Metodologias voltadas para o desenvolvimento web.
 Computação Concorrente.
Execução no Cliente
(Browser
)
 HTML
 CSS
 Tableless

JavaScrip
t
 XML

Mas o que é
HTML?
HTML
 Hyper Text Markup Language
 Especificação definida pelo consórcio W3C: http://www.w3.org/
 Um arquivo html contém marcadores (tags)
 Estes marcadores indicam para o navegador (browser)
como a página deve ser apresentada
 Marcadores usualmente vem em pares: <tag>...</tag>
 Também podem aparecer de forma abreviada:
<tag atributo=“valor” ... />
HTML Básico
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>
Estrutura HTML
 Um documento HTML válido precisa seguir
obrigatoriamente a estrutura composta pelas tags
<html>,
<head> e <body> e a instrução <!DOCTYPE>.
Vejamos cada uma delas:
 A tag <html>
 Na estrutura do nosso documento, antes de tudo,
inserimos uma tag <html>. Dentro dessa tag, é
necessário declarar outras duas tags: <head> e <body>.
Essas duas tags são "irmãs", pois estão no mesmo nível
hierárquico em relação à sua tag "pai", que é <html>.
<html> <head></head>
<body></body> </html>
Estrutura HTML
 A tag <head>
 A tag <head> contém informações sobre nosso documento
que são de interesse somente do navegador, e não dos
visitantes do nosso site. São informações que não serão
exibidas na área do documento no navegador.
 A especificação obriga a presença da tag de conteúdo <title>
dentro do nosso <head>, permitindo especificar o título do
nosso documento, que normalmente será exibido na barra de
título da janela do navegador ou na aba do documento.
Estrutura HTML
 Configuramos qual codificação utilizar em nosso
documento por meio da configuração de charset na
tag
<meta>. Um dos valores mais comuns usados hoje em
dia é o UTF-8, também chamado de Unicode. Há outras
possibilidades, como o latin1, muito usado antigamente.
 O UTF-8 é a recomendação atual para encoding na Web
por ser amplamente suportada em navegadores e
editores de código, além de ser compatível com
praticamente todos os idiomas do mundo. É o que
usaremos no curso.
Estrutura HTML
 A tag <body>
 A tag <body> contém o corpo do nosso documento,
que é exibido pelo navegador em sua janela. É
necessário que o
<body> tenha ao menos um elemento "filho", ou seja,
uma ou mais tags HTML dentro dele.
A instrução DOCTYPE
 O DOCTYPE não é uma tag HTML, mas uma instrução
especial. Ela indica para o navegador qual versão do
HTML deve ser utilizada para renderizar a página.
Utilizaremos <!
DOCTYPE html>, que indica para o navegador a
utilização da versão mais recente do HTML - a versão 5,
atualmente.
 Usaremos:
 <!DOCTYPE html>

Principais Tags HTML
HTML - Tags
Básicas
Tag
<html>
<body>
<h1> ... <h6>
<p>
<br>
<hr>
<!-- -->
Descrição
Define um documento HTML
Define o corpo de um documento
Define cabeçalhos 1 a 6
Define um parágrafo
Insere uma quebra de linha
Define uma linha horizontal
Define um comentário
HTML - Tags de
Formatação
Tag
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
Descrição
Formata um texto em negrito
Formata um texto com fonte maior
Formata um texto com ênfase
Formata um texto em itálico
Formata um texto com fonte pequena
Formata um texto em destaque
Formata um texto subscrito
Formata um texto sobrescrito
Formata um texto sublinhado
Formata um texto anulado
HTML Entidades
Utilizadas para apresentação de
caracteres especiais em html. Ex.:
“<“
Saída Descrição
Espaço sem quebra
Nome da Entidade
&nbsp;
Número
&#160;
< Menor que &lt; &#60;
> Maior que &gt; &#62;
& E comercial &amp; &#38;
" Aspas &quot; &#34;
' Apóstrofo &apos; (não funciona no IE) &#39;
HTML Links e
Imagen
s
 <a href=“www.pucpcaldas.br”>Página PUC</a>
 Página da PUC
 <a name=“endereco”>Como Chegar</a>
 Trecho da página que informa detalhes sobre localização
 <a
href=“www.pucpcaldas.br#endereco”>
Localização</a>
 Localização
 <img src=“logo.png” alt=“Logo da PUC”/>
HTML Tabelas
<table border="1">
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>linha 1, valor 1</td>
<td>linha 1, valor 2</td>
</tr>
<tr>
<td>linha 2, valor 1</td>
<td>linha 2, valor 2</td>
</tr>
</tbody>
</table>
HTML Background e
Fonte
s
 Formas de se definir um background preto
para o
corpo da página
 <body bgcolor="#000000">
 <body bgcolor="rgb(0,0,0)">
 <body bgcolor="black">
 Definindo uma imagem de fundo
 <body background="logo.gif">
 <body background="http://www.pucpcaldas.br/bg.gif">
 Configurando uma fonte
 <font size="2" face="Verdana">Texto com fonte
específica.</font>
HTML Formulários
 HTML possibilita a criação de formulários online utilizando tags
 A tag <form> é a mais comum e permite a criação de um formulário
de entrada de dados
<body><form>
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br
/> Senha: <input type="password" name="senha">
</form></body>
HTML Formulários
 Tipos que podem ser utilizados com a tag <input type=“?”>:
 button: Insere um botão
 checkbox: Insere um checkbox; para vários itens, basta inserirmos
vários
“inputs” deste tipo
 file: Insere botão seleção de arquivo através de uma caixa de diálogo
 hidden: Campo pertencente ao formulário, mas que não será exibido
na página
 image: Insere uma imagem como um botão submit
 password: Insere um campo password (caracteres digitados não
aparecem)
 radio: Insere um radiobox (análogo ao checkbox)
 reset: Restaura os valores iniciais do formulário
 submit: Encaminha os dados inseridos para algum arquivo
 text: Insere um campo de edição de texto
HTML Formulários
 Quando algum elemento do tipo “submit” é inserido num
formulário e acionado, seus dados são enviados para um
arquivo.
 O arquivo mencionado é indicado pelo atributo “action”
do elemento <form>.
 Este arquivo deverá estar armazenado num servidor web
(Apache, Tomcat, IIS, ...), e estará escrito em alguma
linguagem de programação de servidores (server-side):
php, jsp, asp, sevlets, ...
HTML Formulários
<body>
<form method=“get” action=“processaForm.php" >
Nome: <input type="text" name="firstname"><br />
Sobrenome: <input type="text" name="lastname"><br />
Senha: <input type="password" name="senha">
<input type="submit" value="Enviar">
</form>
</body>
 URL após clicar no botão:
.../puc/processaForm.php?
firstname=Carlos&lastname=Bazilio&senha=abcdef
g
HTML
Outras tags de
Formulários
Tag Descrição
<form> Define um formulário para entrada do usuário
<input> Define um campo de entrada
<textarea> Define um campo texto com múltiplas linhas
<label> Define um label para algum controle
<fieldset> Desenha uma caixa em torno de um conjunto de elementos
<legend> Define um título para um <fieldset>
<select> Cria uma lista drop-down
<optgroup> Criar uma hierarquia nas opções de uma lista drop-down
<option> Uma opção na lista drop-down
<button> Insere um botão. Difere de <input> por poder conter algum
conteúdo, como uma imagem
HTML Listas Não
Ordenadas
 Uma lista não ordenada é uma lista de itens. As listas
de itens são marcadas com bullets (tipicamente
pequenos círculos pretos).
 Uma lista não ordenada começa com a tag <ul>. Cada
item da lista começa com a tag <li>:
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
HTML Listas
Ordenadas
 Uma lista ordenada é também uma lista de itens. As
listas de itens são marcadas com números.
 Uma lista ordenada começa com a tag <ol>. Cada item
da lista começa com a tag <li>.
 <ol>
<li>Café</li>
<li>Leite</li>
</ol>
Meta Tags HTML
 Meta Tag é um comando implementado no código
de páginas web, dentro da área Head do site
(entre as tags
<head> e </head>) para passar instruções a programas
externos ou ações mais simples, como por exemplo
informar qual a pessoa responsável pelo
desenvolvimento da página. Algumas Meta Tags são
utilizadas para passar aos
sites de busca como o Bing e o Google instruções
sobre o título da página e uma breve descriçao a ser
exibida nos resultados de busca, quais páginas
devem ou não ser indexadas, dentre outras
instruções.
Meta Tags HTML e
SEO
 Meta Tags são uma importante ferramenta de
comunicação entre o webmaster e os sites de busca.
Para muitas pessoas, porém, SEO é apenas isso, Meta
Tags. Isso está longe de ser verdade. O Google utiliza
perto de 250 variáveis para determinar os resultados de
busca, e as meta tags são apenas algumas delas.
Meta Tags HTML e
SEO
<html>
<head>
<title>Aprendendo sobre as meta tags </title>
<meta name="author" content="Erika Sarti”>
<meta name="description" content="Meta Tags - O que são e
como utilizá-las”>
<meta name="keywords" content="sites, web, desenvolvimento”>
</head> ...

Estrutura de
Arquivos
Estrutura de
Arquivos
 Como todo tipo de projeto de software, existem
algumas recomendações quanto à organização dos
arquivos de um site.
 Não existe obrigatoriedade ou padrão específico a
seguir, pois pode variar com cada projeto, mas
recomenda-se criar/ seguir um padrão qualquer que
seja.
Estrutura de
Arquivos
 Como um site é um conjunto de páginas Web e é comum
todos os arquivos de um site estarem dentro de uma só
pasta e, assim como um livro, é recomendado que exista
uma "capa", uma página inicial que possa indicar para o
visitante quais são as outras páginas que fazem parte
desse projeto e como ele pode acessá-las, como se
fosse o índice do site.
 Esse índice, não por coincidência, é convenção adotada
pelos servidores de páginas Web. Se desejamos que
uma determinada pasta seja servida como um site e
dentro dessa pasta existe um arquivo chamado
Estrutura de
Arquivos
 Dentro da pasta do site, no mesmo nível que o
index.html, é recomendado que sejam criadas mais
algumas pastas para manter separados os arquivos de
imagens, as folhas de estilo CSS e os scripts.
Editores e
IDEs
 Existem editores de texto como Gedit (www.gnome.org),
Sublime (http://www.sublimetext.com/) e Notepad++
(http://notepad-plus-plus.org), que possuem realce de
sintaxe e outras ferramentas para facilitar o
desenvolvimento de páginas. Há também IDEs
(Integrated Development Environment), que oferecem
recursos como autocompletar e pré-visualização, como
Eclipse e Visual Studio.
 Neste curso utilizaremos o Eclipse PDT, uma versão
do Eclipse modificada para desenvolvimento web e
PHP.

Exercício
Prático
Vamos praticar
!?
Exercício
s
 Preparar uma página que inclua os seguintes
elementos:
 título com o nome dos alunos;
 texto com um pequena saudação;
 Incluir na página anterior as seguintes informações:
 autor;
 palavras-chave.
 Fazer com que a página tenha três parágrafos:
 a saudação já existente;
 uma descrição da sala de aula;
 uma descrição da roupa de um colega ao lado.
Exercício
s
 Incluir headers (<H1>) para cada um dos parágrafos.
 Formatar o nome do colega (que aparece no parágrafo
da roupa) de forma a aparecer: todo o nome em
ênfase, com o sobrenome adicionalmente forte
(strong).
 Inserir em sua página a poesia "Batatinha quando
nasce...", em destaque (<BLOCKQUOTE>), e se
lembrando de mudar de linha onde requerido.
Exercício
s
Criar uma lista como a
seguinte:
• Pais
• João Silva
• Maria Silva
• Irmãos
• João Silva Jr.
• Maria Aparecida Silva
• José Silva
• Primos
• Nenhum
• Cores Favoritas Preto
1. Branco
2. Cinza
Exercício
s
Crie uma
página com
este layout:
Exercício
s
Crie uma
página com
este layout:
Exercício
s
Crie uma
página com
este layout:
Exercício
s
Faça uma página com
o seguinte formulário:
Exercício
s
Vamos recriar o site da Ciência da Computação da
PUC!
1. Siga o layout a seguir.
2. Crie todas as páginas referenciadas no menu.
Layout

Mais conteúdo relacionado

Mais procurados

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 HTML5Jose Augusto Cintra
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
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ágrafoAlamo Saravali
 
Html completo
Html completoHtml completo
Html completoEMSNEWS
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)Devmedia
 
Webpages
WebpagesWebpages
WebpagesEMSNEWS
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 

Mais procurados (19)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
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
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
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
 
Html completo
Html completoHtml completo
Html completo
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
Webpages
WebpagesWebpages
Webpages
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
HTML
HTMLHTML
HTML
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Semelhante a Introdução de web

Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Eduardo Bertolucci
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosneyfranciosney
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endMario Sergio
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaHenrique Lima
 
Aumente a performance de seu site
Aumente a performance de seu siteAumente a performance de seu site
Aumente a performance de seu siteHenrique Lima
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Leandro Rezende
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia iiFábio Costa
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia iiFábio Costa
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1michellobo
 
Melhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação WebMelhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação WebMaurício Linhares
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewIsrael Messias
 

Semelhante a Introdução de web (20)

Fundamentos de arquitetura Web
Fundamentos de arquitetura WebFundamentos de arquitetura Web
Fundamentos de arquitetura Web
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
HTML
HTMLHTML
HTML
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Php aula1
Php aula1Php aula1
Php aula1
 
Webpages
WebpagesWebpages
Webpages
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinada
 
Aumente a performance de seu site
Aumente a performance de seu siteAumente a performance de seu site
Aumente a performance de seu site
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02Desenvolvimento para a Internet - Aula 02
Desenvolvimento para a Internet - Aula 02
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
Melhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação WebMelhorando A Performance Da Sua Aplicação Web
Melhorando A Performance Da Sua Aplicação Web
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 

Mais de Sedu

Html aula 1
Html aula 1Html aula 1
Html aula 1Sedu
 
Fluxograma
FluxogramaFluxograma
FluxogramaSedu
 
Algoritmo
AlgoritmoAlgoritmo
AlgoritmoSedu
 
Introdução a poo
Introdução a pooIntrodução a poo
Introdução a pooSedu
 
Poo encapsulamento
Poo encapsulamentoPoo encapsulamento
Poo encapsulamentoSedu
 
Poo metodo especiais
Poo metodo especiaisPoo metodo especiais
Poo metodo especiaisSedu
 
Poo metodo especiais
Poo metodo especiaisPoo metodo especiais
Poo metodo especiaisSedu
 
Variaveis
VariaveisVariaveis
VariaveisSedu
 
Poo visibilidade
Poo visibilidadePoo visibilidade
Poo visibilidadeSedu
 
Variaveis php
Variaveis phpVariaveis php
Variaveis phpSedu
 
C++ introducao
C++ introducaoC++ introducao
C++ introducaoSedu
 
String c++
String c++String c++
String c++Sedu
 
Estruturas de controle if/else switch PHP
Estruturas de controle if/else switch PHPEstruturas de controle if/else switch PHP
Estruturas de controle if/else switch PHPSedu
 
Tomada de decisao - logica
Tomada de decisao - logicaTomada de decisao - logica
Tomada de decisao - logicaSedu
 
Estrutura de controle repetição C++
Estrutura de controle repetição C++Estrutura de controle repetição C++
Estrutura de controle repetição C++Sedu
 

Mais de Sedu (15)

Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Fluxograma
FluxogramaFluxograma
Fluxograma
 
Algoritmo
AlgoritmoAlgoritmo
Algoritmo
 
Introdução a poo
Introdução a pooIntrodução a poo
Introdução a poo
 
Poo encapsulamento
Poo encapsulamentoPoo encapsulamento
Poo encapsulamento
 
Poo metodo especiais
Poo metodo especiaisPoo metodo especiais
Poo metodo especiais
 
Poo metodo especiais
Poo metodo especiaisPoo metodo especiais
Poo metodo especiais
 
Variaveis
VariaveisVariaveis
Variaveis
 
Poo visibilidade
Poo visibilidadePoo visibilidade
Poo visibilidade
 
Variaveis php
Variaveis phpVariaveis php
Variaveis php
 
C++ introducao
C++ introducaoC++ introducao
C++ introducao
 
String c++
String c++String c++
String c++
 
Estruturas de controle if/else switch PHP
Estruturas de controle if/else switch PHPEstruturas de controle if/else switch PHP
Estruturas de controle if/else switch PHP
 
Tomada de decisao - logica
Tomada de decisao - logicaTomada de decisao - logica
Tomada de decisao - logica
 
Estrutura de controle repetição C++
Estrutura de controle repetição C++Estrutura de controle repetição C++
Estrutura de controle repetição C++
 

Introdução de web

  • 1.  Desenvolvimento Web Com HTML, CSS e JavaScript Prof. Zé Maria Lehrback Filho zmlehrback@hotmail.com
  • 2. “Você precisa correr cada vez mais rápido, apenas para continuar no mesmo lugar.” Lewis Carroll O Profissional de TI
  • 3. Visão Geral  Ao final deste curso, você será capaz de:  Criar páginas HTML5;  Utilizar folhas de estilo CSS3;  Utilizar JavaScript e o framework jQuery;  Criar páginas com funcionalidades Ajax;  Utilizar frameworks como o Bootstrap;
  • 4. Desenvolvimento Web MÓDULO 01  Pauta:  Introdução ao Desenvolvimento Web  Introdução à comunicação na internet  O protocolo HTTP  As páginas da internet  O servidor web (Apache)  O ambiente de desenvolvimento e nossas ferramentas  HTML Base  Tags HTML  Exercícios
  • 6.  O cliente (navegador web) requisita uma página ao servidor.  O servidor web responde a requisição com a página requisitada e a envia ao cliente. Cliente (Navegador Web) Servidor Web Armazenamento (HD) Armazenamento (Banco de Dados) Requisição Resposta Comunicação na Internet
  • 7.  Hypertext Transfer Protocol (HTTP) é o protocolo utilizado para enviar e receber informações na web.  É baseado em requisições e respostas entre clientes e servidores.  Exemplo de requisição HTTP:  GET / HTTP/1.1  Foi criado especificamente para a World Wide Web. Protocolo HTTP
  • 8.  Os clientes de uma conexão HTTP são os browsers (navegadores).  São capazes de enviar requisições em protocolo HTTP e processar os retornos recebidos, exibindo as páginas da web.  Exemplos: Google Chrome, Internet Explorer, Edge, Mozilla Firefox, Opera, etc. Clientes HTTP
  • 9.  São serviços HTTP que disponibilizam as páginas na Internet.  Exemplos:  Apache HTTP Server  Microsoft Internet Information Services  Nginx Servidores HTTP
  • 10.  São codificadas em linguagem HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto).  Possuem ligações de hipertexto.  São hospedadas por um servidor web. Páginas da Internet
  • 11. Vantagen s Portabilidade da solução no lado do cliente. Facilidade de deployment. Facilidade de manutenção, restauração e atualização da aplicação.
  • 12. Desvantagen s  Número expressivo e crescente de dispositivos diferentes com acesso a web (computação ubíqua).  Compatibilidade entre browsers.  Novos desafios para a Engenharia de Software:  Metodologias voltadas para o desenvolvimento web.  Computação Concorrente.
  • 13. Execução no Cliente (Browser )  HTML  CSS  Tableless  JavaScrip t  XML
  • 14.  Mas o que é HTML?
  • 15. HTML  Hyper Text Markup Language  Especificação definida pelo consórcio W3C: http://www.w3.org/  Um arquivo html contém marcadores (tags)  Estes marcadores indicam para o navegador (browser) como a página deve ser apresentada  Marcadores usualmente vem em pares: <tag>...</tag>  Também podem aparecer de forma abreviada: <tag atributo=“valor” ... />
  • 16. HTML Básico <html> <head> <title>Título da Página</title> </head> <body> Esta é minha primeira página. </body> </html>
  • 17. Estrutura HTML  Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags <html>, <head> e <body> e a instrução <!DOCTYPE>. Vejamos cada uma delas:  A tag <html>  Na estrutura do nosso documento, antes de tudo, inserimos uma tag <html>. Dentro dessa tag, é necessário declarar outras duas tags: <head> e <body>. Essas duas tags são "irmãs", pois estão no mesmo nível hierárquico em relação à sua tag "pai", que é <html>. <html> <head></head> <body></body> </html>
  • 18. Estrutura HTML  A tag <head>  A tag <head> contém informações sobre nosso documento que são de interesse somente do navegador, e não dos visitantes do nosso site. São informações que não serão exibidas na área do documento no navegador.  A especificação obriga a presença da tag de conteúdo <title> dentro do nosso <head>, permitindo especificar o título do nosso documento, que normalmente será exibido na barra de título da janela do navegador ou na aba do documento.
  • 19. Estrutura HTML  Configuramos qual codificação utilizar em nosso documento por meio da configuração de charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.  O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos no curso.
  • 20. Estrutura HTML  A tag <body>  A tag <body> contém o corpo do nosso documento, que é exibido pelo navegador em sua janela. É necessário que o <body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML dentro dele.
  • 21. A instrução DOCTYPE  O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a página. Utilizaremos <! DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.  Usaremos:  <!DOCTYPE html>
  • 23. HTML - Tags Básicas Tag <html> <body> <h1> ... <h6> <p> <br> <hr> <!-- --> Descrição Define um documento HTML Define o corpo de um documento Define cabeçalhos 1 a 6 Define um parágrafo Insere uma quebra de linha Define uma linha horizontal Define um comentário
  • 24. HTML - Tags de Formatação Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Descrição Formata um texto em negrito Formata um texto com fonte maior Formata um texto com ênfase Formata um texto em itálico Formata um texto com fonte pequena Formata um texto em destaque Formata um texto subscrito Formata um texto sobrescrito Formata um texto sublinhado Formata um texto anulado
  • 25. HTML Entidades Utilizadas para apresentação de caracteres especiais em html. Ex.: “<“ Saída Descrição Espaço sem quebra Nome da Entidade &nbsp; Número &#160; < Menor que &lt; &#60; > Maior que &gt; &#62; & E comercial &amp; &#38; " Aspas &quot; &#34; ' Apóstrofo &apos; (não funciona no IE) &#39;
  • 26. HTML Links e Imagen s  <a href=“www.pucpcaldas.br”>Página PUC</a>  Página da PUC  <a name=“endereco”>Como Chegar</a>  Trecho da página que informa detalhes sobre localização  <a href=“www.pucpcaldas.br#endereco”> Localização</a>  Localização  <img src=“logo.png” alt=“Logo da PUC”/>
  • 27. HTML Tabelas <table border="1"> <thead> <tr> <th>Coluna 1</th> <th>Coluna 2</th> </tr> </thead> <tbody> <tr> <td>linha 1, valor 1</td> <td>linha 1, valor 2</td> </tr> <tr> <td>linha 2, valor 1</td> <td>linha 2, valor 2</td> </tr> </tbody> </table>
  • 28. HTML Background e Fonte s  Formas de se definir um background preto para o corpo da página  <body bgcolor="#000000">  <body bgcolor="rgb(0,0,0)">  <body bgcolor="black">  Definindo uma imagem de fundo  <body background="logo.gif">  <body background="http://www.pucpcaldas.br/bg.gif">  Configurando uma fonte  <font size="2" face="Verdana">Texto com fonte específica.</font>
  • 29. HTML Formulários  HTML possibilita a criação de formulários online utilizando tags  A tag <form> é a mais comum e permite a criação de um formulário de entrada de dados <body><form> Nome: <input type="text" name="firstname"><br /> Sobrenome: <input type="text" name="lastname"><br /> Senha: <input type="password" name="senha"> </form></body>
  • 30. HTML Formulários  Tipos que podem ser utilizados com a tag <input type=“?”>:  button: Insere um botão  checkbox: Insere um checkbox; para vários itens, basta inserirmos vários “inputs” deste tipo  file: Insere botão seleção de arquivo através de uma caixa de diálogo  hidden: Campo pertencente ao formulário, mas que não será exibido na página  image: Insere uma imagem como um botão submit  password: Insere um campo password (caracteres digitados não aparecem)  radio: Insere um radiobox (análogo ao checkbox)  reset: Restaura os valores iniciais do formulário  submit: Encaminha os dados inseridos para algum arquivo  text: Insere um campo de edição de texto
  • 31. HTML Formulários  Quando algum elemento do tipo “submit” é inserido num formulário e acionado, seus dados são enviados para um arquivo.  O arquivo mencionado é indicado pelo atributo “action” do elemento <form>.  Este arquivo deverá estar armazenado num servidor web (Apache, Tomcat, IIS, ...), e estará escrito em alguma linguagem de programação de servidores (server-side): php, jsp, asp, sevlets, ...
  • 32. HTML Formulários <body> <form method=“get” action=“processaForm.php" > Nome: <input type="text" name="firstname"><br /> Sobrenome: <input type="text" name="lastname"><br /> Senha: <input type="password" name="senha"> <input type="submit" value="Enviar"> </form> </body>  URL após clicar no botão: .../puc/processaForm.php? firstname=Carlos&lastname=Bazilio&senha=abcdef g
  • 33. HTML Outras tags de Formulários Tag Descrição <form> Define um formulário para entrada do usuário <input> Define um campo de entrada <textarea> Define um campo texto com múltiplas linhas <label> Define um label para algum controle <fieldset> Desenha uma caixa em torno de um conjunto de elementos <legend> Define um título para um <fieldset> <select> Cria uma lista drop-down <optgroup> Criar uma hierarquia nas opções de uma lista drop-down <option> Uma opção na lista drop-down <button> Insere um botão. Difere de <input> por poder conter algum conteúdo, como uma imagem
  • 34. HTML Listas Não Ordenadas  Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets (tipicamente pequenos círculos pretos).  Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>: <ul> <li>Café</li> <li>Leite</li> </ul>
  • 35. HTML Listas Ordenadas  Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números.  Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.  <ol> <li>Café</li> <li>Leite</li> </ol>
  • 36. Meta Tags HTML  Meta Tag é um comando implementado no código de páginas web, dentro da área Head do site (entre as tags <head> e </head>) para passar instruções a programas externos ou ações mais simples, como por exemplo informar qual a pessoa responsável pelo desenvolvimento da página. Algumas Meta Tags são utilizadas para passar aos sites de busca como o Bing e o Google instruções sobre o título da página e uma breve descriçao a ser exibida nos resultados de busca, quais páginas devem ou não ser indexadas, dentre outras instruções.
  • 37. Meta Tags HTML e SEO  Meta Tags são uma importante ferramenta de comunicação entre o webmaster e os sites de busca. Para muitas pessoas, porém, SEO é apenas isso, Meta Tags. Isso está longe de ser verdade. O Google utiliza perto de 250 variáveis para determinar os resultados de busca, e as meta tags são apenas algumas delas.
  • 38. Meta Tags HTML e SEO <html> <head> <title>Aprendendo sobre as meta tags </title> <meta name="author" content="Erika Sarti”> <meta name="description" content="Meta Tags - O que são e como utilizá-las”> <meta name="keywords" content="sites, web, desenvolvimento”> </head> ...
  • 40. Estrutura de Arquivos  Como todo tipo de projeto de software, existem algumas recomendações quanto à organização dos arquivos de um site.  Não existe obrigatoriedade ou padrão específico a seguir, pois pode variar com cada projeto, mas recomenda-se criar/ seguir um padrão qualquer que seja.
  • 41. Estrutura de Arquivos  Como um site é um conjunto de páginas Web e é comum todos os arquivos de um site estarem dentro de uma só pasta e, assim como um livro, é recomendado que exista uma "capa", uma página inicial que possa indicar para o visitante quais são as outras páginas que fazem parte desse projeto e como ele pode acessá-las, como se fosse o índice do site.  Esse índice, não por coincidência, é convenção adotada pelos servidores de páginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado
  • 42. Estrutura de Arquivos  Dentro da pasta do site, no mesmo nível que o index.html, é recomendado que sejam criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts.
  • 43. Editores e IDEs  Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/) e Notepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe e outras ferramentas para facilitar o desenvolvimento de páginas. Há também IDEs (Integrated Development Environment), que oferecem recursos como autocompletar e pré-visualização, como Eclipse e Visual Studio.  Neste curso utilizaremos o Eclipse PDT, uma versão do Eclipse modificada para desenvolvimento web e PHP.
  • 45. Exercício s  Preparar uma página que inclua os seguintes elementos:  título com o nome dos alunos;  texto com um pequena saudação;  Incluir na página anterior as seguintes informações:  autor;  palavras-chave.  Fazer com que a página tenha três parágrafos:  a saudação já existente;  uma descrição da sala de aula;  uma descrição da roupa de um colega ao lado.
  • 46. Exercício s  Incluir headers (<H1>) para cada um dos parágrafos.  Formatar o nome do colega (que aparece no parágrafo da roupa) de forma a aparecer: todo o nome em ênfase, com o sobrenome adicionalmente forte (strong).  Inserir em sua página a poesia "Batatinha quando nasce...", em destaque (<BLOCKQUOTE>), e se lembrando de mudar de linha onde requerido.
  • 47. Exercício s Criar uma lista como a seguinte: • Pais • João Silva • Maria Silva • Irmãos • João Silva Jr. • Maria Aparecida Silva • José Silva • Primos • Nenhum • Cores Favoritas Preto 1. Branco 2. Cinza
  • 51. Exercício s Faça uma página com o seguinte formulário:
  • 52. Exercício s Vamos recriar o site da Ciência da Computação da PUC! 1. Siga o layout a seguir. 2. Crie todas as páginas referenciadas no menu.