Programação e Designer para WEB

Tamanho: px

Começar a partir da página:

Download "Programação e Designer para WEB"

Paula Amorim Carmona
10 Há anos
Visualizações:

1 Programação e Designer para WEB html Prof. Rodrigo Rocha [email protected] Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação em. Linguagem de Programação PHP. Conceitos de acessibilidade e usabilidade para Web. 1

com Apresentação Onde Estamos Introdução a hipertexto. A linguagem.

2 IIS C:\inetpub\www Apache \var\www Diretórios em servidor web Arquivos colocados nestes diretórios são lidos pela raiz do site: Exemplo: c:\inetpub\www\seila.html Estrutura básica <> <HEAD> <TITLE>Titulo do Documento</TITLE> </HEAD> <BODY> texto, imagem, links,... </BODY> </> 2

$c:\inetpub\www\seila.html http://www.site.com.br/seila.$

3 Tags <p> texto </p> Parágrafo no texto, ao final pula linha Podemos também alterar o alinhamento do texto <p align= left > left Texto à esquerda </p> <p align= center > Texto à esquerda </p> <p align= right > Texto à esquerda </p> <p align= justify > Texto à esquerda </p> <div> texto </div> Diferente do <p> ele não pula linha no parágrafo Usado para agrupar elementos que utilizem o mesmo estilo <br> Quebra linha Tags <hr> Desenha uma linha separadora <center></center> Posiciona texto, imagens no centro Formatando textos <b></b> Texto em negrito <i></i> Texto em itálico <u></u> Texto sublinhado 3

Diferente do <p> ele não pula linha no parágrafo Usado para agrupar elementos que utilizem o mesmo estilo <br> Quebra linha Tags <hr> Desenha uma

4 Formatando a página <body bgcolor= # > </body> Coloca vermelho como cor de fundo <body background= figure figure.jpg jpg </body> Coloca o fundo sendo a figura <body TEXT="#FFFFFF LINK="#FFFF00 VLINK="#33FF33 ALINK="#FF0000" > Link = cor dos links quando é clicado Tabela de cores Vlink = cor dos links visitados Alink = cor do link Formatando cor, tamanho e tipo de letra <FONT COLOR="#rrggbb">Texto</FONT> <FONT SIZE=tamanho_da_letra>Texto</FONT> <FONT FACE="Verdana" COLOR="#0000AA">Fonte Verdana azul</font> Tipos da letra Arial Verdana Times New Roman Wingdings Webdings Courier Fixedsys System Terminal Inserindo Imagem <IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> 4

visitados Alink = cor do link http://www.mxstudio.com.br/conteudos/dreamweaver/cores.

5 Links <a href= pagina_que_vou.html >texto</a> A palavra texto é um link para pagina_que_vou.html <a href= pagina pagina_que_vou.html html ><img src= figura.jpg jpg ></a> A imagem é um link para pagina_que_vou.html Tabela <table border= 1 > </table> Contrir tabelas com borda de 1pixel <tr></tr> Cria uma linha na tabela <td></td> Cria uma nova célula Tabelas tag <table> </table> atributos Width Define a largura da tabela em pixels ou porcentagem de ocupação da tela (ex. 80%) Align Especifica o alinhamento horizontal da tabela Left, center ou right Bgcolor Escolhe a cor do fundo da tabela Border Define o tamanho da borda da tabela Cellpadding Define a distância da borda até o texto Cellspacing Define o espaço entre as células 5

html Tabela <table border= 1 > </table> Contrir tabelas com borda de 1pixel <tr></tr> Cria uma linha na tabela <td></td> Cria uma nova célula Tabelas tag <table> </table> atributos

6 Tabela Linha - tag <tr></tr> Align Define o alinhamento horizontal (left, right ou center) Valign Define o alinhamento vertical (left, right ou center) Tabela Célula - tag <td></td> Align Define o alinhamento horizontal (left, right ou center) Valign Define o alinhamento vertical (left, right ou center) Bgcolor Define a cor do fundo Width Define a largura da celula em pixels ou porcentagem (ex. 50%) Colspan Mescla um certa quantidade de colunas rowspan Mescla um certa quantidade de linhas Listas Lista não ordenada <UL> <LI>Item 1 <LI>Item 2 </UL> Lista Ordenada <OL> <LI>Item 1 <LI>Item 2 </UL> 6

ou center) Bgcolor Define a cor do fundo Width Define a largura da celula em pixels ou porcentagem (ex.

7 - Exercício Criar um site de revenda de veículos, que mostre a foto do carro e seu valor. E agora, acabou de chegar mais carros???? Como atualizamos este site??? Contratamos um estagiário?!?!?!?!?!? Bibliografia Livro texto MELO, Alexandre Altair De; NASCIMENTO, Mauricio G.F. PHP PROFISSIONAL : APRENDA A DESENVOLVER SISTEMAS PROFISSIONAIS ORIENTADOS A OBJETOS COM PADRÕES DE PROJETOS. 1ª ed. São Paulo: Novatec, 2007 BUDD, Andy; MOLL, Cameron; COLLISON, Simon. Criando Páginas Web com CSS : Soluções avançadas para padrões WEB.1ª ed. São Paulo: Pearson Education, 2007 ZELDMAN, Jeffrey. Projetando Web Sites Compatíveis. 1.ed. Rio de Janeiro: Campus, Complementar ANSELMO, Fernando. PhP4 e MySQL: maior, melhor e totalmente sem cortes. 1.ed. Florianópolis: Visual Books, NIELSEN, Jakob. Projetando Websites: a prática da simplicidade. 1.ed. Rio de Janeiro: Campus, DAMASCENO, Anielle. Webdesign: teoria e prática. 1.ed. Florianópolis: Visual Books,

1ª ed. São Paulo: Novatec, 2007 BUDD, Andy; MOLL, Cameron; COLLISON, Simon. Criando Páginas Web com CSS : Soluções avançadas para padrões WEB.1ª ed. São Paulo: Pearson Education, 2007 ZELDMAN, Jeffrey.

Documentos relacionados

Programação e Designer para WEB

Programação e Designer para WEB PHP Prof. Rodrigo Rocha [email protected] http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem HTML. Ambientes para programação