INTRODUÇÃO A
PROGRAMAÇÃO
PARA WEB
PROF. ME. HÉLIO ESPERIDIÃO
Navegador
O navegador também
conhecido como web
browser é um programa
que habilita seus usuários a
interagirem com
documentos hospedados
em um servidor Web.
Servidor web
O Servidor web é a máquina responsável pelo
armazenamento de dados dos sites bem como seus arquivos,
imagens, fotos etc. Geralmente um servidor possui também
uma boa capacidade de processamento e memória que fica
reservada as atividades do site.
Os servidores web são a espinha dorsal da Internet, são eles
que hospedam todas as páginas, incluindo os mecanismos de
busca (GOOGLE, YAHOO).
Servidor web
Servem como base para todo tipo de aplicativo via web,
incluindo os webmails.
Ao acessar qualquer site, há um servidor por trás daquele
endereço responsável por disponibilizar as páginas e todos os
demais recursos que você pode acessar
Apache
O Apache é um software livre, o que significa que qualquer um pode
estudar ou alterar seu código-fonte, além de poder utilizá-lo
gratuitamente.
Apache é servidor Web mais usado no mundo.
Disponível para o Linux ,Unix), Windows , OS/2 e outros.
O servidor Apache é capaz de executa código e arquivos em HTML, PHP,
Perl, Shell Script e até em ASP e pode atuar como servidor FTP, HTTP,
entre outros
Documentos Estáticos
01
Existem dois tipos de
web sites aqueles com
conteúdo estático,
chamados web sites
estáticos, e aqueles
com conteúdo gerado
dinamicamente
chamados web sites
dinâmicos.
02
O conteúdo Web é
tudo o que aparece
em uma página Web:
texto, gráficos, campos
de formulários, links
para outras páginas,
botões de navegação,
menus,etc
03
Um documento
estático é
simplesmente
qualquer página Web
que seja salva em
disco e repassada
através de um browser
sem sofrer quaisquer
mudanças
04
Em um web site
estático todo o
conteúdo das páginas
é colocado
manualmente por
desenvolvedores web.
Documentos
Dinâmicos
As páginas de um web site dinâmico são construídas “on the
fly”, ou seja, no momento em que as mesmas são
requisitadas por um Navegador WEB.
Sites dinâmicos, embora também sejam desenvolvidos por
profissionais, podem ser mantidos diretamente pelo usuário
cliente. Seus custos iniciais são mais altos, bem como o
tempo de desenvolvimento, mas não é necessário pagar um
profissional para fazer as freqüentes alterações necessárias
nas páginas
Documentos
Dinâmicos
Pode-se dizer que uma página Web dinâmica é qualquer página
que tenha seu conteúdo alterado por um programa ou script no
momento em que a mesma é requisitada.
As linguagens de programação comumente utilizadas para a
construção de páginas dinâmicas são PHP e JSP, Java, etc
Documentos processados no cliente X
Documentos processados no servidor
O navegador web (browser) interpreta apenas documentos HTML. Desta forma, linguagens de
programação tais como PHP e ASP são chamadas de linguagens server-side, ou seja, são
executadas no servidor web e não no navegador (cliente).
HTTP
(Hypertext
Transfer
Protocol)
O HTTP é Protocolo de Transferência
de Hipertexto, que define padrões e
regras de comunicação entre clientes
e servidores para transferência de
arquivos e paginas que são
requisitadas por navegadores.
WWW
(World Wide
Web)
A World Wide Web em português significa "Rede de alcance
mundial também conhecida como WWW e Web é um sistema
de documentos que são interligados e executados na Internet.
Os documentos podem estar em forma de vídeos, sons,
hipertextos e figuras.
Inicie o servido do apache
Click no botão “start” e espere que fique
verde o texto “Apache”.
Salvando
documentos
É necessário que os arquivos sejam movidos para
o diretório de servidor Apache.
Salve os arquivos em : C:\xampp\htdocs\nomeAluno
Salve os arquivos de seus programas sempre com a extensão
.html
Não utilize caracteres especiais e espaços nos nomes das
pastas e arquivos.
Configurando
Servidor
Endereço para acesso via navegador
◦ http://127.0.0.1/nomeAluno
◦ http://localhost/nomeAluno
* Nos laboratórios da escola utilize:
http://127.0.0.1:8080/nomeAluno ou
http://localhost:8080/nomeAluno
Onde encontro os arquivos no meu computador?
◦ C:\xampp\htdocs\nomeAluno
SEUS ARQUIVOS E PASTAS DEVEM SER POSICIONADOS
NESTE DIRETÓRIO.
◦ C:\xampp\htdocs\nomeAluno
HTML
HTML também chamado de HyperText Markup Language, é
uma ferramenta utilizada para desenvolver páginas na
internet, existem outras linguagens mais avançadas porém
dificilmente você verá um site que não utilize HTML, portanto
um dos primeiros passos para desenvolver qualquer coisa na
internet é aprender HTML.
Um documento HTML é um arquivo de texto comum que
pode ser escrito através de qualquer editor de textos como,
por exemplo, o Bloco de Notas e tem a terminação (extensão)
.htm ou .html.
Tags HTML
01
Tags são rótulos
usados para
informar ao
navegador como
deve ser
apresentado o
website.
02
Todas as tags têm
o mesmo
formato:
começam com
um sinal de
menor "<" e
acabam com um
sinal de maior ">".
03
Genericamente
falando, existem
dois tipos de tags
- tags de
abertura:
<comando> e tags
de fechamento:
</comando>.
04
A diferença entre
elas é que na tag
de fechamento
existe uma barra
"/".
05
Tudo que estiver
contido entre
uma tag de
abertura e uma
tag de
fechamento será
processado
segundo o
comando contido
na tag.
Tags HTML
Mas, como toda regra tem sua exceção, aqui no HTML a
exceção é que para algumas tags a abertura e o fechamento
se dá na mesma tag. Tais tags contém comandos que não
necessitam de um conteúdo para serem processados, isto é,
são tags de comandos isolados, por exemplo, um pulo de
linha é conseguido com a tag <br />
A estrutura de um documento HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Textos
Imagens
Conteúdo geral...
</body>
</html>
A declaração <!DOCTYPE html> define que este
documento é um documento HTML5
O elemento <html> é o elemento raiz de uma página
HTML
O elemento <head> contém metainformações sobre a
página HTML
O elemento <title> especifica um título para a página
HTML (que é mostrado na barra de título do navegador
ou na guia da página)
O elemento <body> define o corpo do documento e é
um recipiente para todo o conteúdo visível, como
cabeçalhos, parágrafos, imagens, hiperlinks, tabelas,
listas, etc.
Títulos / Cabeçalhos
Utilizado para formatar texto segundo sua importância.
O cabeçalho de numero menor é o de maior importância.
O cabeçalho de numero maior é o de menor importância.
Títulos
<!DOCTYPE html>
<html>
<body>
<h1>Hélio Esperidião</h1>
<h2>Hélio Esperidião</h2>
<h3>Hélio Esperidião</h3>
<h4>Hélio Esperidião</h4>
<h5>Hélio Esperidião</h5>
<h6>Hélio Esperidião</h6>
</body>
</html>
Título
<!DOCTYPE html>
<html>
<body>
<h1>Mais importente</h1>
<h2>Título 3</h2>
<h3>Título 3</h3>
<h4>Título 3</h4>
<h5>Título 3</h5>
<h6>Menos importante</h6>
</body>
</html>
Parágrafos HTML
<!DOCTYPE html>
<html>
<body>
<p>Isto é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
</html>
Quebras de linha
<!DOCTYPE html>
<html>
<body>
<p>parágrafo 1 </p>
<p>parágrafo 2 </p>
<p>parágrafo 3 </p>
</body>
</html>
Quebra de linha
<!DOCTYPE html>
<html>
<body>
Linha 1<br>
Linha 2<br>
Linha 3<br><br><br>
Linha 4
</body>
</html>
Quebras de linha – Pular de linha
<!DOCTYPE html>
<html>
<body>
<p>parágrafo 1 </p>
<p>parágrafo 2 </p>
<p>parágrafo 3 </p>
</body>
</html>
Quebra de linha dentro de parágrafos
<!DOCTYPE html>
<html>
<body>
<p>parágrafo 1 <br><br><br></p>
<p>parágrafo 2 </p>
<p>parágrafo 3 </p>
</body>
</html>
Misturando tags
<!DOCTYPE html>
<html>
<body>
<h1>Parágrafo em HTML</h1>
<p>Isto é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
<p>Este é outro parágrafo.</p>
</body>
</html>
Elementos de Formatação HTML
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<b> - Texto em negrito
<!DOCTYPE html>
<html>
<body>
<b>Texto em Negrito</b>
</body>
</html>
<strong> - Texto importante
<!DOCTYPE html>
<html>
<body>
<p>Não importante</p>
<p><strong>Importante</strong></p>
</body>
</html>
<i> Texto em itálico
<!DOCTYPE html>
<html>
<body>
<p>Não formatado</p>
<p><i>Formatado em itálico.</i></p>
</body>
</html>
<em> define o texto enfatizado. O conteúdo
interno geralmente é exibido em itálico.
<!DOCTYPE html>
<html>
<body>
<p>esse texto é normal</p>
<p><em>texto enfatizado</em></p>
</body>
</html>
<small> define um texto menor
<!DOCTYPE html>
<html>
<body>
<p>Texto normal.</p>
<p>
<small>Texto levemente menor.</small>
</p>
</body>
</html>
<mark> define o texto que deve ser
destacado
<!DOCTYPE html>
<html>
<body>
<p>
Não esquecer de <mark>ESTUDAR</mark>
todos os dias.
</p>
</body>
</html>
<del> define o texto que foi excluído de
um documento.
<!DOCTYPE html>
<html>
<body>
<p>Minha disciplina preferida é WEB
<del>Banco de dados</del> .</p>
</body>
</html>
<ins> define um texto que foi inserido
em um documento.
<!DOCTYPE html>
<html>
<body>
<p>Meu curso preferido é <del>POO</del>
<ins>WEB</ins>.</p>
</body>
</html>
<sub> define o texto subscrito
<!DOCTYPE html>
<html>
<body>
Água: <p>H<sub>2</sub>O</p>
dióxido de carbono:<p>CO<sub>2</sub></p>
</body>
</html>
<sup> define o texto sobrescrito.
<!DOCTYPE html>
<html>
<body>
<p>ax<sup>2</sup> +bx+c=0</p>
</body>
</html>
<u> underline
<!DOCTYPE html>
<html>
<body>
<u>texto sublinhado</u>
</body>
</html>
emoji
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>😀 😁 😂; 😃</p>
</body>
</html>
emoji
😀 1F600 Grinning face
😁 1F601 grinning face with smiling eyes
😂 1F602 face with tears of joy
😃 1F603 smiling face with open mouth
😄 1F604 smiling face with open mouth and smiling eyes
😅 1F605 smiling face with open mouth and cold sweat
😆 1F606 smiling face with open mouth and tightly-closed eyes
😇 1F607 smiling face with halo
😈 1F608 smiling face with horns
😉 1F609 winking face
😊 1F60A smiling face with smiling eyes
😋 1F60B face savouring delicious food
😌 1F60C relieved face
😍 1F60D smiling face with heart-shaped eyes
😎 1F60E smiling face with sunglasses
Carregar imagens
<!DOCTYPEhtml>
<html>
<body>
<p>Carregarimagens:</p>
<imgsrc="nomeArquivo.algumaCoisa">
</body>
</html>
Carregar imagens
<!DOCTYPEhtml>
<html>
<body>
<p>Carregarimagens:</p>
<imgsrc="eu.jpg">
</body>
</html>
Caminhos relativos na web
O caminho pode ser relativo ou absoluto.
Um caminho absoluto sempre contém o
elemento root e a lista completa de diretórios
necessários para localizar o arquivo.
Exemplo: /home/helio/site1/arquivos é um
caminho absoluto. Toda a informação necessária
para localizar o arquivo está contida no caminho.
Um caminho relativo precisa ser combinado com
outro caminho para que seja possível acessar um
arquivo.
Exemplo: helio/fotos é um caminho relativo.
Sem informação adicional não é possível localizar
esse diretório no sistema de arquivos.
Na web é muito comum utilizar caminhos
relativos.
Caminhos relativos na web
Caminho REGRA
<img src=“eu.jpg"> “eu.jpg” está localizada na mesma pasta do arquivo atual.
<img src="imgs/eu.jpg"> “eu.jpg” está localizada dentro da pasta “imgs” que está no diretório do
arquivo atual.
<img src="/imgs/eu.jpg"> “eu.jpg” está localizada no diretório raiz do web site.
<img src="../eu.jpg"> “eu.jpg” está localizada no diretório anterior ao diretório atual
<img src="../imgs/eu.jpg"> “eu.jpg” está localizada no diretório “imgs” que está localizado no
diretório anterior ao diretório atual do arquivo.
Exemplo caminho relativo
<!DOCTYPE html>
<html>
<body>
<p>A partir do local atual entre na pasta imgs
e acesse o arquivo eu.jpg</p>
<img src="imgs/eu.jpg">
</body>
</html>
A imagem eu.jpg está dentro da pasta
imgs
Listas não numeradas
<!DOCTYPE html>
<html>
<body>
<p>Músicas que gosto:</p>
<ul>
<li>Metallica - Nothing Else Matters</li>
<li>Pink Floyd - Wish You Were Here</li>
<li>Orgânico Verão - Dizeres</li>
</ul>
</body>
</html>
Listas numeradas
<!DOCTYPE html>
<html>
<body>
<p>Revista Rolling Stone publica
melhor músicas de todos os tempos:</p>
<ol>
<li>Like a Rolling Stone - Bob Dylan</li>
<li>Satisfaction - The Rolling Stones</li>
<li>Imagine - John Lennon</li>
</ol>
</body>
</html>
Tabelas – 2 colunas
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr><!--linha 1-->
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
<tr><!--linha 2-->
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
</body>
</html>
Tabelas – 3 colunas
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr><!--linha 1-->
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr><!--linha 2-->
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
</table>
</body>
</html>
Tabelas - Mesclar
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr><!--linha 1-->
<td colspan="3">Coluna 1, 2 e 3</td>
</tr>
<tr><!--linha 2-->
<td>Coluna 1</td>
<td>Coluna 2</td>
<td>Coluna 3</td>
</tr>
<tr><!--linha 3-->
<td colspan="2">Coluna 1 e 2</td>
<td>Coluna 3</td>
</tr>
</table>
</body>
</html>
Tabelas - Títulos
<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%" border="1">
<tr>
<th>Item</th>
<th>Preço</th>
</tr>
<tr>
<td>Batata</td>
<td>R$ 5,80</td>
</tr>
</table>
</body>
</html>
<th> Título da coluna
Posso usar várias tags simultaneamente?
Regra: A ultima tag a ser aberta será a primeira a ser fechada
<!DOCTYPE html>
<html>
<body>
<p>
<b><i>oi tudo bem?</b>
</p>
</body>
</html>
hiperlinks
É uma referência aos dados que
cada pessoa pode seguir
diretamente clicando, tocando ou
passando o mouse durante a
navegação.
Os hiperlinks criam
ligações/vínculos entre endereços
na web e documentos.
hiperlink
<!DOCTYPE html>
<html>
<body>
<p>Exemplo de hiperlinks:</p>
<a href="pagina1.html">Click Aqui</a>
</body>
</html>
Ao clicar em “Click Aqui” será carregado o
arquivo “pagina1.html”
Hiperlink – carrega em outra aba
<!DOCTYPE html>
<html>
<body>
<p>Exemplo de hiperlinks:</p>
<a href="pagina1.html" target="_new">Click
Aqui</a>
</body>
</html>
Ao clicar em “Click Aqui” será carregado o
arquivo “pagina1.html” em outra aba
Hiperlinks – Qualquer Arquivo
<!DOCTYPE html>
<html>
<body>
<p>Exemplo de hiperlinks:</p>
<a href="nomeArquivo.exemplo">Click
Aqui</a>
</body>
</html>
O NOME DO ARQUIVO OBRIGATORIAMENTE
DEVE POSSUIR SUA EXTENSÃO.
Ao clicar em “Click Aqui” será carregado o
arquivo “pagina1.html” em outra aba
Caso as paginas estejam no mesmo
diretório
<!DOCTYPE html>
<html>
<body>
<p>Exemplo de menu</p>
<a href="pagina1.html">Opçao 1</a><br>
<a href="pagina1.html">Opçao 2</a><br>
<a href="pagina1.html">Opçao 3</a><br>
</body>
</html>
Caso as paginas estejam em outro
diretório
<!DOCTYPE html>
<html>
<body>
<p>Exemplo de menu</p>
<a href=“teste/pagina1.html">Opçao 1</a><br>
<a href=“exemplo/pagina1.html">Opçao 2</a><br>
<a href="pagina1.html">Opçao 3</a><br>
</body>
</html>
Caso as paginas estejam em diretórios
<!DOCTYPE html>
<html>
<body>
<p>Exemplo link:</p>
<a href="arquivos/p1.html">Carregar p1</a><br>
</body>
</html>
Dentro da pasta “arquivos” existe o arquivo
“p1.html”
HYPERLINKS para imagens
<!DOCTYPE html>
<html>
<body>
<p>Exemplo link:</p>
<a href="fotos/praia.jpg">Carregar foto</a><br>
</body>
</html>
Ao clicar em “Carregar foto” é carregado o
arquivo “praia.jpg”