Desenvolvimento Web HTML Css Js Modulo 01 160219051823

Desenvolvimento Web
Com HTML, CSS e JavaScript

Prof. Rodrigo Santa Maria
rodrigo@digitallymade.com.br
S
Sobre o Prof. Rodrigo Santa Maria
S  Bacharel em Ciência da Computação (PUC Minas);
S  Especialista com MBA Internacional em Gerenciamento de

Projetos (FGV/Ohio University, USA);
S  Professor Universitário (UNIFEOB);
S  Micro-empresário da área de TI;
S  Acesse: www.digitallymade.com.br
S  E-mail: rodrigo@digitallymade.com.br

Sobre o Prof. Rodrigo Santa Maria
S  Analista/Desenvolvedor de aplicações desde 2000;
S  Ex-IBMer (de 2009 a 2013);
S  Diretor-Presidente/Co-fundador do Instituto Internacional

de Ideias;
S  Fundador do Google Developers Group São João da Boa

Vista;
O Profissional de TI
“Você precisa correr cada vez mais rápido,
apenas para continuar no mesmo lugar.”

Lewis Carroll
Visão Geral
S  Ao final deste curso, você será capaz de:

S  Criar páginas HTML5;
S  Utilizar folhas de estilo CSS3;
S  Utilizar JavaScript e o framework jQuery;
S  Criar páginas com funcionalidades Ajax;
S  Utilizar frameworks como o Bootstrap;

Desenvolvimento Web
MÓDULO 01
S  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 Internet
S
Comunicação na Internet
S  O cliente (navegador web) requisita uma página ao servidor.
S  O servidor web responde a requisição com a página requisitada e

a envia ao cliente.
Requisição
Armazenamento
Resposta (HD)
Cliente
(Navegador Web) Servidor Web
Armazenamento
(Banco de Dados)
Protocolo HTTP
S  Hypertext Transfer Protocol (HTTP) é o protocolo

utilizado para enviar e receber informações na web.
S  É baseado em requisições e respostas entre clientes e

servidores.
S  Exemplo de requisição HTTP:

S  GET / HTTP/1.1
S  Foi criado especificamente para a World Wide Web.

Clientes HTTP
S  Os clientes de uma conexão HTTP são os browsers

(navegadores).
S  São capazes de enviar requisições em protocolo HTTP e

processar os retornos recebidos, exibindo as páginas da
web.
S  Exemplos: Google Chrome, Internet Explorer, Edge,

Mozilla Firefox, Opera, etc.
Servidores HTTP
S  São serviços HTTP que disponibilizam as páginas na

Internet.
S  Exemplos:
S  Apache HTTP Server
S  Microsoft Internet Information Services
S  Nginx
Páginas da Internet
S  São codificadas em linguagem HTML (HyperText

Markup Language, que significa Linguagem de
Marcação de Hipertexto).
S  Possuem ligações de hipertexto.
S  São hospedadas por um servidor web.

Vantagens
S  Portabilidade da solução no lado do cliente.
S  Facilidade de deployment.
S  Facilidade de manutenção, restauração e

atualização da aplicação.
Desvantagens
S  Número expressivo e crescente de dispositivos

diferentes com acesso a web (computação ubíqua).
S  Compatibilidade entre browsers.
S  Novos desafios para a Engenharia de Software:

S  Metodologias voltadas para o desenvolvimento web.
S  Computação Concorrente.
Execução no Cliente (Browser)
S  HTML
S  CSS
S  Tableless
S  JavaScript
S  XML
Mas o que é HTML?
S
HTML
S  Hyper Text Markup Language
S  Especificação definida pelo consórcio W3C: http://www.w3.org/
S  Um arquivo html contém marcadores (tags)
S  Estes marcadores indicam para o navegador (browser) como a

página deve ser apresentada
S  Marcadores usualmente vem em pares: <tag>...</tag>
S  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
S  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:
S  A tag <html>
S  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
S  A tag <head>
S  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.
S  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
S  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.
S  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.
S  <meta charset="utf-8">
Estrutura HTML
S  A tag <body>
S  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
S  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.
S  Usaremos:
S  <!DOCTYPE html>
Principais Tags HTML
S
HTML - Tags Básicas
Tag Descrição
<html> Define um documento HTML
<body> Define o corpo de um documento
<h1> ... <h6> Define cabeçalhos 1 a 6
<p> Define um parágrafo
<br> Insere uma quebra de linha
<hr> Define uma linha horizontal
 Define um comentário
