homeyou

Technical Translations by Artur Weber & Adelina Domingos

Adelina Domingos
Artur Weber
Original Article: How to Make a Web Page
Author: Tom O'Haver

Como fazer uma página da Web

Tom O'Haver ([email protected]), Professor Emeritus, The University of Maryland at College Park
http://terpconnect.umd.edu/~toh/HowToMakeAWebPage.html
 http://tom.ohaver.googlepages.com/howtomakeawebpage

Índice

A Estrutura de uma página da Web
As páginas da Web são, na verdade, arquivos de texto que são "marcados" com símbolos para representar a estrutura e a função. Você pode preparar e editar páginas da Web em qualquer editor de texto ou processador de texto que você gosta. O sistema de tags, chamado HTML (HyperText Markup Language), é muito lógico e não é difícil de aprender. No entanto, você realmente não precisa falar HTML fluente para criar suas próprias páginas da Web. Existem vários atalhos que foram desenvolvidos para simplificar o processo..

Os ícones, imagens, mordidas de som e clipes de vídeo que são comuns em páginas da Web são, na verdade, arquivos separados que são referidos por códigos HTML especiais. Quando a página é visualizada por um navegador da Web, como o Firefox ou o Internet Explorer, esses códigos HTML são interpretados pelo navegador, que puxa todos os arquivos separados e reúne a página da Web na forma em que você finalmente vê-lo. Isso contrasta com um processador de texto moderno, no qual as funções de edição e visualização estão integradas em um programa e em que todo o texto, gráficos e outros elementos do documento estão contidos em um arquivo de documento. Por esse motivo, o processo de criação de páginas da Web é menos direto que a criação de um documento equivalente de processador de texto.

Escrevendo páginas HTML
O texto continua a ser a parte mais importante da maioria dos sites da Web e, portanto, será o primeiro elemento considerado aqui. Todo o texto de uma página da Web está contido em um arquivo de texto ASCII que é "marcado" com códigos HTML e normalmente é dado um nome de arquivo que termina em ".html". O "texto do corpo" da página é simplesmente escrito em texto simples no arquivo html. Você pode usar qualquer editor de texto simples conveniente para escrever seus arquivos HTML, e. SimpleText no Mac ou no Bloco de notas no Windows.

Você deve aprender HTML?
Aprender o HTML você mesmo permitirá que você personalize suas páginas da Web. Não é difícil de aprender; na verdade, é um sistema muito lógico que tem um certo apelo. Tente olhar para o meu Tutorial HTML introdutório, com exemplos de trabalho. Ele explica todos os aspectos essenciais do HTML. Existem seções sobre formatação de texto, gráficos, hiperlinks, som, listas, tabelas, cores de fundo e padrões, etc..

Preciso comprar um programa de editor da Web?
Na verdade não. Tudo o que você realmente precisa é um navegador da Web e o editor de texto que acompanha o seu computador. Não há necessidade de ser vinculado a um editor comercial da Web que acabará por se tornar obsoleto ou exigir a atualização para uma nova versão. Os editores da Web, no entanto, facilitam a criação de páginas da Web atraentes sem aprender HTML. Mas na verdade você não precisa gastar dinheiro; Existem bons editores web gratuitos que você pode baixar, como Kompozer (Screen shot) e meu favorito atual, SeaMonkey, que é um navegador da Web com um conveniente editor web interno. Estes funcionam muito como processadores de texto, mas incluem recursos extras para criação de links, gerenciamento de sites, upload de páginas para o servidor, folhas de estilo em cascata, etc. Também há editores de páginas baseados na Web que fazem tudo dentro de um navegador da Web, por exemplo, o Google é fácil de usar Google Sites.

Templates HTML
Se você não quiser aprender HTML imediatamente, você ainda pode criar páginas da Web usando um modelo criado por outra pessoa que tenha todas as tags HTML necessárias no local e digite ou coloque seu texto. Apenas o Google "templates HTML " ou "web templates " e você encontrará milhares de modelos coloridos e atraentes para download.

