Apostila HTML - Práticas e exercícios, Trabalhos de Tecnologia de Informação e de Computadores

Baixe Apostila HTML - Práticas e exercícios e outras Trabalhos em PDF para Tecnologia de Informação e de Computadores, somente na Docsity!

APOSTILA DE INTRODUÇÃO À

LINGUAGEM HTML

APOSTILA COM BASE TEÓRICA E

PRÁTICAS DE EXERCÍCIOS

Profº William Ferraz

[email protected]

Manaus - AM

Sumário

• 1 INTRODUÇÃO À LINGUAGEM HTML Página
• 2 EDIÇÃO DE DOCUMENTOS HTML
• 3 PUBLICAÇÃO DE DOCUMENTOS NA INTERNET (SITES)
• 4 DOCUMENTO HTML BÁSICO E SEUS COMPONENTES
• 5 SEÇÃO
• 6 SEÇÃO
  • 6.1 ATRIBUTOS DE
• 7 FONTES
• 8 CABEÇALHOS
  • 8.1 ANINHAMENTO DE CABEÇALHOS
  • 8.2 ALINHAMENTO DE CABEÇALHOS
• 9 SEPARADORES
  • 9.1 QUEBRA DE LINHA
  • 9.2 PARÁGRAFOS
• 10 LINHA HORIZONTAL
• 11 COMENTÁRIOS
• 12 LISTAS EM HTML..................................................................................................................................................................
  • 12.1 LISTAS COM MARCADORES
  • 12.2 LISTAS NUMERADAS
  • 12.3 LISTAS E SUB-LISTAS...................................................................................................................................................................................................
• 13 FORMATAÇÃO DE FRASES
• 14 MARQUEE
• 15 LIGAÇÕES (USO DE LINKS)
  • 15.1 ATRIBUTOS
  • 15.2 CAMINHOS
  • 15.3 INDICADORES.................................................................................................................................................................................................................
• 16 INSERÇÃO DE IMAGENS
  • 16.1 ATRIBUTOS BÁSICOS DE IMAGEM...........................................................................................................................................................................
• 17 MOLDURAS DE IMAGEM
• 18 TABELAS
  • 18.1 ELEMENTOS BÁSICOS DE TABELAS
  • 18.2 TÍTULOS, LINHAS E ELEMENTOS
  • 18.3 UMA TABELA SIMPLES
  • 18.4 TÍTULOS COMPREENDENDO MAIS DE UMA COLUNA OU LINHA
  • 18.5 TABELAS SEM BORDA
  • 18.6 EXTENSÕES DE TABELAS
• 19 FORMULÁRIOS HTML
  • 19.1 CRIANDO UM FORM
  • 19.2 PARÂMETROS DO FORM
  • 19.3 ELEMENTOS DO FORM
  • 19.4 TRABALHANDO COM OS DADOS ENVIADOS PELO FORM
  • 19.5 COLOCANDO EM PRÁTICA

2 Edição de Documentos HTML Existem Editores HTML chamados WYSIWYG ( what you see is what you get - o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser^1 usado para visitar a página). Alguns bastante conhecidos são, por exemplo: FrontPage e Dreamweaver. Figura 1 – Tela do FrontPage Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, normalmente terá extensão .html ou .htm. Existem vários Editores HTML Online , como por exemplo: Online HTML Editor, Mozilla Thimble, entre outros. (^1) Browser: Navegador Internet. Exemplos: Internet Explorer, Mozilla Firefox, Chrome etc.

