Atenção! antes de começar essa lição, é preciso que você termine a lição anterior, clique aqui para terminar de construir todas as <div> e o css que define todas elas.

Continuando nossa construção da página JOTEC. clique

Muita atenção, que o primeiro passo é remover as tags de altura (height) da página. Nosso layout final devera ficar parecido com este (em termos de conteúdo, cor e letras podem ser alterados a vontade):

Lembrando que o tutorial que estamos acompanhando tem algumas mudanças em relação ao nosso layout:

- o menu do nosso layout está a esquerda, o do tutorial a direita

- na div “mainav” não usamos um menu e sim uma frase.

De resto é acompanhar o passo a passo refazendo ele, e alterando para que o resultado final seja nossa página JOTEC.

Antes de começar nossa página, vamos concluir a pesquisa sobre a JOTEC.

Segue uma sugestão de roteiro:

- como nasceu a JOTEC?

- quando começou?

- quais eventos existem desde o começo? e qual a atividade que mais te marcou?

- o que você lembra da JOTEC do ano passado?

- dê sugestões para a JOTEC deste ano.

————————————————————–

Com os dados coletados vamos montar o conteúdo da página e a partir dele um layout para ser trabalhado

Vamos construir uma página com um passo a passo
http://www.maujor.com/tutorial/layout-css-passo-a-passo.php#cinco

Olá a todos, bem vindos na volta das férias.

Vamos retornar e começar uma nova etapa. Estudamos algumas tags html, testamos elas em um projeto pessoal, onde construimos layout e também conteúdo.
Agora vamos partir de um conteúdo comum a todos e estudar as possibilidades da folha de estilo.

Para começar e entender as possibilidades de um trabalho assim vamos dar uma olhada nesse site: Zen garden e também sua versão em português

E vamos definir o nosso conteúdo. Nosso tema será a JOTEC que acontece anualmente no Graham Bell. Começaremos fazendo uma pesquisa investigativa no próprio colégio, com colegas e professores para levantarmos um pequeno histórico da JOTEC.

A partir dessa pesquisa, feita pelos alunos, será desenvolvido um conteúdo básico em html que vai ser usado para nosso aprendizado em css.

Introdução a CSS (fonte: site Maujor)

boa aula

outras experiências em css:

http://www.tableless.com.br/css-modular-breve-explicacao

video sobre uso css

Na última aula continuamos a construção da página pessoal sobre a profissão. Foi pedido que fosse feito o fluxograma do site (conjunto de páginas que será realizado).

exercício:: Desenhe as páginas que você está fazendo. Lembrando que precisa ter uma página principal (que vai se chamar index), uma página onde se explica o porque da escolha, e uma outra página de contato. E mais quantas você achar necessário. Só lembrando que o que for colocado no fluxograma é o que deverá ser apresentado, como página construída.

envie o desenho para o email da professora, durante o dia de hoje vou tirar dúvidas por email.

Aqui um tutorial bem explicado sobre formulário. Para fazer um formulário funcionar ele precisa ser direcionado para um página específica para onde os dados são enviados. Apenas como exercício, vamos preencher o campo action com “teste.php”. (em geral você trabalha com o suporte a formulário oferecido pelo provedor onde está hospedado o site).

Aqui outro tutorial sobre formulários.

Aqui você encontra exemplos visuais de todos os elementos de um formulário e as suas respectivas tags:

• Para campo <input> onde se pode inserir campos de dados (texto ou senha), de múltipla escolha, escolha única e botões de ação. veja aqui.
• Para campo <select> onde temos listas de valores. veja aqui.
• Para campo <textarea> onde temos, como o nome diz, área para texto, limitado ou não. veja aqui.
  

