CURSO DE HTML ON LINE - UEL



[pic]

|ÍNDICE |

➢ Introdução

➢ Menu do FrontPage 2000

➢ Ferramentas do FrontPage 2000

➢ Tutorial de HTML

➢ Como criar um Site

➢ Tabela de Cores

➢ Listas

➢ Links

➢ Imagens

➢ Tabelas

➢ Frames

➢ Componentes do FrontPage 2000

Como instalar as extensões do FrontPage 2000

Componente 1 - Contador de Acessos

Componente 2 - Campo de Confirmação

Componente 3 - Página de Inclusão

Componente 4 - Formulário de Pesquisa

➢ Formulários

➢ JavaScript

➢ Java

➢ Banco de Dados

➢ DHTML

➢ CSS 2.0 - Cascading Style Sheets 2.0 - Folha de Estilo

➢ Música

➢ Temas do FrontPage 2000

➢ Publicação de Site na Internet

➢ Divulgação em Sites de Busca

➢ Dicas Finais

|MENU |

|File – Arquivo |

|New – Novo |

|Page - Página - criar nova página |

|Web - Web - criar novo site |

|Folder - Pasta - criar nova pasta |

|Task – Tarefa - criar anotações sobre tarefas pendentes |

|Open – Abrir - abrir página |

|Close – Fechar - fechar página |

|Open Web – Abrir Web - abrir site |

|Close Web - Fechar Web - fechar site |

|Save – Salvar - Salvar arquivo |

|Save As - Salvar Como - salvar arquivo como |

|Publish Web - Publicar Web - publicar site na Internet |

|Import – Importar - importar site , páginas e imagens |

|Preview in Browser - Visualizar no Navegador - visualizar página no navegador |

|Page Setup - Configuração da Página - ajuste da página para impressão |

|Print Preview - Visualizar Impressão - previsão da impressão da página |

|Print – Imprimir - imprimir página |

|Send – Enviar - enviar página via email |

|Properties – Propriedades - propriedades da página |

|Recent Files - Arquivos Recentes |

|abrir lista dos arquivos mais recentes que esteja trabalhando |

|Recents Web – Webs Recentes - exibir lista de sites recentes |

|Exit – Sair |

|Edit - Editar |

|Undo – Desfazer - desfazer última ação |

|Redo – Refazer - refazer novamente para última ação |

|Cut – Recortar - recortar página |

|Copy – Copiar - copiar página |

|Paste – Colar - colar página |

|Paste Special - Colar Especial - colar especial |

|Delete – Excluir |

|Select All - Selecionar Tudo |

|Find – Localizar - localizar determinada palavra na página |

|Replace – Substituir - substituir palavra localizada por outra |

|Check Out |

|Check In |

|Undo Check Out - Desfazer Check out |

|Task - Tarefa |

|exibir lista de tarefas Pendentes: |

|Add Task - Adicionar Tarefa |

|Start - Iniciar anotações de tarefas pendentes |

|Marked as Completed – Marcar como concluída |

|Show History - Mostrar Histórico |

|View - Exibir |

|Page – Página - exibir página |

|Folders – Pastas - exibir pastas |

|Reports – Relatórios - exibir relatórios |

|Site Summary - Resumo do Site |

|All Files – Todos Arquivos |

|Recently Added Files – Arquivos recentemente adicionados |

|Recently Changed Files - Arquivos recentemente modificados |

|Older Files – Arquivos mais Antigos |

|Unlinked Files – Arquivos Desvinculados - exibir arquivos sem links |

|Slow Pages - Páginas Lentas |

|Broken Hyperlinks – Hyperlinks Desfeitos |

|Component Errors - Erros dos componentes do FrontPage 2000 |

|Review Status – Status de Revisão |

|Assigned to – Atribuido à - exibir dados para assinar o nome do autor |

|Categories - Categorias - exibir categorias |

|Publish Status - Status da Publicação |

|Check Out Status - Status do Check Out |

|Navigation – Navegação - exibir barras de navegação |

|Hyperlinks – Hyperlinks - exibir links |

|Tasks – Tarefas - exibir lista de tarefas pendentes |

|View Bars - Barras de Modo de Exibição - exibir ou não barras de modo de exibição |

|Folder List - Lista das Pastas - exibir ou não lista das pastas |

