You are on page 1of 9

Construção de Páginas

Web I
Unidade curricular: Construção de páginas web I
Competências: Estruturar informações em hipertexto, utilizando as linguagens de marcação
HTML/XHTML. Utilizar CSS para formatar páginas Web.
Bases tecnológicas, científicas e instrumentais:
- Internet: estrutura e recursos;
- HTML
- Tags
- Plug-ins, vídeo e áudio.

AULA 1
Linguagem HTML/XHTML
HTML (abreviação
para
a expressão
inglesa HyperTextMarkupLanguage,
que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para
produzir páginas na Web, que podem ser interpretadas por navegadores, através das suas tag
e atributos.
Tags Básicas
<html>
<head>
Cabeçal
ho

<title> Digite o Título da Página </title>
<meta charset=”utf-8” />
</head>

Corpo
da
Página

<body>
.
.
.
</body>

</html>

Inserir um Comentário
<!—digite o comentário 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

Página 1 de 9

sendo 1 o menor tamanho e 7 o maior tamanho) Tags de Formatação <b>Negrito</b> <i>Itálico</i> <u>Sublinhado</u> <big>L </big> etra Grande Prof. (De 1 a 7. Jeany Laranjeira <small>Letra pequena</small> <s>riscado</s> <sub>Subscrito</sub> <sup>Sobrescrito</sup> Página 2 de 9 .Construção de Páginas Web I vlink: cor dos links já visitados alink: cor dos links ativos (no momento do click) Tags para Títulos ou cabeçalhos: <h1> Linha de Cabeçalho 1 </h1> LINHA DE CABEÇALHO 1 <h2> Linha de Cabeçalho 2 </h2> LINHA DE CABEÇALHO 2 <h3> Linha de Cabeçalho 3 </h3> LINHA DE CABEÇALHO 3 <h4> Linha de Cabeçalho 4 </h4> LINHA DE CABEÇALHO 4 <h5> Linha de Cabeçalho5 </h5> LINHA DE CABEÇALHO 5 <h6> Linha de Cabeçalho 6 </h6> LINHA DE CABEÇALHO 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.

Construção de Páginas Web I <strong>Forte</strong> Prof. Jeany Laranjeira <em>Enfático</em> Página 3 de 9 .

Próxima Linha (enter) <hr /> . Center) noshade = inibe o sombreamento <img src=”imagem.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.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 . Left.Formatação de Parágrafo <center> texto centralizado </center> <p > criação 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 solitárias (são as tags que não são necessitam fechamento) <br /> .

down) scrollamount = velocidade scrolldelay = tempo em que fica oculto onmouseover = quando mouse estiver sobre onmouseout = quando mouse sair .start()"> width = Largura height = Altura behavior = Comportamento Scroll = loop infinito slide = desliza e para loop = quantidade de voltas direction =direção (left. up. right.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.

173) #ffe4b5 moccasin (255.79.255.255) #f5f5f5 whitesmoke (245.205) #ffe4c4 bisque (255.228.218.230) #fffff0 ivory (255.245.213) #ffebcd blanchedalmond (255.255.230) #fff8dc cornsilk (255.153) #708090 slategray (112.250.192) #a9a9a9 darkgray (169.128) #696969 dimgray (105.232.250.140) #eee8aa palegoldenrod (238.245.240) #faf0e6 linen (250.220) #ffefd5 papayawhip (255.215) #ffdab9 peachpuff (255.255.192.239.32) #b8860b darkgoldenrod (184.Tabela de Cores Hexadecimal Nome RGB #ffffff white (255.245.0) #ffd700 gold (255.181) #f5f5dc beige (245.220) #ffffe0 lightyellow (255.224) #fafad2 lightgoldenrodyellow (250.255.240.128.255.248.235.215.128.11) #808000 olive (128.196) #faebd7 antiquewhite (250.220.235.211.165.105.222.250.47) #9acd32 yellowgreen (154.107) #ffff00 yellow (255.0) #adff2f greenyellow (173.170) #bdb76b darkkhaki (189.169.134.50) .220) #d3d3d3 lightgrey (211.144) #2f4f4f darkslategray (47.240) #fdf5e6 oldlace (253.79) #fffaf0 floralwhite (255.211) #c0c0c0 silver (192.228.245) #dcdcdc gainsboro (220.169) #808080 gray (128.0) #daa520 goldenrod (218.105) #778899 lightslategray (119.183.128.205) #f0e68c khaki (240.185) #ffdead navajowhite (255.136.230.205.210) #fffacd lemonchiffon (255.