3 Publicação de Documentos na Internet (Sites) Para que uma página esteja permanentemente disponível na Web, ela precisa ter um endereço fixo, alojada em um servidor. Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP^2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo. Um programa bastante usado para envio de arquivos de um computador local para um servidor e vice-versa, através do Windows, é o WinSCP. Em geral, tem-se como arquivo da página inicial, o arquivo chamado index.html. Esse é o arquivo default (padrão) em um diretório. Ao entrar em uma URL que não especifica um arquivo em um diretório, o browser solicita ao servidor o arquivo index.html. É por isso que se pode escrever tanto www.exemplo.com.br ou www.exemplo.com.br/index.html. Se não existir um arquivo chamado index.html, o servidor poderá retornar uma mensagem de "acesso proibido à listagem do diretório" ou então retornar a listagem dos arquivos daquele diretório, o que pode não ser o que se deseja. Esse arquivo default é definido na configuração do servidor WWW. (^2) FTP - File Transfer Protocol : Protocolo de Transferência de Arquivos.

**5 Seção ** contém informações sobre o documento. A etiqueta HTML significa que: meta é usado para declarar metadados (informações sobre a própria página, como resumo do conteúdo, palavras-chaves, indicações a robôs de busca, entre outras), charset é usado para indicar o formato de codificação de caracteres usado no document e utf- 8 é um formato de codificação, ou seja, é usado para mostrar ao navegador o tipo de codificação que será utilizada no site e, assim, funcionar corretamente todas acentuações, por exemplo. O elemento **** define um título, que é mostrado no alto da janela do browser. Exemplo: <head> <title> Página do Fulano de Tal

Todo documento web deve ter um título ; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução" , por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet.

**6 Seção ** Tudo que estiver contido em **** será mostrado na janela principal do browser , sendo apresentado ao leitor. **** pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. **6.1 Atributos de ** Através de atributos de , é possível definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d’água):

Onde: BGCOLOR: Background Color , ou seja, cor de fundo da página. Quando não é indicada a cor de fundo, o browser irá mostrar uma cor padrão, geralmente cinza ou branco. TEXT: Cor dos textos da página (padrão: preto). LINK: Cor dos links (padrão: azul). ALINK: Cor dos links quando acionados, clicados (padrão: vermelho). VLINK: Cor dos links depois de visitados (padrão: azul escuro ou roxo). Os valores dos atributos são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual é possível escolher as cores desejadas, sem se preocupar com números esdrúxulos tais como #FF80A. Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores , tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR= "BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. BACKGROUND : Indica o URL^3 da imagem a ser replicada no fundo da página, como uma marca d’água. Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer. Dica: Os nomes das cores - os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. (^3) URL: O sistema de endereçamento da Web é baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereços que utilizamos atualmente são os URLs, que seguem essa sintaxe. URL significa Uniform Resource Locator - Localizador Uniforme de Recursos. Um exemplo de URL é: http://www.faccat.br Esse endereço identifica: o protocolo de acesso ao recurso desejado (http) e a máquina a ser acessada (www.faccat.br).

Mais exemplos: Fonte Verdana Azul Fonte Verdana Azul Fonte Arial Verde Fonte Arial verde Fonte Courier New Vermelha

Fonte Courier New Vermelha

8 Cabeçalhos Há seis níveis de cabeçalhos em HTML, de **** a **** , que servem para colocar títulos e subtítulos nas páginas web: Este é um cabeçalho de nível 1 Este é um cabeçalho de nível 2 Este é um cabeçalho de nível 3 Este é um cabeçalho de nível 4 Este é um cabeçalho de nível 5 Este é um cabeçalho de nível 6 Esses cabeçalhos são mostrados no browser da seguinte forma: 8.1 Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados, isto é, a formatação: Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2  Pode produzir algum resultado próximo ao desejado: Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2 Mas o mais comum é que os browsers "entendam" essa formatação como sendo: Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2

9 Separadores As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML, ou seja, ao dar Enter no código fonte da página web nos comandos HTML, o resultado da página no navegador não é alterado, o navegador não reconhece o Enter como quebra de linha. Para organizar os textos são necessários separadores, apresentados a seguir. 9.1 Quebra de linha Quando deseja-se mudar de linha, deve-se usar o elemento
. Isso só é necessário quando precisa-se de uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Vem da palavar break. Com sucessivas etiquetas
, pode-se inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens. 9.2 Parágrafos Para separar blocos de texto, usa-se o elemento