|Reveal Tags – Revelar Marcadores - exibir tags |

|Toolbars – Ferramentas |

|exibir ou não as ferramentas : |

|Stantard – Padrão - ferramentas básicas |

|Formating – Formatação - ferramentas de formatação |

|DHTML Effects – Efeitos de DHTML - ferramentas de Efeitos de DHTML |

|Navigation – Navegação - ferramentas de navegação |

|Pictures – Figuras - ferramentas para imagens |

|Positioning - Posicionamento - ferramentas para posicionamento |

|Reporting – Relatório - ferramenta para relatório |

|Style - Estilo - ferramenta sobre CSS - Folha de Estilo |

|Tables - Tabela - ferramentas para Tabelas |

|Customize - Personalizar |

|Refresh – Atualizar - atualizar dados da página |

|Insert - Inserir |

| |

|Break - Quebra de Linha |

|inserir quebra de linha ; atalho Shift + Enter |

|Horizontal Line - Linha Horizontal |

|inserir linha horizontal |

|Date and Time - Data e Hora |

|houve modificação na página, que será automaticamente atualizada à cada vez que for modificada e salva a página |

|Symbol – Símbolo - inserir símbolo |

|Comment – Comentários - inserir comentários |

|Navigation Bar - Barra de Navegação - inserir barra de navegação |

|Page Banner – Faixa de Página - inserir página com banner |

|Component – Componentes - inserir os componentes do FrontPage 2000: |

|Office SpreadSheet - inserir planilha do Excel |

|Banner Add Manager – Letreiro Digital - inserir banner do frontpage 2000 |

|Hit Counter – Contador de Acesso - inserir contador |

|Hover Button – Botão em Foco - inserir botão hover do frontpage 2000 |

|Marque – Letreiro Rolante - inserir texto rolante que só funciona no Internet Explorer |

|Confirmation Field – Campo de Confirmação para Formulário |

|Include Page – Incluir Página - inserir página dentro de outra página |

|Scheduled Picture – Imagem Programada |

|Scheduled Include Page – Incluir Página Programada |

|Substitution - Substituição |

|Categories - Categorias |

|Search Form - Formulário de Pesquisa |

|Tables of Contents – Índice Analítico |

|Additional Components - Adicionar Componentes |

|Database - Banco de Dados |

|inserir Banco de Dados : |

|Results - Resultados - inserir dados |

|Columm Value - Valor da Coluna - inserir valor à coluna |

|Form – Formulário - inserir formulário |

|One-line Textbox – Caixa de Texto de uma Linha |

|Scrolling Textbox – Caixa de Texto de Rolagem |

|Checkbox – Caixa de Seleção |

|Radio Buttom – Botão de Seleção |

|DropDown Menu – Menu Suspenso |

|Push Button – Botão de Ação - inserir botão enviar / limpar |

|Picture – Figura - inserir imagem |

|Label – Rótulo - inserir rótulo |

|Form Properties - Propriedades do Formulário |

|Advanced – Avançado |

|inserir recursos avançados |

|HTML – HTML - inserir tag |

|Design Time Control – Controle em Tempo de Criação |

|Java Applet – Multiplicativo Java - inserir applet em java |

|Plug-in - inserir som, usando o comando |

|Active X Control – Controle Active X |

|Show Design Time Control – Mostrar Controle em Tempo de Criação |

|Picture – Figura - inserir imagem |

|Clip Art - inserir imagem do clip art do FrontPage 2000 |

|From File - Do Arquivo - inserir imagem de algum arquivo |

|Vídeo - inserir vídeo |

|File – Arquivo - inserir arquivo |

|Bookmark – Indicador - inserir destino para o link no mesmo documento |

|Hyperlink – Hyperlink - inserir link |

|Format – Formatar |

|Font – Fonte -modificar fonte |

|Paragraph – Parágrafo - modificar parágrafo |

|Bullets and Numbering – Marcadores e Numeração - inserir lista com marcadores e numerada |

|Borders and Shading – Bordas e Sombreamento |

|Position – Posição - inserir posicionamento de elemento |

|Dynamic HTML Effects - Efeitos de DHTML - inserir efeitos de DHTML |

|Style – Estilo - Folha de Estilos - formatar em CSS |