exercício:: construa um formulário (mantendo o layout da sua página) com campos de entrada para nome, cidade, email, escolha para que tipo de contato quer fazer (”tirar dúvidas”, “dar um alô”, “contato para amizade”. Faça um print screen da página e envie para a professora, por email

quer mais? veja dicas de css para customizar seu formulário, aqui.

Antes de iniciar qualquer projeto é preciso ter em mente o que se vai fazer. Temos duas ferrmamentas poderosas para isso: um memorial descritivo (que também pode ser chamado de texto base, descrição do site, e tantos outros nomes) e o fluxograma.

No Memorial Descritivo, vamos colocar sobre o que é o nosso site, neste caso sobre que profissão estamos falando, porque escolhemos ela, e como pretendemos desenvolver o tema (quais serão os itens do menu, layout, interatividade etc.). Para este trabalho será pedido um pequeno memorial de 15 linhas, contendo: descrição do site, motivo da escolha, descrição as páginas (conteúdo e layout), imagens (print screen) das páginas.

Fluxograma do site, aqui organizamos as páginas e a navegação do site. O fluxograma é uma espécie de guia para a construção do site. Para este trabalho vamos desenhar o fluxograma completo do site, com todos os links.

Ainda pensando o futuro

construir uma página sobre a profissão que quer seguir com a seguinte estrutura:

- texto de 5 a 10 linhas com um texto de introdução, centralizado, com título em negrito e corpo maior que o texto

- imagem alinhada a esquerda do texto. Veja aqui como fazer links de imagens

- após o texto tabela: (alterar para conteúdo condizente com seu tema)

- link para clipe ou video no youtube que represente ou reflita sua escolha profissional

extra: veja aqui video explicando uma maneira rápida de linkar videos do you tube no seu blog

TABELAS

Tutorial Tabela
http://pt-br.html.net/tutorials/html/lesson10.asp

Mais tabelas
http://pt-br.html.net/tutorials/html/lesson11.asp

Conheça os vários tipos de bordas
http://orbita.starmedia.com/~edaurelio/a17.htm#collapse

Uma aula no youtube sobre tabelas

OUTRAS TAGS
conheça mais outras tags

Não esqueça que já foi postada a lista completa de tags

Pensando um tema - meu futuro daqui a 10 anos.

Como se pesquisa, conteúdo, edição.

• Construindo a página, trabalhando no dream weaver.

• Cores hexadecimais o que são, como são construídas, links

http://www.efeitosespeciais.net/tabela.htm

http://erikasarti.net/html/tabela_de_cores_web_safe.htm

diversão total em cores: Color Lovers http://www.colourlovers.com

o TAGS, links para Tags

http://werbach.com/barebones/barebone_port.html#lists

http://henriquehb.wordpress.com/2008/04/21/guia-basico-de-html/

http://informatica.hsw.uol.com.br/paginas-da-internet2.htm

HTML

HTML (acrônimo para a expressão inglesa HyperText Markup Language, )que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do “casamento” dos padrões HyTime e SGML. (Retirado de wikipedia)

Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

<etiqueta>…</etiqueta>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <etiqueta>

Todos os elementos podem ter atributos:

<etiqueta atributo1=valor1 atributo2=valor2>…</etiqueta>

(Retirado de Introdução a linguagem html)
—————————————————————————————————————————–

O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes:

Uma abertura de forma geral <etiqueta>

Um fechamento do tipo </etiqueta>

Tudo que estiver incluído no interior desta etiqueta sofrerá as modificações que caracterizam a esta etiqueta. Como por exemplo:
As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTML escrevemos uma frase com o seguinte código:

<b>Isto está em negrito</b>
O resultado será: Isto está em negrito

As etiquetas <p> e </p> definem um parágrafo. Se em nosso documento HTML escrevêssemos: <p>Olá, estamos no parágrafo 1</p>
<p>Agora mudamos de parágrafo</p>

O resultado seria:

Olá, estamos no parágrafo 1

Agora mudamos de parágrafo

Aqui você pode baixar o arquivo pdf da aula.

World Wide Web

(que significa “rede de alcance mundial”, em inglês; também conhecida como Web e WWW)
é um sistema de documentos em hipermídia que são interligados e executados na Internet. Os documentos podem estar na forma de vídeos, sons, hipertextos e figuras. Para visualizar a informação, pode-se usar um programa de computador chamado navegador para descarregar informações (chamadas “documentos” ou “páginas“) de servidores web (ou “sítios”) e mostrá-los na tela do usuário. O usuário pode então seguir as hiperligações na página para outros documentos ou mesmo enviar informações de volta para o servidor para interagir com ele. O ato de seguir hiperligações é comumente chamado de “navegar” ou “surfar” na Web.

——————————————————————————————————————-
A World-Wide Web (também chamada Web ou WWW) é, termos gerais, a interface gráfica da Internet. Ela é um sistema de informações organizado de maneira a englobar todos os outros sistemas de informação disponíveis na Internet.

Sua idéia básica é criar um mundo de informações sem fronteiras, prevendo as seguintes características

- interface consistente;

- incorporação de um vasto conjunto de tecnologias e tipos de documentos;

- “leitura universal”.

Para isso, implementa três ferramentas importantes:
- um protocolo de transmissão de dados - HTTP;
- um sistema de endereçamento próprio - URL;
- uma linguagem de marcação, para transmitir documentos formatados através da rede - HTML.


HTTP significa HyperText Transfer Protocol - Protocolo de Transferência de Hipertexto.
O HTTP é o protocolo usado para a transmissão de dados no sistema World-Wide Web. Cada vez que você aciona um link, seu browser realiza uma comunicação com um servidor da Web através deste protocolo.

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.icmc.usp.br/ensino/material/html/url.html
Esse endereço identifica:
- o protocolo de acesso ao recurso desejado (http),
- a máquina a ser contactada (www.icmc.usp.br),
- o caminho de diretórios até o recurso (ensino/material/html/), e
- o recurso (arquivo) a ser obtido (url.html).

Através de URLs também acionamos programas (scripts), enviamos parâmetros para esses programas, etc.

HTML significa HyperText Markup Language - Linguagem de Marcação de Hipertexto.

Não é possível programar em linguagem HTML, pois ela é simplesmente uma linguagem de marcação: ela serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto.

Os browsers são os responsáveis por identificar as marcações em HTML e apresentar os documentos conforme o que foi especificado por essas marcações.

retirado de http://www.icmc.usp.br/ensino/material/html/www.html

Links para www

definição no wikipedia - http://pt.wikipedia.org/wiki/World_Wide_Web
manual html - http://www.criarweb.com/artigos/10.php