Atividades Praticas Supervisionadas

2 INTRODUÇÃO AO AMBIENTE WEB

Estrutura básica principal

Figura 1 - HTML

Fonte: Autoria própria.

HTML

Figura 2 - Codigo Base

Fonte: Autoria própria.

2.1 PAGINA ESTATICA E PAGINA DINAMICA

Comparativo pagina estática e pagina dinâmica

Figura 3 - Comparativo

Fonte: Autoria própria.

Página Estática

As primeiras páginas são as que denominamos páginas estáticas, se constroem com a linguagem HTML, que não permite grandes manobras para criar efeitos nem funcionalidades mais além dos links. Uma página dinâmica em geral é a referência do uso de linguagens de programação client-side.

Figura 4 - Codigo

Fonte: Autoria própria.

Página Dinâmica

O segundo tipo de páginas se denomina página dinâmica. Uma página é dinâmica quando se inclui qualquer efeito especial ou funcionalidade e para isso é necessário utilizar outras linguagens de programação, à parte do simples HTML. Uma página dinâmica em geral é a referência do uso de linguagens de programação server-side.

Figura 5 - Codigo

Fonte: Autoria própria.

2.2 Tabela HTML

Tabela

- Primeira linha célula mesclada em quatro.

- Segunda linha quatro células.

- Terceira linha quatro células sendo que a primeira também faz parte da quarta linha (mesclada).

- Quarta linha com três células mais a célula mesclada da linha anterior ou seja quatro células.

Codigo.

Figura 6 - Tabela-codigo

Fonte: Autoria própria.

No navegador.

Figura 7 - Tabela no navegador

Fonte: Autoria própria.

3 FERRAMENTAS PARA PROGRAMAÇÃO EM HTML

Principais ambientes de programação HTML

HTML KIT TOOLS

Figura 8 - HTML KIT

Fonte: Autoria própria.

HTML-Kit é um editor cheio de recursos para a marcação e código, otimizado para desenvolvimento web, permite trabalhar com várias linguagens, incluindo HTML e CSS.

NOTEPAD ++

Figura 9 - NOTEPAD ++

Fonte: Autoria própria.

Esta é uma ferramenta muito popular, logo a começar pelo seu nome, derivado do velhinho Notepad do Windows. Embora possa parecer um programa “frágil” e sem capacidades, não é. Notepad ++ permite trabalhar com várias linguagens, incluindo HTML e CSS.

E TEXT EDITOR

Figura 10 - E TEXT EDITOR

Fonte: Autoria própria.

A aplicação E Text Editor é super leve e cheia de capacidades. Deriva do conhecido TextMate para Mac OS, e tem todas as capacidades do mesmo. A edição HTML / CSS é suave e apoiada com a possibilidade de instalação de bibliotecas relativas à linguagem que pretendermos, para personalização e outras funcionalidades.

APTANA STUDIO

Figura 11 - APTANA STUDIO

Fonte: Autoria própria.

Aptana Studio é uma aplicação super completa para edição HTML, CSS, Javascript. As suas capacidades vão desde a detecção de erros até à ajuda a completar código. Esta aplicação multi-plataforma conta já com mais de 6 milhões de downloads, e os seus utilizadores consideram-no “épico”. Está curioso? O melhor é mesmo dar uma chance ao Aptana.

DREAMWEAVER