|Style Sheet Links - Links da Folha de Estilos - formatar links em CSS |

|Theme – Tema - inserir tema do FrontPage 2000 |

|Shared Borders – Bordas Compartilhadas - inserir bordas |

|Page Transition - Página de Transição |

|Remove Formatting - Remover Formatação |

|Properties – Propriedades - exibir propriedades |

|Tools - Ferramentas |

|Speeling – Ortografia - corrigir palavras que estejam com erros ortográficos |

|Thresaures – Dicionário de Sinônimos |

|Recalculate Hyperlinks – Recalcular Hyperlink - redefinir link |

|Security - Segurança |

|Macro - Macro |

|Visual Basic Editor - abrir o editor do Visual Basic |

|Microsoft Script Editor - abrir editor de JavaScript |

|Add-Ins – Suplementos |

|Customize - Personalizar |

|Web Settings – Configurações da Web |

|Options - Opções |

|Page Options - Opções da Página |

|Tables - Tabelas |

|Draw Table - Desenhar Tabela - desenhar tabela à mão livre |

|Insert – Inserir |

|Table – Tabela - inserir tabela |

|Rows and Columns – Linhas e Colunas - inserir linhas e colunas |

|Cell – Células - inserir célula |

|Caption - inserir legenda da tabela ( título ) |

|Delete Cells - Excluir Célula - |

|Select – Selecionar |

|Table - selecionar tabela |

|Column - selecionar coluna |

|Row - selecionar linha |

|Cell - selecionar célula |

|Merge Cells - Mesclar Células |

|transformar células selecionadas em uma célula |

|Split Cells - Dividir Células |

|dividir células em linhas e colunas |

|Distribute Rows Evently - Distribuir Linhas Igualmente |

|Distribute Columns Evently - Distribuir Colunas Igualmente |

|Auto-Fit – Auto-Ajustar |

|Convert – Converter |

|Text to Table – Texto para Tabela - converter texto para tabela |

|Table to Text – Tabela para Texto - converter tabela para texto |

|Properties – Propriedades |

|Table - propriedades da tabela |

|Cells - propriedade da célula |

|Frames - Quadros |

|Split Frame - Dividir Quadro |

|Delete Frame – Excluir Quadro |

|Open Page in New Window – Abrir Página em Nova Janela - visualizar quadro na tela toda |

|Save Page – Salvar - salvar página |

|Save Page As - Salvar Como - salvar página como |

|Frame Properties - Propriedades do Quadro |

|Window - Janela |

|determina quais são as páginas que estão abertas no FrontPage 2000 |

|New Window - Nova Janela |

|abrir nova janela |

|Help - Ajuda |

|Microsoft FrontPage Help - Ajuda sobre FrontPage 2000 |

|What's this ? - O que é isto ? |

|Office on the Web - Sobre Office 2000 no site da Microsoft |

|Detect and Repair - Detectar e Corrigir |

|About Microsoft FrontPage - Sobre FrontPage 2000 |

|FERRAMENTAS |

New Page – Nova Página - criar nova página

Page – Página - criar nova página

Web - Web - criar novo site

Folder - Pasta - criar nova pasta

Task – Tarefa - criar nova anotação ( tarefas pendentes )

Open - Abrir - abrir página

Page – Página - abrir página

Web – Web - abrir site

Save - Salvar página

Publish Web - Publicar Web

Folder List - Exibir ou não Lista de Pastas

Print - Imprimir página

Preview in Browser –visualizar página no navegador

Spelling - Ortografia

Cut - Recortar

Copy - Copiar

Paste - Colar

Format Painter – Pincel

Undo – Desfazer - voltar para última ação

Redo - Refazer - refazer próxima ação

Insert Component - Inserir Componente

Insert Table - Inserir Tabela

Insert Picture From File - Inserir Figura do Arquivo

Hyperlink – Hyperlink - criar Link

Refresh - Atualizar

Stop - Parar

Show All – Mostrar Tudo - exibir todos os Parágrafos

Microsoft FrontPage Help - ajuda do FrontPage

clicando na seta :

More Buttons - Mais Botões - Adicionar ou Remover Botões

Style – Estilo - inserir alguns tags

Formatted – Formatado

Address – Endereço

Heading 1 – Título 1 até Heading 6 - Título 6

