1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 I – Atribuições e atividades profissionais relativas à qualificação ou à habilitação.

Apresentação em tema: "1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 I – Atribuições e atividades profissionais relativas à qualificação ou à habilitação."— Transcrição da apresentação:

1 1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 I – Atribuições e atividades profissionais relativas à qualificação ou à habilitação profissional, que justificam o desenvolvimento das competências previstas nesse componente curricular. Instalar, codificar, compilar e testar programas estruturados; Desenvolver e realizar a manutenção de sites e portais na INTERNET e na INTRANET; Codificar programas e WEBSITES orientados a objetos; Utilizar ferramentas de desenvolvimento para construir soluções que auxiliem o processo de criação de interfaces; Publicar WEBSITES;

2 2 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 II - Bases Tecnológicas 1 - Criação de WEBSITES 2 - Formatação de uma página 3 - Inserção de imagens 4 - Criação de vínculos 5 - Criação de tabelas 6 - Editoração de páginas em HTML 7 - Ambientes de desenvolvimento de WEBSITES

3 3 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 III - Habilidades Utilizar ambientes de desenvolvimento na elaboração de WEBSITES. Executar procedimentos de testes em WEBSITES. Redigir instruções de uso dos WEBSITES implementados. IV - Competências Construir página de divulgação na INTERNET, utilizando codificação adequada. Avaliar, testar e otimizar códigos de WEBSITES.

4 4 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 V – Material de Apoio Didático para Aluno OLIVIERO, Carlos A. J. Faça um SITE HTML 4.0 – Conceitos e Aplicações. São Paulo: Érica. 272 páginas. MARCONDES, Chritian Alfim. HTML 4.0 Fundamental – A base da programação WEB. São Paulo: Érica. 272 páginas. VI – Outras Observações/ Informações Avaliação: 29/03/2010 – recuperação: 13/04/2010 Conselho: 08/05/2010 Avaliação: 07/06/2010 - recuperação: 22/06/2010 Conselho: 10/07/2010 (08/07/2010)

5 5 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 O que é HTML HTML significa Hypertext Markup Language. É a linguagem de descrição de documentos usada na World Wide Web. É um recurso muito simples e acessível para a produção de documentos. Uma página em HTML é um arquivo texto comum (ASCII), gravados com extensão “htm” ou “html”, que contém TAGS – marcadores que constituem a indicação de comandos da linguagem. Cada TAG informa ao programa visualizador (browser) como ele deverá formatar o texto, e deve estar dentro dos sinais de menor ( ). Os TAGs podem ser únicos ou duplos, com início e fim. Exemplo de TAG único: Exemplo de TAG duplo:....

6 6 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Alguns Conceitos Browser: "Paginador" ou "Navegador". São softwares que permitem a visualização de páginas www. Os mais conhecidos são: "Internet Explorer“, "Netscape Navigator“, “Firefox” etc. Download: Ato de copiar um arquivo de um computador (servidor), através de FTP. FTP: File Transfer Protocol. É o protocolo de transferência que permite o download ou upload de arquivos. Hipertextos: são documentos que, além de texto, podem conter sons, imagens, animações, ou seja, todos os recursos conhecidos como hipermídia. Ele permite a ligação (ou links) com outros hipertextos. Costumam ser veiculados na www, e também podem ser chamados de páginas ou homepages. Home-page: Hipertexto em linguagem HTML, que permite a visualização de informações a quem acessar um endereço na WWW. HTML: HyperText Markup Language. É uma linguagem de marcadores (tags), utilizada para criação de hipertextos. -->

7 7 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Link: termo utilizado para indicar uma ligação com outro hipertexto. Site: Conjunto de home-pages a respeito de um determinado assunto. Upload: Ato de colocar (sobrepor) um arquivo em um computador (servidor), através de FTP. WWW: World Wide Web. Significa "teia ao redor do mundo". É um ambiente que permite o compartilhamento de informações pela Internet através de hipertextos.

8 8 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Editores A codificação das páginas pode ser feita de várias formas: Editores de texto puro (como "WordPad" ou "Bloco de Notas" do Windows) - esta opção é indicada para aqueles que conhecem ou querem conhecer os comandos da linguagem HTML. Os comandos devem ser escritos integralmente e sem erros. Editores WYSIWYG (what you see is what you get) ou "o que você vê é o que você obtém“ - são muito fáceis de usar, pois se parecem com editores de texto nos quais o usuário vai formatando letras, cores, links etc, como em um editor de texto convencional. As barras de menu auxiliam na inclusão de outros elementos como links e imagens. Como exemplo temos o "Netscape Editor" (disponível no Netscape Navigator Gold), o "PageMil", o "FrontPage", o “HotDog” e muitos outros. Esses editores produzem bons resultados, porém, têm suas limitações. Seu uso é indicado para aqueles que querem começar a produzir páginas mais elaboradas. Editores auxiliares - auxiliam a colocação dos marcadores para formatação da página. Para codificar páginas através deles deve-se ter algum conhecimento de HTML. Eles são indicados para programadores que gostam de complementar suas páginas manualmente, ou seja, alterar e concluir com comandos a programação inicial. --->

