Você está na página 1de 52

Curso Bsico de PHP

Breno Santana Santos


brenosantos@itatechjr.com.br
HTML
BSICO
Curso ofertado pela Itatech Group Jr.

Departamento de Sistemas de Informao DSI/UFS/Itabaiana


Itatech Group Jr Softwares Itabaiana Jr.
www.itatechjr.com.br contato@itatechjr.com
Agenda

Introduo
Pgina HTML
Elementos e Atributos
Declarao DOCTYPE
Cabea do Documento
Corpo do Documento

2
Introduo

HTML (Linguagem de Marcao de Hipertexto).


Linguagem de Script.
Entendida/Interpretada pelo Browser.
Permite a combinao de texto com informaes
extras sobre o texto.
Permite a ligao de textos entre computadores
por meio da Internet.
Pginas HTML so arquivos de extenso .html ou
.htm.
No case sensitive.
3
Pgina HTML

Para criar uma pgina HTML, basta criar um


arquivo com extenso .html ou .htm.
Uma pgina HTML dividida em duas partes,
cabea e corpo. Na cabea so definidos os
principais atributos do documento. J no corpo
contm a parte visvel do documento (parte
interpretada).
Dentro de um arquivo HTML contm textos que
definem os elementos da linguagem HTML
usando etiquetas de marcao (tags HTML).
Essas tags determina como o browser ir
interpretar a pgina HTML. 4
Pgina HTML

Exemplo:
<html>

<head>
<title> Ttulo da Pgina </title>
</head>

<body>
Esta minha primeira pgina.
<b> Este texto est em negrito </b>
</body>

</html>
5
Elementos e Atributos

Um elemento HTML composto por uma tag de


abertura, contedo e tag de fechamento.
As tags HTML definem os elementos HTML.
A sintaxe de uma tag HTML a seguinte:
<[nome e atributos do elemento HTML]>
</[nome do elemento HTML]>

A tag de fechamento possui o smbolo / aps o


smbolo <.
Tudo entre as tags de abertura e fechamento
considerado como contedo do elemento HTML.
6
Elementos e Atributos

Os atributos servem para definir uma


propriedade de um elemento HTML.
Devem ser colocados sempre na tag de
abertura, logo aps o nome do elemento,
precedido de um espao.
Composto pelo nome do atributo, um sinal de
igual ( = ) e um valor de atributo entre aspas
duplas ou simples.
Exemplo: <body bgcolor = red>
Sempre entram em pares nome/valor.
A maioria dos atributos so utilizados pela
maioria das tags HTML, exceto as tags br e hr. 7
Declarao DOCTYPE
Ajuda ao browser na visualizao correta da
Pgina Web.
Existem muitos tipos de documentos na Web, e o
browser s pode interpretar pginas HTML 100%
corretas se ele conhece o tipo e verso do HTML
utilizada na pgina.
Define o tipo de documento e deve ser colocada
no incio do documento HTML, antes da tag
<html>.
Sintaxe:
HTML 5: <!DOCTYPE html>
HTML 4.0.1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" 8
"http://www.w3.org/TR/html4/loose.dtd">
Cabea do Documento

A cabea ou cabealho do documento HTML


definido pela tag <head>.
Contm informao de carter geral sobre o
contedo do documento.
As principais tags definidas dentro do cabealho
so:
<title>: Define o Ttulo da Pgina HTML.
<base>: Define a URL base para todas as ligaes
relativas da pgina.
<link>: Faz referncia a um recurso externo a
pgina HTML.
<meta>: Fornece informaes sobre o contedo do 9
documento HTML.
Cabea do Documento Tag <meta>
Contm informao de carter geral (meta-
informao) sobre o documento e deve ser
colocado dentro do elemento <head>.
Antigamente essa tag era muito utilizada pelos
motores de busca de pginas Web.
Principais atributos da tag <meta> so:
name: Finalidade da Informao.
content: Contedo da Informao.
charset: Codificao de Caracteres do documento
HTML.
Exemplo:
<meta name = keywords content = HTML,10
Curso de PHP, Itatech Jr.>
Corpo do Documento

O corpo do documento HTML definido pela tag