Se você é um professor à procura de modelos simples para a construção do site da sala de aula, veja Usando modelos para produzir projetos multimídia publicáveis na Web, que eu criei para minha esposa, que era uma professora de 5ª série. Esses modelos criam sites inteiros, com múltiplas páginas ligados em uma corrente, completos com botões de navegação. Existem links para conjuntos de modelos para download para a construção de sites inteiros de projetos de classe, como slide shows, alphabet books, etc. Instruções completas passo a passo estão incluídas.

Para editar modelos, eu recomendo NoteTab Light, um editor de texto multi-arquivo de freeware que permite que todos os arquivos de um modelo sejam abertos de uma vez e executa as funções de busca e substituição em todos os arquivos de um modelo simultaneamente. Ótimo para alterar o fundo e a cor do texto em todo o modelo, adicionando links de imagem e som, ou alterando os tipos de arquivos gráficos ou de som em um site de várias páginas.

Algumas dicas sobre como criar páginas da Web
Se você estiver desenvolvendo uma página da Web usando um editor de texto para escrever HTML, é conveniente manter seu navegador da Web e o arquivo html aberto em um editor de texto (como Notepad, NoteTab ou SimpleText) no navegador, clique na janela do navegador, puxe o menu Arquivo e selecione Open File , selecione o arquivo html e clique em Open. Se você quiser fazer uma alteração, clique na janela do editor de texto, edite o texto html, Save e, em seguida, clique na janela do navegador e clique no botão Reload.

Você pode achar mais fácil digitar seu texto em seu processador de texto favorito, onde você terá acesso a um verificador ortográfico, etc. Copy e Paste o texto na planilha. Não tente formatar o texto no processador de texto, pois toda a formatação é perdida quando o texto é copiado e colado, a menos que você "Salvar como ..." no formato HTML, copie e ultrapasse o código HTML para o seu modelo. Em vez disso, os códigos de formatação podem ser adicionados ao texto posteriormente. Não se preocupe com o comprimento da linha e as quebras de linha; Os navegadores da Web ignoram os retornos de carro e outros caracteres de quebra de linha e automaticamente formatam o texto na largura da janela (que é controlada pelo usuário, não pelo autor). Para separar parágrafos, adicione uma marca <p> entre parágrafos.

Você pode usar seu processador de texto para criar e editar modelos HTML, mas certifique-se de Save As... em formato TEXTO.

Convertendo arquivos de processador de texto para HTML
Você pode usar o comando "Salvar como HTML" para converter seus documentos em HTML. Isso converte automaticamente a parte de texto do documento em formato HTML e salva todos os gráficos no documento em uma pasta separada. Portanto, um único documento do processador de texto com imagens será convertido em um documento HTML e uma pasta de gráficos; mantê-los juntos para que eles não se separem. Você verá que o HTML produzido por um processador de texto é muito confuso e difícil de ler, mas funciona. Provavelmente é melhor usar um editor de páginas da Web, como Kompozer.

Encontrando gráficos para suas páginas da Web
Os ícones, padrões de fundo e imagens em páginas da Web são, na verdade, arquivos separados que são referidos por códigos HTML especiais. Os arquivos gráficos estão em formato GIF, JPG ou PNG. Você pode criar esses gráficos de várias maneiras; por exemplo, desenhando-os em um programa de desenho, capturar capturas de tela, tirar fotos com uma câmera digital, digitalizar fotografias e arte plana com um scanner, capturar quadros fixos de uma fonte de vídeo, etc. Um programa de editor de gráficos pode então ser usado para converter os arquivos nos formatos PNG, GIF ou JPG necessários. O JPG é o melhor formato para fotografias; PNG e GIF são melhores para desenhos de linha e gráficos.

A maneira mais fácil de obter gráficos para adornar suas novas páginas da Web é capturá-las de outras páginas da Web. QUALQUER gráfico que seja exibido em uma página da Web pode ser facilmente capturado por você e salvo para seu próprio uso. Tudo o que você precisa fazer é posicionar o ponteiro do mouse no gráfico que deseja e mantenha pressionado o botão do mouse (o botão direito do mouse no PC). Aparece um menu pop-up; mova o ponteiro para selecionar "Save picture as..." e solte o botão do mouse. o "Save As..." aparecerá, exibindo o nome do arquivo gráfico (com uma extensão .png, .gif ou .jpg indicando se é um PNG, GIF ou um tipo de arquivo JPG). Navegue até a localização desejada e clique em Save.