9 9 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Editores (Continuação) Editores conversores - são editores de texto convencionais, como o Word 97 ou o 2000/3/7, que possuem a opção "salvar como html", ou seja converte textos simples em páginas WWW. O principal problema deste tipo de editor é que nem sempre são capazes de reproduzir fielmente uma página que foi confeccionado com formas mais sofisticadas. Observações importantes na criação de páginas: 1.Para efeitos práticos, é interessante que o arquivo da sua página inicial se chame "index.htm". 2.Há diferença entre letras minúsculas e maiúsculas na nomenclatura de arquivos. Portanto, recomendamos que todos os nomes de arquivo e suas referências em links sejam escritos usando letras minúsculas.

10 10 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Pontos Iniciais Antes de iniciarmos a construção de um site é interessante parar e refletir sobre algumas questões: 1. Qual é a principal proposta de seu site? Pode ser, por exemplo, conter apenas informações sobre uma empresa ou a venda de produtos para um determinado público. 2. O conteúdo pode ser dividido em telas? Estas telas são dependentes ou independentes? 3. Será possível uma futura ampliação ou complementação do conteúdo? Após a reflexão a respeito desses pontos, alguns passos podem ser seguidos para que a construção do seu site seja fácil e eficiente: 1.Elabore um sumário para os itens que seu site deverá conter. Ele o auxiliará na criação da página principal e na divisão dos links. 2. Lembre que cada item deva ter coerência independente da seqüência percorrida, ou seja, a navegação na web não é linear pois o usuário é livre para seguir vários caminhos. Para isto, as telas devem ser montadas de modo que cada idéia seja concluída na mesma página e não dependa que uma outra tenha sido vista antes ou percorrida imediatamente depois. --->

11 11 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 3. Confeccione um rascunho de suas páginas incluindo o local das imagens, tipologia das letras e cores. Nesta etapa você está construindo o roteiro para a construção de seu site. 4. Evite textos longos em excesso, pois não incentivam a leitura on-line. 5. Confeccione e trate as imagens que podem ser fotos, desenhos, animações, etc... As imagens devem ser gravadas no formato JPG ou GIF. Evite imagens grandes, pois a demora no carregamento durante a navegação desestimula o usuário a ver sua página. Publicando um site ou Colocando seu site no AR Para ter seu site publicado para que outras pessoas o utilizem é necessário colocar as páginas em um servidor WWW. Há vários servidores públicos que permitem a publicação de sites particulares. Por convenção, a página inicial do site deve chamar-se index.html (ou index.htm). Normalmente, o arquivo index.html é o arquivo default dentro de um diretório. Quando indicamos um endereço para visualização de um documento, e não especificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html - por isso é possível, por exemplo, escrevermos tanto www.teste.com.br como www.teste.com.br/index.html. Se esse arquivo não existir dentro do diretório, o browser retornará uma listagem dos arquivos contidos naquele diretório, o que pode não ser nosso desejo. Esse arquivo default é definido na configuração do servidor WWW.

12 12 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Estrutura Básica de uma Página Titulo do Documento texto, imagem, links,... Os TAGs HTML não são sensíveis à caixa. É indiferente escrever em letras maiúsculas ou minúsculas. Os documentos se dividem em duas seções principais, que veremos a seguir. O TAG – que será usado em conjunto com seu tag de fechamento e será colocado no início e no final do documento, delimitando a área onde serão colocados os TAGS HTML. O TAG - que também terá seu tag de fechamento e servirá para delimitar uma área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar).

13 13 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 O TAG - que será usado dentro dos tags, e servirá apenas para colocar um título que aparecerá na barra de título do seu browser ( não esqueça o ). Dentro dos TAGS serão colocados todos os comandos, textos e imagens da sua página. Será o corpo da sua página. Exercício 1 Utilize o bloco de notas, digitando os comando abaixo. Grave o arquivo com o nome exerc1.htm e execute no navegador (Internet Explorer, Firefox, outro) --->

14 14 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 30/5/2016 05:30 Página de exemplo Esta é a primeira página desta disciplina.