<body>.
Contm toda informao visvel para o usurio.
As principais atributos da tag <body> so:
bgcolor: Define a cor de plano de fundo.
background: Define a imagem de plano de fundo.
Seu valor deve ser o caminho ou URL da imagem.
text: Define a cor do texto do documento HTML.
link: Define a cor dos links.
alink: Define a cor dos links ativos atualmente.
vlink: Define a cor dos links j visitados.
11
Corpo do Documento

Os valores para os atributos bgcolor, background


e text podem ser expressos de trs formas:
Cdigo Hexadecimal da cor.

Exemplo: #FFFFFF (Branco).
Cdigo RGB.

Exemplo: rgb(255, 255, 255) (Branco).
Nome da cor.

Exemplo: white (Branco).

12
Corpo do Documento - Cabealhos

Servem para criar ttulos com o intuito de


diferenciar as sees da sua pgina. Possui seis
valores diferentes, sendo 1 o de maior fonte e 6
o de menor fonte.
Sintaxe: <hX> [contedo] </hX>, sendo X
um valor de 1 a 6.
Salta uma linha em branco entre um ttulo e
outro elemento HTML.
Exemplo:
<h1> Pargrafo 1 </h1>
<h3> Pargrafo 3 </h3>
<h6> Pargrafo 6 </h6> 13
Corpo do Documento Pargrafos

Servem para criar pargrafos.


Sintaxe: <p> [contedo] </p>.
Inclui uma linha em branco antes e depois de um
pargrafo.
Exemplo:
<p>
Pargrafo 1 Texto 1
Pargrafo 1 Texto 2
</p>
<p>
Pargrafo 2 Texto 1
Pargrafo 2 Texto 2
</p> 14
Corpo do Documento Pargrafos

Os principais atributos para pargrafos so:


align: Alinhamento do Texto do Pargrafo.

left: Alinhado Esquerda.

right: Alinhado Direita.

center: Texto Centralizado.

justify: Texto Justificado.
Exemplo:
<p align = center>
Pargrafo 1 Texto 1
Pargrafo 1 Texto 2
</p>
15
Corpo do Documento Quebra de Linha,
Linha Horizontal e Comentrios
As tags <br> ou </br> so utilizadas quando
voc quer terminar uma linha, mas no quer
comear um novo pargrafo. Onde voc deseja
que ocorra uma quebra de linha, voc coloca a
tag <br> ou </br>. No possui tag de
fechamento.
Comentrios so ignorados pelo browser. A
sintaxe da tag de comentrios :
<!-- [contedo] -->

Para ficar evidente a diviso do contedo da


pgina, podemos utilizar uma linha horizontal. A
sintaxe da linha horizontal : <hr> ou <hr/>. 16
Corpo do Documento Quebra de Linha,
Linha Horizontal e Comentrios
Exemplo:
<html>
<body>
Exemplo de Quebra de Linha.
<br>
Exemplo de Quebra de Linha.
</br>
Exemplo de Linha Horizontal.
<hr> <br> <hr/>
<!-- Isso um comentrio -->
</body>
</html>

17
Corpo do Documento Formatao de
Texto
A linguagem HTML define vrios elementos para
se formatar um texto, como por exemplo,
escrever em negrito, itlico, etc.
As principais tags de formatao so:
<b>: Define o texto em negrito.
<i>: Define o texto em itlico.
<u>: Define o texto em sublinhado.
<sub>: Define o texto em subscrito.
<sup>: Define o texto em sobrescrito.
<font>: Define a formatao de um texto em
termos de tipo de fonte, tamanho e cor de um
texto. 18
Corpo do Documento Formatao de
Texto
Os principais atributos da tag <font> so:
color: Especifica a cor do texto. Similar ao
bgcolor e background.
face: Especifica a fonte (estilo) do texto. Seu
valor pode ser o nome da fonte, ou ainda pode
ser uma lista dos nomes das fontes separados
por vrgula.

Exemplo:
Times New Roman
Times, Tahoma, Verdana
size: Especifica o tamanho da fonte do texto.
Seu valor deve ser um valor numrico (inteiro
positivo). 19
Corpo do Documento Formatao de
Texto
Exemplo:
<html>
<body>
<p> <b> Texto em Negrito </b> </p>
<p> <i> Texto em Itlico </i> </p>
<p> <u> Texto Sublinhado </u> </p>
<p> <font face=Arial, Verdana
Size=20 color=green>
Este est <sub> subscrito </sub>
e <sup> sobrescrito </sup>
</font>
</p>
</body>
</html> 20
Corpo do Documento Links
Por meio de links uma pgina pode referenciar
outra pgina ou um arquivo em algum
computador na Internet.
Isso pode ser feito pelo elemento a:
<a href=url_objeto> Objeto </a>
Os endereos de arquivos e pginas Web esto
na forma de URL, especificao do caminho de
um arquivo na Web.
O formato de uma URL
protocolo://host/estrutura_pastas/arquivo
http://www.itatechjr.com/docs/pdf/breno/teste.pdf
Existem trs formas de fazer links: links internos,
links locais e links externos. 21
Corpo do Documento Links