Os gráficos salvos no formato PNG, GIF ou JPG estão prontos para usar em páginas da Web; para exibir tal gráfico na sua página, basta salvar o arquivo gráfico no mesmo diretório (pasta) como o arquivo HTML e adicionar ao arquivo HTML uma marca de referência de imagem: <img src="FILE NAME OF GRAPHIC"> onde FILE NAME OF GRAPHIC é substituído pelo nome de arquivo completo do gráfico. Por exemplo, se o nome do arquivo gráfico for "mypicture.jpg", então o código HTML seria lido <img src="mypicture.jpg">.

Existem muitas fontes de gráficos na Web. Use um mecanismo de pesquisa para procurar "clip art" ou "free pictures" ou "free images". Uma maneira conveniente de localizar imagens é usar Pesquisa de imagens do Google ou mecanismo de pesquisa de imagens do AltaVista em http://www.altavista.com/r?L10. Digite um ou mais termos de pesquisa e este mecanismo de pesquisa de imagens retornará uma lista de resultados ilustrados com visualizações em miniatura (pequenas imagens de tamanho de cartão postal) de cada imagem que encontra.

Fazendo suas próprias imagens digitais
Existem duas maneiras básicas de criar suas próprias imagens digitais em suas páginas da Web: use uma câmera digital para tirar as fotos ou use um scanner para digitalizar fotografias ou outro material de cópia plana. Ambas as câmeras digitais e os scanners estão agora amplamente disponíveis e relativamente baratos..

Uma camera digital é ideal para tirar retratos de pessoas, obras de arte, atividades de sala de aula e viagens de campo. A maioria deles vem com um cabo e software para transferir as imagens para o seu computador. A maioria das câmeras conserva suas imagens como arquivos JPG, que é um formato usado para fotos na Web. No entanto, a maioria das câmeras digitais tira fotos que são muito grandes para caber em uma página da Web e levam muito tempo para exibir, mas você pode usar um programa de editor de gráficos para cortar ou reduzir as imagens para um tamanho mais gerenciável. Sugiro usar o programa freewarem Picasa para esta tarefa; Sua função "Export" vai ser reduzir automaticamente o tamanho de uma pasta inteira de imagens para um tamanho que você designar e salvá-los em uma pasta separada - muito conveniente.  

Um scanner de cores é ideal para escanear revistas de imagens impressas e obras de arte plana, como pinturas e desenhos. Os scanners vêm com o seu próprio software - consulte a documentação do seu scanner para saber como operá-lo. Antes de começar a digitalizar, defina a resolução de digitalização para 72 dpi ou 75 dpi (dpi = pontos por polegada). (Siga as instruções do scanner para saber como configurar a resolução). Isso resultará em imagens que são 'life size", ou seja, tão grande quanto o objeto digitalizado original. Para fazer a imagem mais larga esse tamanho real, defina a resolução de digitalização maior que 75 dpi; para fazer a imagem menor que tamanho real, defina a resolução de varredura com menos de 75 dpi. A maioria dos scanners pode salvar imagens digitalizadas em vários formatos: o formato JPG geralmente é a melhor escolha. Quando você salvar a imagem digitalizada, escolha JPG no "Format" menu pop-up na caixa de diálogo Salvar. No entanto, se você estiver usando um editor da Web, como SeaMonkey, você pode inserir, ou copiar e colar, gráficos em qualquer tamanho de pixel e depois redimensioná-los como em um processador de texto arrastando as "alças" nos cantos. 

Alterando formatos gráficos
Os gráficos e ícones que são exibidos nas páginas da Web são arquivos separados que devem estar em formato PNG, GIF ou JPG. Para recortar imagens ou converter de um formato para outro, você pode usar um programa de gráficos gratuito, como Conversor gráfico para o Mac, ou Paint (um editor gráfico simples que acompanha todas as PCs) ou Irfanview para Windows.