HTML - Tags de Formatação
Tag Descrição
<b> Formata um texto em negrito
<big> Formata um texto com fonte maior
<em> Formata um texto com ênfase
<i> Formata um texto em itálico
<small> Formata um texto com fonte pequena
<strong> Formata um texto em destaque
<sub> Formata um texto subscrito
<sup> Formata um texto sobrescrito
<ins> Formata um texto sublinhado
<del> Formata um texto anulado
HTML Entidades
S  Utilizadas para apresentação de caracteres

especiais em html. Ex.: “<“
Saída Descrição Nome da Entidade Número

Espaço sem quebra
< Menor que < <
> Maior que > >
& E comercial & &
" Aspas " "
' Apóstrofo ' (não funciona no IE) '
HTML Links e Imagens
S  <a href=“www.pucpcaldas.br”>Página PUC</a>

S  Página da PUC
S  <a name=“endereco”>Como Chegar</a>

S  Trecho da página que informa detalhes sobre localização
S  <a href=“www.pucpcaldas.br#endereco”>

Localização</a>
S  Localização
S  <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>
</tr>
<tr>
</tr>
</tbody>
</table>
HTML Background e Fontes
S  Formas de se definir um background preto para o

corpo da página
S  <body bgcolor="#000000">
S  <body bgcolor="rgb(0,0,0)">
S  <body bgcolor="black">
S  Definindo uma imagem de fundo

S  <body background="logo.gif">
S  <body background="http://www.pucpcaldas.br/bg.gif">
S  Configurando uma fonte

S  <font size="2" face="Verdana">Texto com fonte específica.</
font>
HTML Formulários
S  HTML possibilita a criação de formulários online utilizando tags
S  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
S  Tipos que podem ser utilizados com a tag <input type=“?”>:
S  button: Insere um botão
S  checkbox: Insere um checkbox; para vários itens, basta inserirmos vários
“inputs” deste tipo
S  file: Insere botão seleção de arquivo através de uma caixa de diálogo
S  hidden: Campo pertencente ao formulário, mas que não será exibido na
página
S  image: Insere uma imagem como um botão submit
S  password: Insere um campo password (caracteres digitados não aparecem)
S  radio: Insere um radiobox (análogo ao checkbox)
S  reset: Restaura os valores iniciais do formulário
S  submit: Encaminha os dados inseridos para algum arquivo
S  text: Insere um campo de edição de texto
HTML Formulários
S  Quando algum elemento do tipo “submit” é inserido num

formulário e acionado, seus dados são enviados para um arquivo.
S  O arquivo mencionado é indicado pelo atributo “action” do

elemento <form>.
S  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>
S  URL após clicar no botão: .../puc/processaForm.php?

firstname=Carlos&lastname=Bazilio&senha=abcdefg
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
S  Uma lista não ordenada é uma lista de itens. As listas de

itens são marcadas com bullets (tipicamente pequenos
círculos pretos).
S  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
S  Uma lista ordenada é também uma lista de itens. As listas

de itens são marcadas com números.
S  Uma lista ordenada começa com a tag <ol>. Cada item da
lista começa com a tag <li>.
S  <ol>
<li>Café</li>
<li>Leite</li>
</ol>
Meta Tags HTML
S  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
S  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
S
S  Como todo tipo de projeto de software, existem algumas

recomendações quanto à organização dos arquivos de um
site.
S  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.
S  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.
S  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 index.html
S  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
S  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.
S  Neste curso utilizaremos o Eclipse PDT, uma versão do

Eclipse modificada para desenvolvimento web e PHP.
Exercício Prático
Vamos praticar !?
S
Exercícios
S  Preparar uma página que inclua os seguintes elementos:

S  título com o nome dos alunos;
S  texto com um pequena saudação;
S  Incluir na página anterior as seguintes informações:

S  autor;
S  palavras-chave.
S  Fazer com que a página tenha três parágrafos:

S  a saudação já existente;
S  uma descrição da sala de aula;
S  uma descrição da roupa de um colega ao lado.
Exercícios
S  Incluir headers (<H1>) para cada um dos parágrafos.
S  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).
S  Inserir em sua página a poesia "Batatinha quando nasce...",

em destaque (<BLOCKQUOTE>), e se lembrando de
mudar de linha onde requerido.
Exercícios
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ícios
Crie uma página

com este layout:
Exercícios
Crie uma página

com este layout:
Exercícios
Crie uma página

com este layout:
Exercícios
Faça uma página com o

seguinte formulário:
Exercícios
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

Desenvolvimento Web HTML Css Js Modulo 01 160219051823

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Desenvolvimento Web HTML Css Js Modulo 01 160219051823

Încărcat de

Drepturi de autor:

Formate disponibile

Desenvolvimento Web

Com HTML, CSS e JavaScript

S Bacharel em Ciência da Computação (PUC Minas);

S Especialista com MBA Internacional em Gerenciamento de

S Micro-empresário da área de TI;

S Acesse: www.digitallymade.com.br

S E-mail: rodrigo@digitallymade.com.br

S Analista/Desenvolvedor de aplicações desde 2000;

S Ex-IBMer (de 2009 a 2013);

S Diretor-Presidente/Co-fundador do Instituto Internacional

S Fundador do Google Developers Group São João da Boa

“Você precisa correr cada vez mais rápido,

apenas para continuar no mesmo lugar.”

S Ao final deste curso, você será capaz de:

S Utilizar folhas de estilo CSS3;

S Utilizar JavaScript e o framework jQuery;

S Criar páginas com funcionalidades Ajax;

S Utilizar frameworks como o Bootstrap;

S O cliente (navegador web) requisita uma página ao servidor.

S O servidor web responde a requisição com a página requisitada e

S Hypertext Transfer Protocol (HTTP) é o protocolo

S É baseado em requisições e respostas entre clientes e

S Exemplo de requisição HTTP:

S Foi criado especificamente para a World Wide Web.

S Os clientes de uma conexão HTTP são os browsers

S São capazes de enviar requisições em protocolo HTTP e

S Exemplos: Google Chrome, Internet Explorer, Edge,

S São serviços HTTP que disponibilizam as páginas na