Links internos (ncoras) ligam uma seo de uma


pgina com uma outra seo da mesma pgina.
Para criar links internos, primeiramente defina o
nome para uma posio de uma pgina HTML e
depois defina o link que ir referenciar a posio
definida.
Nome da Seo: <a name = nome_secao>
[Ttulo da Seo] </a>.
Link da Seo: <a href = #nome_secao>
[Texto do Link] </a>.

22
Corpo do Documento Links

Links locais ou relativos permitem referenciar um


arquivo que esteja no mesmo computador que a
sua pgina. No precisa especificar o protocolo
da URL.
Utiliza ponto-ponto (..) na URL para referenciar
um arquivo HTML que esteja numa pasta
superior a da pgina HTML.
Para criar links locais, defina o link que ir
referenciar o arquivo ou pgina HTML.
Link: <a href = url_arquivo> [Texto do
Link] </a>.
23
Corpo do Documento Links

Links externos so aqueles que podem apontar


para qualquer arquivo disponvel na Internet.
necessrio especificar o protocolo na URL.
Para criar links externos, defina o link que ir
referenciar o arquivo ou pgina HTML.
Link: <a href = url> [Texto do Link]
</a>.
O principal atributo para o elemento <a> :
target: Determina onde o link ser aberto no
browser.

_blank: Abre em uma nova aba ou janela a
depender do browser. 24
Corpo do Documento Listas

A linguagem HTML possui tags para definir listas


de definies, listas enumeradas e listas com
marcadores.
Lista com Marcadores possui vrios itens
marcados todos com o mesmo smbolo.
Sintaxe: <ul> [Conjunto de Itens] </ul>.
Lista Enumerada possui vrios itens numerados.
Sintaxe: <ol> [Conjunto de Itens] </ol>.
Dentro dos elementos <ol> e <ul> devem ter
vrios elementos de itens definidos pelo
elemento <li>.
25
Corpo do Documento Listas

Dentro de uma lista podemos colocar pargrafos,


quebras de linha, imagens, outras listas, etc.
Exemplo:
<html>
<body>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
</body>
26
</html>
Corpo do Documento Divises

Existem situaes que desejamos que vrios


elementos tenham o mesmo valor de um
atributo. Com o elemento <div> podemos fazer
isso.
Sintaxe: <div> [contedo] </div>.
Exemplo:
<html>
<body>
<div align = center>
<p> Texto 1 </p>
<p> Texto 2 </p>
</div>
</body>
27
</html>
Corpo do Documento Imagens

Alm de manipular texto, o HTML permite exibir


imagens de uma maneira muito simples, usando
o elemento <img>.
Sintaxe: <img src=caminho_img />.
Os principais atributos para imagens so:
src: Localizao Completa (URL) da imagem.
uma referncia da imagem.
width: Largura da imagem na pgina HTML.
height: Altura da imagem na pgina HTML.
alt: Descrio da imagem caso a imagem
no consiga ser carregada.
28
Corpo do Documento Imagens

Os principais atributos para imagens so (cont.):


border: Tamanho da moldura da imagem.
Seu valor deve ser um valor absoluto (pixels).
align: Alinhamento da imagem. Similar ao
de Pargrafos.
vspace: Espaamento Vertical entre a
imagem e outro objeto. Seu valor deve ser
um valor absoluto (pixels).
hspace: Espaamento Horizontal entre a
imagem e outro objeto. Seu valor deve ser
um valor absoluto (pixels).
29
Corpo do Documento Imagens

Recomendao: O valor center para o


atributo align em imagens no funciona, sendo
recomendado incluir a imagem em uma diviso e
colocar na diviso o atributo align com o valor
center.
Os atributos height e width podem receber,
basicamente, dois tipos de valores:
Valores absolutos, representando a
quantidade de pixels na pgina.
Percentual do tamanho disponvel na pgina.

