Fone: (19) Site: HTM3.0. Tutorial HTML. versão 4.01

Transcrição

1 Fone: (19) Site: HTM3.0 Tutorial HTML versão 4.01

2 K O M Σ D I Copyright by Editora Komedi, 2007 Dados para Catalogação Rimoli, Monica Alvarez Chaves, Eduardo Oscar de Campos Tutorial HTML 4.01 Campinas: Editora Komedi, p. Nenhuma parte desta publicação poderá ser reproduzida, armazenada ou transmitida de qualquer modo, ou por qualquer meio, seja mecânico, eletrônico, fotocópia, gravação ou outros, sem prévia autorização escrita da Editora Komedi. Editor: Sérgio Vale Gerente de Vendas: Sandro Celestino de Araújo Diagramação: Monica Alvarez Rimoli Capa: Cristiane Fleure ISBN: Todos os direitos reservados na forma da lei pela: Editora Komedi Rua Álvares Machado, 460, 3 o andar , Centro, Campinas, SP Tel./fax: (19) editora@komedi.com.br 2007 Impresso no Brasil

3 Índice 1. INTRODUÇÃO À WEB CONCEITUAÇÃO Links Páginas, Webs, Sites e Home Pages Servidores Web ( Web Servers ) Navegadores Web ( Web Browsers ) Histórico Desenvolvimento INTRODUÇÃO À LINGUAGEM HTML CARACTERÍSTICAS GERAIS DO HTML O QUE É NECESSÁRIO ÁREA DE TRABALHO CRIAÇÃO DE DOCUMENTOS HTML MARCAÇÕES HTML ESTRUTURA BÁSICA Cabeçalho - HEAD O corpo - BODY Títulos - HEADINGS Outros elementos do corpo FRASES E PARÁGRAFOS DE TEXTO PARÁGRAFOS E QUEBRA DE LINHA ESTRUTURAÇÃO DE FRASES DO TEXTO FORMATAÇÃO DE TEXTOS LISTAS LISTAS ORDENADAS E NÃO-ORDENADAS LISTAS DE DEFINIÇÕES LISTAS ANINHADAS OU INTERCALADAS OUTROS ELEMENTOS DE LISTAS IMAGENS IMG IMAGENS MAPEADAS VÍNCULOS ÂNCORAS TABELAS ELEMENTOS COMPLEMENTARES DA TABELA III

4 Índice 10. FRAMES LINKS ENTRE FRAMES FORMULÁRIOS CRIANDO OS CAMPOS COM O ELEMENTO INPUT BOTÕES DE AÇÃO CRIANDO OS CAMPOS COM O ELEMENTO TEXTAREA CRIANDO CAMPOS COM O ELEMENTO SELECT ELEMENTOS COMPLEMENTARES DE FORMULÁRIOS CONTEÚDO INCORPORADO INSERINDO SONS DE FUNDO E VÍDEO SCRIPTS ELEMENTOS REMOVIDOS ARQUIVOS CSS IV

5 Introdução à Web 1. Introdução à Web "A Web" (literalmente, "A Teia") é o nome com que comumente nos referimos a uma aplicação disponível na Internet chamada de "World-Wide Web (WWW)" ("Teia de Amplitude Mundial"). A Web é, hoje, junto, naturalmente, com Correio Eletrônico, a aplicação mais importante da Internet Conceituação A Web é, em primeiro lugar, uma aplicação que faz uso de hipertexto ou hipermídia. Em oposição à maior parte dos textos (livros de ficção, artigos em revistas, reportagens de jornais, etc.), escritos para serem lidos de forma linear, ou seja, do início ao fim, o conceito Hipertexto foi inventado para designar texto que normalmente não é lido de forma linear texto não-linear, portanto. Uma enciclopédia é, tipicamente, hipertexto: ninguém a lê começando na primeira palavra da letra a e terminando com a última palavra da letra z. O leitor procura uma enciclopédia porque está interessado em determinado assunto e o texto é lido seguindo as associações de idéia do leitor e não a linearidade ou a lógica que o autor procurou imprimir ao texto. Hipertexto é o conceito que possibilita a "navegação" entre segmentos de texto independentemente de sua seqüência linear ou de sua localização. Quando se faz uso de Enciclopédia Eletrônica, é possível, além de ler o texto, ver fotografias, ouvir sons e assistir vídeos relacionados ao tema escolhido. Este conjunto de elementos representa o que chamamos de Hipermídia Links Sistemas de hipertexto e hipermídia fazem uso de referências cruzadas e no caso de sistemas de hipertexto e hipermídia eletrônicos, como é o caso da Web, as referências cruzadas são chamadas de links (elos de ligação). Um sistema de hipertexto e hipermídia só tem os links que o autor introduziu. O leitor pode seguir qualquer link mas fica, naturalmente, limitado aos links que o autor colocou no sistema. Por outro lado, índices analíticos e remissivos também funcionam como links, e, neste caso, o leitor tem oportunidade de saltar para qualquer parte do sistema. 5

