Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Introdução à HTML e CSS

Primeiros passos para a criação de um website
by

Marcelo Marques

on 27 October 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Introdução à HTML e CSS

introdução à HTML CSS e HTML CONTEÚDO TEXTO IMAGENS VÍDEOS abc CSS APARÊNCIA CORES MEDIDAS POSIÇÃO como funciona? MARCAÇÃO
É FEITA COM <TAGS> ANATOMIA <html> </html> <head> </head> <body> </body> cabeça do site corpo do site CABEÇA O QUE O HTML PRECISA SABER
PARA INTERPRETAR A PÁGINA scripts declarações CORPO CONTEÚDO VISÍVEL NA PÁGINA textos imagens vídeos etc. TIPOS DE TAGS TAG CONTÂINER envolve um conteúdo <title>Girls Generation</title> TAG ABSOLUTA nelas estão todas as informações <img src="Koala.jpg"> nome identifica a tag atributo edita a tag valor valor da edição
(cor, tamanho, local) <img src="Koala.jpg"> nome identifica a tag atributo edita a tag valor valor da edição
(cor, tamanho, local) ELEMENTOS DE UMA TAG inserindo conteúdo ATENÇÃO antes de inserir o conteúdo, salve seu arquivo principal.html se estiver usando o Bloco de Notas, escolha Todos os arquivos na seção Tipos, ao salvar HEAD BODY personalizando o título TAG <title>Girls Generation</title> RESULTADO inserindo textos: parágrafo TAG <p>Dragon Ball Z, meu compromisso é sempre vencer.</p> inserindo textos: títulos TAG <h1>Atirei o pau no gato-tô.</h1>
<h2>Atirei o pau no gato-tô.</h2>
<h3>Atirei o pau no gato-tô.</h3>
<h4>Atirei o pau no gato-tô.</h4>
<h5>Atirei o pau no gato-tô.</h5>
<h6>Atirei o pau no gato-tô.</h6> inserindo imagens <img src="bichano.jpg"> tag atributo
(source = recurso) valor
(imagem) agora, vamos estilizar! como funciona? CSS CASCADING STYLE SHEET FOLHA DE ESTILOS EM CASCATA ANATOMIA p {
color: #FF0000;

} SELETOR quem será estilizado PROPRIEDADE o que será estilizado VALOR como será estilizado TIPOS DE ESTILOS ESTILO INLINE FOLHA INTERNA FOLHA EXTERNA feito dentro da tag <p style="color: #FF0000"> feito dentro do HTML, entre as tags HEAD <style type="text/css">

p {
color: #FF0000;

}

</style> feito em arquivo separado, podendo controlar
várias páginas de uma só vez CSS HTML HTML HTML estilizando o conteúdo inserindo uma folha de estilos INTERNA entre as tags <head> e </head> <style type="text/css">


</style> CONHEÇA ALGUMAS PROPRIEDADES parágrafos (p) e cabeçalhos (h1 - h6) COR color: #000000; propriedade
(cor) valor
(hexadecimal: preto) TAMANHO font-size: 1em; propriedade
(cor) valor
(hexadecimal: preto) FONTE font-family: Arial, Helvetica, sans-serif ; propriedade
(família da fonte) valor
(tipo da fonte) APLICANDO À FOLHA INTERNA <style type="text/css">

p {
color: #000000;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;


</style> corpo do site (body) COR DE FUNDO background-color: #000000; propriedade
(cor) valor
(hexadecimal: preto) IMAGEM DE FUNDO background-image: url(Koala.jpg); propriedade
(imagem de fundo) valor
(nome da imagem) background-repeat: repeat-y; propriedade
(repetição da imagem de fundo) valor
(nome da imagem) background-position: center top; propriedade
(posição da imagem de fundo) (horizontal) (vertical) HEXADECIMAIS DE 00 A FF #FF0000 R G B em proporção da fonte
no navegador 2em = 2x o tamanho
padrão do
navegador fontes programas como
Adobe Dreamweaver
dispõem das famílias
de fontes mais
utilizadas valores no-repeat: não repete
repeat: repete em todo o fundo
repeat-x: repete na horizontal
repeat-y: repete na vertical valores horizontal: left, center, right;
vertical: top, center, bottom;
Full transcript