MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Autora: MARCIA BUCHI DO NASCIMENTO

HTML BSICO

1
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

SUMARIO
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. Apresentao Curso On-Line Introduo Estrutura bsica Tabela de cores Cabealho Construindo uma pgina Adicionando uma imagem Alinhamento da imagem Alinhamento do texto da imagem Borda transparente na imagem Borda padro Redimensionar imagem Estilo de texto Inserindo link Listas e marcadores Linha horizontal Formatao de fonte 3 3 4 4 6 7 8 9 10 10 11 14 14 14 14 17 21 21

2
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. 1 - APRESENTAO:

Esta apostila foi cuidadosamente elaborada pelo Portal E-Learning www.cadex.com.br e parte didtico do curso http://www2.cadex.com.br/html.htm. Material exclusivo com finalidade de auxiliar o usurio sobre a forma de consulta e acompanhamento do curso On-Line E-CADEX. O CADEX, tentou abranger o mximo de aproveitamento sobre todo o assunto relacionado ao HTML. Toda informao referente ao contedo desta apostila de inteira responsabilidade da autora e administradora do curso. A reproduo do material e circulao ser permitida desde que citados a fontes e o nome da Autora. O curso On-Line foi desenvolvido em 02 (dois) Mdulos com objetivos de levar maiores conhecimentos e aprendizado a aqueles que querem iniciar a criao de Sites atravs desta linguagem de marcao de hipertexto.

2. CURSO ON-LINE:
O que : HTML - Hypertext Markup Languagem Linguagem de Marcao de Hipertexto. a linguagem utilizada na criao de pginas Web (World Wide Web) uma linguagem simples e acessvel porque no h necessidade de ser traduzida para a linguagem de computador como em outras linguagens de programas do tipo: Delphi, Clipper e etc... pois os prprios browser (Netscape ou Internet Explorer) executam os comandos contidos nos arquivos. Pblico alvo: O curso foi desenvolvido para auxiliar o usurio a conhecer a linguagem HTML. Atravs de temas que sero abordados em ordem cronolgica. Este curso tem como objetivo levar aos principiantes em HTML conhecimentos tericos e prticos para realizao da construo de pginas Web e assim proporcionando ao usurio conhecimento e aperfeioamento e com o conhecimento adquirido aqui, ele estar apto para criar e inovar pginas Web. Durao do Curso: Um dos benefcios de se utilizar o Portal e-learning (O CADEX) quanto ao tempo de durao do curso, onde cada Membro encarrega-se de se programar conforme sua disponibilidade de tempo e horas nos estudos e realizar os exerccios propostos pelo Curso. Lembrando-se que o aperfeioamento depender da disponibilidade de horas e pela dedicao de cada aluno. Programa: HTML BSICO 1 ETAPA: Tem como finalidade introduzir a inicializao do conhecimento HTML, trazendo a familiarizao com os comandos e as principais caractersticas do uso habitual dos comandos simples como: formatao de texto, colocao de imagens, links e etc. HTML AVANADO 2 ETAPA: Introduo de comandos mais avanados para a realizao de pginas WEB como: tabelas, frames, som e etc.

3
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Como funciona: As aulas esto disponveis on-line de forma gradativamente para membros cadastrados no www.cadex.com.br. Cada aluno poder programar o melhor horrio para estudar e realizar os exerccios, propostos ao longo do curso. Os alunos que possuem algum conhecimento de HTML podero pular o cronograma de ensino, mais sempre respeitando os trabalhos a serem entregues no final do curso para avaliao final do que desempenhou. Os Alunos podero tirar as suas dvidas enviando suas perguntas atravs do e-mail do mabuc@cadex.com.br. O Grupo poder participar e interagir com outros membros e com profissionais da rea atravs de nosso frum no http://www.cadex.com.br/forum/index.php enviando suas mensagens de duvidas e dicas para o frum, onde diariamente estaremos verificando e respondendo todas as mensagens. No final do treinamento os alunos podero disponibilizar seus trabalhos realizados, em nosso MURAL e a Certificao do conceito de reconhecimento virtual concedido atravs de uma avaliao feita atravs dos trabalhos realizados do inicio at o fim do curso, avaliando cada aluno em suas atitudes individuais e em comparao as atitudes do coletivo. Ao termino do contedo avaliado o aluno submetido a uma avaliao final para comprovar a avaliao do desempenho dele ao logo de toda a trajetria do curso.