6 Tutorial HTML Páginas, Webs, Sites e Home Pages A Web usa entidades chamadas de páginas para ordenar o acesso a grandes blocos de informação. Uma página geralmente equivale a um documento armazenado em um arquivo, e geralmente tem a extensão ".htm" ou ".html". Uma "web" (que é diferente de "a Web") é um conjunto de páginas interligadas na Web. Às vezes uma web é pequena, como é o caso de webs pessoais, que, não raro, possuem uma página só. Em outros casos uma web pode conter milhões de páginas (ou documentos), como é o caso das webs das grandes empresas. Uma web é, na realidade, um sistema de informações disponível na Web. Um "site" é o nome dado a um "local" na Web onde se armazenam e disponibilizam webs. Um site é normalmente composto por um conjunto de webs que podem estar armazenadas em um computador só ou em vários. O que dá unidade a um site é o fato de que ele normalmente tem uma porta de entrada só, identificada pelo seu endereço na Internet, chamado de "URL" do site. O que se chama de Home Page é a primeira página de uma web, isto é, o documento a que o usuário tem acesso ao entrar naquela web e é a partir dela que, usando os links nela inseridos pelo seu autor, o usuário é levado para outros locais na mesma página, a outras páginas na mesma web, a páginas em outras webs no mesmo site, ou mesmo a páginas em webs de outros sites Servidores Web ( Web Servers ) Um Servidor Web é um computador equipado com software adequado que armazena as webs de uma instituição (ou mesmo de um indivíduo) e gerencia o acesso ao site por parte dos usuários Navegadores Web ( Web Browsers ) Um Navegador Web é um software que permite que os usuários naveguem pela Web, ganhando acesso aos vários sites armazenados em diferentes Servidores Web para visualizar as páginas neles armazenadas. Os diferentes Navegadores Web têm características distintas, sendo os mais populares o Netscape Navigator e o Microsoft Internet Explorer Histórico A viabilização de uma rede de computadores, que se interconecta de modo a formar uma teia de amplitude mundial, foi feita por Tim Berners-Lee, que, em 1990, criou o Protocolo HTTP e desenvolveu a linguagem HTML (HyperText Markup Language, ou Linguagem de Marcação de HiperTexto), que é usada para o desenvolvimento de páginas web. 6

7 Introdução à Web Desenvolvimento O desenvolvimento do site deve ser feito segundo as especificações do Web Designer (Profissional que projeta o sistema como um todo). O designer funciona como o Analista de Sistemas das aplicações tradicionais e o desenvolvedor (Web Developer) como o programador. A forma básica de se desenvolver sites Web, webs e páginas web é aquela que utiliza a linguagem HTML, já mencionada. O desenvolvedor deve conhecer extremamente bem o vocabulário e a sintaxe da linguagem de modo a poder converter em páginas web o conteúdo fornecido, obedecidas as especificações feitas durante o processo de design. Hoje em dia há várias ferramentas de software (programas) que permitem que desenvolvedores e mesmo usuários finais criem páginas web sem necessidade de programálas em HTML. Esses programas permitem que as páginas sejam desenvolvidas de forma visual, inserindo tabelas, gráficos, imagens, arquivos de som e de vídeo, gerando automaticamente o código HTML necessário. Mesmo assim, antes de iniciar o uso destes programas, é interessante que você tenha alguma experiência com HTML, para poder personalizar todo o código e dominar todos os detalhes da sua página, razão pela qual desenvolvemos este tutorial. Nota IMPORTANTE: Esta apostila aborda de maneira didática e simples os recursos necessários para a criação de sites diretamente em linguagem HTML. Os arquivos necessários para os exemplos desta apostila podem ser obtidos por meio de download no endereço Mesmo sem acesso a estes arquivos, os exemplos podem ser compreendidos e realizados com outros arquivos (imagens e textos) de seu próprio computador. 7