, por exemplo:

Parágrafo 1;

Parágrafo 2.

Que produz o seguinte resultado na página web: **Parágrafo1; Parágrafo2.** Combinando parágrafos e quebras de linha, tem-se, por exemplo: Parágrafo 1;< **br** > linha 1 do parágrafo 1, < **br** >linha 2 do parágrafo 1.< **P** >Parágrafo 2;< **br** > linha 1 do parágrafo 2, < **br** >linha 2 do parágrafo 2.  O resultado da marcação acima é: **Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1. Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2.**

tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a seguir:

Assim como os trens, as boas ideias às vezes chegam com atraso.
(Giovani Guareschi)

**Assim como os trens, as boas ideias às vezes chegam com atraso. (Giovani Guareschi)**

Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.

**Como diz o provérbio chinês: “É melhor passar por ignorante uma vez do que permanecer ignorante para sempre”.**

Este é o alinhamento padrão (default) e, por isso, não vou colocar nenhuma frase especial.

**Este é o alinhamento padrão (default) e, por isso, não vou colocar nenhuma frase especial.**

12 Listas em HTML Há dois tipos de listas em HTML, apresentadas a seguir: 12.1 Listas com Marcadores São equivalentes às listas com marcadores do MS-Word, por exemplo:

item de uma lista item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item  item de uma lista  item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto  item A diferença entre o resultado da marcação HTML e de um Editor de Textos está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

Documentos básicos Documentos avançados

formulários

CGI

contadores relógios

Detalhes sobre imagens

 Documentos básicos  Documentos avançados o formulários  CGI o contadores o relógios  Detalhes sobre imagens

12.2 Listas Numeradas

item de uma lista numerada item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item de lista numerada

**1. item de uma lista numerada

2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja** **necessário se preocupar com a formatação das margens de texto
3. item de lista numerada** Estas listas não apresentam numeração em formato 1.1, 1.2, etc., quando compostas apresentam-se da seguinte forma: **1. Documentos básicos
4. Documentos avançados
5. formulários
6. CGI
7. contadores
8. relógios
9. Detalhes sobre imagens** Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

---

Documentos básicos Documentos avançados

formulários

CGI

contadores relógios

Detalhes sobre imagens

I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens

13 Formatação de Frases Quando disponível no browser , é mostrado em negrito (em alguns browsers , pode aparecer sublinhado). Itálico

---

Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de links. ** ou ** Frase riscada.

---

Fonte um pouco maior.

---

Fonte um pouco menor.

---

Frase em estilo (^) índice, como em H 2 O , por exemplo.

---

Frase em estilo expoente, como em Km^2 , por exemplo. 14 Marquee É possível obter o efeito de animação de texto, através da formatação . ** Texto **** Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo: **** Texto ** ** Texto ** ** Texto ** Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes. Comando muito antigo e fora de uso!!!!

15 Ligações (uso de Links) Com HTML é possível fazer ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto

• também chamadas hypertext links ou hiperlinks ou simplesmente links , onde normalmente, o mouse vira uma “mãozinha” e ao clicar “chama-se” (abre-se) um outro documento, página web ou figura por exemplo. Para inserir um link em um documento, utiliza-se a etiqueta **** , da seguinte forma: **** âncora **** Onde: arquivo_destino : é o endereço do documento de destino, da página ou imagem a qual deseja-se abrir. âncora : é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. **15.1 Atributos ** tem vários atributos que são utilizados de acordo com a ação associada ao link. Os mais usados são apresentados a seguir: HREF: Indica o arquivo de destino da ligação de hipertexto. TARGET : Indica o quadro (frame) em que será carregado o arquivo_destino. Exemplo: target="_blank" NAME : Marca um indicador , isto é, uma região de um documento como destino de uma ligação. Maiores detalhes na seção sobre indicadores.