Algoritmosi 05 2018

07/09/2018
Ricardo Ribeiro Assink

ricardo.assink@unisul.br
ricardo@equipedigital.com
http://www.ricardoassink.com.br/
Algoritmos I– Ricardo Ribeiro Assink – ricardo.assink@unisul.br 1
HTML
HTML significa ‘HyperText Markup Language - Linguagem de

Formatação de Hipertexto’, e é uma linguagem universal
destinada à elaboração de páginas com hiper-texto como
próprio nome diz.
O HTML consiste em texto formatado por TAGS (etiquetas).
Essas tags seguem um controle hierárquico definido da

seguinte forma:
<tag> </tag>
Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 2
1
07/09/2018
HTML
Na estrutura de um documento HTML a disposição das tags
deve seguir um padrão.
Todos as ‘tags’ obedecem a uma hierarquia, como no seguinte

exemplo:
<a> <b> <c> </c> </b> </a>
O primeiro a abrir é o último a fechar, e vice-versa.

<a> <b> <c> </a> </b> </c> ESTÁ ERRADO.
HTML
Estrutura básica HTML:
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Minha primeira página web. <br>
<b>Este texto está em negrito</b>
</body>
</html>
2
07/09/2018
Exercício html01
arquivo: html01.html
acesso: http://localhost/html01/html01.html
Implemente sua primeira página HTML.

Use o exemplo prático de estrutura básica já
apresentado. Crie uma pasta dentro de htdocs
chamada html01 e crie o arquivo dentro dela.
HTML
3
07/09/2018
HTML
Algumas tags e parâmetros HTML:
Inclua os códigos abaixo em html01.html
<a href =“http://www.google.com.br”> Link para o Google </a>

<b> Texto em negrito </b>
<i> Texto em itálico </i>
<p> Definição de parágrafo </p>
<h1> Cabeçalho que pode ir de 1 a 6 </h1>
<font color=“black”> Texto com a cor preta </font>
<hr > insere uma linha dividindo o conteúdo
<br > insere um recuo (enter)
HTML
Continue inserindo e verificando o resultado..
Tags HTML podem ter mais de um parâmetro:
<font color=“black” size=“2”> Texto com a cor preta tamanho 2 </font>

<img src=“imagem.jpg” align=“left”>
<hr width="500" size="2" />
4
07/09/2018
Então precisamos saber HTML.
Para mais informações sobre HTML veja:

http://www.w3schools.com/HTML/
Na URL abaixo, lista completa de tags:

http://www.w3schools.com/tags/default.asp
Na URL abaixo, leia sobre a construção de tabelas:

http://www.w3schools.com/HTML/html_tables.asp
Formulários HTML.
Todo formulário em HTML é construído usando elementos dentro de um
bloco <FORM>
O bloco <FORM> define a URL que receberá o formulário e pode definir

também o método usado.
<FORM
ACTION="URL para onde serão enviado os dados”
METHOD="método HTTP (pode ser GET ou POST)”
>
... Aqui vão os itens do formulário
</FORM>
5
07/09/2018
Formulários HTML.
Formulários são similares a links.
Um par formulário-botão tem o mesmo efeito que um link criado
com <A HREF>
– O link está no formulário e o evento no botão
O bloco
<FORM ACTION="/dados/tutorial.html">
<INPUT TYPE="submit" VALUE="Tutorial">
</FORM>
gera a mesma requisição que
<A HREF="/dados/tutorial.html">Tutorial</A>
Exemplo de formulário HTML

<form name="form1" method="post" action="processa_matricula.php">
Nome: <input type="text" name="nome" id="nome" />
<br><br>
Disciplinas em que está matriculado:
<br>
<input name="disciplina" type="checkbox" value="Prog. web" checked="checked" /> Programação para web
<br>
<input type="checkbox" name="disciplina2" value="Algoritmos II" /> Algoritmos II
<br><br>
Sexo:
<br>
<input name="Sexo" type="radio" value="M" checked="checked" />
Masculino
<br>
<input type="radio" name="Sexo" value="F" />
Feminino
<br><br>
<input name="botao" type=“submit" value="Enviar" />
</form>
6
07/09/2018
Exercício html02
arquivo: matricula.php
acesso: http://localhost/html02/matricula.php
Crie uma pasta html02 dentro de htdocs e dentro

crie um arquivo chamado matricula.php
Dentro do arquivo coloque a estrutura básica
html e dentro da tag BODY inclua o código do
exemplo anterior.
Formulários HTML.
7
07/09/2018
PHP, vamos programar!