3. INTRODUO: Os documentos em HTML so como arquivos ASCIL comuns, que podem ser editados em: vi, emacs, textedit, notepad ou qualquer outro editor simples. Para editarmos os comandos HTML utilizaremos o bloco de notas que possui no prprio Windows. Todo documento HTML comandos tambm chamados de TAGs so apresentados entre parnteses angulares <..> inicio e </..>fim. Os comandos no so sensveis a caixa, ou seja, tanto faz escrever: <HTML>, <HTml> < html>, <Html>. importante (para fins de organizao) que as TAGs sejam sempre fechadas do ltimo para o primeiro desde modo: <head><title>documento </title></head>.

4. ESTRUTURA BSICA: A linguagem HTML dispe de uma grande quantidade de TAGs, com diversas funes e aes como: alinhamento, formatao, imagens, links e etc... Vamos conhecer as principais TAGs: <html> <head> <title> </title> </head> <body> </body> </html>

4
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. O comando <html> e </html> = Definem o incio e o fim da pgina. O comando <head> e </head> = Definem as aes que a pgina ter tipo: link, ttulo da pgina (title) efeitos e etc... O comando <title> e </title> = Definem o ttulo da pgina que aparecer na barra de ttulo. Este ttulo referenciado em buscas pela rede, dando uma identificao do documento. O comando <body> e </body> = Definem o corpo da pgina onde sero imagens, tabelas formulrios, links e etc... Dentro do comando <body> existem alguns atributos que so: Bgcolor=#cor Especifica a cor de fundo. Quando no indicado ir mostrar a cor padro (branco ou cinza). Background=nomedaimagem.jpg (ou gif) Especifica uma imagem de fundo. Bgproperties=fixed - Configura a imagem de fundo como um painel fixo. Text=#cor Especifica a cor do texto. Quando no indicado mostrar a cor padro (preto). Link=#cor Especifica a cor do link. Quando no indicado, mostrar a cor azul. Vlink=#cor Especifica a cor do link que j foi visitado. Quando no indicado mostrar a cor (azul escuro ou roxo). Alink=#cor Especifica a cor do link no momento em que selecionado. Quando no indicado mostrar a cor vermelha. Leftmargin=valor - Configura a margem esquerda. O valor pode ser em porcentagem ou unidade da tela. Rightmargin=valor - Configura a margem direita. O valor pode ser em porcentagem ou unidade da tela. Exemplo: <body bgcolor=#FFFFCC text=#000000 link=#0000FF vlink=#FF0000 alink=#000099 leftmargin=50 rightmargin=50> <body background=nomedaimagem.jpg text=#000000 link=#0000FF vlink=#FF0000 alink=#000099 leftmargin=50 rightmargin=10> <body background=nomedaimagem.jpg Bgproperties=fixed text=#000000 link=#0000FF vlink=#FF0000 alink=#000099 leftmargin=30 rightmargin=10> colocados: texto,