Numbered List – Lista Numerada

Bulleted List – Lista com Marcadores

Directory List - Lista de Diretório

Menu List – Lista de Menus

Defined Term – Termo Definido

Definition – Definição

Font – Fonte - tipo de fonte

Font Size - Tamanho da Fonte

Bold - Negrito

Italic - Itálico

Underline - Sublinhado

Align Left - Alinhar à Esquerda

Align Center - Centralizar

Align Right - Alinhar à Direita

Numbering – Numeração - inserir lista numerada

Bullets – Marcadores - inserir lista não-numerada

Decrease Indent - Diminuir Recuo

Increase Indent - Aumentar Recuo

Highlight Color – Realçar Texto - inserir cor de fundo atrás do texto

Font Color – Cor da Fonte - modificar cor da fonte

Add or Remove Buttons - Adicionar ou Remover Botões

|VIEWS – MODOS |

Page - Páginas - exibe as Páginas do Site

Folders List - Lista de Pastas - exibir ou não Lista de Pastas do Site

Folders - Pasta - exibe as Pastas do Site

Reports - Relatórios - exibe relatórios sobre o Site

Navigation - Navegação - exibe Organograma do Site ( opcional )

Hyperlinks - Hyperlinks - exibe lista de links da cada página selecionada

Tasks - Tarefas - exibe as anotações de tarefas pendentes

|COMO CRIAR UM SITE NO FRONTPAGE 2000 |

|EXERCÍCIO 1 – CRIAR SITE |

1. Arquivo > Novo > Web

Tipos de Site :

Geral - vários tipos de sites

Páginas de Quadros - vários tipos de sites com frames

Folha de Estilos - vários tipos de sites com Folha de Estilos

2. Selecione Página Normal

3. Observe que no lado direito : Options ( Opções )

áquina /site , vamos criar um site chamado curso

áquina/curso . OK

4. No Windows 98 , o site será armazenado :

C:\Inetpub\wwwroot\Curso ou

Meus Documentos > Meus Sites

5. Será criada automaticamente a página principal : default.htm ou index.htm

6. Arquivo > Novo > Página

7. Arquivo > Salvar Como

8. Salvar como exer1.htm

9. Clique dentro da página com o botão direito do mouse, Propriedades.

Geral> Título, digite: Exercício 1

Plano de Fundo> Cores>

Plano de Fundo> e escolha uma cor para o fundo da página ;

Margens - deixar como está

10. Personalizar -para inserir comandos que especificam dados sobre a página ;

clique em Adicionar na parte de baixo e digite :

Nome: Author ; Value ( Valor ) : seu nome

clique em Adicionar na parte de baixo e digite :

Nome: Description ; Value ( Valor ) : mailto:microman@.br ; digite seu email

clique em Adicionar na parte de baixo e digite: Nome: Description ; Valor: digite uma descrição sobre a página, neste exemplo , página sobre comandos básicos de html OK

11. Idioma: Escolha o Português do Brasil

12. Grupo de Trabalho

Categorias Disponíveis - especificar tipo de categ. do site

Atribuído à

Status de Revisão

13. Clique em Estilo > Heading 1 ( Título 1 )

14. Centralize o texto

15. Minha Primeira Página ( e pinte de uma cor )

16. Inserir > Linha Horizontal)

17. Selecione a linha horizontal e com o botão direito do mouse:Propriedades

largura: 90% ; cor: este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

18. Digite o texto : Hipertexto possibilita ligar uma palavra ou um trecho de texto com outras partes desse ou de outros documentos; esta ligação é chamada link de hypertexto ou simplesmente link.

( dê um Shift + Enter para criar uma quebra de linha )

Ao dar um clique em um link, o programa HTML irá se encarregar de desviar sua leitura para um novo trecho do documento.

( dê Enter para criar novo parágrafo )

Hipermídia possui basicamente o mesmo conceito de hipertexto só que se refere a várias formas de mídia como : sons, imagens , slides, cinema, inclusive textos. Isso significa que uma imagem pode estar relacionada a um texto como a uma imagem maior ou a uma música.

19. Inserir > Linha Horizontal

20. Selecione o texto e clique em para alinhar à esquerda

21. Clique no rodapé HTML

22. Em troque para para justificar o texto

23. Clique no rodapé Normal

