Você está na página 1de 9

Construo de Pginas

Web I
Unidade curricular: Construo de pginas web I
Competncias: Estruturar informaes em hipertexto, utilizando as linguagens de marcao
HTML/XHTML. Utilizar CSS para formatar pginas Web.
Bases tecnolgicas, cientficas e instrumentais:
- Internet: estrutura e recursos;
- HTML
- Tags
- Plug-ins, vdeo e udio.

AULA 1
Linguagem HTML/XHTML
HTML (abreviao
para
a expresso
inglesa HyperTextMarkupLanguage,
que
significa Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para
produzir pginas na Web, que podem ser interpretadas por navegadores, atravs das suas tag
e atributos.
Tags Bsicas
<html>
<head>
Cabeal
ho

<title> Digite o Ttulo da Pgina </title>


<meta charset=utf-8 />
</head>

Corpo
da
Pgina

<body>
.
.
.
</body>

</html>

Inserir um Comentrio
<!digite o comentrio desejado -->

Atributos da TagBody
Bgcolor: cor do fundo
Background: imagem como
plano de fundo
Prof. Jeany Laranjeira

text: cor do texto


link: cor dos links

Pgina 1 de 9

Construo de Pginas
Web I
vlink: cor dos links j
visitados

alink: cor dos links ativos


(no momento do click)

Tags para Ttulos ou cabealhos:


<h1> Linha de Cabealho 1 </h1>
LINHA DE CABEALHO 1
<h2> Linha de Cabealho 2 </h2>

LINHA DE CABEALHO 2
<h3> Linha de Cabealho 3 </h3>

LINHA DE CABEALHO 3
<h4> Linha de Cabealho 4 </h4>

LINHA DE CABEALHO 4
<h5> Linha de Cabealho5 </h5>
LINHA DE CABEALHO 5

<h6> Linha de Cabealho 6 </h6>


LINHA DE CABEALHO 6

Tag Font
<font face=comicsansms color=yellow size=7>Texto a ser
formatado</font>
Atributos da tagFont
Face = Tipo de Letra
Color = Cor
Size = Tamanho, (De 1 a 7, sendo 1 o menor tamanho e 7 o
maior tamanho)
Tags de Formatao
<b>Negrito</b>
<i>Itlico</i>
<u>Sublinhado</u>
<big>L
</big>

etra Grande

Prof. Jeany Laranjeira

<small>Letra
pequena</small>
<s>riscado</s>
<sub>Subscrito</sub>
<sup>Sobrescrito</sup>

Pgina 2 de 9

Construo de Pginas
Web I
<strong>Forte</strong>

Prof. Jeany Laranjeira

<em>Enftico</em>

Pgina 3 de 9

Formatao de Pargrafo
<center> texto centralizado </center>
<p > criao de um paragrafo </p>
Atributos da tag P
<p align=right> texto alinhado a direita </p>
<p align=left> texto alinhado a esquerda </p>
<p align=center> texto centralizado </p>
<p align=justify> texto justificado </p>
Tag solitrias (so as tags que no so necessitam fechamento)
<br /> - Prxima Linha (enter)
<hr /> - Linha Horizontal
Atributos da tag hr
<hr width=50% size=4 color=red align=center
noshade>
Width = Largura
Size = Tamanho (espessura)
Color = Cor
Align= Alinhamento (right, Left, Center)
noshade = inibe o sombreamento
<img src=imagem.jpg width=150 height=150 border=3
alt=texto alternativo />
src = caminho e nome do arquivo (source)
width = largura
height = Altura
border = espessura da borda
alt = Texto Alternativo que aparece quando o mouse
estiver sobre a imagem

Movimentando Textos e Imagens


<marquee> Texto a ser animado </marquee>
<marquee>
<img src=imagem.jpg />
</marquee>
Atributos da tag Marquee
<marquee width=50% height=100 behavior=scroll
direction=right
scrollamount="2" scrolldelay="0"
onmouseover="this.stop()" onmouseout="this.start()">
width = Largura
height = Altura
behavior = Comportamento
Scroll = loop infinito
slide = desliza e para
loop = quantidade de voltas
direction =direo (left, right, up, down)
scrollamount = velocidade
scrolldelay = tempo em que fica oculto
onmouseover = quando mouse estiver sobre
onmouseout = quando mouse sair

Tabela de Cores
Hexadecimal

Nome

RGB

#ffffff

white

(255,255,255)

#f5f5f5

whitesmoke

(245,245,245)

#dcdcdc

gainsboro

(220,220,220)

#d3d3d3

lightgrey

(211,211,211)

#c0c0c0

silver

(192,192,192)

#a9a9a9

darkgray

(169,169,169)

#808080

gray

(128,128,128)

#696969

dimgray

(105,105,105)

#778899

lightslategray

(119,136,153)

#708090

slategray

(112,128,144)

#2f4f4f

darkslategray

(47,79,79)

#fffaf0

floralwhite

(255,250,240)

#fdf5e6

oldlace

(253,245,230)

#fffff0

ivory

(255,255,240)

#faf0e6

linen

(250,240,230)

#fff8dc

cornsilk

(255,248,220)

#ffefd5

papayawhip

(255,239,213)

#ffebcd

blanchedalmond

(255,235,205)

#ffe4c4

bisque

(255,228,196)

#faebd7

antiquewhite

(250,235,215)

#ffdab9

peachpuff

(255,218,185)

#ffdead

navajowhite

(255,222,173)

#ffe4b5

moccasin

(255,228,181)

#f5f5dc

beige

(245,245,220)

#ffffe0

lightyellow

(255,255,224)

#fafad2

lightgoldenrodyellow

(250,250,210)

#fffacd

lemonchiffon

(255,250,205)

#f0e68c

khaki

(240,230,140)

#eee8aa

palegoldenrod

(238,232,170)

#bdb76b

darkkhaki

(189,183,107)

#ffff00

yellow

(255,255,0)

#ffd700

gold

(255,215,0)

#daa520

goldenrod

(218,165,32)

#b8860b

darkgoldenrod

(184,134,11)

#808000

olive

(128,128,0)

#adff2f

greenyellow

(173,255,47)

#9acd32

yellowgreen

(154,205,50)

#6b8e23

olivedrab

(107,142,35)

#556b2f

darkolivegreen

(85,107,47)

#7fff00

chartreuse

(127,255,0)

#7cfc00

lawngreen

(124,252,0)

#00ff00

lime

(0,255,0)

#32cd32

limegreen

(50,205,50)

#228b22

forestgreen

(34,139,34)

#008000

greengreen

(0,128,0)

#006400

darkgreen

(0,100,0)

#2e8b57

seagreen

(46,139,87)

#3cb371

mediumseagreen

(60,179,113)

#8fbc8f

darkseagreen

(143,188,143)

#f5fffa

mintcream

(245,255,250)

#f0fff0

honeydew

(240,255,240)

#98fb98

palegreen

(152,251,152)

#90ee90

lightgreen

(144,238,144)

#00ff7f

springgreen

(0,255,127)

#00fa9a

mediumspringgreen

(0,250,154)

#7fffd4

aquamarine

(127,255,212)

#66cdaa

mediumaquamarine

(102,205,170)

#008080

teal

(0,128,128)

#008b8b

darkcyan

(0,139,139)

#5f9ea0

cadetblue

(95,158,160)

#20b2aa

lightseagreen

(32,178,170)

#afeeee

paleturquoise

(175,238,238)

#80e0d0

turquoise

(64,224,208)

#47d1cc

mediumturquoise

(71,209,204)

#00ced1

darkturquoise

(0,206,209)

#00ffff

aqua

(0,255,255)

#00ffff

cyan

(0,255,255)

#e0ffff

lightcyan

(224,255,255)

#f0ffff

azure

(240,255,255)

#b0e0e6

powderblue

(176,224,230)

#add8e6

lightblue

(173,216,230)

#87ceeb

skyblue

(135,206,235)

#87cefa

lightskyblue

(135,206,250)

#00bfff

deepskyblue

(0,191,255)

#f8f8ff

ghostwhite

(248,248,255)

#f0f8ff

aliceblue

(240,248,255)

#6495ed

cornflowerblue

(100,149,237)

#4069e1

royalblue

(64,105,225)

#b0c4de

lightsteelblue

(176,196,222)

#4682b4

steelblue

(70,130,180)

#1e90ff

dodgerblue

(30,144,255)

#0000ff

blue

(0,0,255)

#0000cd

mediumblue

(0,0,205)

#00008b

darkblue

(0,0,139)

#000080

navy

(0,0,128)

#191970

midnightblue

(25,25,112)

#4b0082

indigo

(75,0,130)

#800080

purple

(128,0,128)

#8b008b

darkmagenta

(139,0,139)

#e6e6fa

lavender

(230,230,250)

#7b68ee

mediumslateblue

(123,104,238)

#6a5acd

slateblue

(106,90,205)

#483d8b

darkslateblue

(72,61,139)

#9370db

mediumpurple

(147,112,219)

#802be2

blueviolet

(128,43,226)

#9400d3

darkviolet

(148,0,211)

#9932cc

darkorchid

(153,50,204)

#ba55d3

mediumorchid

(186,85,211)

#da70d6

orchid

(218,112,214)

#ee82ee

violet

(238,130,238)

#dda0dd

plum

(221,160,221)

#d8bfd8

thistle

(216,191,216)

#fffafa

snow

(255,250,250)

#fff0f5

lavenderblush

(255,240,245)

#fff5ee

seashell

(255,245,238)

#ffe4e1

mistyrose

(255,228,225)

#ffc0cb

pink

(255,192,203)

#ffb6c1

lightpink

(255,182,193)

#db7093

palevioletred

(219,112,147)

#c71585

mediumvioletred

(199,21,133)

#ff69b4

hotpink

(255,105,180)

#ff1493

deeppink

(255,20,147)

#ff00ff

fuchsia

(255,0,255)

#ff00ff

magenta

(255,0,255)

#fa8072

salmon

(250,128,114)

#f08080

lightcoral

(240,128,128)

#cd5c5c

indianred

(205,92,92)

#bc8f8f

rosybrown

(188,143,143)

#d2b48c

tan

(210,180,140)

#f5deb3

wheat

(245,222,179)

#deb887

burlywood

(222,184,135)

#f4a460

sandybrown

(244,164,96)

#cd853f

peru

(205,133,63)

#ffa500

orange

(255,165,0)

#ff8c00

darkorange

(255,140,0)

#d2691e

chocolate

(210,105,30)

#a0522d

sienna

(160,82,45)

#8b4513

saddlebrown

(139,69,19)

#e9967a

darksalmon

(233,150,122)

#ffa07a

lightsalmon

(255,160,122)

#ff7f50

coral

(255,127,080)

#ff6346

tomato

(255,99,71)

#ff4400

orangered

(255,68,0)

#ff0000

red

(255,0,0)

#dc143c

crimson

(220,20,60)

#b22222

firebrick

(178,34,34)

#a52a2a

brown

(165,42,42)

#8b0000

darkred

(139,0,0)

#800000

maroon

(128,0,0)

#000000

black

(0,0,0)