A escolha entre os formatos PNG, GIF ou JPG depende da natureza do gráfico. O formato GIF é mais eficiente para gráficos e gráficos gerados por computador de ponta afiada e desenhos de desenhos animados de cor plana, o PNG manipula as cores com mais precisão e é melhor se houver sombras graduadas e o JPG é mais eficiente para fotografias digitais, quadros de vídeos capturados , e outras imagens de objetos naturais. Usar o formato apropriado lhe dará a melhor qualidade de imagem e o menor tamanho de arquivo, o que minimiza o tempo necessário para visualizar as imagens com uma conexão lenta na Internet.

Imagens GIF também podem ser animados e eles jogarão em qualquer navegador da Web sem nenhum complemento, plug-ins ou qualquer ação na parte do visualizador.  Eu uso ScreenCast-O-Matic, uma gravação gratuita de captura de tela de um clique em computadores Windows ou Mac sem instalação. Você pode usá-lo para capturar a exibição de tela animada de qualquer programa. Muito conveniente.

Para abrir uma imagem com um programa de editor de gráficos, você pode:

    (a) arraste o ícone da imagem e solte-o em cima do ícone do programa de editor de gráficos,
    ou
    (b) (clique duas vezes no ícone de) o programa do editor de gráficos e selecione Open do meno File, navegue até o arquivo desejado e clique duas vezes no nome do arquivo.
Para salvar um arquivo gráfico no formato GIF ou PNG (o melhor para gráficos gerados por computador):
    Selecione File --> Save As... , selecione GIF ou PNG do Format menu pop-up, navegue até outro diretório, se desejar, e clique em Save.
Para salvar um arquivo gráfico em formato JPG (melhor para fotografias digitalizadas com tom contínuo e telas de vídeo):
    Selecione File --> Save As... , selecione JPG do Format menu pop-up, navegue até outro diretório, se desejar, e clique em Save.
Coloque todos os seus arquivos de imagem no mesmo diretório (pasta) como os arquivos html; Isso simplificará as páginas e imagens de links e movimentos

Adicionando som e vídeo
Se você tem um modelo de computador que vem com um microfone (um Macintosh ou um PC com uma placa de som), você pode facilmente gravar sons e adicioná-los à sua página da Web. Por exemplo, você pode gravar uma narração falada, usando o microfone pequeno que vem com o computador, ou você pode gravar música ou voz de um gravador de fita ou CD.

    1. Você precisará de um programa de gravador / reprodutor de som que possa salvar em formato mp3, como o excelente programa de freeware Audacity para o PC e Mac. (Ou, você pode usar o gravador de som que vem com o PC em Programas / Acessórios / Entretenimento / Gravador de som, mas ele guarda apenas no formato WAV mais volumoso).

    2. Conecte o microfone na parte de trás do computador, no pequeno conector redondo rotulado com uma imagem de um microfone. Se você estiver gravando de um gravador de fita ou de um CD, conecte sua saída na entrada do microfone. (Você precisará obter um cabo conector adequado, que você pode obter da Radio Shack).

    3. Lance o programa gravador de som. Siga as instruções para gravar os sons. Ajuste o volume do som para obter uma gravação clara. Salve os arquivos de som no formato mp3 ou wav. Coloque os arquivos de som na mesma pasta que o HTML e os arquivos gráficos.

    4. Para obter o som para reproduzir a partir da sua página da Web, crie uma hiperligação para o arquivo. Por exemplo, se você salvou seu arquivo de som como "sound1.mp3", Você poderia adicionar isso à sua página da Web:

    Clique <a href="sound1.mp3">here</a> para ouvir um byte de som.

    Isso cria um hiperlink para o arquivo de som "sound1.mp3", supondo que esteja armazenado no mesmo diretório que a página de chamada.

    Clique aqui ouvir um byte de som.

    Quando o usuário clicar no link, o navegador baixa o arquivo, examina a extensão do arquivo, determina qual aplicativo auxiliar é designado para esse tipo de arquivo, lança-o (se ainda não está aberto) e, em seguida, carrega e reproduz o som Arquivo.

    Alternatively, you can integrate a sound player right into your Web page by using an "embedded" player controller:

    <embed src="geetar.mid" width=144 height=25 autostart=false>

    onde "geetar.mid" é o nome do arquivo de som. Isso coloca um pequeno controlador de jogador na sua página que permite ao leitor iniciar e parar o som à vontade. Ajuste os números de largura e altura para se adequar ao seu controlador de som. Aqui está um exemplo, usando um arquivo de som diferente.


    Isso funciona apenas com as versões recentes dos navegadores da Web. A desvantagem desta técnica é que o arquivo de som é transferido assim que a página é visualizada, seja ou não o leitor pretender reproduzi-la. Isso pode diminuir a visualização das páginas, especialmente em uma conexão lenta com a Internet.

    Adicionar vídeo é exatamente como adicionar som, exceto que o nome do arquivo deve se referir a um arquivo de vídeo, como um arquivo mpeg, mov, wmv ou avi. A maioria das câmeras digitais são capazes de tirar pequenos vídeos em um tamanho e formato adequados para uma página da web. O vídeo integrado funciona como um som incorporado, exceto que a largura e a altura devem corresponder ao tamanho de toda a estrutura do vídeo e ao controlador na parte inferior. Aqui está um exemplo de um player de vídeo usando este HTML:

    <embed src="fireworks.mpg" width=320 height=260 autostart=false>