S São codificadas em linguagem HTML (HyperText

S Possuem ligações de hipertexto.

S São hospedadas por um servidor web.

S Portabilidade da solução no lado do cliente.

S Facilidade de deployment.

S Facilidade de manutenção, restauração e

S Número expressivo e crescente de dispositivos

S Novos desafios para a Engenharia de Software:

S Hyper Text Markup Language

S Especificação definida pelo consórcio W3C: http://www.w3.org/

S Um arquivo html contém marcadores (tags)

S Estes marcadores indicam para o navegador (browser) como a

S Marcadores usualmente vem em pares: <tag>...</tag>

S Também podem aparecer de forma abreviada: <tag

S Um documento HTML válido precisa seguir

S Na estrutura do nosso documento, antes de tudo, inserimos

S A tag <head>

S A tag <head> contém informações sobre nosso documento que

S A especificação obriga a presença da tag de conteúdo <title>

S Configuramos qual codificação utilizar em nosso

S A tag <body>

S A tag <body> contém o corpo do nosso documento, que é

S O DOCTYPE não é uma tag HTML, mas uma instrução

S Utilizadas para apresentação de caracteres

Saída Descrição Nome da Entidade Número

S <a href=“www.pucpcaldas.br”>Página PUC</a>

S <a name=“endereco”>Como Chegar</a>

S <a href=“www.pucpcaldas.br#endereco”>

S <img src=“logo.png” alt=“Logo da PUC”/>

S Formas de se definir um background preto para o

S Definindo uma imagem de fundo

S Configurando uma fonte

S HTML possibilita a criação de formulários online utilizando tags

S A tag <form> é a mais comum e permite a criação de um formulário de

S Quando algum elemento do tipo “submit” é inserido num

S O arquivo mencionado é indicado pelo atributo “action” do

S  Bacharel em Ciência da Computação (PUC Minas);

S  Especialista com MBA Internacional em Gerenciamento de

S  Micro-empresário da área de TI;

S  Acesse: www.digitallymade.com.br

S  E-mail: rodrigo@digitallymade.com.br

S  Analista/Desenvolvedor de aplicações desde 2000;

S  Ex-IBMer (de 2009 a 2013);

S  Diretor-Presidente/Co-fundador do Instituto Internacional

S  Fundador do Google Developers Group São João da Boa

S  Ao final deste curso, você será capaz de:

S  Utilizar folhas de estilo CSS3;

S  Utilizar JavaScript e o framework jQuery;

S  Criar páginas com funcionalidades Ajax;

S  Utilizar frameworks como o Bootstrap;

S  O cliente (navegador web) requisita uma página ao servidor.

S  O servidor web responde a requisição com a página requisitada e

S  Hypertext Transfer Protocol (HTTP) é o protocolo

S  É baseado em requisições e respostas entre clientes e

S  Exemplo de requisição HTTP:

S  Foi criado especificamente para a World Wide Web.

S  Os clientes de uma conexão HTTP são os browsers

S  São capazes de enviar requisições em protocolo HTTP e

S  Exemplos: Google Chrome, Internet Explorer, Edge,

S  São serviços HTTP que disponibilizam as páginas na

S  São codificadas em linguagem HTML (HyperText

S  Possuem ligações de hipertexto.

S  São hospedadas por um servidor web.

S  Portabilidade da solução no lado do cliente.

S  Facilidade de deployment.

S  Facilidade de manutenção, restauração e

S  Número expressivo e crescente de dispositivos

S  Novos desafios para a Engenharia de Software:

S  Hyper Text Markup Language

S  Especificação definida pelo consórcio W3C: http://www.w3.org/

S  Um arquivo html contém marcadores (tags)

S  Estes marcadores indicam para o navegador (browser) como a

S  Marcadores usualmente vem em pares: <tag>...</tag>

S  Também podem aparecer de forma abreviada: <tag

S  Um documento HTML válido precisa seguir

S  Na estrutura do nosso documento, antes de tudo, inserimos

S  A tag <head>

S  A tag <head> contém informações sobre nosso documento que

S  A especificação obriga a presença da tag de conteúdo <title>

S  Configuramos qual codificação utilizar em nosso

S  A tag <body>

S  A tag <body> contém o corpo do nosso documento, que é

S  O DOCTYPE não é uma tag HTML, mas uma instrução

S  Utilizadas para apresentação de caracteres

S  <a href=“www.pucpcaldas.br”>Página PUC</a>

S  <a name=“endereco”>Como Chegar</a>

S  <a href=“www.pucpcaldas.br#endereco”>

S  <img src=“logo.png” alt=“Logo da PUC”/>

S  Formas de se definir um background preto para o

S  Definindo uma imagem de fundo

S  Configurando uma fonte

S  HTML possibilita a criação de formulários online utilizando tags

S  A tag <form> é a mais comum e permite a criação de um formulário de

S  Quando algum elemento do tipo “submit” é inserido num

S  O arquivo mencionado é indicado pelo atributo “action” do

S  Este arquivo deverá estar armazenado num servidor web

S  URL após clicar no botão: .../puc/processaForm.php?

S  Uma lista não ordenada é uma lista de itens. As listas de

S  Uma lista ordenada é também uma lista de itens. As listas

S  Meta Tag é um comando implementado no código de

S  Meta Tags são uma importante ferramenta de comunicação

S  Como todo tipo de projeto de software, existem algumas

S  Não existe obrigatoriedade ou padrão específico a seguir,

S  Como um site é um conjunto de páginas Web e é comum

S  Esse índice, não por coincidência, é convenção adotada pelos

S  Dentro da pasta do site, no mesmo nível que o index.html, é

S  Existem editores de texto como Gedit (www.gnome.org),

S  Neste curso utilizaremos o Eclipse PDT, uma versão do

S  Preparar uma página que inclua os seguintes elementos:

S  Incluir na página anterior as seguintes informações:

S  Fazer com que a página tenha três parágrafos:

S  Incluir headers (<H1>) para cada um dos parágrafos.

S  Formatar o nome do colega (que aparece no parágrafo da

S  Inserir em sua página a poesia "Batatinha quando nasce...",

•  Cores Favoritas Preto

1.  Siga o layout a seguir.