Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas para o desenvolvimento de um P rojeto para W EB 2. HTM L Hyper Text M arkup Language
1. Etapas para o desenvolvimento de um projeto para w eb (site) O planejamento é a chave para a produção de um site que pretende alcançar seus objetivos, tais como: vender, apresentar um trabalho, informar, recolher dados para pesquisa, criar uma comunidade, divulgar eventos, etc. Planejando antecipadamente a estrutura do site, iremos, com certeza, ganhar tempo na produção, evitar correções sobre correções, adequar o tempo disponível para a produção de forma a aproveitá lo melhor, distribuir as tarefas entre os componentes da equipe e ainda escolher as ferramentas adequadas. Existem muitas formas de se trabalhar a construção de um site, mas algumas etapas são inevitáveis: 1. Levantamento do conteúdo: (Texto, imagens, vídeos, etc). É necessário conhecer o conteúdo do site para poder disponibilizá lo de maneira adequada dentro dos recursos disponíveis na internet. (Ex.: hipertexto). 2. A partir deste conteúdo, estabelecer a estrutura do site destacando os pontos fortes do material levantado considerando o perfil do público que se deseja alcançar. O levantamento deste perfil é importante para se estabelecer tanto os recursos tecnológicos a serem utilizados (largura de banda, plataforma, plugins, etc.) como também as características da interface que irá manter o contato (interação) entre a informação e o usuário. 3. Conhecendo o conteúdo, o público, a estrutura principal do site e a tecnologia já podemos estabelecer um caminho para o desenvolvimento do P rojeto Gráfico. O P rojeto Gráfico Neste ponto, é preciso criar a interface que permitirá ao usuário acessar a informação de forma confortável, agradável e rápida. Precisamos estudar: as diferentes resoluções dos monitores (ex.: 800 x 600), o número de cores possíveis nestas resoluções, o brilho e o contraste que interferem na visualização da interface, a forma como os diversos sistemas operacionais (plataformas) tratam as cores, o tipo de imagem que melhor se adapta a proposta (JPG, GIF, Vetor), a possibilidade da não existência das fontes utilizadas (evitando quebra do layout). Estrutura do site Por estrutura do site, podemos entender a organização da navegação deste site como também a sua organização física dentro do servidor.
No primeiro caso, estaremos discutindo a forma como o conteúdo foi desmembrado quando da produção do projeto e como o usuário poderá acessar este conteúdo sem se perder em páginas sem ligações lógicas entre si. Exemplo: No segundo caso, detectamos a necessidade de organizar o material dentro de uma estrutura física no computador para tornar o trabalho mais rápido inclusive no momento das atualizações das informações. Aqui, devemos dividir o material por categorias: texto, imagens, animações, sons, vídeos, etc., criando uma hierarquia lógica com o uso das pastas e sub pastas.
2. Conceitos Básicos da HTML O que é HTM L? HTML (HyperText Markup Language) é uma linguagem de marcação de hipertexto. Trata se de um conjunto de indicadores que são inseridos em um texto efetuando uma marcação que informará ao Browser (navegador) como tratá lo. Características do HTM L Documentos HTML são arquivos escritos em ASCII texto. Podem ser criados em qualquer editor de texto. Existem editores específicos para várias plataformas. Existem conversores de vários formatos, por exemplo, doc para html A unidade mínima de informação é a página Há diferenças entre os diversos navegadores disponíveis. Nem todas as marcações e seus recursos são suportados por todos eles. Quando um navegador não entende uma determinada marcação, ele a ignora e o objetivo pretendido não é alcançado. Estrutura A estrutura básica da HTML: Elementos (palavras ou letras) contidos entre os sinais < e > criam links, formatam texto, criam tabela ou formulários. Exemplo: <b > Texto em Negrito </ b > Tags vazias <br> (break line) Algumas "tags" contém atributos para controle de sua aparência. <HR size= 3 w idth= 80% align= left > Cria uma linha divisória com a espessura determinada pelo parâmetro size=3, ocupando uma largura igual a 80% da largura do browser w idth=80% e alinhada a esquerda align=left, Documento html ou htm. Estrutura básica Algumas tags são obrigatórias e têm sua posição definida dentro do arquivo:
<HTM L> (indica o começo do documento html) <HEA D> (Indica o início do cabeçalho) <TI TLE> Título do documento </ TI TLE> (Indica a seção de título e fica dentro da seção de cabeçalho) </ HEA D> (Fim da seção de cabeçalho) <BODY > (Inicio do corpo do documento) (Conteúdo Variável) </ BODY > (Fim do corpo) </ HTM L> (Fim do documento) Para inserir comentários de uma linha <! P arte principal da página> Para inserir comentários de mais de uma linha <! P arte principal da página > Tags de formatação: <p > e </ p > Insere um parágrafo <p align=center> <p align=right> < p align=left> <p align=justify > Insere um parágrafo alinhado: ao centro, à direita, à esquerda e justificado <br> Quebra forçada de linha <b > </ b > ( BOLD) <i> < / i> ( I TÁ LI CO) <u> </ u > ( SUBLI NHA DO) Cabeçalho <Hn> Chamada Importante < / Hn> Onde n representa um número entre 1 e 6 que especifica o nível do cabeçalho (1 maior e 6 menor) <H1> Chamada Importante < / H1>... <H6> Chamada Importante < / H6>
Exemplo: <Hn align=alinhamento> Subscrito H<sub > 2 < / sub >O Sobrescrito m< sup >2 </ sup > Resultados: Outros: Espaçamento Único ( Teletype) <TT> </ TT > Todos os caracteres ocuparão o mesmo espaço. Tachado <strike> </ strike> Texto M aior <big> </ big> Texto M enor
<small> < / small> Texto P ré formatado <pre> </ pre> O navegador (browser) respeita o texto da forma que foi formatado no código fonte. Recuos <blockquote > < / blockquote> Atributos de fonte <FONT> conteúdo do texto </ FONT> <font color= red (ou #ff0000) face= arial, times size= 2 (1 a 7) > Texto em arial, vermelho e tamanho 2 </ font> Algumas cores e seus valores hexadecimais: Black = #000000 White = #FFFFFF Red = #FF0000 Orange = #FF8000 Yellow = #FFFF00 Blue = #0000FF Green = #008000 P adrões da P ágina <BODY text=cor BGCOLOR=cor> Acentos e caracteres especiais Exemplos : ç = ç ou ç Ç = Ç ou Ç = ou = ou I magens Formatos Compuserve Bitmap, GIF e JPG. <IMG>
Atributos: Localização (source) <I M G SRC= imagem.gif > Inserção direta da imagem <I M G SRC= imagens / foto.jpg > Inserção da imagem foto.jpg que se encontra dentro do diretório imagens abaixo do diretório atual. <I M G SRC=../ imagens / foto.jpg > Inserção da imagem foto.jpg que se encontra dentro do diretório imagens que está em um diretório acima do diretório atual. <I M G SRC= imagens / foto.jpg w idth=200 height= 100 align =top> Inserção da imagem foto.jpg que se encontra dentro do diretório imagens abaixo do diretório atual. Aqui usamos os parâmetros w idth (largura) e height (altura) para definir o tamanho de exibição desta imagem. O parâmetro align=top garante o alinhamento da imagem no topo da página. <I M G SRC= imagens / foto.jpg w idth=200 height= 100 align =top alt= Texto substituto > O parâmetro alt= assegura a exibição de um texto substituto no lugar da imagem caso esta não apareça ou um texto que explica esta imagem quando o cursor está sobre ela. <BODY background = imagens / fundo.jpg > Imagem inserida como background da página Uso de hiperlinks O uso do hiperlink é fundamental na construção de um site, uma vez que possibilita o acesso as informações organizadas dentro do próprio site ou em outros sites. Para criarmos um link, usamos o seguinte recurso: <A > < / A > ( Â ncora )
O complemento HREF ou Referência de hipertexto possibilita incluir o endereço desejado ou a url ( Uniform Resource Location ). <A HREF= url> </ A > Então, para criar um link para o site da Universidade Anhembi Morumbi: <a href= http:/ / w w w.anhembi.br > Universidade Anhembi Morumbi </a> Dentro do mesmo documento, podemos usar a âncora para pular para uma parte do texto que está em qualquer parte da página. <A NAME= capitulo1 > Nomeia o ponto que deve ser acessado <A HREF= # capitulo1 >Vá para o capítulo 1</a> Posiciona o ponto nomeado no topo da página Transferência de arquivos FTP <A HREF= ftp://ftp.host.com.br/pub/exemplo.exe > (entre aspas) Arquivo de exemplo</ A > Correio eletrônico <A HREF= mailto:meuemailr@servidor.com.br > (entre aspas) A lterando a cor dos links a partir de parâmetros colocados na tag BODY <BODY LI NK= cor A LI NK= cor VLI NK= cor > Não visitados (LINK) Ativos (ALINK) Visitados (VLINK) Listas Ordenadas Quando um navegador encontra uma "tag" iniciando uma lista ordenada (também conhecida como lista numerada), ele passa a mostrar cada item utilizando números ou letras. Por exemplo: P ara fazer um página HTM L, você deve : 1. Organizar o material 2. Trabalhar o lay out 3. Abrir o editor de textos 4. Usar as "tags" corretas 5. Salvar no formato htm
6. Testar várias vezes no navegador Para fazer uma lista ordenada, utilizamos os seguintes comandos: < OL > Lista ordenada < LI > Início de um item da lista < / LI > Fim de um item da lista < / OL > Fim da lista Pode se especificar o tipo de numeração desejada inserindo dentro da "tag" < OL > a opção TY P E="...". Por exemplo: Passos de uma resenha: < OL TY P E=" i" > < LI >Sumário< /LI > < LI >Introdução< /LI > < LI >Primeira Parte< /LI > < LI >Segunda Parte< /LI > < LI >Bibliografia< /LI > < LI >Sobre o Autor< /LI > < /OL > Resultado: Passos de uma resenha: i. Sumário ii. Introdução iii. Primeira Parte iv. Segunda Parte v. Bibliografia vi. Sobre o Autor Temos também: < OL TY P E=" I " > < OL TY P E=" A " > < OL TY P E=" a" > Listas N ão ordenadas As listas não ordenadas são iniciadas com a "tag" < UL > e são respectivamente terminadas com < / UL >. Seus itens são iniciados por < LI > e finalizados por </ LI >, da mesma forma que as ordenadas. Por exemplo:
Disciplinas: < UL > < LI >Matemática< /LI > < LI >Ciências Sociais< /LI > < LI >Geografia< /LI > < /UL > Resultado: Disciplinas: Matemática Ciências Sociais Geografia A opção TY P E="..." também está disponível. < UL TY P E=" disc" > < UL TY P E=" square" > < UL TY P E=" circle" > Barras horizontais A marcação <HR > produz uma linha horizontal no documento. É possível determinar uma largura maior para as barras, utilizando se a extensão "size". <hr size=10> <hr size=20> É ainda possível determinar o quanto da largura da página a linha horizontal vai ocupar. Para isso utiliza se a extensão width=. <hr size=10 w idth=75% > <hr size=20 w idth=100% > <HR w idth=70% align=left size=10 noshade> (sem sombra) Tabelas O recurso de tabelas é fundamental para a montagem das páginas Web, pois permite dividir a tela em linhas e colunas formando as células onde é possível inserir tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas.
Exemplo: Tag inicial: TABLE <table>...</ table> Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas linhas e células somente serão consideradas se incluidas entre <table> e </ table>. <table> <tr> <td>conteúdo A</td> <td>conteúdo B</td> </ tr> </ table> TR <tr >...< / tr> Indica o início e o final de uma determinada linha da tabela (Table Row). TD <td>...</ td> I ndica um elemento ( célula) da tabela, vindo do inglês " Table Data". Nesta célula serão inseridos os elementos do site. Atributos principais das Tabelas (TABLE) BOR DER
A tribui bordas a tabela. Se for atribuido o valor 0 ( zero), a tabela não apresentará bordas e será possível a confecção de tabelas mais compactas. Exemplo: <table border=" 4" > CELLSP A CI NG I ndica quanto espaço, em pixels, deve ser inserido entre as células da tabela. Exemplo: <table cellspacing =" 10" > CELLP A DDI NG I ndica quanto espaço, em pixels, deve ser inserido entre as bordas das células e seu conteúdo. Exemplo: <table cellpadding =" 5" > W I DTH Estabelece a largura da tabela. Usa se como medida o número de pixels desejado ou uma porcentagem da largura do documento. Exemplos: <table w idth=" 300" > <table w idth=100% > BA CKGROUND Especifica uma imagem que será utilizada como " fundo" da tabela. Exemplo: <table background=" imagem.gif" > BGCOLOR Especifica uma cor de fundo para a tabela. Exemplo: <table bgcolor=" yellow " > ou <table bgcolor= # ffff00 > BOR DER COLOR
Especifica uma cor para as bordas da tabela. Exemplo: <table bgcolor=" yellow " bordercolor=" blue" > A lguns destes atributos podem ser usados também nas tags <TR> e <TD> Exemplo: <table w idth=100% border=1 bgcolor= # ffff00 cellspacing= 0 cellpadding =0 background= fundo.gif > <tr bgcolor= w hite > <td align=left valign=top>conteúdo A < / td> <td align=right valign=bottom >Conteúdo B</ td> </ tr > </ table> 3. Saiba Mais Exemplo de HTM L completo e comentado: Observações em vermelho, comandos em preto <html> ("tag" inicial) <head> (inicio do cabeçalho) <title>primeiro site em HTML< / title> (título da página) </ head> (fim do cabeçalho) <body bgcolor= #aaaaaa text=# 000000 link=# 333333 vlink=#440000> (início do corpo da página com fundo cinza, texto preto, links cinzas e links visitados vermelhos) <center> (centraliza a tabela na página) <table background=" imagens / fundotabela.jpg" w idth=600 cellspacing =0 cellpadding =0 border= 0> (início da tabela com uma imagem de fundo, largura = 600 pixels, sem borda e com espaços extras excluídos) <tr > (início da primeira linha da tabela>
<td align =left valign =top> (iníicio da primeira coluna alinhada a esquerda e no topo) <img src=" imagens / logo.gif" border= 0>(carregamento da primeira imagem = o logo que tem fundo transparente = que se encontra na pasta imagens ) </ td > (fechamento da primeira coluna) <td align =left valign =top> (início da segunda coluna alinhada a esquerda e no topo) <a href=" index.htm" ><img src=" imagens / b home.gif" border=0></ a> (carregamento da segunda imagem = o botão home que tem fundo transparente) e está com link para a página index.htm) </ td> (fechamento da Segunda coluna) <td align =left valign =top> (início da terceira coluna alinhada à esquerda e no topo) <a href=" contato.htm " ><img src=" imagens / contato.gif" border= 0></ a> (carregamento da terceira imagem = o botão contato que tem fundo transparente) e está com link para a página contato.htm) </ td > (fechamento da terceira coluna) <td align =left valign =top> (início da quarta coluna alinhada à esquerda e no topo) <a href=" noticias.htm" ><img src=" imagens / noticias.gif" border=0></ a> (carregamento da quarta imagem = o botão noticias que tem fundo transparente) e está com link para a página noticias.htm) </ td > (fechamento da quarta coluna) <td align =left valign =top> (início da quinta coluna alinhada à esquerda e no topo) <a href=" links.htm" ><img src=" imagens / links.gif" border=0></ a> (carregamento da quinta imagem = o botão links que tem fundo transparente) e está com link para a página links.htm) </ td > (fechamento da quarta coluna) <td align =left valign =top> (início da sexta coluna alinhada a esquerda e no topo) <a href=" portfolio.htm " ><img src=" imagens / portfolio.gif" border= 0></ a> (carregamento da sexta imagem = o botão portfolio que tem fundo transparente) e está com link para a página portfolio.htm) </ td> (fechamento da sexta coluna) </ tr > (fechamento da primeira linha
<tr > (inicio da Segunda linha) <td align =left valign =middle colspan=4 bgcolor= #ffffff> (início da coluna de texto que se expande por 4 das colunas acima, tem fundo branco, está alinhada à esquerda e centralizada verticalmente) <font face=verdana size=2 color=# 000000> (marcação da fonte utilizada, verdana, tamanho 2 e de cor preta) <br> (salto de linha) <dd> (utilizado no início da frase cria um parágrafo) Qualquer texto que apresente o conteúdo do site e sirva para testarmos a formatação da página juntamente com a imagem colocada à direita. </ td> (fechamento da coluna quadrupla) <td align =center valign=middle colspan= 2 bgcolor=#ffffff> (início da coluna com a imagem que se expande por 2 das colunas acima, tem fundo branco, está alinhada ao centro na horizontal e na vertical) <br> (salto de linha) <img src=" imagens / passaro.jpg" > (carregamento da imagem do pássaro) <br><br> (duplo salto de linha) </ td> (fechamento da coluna dupla) </ tr > (fechamento da segunda linha) <tr > (início da terceira linha) <td align =left valign =middle colspan=4 bgcolor= #ffffff> (início da coluna de texto que se expande por 4 das colunas acima, tem fundo branco, está alinhada à esquerda e centralizada verticalmente) <font face=verdana size=2 color=# 000000> (escolha da fonte verdana, tamanho 2 e de cor preta) <dd> (utilizado no início da frase cria um parágrafo) Qualquer outro texto que complemente o estudo acima e sirva para atualizar este conteúdo. Precisamos apenas lembrar de expandir as colunas para não separarmos os botões. <br><br><br><br> (quatro saltos de linha) </ td> (fechamento da coluna)
<td align =center valign=top colspan= 2 bgcolor=#ffffff> (início da coluna com a imagem que se expande por 2 das colunas acima, tem fundo branco, está alinhada ao centro na horizontal e na vertical) <img src=" imagens / radio.jpg" > (carregamento da imagem do rádio) </ td> (fechamento da coluna) </ tr > (fechamento da terceira linha) <tr > (início da Quarta linha) <td align =left valign =top colspan=6 > (início da coluna de texto que se expande pelas 6 colunas acima, está alinhada à esquerda e no topo) <font face=verdana size=2 color=# 000000> (escolha da fonte verdana, tamanho 2 e de cor preta) <dd> (utilizado no início da frase cria um parágrafo) Esta linha não está dividida em texto e imagem, portanto, expande suas colunas ao número máximo, ou seja, 6 que é o total de colunas montadas no menu. <dl> (início de uma lista de itens) <dd> (utilizado no início da frase cria um parágrafo)<li>(desenha um ponto de lista) item um<br> <dd> (idem)<li>(idem)item dois< br> <dd> (idem)<li>(idem)item tres< br> </ dl> (fechamento da lista) <dd> (utilizado no início da frase cria um parágrafo)esta linha não está dividida em texto e imagem, portanto expandi suas colunas ao número máximo, ou seja, 6 que é o total de colunas montadas no menu. <br><br><br><br> (quatro saltos de linha) </ td> (fechamento da coluna) </ tr > (fechamento da Quarta linha) <tr > (início da Quinta linha) <td align =center valign=top colspan= 6 bgcolor=#000000> (abertura de uma coluna expandida por 6 e com fundo preto, alinhada ao centro) <font face = verdana size = 1 color=# ffffff> Rodapé contendo informações da página e os links principais< / font>
(alteração da fonte para tamanho 1 e cor branca) </ td> (fechamento da coluna) </ tr > (fechamento da Quinta linha) <tr > (início da Sexta linha) <td bgcolor=# ffffff colspan= 6> (abertura de uma coluna expandida por 6 e com fundo branco) <br> (salto de linha) </ td> (fechamento da coluna) </ tr > (fechamento da sexta linha) </ table> (fechamento da tabela) </ body> (fechamento do corpo da página) </ html> (fechamento da html) 4. Bibliografia DOTTA, Sílvia. Construção de sites. São Paulo: Editora Global, 2000. LEMAY, Laura. A prenda em 1 semana HTM L 4. São Paulo: Campus, 1998. SIEGEL, David. Criando sites arrasadores na W eb I I I : a arte da terceira geração em design de sites. São Paulo: Market Books, 2000. WEINMANN, Lynda. Design criativo com HTM L. 2 Rio de Janeiro: Editora Ciência Moderna, 2002