Testando suas Páginas
Ainda não tem uma conexão com a Internet? Não se preocupe!. As páginas da Web podem ser projetadas, construídas e testadas em qualquer computador de mesa que possa executar um navegador da Web padrão, mesmo que não esteja conectado à Internet. Os navegadores da Web funcionam bem no "modo local" em um computador autônomo, embora, sem uma conexão com a Internet, obviamente, não possa acessar páginas externas, ou seja, páginas residentes em computadores host remotos. No entanto, os navegadores da Web podem ler e exibir arquivos "locais" armazenados na mesma máquina, usando o comando Open File... sobre o menu File para abrir os arquivos HTML. É assim que você pode testar suas páginas para ver como elas parecem e para garantir que tudo funcione. Basta colocar todos os arquivos html, arquivos gráficos e arquivos de som no mesmo diretório (pasta).

Você pode até considerar usar um navegador da Web como uma espécie de sistema de apresentação multimídia de baixo custo para uso autônomo em uma sala de aula ou laboratório de informática. Os navegadores da Web são gratuitos; suporte de texto formatado, gráficos em cores e sons e vídeos digitalizados; estão disponíveis em versões idênticas para PCs e Macs; e as apresentações assim produzidas são facilmente convertidas entre os formatos de PC e Mac e estão prontas para serem colocadas "na Web" quando e se você tiver acesso a um servidor da Web. As páginas da Web podem ser distribuídas e lidas a partir de discos CD-R ou unidades USB ou servidores de arquivos de rede de área local. Devido à sua velocidade e capacidade, os discos de disco USB são especialmente bons para páginas com muitos gráficos, arquivos de som ou videoclipes grandes.

Nota: se você usar um gravador de CD-R baseado em PC ("gravador") para produzir sites na CD-R para jogar em PCs e Macs (aproveitando a habilidade do Mac para ler discos com formato de PC), certifique-se de limitar todos os nomes de arquivos HTML, gráficos e de som para 8 caracteres com uma extensão de 3 caracteres (por exemplo, "PAGE1.HTM"). Caso contrário, Macs mais antigos não poderão ler o site.

Encontrar um host para servir suas páginas
Para que suas páginas da Web realmente estejam "na" na Internet, para que elas sejam acessíveis aos usuários da Web em todo o mundo, elas devem residir em um Web server. Você poderia, teoricamente, executar seu próprio servidor Web em seu próprio PC, mas então você teria que deixá-lo funcionando 24/7, o que é uma dor.

