HTML Básico

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)

mailto:[email protected]


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





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>





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





Cuidado!

!6

HTML não é linguagem de programação!

HTML é apenas um arquivo que o navegador consegue interpretar





Tags HTML

!7

Principais Tags

HTML





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>





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





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" />





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>





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>





Comentários HTML

!13

• Sempre entre 

• 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

! <strong>Conteúdo da página</strong>

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





Listas aninhadas

!15

• item A

• sub-item1

• sub-item2

• item B

• sub1

• sub2

• sub3

• item 3.1

• item 3.2





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





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





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





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





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





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





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





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





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>





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>





• <table>

• <tr>

• <td>ID Nome Sobrenome Idade

#1 João Silva 25

#2 José Soares 30

Tabela





Tabela: corpo

!27

 <table> ... </table>

Tabela: linhas

!28

 <table>  <tr>...</tr> </table>

Tabela: colunas

!29

 <table>  <tr>  <td>...</td> <td>...</td> </tr> </table>

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>





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





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>





Estrutura do documento HTML

!34

<html>  <head> <title>Título</title> </head> ! <body>  </body> </html>

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>





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>





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




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; }





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>





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>  </body> !</html>

Formulário HTML

!41

Formulário HTML





Declaração de um formulário

<form> !<form name="form1" action="URL" method="post">  ... </form>

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" />





Campo senha<input type="password" name="passwd1" /> !


• size: tamanho do campo

• maxlength: máximo de caracteres aceitos

!<input type="password" name="passwd1" size="10" maxlength="15" />





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" />





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" />





Campo textarea<textarea name="txtarea1">...</textarea> !


• cols: número de colunas

• rows: número de linhas

!<textarea name="txtarea1" cols="80" rows="10"> texto da textarea </textarea>





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>





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





Campo botão

Enviar formulário

<input type="submit" name="btnsub" value="Gravar" /> !

“Limpar” formulário

<input type="reset" name="btnrst" value="Limpar" />





HTML Básico

Education

Transcript of HTML Básico