HTML Básico

Introdução ao HTML
Prof. Mauricio Garcia Nascimento
Prof. Daniel Arndt Alves
Introdução ao Desenvolvimento de Sistemas Web com PHP
Programa de Verão IME-USP 2014

HTML – HyperText Markup Language
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)

!2

Introdução ao Desenvolvimento de Sistemas Web com PHP - Programa de Verão IME-USP 2014
Prof. Mauricio Garcia Nascimento - mauricio@ime.usp.br - todos os direitos reservados 
Prof. Daniel Arndt Alves – progdan@progdan.pro.br

Tags HTML
Marcas especiais interpretadas pelo navegador
Deﬁnem a apresentação da página
São contidas entre < e >
São inseridas individualmente ou aos pares
Podem conter atributos

!3


Tags HTML
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>
!4


Convenções
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>

!5

CORRETO


Cuidado!
HTML não é linguagem de programação!
HTML é apenas um arquivo que o navegador
consegue interpretar

!6


Tags HTML

Principais Tags
HTML

!7


Formatação
<strong>
<em>
<u>

Negrito
Itálico
Sublinhado

!
texto <strong>negrito</strong>
texto <em>itálico</em>
<u><strong>combinação de formatos</strong></u>

!8


Quebra de linha
<br>

• Força quebra de linha
• É uma tag simples
!
uma linha<br />outra linha<br />fim
linha1<br /><br /><br />linha2

!9


Linha horizontal
<hr>

• Faz quebra automática de linha
• Tag simples
!
<hr
<hr
<hr
<hr

!10

/>
size="10" />
width="80%" />
size="5" width="100" color="red" />


Cabeçalhos
<h1> <h2> <h3> <h4> <h5> <h6>

• Faz quebra automática de linha ao ﬁnal
!
<h1>Título da página</h1>
<h3>Outro título</h3>
<h6 align="center">centralizado</h6>

!11


Parágrafo
<p>

• Faz quebra automática de linha
!
<p>parágrafo1</p><p>outro parágrafo</p>
<p align="justify">alinhamento justificado</p>

!12


Comentários HTML
• 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>
<!-um comentário
de mais de
uma linha
-->
!13

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

item 1
item 2

•

item 3

</ul>

!14


Listas aninhadas
• item A
•

sub-item1

•

sub-item2

• item B
•

sub1

•

sub2

•

sub3
•
•

!15

item 3.1
item 3.2


Representação de caracteres especiais
&nome;
&#num;
!

x < y
X&Y Comércio ltda.
espaço em branco

x<y
X&Y Comércio ltda.
espaço em branco

Tabela de caracteres especiais
http://www.ime.usp.br/~glauber/html/acentos.htm

!16


Especificação de caminhos
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
Rede local, Intranet ou Internet
home
url

notícias
url

!17

inform.
url

down
url


Composição de uma URL
protocolo://[usuário[:senha]@]máquina[:porta][/recurso[?consulta]]

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

Alguns exemplos
protocolo://[usuário[:senha]@]máquina[:porta][/recurso[?consulta]]

http://www.site.com.br
http://www.site.com.br/login.htm
ftp://admin:passwd@10.3.1.20/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


URL’s - exemplos
servidor: intranet

servidor: www.news.com

main.htm

index.htm

contato.htm
http://intranet/contato.htm

news

http://www.news.com/main.htm
admin

http://intranet/index.htm

main.htm
http://www.news.com/news/main.htm

informativo.htm
http://intranet/informativo.htm

cadastro.htm
https://www.news.com/admin/cadastro.htm

recados.htm
http://intranet/recados.htm

usuarios.htm
https://www.news.com/admin/usuarios.htm

!20


URL’s relativas
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

!21


URL’s relativas
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

!22


URL’s - relativas
servidor: www.news.com
main.htm

index.htm

contato.htm
contato.htm

main.htm
admin

index.htm

news

servidor: intranet

main.htm
news/main.htm

informativo.htm
informativo.htm

recados.htm
recados.htm

cadastro.htm
admin/cadastro.htm

usuarios.htm
admin/usuarios.htm

!23


Link
<a>
!
<a href="URL">texto</a>
<a href="URL" target="_blank">link</a>

!
<a href="http://www.site.com.br/main.htm">texto</a>

!24


Inserção de imagens
<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>

!25


Tabela
• <table>
• <tr>
• <td>
ID

Nome

Sobrenome

Idade

#1

João

Silva

25

#2

José

Soares

30


Tabela: corpo

<table>
...
</table>


!27

Tabela: linhas
<table>

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

!28

Tabela: colunas
<table>

<tr>

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

!29

Tabela
<table>

<td>ID</td>

<tr>

<td>Nome</td>

<td>Sobrenome</td>

<td>Idade</td>

<td>#1</td>

<tr>

<td>João</td>

<td>Silva</td>

<td>25</td>

</tr>

</tr>
<td>#2</td>

<td>José</td>

<td>Soares</td>

<td>30</td>

<tr>

</tr>

</table>

!30


Tabela: atributos
<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>...

!31


Tabelas aninhadas

!32


Corpo da página
<body>
!
<body>...</body>
<body bgcolor="#ffffcc">...</body>
<body background="imagem.jpg">...</body>

!33


Estrutura do documento HTML
<html>

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

<body>

</body>
</html>

!34

Especificação do atributo para cor
• 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>

!35


Formatação de fonte
<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>

!36


CSS – Cascading Sytle Sheets
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
!37


Estrutura básica do arquivo CSS
estilo.css
!
h1 {

color: #00ff00;
text-align: center;
}
h2 {
color: #dda0dd;
}
p {
color: rgb(0,0,255);
font-family: times;
}

!38


Referências aos arquivos CSS
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>

!39


Estrutura de um documento HTML
<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>

!40

Formulário HTML

Formulário HTML

!41


Declaração de um formulário
<form>
!
<form name="form1" action="URL" method="post">

...
</form>

!42

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


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

!44


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


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


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>

!47


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


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


Campo botão
Enviar formulário
<input type="submit" name="btnsub" value="Gravar" />

!

“Limpar” formulário
<input type="reset" name="btnrst" value="Limpar" />

!50


HTML Básico

Mais conteúdo relacionado

Destaque

Semelhante a HTML Básico

Mais de Daniel Arndt Alves

Último

HTML Básico