- Dentro da pasta html02 crie um arquivo chamado
processa_matricula.php
- Note que o seu arquivo matricula.php tem como ACTION do formulário
- Vamos então processar os dados enviados de matricula.php
- Veja o conteúdo do arquivo processa_matricula.php na tela seguinte.
- arquivo: processa_matricula.php
acesso: http://localhost/html02/processa_matricula.php
<?php
// Isso é um comentário
// http://localhost/html02/processa_matricula.php?exemplo=valor001&exemplo2=valor002
$nome = $_POST['nome'];
$disciplina = $_POST['disciplina'];
$disciplina2 = $_POST['disciplina2'];
$Sexo = $_POST['Sexo'];
$exemplo = $_REQUEST['exemplo'];
$exemplo2 = $_REQUEST['exemplo2'];
echo "<b> Nome: </b>";

echo $nome;
echo "<br><br>";
CONTINUA ->
8
07/09/2018
echo "<b> Disciplinas: </b>";
echo "<br>";
echo $disciplina;
echo "<br>";
echo $disciplina2;
echo "<br><br>";
echo "<b> Sexo: </b>";

echo $Sexo;
echo "<br><br>";
echo "<b> Variáveis por REQUEST: </b>";

echo "<br>";
echo $exemplo;
echo "<br>";
echo $exemplo2;
?>
Mais uma vez pra fixar!
- Crie uma pasta chamada html03 dentro do diretório

htdocs.
- Dentro desta pasta crie um arquivo chamado
exemplo2.php
- Insira o código do exemplo a seguir.
- arquivo: exemplo2.php
acesso: http://localhost/html03/exemplo2.php
9
07/09/2018
exemplo2.php
<html>
<head>
<title>Exemplo 2</title>
</head>
<body>
<form name="form1" method="post" action="processa_exemplo2.php">
Estado:
<select name="estado">
<option value="SC">Santa Catarina</option>
<option value="SP" selected="selected">São Paulo</option>
<option value="RS">Rio Grande do Sul</option>
</select>
<br><br>
CONTINUA ->
exemplo2.php
Descrição:
<br>
<textarea name="descricao" cols="50" rows="3">Valor inicial</textarea>
<br><br>
Campo oculto:
<br>
<input name="campo_oculto" type="hidden" value="Campo Oculto" />
<br><br>
Senha:
<br>
<input name="senha" type="password" value="qualquer valor" />
<br><br>
<input name="botao" type=“submit" value="Enviar" />
</form>
</body>
</html>
10
07/09/2018
Formulários HTML.
processa_exemplo2.php
<?php
$estado = $_POST['estado'];
$descricao = $_POST['descricao'];
$campo_oculto = $_POST['campo_oculto'];
$senha = $_POST['senha'];
echo "<b> Estado: </b>";

echo $estado;
echo "<br><br>";
echo "<b> Descrição: </b>";

echo "<br>";
echo $descricao;
echo "<br><br>";
echo "<b> Campo Oculto: </b>";

echo $campo_oculto;
echo "<br><br>";
echo "<b> Senha: </b>";

echo "<br>";
echo $senha;
?>
11
07/09/2018
CSS
CSS é a sigla para o termo em inglês Cascading Style

Sheets, que traduzido para o português significa Folha
de Estilo em Cascatas. O CSS é fácil de aprender e
entender e é facilmente utilizado com as linguagens de
marcação HTML
CSS
CSS é uma linguagem de folha de estilos, que tem o papel de

tornar uma página apresentável na web, relacionada
diretamente com o design e aparência. Ou seja, o CSS é uma
camada que se usa para controlar o estilo da sua página da
web.
Para entender o que é CSS pense na decoração da sua

página. Utilizando o CSS é possível alterar a cor do texto e do
fundo, fonte, espaçamento entre parágrafos, criar tabelas,
usar variações de layouts, ajustar imagens para suas
respectivas telas e assim por diante. Podemos dizer que toda
a parte visual da sua página será definida com o CSS.
12
07/09/2018
CSS - Limitações
O CSS tem alguns limites. Vale a pena citar alguns deles que
causam mais impacto na construção de uma página:
• Nem todos os browsers suportam todas as especificações das

folhas de estilo.
• Não é possível ler um arquivo usando CSS.
• Não interage com Base de dados.
• Não pode solicitar uma página da web.
• Dependendo no nível de sofisticação requer testes de validação.
• Funciona diferente de acordo com cada browser e ainda cada
browser pode criar sua própria folha de estilo.
CSS
O CSS funciona com o sistema de personalização de

