Introdução de web

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

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

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>

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
 
Número
 
< Menor que < <
> Maior que > >
& E comercial & &
" Aspas " "
' Apóstrofo ' (não funciona no IE) '

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>
</tr>
<tr>
</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
 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
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.

Introdução de web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Introdução de web

Ähnlich wie Introdução de web (20)

Mehr von Sedu

Mehr von Sedu (15)

Introdução de web