Muitos provedores de serviços de Internet comerciais (ISPs) e empresas de internet como o Google fornecem uma página da Web ("home page") espaço para seus clientes; Não é incomum receber 10-30 MBytes grátis (o Google oferece 100 MBytes!), com mais espaço disponível a um custo extra. Consulte a documentação do seu fornecedor para obter mais informações. Faça uma pesquisa do Google no nome do seu ISP e "personal web pages" para maiores informações. Procure seções intituladas algo como "Connecting to Your Site", "Web Site Management", "Uploading Files", "Determining Your URL", "Linking Your Pages", "Publicizing Your Web Pages" ou algo assim. (Estes títulos de seção são retirados da documentação do servidor web da Verizon; outros ISPs usarão outra terminologia).

A maioria dos hospedeiros de sites tem um "construtor de sites" on-line que permite construir páginas da web on-line, usando apenas um navegador da Web. Por exemplo, o Google tem o fácil de usar Google Sites. - aqui esta uma simples home page Eu criei em 2008. A grande vantagem desta abordagem é que você não precisa encontrar um host para servir suas páginas - as páginas que você desenvolve são hospedadas automaticamente no mesmo site, simplificando bastante o ciclo de edição / upload / visualização porque um único programa (navegador web) e um site são usados para criar, editar, carregar e visualizar o site em desenvolvimento. No entanto, usando um construtor de sites, como esse, você o vincula a esse site específico; pode não haver uma maneira fácil de transferir seu site para um novo servidor no futuro. Sugiro que você crie seu site em seu próprio computador, mantenha uma cópia dos arquivos, depois carregue os arquivos em seu servidor Web. Dessa forma, você pode simplesmente fazer o upload dos arquivos para um novo servidor sempre que você mudar os ISPs no futuro.

Fazendo o upload de suas páginas
Se você desenvolver seus sites fora da linha, usando um editor da Web ou escrevendo diretamente em HTML, você precisará fazer o upload dos resultados para o seu servidor web. A maioria dos editores da web, por exemplo Kompozer, tenha um carregador integrado que se conecte diretamente ao seu servidor, tornando-se uma simples operação de um botão para fazer upload de você. No entanto, você precisa configurá-lo de antemão com o endereço correto do servidor, o nome do usuário e a senha. Olhe a documentação do seu anfitrião para essa informação. Aqui está um exemplo de Kompozer's "Publish Settings" dialogo, mostrando o tipo de informação que você precisará inserir. Se você estiver usando mais de um host para publicar seus sites, observe que você pode manter várias configurações de host no "Publishing Sites" lista à esquerda, cada uma com seu próprio endereço de host, nome de usuário e senha.

Alguns hosts permitem que você use um programa de FTP separado para fazer o upload (FTP = File Transfer Protocol), por exemplo WSFTP LE ou WinSCP, para fins educacionais. Esses programas permitem que você carregue pastas inteiras de arquivos ao mesmo tempo, tornando relativamente fácil carregar e baixar um site completo desenvolvido anteriormente ou mover um site de um servidor web para outro. Claro, você também pode carregar uma única página ou imagem, por exemplo, para corrigir um erro. Novamente, você precisa configurar esses programas com o endereço, o nome de usuário e a senha corretos do servidor.

Para fins comerciais ou profissionais, sua empresa ou sistema escolar pode operar um servidor Web central que é operado por um administrador da Web; nesse caso, você geralmente pode simplesmente enviar todos os seus arquivos e gráficos HTML para o administrador do servidor da Web em um CD-R ou uma unidade USB e eles vão cuidar colocando-o no servidor da Web. Peça-lhes para lhe dizer o URL (endereço da Web) assim que estiver no servidor.

Indo além

Robert Mening's "HTML5 Beginner’s Guide" (websitesetup.org/html5-beginners-guide) é um site instrucional maravilhosamente projetado que explora a encarnação mais recente do HTML, a saber, o HTML5, que possui suporte não demonstrado para a mais recente multimídia. Web Hosting Rating tem uma enorme lista dos 100 melhores recursos e ferramentas de desenvolvimento web. Se você está interessado em criar um blog (abreviação de Log da Web), dê uma olhada em  https://makeawebsitehub.com/how-to-start-a-blog/.