Construção de página web

Question 1

Introdução à Linguagem HTML

Answer 1

Objetivos da aula:

• Tomar contato com alguns conceitos básicos de WEB.
• Aprender o que é um documento HTML e o que são as tags.
• Aprender as tags de formatação básica.

Question 2

Conceitos Básicos:

Answer 2

• WEB
  Disponibilizar documentos independente da localização.
  Referências através de Hipertextos.
• Home Pages
• Tecnologia Cliente-Servidor
  Navegadores
  Servidores de Web
• Linguagem HTML (Hypertext Markup Language)
  Linguagem de marcação para formatação de documentos.
  Interpretada pelo browser.
  Independente da plataforma de visualização (portabilidade).

Question 3

URL (Uniform Resource Locator)

Answer 3

• Permite localizar um objeto na internet.
• Formato de endereçamento
  protocolo://servidor/diretório/arquivo
• Protocolo: normalmente http
  http - Hypertext Transfer Protocol
  Outros protocolos: telnet, ftp, etc
• Exemplo:
  http://equipe.nce.ufrj.br/joao/programacao/index.htm

Question 4

Editores de HTML:

Answer 4

• Servem para facilitar o processo de criação de páginas.
• Existem inúmeras opções no mercado:
• Filtros conversores:
  Rtftohtml
  pstohtml
• Editores Wysiwyg:
  Netscape Composer
  FrontPage Express
• Editores de tags:
  HTML Assistant
  HotDog
  W3e
• Gerenciadores de site:
  FrontPage
  AOLPress
  Macromedia Dreamweaver

Question 5

Características Gerais de HTML:

Answer 5

• Como é um documento HTML?
  É um arquivo ASCII puro (sem caracteres especiais de formatação).
  O interpretador HTML ignora a formatação implícita indicada pelos caracteres de tabulação (TAB) e mudança de linha (CR e LF)
  Os navegadores não diferenciam entre letras maiúsculas e minúsculas
• Versão Atual 5
• Padronização pela W3C

Question 6

Tags (Marcações):

Answer 6

• Informam ao navegador como formatar o texto.
• Empty tag:
  Tem efeito no ponto do documento onde é colocada.
  < nome >
• Container tag:
  Tem efeito sobre um trecho do documento delimitado pelo início e o fim da tag.
  < nome > … nome>
• É possível incluir comentários:

Question 7

Estrutura de um documento:

Answer 7

• A estrutura padrão deve ser respeitada.
• Apesar disso, é possível que o navegador exiba um texto, mesmo que ele esteja fora das áreas padrão.

        ... 
  
    ....

Question 8

Separadores:

Answer 8

<div> ... </div> 
Conjunto de parágrafos
<p> ... </p> 
Início de parágrafo.
<br>
Quebra de linha.
<hr>
Linha horizontal.

Coloca no texto para dividí-lo em parágrafos e seções.

Question 9

Formatação Básica:

Answer 9

Estilos Físicos
<b> Negrito </b>
<i> Itálico </i>
<u> Sublinhado </u>
<tt> Mono-espaçado </tt>
<sub> Sub-escrito </sub>
<sup> Sobre-escrito </sup>
<big> Aumenta o texto </big>

Estilos lógicos
<em>
<cite> Citação </cite></em>

Question 10

Cabeçalhos:

Answer 10

De <h1> … </h1> até <6> …

O texto tem seu tamanho modificado, é exibido num parágrafo a parte e em negrito.

H1 - Maior tamanho
H6 - Menor tamanho

Question 11

Caracteres Especiais:

Answer 11

• Acentuação, em ambientes Windows, é produzida diretamente (norma ISO Latin 1).

Codificação em HTML

á á
é é
ó ó
ã ã
â â
à à
ç ç
< <
> >
& &
" "
©
®

Question 12

Texto pré-formatado:

Answer 12

<pre> ... </pre>

Em algumas situações pode ser interessante aproveitar a formatação induzida no texto.
Respeita a formatação sugerida pelos caracteres de controle TAB, CR e LF.
Pode conter tags embutidas.