30
Corpo do Documento Imagens

Exemplo:
<html>
<body>
<div align = center>
<img
src = /opt/img1.jpg
alt = Imagem 1!
width = 300
height = 25%
vspace = 100
hspace = 100
border = 5
/>
</div>
</body>
31
</html>
Corpo do Documento - Tabelas

Tabelas auxiliam na visualizao de dados ou na


diviso de sua pgina em setores.
O elemento HTML que representa uma tabela a
tag <table>.
Sintaxe: <table> [Linhas e Clulas] </table>.
Tabelas so divididas em linhas e clulas. Linhas
so representadas pelo elemento <tr> e clulas
pelo elemento <td>. obrigatrio que um
elemento <td> esteja contido em um elemento
<tr>.
O elemento <th> similar ao <td> sendo que
o contedo estar em negrito e centralizado. 32
Corpo do Documento - Tabelas

Exemplo:
<html>
<body>
<table>
<tr>
<td> Linha 1 Clula 1 </td>
<th> Linha 1 Clula 2 </th>
</tr>
<tr>
<th> Linha 2 Clula 1 </th>
<td> Linha 2 Clula 2 </td>
</tr>
</table>
</body>
</html> 33
Corpo do Documento - Tabelas

Dentro de uma clula pode conter qualquer


elemento, inclusive outra tabela.
Os principais atributos da tag <table> so:
border: Define a borda da tabela. Seu valor
deve ser um valor absoluto (pixels).
cellspacing: Define o espaamento entre
duas clulas de uma tabela. Seu valor deve
ser um valor absoluto (pixels).
cellpadding: Define o espaamento entre o
contedo e as bordas da clula de uma
tabela. Seu valor deve ser um valor absoluto
(pixels). 34
Corpo do Documento - Tabelas

Os principais atributos da tag <table> so


(cont.):
height: Define a altura da tabela na pgina.
Similar ao de Imagens.
width: Define a largura da tabela na pgina.
Similar ao de Imagens.
Os principais atributos da tags <tr>, <td> ou
<th> so:
valign: Define o alinhamento vertical de
uma clula na tabela. Valores possveis so
top, middle ou bottom.
35
Corpo do Documento - Tabelas

Os principais atributos da tags <tr>, <td> ou


<th> so (cont.):
align: Define o alinhamento horizontal de
uma clula na tabela. Similar ao de
Pargrafos.
colspan: Define a quantidade de colunas
que uma clula ir ocupar (conter) na tabela.
rowspan: Define a quantidade de linhas que
uma clula ir ocupar (conter) na tabela.

36
Corpo do Documento - Tabelas

Exemplo:
<table border = "3" cellpadding = "10"
width = "100%" height = "100%">
<tr align = "center" valign = "bottom">
<th rowspan = "2"> Clula 1 </th>
<td> Clula 2 </td>
</tr>
<tr align = "center" valign = "bottom>
<td> Clula 3 </td>
</tr>
</table>

37
Corpo do Documento - Formulrios

Formulrios servem para recolher dados


introduzidos pelo usurio e o envio das
informaes para o servidor.
Para criar um formulrio utiliza-se o elemento
HTML <form>.
Sintaxe: <form [atributos]> [Elementos]
</form>.
Os elementos permitem inserir dados
alfanumricos, selecionar elementos de uma lista
de opes e responder com respostas do tipo
sim e no, etc.
38
Corpo do Documento - Formulrios

Os principais atributos da tag <form> so:


name: Nome do Formulrio.
action: Endereo (URL) para onde sero
submetidos os dados. Caso no seja
especificado nenhum valor, ser utilizado o
endereo corrente.
method: Modo de Submisso do Formulrio.
Caso no seja especificado nenhum valor,
ser utilizado o modo GET.
O modo de submisso de formulrio pode ser de
duas formas: GET e POST.
39
Corpo do Documento - Formulrios

No modo GET, os dados so submetidos por meio


do endereo especificado no atributo action do
formulrio.
Envia as informaes ao servidor atravs de uma
cadeia de variveis, indicada logo aps o
endereo de destino.
Isso impe um limite no tipo e na quantidade de
informaes que podem ser enviadas ao servidor,
por exemplo, no possvel enviar foto via modo
GET.
Exemplo: http://server/dados.php?variavel=valor.
40
Corpo do Documento - Formulrios

