Web Site

As provas práticas e teóricas desse bimestre avaliará os seguintes conteúdos:

XHTML

• Formulários
• Tabelas

CSS

• Estilização de formulários
• Estilização de tabelas

Utilizando os conceitos aprendidos em sala de aula sobre XHTML e CSS estruture o formulário a seguir e desenvolva 4 estilos de formatação para o mesmo. Atenção: Cada imagem é o resultado de um tema. Utilize a opção para alternar entre os estilos conforme aprendemos em aula.

Orientações:

• Clique na imagens para ampliá-las.
• Faça download das imagens utilizadas nas formatações do formulário clicando aqui.
• Para cada layout foi disponibilizado uma série de cores em hexadecimal, são apenas sugestões, utilize sua criatividade para alterá-las se achar necessário.

Desenvolver em XHTML e CSS as tabelas que estão representadas nas figuras abaixo. Cliquem na imagem para aumentar.

[update]

As imagem de checked/checado pode ser encontrada aqui: http://files.edysegura.com/aulas/website/icon-check.gif

Cor da primeira linha: #F4F9FD
Cor da segunda linha: #FFF
Cor da linha quando o mouse estiver por cima (hover): #F2F2F2
Cor do texto na sessão cabeçalho da tabela (thead): #7A9FB9
Cor do preço na sessão rodapé (tfoot): #945162
Cor do texto na sessão corpo da tabela (tbody): #737E84

Obs: As cores e imagem são apenas “sugestões”. Utilize a sua criatividade para alterar as cores e a imagem e a formate um novo tema! Lembre-se que na segunda tabela é necessário o uso de rowspan e colspan.

Desenvolver formulários XHTML + CSS como as imagens abaixo, para obter as imagens de background é só fazer o download do arquivo trabalho-forms.zip:

Formulários são a base para sites que tem por objetivo oferecer uma maior interatividade com os usuários. Entre os vários usos de formulários podemos citar o envio de mensagens, pesquisas e cadastros em geral.

Segundo Diego Eis, o formulário depois do link é o elemento mais utilizado pelos usuários para interagir com o site. Ele postou um vídeo de como desenvolver um formulário em 8 minutos.

Nas nossas próximas aulas estudaremos a estruturação e estilização dos formulários. Não faltem!

O elemento âncora (tag <a></a>) juntamente com o atributo href têm a função de marcar hiperlinks, ou simplesmente links, em um documento. É exatamente tal elemento que confere toda a força à web, pois é ele que fornece o mecanismo para conectar documentos entre si.

Em sala trabalharemos com links na prática. Até lá.

Para os alunos que não conseguiram digitar a estrutura básica de uma página XHTML, é só fazer o download do template aqui. Nós usaremos este template nas próximas aulas sobre XHTML.

Na aula de hoje veremos os elementos básicos do XHTML tanto na teoria com na prática. Para uma consulta rápida sobre todas as tags do XHTML acessem HTML 4.01 / XHTML 1.0 Reference.

A aluna Carla do 3º A deixou um link interessante sobre apostilas e tutoriais: http://www.apostilando.com/
O aluno Thiago também do 3º A deixou um comentário com um link de apostilas: http://www.forumdsl.com/apostilas

Não se esqueçam de continuar comentando e participando. Um abraço a todos.

A linguagem HTML (Hypertext Markup Language) foi desenvolvida por Tim Berners-Lee e desde a explosão da Internet, durante os anos 90, ela tem se firmado como linguagem universal para ligar informações a partir de computadores de todo o mundo.

Uma página HTML é um simples arquivo texto com a extensão (.htm) ou (.html). Isso torna o desenvolvimento de páginas relativamente simples, já que você só precisa de um editor de texto como o notepad e um browser para a visualização.

A HTML é constituída de elementos e atributos. Os nomes dos elementos HTML foram escolhidos levando em conta a destinação do elemento. Assim, um elemento HTML destinado a marcar um cabeçalho recebeu o nome heading que, em inglês, significa cabeçalho ou título. O elemento destinado a marcar parágrafos foi denominado paragraph, cujo significado é parágrafo, e assim por diante.

Veja uma lista completa dos elementos HTML no blog do Maujor.

A XHTML é um reformulação da linguagem HTML baseada na XML (Extensible Markup Language). HTML e XHTML são linguagens bastante parecidas. Um documento XHTML é quase idêntico a um documento HTML, visto que ambas as linguagens utilizam o mesmo o mesmo conjunto de elementos. No entanto, um documento XHTML possui alguns componentes adicionais, que veremos no decorrer das aulas.

Dúvidas, reclamações ou sugestões deixe seu comentário. Abraços a todos.