Slide de HTML Básico - Curso de PHP - Itatech

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

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

</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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Exemplo:
<form
name = form_cadastro_post
action = cad_funcionario.php
method = POST
>

</form>
<form
name = form_cadastro_get
action = cad_funcionario.php
method = GET
>

</form> 42
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
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
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
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
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
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
49
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 . 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

Slide de HTML Básico - Curso de PHP - Itatech

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Slide de HTML Básico - Curso de PHP - Itatech

Încărcat de

Drepturi de autor:

Formate disponibile

Curso Bsico de PHP

Breno Santana Santos

Departamento de Sistemas de Informao DSI/UFS/Itabaiana

HTML (Linguagem de Marcao de Hipertexto).

Para criar uma pgina HTML, basta criar um

Um elemento HTML composto por uma tag de

A tag de fechamento possui o smbolo / aps o

Os atributos servem para definir uma

A cabea ou cabealho do documento HTML

O corpo do documento HTML definido pela tag

Os valores para os atributos bgcolor, background

Servem para criar ttulos com o intuito de

Servem para criar pargrafos.

Os principais atributos para pargrafos so:

Para ficar evidente a diviso do contedo da

Links internos (ncoras) ligam uma seo de uma

Links locais ou relativos permitem referenciar um

Links externos so aqueles que podem apontar

A linguagem HTML possui tags para definir listas

Dentro de uma lista podemos colocar pargrafos,

Existem situaes que desejamos que vrios

Alm de manipular texto, o HTML permite exibir

Os principais atributos para imagens so (cont.):

Recomendao: O valor center para o

Tabelas auxiliam na visualizao de dados ou na

Dentro de uma clula pode conter qualquer

Os principais atributos da tag <table> so

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

Formulrios servem para recolher dados

Os principais atributos da tag <form> so:

No modo GET, os dados so submetidos por meio

No modo POST, os dados so submetidos pelo

A linguagem HTML define vrios elementos que

Os principais atributos da tag <input> so

Os valores possveis para o atributo type da tag

Alm do elemento input, existem outros

O elemento select possui como principais

O elemento textarea permite a insero de texto

W3Schools.com Tutorial HTML Tutorial.

S-ar putea să vă placă și