Prof. Mauricio Garcia Nascimento Prof. Daniel Arndt Alves
Introdução ao Desenvolvimento de Sistemas Web com PHP Programa de Verão IME-USP 2014
Introdução ao HTML
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
HTML – HyperText Markup Language
!2
Linguagem de Marcação de Hipertexto
Utilizado em páginas Web
Geralmente tem a extensão html ou htm
Arquivo de texto “plano”
Pode ser escrito a partir de qualquer editor(NVU, Bloco de Notas, GEdit, Kompozer, etc.)
Contem marcas (tags)
Tags HTML
!3
Marcas especiais interpretadas pelo navegador
Definem a apresentação da página
São contidas entre < e >
São inseridas individualmente ou aos pares
Podem conter atributos
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tags HTML
!4
Inserção aos pares
Tag tem abertura e fechamento
<tag>conteúdo</tag>
!
Inserções individuais
Tag única (opcionalmente com fechamento)
<tag />
!
Podem conter atributos
<tag atributo1=“y” atributo2=“x”>conteúdo</tag>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Convenções
!5
Nome das tags e dos atributos em minúsculo
Valor de atributos entre aspas simples ou duplas
Ordem de abertura e fechamento das tags deve ser respeitada!
!
<tag1><tag2>....</tag1></tag2> ERRADO !
<tag1><tag2>....</tag2></tag1> CORRETO
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Cuidado!
!6
HTML não é linguagem de programação!
HTML é apenas um arquivo que o navegador consegue interpretar
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tags HTML
!7
Principais Tags
HTML
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Formatação
!8
<strong> Negrito <em> Itálico <u> Sublinhado !texto <strong>negrito</strong> texto <em>itálico</em> <u><strong>combinação de formatos</strong></u>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Quebra de linha
!9
<br>
• Força quebra de linha
• É uma tag simples
!uma linha<br />outra linha<br />fim linha1<br /><br /><br />linha2
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Linha horizontal
!10
<hr>
• Faz quebra automática de linha
• Tag simples
!<hr /> <hr size="10" /> <hr width="80%" /> <hr size="5" width="100" color="red" />
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Cabeçalhos
!11
<h1> <h2> <h3> <h4> <h5> <h6>
• Faz quebra automática de linha ao final
!<h1>Título da página</h1> <h3>Outro título</h3> <h6 align="center">centralizado</h6>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Parágrafo
!12
<p>
• Faz quebra automática de linha
!<p>parágrafo1</p><p>outro parágrafo</p> <p align="justify">alinhamento justificado</p>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Comentários HTML
!13
• Sempre entre <!-- e -->
• Pode ter múltiplas linhas
• O navegador recebe todos os comentários inseridos no código HTML, mas estes não são exibidos para o usuário
!<!-- início da página --> <strong>Conteúdo da página</strong> <!-- um comentário de mais de uma linha -->
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Listas
!14
<ul> lista não ordenada <ol> lista ordenada
• Em conjunto com tag <li>
!<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
• item 1
• item 2
• item 3
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Listas aninhadas
!15
• item A
• sub-item1
• sub-item2
• item B
• sub1
• sub2
• sub3
• item 3.1
• item 3.2
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Representação de caracteres especiais
!16
&nome; &#num;
!x < y x < y X&Y Comércio ltda. X&Y Comércio ltda. espaço em branco espaço em branco
Tabela de caracteres especiais http://www.ime.usp.br/~glauber/html/acentos.htm
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Especificação de caminhos
!17
URL – Uniform Resource Locator
Endereço único de um recurso em uma rede
Recurso: página HTML, documento, vídeo, imagem, etc...
Base para a localização de páginas na Web
home
notícias inform. down
Rede local, Intranet ou Internet
url
url
url url
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
protocolo – protocolo de acesso (formato de comunicação)
HTTP, HTTPS, FTP, SSH
usuário – nome do usuário que acessa o recurso
senha – senha do usuário
máquina – máquina do recurso a ser requisitado
www.site.com.br, 10.3.1.20, ...
porta – porta de acesso ao recurso
recurso – caminho e nome do recurso
consulta – envio de parâmetros durante requisição
protocolo://[usuário[:senha]@]máquina[:porta][/recurso[?consulta]]
Composição de uma URL
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
http://www.site.com.br http://www.site.com.br/login.htm ftp://admin:[email protected]/arquivos/documento.txt http://intranet:8080/homepage.htm https://www.site.com.br/admin/restrito.htm http://10.3.1.30/produtos/lista.php?cod=20
Alguns exemplos
protocolo://[usuário[:senha]@]máquina[:porta][/recurso[?consulta]]
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
URL’s - exemplos
!20
index.htm
servidor: intranet
http://intranet/index.htm
contato.htmhttp://intranet/contato.htm
informativo.htmhttp://intranet/informativo.htm
recados.htmhttp://intranet/recados.htm
main.htm
servidor: www.news.com
http://www.news.com/main.htm
main.htmhttp://www.news.com/news/main.htm
cadastro.htmhttps://www.news.com/admin/cadastro.htm
usuarios.htmhttps://www.news.com/admin/usuarios.htm
news
admin
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
URL’s relativas
!21
Utilizadas em um recurso, para referenciar uma URL do mesmo servidor
Escrita mais limpa e simples
Necessário conhecimento da estrutura de diretórios e arquivos do servidor
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
URL’s relativas
!22
principal.htm ./principal.htm arquivo principal.htm, do diretório corrente !../menu.htm arquivo menu.htm, 1 diretório superior !../../noticias/news.htm arquivo news.htm, do diretório noticias, 2 diretórios superiores
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
URL’s - relativas
!23
index.htm
servidor: intranet
index.htm
contato.htm
contato.htm
informativo.htm
informativo.htm
recados.htm
recados.htm
main.htm
servidor: www.news.com
main.htm
main.htm
news/main.htm
cadastro.htm
admin/cadastro.htm
usuarios.htm
admin/usuarios.htm
news
admin
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Link
!24
<a> !
<a href="URL">texto</a> <a href="URL" target="_blank">link</a> !<a href="http://www.site.com.br/main.htm">texto</a>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Inserção de imagens
!25
<img>
• Tag simples
!<img src="URL_imagem" /> <img src="/img/logo.gif" /> <img src="/img/logo.gif" alt="descricao" /> <img src="URL" width="100" height="200" /> <img src="URL" align="center" border="1" /> <a href="lista.htm"><img src="figura.gif" /></a>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
• <table>
• <tr>
• <td>ID Nome Sobrenome Idade
#1 João Silva 25
#2 José Soares 30
Tabela
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabela: corpo
!27
<!-- definição de uma tabela --> <table> ... </table> <!-- final da tabela -->
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabela: linhas
!28
<!-- definição de uma tabela --> <table> <!-- definição de uma linha --> <tr>...</tr> </table> <!-- final da tabela -->
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabela: colunas
!29
<!-- definição de uma tabela --> <table> <!-- definição de uma linha --> <tr> <!-- definição de colunas --> <td>...</td> <td>...</td> </tr> </table> <!-- final da tabela -->
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabela
!30
<td>ID</td> <td>Nome</td> <td>Sobrenome</td> <td>Idade</td>
<td>#1</td> <td>João</td> <td>Silva</td> <td>25</td>
<td>#2</td> <td>José</td> <td>Soares</td> <td>30</td>
<table>
</table>
<tr>
<tr>
</tr><tr>
</tr>
</tr>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabela: atributos
!31
<table border="1" bgcolor="#cccc00">...</table> <table width="80%">...</table> <table align="center">...</table> !<td bgcolor="red" width="50%">...</td> <td align="right">...</td> <td colspan="3">...</td> !...<td><img src="figura.gif" /></td>... !...<td><table>...</table></td>...
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Tabelas aninhadas
!32Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Corpo da página
!33
<body> !
<body>...</body> <body bgcolor="#ffffcc">...</body> <body background="imagem.jpg">...</body>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Estrutura do documento HTML
!34
<html> <!-- definições do cabeçalho da página --> <head> <title>Título</title> </head> ! <body> <!-- corpo da página --> </body> </html>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Especificação do atributo para cor
!35
• rgb(10,20,255) valores decimais de 0 a 255
• #99FFCA valores hexadecimais de 0 a FF
• coral nome da cor
!<hr color="rgb(100, 150, 150)" /> <body bgcolor="#006666">...</body> <table bgcolor="darkslateblue">...</table>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Formatação de fonte
!36
<font>
• Utilizada com frequência em páginas HTML
• Tipo da fonte, cor, tamanho do texto
• Cuidado: tag obsoleta e não recomendada pela W3C nas versões mais recentes do HTML
!<font face="Arial" size="3">Texto</font> <font color="Red">Vermelho</font>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
CSS – Cascading Sytle Sheets
!37
Outro tipo de recurso acessado pelo navegador
Geralmente extensão css
Contem regras de formatação para o HTML
Separação da estrutura / formatação
Não é necessário uso da tag <font>
Não é necessário uso dos atributos color, bgcolor, tipo de fonte, alinhamento, borda, ...
Evita formatação interna no HTML
Documento mais legível, fácil manutençãoIntrodução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Estrutura básica do arquivo CSS
!38
estilo.css !h1 { color: #00ff00; text-align: center; } h2 { color: #dda0dd; } p { color: rgb(0,0,255); font-family: times; }
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Referências aos arquivos CSS
!39
Externa <head> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> !!!Incorporada <head> <style type="text/css"> body {background-color: red;} p {margin-left: 20px;} </style> </head>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Estrutura de um documento HTML
!40
<html> <head> <!– cabeçalho da página --> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Título</title> </head> ! <body> <!-- corpo da página --> </body> !</html>
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Formulário HTML
!41
Formulário HTML
Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014 Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservados
Prof. Daniel Arndt Alves – [email protected]
Declaração de um formulário
<form> !<form name="form1" action="URL" method="post"> <!-- campos do formulário --> ... </form>
!42Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo texto<input type="text" name="texto1" />
!
• Outros atributos:
• size: tamanho do campo
• maxlength: máximo de caracteres aceitos
!<input type="text" name="txt1" size="10" maxlength="15" />
!43Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo senha<input type="password" name="passwd1" /> !
• Outros atributos:
• size: tamanho do campo
• maxlength: máximo de caracteres aceitos
!<input type="password" name="passwd1" size="10" maxlength="15" />
!44Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo checkbox
<input type="checkbox" name="chk1" value="1" /> !
• Uma tag para cada checkbox
• Outros atributos
• checked: trazer o formulário com o checkbox marcado
!<input type="checkbox" name="chk" value="1" checked="checked" /> !<input type="checkbox" name="chk" value="2" />
!45Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo radio
<input type="radio" name="rd1" value="1" /> !
• Uma tag para cada radio, todos com o mesmo nome (no grupo)
• Outros atributos
• checked: trazer o formulário com o radio marcado
!<input type="radio" name="rd" value="1" checked="checked" /> <input type="radio" name="rd" value="2" />
!46Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo textarea<textarea name="txtarea1">...</textarea> !
• Outros atributos:
• cols: número de colunas
• rows: número de linhas
!<textarea name="txtarea1" cols="80" rows="10"> texto da textarea </textarea>
!47Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo caixa de seleção
• Caixa de seleção
<select name="sel1">...</select> !
• Caixa de seleção múltipla
<select name="sel1" multiple="multiple">...</select> !
• Elementos da seleção
<option>opção 1</option> <option selected="selected">opção 2</option>
!48Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo oculto<input type="hidden" name="oculto" value="123" /> Importante: este campo é oculto apenas na visualização da página no
navegador; entretanto ele é enviado juntamente com o código da página
HTML como um outro campo qualquer
!49Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Campo botão
Enviar formulário
<input type="submit" name="btnsub" value="Gravar" /> !
“Limpar” formulário
<input type="reset" name="btnrst" value="Limpar" />
!50Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - [email protected] - todos os direitos reservadosProf. Daniel Arndt Alves – [email protected]
Top Related