HTML Básico

Revisão de HTML Básico

1. 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

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]
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)

3. 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]

4. 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]

5. 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]

6. 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]

7. 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]

8. 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]

9. 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]

10. 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]

11. 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]

12. 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]

13. 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]

14. 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]

15. 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]

16. Representação de caracteres especiais
!16
&nome;
&#num;
!
x &lt; y x < y
X&amp;Y Comércio ltda. X&Y Comércio ltda.
espaço&nbsp;em&nbsp;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]

17. 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íciasinform.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]

18. 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]

19. 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]

20. URL’s - exemplos
!20
index.htm
servidor: intranet
http://intranet/index.htm
contato.htm
http://intranet/contato.htm
informativo.htm
http://intranet/informativo.htm
recados.htm
http://intranet/recados.htm
main.htm
servidor: www.news.com
http://www.news.com/main.htm
main.htm
http://www.news.com/news/main.htm
cadastro.htm
https://www.news.com/admin/cadastro.htm
usuarios.htm
https://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]

21. 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]

22. 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]

23. 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]

24. 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]

25. 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]

26. •<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]

27. 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]

28. 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]

29. 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]

30. 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]

31. 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]

32. Tabelas aninhadas
!32
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]

33. 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]

34. 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]

35. 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]

36. 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]

37. 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ção
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]

38. 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]

39. 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]

40. 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]

41. 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]

42. Declaração de um formulário
<form>
!
<form name="form1" action="URL" method="post">
<!-- campos do formulário -->
...
</form>
!42
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]

43. 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" />
!43
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]

44. 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" />
!44
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]

45. 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" />
!45
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]

46. 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" />
!46
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]

47. 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>
!47
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]

48. 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>
!48
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]

49. 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
!49
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]

50. Campo botão
Enviar formulário
<input type="submit" name="btnsub" value="Gravar" />
!
“Limpar” formulário
<input type="reset" name="btnrst" value="Limpar" />
!50
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]