Curso HTML e Css

> Herbet Ferreira Rodrigues
> contato@herbetferreira.com
Curso HTML & CSS
2
Sumrio
>
Apresentao
>
Introduo ao HTM
!
Histria
!
Comeando a Programar
>
Tags em HTM
!
Headings (Cabealhos)
!
Pargrafos
!
ormata!o
!
onte
!
"di#ionando $magens
!
Criando Lin%s
!
Trabalhando #om Tabelas
"
"&resenta!o
>
#ome$ Herbet Ferreira Rodrigues
>
Ati%idades$
!
Cursando '( Per)odo de Ci*n#ia da Com&uta!o + ,P-
!
Colaborador ati.o da /eCT$
> &ite do 'epartamento de Inform(tica) *F+,
> &istema para o Tota- .ard
!
01&eri*n#ia de 2 anos #om a Linguagem HTML
!
3esen.ol.imento 4eb
> /HTM 0.0
> .&& 2.1
>
+H+ 2.1
> M3&4 5.1
> 6eb &tandards
> Tab-e-ess
$ntrodu!o ao HTML
2
Histria
>
'esen%o-%ida em 0781 por Tim ,erners9ee e
seus co-aboradores do .:R# ;.onse-ho :uropeu
de +es<uisas #uc-eares=
!
Manter seus do#umentos organi5ados
>
:m 0771 foi definida em especifica>es formais
>
:m 2111 a -inguagem tornou9se uma norma
Internaciona-
!
6ers!o HTML 789 lanada &ela 4:C
>
'esen%o-%imento do /HTM
!
0s&e#ifi#a!o HTML baseado em ;ML
?
$ntrodu!o
>
@ <ue significa HTMA
!
H<&erTe1t Mar%u& Language
>
@ <ue pode conterA
!
Te1tos= iguras= rames= olhas de 0stilo= Cores>
>
4uem padroniBa tudo issoA
!
4:C (4orld 4ide 4eb Consortium)
!
0stabele#e #om&atibilidade das informa?es na
$nternet
C
Comeando a Programar
>
Ferramentas para 'esen%o-%imento
!
Mi#rosoft rontPage= ,ltra3e.= "dobe @oLi.e=
Ma#romedia 3reamAea.er
>
#a%egadores ;,roDsers=
!
Mo5illa irefo1= B&era= lo#%= $nternet 01&lorer
>
,-oco de #otas
Tags em HTML
7
Tags em HTML
>
Tag E uma pa-a%ra9cha%e <ue define um item ;imagem)
teFto) h3per-inG) etc.= <ue ir( compor uma p(gina.
>
H identificada pe-os sImbo-os C (menor) e > (maior))
podendo ser simp-es ou composta.
>
Tags simp-es so formadas por um Jnico termo
!
Chr> D e1ibe uma linha hori5ontal na &gina
>
Tags compostas so formadas por dois termos) um de
abertura) e outro de fechamento.
!
Ctitle> T)tulo da Pgina CEtitle> D esta F uma tag Gue
define o t)tulo da &gina8
01
Tags em HTML
>
:strutura de uma p(gina HTM$
<html>
<head>
<title>Ttulo da Pgina</title>
<meta http-equiv=Content-Type
content=text/html cha!"et=i"o-##$%-&>
</head>
<'ody 'gcolo!=())))))>
Cu!"o de *T+, e C-- - .ecT/
</'ody>
</html>
00
Tags em HTML
>
Khtm-> e KLhtm->
!
$n)#io e im do #onteHdo de um do#umento HTML
>
Khead> e KLhead>
!
Irea reser.ada &ara o #abealho
>
Ktit-e> e KLtit-e>
!
3efine o t)tulo da &gina
>
Kbod3> e KLbod3>
!
Cor&o do do#umento8 Bnde ser inserido o #onteHdo
da &gina8
02
Tags em HTML (J)
>
Kmeta>
!
Tag bastante utili5ada &elos &rogramadores &ara definir Guais ser!o
as &ala.ras utili5adas &ara &ro#urar nos sites de bus#a8
>
Kmeta nameMNAuthorO contentMNHerbet FerreiraO>
!
3efine Guem foi o #riador da &gina HTML
>
Kmeta nameMNPe3DordsO contentMNcurso) htm-) css) nectiO>
!
3efine Guais &ala.rasD#ha.es Gue &oder!o ser utili5adas &elos sites
de bus#a
>
Kmeta http9e<ui%MN.ontent9t3peO contetMNteFtLhtm-Q
charsetMiso9882790O>
!
0s&e#ifi#a o #onKunto de #ara#teres utili5ados na &ginaL isoD22MND9
0"
Prti#a
0.Acesse o ,-oco de #otas
2.'igite a estrutura padro de um documento
HTM
".ApRs a digitao) sa-%e o ar<ui%o com a
eFtenso 8htm
5.Abre o #a%egador e digite o endereo da
p(gina ;ou apenas dS um dup-o c-i<ue no
ar<ui%o recEm9criado=.
05
Headings (Cabealhos)
>
@s cabea-hos ser%em para iniciar se>es
dentro de um documento HTM) distintos do
restante do teFto) identificando o inIcio de um
tRpico.
>
:Fistem seis tamanhos a serem uti-iBados)
Ch9>) ChJ>) Ch:>) Ch7>) ChM> e ChO> e
todos e-es de%em ser fechados pe-as suas tags
de fechamanto) CEh9>) T) CEhO>
02
Prti#a
0..rie um no%o documento HTM
2.'igite seis cabea-hos diferentes uti-iBando as
tags headings de Ch9> atE ChO>
".&a-%e o ar<ui%o com o nome cabecalhos.htm
5.Uisua-iBe no broDser
2.TambEm podemos a-inhas o cabea-ho atra%Es
do parVmetro align
0?
Pargrafos
>
Kp> e KLp>
!
'e-imita o inIcio e o fim de um par(grafo. +ode9se)
tambEm) uti-iBar o a-inhamento de teFto atra%Es do
parVmetro align
>
Kbr>
!
:ssa tag fora uma <uebra de -inha) porEm) no encerra o
par(grafo.
!
Tag simp-es) no eFiste a tag KLbr>
0C
ormata!o
>
.onWunto de tags de inIcio e fim <ue permitem criar
efeitos no teFto$
>
Kb>te1toKLb> 9 negrito
>
Ki>textoKLi> 9 itlico
>
Ku>teFtoKLu> 9 sub-inhado
>
Ks>teFtoKLs> 9 tachado
>
Kbig>teFtoKLbig> fonte maior
>
Ksma-->teFtoKLsma--> 9 fonte menor
08
onte
>
Kfont> e KLfont>
!
Permite determinar as #ara#ter)sti#as do te1to= #omo
o tamanho= a #or e o ti&o de fonte a ser utili5ada8
>
+arVmetro si5e X tamanho da fonte
>
+arVmetro #olor X cor da fonte
>
+arVmetro fa#e X tipo de fonte
<0ont colo!=(1111)) "i2e=3 0ace=4!ial>Texto</0ont>
#este eFemp-o) co-ocamos a fonte na cor aBu-) tamanho ? e a fonte Aria-
07
onte (J)
>
ImportanteY
!
3efinir uma seGP*n#ia de fontes &ara Gue= no #aso o
na.egador n!o en#ontrar a &rimeira o&!o= tenha
uma segunda ou ter#eira forma de .isuali5a!o da
fonte8
<0ont 0ace=4!ial5 *elvetica5 "an"-"e!i0>)onte"</0ont>
21
Linhas Hori5ontais
>
Khr>
!
Permite #riar uma linha hori5ontal
!
Podemos definir os &arQmetros si5e e Aidth &ara a
es&essura e o #om&rimento res&e#ti.amente8
<h! 6idth=7$8 "i2e=&1>
20
Prti#a
0..rie um no%o documento HTM
2.'igite di%ersos teFtos com tamanhos
diferentes) cores) tipos de fontes e -inhas
horiBontais.
".&a-%e o ar<ui%o com o nome fontes.htm
5.Uisua-iBe no broDser
22
$nserindo $magens
>
Kimg>
!
0ssa tag F utili5ada &ara a inser!o das imagens e &re#isa
ser a#om&anhada &or alguns &arQmetros8
>
+arVmetro sr# Xdefine o -oca- em <ue a imagem
encontra9se.
>
+arVmetro Aidth X determina a -argura da imagem em
piFe-s.
>
+arVmetro height X determina a a-tura da imagem em
piFe-s.
2"
$nserindo $magens (J)
>
+arVmetro border X define se a figura ter(
borda e a sua espessura.
>
+arVmetro alt X permite digitar um teFto <ue
ser( mostrado no momento em <ue o usu(rio
posicionar o mouse sobre a figura.
<img "!c=te"te9gi0 6idth=$: height=:% 'o!de!=1
alt=/magem>
25
Ligando 3ados (Lin%s)
>
igar conteJdos ;criar %Incu-os= para <ue sua
p(gina seWa dinamiBada) possibi-itando a
na%egao.
>
Ka> e KLa>
!
"tra.Fs das tags Ca> e CEa>= #onseguiremos #riar
nossos .)n#ulos (H<&erlin%s)
!
" &rimeira tag de.e &ossuir o &arQmetro
hrefRSlo#alT= &ara indi#ar a &gina Gue ser
#arregada8
22
Ligando 3ados (Lin%s) (J)
>
inGs para 'oDn-oads
>
inGs para :9mai-
>
Zncoras
!
H<&erlin%s Gue &ro&or#ionam na.egar na &r&ria
&gina
<a h!e0=cu!"o92ip>+ate!ial do Cu!"o</a>
<a h!e0=mailto;contato<he!'et0e!!ei!a9com>contato</a>
<a name=inicio>/ncio da Pgina</a>
<a h!e0=(inicio>=olta!</a>
2?
Ligando 3ados (Lin%s) (:)
>
'irecionando inGs
!
,tili5a!o do &arQmetro target (al.o)
>
Ublan% X abre uma no%a Wane-a do na%egador
>
U&arent X carrega o documento -inGado dentro
do frame9mestre ;pai=
>
Uself X carrega o documento -inGado na mesma
p(gina. ;parVmetro padro=
>
Uto& X carrega o documento -inGado em toda a
Wane-a) e-imiando frames <ue possi%e-mente
esteWam ne-a
2C
Ligando 3ados (Lin%s) (7)
>
.ores dos inGs
!
3efinir a #or do lin% ati.o= do lin% a#essado e do lin%
n!o .isitado= &ara uma melhor #om&reens!o e
.isuali5a!o na tela8 $sso F &oss).el atra.Fs dos
&arQmetros lin%= .lin% e alin%= inseridos na tag
Cbod<>8
>
-inG X define a cor dos -inGs ainda no %isitados pe-o
usu(rio
>
a-inG X define a cor dos -inGs no momento do c-i<ue do
mouse
>
%-inG X define a cor dos -inGs <ue W( foram %isitados
<'ody lin>=(333)) vlin>=(11)))) alin>=))3333>
28
Brgani5ando os 3ados em Tabelas
>
As tabe-as so um meio eficaB de contro-ar o
-a3out da p(gina e dispor as infirma>es de
forma mais c-ara.
<ta'le 6idth=7$8 'o!de!=&>
<t!>
<td>texto"</td>
<td>ta'ela"</td>
</t!>
<t!>
<td>0igu!a"</td>
<td>0o!mul!io"</td>
</t!>
</ta'le>
27
Brgani5ando os 3ados em Tabelas (J)
>
*ti-iBe em conWunto com os parVmetros indicados abaiFo$
!
DidthMNnO X especifica a -argura da tabe-a em piFe-s.
!
a-ignMNa-inhamentoO X especifica o a-inhamento horiBonta- da
tabe-a.
!
%a-ignMNa-inhamentoO X especifica o a-inhameno %ertica- da tabe-a.
!
borderMNnO X especifica a -argura da borda da tabe-a.
!
ce--spacingMN%a-orO X especifica o espao) entre as cE-u-ar e seu
conteJdo.
!
ce--paddingMN%a-orO X especifica o espao entre a borda de cada
cE-u-a e seu conteJdo.
"1
Brgani5ando os 3ados em Tabelas (:)
>
Ktr> e KLtr>
!
*ti-iBado para definir as -inhas da tabe-a.
>
Ktd> e KLtd>
!
*ti-iBado para definir as co-unas na tabe-a.
"0
Mes#lando CFlulas
>
+arVmetro Cols&an
!
+ermite <ue as cE-u-as da tabe-a sem mesc-adas) ou seWa)
ocupen uma das mais co-unas na tabe-a.
<t!>
<td col"pan=?@?>An'"p</td>
</t!>
<t!>
<td height=@:>An'"p</td>
</t!>
</ta'le>
"2
Mes#lando CFlulas
>
+arVmetro VoAs&an
!
Funciona de forma idSntica ao parVmetro co-span) porEm
em %eB de unir co-unas) so as -inhas <ue passaro a ser
uma sR.
<t!>
<td !o6"pan=?@?>An'"p</td>
</t!>
<t!>
</t!>
</ta'le>
""
$M
Aguardem cenas do prRFimos capItu-os...
"5
Contato
> #ome$ Herbet erreira Vodrigues
> :9mai-$ #ontatoWherbetferreira8#om
> Materia- para 'oDn-oad$ htt&LEEAAA8herbetferreira8#om

Curso HTML e Css

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso HTML e Css

Enviado por

Direitos autorais:

Formatos disponíveis

> Herbet Ferreira Rodrigues

Você também pode gostar