24. Selecione a texto novamente e clique em Aumentar Recuo para fazer um recuo ( blockquote )

25. Mantendo o texto selecionado > botão direito do mouse >Propriedades :

Fonte: verdana, arial ou helvetica, Tamanho: 2 ( 10pt )

caso o usuário não tenha a primeira fonte no seu computador, ele visualizará a página com a segunda fonte, ou a terceira e caso não tenha nenhuma das três fontes, por default em HTML ele visualizará o Times Roman

26. Clique abaixo da linha horizontal

27. Digite centralizado : Seu Nome :

Inserir > Símbolo > e escolha © ; 1999 ; ficando assim: Seu Nome © 1999 ; Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

28. Clique no disquete para salvar sua página

29. Clique em Visualizar no Navegador

|EXERCÍCIO 2 – LISTAS |

Arquivo > Abrir Web e abra seu site

Arquivo > Novo > Página

Arquivo > Salvar Como

Salvar como exer2.htm na pasta onde você salvou o exer1.htm

Clique dentro da página com o botão direito do mouse > Page Properties

Propriedades da Página

Geral > Título e digite : Exercício 2

Plano de Fundo > Cores >

Plano de Fundo e escolha uma cor para o fundo da página , caso queira outra cor , clique em Custom Colors e escolha uma cor

Margens - deixar como está

Personalizar - para inserir comandos metas que especificam dados sobre a página ;

clique em Adicionar na parte de baixo e digite :

Nome : Author ; Valor: seu nome

clique em Adicionar na parte de baixo e digite :

Nome : Description ; Value ( Valor ) : mailto:microman@.br ; digite seu email

clique em Adicionar na parte de baixo e digite :

Nome: Description ; Value ( Valor ) : digite uma descrição sobre a página, neste exemplo , página sobre listas. OK

Idioma e escolha o Português do Brasil ( opcional )

Grupo de Trabalho

Categorias Disponíveis - especificar tipo de categoria do site

Atribuído à - site feito por

Status da Revisão

Clique em Estilo> Título 1

Centralize o texto

Tipos de Listas ( e pinte de uma cor )

Inserir > Linha Horizontal

Selecione a linha horizontal e com o botão direito do mouse, Propriedades largura: 90% ; cor: este comando dá cor a linha horizontal, e ele só é aceito no Internet Explorer

Digite : Os principais times de futebol do Rio são :

Clique no ícone Lista Numerada e digite Flamengo

Dê enter : Vasco , mesmo procedimento e digite Botafogo e Fluminense

Dê duas vezes para desativar o comando de lista

Digite : Os principais times de futebol de São Paulo são :

Clique no ícone Lista com Marcadores e digite Corínthians

Dê : São Paulo , mesmo procedimento e digite Santos e Ponte Preta

Digite : Os principais times de futebol do Rio Grande do Sul são :

Clique em Lista Numerada e digite Grêmio

Dê enter : Internacional , mesmo procedimento e digite Juventude

Selecione a lista dos times do RS > botão direito do Mouse, Propriedades Números: escolha a lista com números romanos

Marcadores Simples

Figuras como Marcadores , que falaremos sobre este tipo de marcador no capítulo sobre Imagens

Conclusão : para inserir uma lista especial , primeiramente se cria uma lista numerada e depois muda o tipo de lista através das propriedades da lista

Selecione os textos : Os principais times de futebol de Rio até Juventude

Botão direito do mouse > Fonte > digite : verdana,arial,helvetica e 2 ( 10pt )

Inserir > Linha Horizontal ( observe que ela manteve os 90% de largura )

Digite centralizado : Seu Nome

Inserir > Símbolo > e escolha © ; 1999 ; ficando assim

Seu Nome © 1999 ;

Selecione este texto e coloque as fontes : verdana,arial,helvetica , 1 ( 8pt ) e em negrito

Clique no disquete para salvar sua página

Clique em Visualizar no Navegador

|LINKS |

Os links são criados através da tag ...

Links para uma página

Título da Página

Ir para o Exercício 1

Link para um Site

Título da Página

Disney

Link para email

Título da Página

Contato

Link para uma seção dentro da própria página

Título da Página

Clientes

..............

➢ Determina para onde irá o link

➢ Determina o link propriamente dito

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download