128) #008b8b darkcyan (0.142.0) #006400 darkgreen (0.250) #f0fff0 honeydew (240.235) #87cefa lightskyblue (135.255) #00ffff cyan (0.255) #6495ed cornflowerblue (100.178.154) #7fffd4 aquamarine (127.251.255) #b0e0e6 powderblue (176.238) #80e0d0 turquoise (64.188.255.230) #add8e6 lightblue (173.237) .255.139) #5f9ea0 cadetblue (95.209.144) #00ff7f springgreen (0.149.238.255.255) #f0f8ff aliceblue (240.0) #2e8b57 seagreen (46.152) #90ee90 lightgreen (144.224.191.206.158.35) #556b2f darkolivegreen (85.255) #e0ffff lightcyan (224.205.204) #00ced1 darkturquoise (0.139.250) #00bfff deepskyblue (0.252.128.170) #afeeee paleturquoise (175.255.208) #47d1cc mediumturquoise (71.206.255.212) #66cdaa mediumaquamarine (102.248.170) #008080 teal (0.248.255.179.34) #008000 greengreen (0.230) #87ceeb skyblue (135.50) #228b22 forestgreen (34.216.209) #00ffff aqua (0.0) #00ff00 lime (0.160) #20b2aa lightseagreen (32.255.0) #32cd32 limegreen (50.205.#6b8e23 olivedrab (107.139.100.255) #f0ffff azure (240.238.107.87) #3cb371 mediumseagreen (60.143) #f5fffa mintcream (245.0) #7cfc00 lawngreen (124.47) #7fff00 chartreuse (127.128.255.255.255.127) #00fa9a mediumspringgreen (0.255) #f8f8ff ghostwhite (248.139.240) #98fb98 palegreen (152.206.250.113) #8fbc8f darkseagreen (143.224.

25.180) #ff1493 deeppink (255.21.#4069e1 royalblue (64.128.255) #0000ff blue (0.112.50.61.139) #9370db mediumpurple (147.112.92.160.255) #0000cd mediumblue (0.130.0.147) #c71585 mediumvioletred (199.105.130) #800080 purple (128.112) #4b0082 indigo (75.130.205) #483d8b darkslateblue (72.0.128) #8b008b darkmagenta (139.192.180) #1e90ff dodgerblue (30.105.128.139) #e6e6fa lavender (230.219) #802be2 blueviolet (128.0.216) #fffafa snow (255.245) #fff5ee seashell (255.114) #f08080 lightcoral (240.226) #9400d3 darkviolet (148.128) #cd5c5c indianred (205.225) #ffc0cb pink (255.104.221) #d8bfd8 thistle (216.255) #ff00ff magenta (255.0.0.230.240.238) #ffe4e1 mistyrose (255.211) #da70d6 orchid (218.20.0.238) #dda0dd plum (221.112.238) #6a5acd slateblue (106.92) .214) #ee82ee violet (238.245.139) #000080 navy (0.225) #b0c4de lightsteelblue (176.222) #4682b4 steelblue (70.147) #ff00ff fuchsia (255.43.0.250) #fff0f5 lavenderblush (255.0.0.191.144.90.196.228.205) #00008b darkblue (0.0.85.250.128) #191970 midnightblue (25.204) #ba55d3 mediumorchid (186.211) #9932cc darkorchid (153.193) #db7093 palevioletred (219.250) #7b68ee mediumslateblue (123.133) #ff69b4 hotpink (255.182.255) #fa8072 salmon (250.203) #ffb6c1 lightpink (255.

0) #d2691e chocolate (210.080) #ff6346 tomato (255.140) #f5deb3 wheat (245.42.0) .180.140.160.0.150.135) #f4a460 sandybrown (244.122) #ff7f50 coral (255.19) #e9967a darksalmon (233.82.0.0) #dc143c crimson (220.30) #a0522d sienna (160.133.71) #ff4400 orangered (255.0.179) #deb887 burlywood (222.34) #a52a2a brown (165.184.69.0) #000000 black (0.63) #ffa500 orange (255.68.222.105.99.60) #b22222 firebrick (178.42) #8b0000 darkred (139.96) #cd853f peru (205.143.20.127.0) #800000 maroon (128.0) #ff8c00 darkorange (255.143) #d2b48c tan (210.0) #ff0000 red (255.122) #ffa07a lightsalmon (255.0.165.45) #8b4513 saddlebrown (139.34.#bc8f8f rosybrown (188.164.