No modo POST, os dados so submetidos pelo


formulrio. o mais recomendvel, pois garante
mais segurana no envio dos dados do que o
modo GET.

41
Corpo do Documento - Formulrios

Exemplo:
<form
name = form_cadastro_post
action = cad_funcionario.php
method = POST
>
<!-- Elementos Input -->
</form>

<form
name = form_cadastro_get
action = cad_funcionario.php
method = GET
>
<!-- Elementos Input -->
</form> 42
Corpo do Documento - Formulrios

A linguagem HTML define vrios elementos que


permite ao usurio a insero de seus dados.
O elemento HTML que permite a entrada de
dados definido pela tag <input>. Sintaxe:
<input [atributos] >.
Os principais atributos da tag <input> so:
type: Define o tipo de entrada de dados que
ser visualizado.
name: Define o nome do componente.
value: Aplica um valor ao componente.
size: Define o tamanho ou largura do
componente. 43
Corpo do Documento - Formulrios

Os principais atributos da tag <input> so


(cont.):
maxlength: Define o tamanho mximo de
entrada de dados.
Os valores possveis para o atributo type da tag
input so:
text: Entrada de Texto Alfanumrico. Conhecido
como TextBox ou Caixa de Texto.
submit: Boto que permite submeter os dados
do formulrio para o endereo especificado no
atributo action do formulrio. Conhecido como
Boto de Salvar, Boto de Enviar.
44
Corpo do Documento - Formulrios

Os valores possveis para o atributo type da tag


input so (cont.):
password: Similar ao text, mas os dados so
ocultados. Utilizado para campos de senha.
reset: Boto que permite a limpeza de todo
contedo dentro do formulrio.
checkbox: Entrada de marcao de opes.
Permite a marcao (escolha) de mais de uma
opo. Conhecido como Caixas de Marcao.
radio: Permite criar um grupo pequeno de
opes em que apenas podemos selecionar uma
de cada vez. Conhecido como Radio Buttons.
45
Corpo do Documento - Formulrios

Alm do elemento input, existem outros


elementos de insero de dados como os
elementos definidos pelas tags <select> e
<textarea>.
O elemento select permite a seleo de um item
entre o conjunto de opes. Conhecido como
ComboBox. Cada item de um select deve ser
definido pelo elemento HTML <option>. O
elemento option possui como principal atributo o
value que representa o valor daquele item.

46
Corpo do Documento - Formulrios

O elemento select possui como principais


atributos:
name: Nome do Componente.
multiple: Define que ser possvel escolher
mais de uma opo no elemento select.
Quando este atributo especificado, o
elemento select passa a ser conhecido como
ListBox.
size: Quantidade de itens que ser mostrado
pelo ListBox. S deve ser especificado o
atributo size, quando for especificado o
atributo multiple. 47
Corpo do Documento - Formulrios

O elemento textarea permite a insero de texto


com grande quantidade de linhas. O elemento
textarea possui como principais atributos:
name: Nome do Componente.
rows: Define o nmero de linhas visvel do
textarea, ou seja, o nmero de linhas da
entrada textual.
cols: Define a largura visvel do textarea, ou
seja, o nmero de colunas da entrada
textual.

48
Corpo do Documento - Formulrios

49
Corpo do Documento - Formulrios

50
Corpo do Documento - Consideraes

Recomendaes:
Utilize o atributo CHECKED no elemento input
com tipo checkbox para que ao carregar a
pgina, o componente j venha marcado.
Utilize o atributo SELECTED no elemento
option em um select para que ao carregar a
pgina, o componente com tal atributo j
venha selecionado por padro.
Caso voc queira separar utilizar o espao
em branco convencional para separar
elementos HTML, utilize a sequncia
reservada &nbsp;. 51
Referncias

W3Schools.com Tutorial HTML Tutorial.


Disponvel em
<http://www.w3schools.com/html/default.asp>.
SANTOS, Leandro C. dos. PHP e MySQL. 102 p.
Disponvel em
<www.colegiobrasileiro.com.br/Apostila.pdf>.
JUNIOR, Fred C. PROGRAMANDO PARA WEB
COM PHP/MySQL. 2 Edio. 2001. 65 p.
Disponvel em
<www.ebah.com.br/content/ABAAABDScAC/prog
ramando-php-web>.
52