5
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. A cor pode ser em ingls (write, blue) ou em cdigos (#0000ff). A maioria dos editores j oferece uma tabela de cores, como ns estamos usando o Bloco de notas e nele no h este recurso abaixo est uma relao de cores. 5. TABELA DE CORES:

#000000 #330000 #000033 #330033 #660000 #660033 #000066 #330066 #000099 #330099 #660066 #660099 #0000CC #3300CC #0000FF #3300FF #6600CC #6600FF #990000 #990033 #CC0000 #CC0033 #FF0000 #FF0033 #990066 #990099 #CC0066 #CC0099 #FF0066 #FF0099 #9900CC #9900FF #CC00CC #CC00FF #FF00CC #FF00FF

#003300 #333300 #003333 #333333 #663300 #663333 #003366 #333366 #003399 #333399 #663366 #663399 #0033CC #3333CC #0033FF #3333FF #6633CC #6633FF #993300 #993333 #CC3300 #CC3333 #FF3300 #FF3333 #993366 #993399 #CC3366 #CC3399 #FF3366 #FF3399 #9933CC #9933FF #CC33CC #CC33FF #FF33CC #FF33FF

#006600 #336600 #006633 #336633 #666600 #666633 #006666 #336666 #006699 #336699 #666666 #666699 #0066CC #3366CC #0066FF #3366FF #6666CC #6666FF #996600 #996633 #CC6600 #CC6633 #FF6600 #FF6633 #996666 #996699 #CC6666 #CC6699 #FF6666 #FF6699 #9966CC #9966FF #CC66CC #CC66FF #FF66CC #FF66FF

#009900 #339900 #009933 #339933 #669900 #669933 #009966 #339966 #009999 #339999 #669966 #669999 #0099CC #3399CC #0099FF #3399FF #6699CC #6699FF #999900 #999933 #CC9900 #CC9933 #FF9900 #FF9933 #999966 #999999 #CC9966 #CC9999 #FF9966 #FF9999 #9999CC #9999FF #CC99CC #CC99FF #FF99CC #FF99FF

#00CC00 #33CC00 #00CC33 #33CC33 #66CC00 #66CC33 #00CC66 #33CC66 #00CC99 #33CC99 #66CC66 #66CC99 #00CCCC #33CCCC #00CCFF #33CCFF #66CCCC #66CCFF #99CC00 #99CC33 #CCCC00 #CCCC33 #FFCC00 #FFCC33 #99CC66 #99CC99 #CCCC66 #CCCC99 #FFCC66 #FFCC99 #99CCCC #99CCFF #CCCCCC #CCCCFF #FFCCCC #FFCCFF

#00FF00 #33FF00 #00FF33 #33FF33 #66FF00 #66FF33 #00FF66 #33FF66 #00FF99 #33FF99 #66FF66 #66FF99 #00FFCC #33FFCC #00FFFF #33FFFF #66FFCC #66FFFF #99FF00 #99FF33 #CCFF00 #CCFF33 #FFFF00 #FFFF33 #99FF66 #99FF99 #CCFF66 #CCFF99 #FFFF66 #FFFF99 #99FFCC #99FFFF #CCFFCC #CCFFFF #FFFFCC #FFFFFF

6. CABELHO: A TAG que determina o cabealho <h> e </h> um estilo automtico, ou seja, mesmo estilo de fonte s altera o tamanho e possuem 6 nveis: <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3>

6
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

<h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6>

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Est TAG possui o seguinte alinhamento: Align=left alinha o cabealho esquerda. Align=right alinha o cabealho direita. Align=center alinha o cabealho no centro. Exemplo: <h1 align=center>digite o texto</h1> OBS: Left default, ou seja, estilo padro. O browser no aceita o texto exatamente como est no documento, ou seja, ele no reconhece a tecla ENTER. Para que o texto v para a prxima linha ser preciso utilizar dois comandos que so: <p> e <br> <p> e </p> - promove a quebra e o espaamento do pargrafo do texto, ou seja, faz uma linha em branco entre os pargrafos. Esta TAG possui o seguinte alinhamento: Align=left Alinha o texto esquerda. Align=right Alinha o texto direita. Align=center- Alinha o texto ao centro. Exemplo: pargrafo 1<p>pargrafo 2<p align=center>pargrafo 3 </p> <br> - promove apenas a quebra de linha, ou seja, faz com que o texto fique na linha abaixo sem o espaamento. Esta TAG no utiliza a TAG de fechamento. Exemplo: <br>quebra de linha 1<br>quebra de linha 2<br>

7. CONSTRUINDO UMA PGINA: Primeiro passo: Crie uma nova pasta em Meus documentos nomeando-a: pagina_ web. Ser nesta pasta que ficaro todos os arquivos a serem utilizados na pgina tipo: jpg, gifs e etc... Abra o bloco de notas que est no programa, iniciar, acessrios. No bloco de notas digite:

7
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <html> <head> <title>Primeira pgina Web</title> </head> <body bgcolor=#99ccff text=#0000cc> <h3 align=center>alinhando no centro</h3> <h3 align=right>alinhando lado direito</h3> <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3> <h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6> pargrafo 1 <p>pargrafo 2 </p> quebra de linha 1 <br> quebra de linha 2<br> </body> </html> Salve o bloco de notas dentro da nova pasta que voc acabou de criar (pgina Web) como: index.html . Na caixa de dilogo no item salvar com o tipo escolha a opo: Todos os arquivos(*.*). OBS: Salve todos os blocos de notas com a extenso: htm ou html. Procure usar somente letras minsculas, no use acentuaes, cedilha e no deixe espao entre as palavras, utilize ( _ ) para separa-las(exemplo: construcao_de_pagina.html). A primeira pgina (pgina principal) dever ser salva como: index.html, para que o Browser possa identificar sua pgina no provedor. Abra o Browser (Internet Explorer). V a arquivo, abrir e na caixa de dilogo clique em procurar. Localize a pasta que voc salvou como pagina_web e dentro dela est o bloco de notas que voc salvou como index. Clique neste arquivo, clique em abrir e Ok.

Veja como ficou sua pgina.

8
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

8. ADICIONANDO UMA IMAGEM: Para adicionarmos uma imagem de fundo, substitumos o atributo bgcolor por background=nomedaimagem.jpg (ou gif). (nome da imagem=nome do arquivo). Exemplo: <body background=nomedaimagem.jpg> - (nome da imagem=nome do arquivo).

Para que a imagem fique fixa e apenas o texto role, utilize o atributo: Bgproperties=fixed Exemplo: <body background=nomedaimagem.jpg Bgproperties=fixed> - (nome da imagem=nome do arquivo). OBS: No use imagens com a extenso .BMP (bitmap) pois elas so pesadas e podem prejudicar a abertura de suas pginas. Para colocarmos uma imagem no corpo da pgina usamos a TAG: < img>. Esta TAG no possui a TAG de fechamento. Seu atributo : src=nomedaimagem.jpg> - Define o endereo do arquivo (extenso: jpg ou gif).

9
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Exemplo: <img src=nomedaimagem.jpg> ou <img src=www.cadex.com.br/nomedaimagem.gif - (nome da imagem=nome do arquivo). Para exibir um texto sobre a imagem quando o mouse posicionado em cima da mesma, utilize o atributo: ALT. Exemplo: <img src=nomedaimagem.jpg Alt=descrio do texto> 9. ALINHAMENTO DA IMAGEM: A imagem pode ser alinhada de trs formas que so: Align= left Alinha a imagem esquerda. Align= right Alinha a imagem direita. Align= center Alinha a imagem no centro. OBS: Utilize este alinhamento sempre entre a TAG <p> Exemplo: <p align= center><img src=nomedaimagem.jpg</p>

10. ALINHAMENTO DO TEXTO DA IMAGEM: Estes atributos so utilizados para alinhar o texto ao lado da imagem: Align= Align= Align= Align= Align= middle alinha a primeira linha do texto no meio da imagem. motton - alinha a primeira linha do texto na parte inferior da imagem (padro). top - alinha a primeira linha do texto no topo da imagem. right - alinha a imagem direita e todo o texto esquerda a partir do topo. left - alinha a imagem esquerda e todo o texto direita a partir do topo.

Exemplo: <img src= nomedaimagem.jpg align= top>digite o texto aqui. Voc pode utilizar duas imagens uma do lado esquerdo e outra do lado direito e o texto centralizado entre as imagens, podendo usar somente texto ou texto e imagens. Exemplo: <img align= left src= nomedaimagem.jpg><img align=right src=nomedaimagem.jpg>digite seu texto aqui. - (nome da imagem=nome do arquivo).

11. BORDA TRANSPARENTE DA IMAGEM:

10
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Para que a imagem fique com uma borda transparente utilizamos os seguintes atributos: Vspace= valor espao vertical deixado entre a imagem e o texto. Hspace= valor espao horizontal deixado entre a imagem e o texto. Exemplo: <img src= nomedaimagem.jpg vspace= 30> ou <img src=nomedaimagem.jpghspace=30> - (nome da imagem=nome do arquivo). Pode utilizar as duas borda junta. Exemplo: <img src= nomedaimagem.jpghspace=30 vspace=30> Vamos agora efetuar as alteraes da pgina com o que voc j aprendeu. OBS: Utilize qualquer imagem gif. ou jpg. que voc tem em seu computador

salve como: img01.jpg

salve como: img02.jpg

Considerando que voc ainda esteja com o Browser aberto, clique em exibir cdigo de fonte e abrir o bloco de notas referente primeira pgina que voc criou. Faa as seguintes alteraes que esto assinaladas em vermelho: <html> <head> <title>Primeira pgina Web</title> </head> <body background=img01.jpg text=#0000cc link=#0000cc alink=#99ff66 vlink=#990000> <h3 align= center>alinhando no centro</h3> <h3 align= right>alinhando lado direito</h3> <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3> <h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6> pargrafo 1 <p>pargrafo 2 </p> quebra de linha 1 <br> quebra de linha 2<br> <p><img src= img02.jpg></p> <p align=center><img src=img02.jpg></p> <p align=right><img src=img02.jpg></p> <p><img src= img02.jpg align= top> Aqui voc digita seu texto</p> <p><img src= img02.jpg align= middle> Aqui voc digita seu texto</p>

11
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <p><img src= img02.jpg> Aqui voc digita seu texto</p> </body> </html> Salve o bloco de notas e no browser clique em atualizar. Veja como ficou a continuao da sua pgina.

Faa mais estas alteraes assinaladas em vermelho: <html> <head> <title>Primeira pgina Web</title> </head> <body background=img01.jpg text=#0000cc link=#0000cc alink=#99ff66 vlink=#990000> <h3 align= center>alinhando no centro</h3> <h3 align= right>alinhando lado direito</h3> <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3> <h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6> pargrafo 1 <p>pargrafo 2 </p>

12
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. quebra de linha 1 <br> quebra de linha 2<br> <p><img src= img02.jpg></p> <p align=center><img src=img02.jpg></p> <p align=right><img src=img02.jpg></p> <p><img src=img02.jpg align=top> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=middle> Aqui voc digita seu texto</p><p><img src=img02.jpg> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=right>Aqui voc digita seu texto</p> <p><img src=img02.jpg align=left>Aqui voc digita seu texto</p> <img align=left src=img02.jpg><img align=right src=img02.jpg>Aqui voc digita seu texto</p> <p><img src=img02.jpgalign=left hspace=40 vspace=40>Aqui voc digita seu texto</p> </body> </html>

Veja como ficou a continuao de sua pgina.

12. BORDA PADRO:

13
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. O atributo para a borda padro : Border=valor Define a largura da borda em preto (padro). Exemplo: <img src=nomedaimagem.jpg border=5> - (nome da imagem=nome do arquivo). 13. REDIMENCIONAR A IMAGEM: Os atributos para redimensionar a imagem so: Width=valor Define a largura da imagem. Height=valor Define a altura da imagem. OBS: No aconselhvel utilizar este atributo, pois poder deformar a imagem, o ideal redimensiona-las atravs de um editor de imagem. 14. ESTILO DE TEXTO: As principais TAGS utilizadas so: <b></b> - Estilo em negrito. <i></i> - Estilo em itlico. <u></u> - Estilo sublinhado. Exemplo: <b> texto em negrito </b> <i> texto Itlico</i> <u> texto Sublinhado </u> <p><b><i><u> texto negrito, itlico e sublinhado</u></i></b></p> 15. INSERINDO LINK: O link uma forma de passar para uma determinada pgina pertencente ao seu site ou pode abrir outra pgina qualquer da Web. Sua TAG : <a> e </a>. Seu atributo : href=pgina.html - Informa o endereo da pgina ou outro site. Exemplo:

14
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <a href=pag01.html>Clique aqui</a> ou <a href=www.cadex.com.br>Clique aqui</a> OBS: Pode ser utilizada uma imagem como link. Exemplo: <a href=pag01.html><img src=nomedaimagem.jpg></a> ou <a href=www.cadex.com.br><img src=nomedaimagem.jpg></a> Vamos fazer novas alteraes, mas antes abra um novo bloco de notas para criar uma outra pgina e digite: <html> <head> <title>Segunda Pgina</title> </head> <body bgcolor=#99ccff text=#0000cc> <h1 align=center> Segunda pgina </h1> <br> <br> <br> </body> </html> Salve este bloco de notas como: segunda.html na pasta pagina_web. No se esquea de escolher o tipo de arquivo: todos os arquivos (*.*). Volte ao bloco de notas da primeira pgina e faa as seguintes alteraes que esto assinadas em vermelho: <html> <head> <title>Primeira pgina Web</title> </head> <body background=img01.jpg text=#0000cc link=#0000cc alink=#99ff66 vlink=#990000> <h3 align=center>alinhando no centro</h3> <h3 align=right>alinhando lado direito</h3> <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3> <h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6> pargrafo 1 <p>pargrafo 2 </p> quebra de linha 1 <br> quebra de linha 2<br> <p><img src=img02.jpg></p>

15
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <p align=center><img src=img02.jpg></p> <p align=right><img src=img02.jpg></p> <p><img src=img02.jpg align=top> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=middle> Aqui voc digita seu texto</p><p><img src=img02.jpg> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=right>Aqui voc digita seu texto</p> <p><img src=img02.jpg align=left>Aqui voc digita seu texto</p> <img align=left src=img02.jpg><img align=right src=img02.jpg>Aqui voc digita seu texto</p> <p><img src=img02.jpgalign=left hspace=40 vspace=40>Aqui voc digita seu texto <p><img src=img02.jpg border=10> <p><img src=img02.jpg border=10 width=200 height=100></p> <p><b> texto em negrito</b> <p><i> texto Itlico</i> <p<<u> texto Sublinhado </u> <p><b><i><u> texto negrito, itlico e sublinhado</b></i></u></p> <p> <a href=segunda.html>CLIQUE AQUI</a> para ir a segunda pgina ou clique na imagem <a href=segunda.html><img src=img02.jpg></a> para ir a segunda pgina <br> </body> </html> Veja como ficou sua pgina

16
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Veja a outra pgina que voc salvou como: segunda.html

16. LISTAS E MARCADORES: As listas podem ser simples , numeradas e sem definies. Para a lista simples utilizamos a TAG <ul> e </ul>. Esta TAG requer o comando <li>. Atributos: Type=square quadrado slido. Type=disc crculo slido (padro). Type=circle crculo vazado. Exemplo: <ul type=square> <li>primeira lista <li>Segunda lista </ul> Para as listas numeradas utilizamos a TAG <ol> e </ol> Esta TAG requer o comando <li>

17
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

Atributos:

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR.

Type=a Letras minsculas. Type=A Letras maisculas. Type=I Nmeros romanos maisculos. Type=i Nmeros romanos minsculos. Type=1 Nmeros padro. Exemplo: <ol type=a> <li>primeira lista. <li>segunda lista. </ol> Para que uma lista simples ou numerada tenha um ttulo utilizamos a TAG <lh> Exemplo: <ul type=square> <lh>listas. <li>primeira lista. <li>segunda lista. </ul> Um outro atributo da lista numerada o start. Este atributo faz com que a lista inicie com a letra ou nmero que voc desejar. Start=5 Inicia sua lista com a letra E. Start=5 Inicia sua lista com o numeral V. Start=5 Inicia sua lista com o nmero 5. Exemplo: <ol start=5 type=A> <li>primeira lista <li>Segunda lista < /ol> Para a lista sem definio utilizamos a TAG <dl> e </dl> Esta TAG requer o comando <dt> que indica o ttulo e o comando <dd> que indica a lista.

18
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Exemplo: <dl> <dt>Ttulo <dd>primeira lista <dd>segunda lista </dl> Vamos fazer as novas alteraes assinaladas em vermelho: <html> <head> <title>Primeira pgina Web</title> </head> <body background=img01.jpg text=#0000cc link=#0000cc alink=#99ff66 vlink=#990000> <h3 align=center>alinhando no centro</h3> <h3 align=right>alinhando lado direito</h3> <h1>nvel 1 </h1> <h2>nvel 2 </h2> <h3>nvel 3 </h3> <h4>nvel 4 </h4> <h5>nvel 5 </h5> <h6>nvel 6 </h6> pargrafo 1 <p>pargrafo 2 </p> quebra de linha 1 <br> quebra de linha 2<br> <p><img src=img02.jpg></p> <p align=center><img src=img02.jpg></p> <p align=right><img src=img02.jpg></p> <p><img src=img02.jpg align=top> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=middle> Aqui voc digita seu texto</p><p><img src=img02.jpg> Aqui voc digita seu texto</p> <p><img src=img02.jpg align=right>Aqui voc digita seu texto</p> <p><img src=img02.jpg align=left>Aqui voc digita seu texto</p> <img align=left src=img02.jpg><img align=right src=img02.jpg>Aqui voc digita seu texto</p> <p><img src=img02.jpgalign=left hspace=40 vspace=40>Aqui voc digita seu texto <p><img src=img02.jpg border=10> <p><img src=img02.jpg border=10 width=200 height=100></p> <p><b> texto em negrito</b> <p><i> texto Itlico</i> <p<<u> texto Sublinhado </u> <p><b><i><u> texto negrito, itlico e sublinhado</b></i></u></p> <p> <a href=segunda.html>CLIQUE AQUI</a> para ir a segunda pgina ou clique na imagem <a href=segunda.html><img src=img02.jpg></a> para ir a segunda pgina <br> <ul type=square> <li>quadrado slido</ul> <ul type=disc>

19
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. <li>crculo slido (padro)</ul> <ul type=circle> <li>crculo vazado</ul> <ol type=a> <li>letra minscula</ol> <ol type=A> <li>letra maiscula</ol> <ol type=I> <li>nmeros romanos maisculos</ol> <ol type=i> <li>nmeros romanos minsculos</ol> <ol type=1> <li>nmero padro</ol> <ul type=square> <lh>ttulo <li>primeira</ul> <ol start=5 type=A> <li>incio desejado</ol> <dl> <dt>sem definio <dd>primeira lista</dl> <br> </body> </html>

Veja como ficou sua pgina:

20
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. 17. LINHA HORIZONTAL: A TAG correspondente <hr> e seus atributos so: size=valor - Define a espessura da linha. width=valor% - Define o comprimento da linha. noshade - Define como uma linha slida. color=#cor - Define a cor da linha. Exemplo: <hr size=10 width=50% noshade color=#ff0000> align=valor - define o alinhamento da linha que pode ser: center centralizada. left - lado esquerdo. right - lado direito. Exemplo: <hr align=center size=5 width=80% color=#ff0000>

18. FORMATAO DE FONTE: A TAG <font> e </font> e seus atributos so: size=n - define o tamanho da fonte que vai de 1 a 7. color=#cor - define a cor do texto. face=nome da fonte - tipo da fonte. Exemplo: <font size=1 color=#ff0000 face=arial black>digite seu texto</font>

align=valor - define o alinhamento da linha que pode ser: center centralizada. left - lado esquerdo. right - lado direito. Exemplo: <hr align=center size=5 width=80% color=#ff0000>

21
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.

MATERIAL EXCLUSIVO E-CADEX WWW.CADEX.COM.BR. Agora vamos fazer mais estas alteraes. Antes da TAG </body> digite: <br>linha horizontal. <hr color=#ff0000> <br>largura da linha horizontal. <hr size=10 color=#ff0000> <br>comprimento da linha horizontal. <hr width=50% color=#ff0000> <br>linha horizontal slida. <hr noshade color=#ff0000> <br>alinhamento,comprimento,largura e cor da linha horizontal. <hr align=right width=50% size=7color=#ff0000> <font size=1 color=#ff0000 face=arial>exemplo 01</font><br> <font size=2color=#ff0000 face=verdana>exemplo 02</font><br> <font size=3 color=#ff0000 face=arial>exemplo 03</font><br> <font size=4 color=#ff0000 face= verdana>exemplo 04</font><br> <font size=5 color=#ff0000 face=arial>exemplo 05</font><br> <font size=6 color=#ff0000 face=verdana>exemplo 06</font><br> <font size=7 color=#ff0000 face=arial>exemplo 07</font> <br>

Veja como ficou sua pgina.

22
Copyright 2004 CADEX DESING. Proibida a reproduo e utilizao no autorizada, de todo ou parte do contedo deste site. C A D E X - Todos os direitos reservados.