Web Site

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!

Listas são muito úteis quando trabalhamos com estruturação de menus, lista de nomes, lista de artigos e listas em geral.

Para conhecer as propriedades CSS para lista acessem esse endereço: A propriedade list

Veja os exemplos abaixo do que podemos fazer com listas XHTML + CSS:

• List a Matic
• Listas + CSS
• Listas + CSS II
• Listas + CSS III
• Exemplos de Listas + CSS
• Lista de sites úteis sobre Listas + CSS

[update]
Exemplos para download:

• Menus na vertical
• Menus na horizontal

As pseudo-classes complementam seletores CSS com a finalidade de estilizar informações que não fazem parte da estrutura XHTML. Em sala de aula veremos exemplos práticos sobre as pseudo-classes CSS.

Visita obrigatória para obter mais informações:

• Pseudo-classes do CSS via Tableless
• Seletores Complexos via Tableless
• Seletores Agrupados e Encadeados vai Tableless

A propriedade background da CSS, destina-se a definir uma cor ou uma imagem de fundo para uma tag da (X)HTML.

As propriedades  para estilizar fundos são: background-color, background-image, background-repeat, background-attachment, background-position e background.

Em sala de aula veremos exemplos práticos do uso dessas propriedades da CSS.

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á.

Entender como funciona o Box Model é essencial para aqueles que querem começar o desenvolvimento web utilizando CSS. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retangulares que são as seguintes:

• Conteúdo
• Espaçamentos (padding)
• Bordas (border)
• Margens (margin)

Mais informações sobre o Box Model vocês podem encontrar nesse excelente blog sobre CSS: CSS no Lanche

[update]

Vejam também: Diferenças entre Margin e Padding.

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.

Vimos na última aula as inúmeras vantagens que garantimos no desenvolvimento web com o foco na metodologia Web Standards.

Também vimos a mágica do CSS transformando o XHTML. Eu particularmente adoro muito tudo isso.

Nosso curso abordará inicialmente XHTML e CSS, podendo estender até JavaScript, garantindo assim o tripé do desenvolvimento web. É interessante lembrar que essas três tecnologias são independentes de qualquer linguagem que for usada no servidor, pois a saída sempre será em XHTML + CSS e/ou JavaScript.