estilos de três elementos:
• Tag (personalização das tags do .html como body, div,

li, ul, ol e table).
• #id (adiciona um ID por tag html fazendo uma
personalização).
• .classes (é possível adicionar mais de uma classe por
tag html).
13
07/09/2018
CSS
Básico sobre a utilização:
body{
/* CSS coloca estilo em tags HTML */
}
.classe01{
/* Para ser usado no atributo class="" de um componente HTML. Use
quantas vezes quiser. Vários elementos podem assumir o mesmo padrão */
}
#id01{
/* Para ser usado no atributo id="" de um componente HTML.
Usado para personalizar um determinado elemento.
Vários elementos podem assumir o mesmo padrão */
}
CSS
Hierarquia exemplo:
.classe01 textarea {
/* Configura o componente TEXTAREA dentro de classe01 */
}
14
07/09/2018
CSS
Para que o arquivo base possa usar as definições em uma

folha de estilo, este deve linkar o arquivo usando a instrução
abaixo dentro da tag <head> do arquivo base.
Exemplo:
<head>
<link rel="stylesheet" type="text/css" href="folha_estilo.css">
</head>
Isto fará com que matricula_css.php (arquivo base) use as

definições que estão em folha_estilo.css.
CSS
Agora crie uma pasta em seu htdocs chamada CSS.
Para lá copie os arquivos:
matricula_css.php
processa_matricula_css.php
folha_estilo.css
• Baixe os arquivos e abra na IDE.

• Note que são versões modificadas dos arquivos que estão no diretório
HTML02 dentro de htdocs.
• Abra um navegador Chrome com a URL:

http://localhost/css/matricula_css.php
• Acompanhe a explicação do professor.
• Usaremos estes 3 arquivos até o final da disciplina como

modelos para criação de nossos exercícios para
programação PHP.
15
07/09/2018
CSS
Veja guia completo de definições que podem ser usadas

para estilizar suas aplicações:
http://www.w3c.br/divulgacao/pdf/guia-css-w3cbr.pdf
• Exercício CSS
Abra um navegador Chrome com a URL:

http://localhost/css/matricula_css.php
E use a ferramenta para desenvolvedores (F12)

para guiar você nas alterações do arquivo
folha_estilo.css
Crie um novo estilo para a página matricula_css.php
Não esqueça de fazer backup dos arquivos.
16
07/09/2018
• Exercício CSS
FIM
34
17

Algoritmosi 05 2018

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Algoritmosi 05 2018

Transféré par

Droits d'auteur :

Formats disponibles

07/09/2018

Ricardo Ribeiro Assink

HTML significa ‘HyperText Markup Language - Linguagem de

O HTML consiste em texto formatado por TAGS (etiquetas).

Essas tags seguem um controle hierárquico definido da

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 2

Todos as ‘tags’ obedecem a uma hierarquia, como no seguinte

O primeiro a abrir é o último a fechar, e vice-versa.

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 3

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 4

Implemente sua primeira página HTML.

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 6

Inclua os códigos abaixo em html01.html

<a href =“http://www.google.com.br”> Link para o Google </a>

Continue inserindo e verificando o resultado..

Tags HTML podem ter mais de um parâmetro:

<font color=“black” size=“2”> Texto com a cor preta tamanho 2 </font>

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 8

Então precisamos saber HTML.

Para mais informações sobre HTML veja:

Na URL abaixo, lista completa de tags:

Na URL abaixo, leia sobre a construção de tabelas:

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 9

O bloco <FORM> define a URL que receberá o formulário e pode definir

Exemplo de formulário HTML

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 12

Crie uma pasta html02 dentro de htdocs e dentro

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 14

PHP, vamos programar!

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 15

echo "<b> Nome: </b>";

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 16

echo "<b> Sexo: </b>";

echo "<b> Variáveis por REQUEST: </b>";

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 17

Mais uma vez pra fixar!

- Crie uma pasta chamada html03 dentro do diretório

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 18

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 19

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 21

echo "<b> Estado: </b>";

echo "<b> Descrição: </b>";

echo "<b> Campo Oculto: </b>";

echo "<b> Senha: </b>";

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 22

CSS é a sigla para o termo em inglês Cascading Style

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 23

CSS é uma linguagem de folha de estilos, que tem o papel de

Para entender o que é CSS pense na decoração da sua

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 24

• Nem todos os browsers suportam todas as especificações das

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 25

O CSS funciona com o sistema de personalização de

• Tag (personalização das tags do .html como body, div,

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 26

Básico sobre a utilização:

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 28

Para que o arquivo base possa usar as definições em uma

Isto fará com que matricula_css.php (arquivo base) use as

Algoritmos I – Ricardo Ribeiro Assink – ricardo.assink@unisul.br 29

• Baixe os arquivos e abra na IDE.

• Abra um navegador Chrome com a URL:

• Acompanhe a explicação do professor.